From cdbe0d1cf502ea39fb882a5444d6ecec80b4b163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 18 Apr 2023 16:11:45 +0200
Subject: [PATCH] Adjust record and record list configurator UI/UX

---
 .../PageBlocks/RecordConfigurator.vue         | 203 +++++++++---------
 .../PageBlocks/RecordListConfigurator.vue     |  47 ++--
 2 files changed, 131 insertions(+), 119 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index 49e63818a..88cfaec77 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -1,100 +1,112 @@
 <template>
   <b-tab
     :title="$t('record.label')"
+    no-body
   >
-    <b-row>
-      <b-col
-        cols="12"
-        md="6"
-      >
-        <fieldset
-          class="form-group"
-        >
-          <label>
-            {{ $t('general.module') }}
-          </label>
+    <div class="px-3 pt-3">
+      <h5 class="mb-3">
+        {{ $t('recordList.record.generalLabel') }}
+      </h5>
 
-          <input
-            v-if="module"
-            v-model="module.name"
-            class="form-control"
-            type="text"
-            readonly
+      <b-row>
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('general.module')"
+            label-class="text-primary"
           >
-        </fieldset>
-      </b-col>
+            <b-form-input
+              v-if="module"
+              v-model="module.name"
+              type="text"
+              readonly
+            />
+          </b-form-group>
+        </b-col>
 
-      <b-col
-        cols="12"
-        md="6"
-      >
-        <b-form-group
-          :label="$t('record.referenceRecordField')"
-          :description="$t('record.referenceRecordFieldDescription')"
-          label-class="text-primary"
+        <b-col
+          cols="12"
+          md="6"
         >
-          <vue-select
-            v-model="options.referenceField"
-            :options="recordSelectorFields"
-            :get-option-label="getFieldLabel"
-            :get-option-key="getOptionKey"
-            :placeholder="$t('record.referenceRecordFieldPlaceholder')"
-            :reduce="field => field.fieldID"
-            :calculate-position="calculateDropdownPosition"
-            append-to-body
-            class="bg-white"
-            @input="updateReferenceModule($event, [])"
-          />
-        </b-form-group>
-      </b-col>
-    </b-row>
+          <b-form-group
+            :label="$t('record.recordSelectorDisplayOptions')"
+            label-class="text-primary"
+          >
+            <b-form-select
+              v-model="options.recordSelectorDisplayOption"
+              :options="recordDisplayOptions"
+            />
+          </b-form-group>
+        </b-col>
 
-    <b-form-group
-      :label="$t('module:general.fields')"
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('record.referenceRecordField')"
+            :description="$t('record.referenceRecordFieldDescription')"
+            label-class="text-primary"
+          >
+            <vue-select
+              v-model="options.referenceField"
+              :options="recordSelectorFields"
+              :get-option-label="getFieldLabel"
+              :get-option-key="getOptionKey"
+              :placeholder="$t('record.referenceRecordFieldPlaceholder')"
+              :reduce="field => field.fieldID"
+              :calculate-position="calculateDropdownPosition"
+              append-to-body
+              class="bg-white"
+              @input="updateReferenceModule($event, [])"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr v-if="module">
+
+    <div
+      v-if="module"
+      class="px-3"
     >
-      <field-picker
-        v-if="module"
-        :module="fieldModule"
-        :fields.sync="options.fields"
-        style="max-height: 52vh;"
-      />
-    </b-form-group>
+      <h5 class="mb-3">
+        {{ $t('module:general.fields') }}
+      </h5>
+
+      <b-row>
+        <b-col
+          cols="12"
+        >
+          <field-picker
+            :module="fieldModule"
+            :fields.sync="options.fields"
+            style="max-height: 52vh;"
+          />
+        </b-col>
+      </b-row>
+    </div>
 
     <hr>
 
-    <div>
-      <b-form-group
-        label-size="lg"
-      >
-        <template #label>
-          <div
-            class="d-flex"
-          >
-            {{ $t('record.fieldConditions.label') }}
+    <div class="px-3">
+      <h5 class="d-flex align-items-center justify-content-between mb-3">
+        {{ $t('record.fieldConditions.label') }}
 
-            <b-button
-              variant="link"
-              class="p-0 ml-1 text-decoration-none border-0"
-              :disabled="addRuleDisabled"
-              @click="addRule"
-            >
-              {{ $t('record.fieldConditions.action') }}
-            </b-button>
-
-            <b-button
-              variant="link"
-              :href="`${documentationURL}#value-sanitizers`"
-              target="_blank"
-              class="p-0 ml-auto"
-            >
-              {{ $t('record.fieldConditions.help') }}
-            </b-button>
-          </div>
-        </template>
-      </b-form-group>
+        <b-button
+          variant="link"
+          :href="`${documentationURL}#value-sanitizers`"
+          target="_blank"
+          class="p-0 ml-auto"
+        >
+          {{ $t('record.fieldConditions.help') }}
+        </b-button>
+      </h5>
 
       <b-table-simple
-        v-if="block.options.fieldConditions.length"
         borderless
         small
         responsive="lg"
@@ -166,25 +178,20 @@
               />
             </b-td>
           </b-tr>
+
+          <b-tr>
+            <b-td>
+              <b-button
+                variant="primary"
+                :disabled="addRuleDisabled"
+                @click="addRule"
+              >
+                {{ $t('record.fieldConditions.action') }}
+              </b-button>
+            </b-td>
+          </b-tr>
         </b-tbody>
       </b-table-simple>
-
-      <b-row>
-        <b-col
-          cols="12"
-          md="6"
-        >
-          <b-form-group
-            :label="$t('record.recordSelectorDisplayOptions')"
-            label-class="text-primary"
-          >
-            <b-form-select
-              v-model="options.recordSelectorDisplayOption"
-              :options="recordDisplayOptions"
-            />
-          </b-form-group>
-        </b-col>
-      </b-row>
     </div>
   </b-tab>
 </template>
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index cab377947..fc2d5987e 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -6,11 +6,9 @@
       no-body
     >
       <div
-        class="px-3"
+        class="px-3 pt-3"
       >
-        <h5
-          class="pt-3"
-        >
+        <h5 class="mb-3">
           {{ $t('recordList.record.generalLabel') }}
         </h5>
         <b-row>
@@ -50,36 +48,43 @@
             </b-form-group>
           </b-col>
         </b-row>
+      </div>
+
+      <hr v-if="recordListModule">
+
+      <div
+        v-if="recordListModule"
+        class="px-3"
+      >
+        <div class="mb-3">
+          <h5 class="mb-1">
+            {{ $t('module:general.fields') }}
+          </h5>
+          <small class="text-muted">
+            {{ $t('recordList.moduleFieldsFootnote') }}
+          </small>
+        </div>
 
         <b-row>
           <b-col
             cols="12"
           >
-            <b-form-group
-              v-if="recordListModule"
-              :label="$t('module:general.fields')"
-              label-class="pb-0 text-primary"
-            >
-              <label class="text-secondary small pb-1">
-                {{ $t('recordList.moduleFieldsFootnote') }}
-              </label>
-
-              <field-picker
-                :module="recordListModule"
-                :fields.sync="options.fields"
-                style="max-height: 40vh;"
-              />
-            </b-form-group>
+            <field-picker
+              :module="recordListModule"
+              :fields.sync="options.fields"
+              style="max-height: 40vh;"
+            />
           </b-col>
         </b-row>
       </div>
+
       <hr>
 
       <div
         v-if="options.editable"
-        class="px-3 pt-3"
+        class="px-3"
       >
-        <h5>
+        <h5 class="mb-3">
           {{ $t('recordList.record.inlineEditor') }}
         </h5>