adminforth 1.1.34 → 1.1.36

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

@@ -0,0 +1,113 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams, FilterParams,Operator } from '../types/FrontendAPI';
+import { useToastStore } from '../stores/toast';
+import { useModalStore } from '../stores/modal';
+import { useCoreStore } from '@/stores/core';
+import { useFiltersStore } from '@/stores/filters';
+import router from '@/router'
+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;
+    };
+  }
+}
+
+export class FrontendAPI implements FrontendAPIInterface {
+  private validOperators: Operator[] = ['lte', 'gte', 'in','ilike'];
+  private toastStore:any
+  private modalStore:any
+  private filtersStore:any  
+  private coreStore:any
+  init() {
+    if (window.adminforth) {
+      throw new Error('adminforth already initialized');
+    }
+    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),
+    }
+  }
+
+  confirm(params: ConfirmParams): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.modalStore.setModalContent({ content: params.message, acceptText: params.yes, cancelText: params.no })
+      this.modalStore.onAcceptFunction = resolve
+      this.modalStore.onCancelFunction = reject
+      this.modalStore.togleModal()
+    })
+  }
+
+  alert(params: AlertParams): void {
+    this.toastStore.addToast({
+      message: params.message,
+      variant: params.variant,
+      timeout: params.timeout  
+    })
+  }
+
+  listFilterValidation(filter: FilterParams): boolean {
+    if(router.currentRoute.value.meta.type !== 'list'){
+      throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
+    } else {
+      if(!this.coreStore) this.coreStore = useCoreStore()
+      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
+      if(!filterField){
+          throw new Error(`Field ${filter.field} is not available for filtering`)
+        }
+      if(filterField) {
+        if(!this.validOperators.includes(filter.operator)){
+          throw new Error(`Operator ${filter.operator} is not valid`)
+        } 
+      }
+    }
+    return true
+  }
+
+  setListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      } else {
+      this.filtersStore.setFilter(filter)
+      }
+    }
+  }
+
+  clearListFilters(): void {
+    this.filtersStore = useFiltersStore()
+    this.filtersStore.clearFilters()
+  }
+
+  updateListFilter(filter: FilterParams): void {
+    if(this.listFilterValidation(filter)){
+      this.filtersStore = useFiltersStore()
+      const index = this.filtersStore.filters.findIndex((f: FilterParams) => f.field === filter.field)
+      if(index === -1) {
+        this.filtersStore.setFilter(filter)
+      } else {
+      this.filtersStore.setFilters([...this.filtersStore.filters.slice(0, index), filter, ...this.filtersStore.filters.slice(index + 1)])
+      }
+    }
+  }
+
+
+
+}

package/dist/spa/src/main.ts

@@ -9,7 +9,7 @@ import router from './router'
 const app = createApp(App)
 /* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */
 
-
+ 
 app.use(createPinia())
 app.use(router)
 

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

@@ -1,24 +1,24 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ResourceParent from '@/views/ResourceParent.vue'
-import ListView from '@/views/ListView.vue'
-import ShowView from '@/views/ShowView.vue'
-import EditView from '@/views/EditView.vue'
-import CreateView from '@/views/CreateView.vue'
+import { useUserStore } from '@/stores/user'
+/* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'home',
-      //redirect to login 
-      /* IMPORTANT:ADMINFORTH REDIRECT */
-
-    },
     {
       path: '/login',
       name: 'login',
-      component: () => import('@/views/LoginView.vue')
+      component: () => import('@/views/LoginView.vue'),
+      meta: { title: 'login' },
+      beforeEnter: async (to, from, next) => {
+        const userStore = useUserStore()
+        if(localStorage.getItem('isAuthorized') === 'true'){
+          next({name: 'home'})
+        } else {
+          next()
+        }
+      }
     },
     {
       path: '/resource/:resourceId',
@@ -27,23 +27,29 @@ const router = createRouter({
       children: [
         {
           path: '',
-          component: ListView,
-          name: 'resource-list'
+          component: () => import('@/views/ListView.vue'),
+          name: 'resource-list',
+          meta: { title: 'list',type: 'list' }
         },
         {
           path: 'show/:primaryKey',
-          component: ShowView,
-          name: 'resource-show'
+          component: () => import('@/views/ShowView.vue'),
+          name: 'resource-show',
+          meta: { title: 'show', type: 'show'}
+
         },
         {
           path: 'edit/:primaryKey',
-          component: EditView,
-          name: 'resource-edit'
+          component: () => import('@/views/EditView.vue'),
+          name: 'resource-edit',
+          meta: { title: 'edit', type: 'edit'}
         },
         {
           path: 'create',
-          component: CreateView,
-          name: 'resource-create'
+          component: () => import('@/views/CreateView.vue'),
+          name: 'resource-create',
+          meta: { title: 'create', type: 'create'}
+
         },
       ]
     }, 
@@ -51,4 +57,8 @@ const router = createRouter({
   ]
 })
 
+
+
+
+
 export default router

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

@@ -0,0 +1,51 @@
+import type { AdminForthResource, AdminForthResourceColumn } from '../types/AdminForthConfig';
+
+export type resourceById = {
+    [key: string]: AdminForthResource;
+}
+
+export type Menu = {
+    label: string,
+    icon: string,
+    resourceId: string,
+    children?: Array<Menu>,
+}
+
+export type Record = {
+    [key: string]: any;
+}
+
+export type ResourceColumns = {
+    [key: string]: Array<AdminForthResourceColumn>;
+}
+
+export type CoreConfig = {
+    brandName: string,
+    brandLogo: string,
+    title: string,
+    datesFormat: string,
+    usernameField: string,
+    usernameFieldName?: string,
+    deleteConfirmation?: boolean,
+    auth?: {
+        resourceId: string,
+        usernameField: string,
+        passwordHashField: string,
+        loginBackgroundImage: string,
+        userFullnameField: string,
+    },
+    emptyFieldPlaceholder?: {
+        show: string,
+        list: string,
+       
+    } | string,
+}
+
+
+export type AllowedActions = {
+    show: boolean,
+    create: boolean,
+    edit: boolean,
+    delete: boolean,
+}
+

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

@@ -1,39 +1,50 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
+import type { AdminForthResource, AdminForthResourceColumn } from '@/types/AdminForthConfig';
+import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
-  const resourceById = ref([]);
+  const resourceById: Ref<Object> = ref({});
   const menu = ref([]);
   const config = ref({});
-  const record = ref({});
-  const resourceColumns = ref(null);
+  const record: Ref<any | null> = ref({});
+  const resource: Ref<AdminForthResource | null> = ref(null);
+
+  const resourceColumnsWithFilters = computed(() => {
+    if (!resource.value) {
+      return [];
+    }
+    return resource.value.columns.filter((col: AdminForthResourceColumn) => col.showIn?.includes('filter'));
+  })
+
+  const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
-  const user = ref(null);
+  const adminUser = ref(null);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
       method: 'GET',
     });
+    if(!resp){
+      return
+    }
     menu.value = resp.menu;
-    resourceById.value = resp.resources.reduce((acc, resource) => {
+    resourceById.value = resp.resources.reduce((acc: Object, resource: AdminForthResource) => {
       acc[resource.resourceId] = resource;
       return acc;
     }, {});
     config.value = resp.config;
-    user.value = resp.user;
+    adminUser.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
-
-    // find homepage:true in menu recuresively
-    
   }
 
   async function fetchRecord({ resourceId, primaryKey }) {
     record.value = null;
     
-    if (!resourceColumns.value) {
+    if (!resource.value) {
       throw new Error('Columns not fetched yet');
     }
 
@@ -45,7 +56,7 @@ export const useCoreStore = defineStore('core', () => {
         resourceId: resourceId,
         filters: [
           {
-            field: resourceColumns.value.find((col) => col.primaryKey).name,
+            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
             operator: 'eq',
             value: primaryKey
           }
@@ -56,30 +67,39 @@ export const useCoreStore = defineStore('core', () => {
       }
     });
 
-    console.log('📦 record', respData);
-    record.value = respData.data[0];
+    if (respData.error) {
+      window.adminforth.alert({
+        message: respData.error,
+        variant: 'danger',
+        timeout: 'unlimited'
+      });
+      record.value = {};
+    } else {
+      record.value = respData.data[0];
+    }
+
   }
 
-  async function fetchColumns({ resourceId }) {
-    if (resourceColumnsId.value === resourceId && resourceColumns.value) {
+  async function fetchResourceFull({ resourceId }: { resourceId: string }) {
+    if (resourceColumnsId.value === resourceId && resource.value) {
       // already fetched
       return;
     }
     resourceColumnsId.value = resourceId;
-    resourceColumns.value = null;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
-      path: '/get_resource_columns',
+      path: '/get_resource',
       method: 'POST',
       body: {
         resourceId,
       }
-    }
-    );
+    });
     if (res.error) {
       resourceColumnsError.value = res.error;
     } else {
-      resourceColumns.value = res.resource.columns;
+      resourceById.value[resourceId] = res.resource;
+      resource.value = res.resource;
+      resourceOptions.value = res.resource.options;
     }
   }
 
@@ -91,21 +111,16 @@ export const useCoreStore = defineStore('core', () => {
     config.value = {...config.value, ...res};
   }
 
-  async function logout() {
-    await callAdminForthApi({
-      path: '/logout',
-      method: 'POST',
-    });
-  }
+ 
 
   const username = computed(() => {
     const usernameField = config.value.usernameField;
-    return user.value && user.value[usernameField];
+    return adminUser.value && adminUser.value[usernameField];
   });
 
   const userFullname = computed(() => {
     const userFullnameField = config.value.userFullnameField;
-    return user.value && user.value[userFullnameField];
+    return adminUser.value && adminUser.value[userFullnameField];
   })
 
 
@@ -119,9 +134,11 @@ export const useCoreStore = defineStore('core', () => {
     fetchMenuAndResource, 
     fetchRecord, 
     record, 
-    resourceColumns, 
-    fetchColumns, 
+    fetchResourceFull, 
     resourceColumnsError,
-    logout
+    resourceOptions,
+    resource,
+    adminUser,
+    resourceColumnsWithFilters
   }
 })

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

@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { callAdminForthApi } from '@/utils';
+
+export const useFiltersStore = defineStore('filters', () => {
+    const filters = ref([]);
+    const setFilter = (filter: any) => {
+        filters.value = [...filters.value, filter];
+    }
+    const setFilters = (f: any) => {
+        filters.value = [...f];
+    }
+    const getFilters = () => {
+        return filters.value;
+    }
+    const clearFilters = () => {
+        filters.value = [];
+    }
+    return {setFilter, getFilters,clearFilters, filters,setFilters}
+    })
+
+    

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

@@ -1,6 +1,12 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
+
+ type ModalContentType = {
+  title?: string;
+  content?: string;
+  acceptText?: string;
+  cancelText?: string;
+ }
 
 
 export const useModalStore = defineStore('modal', () => {
@@ -12,13 +18,17 @@ export const useModalStore = defineStore('modal', () => {
   });  
   const isOpened = ref(false);
   const onAcceptFunction: any = ref(()=>{});
+  const onCancelFunction: any = ref(()=>{});
   function togleModal() {
     isOpened.value = !isOpened.value;
   }
   function setOnAcceptFunction(func: Function) {
     onAcceptFunction.value = func;
   }
-  function setModalContent(content: string) {
+  function setOnCancelFunction(func: Function) {
+    onCancelFunction.value = func;
+  }
+  function setModalContent(content: ModalContentType) {
     modalContent.value = content;
   }
   function resetmodalState() {
@@ -33,6 +43,6 @@ export const useModalStore = defineStore('modal', () => {
 
   }
     
-  return {isOpened, setModalContent, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState} 
+  return {isOpened, setModalContent,onCancelFunction, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState,setOnCancelFunction} 
    
 })

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

@@ -0,0 +1,15 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { callAdminForthApi } from '@/utils';
+import { v1 as uuid } from 'uuid';
+
+export const useToastStore = defineStore('toast', () => {
+    const toasts = ref([]);
+    const addToast = (toast) => {
+        toasts.value.push({...toast, id: uuid()});
+    };
+    const removeToast = (toast) => {
+        toasts.value = toasts.value.filter((t) => t.id !== toast.id);
+    };
+    return { toasts, addToast, removeToast };
+});

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

@@ -0,0 +1,54 @@
+import {ref} from 'vue';
+import {defineStore} from 'pinia';
+import { callAdminForthApi } from '@/utils';
+
+export const useUserStore = defineStore('user', () => {
+    const isAuthorized = ref(false);
+
+    function authorize() {
+        isAuthorized.value = true;
+        localStorage.setItem('isAuthorized', 'true');
+    }
+
+    function unauthorize() {
+        isAuthorized.value = false;
+        localStorage.setItem('isAuthorized', 'false');
+    }
+
+    async function logout() {
+        await callAdminForthApi({
+          path: '/logout',
+          method: 'POST',
+        });
+        unauthorize();
+      }
+
+    // async function checkAuth( skipApiCall = false){
+    //      console.log('checkAuth', isAuthorized.value, skipApiCall)
+    //     if(isAuthorized.value) {
+    //         return true}
+    //     else {
+    //         if(skipApiCall) return false;
+    //         const resp = await callAdminForthApi({
+    //             path: '/check_auth',
+    //             method: 'POST',
+    //         });
+    //         if (resp.status !== 401) {
+    //             authorize();
+    //             return true;
+    //         }
+    //         else {
+    //             unauthorize();
+    //             return false;}
+    //     }
+        
+    // }
+
+    return {
+        isAuthorized,
+        authorize,
+        unauthorize,
+        logout
+    }
+
+});        

package/dist/spa/src/utils.ts

@@ -1,6 +1,10 @@
 import { onMounted, ref, resolveComponent } from 'vue';
+import type {  CoreConfig } from './spa_types/core';
 
 import router from "./router";
+import { useRouter } from 'vue-router';
+import { useCoreStore } from './stores/core';
+import { useUserStore } from './stores/user';
 
 export async function callApi({path, method, body=undefined} ) {
   const options = {
@@ -13,14 +17,18 @@ export async function callApi({path, method, body=undefined} ) {
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
   const r = await fetch(fullPath, options);
   if (r.status == 401) {
-    console.log('router', router);
-    router.push({name: 'login'});
+    useUserStore().unauthorize();
+    router.push({ name: 'login' });
     return null;
-  }
+  } 
   return await r.json();
 }
 
-export async function callAdminForthApi({ path, method, body=undefined }) {
+export async function callAdminForthApi({ path, method, body=undefined }: {
+  path: string,
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  body?: any
+}) {
   try {
     return callApi({path: `/adminapi/v1${path}`, method, body} );
   } catch (e) {
@@ -29,8 +37,8 @@ export async function callAdminForthApi({ path, method, body=undefined }) {
   }
 }
 
-export function getCustomComponent(filePath: string) {
-  const name = filePath.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
+export function getCustomComponent({ file, meta }: { file: string, meta: any }) {
+  const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
   console.log('resolving name', name);
   return resolveComponent(name);
 }
@@ -43,4 +51,51 @@ export function getIcon(icon: string) {
   const [iconSet, iconName] = icon.split(':');
   const compName = 'Icon' + iconName.split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
   return resolveComponent(compName);
-}
+}
+
+export const loadFile = (file: string) => {
+  if (file.startsWith('http')) {
+    return file;
+  }
+  let path;
+  let baseUrl = '';
+  if (file.startsWith('@/')) {
+    path = file.replace('@/', '');
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
+  } else if (file.startsWith('@@/')) {
+    path = file.replace('@@/', '');
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
+  } else {
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
+  }
+  return baseUrl;
+}
+
+export function checkEmptyValues(value: any, viewType:'show' | 'list' ) {
+  const config: CoreConfig | {} = useCoreStore().config;
+  let emptyFieldPlaceholder = '';
+  if (config.emptyFieldPlaceholder) {
+    if(typeof config.emptyFieldPlaceholder === 'string') {
+      emptyFieldPlaceholder = config.emptyFieldPlaceholder;
+    } else {
+       emptyFieldPlaceholder = config.emptyFieldPlaceholder?.[viewType] || '';
+    }
+    if (value === null || value === undefined || value === '') {
+      return emptyFieldPlaceholder;
+    }
+  }
+  return value;
+}
+
+export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
+  if (!allowedActions) {
+    console.warn('allowedActions not set');
+    return;
+  }
+  if(allowedActions[action] === false) {
+    console.warn(`Action ${action} is not allowed`);
+    router.back();
+  }
+}
+
+