external menu feature (ccf)

.kanbn/index.md

@@ -21,13 +21,14 @@ sprints:
 
 ## Todo
 
-- [analytics](tasks/analytics.md)
+- [injecting-menu-for-integration-in-website](tasks/injecting-menu-for-integration-in-website.md)
 
 ## In Progress
 
 ## Done
 
 - [login-passwort-change](tasks/login-passwort-change.md)
+- [analytics](tasks/analytics.md)
 - [refresh-bug](tasks/refresh-bug.md)
 - [admin-als-super-admin-delete-podcast-und-import](tasks/admin-als-super-admin-delete-podcast-und-import.md)
 - [bibelstelle-video-editierbar](tasks/bibelstelle-video-editierbar.md)

.kanbn/tasks/analytics.md

@@ -1,9 +1,10 @@
 ---
 created: 2022-11-29T10:53:22.296Z
-updated: 2022-12-03T20:26:57.445Z
+updated: 2022-12-12T09:35:30.491Z
 assigned: ""
 progress: 0
 tags: []
+completed: 2022-12-12T09:35:30.491Z
 ---
 
 # Analytics

.kanbn/tasks/injecting-menu-for-integration-in-website.md

@@ -0,0 +1,9 @@
+---
+created: 2022-12-12T09:35:44.246Z
+updated: 2022-12-12T09:36:14.510Z
+assigned: ""
+progress: 0
+tags: []
+---
+
+# Injecting Menu for integration in website

app.vue

@@ -1,113 +1,50 @@
 <script setup lang="ts">
-// import { IUser } from "~/types/IUser";
-import { useI18n } from "vue-i18n";
-import IMenuSection from "./base/types/IMenuSection";
-import { useUser, userLogout } from "./composables/authentication";
+import { onBeforeMount } from "vue";
+import { getDefaultMenu, getMenu, initDefaultMenu } from "./base/Menu";
 import { useSettings } from "./composables/settingsdata";
+import useAuth from "./composables/useAuth";
 
-const nuxtApp = useNuxtApp();
 const settings= await useSettings();
+
+const nuxtApp = useNuxtApp();
 nuxtApp.hook("page:finish", () => {
   window.scrollTo(0, 0);
 });
-const i18n = useI18n();
-var id = 0
-function getMenu(loggedin: boolean, username: string) : Array<IMenuSection> {
-  var menu = [       {
-          id: id++,
-          name: i18n.t("menu.admin"),
-          description: i18n.t("menu.adminsub"),
-          entries: [],
-        },
-        {
-          id: id++,
-          name: i18n.t("menu.podcasts"),
-          description: i18n.t("menu.podcastsub"),
-          entries: [
-            {
-              id: id++,
-              slug: "/podcasts",
-              name: i18n.t("menu.list"),
-            },
-            {
-              id: id++,
-              slug: "/recent",
-              name: i18n.t("menu.recent"),
-            },
-            {
-              id: id++,
-              slug: "/serie",
-              name: i18n.t("menu.series"),
-            }
-          ],
-        },
-      ];
-      if (!loggedin) {
-        menu[0].entries.push({
-          id: id++,
-          slug: "/admin/login",
-          name: i18n.t("menu.login"),
-        });
-      } else {
-        menu[0].entries.push({
-          id: id++,
-          slug: "#logout",
-          name: i18n.t("menu.logout"),
-        });
-        menu[0].entries.push({
-          id: id++,
-          slug: "/admin/setpassword",
-          name: i18n.t("menu.changepassword"),
-        });
-        if (username && username.startsWith('admin')) {
-          menu[0].entries.push({
-          id: id++,
-          slug: "/admin/invitation",
-          name: i18n.t("menu.invitataion"),
-        });
-
-          menu[0].entries.push({
-            id: id++,
-            slug: "/admin/import",
-            name: i18n.t("menu.import"),
-          });
-        }
-        menu[1].entries.push({
-          id: id++,
-          slug: "/admin/new-podcast",
-          name: i18n.t("menu.new"),
-        });
-        menu[1].entries.push({
-          id: id++,
-          slug: "/admin/new-serie",
-          name: i18n.t("menu.newseries"),
-        });
-      }
-  return menu;
-}
 
-const { useAuthUser, initAuth, useAuthLoading, logout } = useAuth()
-const user = useAuthUser()
+const { logout, initAuth, useAuthUser } = useAuth()
 onBeforeMount(() => {
     initAuth()
 })
 
-const loggedin = computed( () => (user.value?true:false) )
-const menu = computed( () => getMenu(loggedin.value, user.value?.username) )
-
-function localeChanged(value) {
-  i18n.locale.value = value;
-}
-
-function menuItemClicked(name) {
+function menuItemClicked(name: string) {
   if (name=="#logout") {
     logout()
   }
 }
+
+const user = useAuthUser()
+const menu = ref({})
+var menudata = {}
+
+if (true || !settings.value.menuSource || settings.value.menuSource.length()==0) {
+  menudata = initDefaultMenu()
+}
+
+const {locale}  = useI18n()
+
+async function setMenu( locale: string ) {
+  if (!settings.value.menuSource || settings.value.menuSource===""){
+    menu.value = getDefaultMenu(menudata, (user.value?user.value.username:""))
+  } else
+    menu.value = await getMenu(settings.value.menuSource)
+}
+setMenu(locale.value)
+watch( ()=>user.value, () => setMenu(locale.value))
+
 </script>
 <template>
   <div>
-    <NavBar :menu="menu" :defaultRoute="settings.defaultRoute" :availableLocales="$i18n.availableLocales" :locale="$i18n.locale" @localeChanged="localeChanged" @menuItemClicked="menuItemClicked"/>
+    <NavBar :menu="menu" :closeOnScroll="settings.closeOnScroll" @menuItemClicked="menuItemClicked"/> 
     <NuxtPage />
   </div>
 </template>

base/Menu.ts

@@ -0,0 +1,119 @@
+import IMenuSection from '~~/base/types/IMenuSection';
+
+export function initDefaultMenu(): Object {
+  var id = 0;
+  const menuResult = {
+    defaultBase: '/',
+    keys: [
+      {
+        order: id++,
+        name: 'menu.admin',
+        description: 'menu.adminsub',
+        entries: [
+          {
+            order: id++,
+            slug: 'admin/login',
+            name: 'menu.login',
+            onlyNotLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: '#logout',
+            name: 'menu.logout',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/setpassword',
+            name: 'menu.changepassword',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/invitation',
+            name: 'menu.invitataion',
+            onlyAdmin: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/import',
+            name: 'menu.import',
+            onlyAdmin: '',
+          },
+        ],
+      },
+      {
+        order: id++,
+        name: 'menu.podcasts',
+        description: 'menu.podcastsub',
+        entries: [
+          {
+            order: id++,
+            slug: 'podcasts',
+            name: 'menu.list',
+          },
+          {
+            order: id++,
+            slug: 'recent',
+            name: 'menu.recent',
+          },
+          {
+            order: id++,
+            slug: 'serie',
+            name: 'menu.series',
+          },
+          {
+            order: id++,
+            slug: 'admin/new-podcast',
+            name: 'menu.new',
+            onlyLoggedIn: '',
+          },
+          {
+            order: id++,
+            slug: 'admin/new-serie',
+            name: 'menu.newseries',
+            onlyLoggedIn: '',
+          },
+        ],
+      },
+    ]
+  }
+  return menuResult;
+}
+
+export function getDefaultMenu(
+  menudata: Object,
+  username: string
+): Object {
+  const loggin = username.length > 0;
+  const admin = username.startsWith('admin');
+  const menuResult = {
+    defaultBase: menudata.defaultBase,
+    keys: menudata.keys.map((section) => {
+      return {
+        order: section.order,
+        name: section.name,
+        description: section.description,
+        entries: section.entries.filter(
+          (entry) =>
+            (entry.hasOwnProperty('onlyLoggedIn') && loggin) ||
+            (entry.hasOwnProperty('onlyNotLoggedIn') && !loggin) ||
+            (entry.hasOwnProperty('onlyAdmin') && admin) ||
+            !(
+              entry.hasOwnProperty('onlyLoggedIn') ||
+              entry.hasOwnProperty('onlyNotLoggedIn') ||
+              entry.hasOwnProperty('onlyAdmin')
+            )
+        ),
+      }
+    })
+  }
+  return menuResult;
+}
+
+export async function getMenu(
+  url: string,
+): Promise<Object> {
+  const menudata = await $fetch<IMenuSection>(url);
+  return menudata;
+}

base/types/IMenuItemBase.ts

@@ -0,0 +1,6 @@
+export default interface IMenuItemBase {
+  name: string;
+  order: number;
+  slug: string;
+  baseUrl?: string;
+}

base/types/IMenuSection.ts

@@ -1,8 +1,7 @@
-import IPageMenuItem from "./IPageMenuItem";
+import IMenuItemBase from "./IMenuItemBase";
 
-export default interface IMenuSection {
-    id: number;
+export default interface IMenuSectionBase {
     description: string;
     name: string;
-    entries: Array<IPageMenuItem>;
+    entries: Array<IMenuItemBase>;
 }

components/EpisodesList.vue

@@ -20,7 +20,7 @@
       v-for="(episode, index) in sortedFilteredList"
       :key="index"
     >
-      <NuxtLink :to="episode.nuxtlink">
+      <NuxtLink :to="localePath(episode.nuxtlink)">
         <div class="my-1 md:px-4 pt-2 hover:bg-slate-100 md:rounded-xl 
         flex flex-col sm:flex-row place-content-center place-items-center 
         items-center bg-white sm:bg-transparent">
@@ -77,6 +77,7 @@ export default {
   name: 'EpisodesList',
   setup(props) {
     const dateformat = (input: Date): string => input.toLocaleDateString();
+    const localePath = useLocalePath();
     const search = ref("")
     const searchHiden = ref(true)
     const itemsperpage = ref(NUM_ITEMS_PER_PAGE)
@@ -127,7 +128,8 @@ export default {
       search,
       itemsperpage,
       page,
-      max
+      max,
+      localePath
     };
   },
 };