Merge branch '14-issue' into 'main'

Resolve "Broodkruimelpad toevoegen"

Closes #14

See merge request ictu/devops/algoritmeregister/algoritmeregister!14

backend/app/routers/default.py

@@ -28,3 +28,10 @@ async def get_one(id: str, db: Session = Depends(get_db)):
         .filter(models.algoritme.Algoritme.id == id)
         .first()
     )
+
+
+@router.get("/algoritme-simple-list/")
+async def get_simple_list(db: Session = Depends(get_db)):
+    return db.query(
+        models.algoritme.Algoritme.id, models.algoritme.Algoritme.name
+    ).all()

frontend/app.vue

@@ -14,7 +14,7 @@ const { t } = useI18n()
   </div>
   <AppHeader />
   <AppContentBar v-if="false" />
-  <AppBreadcrumb v-if="false" />
+  <AppBreadcrumb />
 
   <div class="container columns columns--sidebar-left row">
     <NuxtPage />

frontend/components/views/AppBreadcrumb.vue

@@ -1,18 +1,58 @@
 <template>
-  <div class="row row--page-opener">
+  <div class="row row--page-opener" v-if="breadcrumbs.length != 0">
     <div class="container">
       <div class="breadcrumb">
-        <p>U bent hier:</p>
+        <p>{{ t('you-are-here') }}:</p>
         <ol>
-          <li>
-            <a href="#">Zoeken</a>
+          <li v-for="crumb in breadcrumbsWithLinks">
+            <a v-if="crumb.routeName != null" :href="`/${crumb.routeName}`">{{
+              crumb.label
+            }}</a>
+            <span v-if="crumb.routeName == null">{{ crumb.label }}</span>
           </li>
-          <li>
-            <a href="#">Zoekresultaten</a>
-          </li>
-          <li>Regeling</li>
+          <li>{{ pathTail.label }}</li>
         </ol>
       </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { navigationItems } from '@/config/config'
+import { useI18n } from 'vue-i18n'
+import algoritmeService from '@/services/algoritme'
+import { AlgNamesOnly } from '~~/types/algoritme'
+const { t } = useI18n()
+const currentRoute = useRoute()
+
+const { data } = await algoritmeService.getNames()
+let nameList = ref(data.value as AlgNamesOnly[])
+
+const navigationItemsTranslated = computed(() =>
+  navigationItems.map((item) => {
+    return { label: t(item.label), routeName: item.routeName }
+  })
+)
+
+const navigationItemsWithoutLink = ['footer']
+
+const breadcrumbs = computed(() => {
+  const path = currentRoute.path
+  const breadCrumbs = path != '/' ? path.split('/').slice(1) : []
+
+  return breadCrumbs.map((crumb) => {
+    return {
+      label:
+        // translate path parts with a name matching a navigation item
+        navigationItemsTranslated.value.find((item) => item.routeName == crumb)
+          ?.label || // translate path parts with a name matching an algorithm id
+        nameList.value.find((alg: any) => alg.id == crumb)?.name ||
+        crumb,
+      routeName: navigationItemsWithoutLink.includes(crumb) ? null : crumb,
+    }
+  })
+})
+
+const breadcrumbsWithLinks = computed(() => breadcrumbs.value.slice(0, -1))
+const pathTail = computed(() => breadcrumbs.value.slice(-1)[0])
+</script>

frontend/components/views/AppHeader.vue

@@ -61,7 +61,6 @@
 
 <script setup lang="ts">
 import LanguagePicker from '@/components/LanguagePicker.vue'
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 
@@ -75,7 +74,6 @@ const navigationItems = computed(() => [
     routeName: 'algoritme',
   },
 ])
-
 const currentRoute = useRoute()
 const menuExpanded = ref(false)
 
@@ -84,10 +82,8 @@ watch(currentRoute, () => (menuExpanded.value = false))
 </script>
 
 <style scoped lang="scss">
-
 .active a {
   background-color: $secondary;
   color: $primary-darker !important;
 }
-
-</style>
+</style>

frontend/config/config.ts

@@ -17,4 +17,39 @@ const keys = {
   status: 'status',
 }
 
-export { summaryTiles, keys }
+const navigationItems = [
+  {
+    label: 'navigation.home',
+    routeName: 'index',
+  },
+  {
+    label: 'navigation.algorithmRegister',
+    routeName: 'algoritme',
+  },
+  {
+    label: 'navigation.footer',
+    routeName: 'footer',
+  },
+  {
+    label: 'navigation.over',
+    routeName: 'over',
+  },
+  {
+    label: 'navigation.contact',
+    routeName: 'contact',
+  },
+  {
+    label: 'navigation.vragen',
+    routeName: 'vragen',
+  },
+  {
+    label: 'navigation.privacyverklaring',
+    routeName: 'privacyverklaring',
+  },
+  {
+    label: 'navigation.toegankelijkheid',
+    routeName: 'toegankelijkheid',
+  },
+]
+
+export { summaryTiles, keys, navigationItems }

frontend/locales/en.json

@@ -1,6 +1,7 @@
 {
   "english?": "true",
   "explanation": "Explanation",
+  "you-are-here": "You are here",
   "Ontbreekt": "Missing",
   "locale-en": "English",
   "locale-nl": "Dutch",
@@ -46,7 +47,13 @@
   "hideFilters": "Hide filters",
   "navigation": {
     "home": "Home",
-    "algorithmRegister": "Algorithms"
+    "algorithmRegister": "Algorithms",
+    "footer": "Home",
+    "over": "About",
+    "contact": "Contact",
+    "vragen": "FAQ",
+    "privacyverklaring": "Privacy",
+    "toegankelijkheid": "Accessibility"
   },
   "pagination": {
     "goTo": "Go to page {n}"
@@ -211,4 +218,4 @@
       }
     }
   }
-}
+}

frontend/locales/nl.json

@@ -1,6 +1,7 @@
 {
   "english?": "false",
   "explanation": "Uitleg",
+  "you-are-here": "U bent hier",
   "Ontbreekt": "Ontbreekt",
   "locale-en": "Engels",
   "locale-nl": "Nederlands",
@@ -46,7 +47,13 @@
   "hideFilters": "Verberg filters",
   "navigation": {
     "home": "Home",
-    "algorithmRegister": "Algoritmes"
+    "algorithmRegister": "Algoritmes",
+    "footer": "Home",
+    "over": "Over",
+    "contact": "Contact",
+    "vragen": "Vaak gestelde vragen",
+    "privacyverklaring": "Privacyverklaring",
+    "toegankelijkheid": "Toegankelijkheid"
   },
   "pagination": {
     "goTo": "Ga naar pagina {n}"
@@ -211,4 +218,4 @@
       }
     }
   }
-}
+}

frontend/services/algoritme.ts

@@ -1,5 +1,5 @@
 // import { apiFetch } from '@/utils/fetchApi'
-import type { Algoritme } from '@/types/algoritme'
+import type { Algoritme, AlgNamesOnly } from '@/types/algoritme'
 
 const getAll = () =>
   useFetch<Algoritme[]>('/algoritme/', {
@@ -11,4 +11,9 @@ const getOne = (id: string) =>
     baseURL: useRuntimeConfig().public.apiBaseUrl,
   })
 
-export default { getAll, getOne }
+const getNames = () =>
+  useFetch<AlgNamesOnly[]>('/algoritme-simple-list/', {
+    baseURL: useRuntimeConfig().public.apiBaseUrl,
+  })
+
+export default { getAll, getOne, getNames }

frontend/types/algoritme.ts

@@ -20,3 +20,8 @@ export type AlgoritmeFilter = {
   attribute: string
   value: string
 }
+
+export interface AlgNamesOnly {
+  id: string
+  name: string
+}