adminforth 1.2.87 → 1.2.89

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

@@ -1,105 +1,96 @@
 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'
+import router from '@/router';
+
+async function findHomepage(menu) {
+  for (const item of menu) {
+    if (item.homepage) {
+      return item;
+    }
+    if (item.children) {
+      const res = findHomepage(item.children);
+      if (res) {
+        return res;
+      }
+    }
+  }
+  return null;
+}
 
 export const useCoreStore = defineStore('core', () => {
-  const resourceById: Ref<Object> = ref({});
+  const resourceById = 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 record = ref({});
+  const resourceColumns = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
-  const adminUser = ref(null);
+  const user = 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) => {
+    resourceById.value = resp.resources.reduce((acc, resource) => {
       acc[resource.resourceId] = resource;
       return acc;
     }, {});
     config.value = resp.config;
-    adminUser.value = resp.user;
-    console.log('🌍 AdminForth v', resp.version);
+    user.value = resp.user;
+
+    // find homepage:true in menu recuresively
+    if (import.meta.env.DEV){
+      return
+    } else {
+      const homepage = await findHomepage(menu.value);
+      if (homepage) {
+        if (homepage.resourceId) {
+          // redirect to homepage
+          router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
+        } else {
+          // redirect to path
+          router.push(homepage.path);
+        }
+      }
+    }
   }
 
   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',
+    record.value = await callAdminForthApi({
+      path: '/get_record',
       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
+        primaryKey: primaryKey,
       }
     });
-
-    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) {
+  async function fetchColumns({ resourceId }) {
+    if (resourceColumnsId.value === resourceId && resourceColumns.value) {
       // already fetched
       return;
     }
     resourceColumnsId.value = resourceId;
+    resourceColumns.value = null;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
-      path: '/get_resource',
+      path: '/get_resource_columns',
       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;
+      resourceColumns.value = res.resource.columns;
     }
   }
 
@@ -111,16 +102,21 @@ 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 adminUser.value && adminUser.value[usernameField];
+    return user.value && user.value[usernameField];
   });
 
   const userFullname = computed(() => {
     const userFullnameField = config.value.userFullnameField;
-    return adminUser.value && adminUser.value[userFullnameField];
+    return user.value && user.value[userFullnameField];
   })
 
 
@@ -134,11 +130,9 @@ export const useCoreStore = defineStore('core', () => {
     fetchMenuAndResource, 
     fetchRecord, 
     record, 
-    fetchResourceFull, 
+    resourceColumns, 
+    fetchColumns, 
     resourceColumnsError,
-    resourceOptions,
-    resource,
-    adminUser,
-    resourceColumnsWithFilters
+    logout
   }
 })

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

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

package/dist/spa/src/utils.ts

@@ -1,15 +1,8 @@
 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}: {
-  path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
-  body?: any
-}): Promise<any> {
+export async function callApi({path, method, body=undefined} ) {
   const options = {
     method,
     headers: {
@@ -19,19 +12,15 @@ 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 ) {
-    useUserStore().unauthorize();
-    router.push({ name: 'login' });
+  if (r.status == 401) {
+    console.log('router', router);
+    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
-}) {
+export async function callAdminForthApi({ path, method, body=undefined }) {
   try {
     return callApi({path: `/adminapi/v1${path}`, method, body} );
   } catch (e) {
@@ -40,10 +29,9 @@ export async function callAdminForthApi({ path, method, body=undefined }: {
   }
 }
 
-export function getCustomComponent({ file, meta }: { file: string, meta: any }) {
-  const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
-  return resolveComponent(name);
-}
+
+
+
 
 export function getIcon(icon: string) {
   // icon format is "feather:icon-name". We need to get IconName in pascal case
@@ -53,51 +41,4 @@ 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();
-  }
-}
-
-
+}

package/dist/spa/src/views/CreateView.vue

@@ -1,25 +1,16 @@
 <template>
   <div class="relative">
 
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 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"
+        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving" x
@@ -31,55 +22,32 @@
 
     </BreadcrumbsWithButtons>
 
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
-
     
     <ResourceForm 
       v-else
-      :record="record"
-      :resource="coreStore.resource"
+      :record="{}"
+      :resourceColumns="coreStore.resourceColumns"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :source="'create'"
     >
     </ResourceForm>
 
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
   </div>
 </template>
 
 
 <script setup>
 
-import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import ResourceForm from '@/components/ResourceForm.vue';
-import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
+import { ref, computed, onMounted } from 'vue';  
+import { useRoute, useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi } from '@/utils';
+import ResourceForm from '@/components/ResourceForm.vue';
+import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { computed } from 'vue';
-import { showErrorTost } from '@/composables/useFrontendApi';
-
+import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -94,15 +62,6 @@ const record = ref({});
 
 const coreStore = useCoreStore();
 
-const initalValues = computed(() => {
-  if (!route.query.values) {
-    return {};
-  }
-  return JSON.parse(decodeURIComponent(route.query.values));
-});
-
-
-
 async function onUpdateRecord(newRecord) {
   console.log('newRecord', newRecord);
   record.value = newRecord;
@@ -110,16 +69,13 @@ async function onUpdateRecord(newRecord) {
 
 onMounted(async () => {
   loading.value = true;
-  record.value = initalValues.value;
-  await coreStore.fetchResourceFull({
+  coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
   loading.value = false;
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });
 
 async function saveRecord() {
-  console.log('saveRecord isValid', isValid.value);
   if (!isValid.value) {
     validating.value = true;
     return;
@@ -135,21 +91,12 @@ async function saveRecord() {
       record: record.value,
     },
   });
-  if (response.error) {
-    showErrorTost(response.error);
-  }
   saving.value = false;
-  if (route.query.returnTo) {
-    router.push(route.query.returnTo);
-  } else {
-    router.push({ 
-      name: 'resource-show', 
-      params: { 
-        resourceId: route.params.resourceId, 
-        primaryKey: response.newRecordId
-      } 
-    });
-  }
+  router.push({ name: 'resource-show', params: { 
+    resourceId: route.params.resourceId, 
+    primaryKey: response.newRecordId
+  
+  } });
 }
 
 

package/dist/spa/src/views/EditView.vue

@@ -1,24 +1,16 @@
 <template>
   <div class="relative">
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="editableRecord"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900  rounded-default focus:outline-none bg-white rounded border border-gray-300 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"
+        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         :disabled="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />
@@ -27,53 +19,31 @@
 
     </BreadcrumbsWithButtons>
 
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     <ResourceForm 
       v-else
-      :record="editableRecord"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
+      :record="coreStore.record"
+      :resourceColumns="coreStore.resourceColumns"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :source="'edit'"
     >
     </ResourceForm>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
   </div>
 </template>
 
 
 <script setup>
 
-import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import ResourceForm from '@/components/ResourceForm.vue';
-import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
+import { ref, computed, onMounted } from 'vue';  
+import { useRoute, useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import ResourceForm from '@/components/ResourceForm.vue';
+import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { showErrorTost } from '@/composables/useFrontendApi';
+import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
+import { callAdminForthApi } from '@/utils';
 
 const coreStore = useCoreStore();
 
@@ -93,31 +63,18 @@ async function onUpdateRecord(newRecord) {
   record.value = newRecord;
 }
 
-const editableRecord = computed(() => {
-  const newRecord = { ...coreStore.record };
-  if (!coreStore.resource) {
-    return {};
-  }
-  coreStore.resource.columns.forEach(column => {
-    if (column.foreignResource) {
-      newRecord[column.name] = newRecord[column.name]?.pk
-    }
-  });
-  return newRecord;
-})
 
 onMounted(async () => {
-
   loading.value = true;
 
-  await coreStore.fetchResourceFull({
+  await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
+
   loading.value = false;
 });
 
@@ -130,26 +87,15 @@ async function saveRecord() {
   }
 
   saving.value = true;
-
-  const updates = {};
-  for (const key in record.value) {
-    if (record.value[key] !== coreStore.record[key]) {
-      updates[key] = record.value[key];
-    }
-  }
-
-  const resp = await callAdminForthApi({
+  await callAdminForthApi({
     method: 'POST',
     path: `/update_record`,
     body: {
       resourceId: route.params.resourceId,
       recordId: route.params.primaryKey,
-      record: updates,
+      record: record.value,
     },
   });
-  if (resp.error) {
-    showErrorTost(resp.error);
-  }
   saving.value = false;
   router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
 }

package/dist/spa/src/views/HomeView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <main>
+    123
+  </main>
+</template>