adminforth 2.4.0-next.21 → 2.4.0-next.211

package/dist/spa/src/components/Toast.vue

@@ -1,13 +1,8 @@
 <template>
     
 
-<div class="flex items-center w-full p-4 text-gray-500 rounded-lg shadow-lg dark:text-gray-400 dark:bg-gray-800 bg-white"
+<div class="flex items-center w-full p-4 rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText"
     role="alert"
-    :class="
-        {
-            'danger': 'bg-red-100',
-        }[toast.variant]
-    "
 >
     <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-blue-800 dark:text-blue-200">
         <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
@@ -35,8 +30,19 @@
     </div>
 
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
-    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
-    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>
+        <div class="flex flex-col items-center justify-center">
+            {{toast.message}}
+            <div v-if="toast.buttons" class="flex justify-center mt-2 gap-2">
+                <div v-for="button in toast.buttons" class="rounded-md bg-lightButtonsBackground hover:bg-lightButtonsHover text-lightButtonsText dark:bg-darkPrimary dark:hover:bg-darkButtonsBackground  dark:text-darkButtonsText">
+                    <button @click="onButtonClick(button.value)" class="px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/10">
+                        {{ button.label }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
         <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
         </svg>
@@ -58,16 +64,28 @@ const props = defineProps<{
         variant: string;
         id: string;
         timeout?: number|'unlimited';
+        buttons?: { value: any; label: string }[];
     }
 }>();
 function closeToast() {
+    // resolve with undefined on close (X button)
+    toastStore.resolveToast(props.toast.id);
+    emit('close');
+}
+
+function onButtonClick(value: any) {
+    toastStore.resolveToast(props.toast.id, value);
     emit('close');
 }
 
 onMounted(() => {
     if (props.toast.timeout === 'unlimited') return;
     else { 
-      setTimeout(() => {emit('close');}, (props.toast.timeout || 10) * 1e3 );
+      setTimeout(() => {
+        // resolve with undefined on auto-timeout
+        toastStore.resolveToast(props.toast.id);
+        emit('close');
+      }, (props.toast.timeout || 10) * 1e3 );
     }
 });
 

package/dist/spa/src/components/UserMenuSettingsButton.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="min-w-40">
+    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
+      bg-lightUserMenuSettingsButtonBackground hover:bg-lightUserMenuSettingsButtonBackgroundHover
+      text-lightUserMenuSettingsButtonText hover:text-lightUserMenuSettingsButtonTextHover
+      dark:bg-darkUserMenuSettingsButtonBackground dark:hover:bg-darkUserMenuSettingsButtonBackgroundHover
+      dark:text-darkUserMenuSettingsButtonText dark:hover:text-darkUserMenuSettingsButtonTextHover
+      w-full select-none "
+      :class="{ 'bg-lightUserMenuSettingsButtonBackgroundExpanded hover:bg-lightUserMenuSettingsButtonBackgroundExpanded dark:bg-darkUserMenuSettingsButtonBackgroundExpanded	hover:dark:bg-darkUserMenuSettingsButtonBackgroundExpanded ': showDropdown }"
+      @click="showDropdown = !showDropdown"
+    >
+        <span>Settings</span>
+        <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+            :class="{ 'transform rotate-180': showDropdown }"
+      />
+    </div>
+
+    <div v-if="showDropdown" >
+      
+      <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
+        bg-lightUserMenuSettingsButtonDropdownItemBackground hover:bg-lightUserMenuSettingsButtonDropdownItemBackgroundHover
+        text-lightUserMenuSettingsButtonDropdownItemText hover:text-lightUserMenuSettingsButtonDropdownItemTextHover
+        dark:bg-darkUserMenuSettingsButtonDropdownItemBackground dark:hover:bg-darkUserMenuSettingsButtonDropdownItemBackgroundHover
+        dark:text-darkUserMenuSettingsButtonDropdownItemText dark:hover:text-darkUserMenuSettingsButtonDropdownItemTextHover
+        w-full text-select-none pl-5 select-none"
+        v-for="option in options"
+        :to="getRoute(option)"
+      >
+        <span class="mr-1">
+          <component v-if="option.icon" :is="getIcon(option.icon)" class="w-5 h-5 transition duration-75" ></component>
+        </span>
+        <span>{{ option.pageLabel }}</span>
+      </router-link>
+    </div>
+
+   
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+import { computed, ref, onMounted, watch } from 'vue';
+import { useCoreStore } from '@/stores/core';
+import { getIcon } from '@/utils';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const coreStore = useCoreStore();
+
+const showDropdown = ref(false);
+const props = defineProps(['meta', 'resource']);
+
+const options = computed(() => {
+  return coreStore.config?.settingPages?.map((page) => {
+    return {
+      pageLabel: page.pageLabel,
+      slug: page.slug || null,
+      icon: page.icon || null,
+    };
+  });
+});
+
+function getRoute(option: { slug?: string | null, pageLabel: string }) {
+  return {
+    name: 'settings',
+    params: { page: option.slug }
+  }
+}
+
+</script>

package/dist/spa/src/components/ValueRenderer.vue

@@ -12,13 +12,40 @@
       >
         <RouterLink
           class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
-          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: foreignResource.pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
         >
           {{ foreignResource.label }}
         </RouterLink>
       </span>
       <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
-        :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: record[column.name].pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
+        >
         {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
@@ -27,8 +54,8 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-if="record[column.name] === true" class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
+      <span v-else-if="record[column.name] === false" class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
       <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span
@@ -38,14 +65,14 @@
       <template v-for="(arrayItem, arrayItemIndex) in record[column.name]">
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
-          :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          :key="`${column.name}-${arrayItemIndex}-true`"
+          class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
           {{ $t('Yes') }}
         </span>
         <span
           v-else-if="column.isArray.itemType === 'boolean'"
-          :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          :key="`${column.name}-${arrayItemIndex}-false`"
+          class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
           {{ $t('No') }}
         </span>
         <span
@@ -53,30 +80,30 @@
           :key="`${column.name}-${arrayItemIndex}`"
           class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
         >
-          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type) }}
+          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type as "show" | "list") }}
         </span>
       </template>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'date'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'decimal'">
-      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'json'">
       <JsonViewer class="min-w-[6rem]" :value="record[column.name]" :expandDepth="column.extra?.jsonCollapsedLevel" copyable sort :theme="coreStore.theme"/>
     </span>
     <span v-else>
-      {{ checkEmptyValues(record[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name], route.meta.type as "show" | "list") }}
     </span>
   </div>
 </template>
@@ -122,7 +149,7 @@ function formatTime(time: string) {
   return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
 }
 
-function getArrayItemDisplayValue(value, column) {
+function getArrayItemDisplayValue(value: any, column: AdminForthResourceColumnCommon) {
   if (column.isArray?.itemType === 'datetime') {
     return formatDateTime(value);
   } else if (column.isArray?.itemType === 'date') {

package/dist/spa/src/controls/BoolToggle.vue

@@ -0,0 +1,34 @@
+<template>
+        <Toggle 
+        :disabled="readonly" 
+        @update:modelValue="$emit('update:value', $event)"
+        :modelValue="valueFromRecord"
+        >
+        <p>{{text}}</p>
+    </Toggle>
+</template>
+
+<script setup lang="ts">
+import Toggle from '@/afcl/Toggle.vue';
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+
+    const props = defineProps<{
+        value: boolean,
+        text: string,
+        column: AdminForthResourceColumnCommon,
+        record: any,
+        meta: any,
+        resource: AdminForthResourceCommon,
+        adminUser: AdminUser,
+        readonly: boolean
+    }>();
+    console.log(JSON.stringify(props));
+    console.log("Current mode:", props.meta?.mode)
+    defineEmits(['update:value']);
+    const valueFromRecord = props.record[props.column.name]
+    const editReadOnly = props.column.editReadonly;
+</script>

package/dist/spa/src/i18n.ts

@@ -3,7 +3,7 @@ import { createApp } from 'vue';
 
 
 // taken from here https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization
-function slavicPluralRule(choice, choicesLength, orgRule) {
+function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   if (choice === 0) {
     return 0
   }

package/dist/spa/src/renderers/CompactField.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
     <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}

package/dist/spa/src/renderers/CompactUUID.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
     <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}

package/dist/spa/src/router/index.ts

@@ -62,6 +62,14 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: '/settings/:page?',
+      name: 'settings',
+      component: () => import('@/views/SettingsView.vue'),
+      meta: { 
+        title: 'Settings', 
+      },
+    },
     /* IMPORTANT:ADMINFORTH ROUTES */
     { path: "/:pathMatch(.*)*", component: PageNotFound },
   ]

package/dist/spa/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/dist/spa/src/spa_types/core.ts

@@ -1,4 +1,4 @@
-import type { AdminForthResource, AdminForthResourceColumn } from '../types/AdminForthConfig';
+import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
 
 export type resourceById = {
     [key: string]: AdminForthResource;
@@ -21,7 +21,12 @@ export type ResourceColumns = {
 
 export type CoreConfig = {
     brandName: string,
+    singleTheme?: 'light' | 'dark',
     brandLogo: string,
+    iconOnlySidebar: {
+        logo?: string,
+        enabled?: boolean,
+    },
     title: string,
     datesFormat: string,
     timeFormat: string,
@@ -33,12 +38,19 @@ export type CoreConfig = {
         passwordHashField: string,
         loginBackgroundImage: string,
         loginBackgroundPosition: string,
+        removeBackgroundBlendMode: boolean,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {
         show?: string,
         list?: string,
     } | string,
+
+    customHeadItems?: {
+        tagName: string;
+        attributes: { [key: string]: string | boolean };
+        innerCode?: string;
+    }[],
 }
 
 

package/dist/spa/src/stores/core.ts

@@ -118,7 +118,7 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-
+    websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }

package/dist/spa/src/stores/filters.ts

@@ -1,9 +1,11 @@
-import { ref, type Ref } from 'vue';
+import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { useCoreStore } from './core';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
     const sort: Ref<any> = ref({});
+    const coreStore = useCoreStore();
 
     const setSort = (s: any) => {
         sort.value = s;
@@ -23,5 +25,30 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+
+    const shouldFilterBeHidden = (fieldName: string) => {
+        if (coreStore.resource?.columns) {
+            const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
+            if (column?.showIn?.filter !== true) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const visibleFiltersCount = computed(() => {
+        return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
+    });
+
+    return {
+        setFilter, 
+        getFilters, 
+        clearFilters, 
+        filters, 
+        setFilters, 
+        setSort, 
+        getSort,
+        visibleFiltersCount,
+        shouldFilterBeHidden
+    }
 })

package/dist/spa/src/stores/modal.ts

@@ -29,7 +29,12 @@ export const useModalStore = defineStore('modal', () => {
     onCancelFunction.value = func;
   }
   function setModalContent(content: ModalContentType) {
-    modalContent.value = content;
+    modalContent.value = {
+      title: content.title || 'title',
+      content: content.content || 'content',
+      acceptText: content.acceptText || 'acceptText',
+      cancelText: content.cancelText || 'cancelText',
+    };
   }
   function resetmodalState() {
     isOpened.value = false;

package/dist/spa/src/stores/toast.ts

@@ -12,19 +12,38 @@ export const useToastStore = defineStore('toast', () => {
     watch(route, () => {
         // on route change clear all toasts older then 5 seconds
         const now = +new Date();
-        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+        toasts.value = toasts.value.filter((t) => t?.timeout === 'unlimited' || now - t.createdAt < 5000);
     });
 
-    const addToast = (toast: { message: string; variant: string }) => {
+    const addToast = (toast: { 
+        message?: string; 
+        messageHtml?: string; 
+        variant: string; 
+        timeout?: number | 'unlimited';
+        buttons?: { value: any; label: string }[];
+        onResolve?: (value?: any) => void;
+    }): string => {
         const toastId = uuid();
         toasts.value.push({
             ...toast,
             id: toastId,
             createdAt: +new Date(),
         });
+        return toastId;
     };
     const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
-    return { toasts, addToast, removeToast };
+
+    const resolveToast = (toastId: string, value?: any) => {
+        const t = toasts.value.find((x) => x.id === toastId);
+        try {
+            t?.onResolve?.(value);
+        } catch {
+            // no-op
+        }
+        toasts.value = toasts.value.filter((x) => x.id !== toastId);
+    };
+
+    return { toasts, addToast, removeToast, resolveToast };
 });