Merge pull request #43 from devforth/readonly_colums_fix

ivictbor · web-flow · commit 5e07db8158c3 · 2024-12-25T22:29:56.000+02:00
Read-only property added for  columns
diff --git a/adminforth/plugins/rich-editor/custom/quillEditor.vue b/adminforth/plugins/rich-editor/custom/quillEditor.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div 
     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
@@ -200,6 +199,7 @@ onMounted(() => {
 
   quill = new Quill(editor.value as HTMLElement, {
     theme: "snow",
+    readOnly:props.column?.editReadonly,
     placeholder: 'Type here...',
     // formats : ['complete'],
     modules: {
@@ -431,7 +431,7 @@ function approveCompletion(type: 'all' | 'word') {
 }
 
 async function startCompletion() {
-  if (!props.meta.shouldComplete) {
+  if (!props.meta.shouldComplete || props.column?.editReadonly ) {
     return;
   }
   completion.value = null;
diff --git a/adminforth/spa/src/afcl/Select.vue b/adminforth/spa/src/afcl/Select.vue
@@ -4,6 +4,7 @@
       <input
         ref="inputEl"
         type="text"
+        :readonly="isReadonly"
         v-model="search"
         @click="inputClick"
         @input="inputInput"
@@ -101,6 +102,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isReadonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -141,6 +146,9 @@ function updateFromProps() {
 }
 
 function inputClick() {
+  if (props.isReadonly) {
+    return;
+  }
   if (!showDropdown.value) {
     showDropdown.value = true;
   } else {
diff --git a/adminforth/spa/src/components/CustomDatePicker.vue b/adminforth/spa/src/components/CustomDatePicker.vue
@@ -9,10 +9,10 @@
             <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
           </div>
 
-          <input ref="datepickerStartEl" type="text"
+          <input ref="datepickerStartEl"  type="text"
                  class="bg-gray-50 border leading-none 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="$t('Select date')"
-          >
+                :placeholder="$t('Select date')" :disabled="isReadonly" />
+          
         </div>
       </div>
     </div>
@@ -27,7 +27,7 @@
 
             <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
                    class="bg-gray-50 border leading-none 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"
-                   value="00:00" required/>
+                   value="00:00" :disabled="isReadonly" required/>
           </div>
         </div>
       </div>
@@ -71,7 +71,10 @@ const props = defineProps({
   },
   autoHide: {
     type: Boolean,
-  }
+  },
+  isReadonly: {
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:valueStart']);
diff --git a/adminforth/spa/src/components/GroupsTable.vue b/adminforth/spa/src/components/GroupsTable.vue
@@ -20,7 +20,7 @@
           :key="column.name"
           v-if="currentValues !== null"
           class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
-          :class="{ 'border-b': i !== group.columns.length - 1, 'opacity-50 pointer-events-none': column.editReadonly && source === 'edit'}"
+          :class="{ 'border-b': i !== group.columns.length - 1}"
         >
           <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
               :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
@@ -59,20 +59,23 @@
                 :options="columnOptions[column.name] || []"
                 :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <Select
                 class="w-full"
                 v-else-if="column.enum"
                 :options="column.enum"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <Select
                 class="w-full"
                 v-else-if="column.type === 'boolean'"
                 :options="getBooleanOptions(column)"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <input 
@@ -81,6 +84,7 @@
                   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"
+                  :isReadonly="column.editReadonly && source === 'edit'"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
               >
@@ -90,6 +94,7 @@
                   :valueStart="currentValues[column.name]"
                   auto-hide
                   @update:valueStart="setCurrentValue(column.name, $event)"
+                  :isReadonly="column.editReadonly && source === 'edit'"
               />
               <input
                   v-else-if="['decimal', 'float'].includes(column.type)"
@@ -99,13 +104,15 @@
                   placeholder="0.0"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
+                  :readonly="column.editReadonly && source === 'edit'"
               />
               <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="$t('Text')"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
+                  :readonly="column.editReadonly && source === 'edit'"
               >
               </textarea>
               <textarea
@@ -126,7 +133,8 @@
                   autocomplete="false"
                   data-lpignore="true"
                   readonly
-                  onfocus="this.removeAttribute('readonly');"
+                  ref="readonlyInputs"
+                  @focus="onFocusHandler($event, column, source)"
               >
 
               <button
@@ -171,6 +179,9 @@
     columnOptions: any,
   }>();
 
+  const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
+  const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+
   const getBooleanOptions = (column: any) => {
     const options: Array<{ label: string; value: boolean | null }> = [
       { label: t('Yes'), value: true },
@@ -181,12 +192,20 @@
     }
     return options;
   };
+  function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
+    const focusedInput = event.target as HTMLInputElement; 
+    if(!focusedInput) return;  
+    if (column.editReadonly && source === 'edit') return;  
+    else {
+      focusedInput.removeAttribute('readonly'); 
+    }
+  }
+
 
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
 
-  const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
-  const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+
 
   watch(customComponentsInValidity, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
