adminforth 2.27.0-next.12 → 2.27.0-next.14

package/dist/spa/src/afcl/Select.vue

@@ -159,6 +159,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  disableTogleOfSelectedItem: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
@@ -314,7 +318,7 @@ const removeClickListener = () => {
 };
 
 const toogleItem = (item: any) => {
-  if (selectedItems.value.includes(item)) {
+  if (selectedItems.value.includes(item) && !props.disableTogleOfSelectedItem) {
     selectedItems.value = selectedItems.value.filter(i => i.value !== item.value);
   } else {
     if (!props.multiple) {

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

@@ -20,7 +20,7 @@
       ref="input"
       :key="`select-${column.name}-${source}-${column.foreignResource?.name || column.foreignResource?.table || ''}`"
       class="w-full min-w-24"
-      :options="columnOptions[column.name] || []"
+      :options="formatSelectOptions(columnOptions[column.name] || [], column)"
       :searchDisabled="!column.foreignResource.searchableFields"
       @scroll-near-end="loadMoreOptions && loadMoreOptions(column.name)"
       @search="(searchTerm) => {
@@ -33,6 +33,7 @@
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     >
       <template #extra-item v-if="columnLoadingState && columnLoadingState[column.name]?.loading">
         <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
@@ -45,11 +46,12 @@
       v-else-if="column.enum"
       ref="input"
       class="w-full min-w-24"
-      :options="column.enum"
+      :options="formatSelectOptions(column.enum, column)"
       teleportToBody
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     />
     <Select
       v-else-if="(type || column.type) === 'boolean'"
@@ -60,6 +62,7 @@
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     />
     <Input
       v-else-if="['integer'].includes(type || column.type)"
@@ -188,7 +191,7 @@
       type?: string,
       value: any,
       currentValues: any,
-      mode: string,
+      mode: 'create' | 'edit',
       columnOptions: any,
       unmasked: any,
       deletable?: boolean,
@@ -218,6 +221,16 @@ const input = ref<HTMLInputElement | null>(null);
     return options;
   };
 
+  const formatSelectOptions = (options: any, column: any) => {
+    const optionsToReturn = options;
+    if (!column.required[props.mode] && !column.isArray?.enabled) {
+      if (!optionsToReturn.some((option: any) => option.value === null)) {
+        optionsToReturn.push({ label: t('Unset'), value: null });
+      }
+    }
+    return optionsToReturn;
+  };
+
   function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
     const focusedInput = event.target as HTMLInputElement; 
     if(!focusedInput) return;  

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

@@ -68,7 +68,7 @@
     source: 'create' | 'edit',
     column: any,
     currentValues: any,
-    mode: string,
+    mode: 'create' | 'edit',
     columnOptions: any,
     unmasked: any,
     setCurrentValue: Function,

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

@@ -123,9 +123,9 @@
                 :min="getFilterMinValue(c.name)"
                 :max="getFilterMaxValue(c.name)"
                 :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                @update:valueStart="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, 'gte')"
                 :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                @update:valueEnd="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, 'lte')"
               />
 
               <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
@@ -275,6 +275,27 @@ const onFilterInput = computed(() => {
   }, {});
 });
 
+// rangeState is used for cutom range picker, because if we change two values very quickly
+// in filters writes only the last one, because of debounce
+const rangeState = reactive({});
+
+const updateRange = (column) => {
+  debounce(() => {
+    const { gte, lte } = rangeState[column.name];
+
+    setFilterItem({ column, operator: 'gte', value: gte });
+    setFilterItem({ column, operator: 'lte', value: lte });
+  }, column?.filterOptions?.debounceTimeMs || 10)();
+}
+
+function rangeChangeHandler(value, column, operator) {
+  if (!rangeState[column.name]) {
+    rangeState[column.name] = { gte: null, lte: null };
+  }
+  rangeState[column.name][operator] = value;
+  updateRange(column);
+}
+
 const onSearchInput = computed(() => {
   return createSearchInputHandlers(
     props.columns,

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

@@ -80,7 +80,7 @@
   const props = defineProps<{
     source: 'create' | 'edit',
     group: any,
-    mode: string,
+    mode: 'create' | 'edit',
     validatingMode: boolean,
     currentValues: any,
     unmasked: any,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.27.0-next.12",
+  "version": "2.27.0-next.14",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",