adminforth 1.0.84 → 1.1.1

package/index.ts

@@ -9,18 +9,15 @@ import ExpressServer from './servers/express.js';
 import {v1 as uuid} from 'uuid';
 import fs from 'fs';
 import { ADMINFORTH_VERSION } from './modules/utils.js';
-import { AdminForthConfig, AdminForthClass, AdminForthFilterOperators, AdminForthDataTypes } from './types/AdminForthConfig.js';
+import { AdminForthConfig, AdminForthClass, AdminForthFilterOperators, AdminForthDataTypes, AdminForthResourcePages } from './types/AdminForthConfig.js';
 import { getFunctionList } from './modules/utils.js';
 import path from 'path';
 
-const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
-const DEFAULT_ALLOWED_ACTIONS = {create: true, edit: true, show: true, delete: true};
 
+//get array from enum AdminForthResourcePages
+
+const DEFAULT_ALLOWED_ACTIONS = {create: true, edit: true, show: true, delete: true};
 
-type ValidationObject = {
-  regex: string,
-  message: string,
-}
 
 class AdminForth implements AdminForthClass {
   static Types = AdminForthDataTypes;
@@ -41,7 +38,7 @@ class AdminForth implements AdminForthClass {
   codeInjector: CodeInjector;
   connectors: any;
   connectorClasses: any;
-  runningHotReload?: boolean;
+  runningHotReload: boolean;
 
   statuses: {
     dbDiscover?: 'running' | 'done',
@@ -151,12 +148,12 @@ class AdminForth implements AdminForthClass {
         if (!res.table) {
           errors.push(`Resource "${res.dataSource}" is missing table`);
         }
-        // if itemLabel is not callable, throw error
-        if (res.itemLabel && typeof res.itemLabel !== 'function') {
-          errors.push(`Resource "${res.dataSource}" itemLabel is not a function`);
+        // if recordLabel is not callable, throw error
+        if (res.recordLabel && typeof res.recordLabel !== 'function') {
+          errors.push(`Resource "${res.dataSource}" recordLabel is not a function`);
         }
-        if (!res.itemLabel) {
-          res.itemLabel = (item) => {
+        if (!res.recordLabel) {
+          res.recordLabel = (item) => {
             const pkVal = item[res.columns.find((col) => col.primaryKey).name];
             return `${res.label} ${pkVal}`;
           }
@@ -203,13 +200,11 @@ class AdminForth implements AdminForthClass {
             }
           }
 
-
-
-          const wrongShowIn = col.showIn && col.showIn.find((c) => !AVAILABLE_SHOW_IN.includes(c));
+          const wrongShowIn = col.showIn && col.showIn.find((c) => AdminForthResourcePages[c] === undefined);
           if (wrongShowIn) {
-            errors.push(`Resource "${res.resourceId}" column "${col.name}" has invalid showIn value "${wrongShowIn}", allowed values are ${AVAILABLE_SHOW_IN.join(', ')}`);
+            errors.push(`Resource "${res.resourceId}" column "${col.name}" has invalid showIn value "${wrongShowIn}", allowed values are ${Object.keys(AdminForthResourcePages).join(', ')}`);
           }
-          col.showIn = col.showIn?.map(c => c.toLowerCase()) || AVAILABLE_SHOW_IN;
+          col.showIn = col.showIn || Object.values(AdminForthResourcePages);
         })
 
         if (!res.options) {
@@ -266,19 +261,18 @@ class AdminForth implements AdminForthClass {
 
         }
 
-          //add default allowedActions to resources
-          if(res.options.allowedActions){
-            //check if allowedActions is an object
-            if(typeof res.options.allowedActions !== 'object'){
-              errors.push(`Resource "${res.resourceId}" allowedActions must be an object`);
-            }
-            const userAllowedActions = res.options.allowedActions 
-            res.options.allowedActions = Object.assign({}, DEFAULT_ALLOWED_ACTIONS, userAllowedActions);         
-          } else {
-            res.options.allowedActions = DEFAULT_ALLOWED_ACTIONS;
+        //add default allowedActions to resources
+        if(res.options.allowedActions){
+          //check if allowedActions is an object
+          if(typeof res.options.allowedActions !== 'object'){
+            errors.push(`Resource "${res.resourceId}" allowedActions must be an object`);
           }
-        })
-
+          const userAllowedActions = res.options.allowedActions 
+          res.options.allowedActions = Object.assign({}, DEFAULT_ALLOWED_ACTIONS, userAllowedActions);         
+        } else {
+          res.options.allowedActions = DEFAULT_ALLOWED_ACTIONS;
+        }
+      })
     
 
 
@@ -356,8 +350,8 @@ class AdminForth implements AdminForthClass {
     // check is all custom components files exists
     for (const resource of this.config.resources) {
       for (const column of resource.columns) {
-          if (column.component) {
-            for (const [key, value] of Object.entries(column.component)) {
+          if (column.components) {
+            for (const [key, value] of Object.entries(column.components)) {
                 if (this.codeInjector.allComponentNames[value]) {
                   // not obvious, but if we are in this if, it means that this is plugin component
                   // and there is no sense to check if it exists in users folder
@@ -696,7 +690,7 @@ class AdminForth implements AdminForthClass {
             });
             const targetDataMap = targetData.data.reduce((acc, item) => {
               acc[item[targetResourcePkField]] = {
-                label: targetResource.itemLabel(item),
+                label: targetResource.recordLabel(item),
                 pk: item[targetResourcePkField],
               }
               return acc;
@@ -728,7 +722,7 @@ class AdminForth implements AdminForthClass {
         });
 
         data.data.forEach((item) => {
-          item._label = resource.itemLabel(item);
+          item._label = resource.recordLabel(item);
         });
 
         return {
@@ -782,7 +776,7 @@ class AdminForth implements AdminForthClass {
         });
         const items = dbDataItems.data.map((item) => {
           const pk = item[targetResource.columns.find((col) => col.primaryKey).name];
-          const labler = targetResource.itemLabel;
+          const labler = targetResource.recordLabel;
           return { 
             value: pk,
             label: labler(item),

package/modules/codeInjector.ts

@@ -10,7 +10,7 @@ import AdminForth from '../index.js';
 import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 import { getComponentNameFromPath } from './utils.js';
 import { styles } from '../styles.js'
-
+import { CodeInjectorType } from '../types/AdminForthConfig.js';
 
 
 
@@ -30,7 +30,7 @@ function hashify(obj) {
     ('sha256').update(JSON.stringify(obj)).digest('hex');
 }
 
-class CodeInjector {
+class CodeInjector implements CodeInjectorType {
 
   allWatchers = [];
   adminforth: AdminForth;
@@ -263,8 +263,8 @@ class CodeInjector {
     const customResourceComponents = [];
     this.adminforth.config.resources.forEach((resource) => {
       resource.columns.forEach((field) => {
-        if (field.component) {
-          Object.values(field.component).forEach((filePath) => {
+        if (field.components) {
+          Object.values(field.components).forEach((filePath) => {
             if (!customResourceComponents.includes(filePath)) {
               customResourceComponents.push(filePath);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.84",
+  "version": "1.1.1",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/plugins/ForeignInlineListPlugin/index.ts

@@ -1,4 +1,4 @@
-import { AdminForthResource } from "../../types/AdminForthConfig.js";
+import { AdminForthResource, AdminForthResourcePages } from "../../types/AdminForthConfig.js";
 import AdminForthPlugin from "../base.js";
 import AdminForth from "../../index.js";
 
@@ -30,8 +30,8 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
       name: `foreignInlineList_${this.foreignResource.resourceId}`,
       label: 'Foreign Inline List',
       virtual: true,
-      showIn: ['show'],
-      component: {
+      showIn: [AdminForthResourcePages.show],
+      components: {
         showRow: this.componentPath('InlineList.vue'),
       },
     });

package/servers/express.ts

@@ -1,15 +1,10 @@
 
 import path from 'path';
-import { fileURLToPath } from 'url';
 import fs from 'fs';
 import CodeInjector from '../modules/codeInjector.js';
-import AdminForth from '../index.js';
 import { Express } from 'express';
 import fetch from 'node-fetch';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
+import { AdminForthClass, ExpressHttpServer } from '../types/AdminForthConfig.js';
 
 
 function replaceAtStart(string, substring) {
@@ -80,12 +75,12 @@ const respondNoServer = (title, explanation) => {
     </body>
     `;
 }
-class ExpressServer {
+class ExpressServer implements ExpressHttpServer {
 
   expressApp: Express;
-  adminforth: AdminForth;
+  adminforth: AdminForthClass;
 
-  constructor(adminforth) {
+  constructor(adminforth: AdminForthClass) {
     this.adminforth = adminforth;
   }
 

package/spa/package-lock.json

@@ -17,6 +17,7 @@
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "unhead": "^1.9.12",
+        "uuid": "^10.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -4032,6 +4033,18 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",

package/spa/package.json

@@ -21,6 +21,7 @@
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "unhead": "^1.9.12",
+    "uuid": "^10.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"

package/spa/src/App.vue

@@ -123,15 +123,43 @@
     </div>
   </div>
   <AcceptModal />
+  <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <transition-group
+      name="fade"
+      tag="div"
+      class="flex flex-col-reverse gap-1"
+    >
+      <Toast :toast="t" @close="toastStore.removeToast(t)" v-for="(t,i) in toastStore.toasts" :key="`t-${t.id}`" ></Toast>
+    </transition-group>
+  </div>
 
   <div v-if="sideBarOpen" 
   @click="sideBarOpen = false"
   
   drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"></div>
 
+
+
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+
+  .fade-leave-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-leave-to {
+    @apply opacity-0;
+  }
+  .fade-enter-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-enter-from {
+    @apply opacity-0;
+  }
+  .fade-enter-to {
+    @apply opacity-100;
+  }
+
 </style>
 
 <script setup lang="ts">
@@ -140,6 +168,7 @@ import { RouterLink, RouterView } from 'vue-router';
 import { initFlowbite } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
+import {useModalStore} from '@/stores/modal';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
@@ -148,33 +177,22 @@ import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
 import { loadFile } from './utils';
-
+import Toast from './components/Toast.vue';
+import {useToastStore} from '@/stores/toast';
+import { FrontendAPI } from '@/composables/useStores'
 // import { link } from 'fs';
 const coreStore = useCoreStore();
-
-
+const modalStore = useModalStore();
+const toastStore = useToastStore();
+const frontendApi = new FrontendAPI();
+frontendApi.init();
 const splitAtLast = (str: string, separator: string) => {
   const index = str.lastIndexOf(separator);
   return [str.slice(0, index), str.slice(index + 1)];
 }
-
-
-
 createHead()
-
-
 const sideBarOpen = ref(false);
-
-
-
 const route = useRoute();
-watch(route, () => {
-  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
-  useHead({
-    title: title.value,
-  })
-});
-
 const router = useRouter();
 const title = ref('');
 //create a ref to store the opened menu items with ts type;
@@ -226,6 +244,13 @@ async function loadMenu() {
   });
 }
 
+watch(route, () => {
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  useHead({
+    title: title.value,
+  })
+});
+
 // initialize components based on data attribute selectors
 onMounted(async () => {
   loadMenu(); // run this in async mode

package/spa/src/components/AcceptModal.vue

@@ -3,13 +3,6 @@ import { ref,onMounted } from 'vue'
 import { useModalStore } from '@/stores/modal';
 
 const modalStore = useModalStore();
-
-
-
-
-
-
-        
 </script>
 
 <template>
@@ -28,10 +21,10 @@ const modalStore = useModalStore();
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
                     <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{modalStore.onAcceptFunction();modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="modalStore.togleModal"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

package/spa/src/components/Toast.vue

@@ -0,0 +1,65 @@
+<template>
+    
+
+<div id="toast-default" class="flex  items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 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">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+        </svg>
+        <span class="sr-only">Fire icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+        </svg>
+        <span class="sr-only">Error icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+        </svg>
+        <span class="sr-only">Warning icon</span>
+    </div>
+    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+        </svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ms-3 text-sm font-normal">{{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" >
+        <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>
+    </button>
+</div>
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useToastStore } from '@/stores/toast';
+const toastStore = useToastStore();
+const emit = defineEmits(['close']);
+const props = defineProps<{
+    toast:{message: string;
+    variant: string;
+    id: string;
+    duration?: number;}
+}>();
+function closeToast() {
+    emit('close');
+}
+
+onMounted(() => {
+    setTimeout(() => {
+     emit('close');   
+    }, props.toast.duration  || 5000 );
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/spa/src/components/ValueRenderer.vue

@@ -2,9 +2,9 @@
   <div>
     
     <span v-if="column.foreignResource">
-      <RouterLink v-if="row[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
-        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: row[column.name].pk } }">
-        {{ row[column.name].label }}
+      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
+        {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
         <span class="text-gray-400">-</span>
@@ -12,18 +12,18 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="row[column.name]" class="bg-green-100 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">Yes</span>
+      <span v-if="record[column.name]" class="bg-green-100 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">Yes</span>
       <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 === row[column.name])?.label,route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'">
-      {{ checkEmptyValues(formatDate(row[column.name]),route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
       
     </span>
     <span v-else>
-      {{ checkEmptyValues(row[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
     </span>
   </div>
 </template>
@@ -49,7 +49,7 @@ dayjs.extend(timezone);
 
 const props = defineProps({
   column: Object,
-  row: Object
+  record: Object
 });
 
 

package/spa/src/composables/useStores.ts

@@ -0,0 +1,51 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams } from '../types/FrontendAPI';
+import { useToastStore } from '../stores/toast';
+import { useModalStore } from '../stores/modal';
+
+
+
+declare global {
+  interface Window {
+    adminforth: {
+      confirm: (params: ConfirmParams) => Promise<void>;
+      alert: (params: AlertParams) => void;
+    };
+  }
+}
+
+export class FrontendAPI implements FrontendAPIInterface {
+  private toastStore:any
+  private modalStore: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)
+    }
+  }
+
+  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
+    })
+  }
+}
+
+
+
+

package/spa/src/stores/core.ts

@@ -8,6 +8,8 @@ export const useCoreStore = defineStore('core', () => {
   const config = ref({});
   const record = ref({});
   const resourceColumns = ref(null);
+  const resource = ref(null);
+
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
@@ -85,6 +87,7 @@ export const useCoreStore = defineStore('core', () => {
     } else {
       resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
+      resource.value = res.resource;
       resourceOptions.value = res.resource.options;
     }
   }
@@ -129,6 +132,7 @@ export const useCoreStore = defineStore('core', () => {
     fetchResourceFull, 
     resourceColumnsError,
     resourceOptions,
-    logout
+    logout,
+    resource,
   }
 })

package/spa/src/stores/modal.ts

@@ -2,6 +2,13 @@ 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', () => {
   const modalContent = ref({
@@ -12,13 +19,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 +44,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/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 };
+});