From c6afe59033300bd89df07ba8b8a13969af1d1d47 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 11 Feb 2022 18:01:48 +0530
Subject: [PATCH] refactor: inline rendering

---
 src/components/TwoColumnForm.vue | 58 ++++++++++++++++----------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/TwoColumnForm.vue b/src/components/TwoColumnForm.vue
index a4825336..8972c079 100644
--- a/src/components/TwoColumnForm.vue
+++ b/src/components/TwoColumnForm.vue
@@ -12,37 +12,32 @@
         @change="(value) => onChange(df, value)"
       />
       <template v-else>
-        <template v-if="inlineEditField === df && inlineEditDoc">
-          <div class="border-b" :key="df.fieldname">
-            <TwoColumnForm
-              ref="inlineEditForm"
-              :doc="inlineEditDoc"
-              :fields="inlineEditFields"
-              :column-ratio="columnRatio"
-              :no-border="true"
-              :focus-first-input="true"
-              :autosave="false"
-              @error="(msg) => $emit('error', msg)"
-            />
-            <div class="flex px-4 pb-2">
-              <Button
-                class="w-1/2 text-gray-900"
-                @click="inlineEditField = null"
-              >
-                {{ t('Cancel') }}
-              </Button>
-              <Button
-                type="primary"
-                class="ml-2 w-1/2 text-white"
-                @click="() => saveInlineEditDoc(df)"
-              >
-                {{ df.inlineSaveText || t('Save') }}
-              </Button>
-            </div>
+        <div class="border-b" :key="df.fieldname" v-if="renderInline(df)">
+          <TwoColumnForm
+            ref="inlineEditForm"
+            :doc="inlineEditDoc"
+            :fields="inlineEditFields"
+            :column-ratio="columnRatio"
+            :no-border="true"
+            :focus-first-input="true"
+            :autosave="false"
+            @error="(msg) => $emit('error', msg)"
+          />
+          <div class="flex px-4 pb-2">
+            <Button class="w-1/2 text-gray-900" @click="inlineEditField = null">
+              {{ t('Cancel') }}
+            </Button>
+            <Button
+              type="primary"
+              class="ml-2 w-1/2 text-white"
+              @click="() => saveInlineEditDoc(df)"
+            >
+              {{ df.inlineSaveText || t('Save') }}
+            </Button>
           </div>
-        </template>
+        </div>
         <div
-          :key="df.fieldname"
+          :key="df.fieldname + '-else'"
           v-else
           class="grid"
           :class="{ 'border-b': !noBorder }"
@@ -141,6 +136,11 @@ let TwoColumnForm = {
     }
   },
   methods: {
+    renderInline(df) {
+      return (
+        this.inlineEditField?.fieldname === df?.fieldname && this.inlineEditDoc
+      );
+    },
     evaluateBoolean(fieldProp, defaultValue) {
       const type = typeof fieldProp;
       switch (type) {