adminforth 1.1.65 → 1.1.66

package/dist/spa/src/assets/logo.svg

@@ -1 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_8)">
+<path d="M8.034 6.006V13H6.097V12.194C5.59433 12.8007 4.86633 13.104 3.913 13.104C3.25433 13.104 2.65633 12.9567 2.119 12.662C1.59033 12.3673 1.17433 11.947 0.871 11.401C0.567667 10.855 0.416 10.2223 0.416 9.503C0.416 8.78367 0.567667 8.151 0.871 7.605C1.17433 7.059 1.59033 6.63867 2.119 6.344C2.65633 6.04933 3.25433 5.902 3.913 5.902C4.80567 5.902 5.50333 6.18367 6.006 6.747V6.006H8.034ZM4.264 11.44C4.77533 11.44 5.2 11.2667 5.538 10.92C5.876 10.5647 6.045 10.0923 6.045 9.503C6.045 8.91367 5.876 8.44567 5.538 8.099C5.2 7.74367 4.77533 7.566 4.264 7.566C3.744 7.566 3.315 7.74367 2.977 8.099C2.639 8.44567 2.47 8.91367 2.47 9.503C2.47 10.0923 2.639 10.5647 2.977 10.92C3.315 11.2667 3.744 11.44 4.264 11.44Z" fill="url(#paint0_linear_1_8)"/>
+<path d="M13.317 5.538C12.589 5.538 12.0387 5.69833 11.666 6.019C11.2933 6.331 11.107 6.80333 11.107 7.436V7.995H14.851V9.685H11.107V13H9.001V7.449C9.001 6.279 9.365 5.369 10.093 4.719C10.8297 4.069 11.8567 3.744 13.174 3.744C13.694 3.744 14.1837 3.80033 14.643 3.913C15.1023 4.017 15.501 4.173 15.839 4.381L15.189 6.045C14.669 5.707 14.045 5.538 13.317 5.538Z" fill="url(#paint1_linear_1_8)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1_8" x1="1.5" y1="6.93333" x2="7.31883" y2="11.8926" gradientUnits="userSpaceOnUse">
+<stop stop-color="#656E7A"/>
+<stop offset="1" stop-color="#99A6B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_8" x1="12.5" y1="3.73333" x2="9.68642" y2="12.7016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48C5FF"/>
+<stop offset="1" stop-color="#A1E1FF"/>
+</linearGradient>
+<clipPath id="clip0_1_8">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -3,13 +3,6 @@ import { ref,onMounted } from 'vue'
 import { useModalStore } from '@/stores/modal';
 
 const modalStore = useModalStore();
-
-
-
-
-
-
-        
 </script>
 
 <template>
@@ -28,10 +21,10 @@ const modalStore = useModalStore();
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
                     <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{modalStore.onAcceptFunction();modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="modalStore.togleModal"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

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

@@ -2,7 +2,7 @@
   <div>
     <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
       <Breadcrumbs />
-      <div class="flex items-center space-x-1">
+      <div class="flex items-center space-x-1 flex-wrap gap-y-1">
         <slot></slot>
       </div>
     </div>

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

@@ -67,6 +67,9 @@ const props = defineProps({
   },
   label: {
     type: String,
+  },
+  autoHide: {
+    type: Boolean,
   }
 });
 
@@ -100,8 +103,7 @@ function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
-  }
-  else {
+  } else {
     datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
     startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
   }
@@ -121,7 +123,13 @@ watch(start, () => {
 })
 
 function initDatepickers() {
-  datepickerObject.value = new Datepicker(datepickerStartEl.value, { format: 'dd M yyyy' });
+  const options = {format: 'dd M yyyy'};
+
+  if (props.autoHide) {
+    options.autohide = true;
+  }
+
+  datepickerObject.value = new Datepicker(datepickerStartEl.value, options);
 
   addChangeDateListener();
 }
@@ -134,6 +142,10 @@ function removeChangeDateListener() {
   datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -157,5 +169,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 });
 </script>

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

@@ -101,6 +101,9 @@ const endDate = ref('');
 const startTime = ref('');
 const endTime = ref('');
 
+const datepickerStartObject = ref('')
+const datepickerEndObject = ref('')
+
 const start = computed(() => {
   if (!startDate.value) {
     return;
@@ -162,9 +165,9 @@ watch(end, () => {
 
 function initDatepickers() {
 
-  new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
+  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
 
-  new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
+  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
   addChangeDateListener();
 }
 
@@ -178,6 +181,11 @@ function removeChangeDateListener() {
   datepickerEndEl.value.removeEventListener('changeDate', setEndDate);
 }
 
+function destroyDatepickerElement() {
+  datepickerStartObject.value.destroy();
+  datepickerEndObject.value.destroy();
+}
+
 function setStartDate(event) {
   startDate.value = event.detail.date
 }
@@ -205,5 +213,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
+  destroyDatepickerElement();
 })
 </script>

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

@@ -6,7 +6,7 @@
         v-model="search"
         @focus="showDropdown = true"
         class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm transition duration-150 ease-in-out 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="selectedItems.length ? '' : 'Select...'"
+        :placeholder="selectedItems.length ? '' : placeholder || 'Select...'"
       />
       <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
         {{  }}
@@ -67,6 +67,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  placeholder: {
+    type: String,
+    default: '',
+
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

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

@@ -2,11 +2,11 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
+      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
-      :style="{ height: `calc(100vh - 3.5rem)` }"
+      :style="{ height: `calc(100vh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
@@ -26,13 +26,13 @@
               v-if="c.foreignResource"
               :options="columnOptions[c.name] || []"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             <Dropdown
               v-else-if="c.type === 'boolean'"
               :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             
             <Dropdown 
@@ -40,7 +40,7 @@
               :options="c.enum"
               :allowCustom="c.allowCustom"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
-              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
 
            <input
@@ -54,9 +54,9 @@
            <CustomDateRangePicker
              v-else-if="['datetime'].includes(c.type)"
              :column="c"
-             :valueStart="filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
+             :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
-             :valueEnd="filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
+             :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
 
@@ -69,7 +69,7 @@
            >
 
            <CustomRangePicker
-             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
              :min="c.min"
              :max="c.max"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
@@ -77,6 +77,23 @@
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
              @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
            />
+
+           <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
+             <input
+               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"
+               @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
+               :value="getFilterItem({ column: c, operator: 'gte' })"
+             >
+             <input
+               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"
+               @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
+               :value="getFilterItem({ column: c, operator: 'lte' })"
+             >
+           </div>
             
          </li>
       </ul>
@@ -84,15 +101,15 @@
 
    <div class="flex justify-end gap-2">
       <button 
-        :disabled="!filters.length"
+        :disabled="!filtersStore.filters.length"
         type="button" 
-        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 disabled:opacity-50 disabled:cursor-not-allowed"
+        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 disabled:opacity-50 disabled:cursor-not-allowed"
         @click="clear">Clear all</button>
 
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-50"
+  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-30"
     @click="$emit('hide')">
   </div>
 </template>
@@ -105,6 +122,10 @@ import { callAdminForthApi } from '@/utils';
 import { useRouter } from 'vue-router';
 import { computedAsync } from '@vueuse/core'
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+
 
 // props: columns
 // add support for v-model:filers
@@ -163,28 +184,28 @@ watch(() => props.show, (show) => {
 
 function setFilterItem({ column, operator, value }) {
 
-  const index = props.filters.findIndex(f => f.field === column.name && f.operator === operator);
+  const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
   if (value === undefined) {
     if (index !== -1) {
-      props.filters.splice(index, 1);
+      filtersStore.filters.splice(index, 1);
     }
-    emits('update:filters', [...props.filters]);
+    emits('update:filters', [...filtersStore.filters]);
     return;
   } else {
     if (index === -1) {
-      props.filters.push({ field: column.name, value, operator });
+      filtersStore.setFilter({ field: column.name, value, operator });
     } else {
-      props.filters[index].value = value;
+      filtersStore.setFilters([...filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...filtersStore.filters.slice(index + 1)])
     }
   }
-  emits('update:filters', [...props.filters]);
+  emits('update:filters', [...filtersStore.filters]);
 }
 
 function getFilterItem({ column, operator }) {
-  return props.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
+  return filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
 }
 
 async function clear() {
-  emits('update:filters', []);
+  filtersStore.clearFilters();
 }
 </script>

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

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="rounded-default">
     
     <div 
-      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black"
+      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black rounded-default"
     >
       <form autocomplete="off" @submit.prevent>
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <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-form-view-heading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
@@ -30,28 +30,28 @@
                     />
                 </template>
                 <template v-else>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                    <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
-                        <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                        :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
-                        />
-                    </span>
-                    <div :id="`tooltip-show-${i}`"
-                        role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                        Required field
-                        <div class="tooltip-arrow" data-popper-arrow></div>
-                    </div>
+                    <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                      {{ column.label }}
+                      <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
+                          <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
+                          :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
+                          />
+                      </span>
+                      <div :id="`tooltip-show-${i}`"
+                          role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                          Required field
+                          <div class="tooltip-arrow" data-popper-arrow></div>
+                      </div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
-
                     <Dropdown
                         single
                         v-if="column.foreignResource"
                         :options="columnOptions[column.name] || []"
+                        :placeholder = "columnOptions[column.name]?.length || 'There are no options available'"
                         :modelValue="currentValues[column.name]"
                         @update:modelValue="setCurrentValue(column.name, $event)"
-                    />
+                    ></Dropdown>
                     <Dropdown
                         single
                         v-else-if="column.enum"
@@ -79,6 +79,7 @@
                         v-else-if="['datetime'].includes(column.type)"
                         :column="column"
                         :valueStart="currentValues[column.name]"
+                        auto-hide
                         @update:valueStart="setCurrentValue(column.name, $event)"
                     />
                     <input
@@ -120,9 +121,6 @@
                         <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
                         <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
                     </button>
-
-
-
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
 
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
@@ -154,7 +152,7 @@ const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
-  resourceColumns: Object,
+  resource: Object,
   record: Object,
   validating: Boolean,
   customComponentsPerColumn: Object,
@@ -196,7 +194,11 @@ const columnError = (column) => {
       for (let i = 0; i < validationArray.length; i++) {
         if (validationArray[i].regExp) {
           const regExp = new RegExp(validationArray[i].regExp);
-          if (!regExp.test(currentValues.value[column.name])) {
+          let value = currentValues.value[column.name];
+          if (value === undefined || value === null) {
+            value = '';
+          }
+          if (!regExp.test(value)) {
             return validationArray[i].message;
           }
         }
@@ -226,7 +228,7 @@ onMounted(() => {
 
 const columnOptions = computedAsync(async () => { 
   return (await Promise.all(
-    Object.values(props.resourceColumns).map(async (column) => {
+    Object.values(props.resource.columns).map(async (column) => {
       if (column.foreignResource) {
         const list = await callAdminForthApi({
           method: 'POST',
@@ -249,7 +251,7 @@ const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {
   const mode = props.record ? 'edit' : 'create';
-  return props.resourceColumns?.filter(column => column.showIn.includes(mode));
+  return props.resource?.columns?.filter(column => column.showIn.includes(mode));
 });
 
 const isValid = computed(() => {