Merge pull request #355 from devforth/SettingsView

Settings view

Author: ivictbor

adminforth/modules/codeInjector.ts

@@ -6,7 +6,7 @@ import os from 'os';
 import path from 'path';
 import { promisify } from 'util';
 import AdminForth, { AdminForthConfigMenuItem } from '../index.js';
-import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath, transformObject, deepMerge, md5hash } from './utils.js';
+import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath, transformObject, deepMerge, md5hash, slugifyString } from './utils.js';
 import { ICodeInjector } from '../types/Back.js';
 import { StylesGenerator } from './styleGenerator.js';
 

adminforth/modules/configValidator.ts

@@ -17,7 +17,7 @@ import {
 
 import fs from 'fs';
 import path from 'path';
-import { guessLabelFromName, md5hash, suggestIfTypo } from './utils.js';
+import { guessLabelFromName, md5hash, suggestIfTypo, slugifyString } from './utils.js';
 import { 
   AdminForthSortDirections,
   type AdminForthComponentDeclarationFull,
@@ -30,7 +30,6 @@ import AdminForth from "adminforth";
 import { AdminForthConfigMenuItem } from "adminforth";
 
 
-
 export default class ConfigValidator implements IConfigValidator {
 
   customComponentsDir: string | undefined;
@@ -169,9 +168,8 @@ export default class ConfigValidator implements IConfigValidator {
     }
 
     // slug should have only lowercase letters, dashes and numbers
-    customization.brandNameSlug = customization.brandName.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    customization.brandNameSlug = slugifyString(customization.brandName);
 
-    
     if (customization.brandLogo) {
       errors.push(...this.checkCustomFileExists(customization.brandLogo));
     }
@@ -1005,6 +1003,7 @@ export default class ConfigValidator implements IConfigValidator {
       if (newConfig.auth.userMenuSettingsPages) {
         for (const page of newConfig.auth.userMenuSettingsPages) {
           this.validateComponent({file: page.component}, errors);
+          page.slug = page.slug ?? slugifyString(page.pageLabel);
         }
       }
 

adminforth/modules/utils.ts

@@ -509,4 +509,12 @@ export function isProbablyUUIDColumn(column: { name: string; type?: string; samp
   }
 
   return false;
+}
+
+export function slugifyString(str: string): string {
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '-');
 }

adminforth/spa/src/components/UserMenuSettingsButton.vue

@@ -59,18 +59,10 @@ const options = computed(() => {
   });
 });
 
-function slugifyString(str: string): string {
-  return str
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/[^a-z0-9-_]/g, '-');
-}
-
 function getRoute(option: { slug?: string | null, pageLabel: string }) {
   return {
     name: 'settings',
-    params: { page: option.slug ?? slugifyString(option.pageLabel) }
+    params: { page: option.slug }
   }
 }
 

adminforth/spa/src/views/SettingsView.vue

@@ -4,14 +4,14 @@
       <p>No setting pages configured or still loading...</p>
     </div>
       <VerticalTabs v-else ref="VerticalTabsRef" v-model:active-tab="activeTab" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
-      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+settingPageSlotName(c,i)]>
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+c.slug]>
         <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
           <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
           {{ c.pageLabel }}
         </div>
       </template>
 
-      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`${settingPageSlotName(c,i)}-content`" v-slot:[settingPageSlotName(c,i)]>
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`${settingPageSlotName(c,i)}-content`" v-slot:[c.slug]>
         <component 
           :is="getCustomComponent({file: c.component || ''})"
           :resource="coreStore.resource"
@@ -52,15 +52,6 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
-function settingPageSlotName(c: { slug?: string; pageLabel?: string }, idx: number) {
-  const base = (c.slug && c.slug.trim()) || (c.pageLabel && c.pageLabel.trim()) || `tab-${idx}`;
-  return base
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/[^a-z0-9-_]/g, '-') || `tab-${idx}`;
-}
-
 watch(dropdownUserButton, (el) => {
   if (el) {
     const dd = new Dropdown(
@@ -103,19 +94,10 @@ function setURL(item: {
   pageLabel: string;
   slug?: string | undefined;
 }) {
-  const slug = item?.slug;
-  if (slug) {
-    router.replace({
-      name: 'settings',
-      params: { page: slug }
-    });
-  } else {
-    const slugified = slugifyString(item.pageLabel);
-    router.replace({
-      name: 'settings',
-      params: { page: slugified }
-    });
-  }
+  router.replace({
+    name: 'settings',
+    params: { page: item?.slug }
+  });
 }
 
 function handleURLChange(val: string | null) {