adminforth 1.2.95 → 1.2.97

package/dist/spa/src/types/FrontendAPI.ts

@@ -0,0 +1,121 @@
+ 
+export interface FrontendAPIInterface {
+
+    /**
+     * Show a confirmation dialog
+     * 
+     * The dialog will be displayed to the user
+     * 
+     * Example: 
+     * 
+     * ```ts
+     * const isConfirmed = await window.adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+     * if (isConfirmed) {
+     *  your code...
+     * }
+     * ```
+     * 
+     * @param params - The parameters of the dialog
+     * @returns A promise that resolves when the user confirms the dialog
+     */   
+    confirm(params:ConfirmParams ): Promise<void>;
+    /**
+     * Show an alert
+     * 
+     * The alert will be displayed to the user
+     * 
+     * Example:
+     * 
+     * ```ts
+     *  window.adminforth.alert({message: 'Hello', variant: 'success'})
+     * ```
+     * 
+     * @param params - The parameters of the alert
+     */
+    alert(params:AlertParams): void;
+    /**
+     * Add a filter to the list of filters.
+     * Works only when user located on the list page.
+     * Can be used to set filter from charts or other components in pageInjections.
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to add
+     */
+    setListFilter(filter: any): void;
+    /**
+     * Update a filter in the list of filters
+     * 
+     * Example:
+     * 
+     * ```ts
+     * window.adminforth.updateListFilter({field: 'name', operator: 'ilike', value: 'john'})
+     * ```
+     * 
+     * @param filter - The filter to update
+     */
+    updateListFilter(filter: any): void;
+    /**
+     * Clear all filters from the list
+     */
+    clearListFilters(): void;
+
+}
+
+export type ConfirmParams = {
+    /**
+     * The message to display in the dialog
+     */
+    message?: string;
+    /**
+     * The text to display in the "accept" button
+     */
+    yes?: string;
+    /**
+     * The text to display in the "cancel" button
+     */
+    no?: string;
+   
+}
+
+export type AlertParams = {
+    /**
+     * The message to display in the alert
+     */
+    message?: string;
+
+    /**
+     * The message to display in the alert as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
+    
+    /**
+     * The variant of the alert
+     */
+    variant?: AlertVariant | keyof typeof AlertVariant;
+
+    /**
+     * The timeout of the alert in seconds or 'unlimited' to keep the alert open until the user closes it.
+     * Default is 10 seconds;
+     */
+    timeout?: number | 'unlimited';
+    
+}
+
+
+
+export enum AlertVariant {
+    danger = 'danger',
+    success = 'success',
+    warning = 'warning',
+    info = 'info'
+  }
+
+  
+  
+
+

package/dist/spa/src/utils.ts

@@ -1,8 +1,15 @@
 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} ) {
+export async function callApi({path, method, body=undefined}: {
+  path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
+  body?: any
+}): Promise<any> {
   const options = {
     method,
     headers: {
@@ -12,15 +19,19 @@ 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'});
+  if (r.status == 401 ) {
+    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,9 +40,10 @@ 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
@@ -41,4 +53,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();
+  }
+}
+
+

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

@@ -1,16 +1,25 @@
 <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 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"
+        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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        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"
+        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"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving" x
@@ -22,32 +31,55 @@
 
     </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="{}"
-      :resourceColumns="coreStore.resourceColumns"
+      :record="record"
+      :resource="coreStore.resource"
       @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 { ref, computed, onMounted } from 'vue';  
-import { useRoute, useRouter } from 'vue-router';
-import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
-import ResourceForm from '@/components/ResourceForm.vue';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
+import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
+import { useCoreStore } from '@/stores/core';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+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';
+
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -62,6 +94,15 @@ 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;
@@ -69,13 +110,16 @@ async function onUpdateRecord(newRecord) {
 
 onMounted(async () => {
   loading.value = true;
-  coreStore.fetchColumns({
+  record.value = initalValues.value;
+  await coreStore.fetchResourceFull({
     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;
@@ -91,12 +135,21 @@ async function saveRecord() {
       record: record.value,
     },
   });
+  if (response.error) {
+    showErrorTost(response.error);
+  }
   saving.value = false;
-  router.push({ name: 'resource-show', params: { 
-    resourceId: route.params.resourceId, 
-    primaryKey: response.newRecordId
-  
-  } });
+  if (route.query.returnTo) {
+    router.push(route.query.returnTo);
+  } else {
+    router.push({ 
+      name: 'resource-show', 
+      params: { 
+        resourceId: route.params.resourceId, 
+        primaryKey: response.newRecordId
+      } 
+    });
+  }
 }
 
 

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

@@ -1,16 +1,24 @@
 <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 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"
+        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"
       >
         Cancel
       </button>
 
       <button  @click="saveRecord"
-        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"
+        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="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />
@@ -19,31 +27,53 @@
 
     </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="coreStore.record"
-      :resourceColumns="coreStore.resourceColumns"
+      :record="editableRecord"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
       @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 { ref, computed, onMounted } from 'vue';  
-import { useRoute, useRouter } from 'vue-router';
-import { useCoreStore } from '@/stores/core';
-import ResourceForm from '@/components/ResourceForm.vue';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
+import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
-import { callAdminForthApi } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { showErrorTost } from '@/composables/useFrontendApi';
 
 const coreStore = useCoreStore();
 
@@ -63,18 +93,31 @@ 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.fetchColumns({
+  await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
   loading.value = false;
 });
 
@@ -87,15 +130,26 @@ async function saveRecord() {
   }
 
   saving.value = true;
-  await callAdminForthApi({
+
+  const updates = {};
+  for (const key in record.value) {
+    if (record.value[key] !== coreStore.record[key]) {
+      updates[key] = record.value[key];
+    }
+  }
+
+  const resp = await callAdminForthApi({
     method: 'POST',
     path: `/update_record`,
     body: {
       resourceId: route.params.resourceId,
       recordId: route.params.primaryKey,
-      record: record.value,
+      record: updates,
     },
   });
+  if (resp.error) {
+    showErrorTost(resp.error);
+  }
   saving.value = false;
   router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
 }