incr: allow edit without close

- remove bg if readonly

src/components/Controls/AutoComplete.vue

@@ -12,14 +12,8 @@
         {{ df.label }}
       </div>
       <div
-        class="
-          flex
-          items-center
-          justify-between
-          focus-within:bg-gray-200
-          pr-2
-          rounded
-        "
+        class="flex items-center justify-between pr-2 rounded"
+        :class="isReadOnly ? '' : 'focus-within:bg-gray-200'"
       >
         <input
           ref="input"

src/components/Controls/Base.vue

@@ -62,8 +62,10 @@ export default {
           'px-3 py-2': this.size !== 'small',
           'px-2 py-1': this.size === 'small',
         },
-        'focus:outline-none focus:bg-gray-200 rounded w-full placeholder-gray-500',
-        this.isReadOnly ? 'text-gray-800' : 'text-gray-900',
+        'focus:outline-none rounded w-full placeholder-gray-500',
+        this.isReadOnly
+          ? 'text-gray-800 focus:bg-transparent'
+          : 'text-gray-900 focus:bg-gray-200',
       ];
 
       return this.getInputClassesFromProp(classes);

src/components/Controls/Table.vue

@@ -172,7 +172,7 @@ export default {
       return 2;
     },
     canEditRow() {
-      return !this.doc?.isSubmitted && this.df.edit;
+      return this.df.edit;
     },
     ratio() {
       const ratio = [0.3].concat(this.tableFields.map(() => 1));

src/components/Controls/TableRow.vue

@@ -46,7 +46,6 @@
       :background="false"
       @click="openRowQuickEdit"
       v-if="canEditRow"
-      :disabled="isEditing"
     >
       <feather-icon name="edit" class="w-4 h-4 text-gray-600" />
     </Button>
@@ -98,9 +97,6 @@ export default {
       doc: this.row,
     };
   },
-  inject: {
-    isEditing: { default: false },
-  },
   methods: {
     onChange(df, value) {
       if (value == null) {

src/components/Controls/Text.vue

@@ -10,6 +10,7 @@
       :value="value"
       :placeholder="inputPlaceholder"
       style="vertical-align: top"
+      :readonly="isReadOnly"
       @blur="(e) => triggerChange(e.target.value)"
       @focus="(e) => $emit('focus', e)"
       @input="(e) => $emit('input', e)"

src/components/TwoColumnForm.vue

@@ -188,7 +188,7 @@ export default {
         return true;
       }
 
-      if (this.submitted) {
+      if (this.submitted || this.doc.parentdoc?.isSubmitted) {
         return true;
       }
 

src/pages/InvoiceForm.vue

@@ -12,7 +12,7 @@
       </Button>
       <Button
         :icon="true"
-        v-if="!doc?.isSubmitted && !quickEditDoc && doc.enableDiscounting"
+        v-if="!doc?.isSubmitted && doc.enableDiscounting"
         @click="toggleInvoiceSettings"
       >
         <feather-icon name="settings" class="w-4 h-4" />
@@ -308,6 +308,7 @@ getActionsForDocument,
 routeTo,
 showMessageDialog
 } from 'src/utils/ui';
+import { nextTick } from 'vue';
 import { handleErrorWithDialog } from '../errorHandling';
 import QuickEditForm from './QuickEditForm.vue';
 
@@ -328,7 +329,6 @@ export default {
       schemaName: this.schemaName,
       name: this.name,
       doc: computed(() => this.doc),
-      isEditing: computed(() => !!this.quickEditDoc),
     };
   },
   data() {
@@ -413,7 +413,7 @@ export default {
   methods: {
     routeTo,
     toggleInvoiceSettings() {
-      if (this.quickEditDoc || !this.schemaName) {
+      if (!this.schemaName) {
         return;
       }
 
@@ -423,7 +423,13 @@ export default {
 
       this.toggleQuickEditDoc(this.doc, fields);
     },
-    toggleQuickEditDoc(doc, fields = []) {
+    async toggleQuickEditDoc(doc, fields = []) {
+      if (this.quickEditDoc && doc) {
+        this.quickEditDoc = null;
+        this.quickEditFields = [];
+        await nextTick();
+      }
+
       this.quickEditDoc = doc;
       this.quickEditFields = fields;
     },