WIP: add detail page by id for VZN

next/components/molecules/sections/documentList/DocumentList.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { vznDefaultFilters, VznFilters } from '@backend/meili/fetchers/vznFetcher'
+import { BasicSearch } from '@bratislava/ui-bratislava'
 import { minKeywordLength } from '@utils/constants'
 import { useTranslation } from 'next-i18next'
 import { useEffect, useState } from 'react'
 import { useDebounce } from 'usehooks-ts'
 
-import { BasicSearch } from '../../../ui/BasicSearch/BasicSearch'
 import DocumentListResults from './DocumentListResults'
 
 const DocumentList = () => {

next/components/ui/BANavBar/BANavBar.tsx

@@ -67,7 +67,7 @@ export const BANavBar = ({
             className="group"
             url="/"
             title={
-              <p className="text-font text-p2 group-hover:text-gray-600">
+              <p className="text-p2 text-font group-hover:text-gray-600">
                 {languageKey === 'en' && <span className="font-semibold">Bratislava </span>}
                 {t('capitalCity')}
                 {languageKey !== 'en' && <span className="font-semibold"> Bratislava</span>}
@@ -343,7 +343,7 @@ const LanguageSelect = ({
           <div className="flex h-auto min-h-[60px] w-full flex-col items-center rounded-lg bg-[#F8D7D4] pt-1 pb-3 shadow-[0_8px_24px_rgba(0,0,0,0.16)]">
             {dropDownOptions?.map((option) => (
               <div
-                className="text-p3 hover:text-p3-semibold text-font mt-3 h-6 w-6"
+                className="text-p3 hover:text-p3-semibold cursor-pointer text-font mt-3 h-6 w-6"
                 key={option.key}
                 onClick={handleChange}
               >

next/components/ui/Footer/Footer.tsx

@@ -17,11 +17,11 @@ export interface FooterProps {
   facebookLink?: string
   instagramLink?: string
   youtubeLink?: string
-  address?: string
-  email?: string
-  phone?: string
+  address?: string | null
+  email?: string | null
+  phone?: string | null
   sections?: FooterSectionProps[]
-  accessibilityLink?: { title: string; url: string }
+  accessibilityLink?: { title: string; url: string } | null
   copyright?: string
   /**
    * Active link should not have url
@@ -46,10 +46,18 @@ export const Footer = ({
 
   return (
     <footer className={cx(className, 'text-p2 text-gray-600')}>
-      <section className="flex items-center justify-between pt-14" aria-label="Logo and Social Media Links">
+      <section
+        className="flex items-center justify-between pt-14"
+        // TODO add translations
+        aria-label="Logo and Social Media Links"
+      >
         <BABrand />
         <div className="flex items-center justify-between lg:w-52">
-          <nav className="hidden cursor-pointer gap-4 text-gray-400 lg:flex" aria-label="Social Media Links">
+          <nav
+            className="hidden cursor-pointer gap-4 text-gray-400 lg:flex"
+            // TODO add translations
+            aria-label="Social Media Links"
+          >
             {facebookLink && (
               <a href={facebookLink} target="_blank" rel="noreferrer">
                 <FBLogo />
@@ -72,7 +80,10 @@ export const Footer = ({
         </div>
       </section>
 
-      <section aria-label="Contact Info and Sections" className="flex flex-col gap-x-28 py-14 xl:flex-row">
+      <section
+        aria-label="Contact Info and Sections"
+        className="flex flex-col gap-x-28 py-14 xl:flex-row"
+      >
         <div className="flex flex-col gap-y-6 xl:gap-y-16" aria-label="Contact Info">
           <p className="whitespace-pre-wrap leading-6">{address}</p>
           <div className="flex flex-col gap-y-1 underline xl:gap-y-5">

next/components/ui/Panel/Panel.tsx

@@ -6,7 +6,12 @@ export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
   overflowVisible?: boolean
 }
 
-export const Panel = ({ className, hoverable = false, overflowVisible = false, ...rest }: PanelProps) => (
+export const Panel = ({
+  className,
+  hoverable = false,
+  overflowVisible = false,
+  ...rest
+}: PanelProps) => (
   <div
     // TODO added bg-white shadow class back in. We should find why it was there in first place.
     className={cx(className, 'rounded-lg bg-white shadow', {

next/graphql/queries/Pages.graphql

@@ -37,55 +37,7 @@ query PageBySlug($slug: String!, $locale: I18NLocaleCode!) {
   }
 }
 
-query VznDetail($id: ID!) {
-  vzn(id: $id) {
-    data {
-      id
-      attributes {
-        title
-        validFrom
-        mainDocument {
-          data {
-            attributes {
-              url
-              size
-              ext
-              createdAt
-            }
-          }
-        }
-        cancellationDocument {
-          id
-          title
-          document {
-            data {
-              attributes {
-                url
-                size
-                ext
-                createdAt
-              }
-            }
-          }
-        }
-        amedmentDocument {
-          id
-          title
-          document {
-            data {
-              attributes {
-                url
-                size
-                ext
-                createdAt
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+
 
 fragment GeneralPage on PageEntityResponseCollection {
   data {

next/graphql/queries/Vzns.graphql

@@ -0,0 +1,82 @@
+query VznStaticPaths($page: Int, $limit: Int) {
+  vzns(pagination: { page: $page, pageSize: $limit }) {
+    data {
+      id
+    }
+  }
+}
+
+query VznById($id: ID!, $locale: I18NLocaleCode!) {
+  vzn(id: $id) {
+    data {
+      ...VznEntity
+    }
+  }
+
+  footer(locale: $locale) {
+    ...Footer
+  }
+
+  mainMenu: pageCategories(locale: $locale) {
+    ...MainMenuItem
+  }
+}
+
+query VznDetail($id: ID!) {
+  vzn(id: $id) {
+    data {
+      ...VznEntity
+    }
+  }
+}
+
+fragment VznDocumentEntity on UploadFileEntity {
+  id
+  attributes {
+    url
+    size
+    ext
+    createdAt
+    name
+  }
+}
+
+fragment VznEntity on VznEntity {
+  id
+  attributes {
+    title
+    validFrom
+    details
+    category
+    mainDocument {
+      data {
+        ...VznDocumentEntity
+      }
+    }
+    consolidatedText {
+      data {
+        ...VznDocumentEntity
+      }
+    }
+    amedmentDocument {
+      id
+      title
+      validFrom
+      document {
+        data {
+          ...VznDocumentEntity
+        }
+      }
+    }
+    cancellationDocument {
+      id
+      title
+      validFrom
+      document {
+        data {
+          ...VznDocumentEntity
+        }
+      }
+    }
+  }
+}