adminforth 1.2.56 → 1.2.57

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

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      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="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-gray-900"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
@@ -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' })"
@@ -189,8 +189,6 @@ function setFilterItem({ column, operator, value }) {
     if (index !== -1) {
       filtersStore.filters.splice(index, 1);
     }
-    emits('update:filters', [...filtersStore.filters]);
-    return;
   } else {
     if (index === -1) {
       filtersStore.setFilter({ field: column.name, value, operator });
@@ -207,5 +205,18 @@ function getFilterItem({ column, operator }) {
 
 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/src/components/MenuLink.vue

@@ -1,16 +1,16 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex items-center py-2 text-nav-menu-text rounded-default  hover:bg-nav-menu-bg-hover active:bg-nav-menu-bg-active" role="menuitem"
+      class="flex group items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default  hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover" role="menuitem"
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-nav-menu-bg-active 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)
       }"
   >
-    <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+    <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="ms-3">{{ item.label }}</span>
   </RouterLink>
 </template>

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

@@ -1,131 +1,138 @@
 <template>
   <div class="rounded-default">
-    
     <div 
-      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black rounded-default"
+      class="relative shadow-resourseFormShadow dark:shadow-darkResourseFormShadow sm:rounded-lg dark:shadow-2xl  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 ">
-          <thead class="text-xs text-gray-700 uppercase bg-form-view-heading 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 block md:table-row-group">
               <tr>
-                  <th scope="col" class="px-6 py-3">
+                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
                       Field
                   </th>
-                  <th scope="col" class="px-6 py-3 w-4/6">
+                  <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
                       Value
                   </th>
+
+                 
               </tr>
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
+                  v-if="currentValues !== null"
+                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700 block md:table-row"
               >
-                <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
-                <template v-if="customComponentsPerColumn[column.name]">
-                    <component
-                        :is="customComponentsPerColumn[column.name]"
-                        :column="column"
-                        :value="currentValues[column.name]"
-                        @update:value="setCurrentValue(column.name, $event)"
-                    />
-                </template>
-                <template v-else>
-                    <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                    <td class="px-6 py-4 sm:pb-0 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
                       {{ column.label }}
-                      <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
+                      <span :data-tooltip-target="`tooltip-show-${i}`" class="ml-1 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">
+                          role="tooltip" 
+                          class="ml-1 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"
-                        :options="column.enum"
-                        :modelValue="currentValues[column.name]"
-                        @update:modelValue="setCurrentValue(column.name, $event)"
-                    />
-                    <Dropdown
-                        single
-                        v-else-if="column.type === 'boolean'"
-                        :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
-                        :modelValue="currentValues[column.name]"
-                        @update:modelValue="setCurrentValue(column.name, $event)"
-                    />
-                    <input 
-                        v-else-if="['integer'].includes(column.type)"
-                        type="number" 
-                        step="1"
-                        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-40 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="0"
-                        :value="currentValues[column.name]"
-                        @input="setCurrentValue(column.name, $event.target.value)"
-                    >
-                    <CustomDatePicker
-                        v-else-if="['datetime'].includes(column.type)"
+                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell">
+                    <template v-if="column?.components?.[props.source]?.file">
+                      <component
+                        :is="getCustomComponent(column.components[props.source])"
                         :column="column"
-                        :valueStart="currentValues[column.name]"
-                        auto-hide
-                        @update:valueStart="setCurrentValue(column.name, $event)"
-                    />
-                    <input
-                        v-else-if="['decimal', 'float'].includes(column.type)"
-                        type="number"
-                        step="0.1"
-                        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-40 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="0.0"
-                        :value="currentValues[column.name]"
-                        @input="setCurrentValue(column.name, $event.target.value)"
-                    />
-                    <textarea
-                        v-else-if="['text'].includes(column.type)"
-                        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-full 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="Text"
-                        :value="currentValues[column.name]"
-                        @input="setCurrentValue(column.name, $event.target.value)"
-                    >
-                    </textarea>
-                    <input
-                        v-else
-                        :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
-                        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-full 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="Text"
                         :value="currentValues[column.name]"
-                        @input="setCurrentValue(column.name, $event.target.value)"
-                        autocomplete="false"
-                        data-lpignore="true"
-                        readonly
-                        onfocus="this.removeAttribute('readonly');"
-                    >
+                        @update:value="setCurrentValue(column.name, $event)"
+                        :meta="column.components[props.source].meta"
+                        :record="currentValues"
+                        @update:inValidity="customComponentsInValidity[column.name] = $event"
+                        @update:emptiness="customComponentsEmptiness[column.name] = $event"
+                      />
+                    </template>
+                    <template v-else>
+                      <Dropdown
+                          single
+                          v-if="column.foreignResource"
+                          :options="columnOptions[column.name] || []"
+                          :placeholder = "columnOptions[column.name]?.length ?'Select...': 'There are no options available'"
+                          :modelValue="currentValues[column.name]"
+                          @update:modelValue="setCurrentValue(column.name, $event)"
+                      ></Dropdown>
+                      <Dropdown
+                          single
+                          v-else-if="column.enum"
+                          :options="column.enum"
+                          :modelValue="currentValues[column.name]"
+                          @update:modelValue="setCurrentValue(column.name, $event)"
+                      />
+                      <Dropdown
+                          single
+                          v-else-if="column.type === 'boolean'"
+                          :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
+                          :modelValue="currentValues[column.name]"
+                          @update:modelValue="setCurrentValue(column.name, $event)"
+                      />
+                      <input 
+                          v-else-if="['integer'].includes(column.type)"
+                          type="number" 
+                          step="1"
+                          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-40 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="0"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                      >
+                      <CustomDatePicker
+                          v-else-if="['datetime'].includes(column.type)"
+                          :column="column"
+                          :valueStart="currentValues[column.name]"
+                          auto-hide
+                          @update:valueStart="setCurrentValue(column.name, $event)"
+                      />
+                      <input
+                          v-else-if="['decimal', 'float'].includes(column.type)"
+                          type="number"
+                          step="0.1"
+                          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-40 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="0.0"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                      />
+                      <textarea
+                          v-else-if="['text', 'richtext'].includes(column.type)"
+                          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-full 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="Text"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                      >
+                      </textarea>
+                      <input
+                          v-else
+                          :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
+                          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-full 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="Text"
+                          :value="currentValues[column.name]"
+                          @input="setCurrentValue(column.name, $event.target.value)"
+                          autocomplete="false"
+                          data-lpignore="true"
+                          readonly
+                          onfocus="this.removeAttribute('readonly');"
+                      >
 
-                    <button
-                        v-if="column.masked"
-                        type="button"
-                        @click="unmasked[column.name] = !unmasked[column.name]"
-                        class="h-6 absolute inset-y-2 top-6 right-6 flex items-center pr-2 z-index-100 focus:outline-none"
-                    >
-                        <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>
+                      <button
+                          v-if="column.masked"
+                          type="button"
+                          @click="unmasked[column.name] = !unmasked[column.name]"
+                          class="h-6 absolute inset-y-2 top-6 right-6 flex items-center pr-2 z-index-100 focus:outline-none"
+                      >
+                          <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>
+                    </template>
                     <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>
-                    </td>
-                </template>
+
+                </td>
               </tr>
               
           </tbody>
@@ -141,7 +148,7 @@
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
 import Dropdown from '@/components/Dropdown.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
 import { computedAsync } from '@vueuse/core';
 import { initFlowbite } from 'flowbite';
@@ -155,22 +162,38 @@ const props = defineProps({
   resource: Object,
   record: Object,
   validating: Boolean,
-  customComponentsPerColumn: Object,
+  source: String,
 });
 
-
 const unmasked = ref({});
 
 const mode = computed(() => props.record  && Object.keys(props.record).length ? 'edit' : 'create');
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
-const currentValues = ref({});
+const currentValues = ref(null);
+
+const customComponentsInValidity = ref({});
+const customComponentsEmptiness = ref({});
 
 
 const columnError = (column) => {
   const val = computed(() => {
-    if ( column.required[mode.value] && (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') ) {
+    if (!currentValues.value) {
+      return null;
+    }
+    if (customComponentsInValidity.value[column.name]) {
+      return customComponentsInValidity.value[column.name];
+    }
+
+    if ( 
+      column.required[mode.value] && 
+      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') && 
+      // if component is custum it might tell other criteria for emptiness by emitting 'update:emptiness'
+      // components which do not emit 'update:emptiness' will have undefined value in customComponentsEmptiness
+      (customComponentsEmptiness.value[column.name] !== false)
+    
+    ) {
       return 'This field is required';
     }
     if ( column.type === 'string' || column.type === 'text' ) {
@@ -182,14 +205,17 @@ const columnError = (column) => {
       }
     }
     if ( ['integer', 'decimal', 'float'].includes(column.type) ) {
-      if ( column.minValue !== undefined && currentValues.value[column.name] < column.minValue ) {
+      if ( column.minValue !== undefined 
+        && currentValues.value[column.name] !== null 
+        && currentValues.value[column.name] < column.minValue 
+      ) {
         return `This field must be greater than ${column.minValue}`;
       }
       if ( column.maxValue !== undefined && currentValues.value[column.name] > column.maxValue ) {
         return `This field must be less than ${column.maxValue}`;
       }
     }
-    if ( column.validation && column.validation.length ){
+    if ( column.validation && column.validation.length ) {
       const validationArray = column.validation;
       for (let i = 0; i < validationArray.length; i++) {
         if (validationArray[i].regExp) {
@@ -212,18 +238,22 @@ const columnError = (column) => {
 
 
 const setCurrentValue = (key, value) => {
-  currentValues.value[key] = value;
-
+  const col = props.resource.columns.find((column) => column.name === key);
+  if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
+    currentValues.value[key] = +value;
+  } else {
+    currentValues.value[key] = value;
+  }
+  currentValues.value = { ...currentValues.value };
+  console.log('3️⃣ setCurrentValue', key, value);
   emit('update:record', currentValues.value);
 };
 
 onMounted(() => {
-  Object.keys(props.record).forEach((key) => {
-    currentValues.value[key] = props.record[key];
-  });
+  currentValues.value = Object.assign({}, props.record);
+  console.log('2️⃣ currentValues', JSON.stringify(currentValues.value));
   initFlowbite();
-
-  
+  emit('update:isValid', isValid.value);
 });
 
 const columnOptions = computedAsync(async () => { 
@@ -247,7 +277,6 @@ const columnOptions = computedAsync(async () => {
 
 }, {});
 
-const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {
   const mode = props.record ? 'edit' : 'create';