adminforth 1.1.4 → 1.1.6

package/spa/src/views/CreateView.vue

@@ -13,13 +13,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 mb-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 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 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 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
@@ -45,8 +45,8 @@
     
     <ResourceForm 
       v-else
-      :record="{}"
-      :resourceColumns="coreStore.resourceColumns"
+      :record="initalValues"
+      :resource="coreStore.resource"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
@@ -77,6 +77,7 @@ import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { computed } from 'vue';
 
 
 const isValid = ref(false);
@@ -93,6 +94,13 @@ let createComponentsPerColumn = {};
 
 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;
@@ -103,7 +111,7 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.create) {
           acc[column.name] = getCustomComponent(column.components.create);
       }
@@ -130,11 +138,17 @@ async function saveRecord() {
     },
   });
   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/spa/src/views/EditView.vue

@@ -12,13 +12,13 @@
     <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  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 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  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 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" />
@@ -95,10 +95,10 @@ async function onUpdateRecord(newRecord) {
 
 const editableRecord = computed(() => {
   const newRecord = { ...coreStore.record };
-  if (!coreStore.resourceColumns) {
+  if (!coreStore.resource) {
     return {};
   }
-  coreStore.resourceColumns.forEach(column => {
+  coreStore.resource.columns.forEach(column => {
     if (column.foreignResource) {
       newRecord[column.name] = newRecord[column.name]?.pk
     }
@@ -119,7 +119,7 @@ onMounted(async () => {
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
 
-  editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.edit) {
           acc[column.name] = getCustomComponent(column.components.edit);
       }

package/spa/src/views/ListView.vue

@@ -2,8 +2,7 @@
   <div class="relative">
     <Teleport to="body">
       <Filters
-        :columns="coreStore.resourceColumns"
-        v-model:filters="filters"
+        :columns="coreStore.resource.columns"
         :columnsMinMax="columnsMinMax" :show="filtersShow"
         @hide="filtersShow = false"
       />
@@ -23,7 +22,7 @@
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
-        class="flex gap-1  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 gap-1  items-center py-1 px-3 me-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"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -39,7 +38,7 @@
         v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
         :key="action.id"
         @click="startBulkAction(action.id)"
-        class="flex gap-1 items-center py-1 px-3  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 gap-1 items-center py-1 px-3 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="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
         'bg-blue-100 text-blue-800 border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
@@ -52,24 +51,24 @@
         {{ `${action.label} (${checkboxes.length})` }}
       </button>
 
-      <RouterLink v-if="coreStore.resource?.options?.create"
+      <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3  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 rounded-default"
+        class="flex items-center py-1 px-3 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 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         Create
       </RouterLink>
 
       <button
-        class="flex gap-1 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 rounded-default"
+        class="flex gap-1 items-center py-1 px-3 me-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 rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
       >
         <IconFilterOutline class="w-4 h-4 me-2"/>
         Filter
         <span
           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"
-          v-if="filters.length">
-            {{ filters.length }}
+          v-if="filtersStore.filters.length">
+            {{ filtersStore.filters.length }}
           </span>
       </button>
     </BreadcrumbsWithButtons>
@@ -90,6 +89,7 @@
       @update:checkboxes="checkboxes = $event"
       :pageSize="pageSize"
       :totalRows="totalRows"
+      :checkboxes="checkboxes"
     />
 
     <component 
@@ -108,6 +108,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useModalStore } from '@/stores/modal';
+import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, getIcon } from '@/utils';
 import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -116,17 +117,15 @@ import { useRoute } from 'vue-router';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 
-import {
-IconInboxOutline,
-IconPlusOutline
-} from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconBanOutline,
-IconEyeSolid,
-IconFilterOutline,
-IconPenSolid,
-IconTrashBinSolid
+  IconBanOutline,
+  IconEyeSolid,
+  IconFilterOutline,
+  IconPenSolid,
+  IconTrashBinSolid,
+  IconInboxOutline,
+  IconPlusOutline
 } from '@iconify-prerendered/vue-flowbite';
 
 import Filters from '@/components/Filters.vue';
@@ -135,11 +134,12 @@ const filtersShow = ref(false);
 
 const coreStore = useCoreStore();
 const modalStore = useModalStore();
+const filtersStore = useFiltersStore();
 
 const route = useRoute();
 
 const page = ref(1);
-const filters = ref([]);
+const filters = filtersStore.filters;
 const columnsMinMax = ref({});
 const sort = ref([]);
 
@@ -157,8 +157,10 @@ watch([page], async () => {
   await getList();
 });
 
-watch([filters], async () => {
+watch(()=>filtersStore.filters, async () => {
   page.value = 1;
+  checkboxes.value = [];
+
   await getList();
 }, {deep: true});
 
@@ -177,13 +179,13 @@ async function getList() {
       resourceId: route.params.resourceId,
       limit: pageSize.value,
       offset: (page.value - 1) * pageSize.value,
-      filters: filters.value,
+      filters: filtersStore.filters,
       sort: sort.value,
     }
   });
 
   rows.value = data.data?.map(row => {
-    row._primaryKeyValue = row[coreStore.resourceColumns.find(c => c.primaryKey).name];
+    row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey).name];
     return row;
   });
   totalRows.value = data.total;
@@ -265,7 +267,7 @@ onMounted(async () => {
 
 // on route param change 
 watch(() => route.params.resourceId, async () => {
-  filters.value = [];
+  filtersStore.setFilters([]);
   checkboxes.value = [];
   sort.value = [];
   await init();

package/spa/src/views/ShowView.vue

@@ -10,14 +10,14 @@
     />
     <BreadcrumbsWithButtons>
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        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 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"
       >
         <IconPenSolid class="w-4 h-4" />
         Edit
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="showDeleteModal"
-        class="flex items-center py-1 px-3 mb-2 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 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"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
@@ -58,7 +58,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
+            <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
               <component
@@ -70,7 +70,7 @@
                   :record="coreStore.record"
               />
               <template v-else>
-                <td class="px-6 py-4 whitespace-nowrap">
+                <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
                   {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
@@ -145,7 +145,7 @@ onMounted(async () => {
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
 
-  showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
       if (column.components?.show) {
           acc[column.name] = getCustomComponent(column.components.show);
       }

package/types/AdminForthConfig.ts

@@ -19,6 +19,17 @@ export interface GenericHttpServer {
    */
   setupSpaServer(): void;
 
+  /**
+   * Method which should register endpoint in HTTP server.
+   * 
+   * @param options : Object with method, path and handler properties.
+   */
+  endpoint(options: {
+    method: string,
+    path: string,
+    handler: Function,
+  }): void;
+
 }
 
 export interface ExpressHttpServer extends GenericHttpServer {
@@ -53,6 +64,7 @@ export interface AdminForthClass {
   codeInjector: CodeInjectorType;
   express: GenericHttpServer;
 
+
   auth: {
 
     verify(jwt : string): any;
@@ -91,8 +103,26 @@ export interface AdminForthPluginType {
   adminforth: AdminForthClass;
   pluginDir: string;
   customFolderName: string;
+  pluginInstanceId: string;
+
+  /**
+   * AdminForth plugins concept is based on modification of full AdminForth configuration
+   * to add some custom functionality. For example plugin might simply add custom field to resource by reusing 
+   * {@link AdminForthResourceColumn.components} object, then add some hook which will modify record before getting or saving it to database.
+   * 
+   * So this method is core of AdminForth plugins. It allows to modify full resource configuration.
+   * @param adminforth Instance of AdminForthClass
+   * @param resourceConfig Resource configuration object which will be modified by plugin
+   */
   modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource): void;
   componentPath(componentFile: string): string;
+
+  /**
+   * Here you can register custom endpoints for your plugin.
+   * 
+   * @param server 
+   */
+  setupEndpoints(server: GenericHttpServer): void;
 }
 
 export enum AdminForthMenuTypes {
@@ -450,9 +480,10 @@ export type AdminForthResource = {
       bulkActions?: Array<{
         label: string,
         state: string,
-        icon: string,
+        icon?: string,
         action: Function,
         id?: string,
+        confirm?: string,
       }>,
       allowedActions?: AllowedActions,
 

package/types/FrontendAPI.ts

@@ -33,6 +33,35 @@ export interface FrontendAPIInterface {
      * @param params - The parameters of the alert
      */
     alert(params:AlertParams): void;
+    /**
+     * Add a filter to the list of filters
+     * 
+     * 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 = {
@@ -62,12 +91,30 @@ export type AlertParams = {
     variant?: AlertVariant;
 }
 
+export type FilterParams = {
+    /**
+     * Field of resource to filter
+     */
+    field: string;
+    /**
+     * Operator of filter
+     */
+    operator: Operator;
+    /**
+     * Value of filter
+     */
+    value: string | number | boolean ;
+}
+
 export enum AlertVariant {
     Danger = 'danger',
     Success = 'success',
     Warning = 'warning',
     Info = 'info'
   }
+
+export type Operator = 'in' | 'ilike' | 'gte' | 'lte'  ;
+