adminforth 1.3.24 → 1.3.25

package/dist/modules/operationalResource.js

@@ -32,8 +32,15 @@ export default class OperationalResource {
             })).data[0] || null;
         });
     }
-    list(filter, limit, offset, sort) {
-        return __awaiter(this, void 0, void 0, function* () {
+    list(filter_1) {
+        return __awaiter(this, arguments, void 0, function* (filter, limit = null, offset = null, sort = []) {
+            // check if type of limit and offset is number
+            if (limit !== null && typeof limit !== 'number') {
+                throw new Error('Limit must be a number');
+            }
+            if (offset !== null && typeof offset !== 'number') {
+                throw new Error('Offset must be a number');
+            }
             let appliedLimit = limit;
             if (limit === null) {
                 appliedLimit = 1000000000;

package/modules/operationalResource.ts

@@ -36,10 +36,18 @@ export default class OperationalResource implements IOperationalResource {
 
   async list(
       filter: IAdminForthFilter | IAdminForthFilter[], 
-      limit: number | null, 
-      offset: number | null, 
-      sort: IAdminForthSort | IAdminForthSort[]
+      limit: number | null = null, 
+      offset: number | null = null,
+      sort: IAdminForthSort | IAdminForthSort[] = []
   ): Promise<any[]> {
+    // check if type of limit and offset is number
+    if (limit !== null && typeof limit !== 'number') {
+      throw new Error('Limit must be a number');
+    }
+    if (offset !== null && typeof offset !== 'number') {
+      throw new Error('Offset must be a number');
+    }
+
     let appliedLimit = limit;
     if (limit === null) {
       appliedLimit = 1000000000;

package/package.json

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

package/spa/src/components/ResourceListTable.vue

@@ -230,10 +230,8 @@
 <script setup>
 
 
-import { initFlowbite } from 'flowbite';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { callAdminForthApi, getIcon } from '@/utils';
+import { computed, ref, watch } from 'vue';
+import { callAdminForthApi } from '@/utils';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';

package/spa/src/components/ThreeDotsMenu.vue

@@ -0,0 +1,43 @@
+<template >
+  <template v-if="threeDotsDropdownItems?.length">
+    <button 
+      data-dropdown-toggle="listThreeDotsDropdown" 
+      class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
+    >
+      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
+        <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+      </svg>
+    </button>
+
+    <!-- Dropdown menu -->
+    <div 
+      id="listThreeDotsDropdown" 
+      class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
+          <li v-for="item in threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
+            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+              <component :is="getCustomComponent(item)" 
+                :meta="item.meta" 
+                :resource="coreStore.resource" 
+                :adminUser="coreStore.adminUser"
+              />
+            </a>
+          </li>
+        </ul>
+    </div>
+  </template>
+</template>
+
+
+<script setup lang="ts">
+
+import { getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core'
+
+const coreStore = useCoreStore()
+
+const props = defineProps<{
+  threeDotsDropdownItems: any[]
+}>()
+
+</script>

package/spa/src/composables/useStores.ts

@@ -24,17 +24,11 @@ import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
 
 declare global {
   interface Window {
-    adminforth: {
-      confirm: (params: ConfirmParams) => Promise<void>;
-      alert: (params: AlertParams) => void;
-      setListFilter: (filter: any) => void;
-      updateListFilter: (filter: any) => void;
-      clearListFilters: () => void;
-    };
+    adminforth: FrontendAPIInterface;
   }
 }
 
-export class FrontendAPI implements FrontendAPIInterface {
+export class FrontendAPI {
   private toastStore:any
   private modalStore:any
   private filtersStore:any  
@@ -45,14 +39,19 @@ export class FrontendAPI implements FrontendAPIInterface {
     }
     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),
-    }
+
+      list: {
+        refresh: () => {/* will be redefined in list*/},
+        closeThreeDotsDropdown: () => {/* will be redefined in list*/},
+        setFilter: () => this.setListFilter.bind(this),
+        updateFilter: () => this.updateListFilter.bind(this),
+        clearFilters: () => this.clearListFilters.bind(this),
+      }
+    };
   }
 
   confirm(params: ConfirmParams): Promise<void> {

package/spa/src/utils.ts

@@ -2,9 +2,10 @@ 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';
+import { Dropdown } from 'flowbite';
+
 
 export async function callApi({path, method, body=undefined}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
@@ -100,4 +101,16 @@ export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
   }
 }
 
-
+export function initThreeDotsDropdown() {
+  const threeDotsDropdown: HTMLElement | null = document.querySelector('#listThreeDotsDropdown');
+  if (threeDotsDropdown) {
+    // this resource has three dots dropdown
+    const dd = new Dropdown(
+      threeDotsDropdown, 
+      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement, 
+    );
+    window.adminforth.list.closeThreeDotsDropdown = () => {
+      dd.hide();
+    }
+  }
+}

package/spa/src/views/CreateView.vue

@@ -29,6 +29,10 @@
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.create?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -73,12 +77,13 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } 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';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 const isValid = ref(false);
@@ -116,6 +121,7 @@ onMounted(async () => {
   });
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
+  initThreeDotsDropdown();
 });
 
 async function saveRecord() {

package/spa/src/views/EditView.vue

@@ -25,6 +25,10 @@
         Save
       </button>
 
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.edit?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -69,11 +73,13 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } 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';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
+
 
 const coreStore = useCoreStore();
 
@@ -107,12 +113,13 @@ const editableRecord = computed(() => {
 })
 
 onMounted(async () => {
-
   loading.value = true;
 
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
+
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,

package/spa/src/views/ListView.vue

@@ -73,32 +73,9 @@
         </span>
       </button>
 
-      <template v-if="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems">
-        <button id="dropdownMenuIconButton" 
-          data-dropdown-toggle="dropdownDots" 
-          class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
-        >
-          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
-            <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
-          </svg>
-        </button>
-
-        <!-- Dropdown menu -->
-        <div id="dropdownDots" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
-            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
-              <li v-for="item in coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
-                <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                  <component :is="getCustomComponent(item)" 
-                    :meta="item.meta" 
-                    :resource="coreStore.resource" 
-                    :adminUser="coreStore.adminUser"
-                  />
-                </a>
-              </li>
-            </ul>
-        </div>
-      </template>
-
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -139,11 +116,12 @@ import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, getIcon } from '@/utils';
-import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
+import { initFlowbite } from 'flowbite';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
 import {
@@ -180,9 +158,6 @@ const DEFAULT_PAGE_SIZE = 10;
 const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
 
 
-
-
-
 async function getList() {
   rows.value = null;
   const data = await callAdminForthApi({
@@ -258,7 +233,6 @@ async function init() {
 
   initFlowbite();
 
-
   // !!! clear filters should be in same tick with sort assignment so that watch can catch it
   filtersStore.clearFilters();
   if (coreStore.resource.options?.defaultSort) {
@@ -269,8 +243,7 @@ async function init() {
   } else {
     sort.value = [];
   }
-  console.log('↘️init fired');
-  // await getList();
+  // await getList(); - Not needed here, watch will trigger it
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
     method: 'POST',
@@ -281,19 +254,21 @@ async function init() {
 }
 
 watch([page, sort, () => filtersStore.filters], async () => {
-  console.log('↘️watch fired getList');
   await getList();
 }, { deep: true });
 
+window.adminforth.list.refresh = async () => {
+  await getList();
+}
+
 watch(() => filtersStore.filters, async (to, from) => {
   page.value = 1;
   checkboxes.value = [];
 }, {deep: true});
 
 onMounted(async () => {
-  console.log('🧱onMounted fired');
-  initFlowbite(); 
   await init();
+  initThreeDotsDropdown();
 });
 
 

package/spa/src/views/LoginView.vue

@@ -174,7 +174,7 @@ async function login() {
     body: {
       username,
       password,
-      rememberMe: rememberInput.value.checked,
+      rememberMe: rememberInput.value?.checked,
     }
   });
   inProgress.value = false;

package/spa/src/views/ShowView.vue

@@ -22,6 +22,10 @@
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
       </button>
+
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -119,31 +123,27 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
+import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
-const item = ref(null);
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 
-console.log(route.params,'showWiev');
-
-
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
@@ -176,9 +176,8 @@ async function deleteRecord(row) {
 
     } catch (e) {
       console.error(e);
-      };
-    }
-
+    };
+  }
     
 }
 

package/types/FrontendAPI.ts

@@ -19,6 +19,7 @@ export interface FrontendAPIInterface {
      * @returns A promise that resolves when the user confirms the dialog
      */   
     confirm(params:ConfirmParams ): Promise<void>;
+    
     /**
      * Show an alert
      * 
@@ -33,37 +34,53 @@ export interface FrontendAPIInterface {
      * @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;
 
+
+    list: {
+
+        /**
+         * Refresh the list
+         */
+        refresh(): void;
+
+        /**
+         * Close the three dots dropdown
+         */
+        closeThreeDotsDropdown(): void;
+
+        /**
+         * Set a filter in the list
+         * 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.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to set
+         */
+        setFilter(filter: any): void;
+
+        /**
+         * Update a filter in the list
+         * 
+         * Example:
+         * 
+         * ```ts
+         * window.adminforth.list.updateFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * ```
+         * 
+         * @param filter - The filter to update
+         */
+        updateFilter(filter: any): void;
+
+        /**
+         * Clear all filters from the list
+         */
+        clearFilters(): void;
+    }
 }
 
 export type ConfirmParams = {