adminforth 1.2.35 → 1.2.37

package/dist/modules/configValidator.js

@@ -248,6 +248,7 @@ export default class ConfigValidator {
                         allowed: (_b) => __awaiter(this, [_b], void 0, function* ({ resource, adminUser, allowedActions }) { return allowedActions.delete; }),
                         action: (_c) => __awaiter(this, [_c], void 0, function* ({ selectedIds, adminUser }) {
                             const connector = this.adminforth.connectors[res.dataSource];
+                            // for now if at least one error, stop and return error
                             let error = null;
                             yield Promise.all(selectedIds.map((recordId) => __awaiter(this, void 0, void 0, function* () {
                                 const record = yield connector.getRecordByPrimaryKey(res, recordId);
@@ -257,6 +258,9 @@ export default class ConfigValidator {
                                         error = resp.error;
                                     }
                                 })));
+                                if (error) {
+                                    return;
+                                }
                                 yield connector.deleteRecord({ resource: res, recordId });
                                 // call afterDelete hook
                                 yield Promise.all(res.hooks.delete.afterSave.map((hook) => __awaiter(this, void 0, void 0, function* () {

package/dist/modules/restApi.js

@@ -622,13 +622,10 @@ export default class AdminForthRestAPI {
                 if (!execAllowed) {
                     return { error: `Action '${actionId}' is not allowed` };
                 }
-                yield action.action({ selectedIds: recordIds, adminUser, resource });
-                return {
-                    actionId,
+                const response = yield action.action({ selectedIds: recordIds, adminUser, resource });
+                return Object.assign({ actionId,
                     recordIds,
-                    resourceId,
-                    status: 'success'
-                };
+                    resourceId }, response);
             })
         });
         // setup endpoints for all plugins

package/dist/modules/styles.js

@@ -20,7 +20,7 @@ export const styles = () => ({
         lightSidebarHeading: "alias:lightSidebarText opacity:0.3", // sidebar heading
         lightList: "#FFFFFF", // list view background
         lightListTable: "#FFFFFF", // list view table background
-        lightListTableHeading: "rgb(249 250 251)", // list view table heading
+        lightListTableHeading: "alias:lightListTableHeadingText opacity:0.04", // list view table heading
         lightListTableHeadingText: "#333333", // list view table heading text
         lightListTableText: "#333333", // list view table text
         lightListTableRowHover: "rgb(249 250 251)", // list view row hover
@@ -36,7 +36,7 @@ export const styles = () => ({
         // lightListButtonIcon: "#333333", // list view button icon
         lightForm: "#FFFFFF", // show view background
         lightFormBorder: "#F5F5F5", // show view rows border
-        lightFormHeading: "rgb(249 250 251)", // show view heading
+        lightFormHeading: "alias:lightListTableHeading", // show view heading
         lightButtons: "#FFFFFF", // button background
         lightButtonsBorder: "#DDDDDD", // button border
         lightButtonsText: "#111827", // button text
@@ -75,7 +75,7 @@ export const styles = () => ({
         darkListBorder: "#444444",
         darkForm: "#111111",
         darkFormBorder: "#222222",
-        darkFormHeading: "#334155"
+        darkFormHeading: "alias:darkListTableHeading"
     },
     boxShadow: {
         customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

package/dist/spa/spa/src/App.vue

@@ -84,7 +84,7 @@
                     :aria-controls="`dropdown-example${i}`"
                     :data-collapse-toggle="`dropdown-example${i}`"
                 >
-                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75   dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                   <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                   <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
@@ -262,13 +262,11 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  console.log(route)
   if (route.meta?.customLayout) {
     defaultLayout.value = false;
   } else {
     defaultLayout.value = true;
   }
-  console.log(defaultLayout.value,route);
 }
 
 

package/dist/spa/spa/src/components/CustomRangePicker.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-wrap gap-2">
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="From"
@@ -8,6 +10,8 @@
     >
 
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="To"
@@ -21,7 +25,7 @@
       @click="clear">Clear
     </button>
 
-    <div class="w-full px-2.5">
+    <div v-if="min && max" class="w-full px-2.5">
       <vue-slider
         class="custom-slider"
         :dot-size="20"
@@ -47,12 +51,8 @@ const props = defineProps({
   valueEnd: {
     default: '',
   },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
+  min: {},
+  max: {},
 });
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
@@ -108,6 +108,10 @@ watch(end, () => {
   emit('update:valueEnd', end.value);
 })
 
+watch([minFormatted,maxFormatted], () => {
+  setSliderValues(minFormatted.value, maxFormatted.value)
+})
+
 const clear = () => {
   start.value = ''
   end.value = ''

package/dist/spa/spa/src/components/Filters.vue

@@ -70,8 +70,8 @@
 
            <CustomRangePicker
              v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-             :min="c.min"
-             :max="c.max"
+             :min="getFilterMinValue(c.name)"
+             :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
@@ -207,4 +207,16 @@ async function clear() {
   filtersStore.clearFilters();
   emits('update:filters', [...filtersStore.filters]);
 }
+
+function getFilterMinValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.max
+  }
+}
 </script>

package/dist/spa/spa/src/components/MenuLink.vue

@@ -5,7 +5,7 @@
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-sidebarActive dark:bg-gray-700': item.resourceId ?
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/dist/spa/spa/src/components/ResourceForm.vue

@@ -5,7 +5,7 @@
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field

package/dist/spa/spa/src/components/ResourceListTable.vue

@@ -41,7 +41,7 @@
             </div>
             <span
              class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
             {{ sort.findIndex((s) => s.field === c.name) + 1 }}
             </span>
 
@@ -228,7 +228,7 @@ import { callAdminForthApi, getIcon } from '@/utils';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
-import { showSuccesTost } from '@/composables/useFrontendApi';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
 import {
@@ -321,9 +321,6 @@ async function selectAll(value) {
 
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
-
-
-
 const allFromThisPageChecked = computed(() => {
   if (!props.rows) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r.id));
@@ -361,14 +358,6 @@ async function onClick(e,row) {
     },
   })}
 }
-  
-
-
-
-
-
-
-
 
 async function deleteRecord(row) {
   const data = await window.adminforth.confirm({
@@ -379,26 +368,24 @@ async function deleteRecord(row) {
   if (data) {
     try {
       const res = await callAdminForthApi({
-      path: '/delete_record',
-      method: 'POST',
-      body: {
-        resourceId: props.resource.resourceId,
-        primaryKey: row._primaryKeyValue,
-      }});
+        path: '/delete_record',
+        method: 'POST',
+        body: {
+          resourceId: props.resource.resourceId,
+          primaryKey: row._primaryKeyValue,
+        }
+      });
       if (!res.error){
         emits('update:records', true)
         showSuccesTost('Record deleted successfully')
       } else {
-        console.error(res.error)
+        showErrorTost(res.error)
       }
 
     } catch (e) {
+      showErrorTost(`Something went wrong, please try again later`);
       console.error(e);
-      };
-    }
-
-    
+    };
+  }
 }
-
-
 </script>

package/dist/spa/spa/src/index.scss

@@ -23,4 +23,5 @@
 //   ::-webkit-scrollbar-thumb:hover {
 //     @apply bg-gray-700
 //   }
-// }
+// }
+

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

@@ -200,11 +200,6 @@ async function getList() {
   totalRows.value = data.total;
 }
 
-
-
-
-
-
 async function startBulkAction(actionId) {
   const data = await callAdminForthApi({
     path: '/start_bulk_action',
@@ -216,10 +211,13 @@ async function startBulkAction(actionId) {
 
     }
   });
-  if (data?.status === 'success') {
+  if (data?.ok) {
     checkboxes.value = [];
+    await getList();
+  }
+  if (data?.error) {
+    showErrorTost(data.error);
   }
-  await getList();
 }
 
 

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

@@ -47,7 +47,7 @@
       class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field

package/modules/configValidator.ts

@@ -269,6 +269,8 @@ export default class ConfigValidator implements IConfigValidator {
             allowed: async ({ resource, adminUser, allowedActions }) => { return allowedActions.delete },
             action: async ({ selectedIds, adminUser }) => {
               const connector = this.adminforth.connectors[res.dataSource];
+
+              // for now if at least one error, stop and return error
               let error = null;
 
               await Promise.all(
@@ -285,6 +287,10 @@ export default class ConfigValidator implements IConfigValidator {
                       }
                     )
                   )
+
+                  if (error) {
+                    return;
+                  }
                   
                   await connector.deleteRecord({ resource: res, recordId });
                   // call afterDelete hook

package/modules/restApi.ts

@@ -712,13 +712,13 @@ export default class AdminForthRestAPI {
             if (!execAllowed) {
               return { error: `Action '${actionId}' is not allowed` };
             }
-            await action.action({selectedIds: recordIds, adminUser, resource});
+            const response = await action.action({selectedIds: recordIds, adminUser, resource});
             
             return {
               actionId,
               recordIds,
               resourceId,
-              status: 'success'
+              ...response
             }
         }
     })

package/modules/styles.ts

@@ -25,7 +25,7 @@ export const styles = () => ({
 
     lightList: "#FFFFFF", // list view background
     lightListTable: "#FFFFFF", // list view table background
-    lightListTableHeading: "rgb(249 250 251)", // list view table heading
+    lightListTableHeading: "alias:lightListTableHeadingText opacity:0.04", // list view table heading
     lightListTableHeadingText: "#333333", // list view table heading text
     lightListTableText: "#333333", // list view table text
     lightListTableRowHover: "rgb(249 250 251)", // list view row hover
@@ -42,7 +42,7 @@ export const styles = () => ({
 
     lightForm: "#FFFFFF", // show view background
     lightFormBorder: "#F5F5F5", // show view rows border
-    lightFormHeading: "rgb(249 250 251)", // show view heading
+    lightFormHeading: "alias:lightListTableHeading", // show view heading
 
     lightButtons: "#FFFFFF", // button background
     lightButtonsBorder: "#DDDDDD", // button border
@@ -90,7 +90,7 @@ export const styles = () => ({
 
     darkForm: "#111111", 
     darkFormBorder: "#222222", 
-    darkFormHeading: "#334155" 
+    darkFormHeading: "alias:darkListTableHeading" 
 
   },
   boxShadow: {

package/package.json

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

package/spa/src/App.vue

@@ -84,7 +84,7 @@
                     :aria-controls="`dropdown-example${i}`"
                     :data-collapse-toggle="`dropdown-example${i}`"
                 >
-                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75   dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                   <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                   <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
@@ -262,13 +262,11 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  console.log(route)
   if (route.meta?.customLayout) {
     defaultLayout.value = false;
   } else {
     defaultLayout.value = true;
   }
-  console.log(defaultLayout.value,route);
 }
 
 

package/spa/src/components/CustomRangePicker.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-wrap gap-2">
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="From"
@@ -8,6 +10,8 @@
     >
 
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="To"
@@ -21,7 +25,7 @@
       @click="clear">Clear
     </button>
 
-    <div class="w-full px-2.5">
+    <div v-if="min && max" class="w-full px-2.5">
       <vue-slider
         class="custom-slider"
         :dot-size="20"
@@ -47,12 +51,8 @@ const props = defineProps({
   valueEnd: {
     default: '',
   },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
+  min: {},
+  max: {},
 });
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
@@ -108,6 +108,10 @@ watch(end, () => {
   emit('update:valueEnd', end.value);
 })
 
+watch([minFormatted,maxFormatted], () => {
+  setSliderValues(minFormatted.value, maxFormatted.value)
+})
+
 const clear = () => {
   start.value = ''
   end.value = ''

package/spa/src/components/Filters.vue

@@ -70,8 +70,8 @@
 
            <CustomRangePicker
              v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-             :min="c.min"
-             :max="c.max"
+             :min="getFilterMinValue(c.name)"
+             :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
@@ -207,4 +207,16 @@ async function clear() {
   filtersStore.clearFilters();
   emits('update:filters', [...filtersStore.filters]);
 }
+
+function getFilterMinValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.max
+  }
+}
 </script>

package/spa/src/components/MenuLink.vue

@@ -5,7 +5,7 @@
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-sidebarActive dark:bg-gray-700': item.resourceId ?
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/spa/src/components/ResourceForm.vue

@@ -5,7 +5,7 @@
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field

package/spa/src/components/ResourceListTable.vue

@@ -41,7 +41,7 @@
             </div>
             <span
              class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
             {{ sort.findIndex((s) => s.field === c.name) + 1 }}
             </span>
 
@@ -228,7 +228,7 @@ import { callAdminForthApi, getIcon } from '@/utils';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
-import { showSuccesTost } from '@/composables/useFrontendApi';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
 import {
@@ -321,9 +321,6 @@ async function selectAll(value) {
 
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
-
-
-
 const allFromThisPageChecked = computed(() => {
   if (!props.rows) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r.id));
@@ -361,14 +358,6 @@ async function onClick(e,row) {
     },
   })}
 }
-  
-
-
-
-
-
-
-
 
 async function deleteRecord(row) {
   const data = await window.adminforth.confirm({
@@ -379,26 +368,24 @@ async function deleteRecord(row) {
   if (data) {
     try {
       const res = await callAdminForthApi({
-      path: '/delete_record',
-      method: 'POST',
-      body: {
-        resourceId: props.resource.resourceId,
-        primaryKey: row._primaryKeyValue,
-      }});
+        path: '/delete_record',
+        method: 'POST',
+        body: {
+          resourceId: props.resource.resourceId,
+          primaryKey: row._primaryKeyValue,
+        }
+      });
       if (!res.error){
         emits('update:records', true)
         showSuccesTost('Record deleted successfully')
       } else {
-        console.error(res.error)
+        showErrorTost(res.error)
       }
 
     } catch (e) {
+      showErrorTost(`Something went wrong, please try again later`);
       console.error(e);
-      };
-    }
-
-    
+    };
+  }
 }
-
-
 </script>

package/spa/src/index.scss

@@ -23,4 +23,5 @@
 //   ::-webkit-scrollbar-thumb:hover {
 //     @apply bg-gray-700
 //   }
-// }
+// }
+

package/spa/src/views/ListView.vue

@@ -200,11 +200,6 @@ async function getList() {
   totalRows.value = data.total;
 }
 
-
-
-
-
-
 async function startBulkAction(actionId) {
   const data = await callAdminForthApi({
     path: '/start_bulk_action',
@@ -216,10 +211,13 @@ async function startBulkAction(actionId) {
 
     }
   });
-  if (data?.status === 'success') {
+  if (data?.ok) {
     checkboxes.value = [];
+    await getList();
+  }
+  if (data?.error) {
+    showErrorTost(data.error);
   }
-  await getList();
 }
 
 

package/spa/src/views/ShowView.vue

@@ -47,7 +47,7 @@
       class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field