From e081faab821509d7c3f4efbbf707b872e923d08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 24 Aug 2023 15:26:12 +0200
Subject: [PATCH] Fix conditional field always displayed in record viewer

---
 .../src/components/PageBlocks/RecordBase.vue  | 116 +++++++++---------
 .../components/PageBlocks/RecordEditor.vue    |  15 +--
 2 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
index ae3746d53..c5c6004a8 100644
--- a/client/web/compose/src/components/PageBlocks/RecordBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -14,72 +14,74 @@
       v-else-if="fieldModule"
       class="mt-3"
     >
-      <b-form-group
-        v-for="(field, index) in fields"
-        :key="index"
-        :label-cols-md="options.horizontalFieldLayoutEnabled && '5'"
-        :label-cols-xl="options.horizontalFieldLayoutEnabled && '4'"
-        :content-cols-md="options.horizontalFieldLayoutEnabled && '7'"
-        :content-cols-xl="options.horizontalFieldLayoutEnabled && '8'"
-        :class="{ 'field-container mb-3 px-3': canDisplay(field) }"
-      >
-        <template #label>
-          <div
-            class="d-flex align-items-center text-primary mb-0"
-          >
-            <span class="d-inline-block mw-100 py-1">
-              {{ field.label || field.name }}
-            </span>
+      <template v-for="field in fields">
+        <b-form-group
+          v-if="canDisplay(field)"
+          :key="field.id"
+          :label-cols-md="options.horizontalFieldLayoutEnabled && '5'"
+          :label-cols-xl="options.horizontalFieldLayoutEnabled && '4'"
+          :content-cols-md="options.horizontalFieldLayoutEnabled && '7'"
+          :content-cols-xl="options.horizontalFieldLayoutEnabled && '8'"
+          class="field-container mb-3 px-3"
+        >
+          <template #label>
+            <div
+              class="d-flex align-items-center text-primary mb-0"
+            >
+              <span class="d-inline-block mw-100 py-1">
+                {{ field.label || field.name }}
+              </span>
 
-            <hint
-              :id="field.fieldID"
-              :text="((field.options.hint || {}).view || '')"
-            />
+              <hint
+                :id="field.fieldID"
+                :text="((field.options.hint || {}).view || '')"
+              />
+
+              <div
+                v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
+                class="inline-actions ml-2"
+              >
+                <b-button
+                  :title="$t('field.inlineEdit.button.title')"
+                  variant="outline-light"
+                  size="sm"
+                  :disabled="editable"
+                  class="text-secondary border-0"
+                  @click="editInlineField(fieldRecord, field)"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'pen']"
+                  />
+                </b-button>
+              </div>
+            </div>
 
             <div
-              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
-              class="inline-actions ml-2"
+              class="small text-muted"
+              :class="{ 'mb-1': !!(field.options.description || {}).view }"
             >
-              <b-button
-                :title="$t('field.inlineEdit.button.title')"
-                variant="outline-light"
-                size="sm"
-                :disabled="editable"
-                class="text-secondary border-0"
-                @click="editInlineField(fieldRecord, field)"
-              >
-                <font-awesome-icon
-                  :icon="['fas', 'pen']"
-                />
-              </b-button>
+              {{ (field.options.description || {}).view }}
             </div>
-          </div>
+          </template>
 
           <div
-            class="small text-muted"
-            :class="{ 'mb-1': !!(field.options.description || {}).view }"
+            v-if="field.canReadRecordValue"
+            class="value mt-1 align-self-center"
           >
-            {{ (field.options.description || {}).view }}
+            <field-viewer
+              v-bind="{ ...$props, field }"
+              :extra-options="options"
+              :record="fieldRecord"
+            />
           </div>
-        </template>
-
-        <div
-          v-if="field.canReadRecordValue"
-          class="value mt-1 align-self-center"
-        >
-          <field-viewer
-            v-bind="{ ...$props, field }"
-            :extra-options="options"
-            :record="fieldRecord"
-          />
-        </div>
-        <i
-          v-else
-          class="text-primary"
-        >
-          {{ $t('field.noPermission') }}
-        </i>
-      </b-form-group>
+          <i
+            v-else
+            class="text-primary"
+          >
+            {{ $t('field.noPermission') }}
+          </i>
+        </b-form-group>
+      </template>
     </div>
 
     <!-- Modal for inline editing -->
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index 7958646d9..6e850be38 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -15,14 +15,11 @@
       v-else-if="module"
       class="mt-3"
     >
-      <div
-        v-for="field in fields"
-        :key="field.id"
-        class="field"
-        :class="{ 'mb-3 px-3': canDisplay(field) }"
-      >
-        <template
+      <template v-for="field in fields">
+        <div
           v-if="canDisplay(field)"
+          :key="field.id"
+          class="field mb-3 px-3"
         >
           <field-editor
             v-if="isFieldEditable(field)"
@@ -74,8 +71,8 @@
               </i>
             </div>
           </b-form-group>
-        </template>
-      </div>
+        </div>
+      </template>
     </div>
   </wrap>
 </template>