adminforth 1.3.54-next.9 → 1.3.55-next.2

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
-      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
         :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
         {{ record[column.name].label }}
       </RouterLink>
@@ -15,13 +15,22 @@
       <span v-else class="bg-red-100 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">No</span>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
+      {{ checkEmptyValues(formatDateTime(record[column.name]),route.meta.type) }}
+    </span>
+    <span v-else-if="column.type === 'date'" class="whitespace-nowrap">
       {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
     </span>
+    <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
+      {{ checkEmptyValues(formatTime(record[column.name]),route.meta.type) }}
+    </span>
     <span v-else-if="column.type === 'richtext'">
-      <div v-html="protectAgainstXSS(record[column.name])"></div>
+      <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
+    </span>
+    <span v-else-if="column.type === 'json'">
+      <JsonViewer :value="record[column.name]" copyable sort :theme="theme" />
     </span>
     <span v-else>
       {{ checkEmptyValues(record[column.name],route.meta.type) }}
@@ -38,13 +47,19 @@ import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import sanitizeHtml from 'sanitize-html';
+import { JsonViewer } from "vue3-json-viewer";
+import "vue3-json-viewer/dist/index.css";
 
 
 import { useCoreStore } from '@/stores/core';
+import { computed } from 'vue';
 
 const coreStore = useCoreStore();
 const route = useRoute();
 
+const theme = computed(() => {
+  return window.localStorage.getItem('af__theme') || 'light';
+});
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -55,12 +70,72 @@ const props = defineProps({
 });
 
 function protectAgainstXSS(value) {
-  return sanitizeHtml(value);
+  return sanitizeHtml(value, {
+    allowedTags: [
+      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
+      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
+      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
+      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
+      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
+      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
+      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
+    ],
+    allowedAttributes: {
+      'li': [ 'data-list' ],
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
+    } 
+  });
 }
 
 
+function formatDateTime(date) {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');
+}
+
 function formatDate(date) {
   if (!date) return '';
-  return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD HH:mm:ss');
+  return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD');
+}
+
+function formatTime(time) {
+  if (!time) return '';
+  return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
+}
+</script>
+
+<style lang="scss">
+
+.allow-lists {
+  ol {
+    list-style-type: decimal;
+    padding-left: 1.5em;
+
+    li[data-list="bullet"] {
+      list-style-type: disc;
+    }
+    li[data-list="ordered"] {
+      list-style-type: decimal;
+    }
+  }
+
+} 
+</style>
+
+<style lang="scss" >
+
+.jv-container .jv-code {
+  padding: 10px 10px;
 }
-</script>
+
+.jv-container .jv-button[class] {
+  @apply text-lightPrimary;
+  @apply dark:text-darkPrimary;
+
+}
+
+.jv-container.jv-dark {
+  background: transparent;
+}
+
+</style>

package/dist/spa/src/composables/useFrontendApi.ts

@@ -9,7 +9,7 @@ export function showWarningTost(message: string) {
 }
 
 export function showErrorTost(message: string, timeout?: number) {
-  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 'unlimited'});  
+  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
   return message;
 }
 

package/dist/spa/src/composables/useStores.ts

@@ -24,17 +24,11 @@ import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
 
 declare global {
   interface Window {
-    adminforth: {
-      confirm: (params: ConfirmParams) => Promise<void>;
-      alert: (params: AlertParams) => void;
-      setListFilter: (filter: any) => void;
-      updateListFilter: (filter: any) => void;
-      clearListFilters: () => void;
-    };
+    adminforth: FrontendAPIInterface;
   }
 }
 
-export class FrontendAPI implements FrontendAPIInterface {
+export class FrontendAPI {
   private toastStore:any
   private modalStore:any
   private filtersStore:any  
@@ -45,19 +39,29 @@ export class FrontendAPI implements FrontendAPIInterface {
     }
     this.toastStore = useToastStore();
     this.modalStore = useModalStore();
-    console.log(this.toastStore, this.modalStore,'init of adminforth frontend api')
+    
     window.adminforth = {
       confirm: this.confirm.bind(this),
       alert: this.alert.bind(this),
-      setListFilter: this.setListFilter.bind(this),
-      updateListFilter: this.updateListFilter.bind(this),
-      clearListFilters: this.clearListFilters.bind(this),
-    }
+
+      list: {
+        refresh: () => {/* will be redefined in list*/},
+        closeThreeDotsDropdown: () => {/* will be redefined in list*/},
+        closeUserMenuDropdown: () => {/* will be redefined in list*/},
+        setFilter: () => this.setListFilter.bind(this),
+        updateFilter: () => this.updateListFilter.bind(this),
+        clearFilters: () => this.clearListFilters.bind(this),
+      }
+    };
   }
 
   confirm(params: ConfirmParams): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.modalStore.setModalContent({ content: params.message, acceptText: params.yes, cancelText: params.no })
+      this.modalStore.setModalContent({ 
+        content: params.message, 
+        acceptText: params.yes || 'Yes',
+        cancelText: params.no || 'Cancel' 
+      })
       this.modalStore.onAcceptFunction = resolve
       this.modalStore.onCancelFunction = reject
       this.modalStore.togleModal()

package/dist/spa/src/index.scss

@@ -25,3 +25,7 @@
 //   }
 // }
 
+
+*{
+  -moz-user-select: none;
+}

package/{spa → dist/spa}/src/renderers/CompactUUID.vue

@@ -1,11 +1,11 @@
 <template>
   <span class="flex items-center"  
-    :data-tooltip-target="`tooltip-${id}`"
+    :data-tooltip-target="val && `tooltip-${id}`"
     data-tooltip-placement="top"
   >
-    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary"/>
+    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="val"/>
 
-    <div :id="`tooltip-${id}`" role="tooltip"
+    <div :id="`tooltip-${id}`" role="tooltip" v-if="val"
           class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
       {{ props.record[props.column.name] }}
       <div class="tooltip-arrow" data-popper-arrow></div>
@@ -21,7 +21,7 @@ import { initFlowbite } from 'flowbite';
 const visualValue = computed(() => {
   // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
   const val = props.record[props.column.name];
-  if (val.length > 8) {
+  if (val && val.length > 8) {
     return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
   }
   return val;

package/{spa → dist/spa}/src/renderers/CountryFlag.vue

@@ -61,9 +61,9 @@ const countryName = computed(() => {
   flex-shrink: 0;
 
   // border radius  for background
-  border-radius: 3px;
+  border-radius: 2px;
   // add some silkiness to the flag
-  box-shadow: inset -1px -1px 2px 0px rgba(50 50 50 / 0.3), inset 1px 1px 2px 0px rgba(255 255 255 / 0.3);
+  box-shadow: inset -1px -1px 0.5px 0px rgba(0 0 0 / 0.2), inset 1px 1px 0.5px 0px rgba(255 255 255 / 0.2);
 }
 
 </style>

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

@@ -1,6 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import ResourceParent from '@/views/ResourceParent.vue'
-import { useUserStore } from '@/stores/user'
+import { createRouter, createWebHistory } from 'vue-router';
+import ResourceParent from '@/views/ResourceParent.vue';
+
 /* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
 const router = createRouter({
@@ -51,13 +51,9 @@ const router = createRouter({
 
         },
       ]
-    }, 
+    },
     /* IMPORTANT:ADMINFORTH ROUTES */
   ]
 })
 
-
-
-
-
 export default router

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

@@ -24,6 +24,7 @@ export type CoreConfig = {
     brandLogo: string,
     title: string,
     datesFormat: string,
+    timeFormat: string,
     usernameField: string,
     usernameFieldName?: string,
     deleteConfirmation?: boolean,
@@ -32,6 +33,7 @@ export type CoreConfig = {
         usernameField: string,
         passwordHashField: string,
         loginBackgroundImage: string,
+        loginBackgroundPosition: string,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {

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

@@ -47,6 +47,10 @@ export const useCoreStore = defineStore('core', () => {
     if (!resource.value) {
       throw new Error('Columns not fetched yet');
     }
+    const col = resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey);
+    if (!col) {
+      throw new Error(`Primary key not found in resource ${resourceId}`);
+    }
 
     const respData = await callAdminForthApi({
       path: '/get_resource_data',
@@ -56,7 +60,7 @@ export const useCoreStore = defineStore('core', () => {
         resourceId: resourceId,
         filters: [
           {
-            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
+            field: col.name,
             operator: 'eq',
             value: primaryKey
           }
@@ -71,7 +75,7 @@ export const useCoreStore = defineStore('core', () => {
       window.adminforth.alert({
         message: respData.error,
         variant: 'danger',
-        timeout: 'unlimited'
+        timeout: 30,
       });
       record.value = {};
     } else {

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

@@ -1,14 +1,21 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
+import { ref, type Ref } from 'vue';
+import { defineStore } from 'pinia';
 
 export const useFiltersStore = defineStore('filters', () => {
-    const filters = ref([]);
+    const filters: Ref<any[]> = ref([]);
+    const sort: Ref<any> = ref({});
+
+    const setSort = (s: any) => {
+        sort.value = s;
+    }
+    const getSort = () => {
+        return sort.value;
+    }
     const setFilter = (filter: any) => {
-        filters.value = [...filters.value, filter];
+        filters.value.push(filter);
     }
     const setFilters = (f: any) => {
-        filters.value = [...f];
+        filters.value = f;
     }
     const getFilters = () => {
         return filters.value;
@@ -16,7 +23,5 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters,clearFilters, filters,setFilters}
-    })
-
-    
+    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+})

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

@@ -1,14 +1,30 @@
-import { ref, computed } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
 import { v1 as uuid } from 'uuid';
+import { useRoute } from 'vue-router';
+
+
 
 export const useToastStore = defineStore('toast', () => {
-    const toasts = ref([]);
-    const addToast = (toast) => {
-        toasts.value.push({...toast, id: uuid()});
+    const toasts: Ref<any[]> = ref([]);
+    const route = useRoute();
+
+    watch(route, () => {
+        console.log('route changed 121');
+        // on route change clear all toasts older then 5 seconds
+        const now = +new Date();
+        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+    });
+
+    const addToast = (toast: { message: string; variant: string }) => {
+        const toastId = uuid();
+        toasts.value.push({
+            ...toast,
+            id: toastId,
+            createdAt: +new Date(),
+        });
     };
-    const removeToast = (toast) => {
+    const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
     return { toasts, addToast, removeToast };