fix: don't allow to change state to empty in the afcl select in create/edit view.

If field is not requred - use option unset to clear the field, instead of just clicking on selected item twice

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1118/lKCY0uOR/when-we-are-trying-to-clear-se

Author: yaroslav8765

adminforth/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) {

adminforth/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,14 @@ 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) {
+      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;  

adminforth/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,

adminforth/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,