adminforth 1.1.75 → 1.1.76

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

@@ -0,0 +1,26 @@
+export function showSuccesTost(message: string) {
+  window.adminforth.alert({ message, variant: 'success' });  
+  return message;
+}
+
+export function showWarningTost(message: string) {
+  window.adminforth.alert({ message, variant: 'warning' });  
+  return message;
+}
+
+export function showErrorTost(message: string, timeout?: number) {
+  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 'unlimited'});  
+  return message;
+}
+
+
+const useFrontendApi = () => {
+    return {
+        showSuccesTost,
+        showWarningTost,
+        showErrorTost
+    }
+}
+
+
+export default useFrontendApi;

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

@@ -0,0 +1,126 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '../types/FrontendAPI';
+import type { AdminForthFilterOperators } from '@/types/AdminForthConfig';
+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';
+
+ type FilterParams = {
+  /**
+   * Field of resource to filter
+   */
+  field: string;
+  /**
+   * Operator of filter
+   */
+  operator: AdminForthFilterOperators;
+  /**
+   * Value of filter
+   */
+  value: string | number | boolean ;
+}
+
+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 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`)
+      }
+      
+    }
+    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 {
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(index, 1);
+        } else {
+          filters[index] = filter;
+        }
+        this.filtersStore.setFilters(filters);
+      }
+    }
+  }
+
+
+
+}

package/dist/spa/spa/src/index.scss

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+// @layer base {
+//   /* width */
+//   ::-webkit-scrollbar {
+//     @apply w-2 p-2
+//   }
+  
+//   /* Track */
+//   ::-webkit-scrollbar-track {
+//     @apply bg-inherit
+//   }
+  
+//   /* Handle */
+//   ::-webkit-scrollbar-thumb {
+//     @apply bg-gray-200 dark:bg-gray-600 rounded-xl
+//   }
+  
+//   /* Handle on hover */
+//   ::-webkit-scrollbar-thumb:hover {
+//     @apply bg-gray-700
+//   }
+// }

package/dist/spa/spa/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+/* IMPORTANT:ADMINFORTH IMPORTS */
+
+
+import App from './App.vue'
+import router from './router'
+
+export const app = createApp(App)
+/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */
+
+ 
+app.use(createPinia())
+app.use(router)
+
+/* IMPORTANT:ADMINFORTH CUSTOM USES */
+
+app.mount('#app')

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

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

package/dist/spa/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/spa/src/stores/core.ts

@@ -0,0 +1,144 @@
+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<Object> = ref({});
+  const menu = ref([]);
+  const config = ref({});
+  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 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: Object, resource: AdminForthResource) => {
+      acc[resource.resourceId] = resource;
+      return acc;
+    }, {});
+    config.value = resp.config;
+    adminUser.value = resp.user;
+    console.log('🌍 AdminForth v', resp.version);
+  }
+
+  async function fetchRecord({ resourceId, primaryKey }) {
+    record.value = null;
+    
+    if (!resource.value) {
+      throw new Error('Columns not fetched yet');
+    }
+
+    const respData = await callAdminForthApi({
+      path: '/get_resource_data',
+      method: 'POST',
+      body: {
+        source: 'show',
+        resourceId: resourceId,
+        filters: [
+          {
+            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
+            operator: 'eq',
+            value: primaryKey
+          }
+        ],
+        sort: [],
+        limit: 1,
+        offset: 0
+      }
+    });
+
+    if (respData.error) {
+      window.adminforth.alert({
+        message: respData.error,
+        variant: 'danger',
+        timeout: 'unlimited'
+      });
+      record.value = {};
+    } else {
+      record.value = respData.data[0];
+    }
+
+  }
+
+  async function fetchResourceFull({ resourceId }: { resourceId: string }) {
+    if (resourceColumnsId.value === resourceId && resource.value) {
+      // already fetched
+      return;
+    }
+    resourceColumnsId.value = resourceId;
+    resourceColumnsError.value = '';
+    const res = await callAdminForthApi({
+      path: '/get_resource',
+      method: 'POST',
+      body: {
+        resourceId,
+      }
+    });
+    if (res.error) {
+      resourceColumnsError.value = res.error;
+    } else {
+      resourceById.value[resourceId] = res.resource;
+      resource.value = res.resource;
+      resourceOptions.value = res.resource.options;
+    }
+  }
+
+  async function getPublicConfig() {
+    const res = await callAdminForthApi({
+      path: '/get_public_config',
+      method: 'GET',
+    });
+    config.value = {...config.value, ...res};
+  }
+
+ 
+
+  const username = computed(() => {
+    const usernameField = config.value.usernameField;
+    return adminUser.value && adminUser.value[usernameField];
+  });
+
+  const userFullname = computed(() => {
+    const userFullnameField = config.value.userFullnameField;
+    return adminUser.value && adminUser.value[userFullnameField];
+  })
+
+
+  return { 
+    config,
+    resourceById, 
+    menu, 
+    username,
+    userFullname,
+    getPublicConfig,
+    fetchMenuAndResource, 
+    fetchRecord, 
+    record, 
+    fetchResourceFull, 
+    resourceColumnsError,
+    resourceOptions,
+    resource,
+    adminUser,
+    resourceColumnsWithFilters
+  }
+})

package/dist/spa/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/spa/src/stores/modal.ts

@@ -0,0 +1,48 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+ type ModalContentType = {
+  title?: string;
+  content?: string;
+  acceptText?: string;
+  cancelText?: string;
+ }
+
+
+export const useModalStore = defineStore('modal', () => {
+  const modalContent = ref({
+    title: 'title',
+    content: 'content',
+    acceptText: 'acceptText',
+    cancelText: 'cancelText',
+  });  
+  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 setOnCancelFunction(func: Function) {
+    onCancelFunction.value = func;
+  }
+  function setModalContent(content: ModalContentType) {
+    modalContent.value = content;
+  }
+  function resetmodalState() {
+    isOpened.value = false;
+    modalContent.value = {
+      title: 'title',
+      content: 'content',
+      acceptText: 'acceptText',
+      cancelText: 'cancelText',
+    };
+    setOnAcceptFunction(()=>{});
+
+  }
+    
+  return {isOpened, setModalContent,onCancelFunction, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState,setOnCancelFunction} 
+   
+})

package/dist/spa/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/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/spa/src/utils.ts

@@ -0,0 +1,101 @@
+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 = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  };
+  const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
+  const r = await fetch(fullPath, options);
+  if (r.status == 401 ) {
+    useUserStore().unauthorize();
+    router.push({ name: 'login' });
+    return null;
+  } 
+  return await r.json();
+}
+
+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) {
+    console.error('error', e);
+    return { error: `Unexpected error: ${e}` };
+  }
+}
+
+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);
+}
+
+export function getIcon(icon: string) {
+  // icon format is "feather:icon-name". We need to get IconName in pascal case
+  if (!icon.includes(':')) {
+    throw new Error('Icon name should be in format "icon-set:icon-name"');
+  }
+  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();
+  }
+}
+
+