From 72f8492d7c81856d9df626679115a7775bfdf16c Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 20 Dec 2023 15:10:57 +0100
Subject: [PATCH] Added: - alpha version of breadcrumps with configuration in
 router

---
 web-app/packages/app/src/App.vue              |  4 +-
 web-app/packages/app/src/router.ts            | 73 +++++++++++++------
 .../packages/app/src/shims-vue-router.d.ts    |  2 +-
 .../lib/src/common/components/AppSection.vue  |  2 +-
 .../layout/components/AppBreadcrumbs.vue      | 39 +++++++---
 .../modules/layout/components/SideBarItem.vue |  8 +-
 .../layout/components/SideBarTemplate.vue     | 10 +--
 .../views/ProjectVersionsViewTemplate.vue     | 34 ++++++++-
 .../views/ProjectsListViewTemplate.vue        | 12 ++-
 .../packages/lib/src/shims-vue-router.d.ts    |  2 +-
 10 files changed, 133 insertions(+), 53 deletions(-)

diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index 7db90208..11058bb7 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -134,6 +134,7 @@ export default defineComponent({
     })
   },
   async created() {
+    this.init()
     await this.fetchConfig()
     if (this.loggedUser) {
       // here is loaded current workspace on startup (and reloaded in watcher when user has changed)
@@ -161,7 +162,8 @@ export default defineComponent({
     ...mapActions(useAppStore, ['setServerError']),
     ...mapActions(useInstanceStore, ['fetchPing', 'fetchConfig', 'initApp']),
     ...mapActions(useNotificationStore, { notificationError: 'error' }),
-    ...mapActions(useUserStore, ['checkCurrentWorkspace', 'updateLoggedUser'])
+    ...mapActions(useUserStore, ['checkCurrentWorkspace', 'updateLoggedUser']),
+    ...mapActions(useLayoutStore, ['init'])
   }
 })
 </script>
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index fb4670ce..a2286929 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -83,7 +83,7 @@ export const createRouter = (pinia: Pinia) => {
           sidebar: SideBar
         },
         meta: {
-          title: 'Dashboard'
+          breadcrump: [{ title: 'Dashboard', path: '/dashboard' }]
         },
         props: {
           default: true
@@ -111,7 +111,11 @@ export const createRouter = (pinia: Pinia) => {
         props: {
           default: true
         },
-        meta: { public: true, title: 'Projects' },
+        meta: {
+          public: true,
+          title: 'Projects',
+          breadcrump: [{ title: 'Projects', path: '/projects' }]
+        },
         children: [
           {
             path: 'explore',
@@ -154,9 +158,7 @@ export const createRouter = (pinia: Pinia) => {
         meta: { public: true },
         beforeEnter: (to, from, next) => {
           next({
-            path: `/projects/${to.params.namespace}/${
-              to.params.projectName
-            }/history`,
+            path: `/projects/${to.params.namespace}/${to.params.projectName}/history`,
             query: { version_id: to.params.version_id }
           })
           return
@@ -174,7 +176,7 @@ export const createRouter = (pinia: Pinia) => {
           default: true
         },
         meta: {
-          title: 'Projects'
+          breadcrump: [{ title: 'Projects', path: '/projects' }]
         },
         redirect: { name: 'project-tree' },
 
@@ -203,25 +205,50 @@ export const createRouter = (pinia: Pinia) => {
             name: 'file-version-detail',
             component: FileVersionDetailView,
             props: true,
-            meta: { public: true }
-          }
-        ].map((child) => ({
-          ...child,
-          beforeEnter: (to, from, next) => {
-            // added project name to matched route
-            to.matched = to.matched.map((route) => ({
-              ...route,
-              meta: {
-                ...route.meta,
-                title:
-                  route.name === to.name
-                    ? (to.params.projectName as string)
-                    : route.meta.title
+            meta: { public: true },
+            // TODO: refactor to function in utils
+            beforeEnter(to, from, next) {
+              to.meta = {
+                ...to.meta,
+                breadcrump: [
+                  {
+                    title: String(to.params.projectName),
+                    path: '/projects/history'
+                  },
+                  {
+                    title: String(to.params.version_id),
+                    path: `/projects/${to.params.namespace}/${to.params.projectName}/history/${to.params.version_id}`
+                  },
+                  {
+                    title: String(to.params.path),
+                    path: to.fullPath
+                  }
+                ]
               }
-            }))
-            next()
+              next()
+            }
           }
-        }))
+        ]
+          // Not apply for project version detail , which have own breadcrump
+          .map((child) =>
+            child.name === 'file-version-detail'
+              ? child
+              : {
+                  ...child,
+                  beforeEnter: (to, from, next) => {
+                    to.meta = {
+                      ...to.meta,
+                      breadcrump: [
+                        {
+                          title: String(to.params.projectName),
+                          path: to.fullPath
+                        }
+                      ]
+                    }
+                    next()
+                  }
+                }
+          )
       },
       {
         path: '/:pathMatch(.*)*',
diff --git a/web-app/packages/app/src/shims-vue-router.d.ts b/web-app/packages/app/src/shims-vue-router.d.ts
index 0395864a..9cbc6fc4 100644
--- a/web-app/packages/app/src/shims-vue-router.d.ts
+++ b/web-app/packages/app/src/shims-vue-router.d.ts
@@ -4,6 +4,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     public?: boolean
     allowedForNoWorkspace?: boolean
-    title?: string
+    breadcrump?: { title: string; path: string }[]
   }
 }
diff --git a/web-app/packages/lib/src/common/components/AppSection.vue b/web-app/packages/lib/src/common/components/AppSection.vue
index f15d06a5..6d146fec 100644
--- a/web-app/packages/lib/src/common/components/AppSection.vue
+++ b/web-app/packages/lib/src/common/components/AppSection.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :class="[
       ground
         ? 'surface-ground'
-        : 'surface-section border-round-2xl overflow-hidden'
+        : 'surface-section border-round-xl overflow-hidden'
     ]"
   >
     <header
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
index 5965acdc..3055b3cf 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -19,11 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   >
     <template #item="{ item, props }">
       <router-link
-        v-if="item.route"
+        v-if="item.path"
         v-slot="{ href, navigate }"
         :to="{
-          params: item.params,
-          name: item.route
+          path: item.path
         }"
         custom
       >
@@ -46,15 +45,35 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { MenuItem } from 'primevue/menuitem'
 import { useRoute } from 'vue-router'
 
+type EnhancedMenuItem = MenuItem & { path: string; active?: boolean }
+
 const route = useRoute()
-const items: MenuItem[] = route.matched
-  .filter((item) => item.meta.title)
-  .map<MenuItem>((item) => ({
-    label: item.meta.title,
-    active: route.name === item.name,
-    route: item.name,
-    params: route.params
+// Merge all matched meta.breadcrumps with current route breadcrumps
+const items = [
+  ...route.matched.reduce<EnhancedMenuItem[]>((acc, curr) => {
+    if (curr.name === route.name) return acc
+
+    const value = [
+      ...acc,
+      ...(curr.meta?.breadcrump ?? []).map((item) => ({
+        label: item.title,
+        path: item.path
+      }))
+    ]
+    return value
+  }, []),
+  // adding current route wich is not in matched meta
+  ...(route.meta.breadcrump ?? []).map((item) => ({
+    label: item.title,
+    path: item.path
+  }))
+]
+  // last will be active
+  .map((item, index, items) => ({
+    ...item,
+    active: index === items.length - 1
   }))
+console.log(items)
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
index 31e2bd2f..287f7bb1 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
@@ -17,10 +17,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <li>
+  <li class="p-2">
     <router-link
       :class="[
-        'sidebar-item__link p-4 flex align-items-center transition-color transition-duration-200 no-underline',
+        'sidebar-item__link p-3 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg',
         item.active && 'sidebar-item__link--active'
       ]"
       :to="item.to"
@@ -41,8 +41,8 @@ export default defineComponent({
     }
 
     &--active {
-      color: var(--surface-a);
-      background-color: var(--forest-color);
+      color: var(--forest-color);
+      background-color: var(--light-green-color);
       font-weight: 600;
     }
   }
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
index 4263b69b..91ef51a2 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
@@ -63,20 +63,20 @@ import { useLayoutStore } from '@/modules/layout/store'
 
 const route = useRoute()
 const layoutStore = useLayoutStore()
-layoutStore.init()
-
-const currentPage = computed(() => route.name)
 
 const initialSidebarItems = computed<SideBarItemModel[]>(() => {
   return [
     {
-      active: currentPage.value === 'dashboard',
+      active: route.matched.some((item) => item.name === 'dashboard'),
       title: 'Dashboard',
       to: '/dashboard',
       icon: 'ti ti-home'
     },
     {
-      active: currentPage.value === 'projects',
+      // TODO: hardcoded path names add to enum
+      active: route.matched.some(
+        (item) => item.name === 'projects' || item.name === 'project'
+      ),
       title: 'Projects',
       to: '/projects',
       icon: 'ti ti-article'
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index b20fe9a3..588db76d 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -6,6 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <app-container>
+    <app-section ground class="flex justify-content-end">
+      <AppMenu :items="filterMenuItems" />
+    </app-section>
     <app-section>
       <PDataView
         :value="items"
@@ -199,11 +202,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { DataViewPageEvent } from 'primevue/dataview'
+import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent, PropType } from 'vue'
 
 import VersionDetailSidebar from '../components/VersionDetailSidebar.vue'
 
 import { AppSection, AppContainer } from '@/common/components'
+import AppMenu from '@/common/components/AppMenu.vue'
 import {
   FetchProjectVersionsParams,
   ProjectVersion,
@@ -224,7 +229,8 @@ export default defineComponent({
   components: {
     AppSection,
     AppContainer,
-    VersionDetailSidebar
+    VersionDetailSidebar,
+    AppMenu
   },
   props: {
     projectName: String,
@@ -272,7 +278,7 @@ export default defineComponent({
         textClass: item.textClass === undefined ? 'opacity-80' : item.textClass
       })) as ColumnItem[],
       options: {
-        sortDesc: [true],
+        sortDesc: true,
         itemsPerPage: this.defaultItemsPerPage ?? 50,
         page: 1
       }
@@ -294,6 +300,24 @@ export default defineComponent({
         ...v,
         disabled: this.disabledKeys.some((d) => d === v.name)
       }))
+    },
+    filterMenuItems(): MenuItem[] {
+      return [
+        {
+          label: 'Newest versions',
+          key: 'newst',
+          sortDesc: true
+        },
+        {
+          label: 'Oldest versions',
+          key: 'oldest',
+          sortDesc: false
+        }
+      ].map((item) => ({
+        ...item,
+        command: (e: MenuItemCommandEvent) => this.menuItemClick(e),
+        class: this.options.sortDesc === item.sortDesc ? 'bg-primary-400' : ''
+      }))
     }
   },
   created() {
@@ -308,7 +332,7 @@ export default defineComponent({
       const params: FetchProjectVersionsParams = {
         page: this.options.page,
         per_page: this.options.itemsPerPage,
-        descending: this.options.sortDesc[0]
+        descending: this.options.sortDesc
       }
       await this.fetchProjectVersions({
         params,
@@ -325,6 +349,10 @@ export default defineComponent({
       this.$router.push({
         path: `history/${name}`
       })
+    },
+    menuItemClick(e: MenuItemCommandEvent) {
+      this.options.sortDesc = e.item.sortDesc
+      this.fetchVersions()
     }
   }
 })
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index b047a134..07c67359 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -101,29 +101,33 @@ export default defineComponent({
       return [
         {
           label: 'Sort by name A-Z',
-          key: 'name',
+          key: 'name-asc',
+          value: 'name',
           sortDesc: false
         },
         {
           label: 'Sort by name Z-A',
-          key: 'name',
+          key: 'name-desc',
+          value: 'name',
           sortDesc: true
         },
         {
           label: 'Sort by last updated',
           key: 'updated',
+          value: 'updated',
           sortDesc: true
         },
         {
           label: 'Sort by files size',
           key: 'meta.size',
+          value: 'meta.size',
           sortDesc: true
         }
       ].map((item) => ({
         ...item,
         command: (e: MenuItemCommandEvent) => this.menuItemClick(e),
         class:
-          this.projectsSorting.sortBy === item.key &&
+          this.projectsSorting.sortBy === item.value &&
           this.projectsSorting.sortDesc === item.sortDesc
             ? 'bg-primary-400'
             : ''
@@ -157,7 +161,7 @@ export default defineComponent({
     },
     menuItemClick(e: MenuItemCommandEvent) {
       this.setProjectsSorting({
-        sortBy: e.item.key,
+        sortBy: e.item.value,
         sortDesc: e.item.sortDesc
       })
     }
diff --git a/web-app/packages/lib/src/shims-vue-router.d.ts b/web-app/packages/lib/src/shims-vue-router.d.ts
index 0395864a..9cbc6fc4 100644
--- a/web-app/packages/lib/src/shims-vue-router.d.ts
+++ b/web-app/packages/lib/src/shims-vue-router.d.ts
@@ -4,6 +4,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     public?: boolean
     allowedForNoWorkspace?: boolean
-    title?: string
+    breadcrump?: { title: string; path: string }[]
   }
 }