feat: migrated to vuecs and authup v1

packages/client-ui/assets/css/bootstrap-override.css

@@ -27,12 +27,6 @@
     color: #909090;
 }
 
-.form-check-input {
-    position: absolute;
-    margin-top: .2rem;
-    margin-left: -1.25rem;
-}
-
 .form-group label i {
     font-size: .7rem;
 }

packages/client-ui/assets/css/core/body.css

@@ -54,6 +54,10 @@ Content
     flex-direction: column;
 }
 
+.list .list-header {
+    margin-bottom: 0.7rem;
+}
+
 .list .list-body {
     padding-left: 0;
     list-style: none;

packages/client-ui/components/layout/header.vue

@@ -5,8 +5,8 @@
   view the LICENSE file that was distributed with this source code.
   -->
 <script lang="ts">
-import { Gravatar } from '@vue-layout/gravatar';
-import { NavigationComponents } from '@vue-layout/navigation';
+import { VCGravatar } from '@vuecs/gravatar';
+import { VCNavItems } from '@vuecs/navigation';
 import { BCollapse } from 'bootstrap-vue-next';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
@@ -17,8 +17,8 @@ import { useAuthStore } from '../../store/auth';
 export default defineNuxtComponent({
     components: {
         BCollapse,
-        Gravatar,
-        NavigationComponents,
+        VCGravatar,
+        VCNavItems,
     },
     setup() {
         const store = useAuthStore();
@@ -69,7 +69,7 @@ export default defineNuxtComponent({
                     class="navbar-content navbar-collapse collapse"
                     :class="{'show': displayNav}"
                 >
-                    <navigation-components
+                    <VCNavItems
                         class="navbar-nav"
                         :tier="0"
                     />
@@ -82,7 +82,7 @@ export default defineNuxtComponent({
                                 class="nav-link user-link"
                                 :to="'/users/'+user.id"
                             >
-                                <Gravatar :email="user.email ? user.email : ''" />
+                                <VCGravatar :email="user.email ? user.email : ''" />
                                 <span>{{ user.display_name ? user.display_name : user.name }}</span>
                             </nuxt-link>
                         </li>

packages/client-ui/components/layout/sidebar.vue

@@ -5,15 +5,15 @@
   view the LICENSE file that was distributed with this source code.
   -->
 <script lang="ts">
-import { Countdown } from '@vue-layout/countdown';
-import { NavigationComponents } from '@vue-layout/navigation';
+import { VCCountdown } from '@vuecs/countdown';
+import { VCNavItems } from '@vuecs/navigation';
 import { storeToRefs } from 'pinia';
 import { defineNuxtComponent } from '#app';
 import { computed, useAPI } from '#imports';
 import { useAuthStore } from '../../store/auth';
 
 export default defineNuxtComponent({
-    components: { Countdown, NavigationComponents },
+    components: { VCCountdown, VCNavItems },
     setup() {
         const store = useAuthStore();
         const { loggedIn, accessTokenExpireDate: tokenExpireDate, realmManagement } = storeToRefs(store);
@@ -50,7 +50,7 @@ export default defineNuxtComponent({
 </script>
 <template>
     <div class="page-sidebar">
-        <navigation-components
+        <VCNavItems
             class="sidebar-menu navbar-nav"
             :tier="1"
         />
@@ -61,7 +61,7 @@ export default defineNuxtComponent({
                 class="font-weight-light d-flex flex-column ms-3 me-3 mb-1 mt-auto"
             >
                 <small class="countdown-text">
-                    <Countdown
+                    <VCCountdown
                         :time="tokenExpiresIn"
                     >
                         <template #default="props">
@@ -70,7 +70,7 @@ export default defineNuxtComponent({
                                 {{ props.minutes }} minute(s), {{ props.seconds }} second(s)
                             </span>
                         </template>
-                    </Countdown>
+                    </VCCountdown>
                 </small>
             </div>
 

packages/client-ui/composables/ilingo.ts

@@ -5,7 +5,7 @@
  * view the LICENSE file that was distributed with this source code.
  */
 
-import type { ValidationTranslator } from '@vue-layout/form-controls';
+import type { ValidationTranslator } from '@vuecs/form-controls';
 import type { Ilingo } from 'ilingo';
 import { useNuxtApp } from '#app';
 

packages/client-ui/config/layout/contants.ts

@@ -5,11 +5,13 @@
  * view the LICENSE file that was distributed with this source code.
  */
 
-import type { NavigationElement } from '@vue-layout/navigation';
+import type { NavigationItem } from '@vuecs/navigation';
 import { PermissionID } from '@personalhealthtrain/core';
 
 export enum LayoutKey {
     NAVIGATION_ID = 'navigationId',
+    NAVIGATION_SIDE_ID = 'navigationSideId',
+
     REQUIRED_LOGGED_IN = 'requireLoggedIn',
     REQUIRED_LOGGED_OUT = 'requireLoggedOut',
 
@@ -21,7 +23,7 @@ export enum LayoutNavigationID {
     DEFAULT = 'default',
 }
 
-export const LayoutTopNavigation: NavigationElement[] = [
+export const LayoutTopNavigation: NavigationItem[] = [
     {
         id: LayoutNavigationID.DEFAULT,
         name: 'Home',
@@ -37,7 +39,7 @@ export const LayoutTopNavigation: NavigationElement[] = [
         ],
     },
 ];
-export const LayoutSideDefaultNavigation: NavigationElement[] = [
+export const LayoutSideDefaultNavigation: NavigationItem[] = [
     {
         name: 'Info',
         type: 'link',
@@ -103,7 +105,7 @@ export const LayoutSideDefaultNavigation: NavigationElement[] = [
         [LayoutKey.REQUIRED_LOGGED_IN]: true,
     },
 ];
-export const LayoutSideAdminNavigation: NavigationElement[] = [
+export const LayoutSideAdminNavigation: NavigationItem[] = [
     {
         name: 'Auth',
         type: 'link',

packages/client-ui/config/layout/module.ts

@@ -6,100 +6,135 @@
  */
 
 import type {
-    NavigationElement,
+    NavigationItem,
     NavigationProvider,
-} from '@vue-layout/navigation';
+} from '@vuecs/navigation';
 import {
-    findNavigationElementForTier,
-    flattenNestedNavigationElements,
-    reduceNavigationElementsByRestriction,
-} from '@vue-layout/navigation';
+    flattenNestedNavigationItems,
+} from '@vuecs/navigation';
+import type { RouteLocationNormalized } from 'vue-router';
 
 import {
+    LayoutKey,
     LayoutSideAdminNavigation,
     LayoutSideDefaultNavigation,
     LayoutTopNavigation,
 } from './contants';
+import { reduceNavigationElementsByRestriction } from './utils';
 
 type NavigationProviderContext = {
     hasPermission: (name: string) => boolean,
     isLoggedIn: () => boolean
 };
 
-export function buildNavigationProvider(context: NavigationProviderContext) : NavigationProvider {
-    return {
-        hasTier(tier: number): Promise<boolean> {
-            return Promise.resolve([0, 1].indexOf(tier) !== -1);
-        },
-        async getElements(tier: number, elements: NavigationElement[]): Promise<NavigationElement[]> {
-            if (!await this.hasTier(tier)) {
-                return [];
-            }
+export class Navigation implements NavigationProvider {
+    protected sideElements : Record<string, NavigationItem[]>;
 
-            let items : NavigationElement[] = [];
-
-            switch (tier) {
-                case 0:
-                    items = LayoutTopNavigation;
-                    break;
-                case 1: {
-                    const component: NavigationElement = findNavigationElementForTier(elements, 0) || { id: 'default' };
-
-                    switch (component.id) {
-                        case 'default':
-                            items = LayoutSideDefaultNavigation;
-                            break;
-                        case 'admin':
-                            items = LayoutSideAdminNavigation;
-                            break;
-                    }
+    protected topElements : NavigationItem[];
 
-                    break;
-                }
-            }
+    protected context : NavigationProviderContext;
+
+    constructor(context: NavigationProviderContext) {
+        this.sideElements = {
+            default: LayoutSideDefaultNavigation,
+            admin: LayoutSideAdminNavigation,
+        };
+
+        this.topElements = LayoutTopNavigation;
 
-            return reduceNavigationElementsByRestriction(items, {
-                hasPermission: (name: string) => context.hasPermission(name),
-                isLoggedIn: () => context.isLoggedIn(),
+        this.context = context;
+    }
+
+    async getItems(tier: number, items: NavigationItem[]): Promise<NavigationItem[] | undefined> {
+        if (tier > 1) {
+            return undefined;
+        }
+
+        if (tier === 0) {
+            return reduceNavigationElementsByRestriction(this.topElements, {
+                hasPermission: (name: string) => this.context.hasPermission(name),
+                isLoggedIn: () => this.context.isLoggedIn(),
             });
-        },
-        async getElementsActive(url: string): Promise<NavigationElement[]> {
-            const sortFunc = (a: NavigationElement, b: NavigationElement) => (b.url?.length ?? 0) - (a.url?.length ?? 0);
-            const filterFunc = (item: NavigationElement) => {
-                if (!item.url) return false;
-
-                if (item.rootLink) {
-                    return url === item.url;
-                }
-
-                return url === item.url || url.startsWith(item.url);
-            };
-
-            // ------------------------
-
-            let items = flattenNestedNavigationElements([...LayoutSideDefaultNavigation])
-                .sort(sortFunc)
-                .filter(filterFunc);
-
-            if (items.length > 0) {
-                return [
-                    LayoutTopNavigation[0],
-                    items[0],
-                ];
+        }
+
+        let component : NavigationItem;
+        if (items.length > 0) {
+            [component] = items;
+        } else {
+            component = { id: 'default' };
+        }
+
+        return reduceNavigationElementsByRestriction(this.sideElements[component.id || 'default'] || [], {
+            hasPermission: (name: string) => this.context.hasPermission(name),
+            isLoggedIn: () => this.context.isLoggedIn(),
+        });
+    }
+
+    async getItemsActiveByRoute(route: RouteLocationNormalized): Promise<NavigationItem[]> {
+        const {
+            [LayoutKey.NAVIGATION_ID]: topId,
+            [LayoutKey.NAVIGATION_SIDE_ID]: sideId,
+        } = route.meta;
+
+        const url = route.fullPath;
+
+        const keys = Object.keys(this.sideElements);
+        for (let i = 0; i < keys.length; i++) {
+            const items = flattenNestedNavigationItems(this.sideElements[keys[i]])
+                .sort((a: NavigationItem, b: NavigationItem) => {
+                    if (a.root && !b.root) {
+                        return 1;
+                    }
+
+                    if (!a.root && b.root) {
+                        return -1;
+                    }
+
+                    return (b.url?.length ?? 0) - (a.url?.length ?? 0);
+                })
+                .filter((item) => {
+                    if (sideId) {
+                        if (item.id === sideId) {
+                            return true;
+                        }
+                    }
+
+                    if (!item.url) return false;
+
+                    if (item.rootLink) {
+                        return url === item.url;
+                    }
+
+                    return url === item.url || url.startsWith(item.url);
+                });
+
+            if (items.length === 0) {
+                continue;
             }
 
-            items = flattenNestedNavigationElements([...LayoutSideAdminNavigation])
-                .sort(sortFunc)
-                .filter(filterFunc);
+            const topIndex = this.topElements.findIndex(
+                (el) => (topId && topId === el.id) || el.id === keys[i],
+            );
 
-            if (items.length > 0) {
-                return [
-                    LayoutTopNavigation[1],
-                    items[0],
-                ];
+            if (topIndex === -1) {
+                continue;
             }
 
-            return [];
-        },
-    };
+            return [
+                this.topElements[topIndex],
+                items[0],
+            ];
+        }
+
+        const topIndex = this.topElements.findIndex(
+            (el) => topId && topId === el.id,
+        );
+        if (topIndex !== -1) {
+            return [
+                this.topElements[topIndex],
+            ];
+        }
+
+        return [];
+    }
 }