From 0a4ed217c43ecaef5f2a70e7ebc5998c7c8ec53e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 21 Mar 2023 16:18:55 +0100
Subject: [PATCH] Adjust styles and logic of record list configurator

---
 .../PageBlocks/RecordListConfigurator.vue     | 288 ++++++++++--------
 .../src/components/input/CInputCheckbox.vue   |  35 ++-
 locale/en/corteza-webapp-compose/block.yaml   |  29 +-
 3 files changed, 207 insertions(+), 145 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 3b19ffd03..f0f26be2c 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -40,7 +40,7 @@
             <b-form-group
               v-if="recordListModule"
               :label="$t('recordList.record.inlineEditorAllow')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.editable"
@@ -106,7 +106,7 @@
           >
             <b-form-group
               :label="$t('recordList.refField.label')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-select
                 v-model="options.refField"
@@ -137,7 +137,7 @@
           >
             <b-form-group
               :label="$t('recordList.positionField.label')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-select v-model="options.positionField">
                 <option :value="undefined">
@@ -165,7 +165,7 @@
             <b-form-group
               v-if="options.positionField"
               :label="$t('recordList.record.draggable')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.draggable"
@@ -192,11 +192,12 @@
           >
             <b-form-group
               :label="$t('recordList.record.filterHide')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.hideFiltering"
                 switch
+                invert
                 :labels="checkboxLabel"
               />
             </b-form-group>
@@ -208,11 +209,12 @@
           >
             <b-form-group
               :label="$t('recordList.record.prefilterHideSearch')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.hideSearch"
                 switch
+                invert
                 :labels="checkboxLabel"
               />
             </b-form-group>
@@ -223,7 +225,7 @@
           <b-col>
             <b-form-group
               :label="$t('recordList.record.prefilterCommand')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-textarea
                 v-model="options.prefilter"
@@ -258,11 +260,12 @@
           <b-col>
             <b-form-group
               :label="$t('recordList.record.presortHideSort')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.hideSorting"
                 switch
+                invert
                 :labels="checkboxLabel"
               />
             </b-form-group>
@@ -273,7 +276,7 @@
           <b-col>
             <b-form-group
               :label="$t('recordList.record.presortInputLabel')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-presort
                 v-model="options.presort"
@@ -313,11 +316,12 @@
           >
             <b-form-group
               :label="$t('recordList.record.hidePaging')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
-                v-model="options.hideSorting"
+                v-model="options.hidePaging"
                 switch
+                invert
                 :labels="checkboxLabel"
               />
             </b-form-group>
@@ -332,7 +336,7 @@
               horizontal
               breakpoint="md"
               :label="$t('recordList.record.perPage')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model.number="options.perPage"
@@ -344,70 +348,82 @@
           </b-col>
         </b-row>
 
-        <div>
-          <h6 class="text-primary mb-3">
-            {{ $t('recordList.record.pagingOptions') }}
-          </h6>
-
-          <b-row>
-            <b-col
-              v-if="!options.hidePaging"
-              cols="12"
-              lg="6"
+        <b-row>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.fullPageNavigation')"
+              label-class="text-primary"
             >
-              <b-form-group
-                :label="$t('recordList.record.fullPageNavigation')"
-                class="text-primary"
-              >
-                <c-input-checkbox
-                  v-model="options.fullPageNavigation"
-                  switch
-                  :labels="checkboxLabel"
-                  data-test-id="hide-page-navigation"
-                />
-              </b-form-group>
-            </b-col>
+              <c-input-checkbox
+                v-model="options.fullPageNavigation"
+                switch
+                :labels="checkboxLabel"
+                data-test-id="hide-page-navigation"
+              />
+            </b-form-group>
+          </b-col>
 
-            <b-col
-              cols="12"
-              lg="6"
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.showTotalCount')"
+              label-class="text-primary"
             >
-              <b-form-group
-                :label="$t('recordList.enableRecordPageNavigation')"
-                class="text-primary"
-              >
-                <c-input-checkbox
-                  v-model="options.enableRecordPageNavigation"
-                  switch
-                  :labels="checkboxLabel"
-                />
-              </b-form-group>
-            </b-col>
-          </b-row>
-        </div>
+              <c-input-checkbox
+                v-model="options.showTotalCount"
+                data-test-id="show-total-record-count"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
       </div>
+
       <hr v-if="!options.editable">
 
       <div
         class="px-3"
       >
         <h5 class="mb-3">
-          {{ $t('recordList.record.newLabel') }}
+          {{ $t('recordList.record.recordsLabel') }}
         </h5>
-        <b-row
-          class="justify-content-between"
-        >
+
+        <b-row>
           <b-col
             cols="12"
-            lg="4"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.recordDisplayOptions')"
+              label-class="text-primary"
+            >
+              <b-form-select
+                v-model="options.recordDisplayOption"
+                :options="recordDisplayOptions"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col
+            cols="12"
+            md="6"
           >
             <b-form-group
               :label="$t('recordList.record.hideAddButton')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.hideAddButton"
                 switch
+                invert
                 :labels="checkboxLabel"
               />
             </b-form-group>
@@ -415,14 +431,14 @@
 
           <b-col
             cols="12"
-            lg="4"
+            md="6"
           >
             <b-form-group
-              :label="$t('recordList.record.hideImportButton')"
-              class="text-primary"
+              :label="$t('recordList.selectable')"
+              label-class="text-primary"
             >
               <c-input-checkbox
-                v-model="options.hideImportButton"
+                v-model="options.selectable"
                 switch
                 :labels="checkboxLabel"
               />
@@ -432,36 +448,110 @@
           <b-col
             v-if="onRecordPage"
             cols="12"
-            lg="4"
+            md="6"
           >
             <b-form-group
               :label="$t('recordList.record.linkToParent')"
-              class="text-primary"
+              label-class="text-primary"
             >
               <c-input-checkbox
                 v-model="options.linkToParent"
                 switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.hideImportButton')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.hideImportButton"
+                switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.export.allow')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.allowExport"
+                switch
                 :labels="checkboxLabel"
               />
             </b-form-group>
           </b-col>
-        </b-row>
-      </div>
-      <hr>
 
-      <div
-        class="px-3"
-      >
-        <h5 class="text-primary">
-          {{ $t('recordList.record.moreOptions') }}
-        </h5>
-
-        <b-row>
           <b-col
             cols="12"
-            lg="4"
+            md="6"
           >
-            <b-form-group class="text-primary">
+            <b-form-group
+              :label="$t('recordList.enableRecordPageNavigation')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.enableRecordPageNavigation"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.enableBulkRecordEdit')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.bulkRecordEditEnabled"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.showDeletedRecordsOption')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.showDeletedRecordsOption"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.buttons')"
+              label-class="text-primary"
+            >
               <b-form-checkbox
                 v-model="options.hideRecordViewButton"
               >
@@ -477,17 +567,6 @@
               <b-form-checkbox v-model="options.hideRecordCloneButton">
                 {{ $t('recordList.hideRecordCloneButton') }}
               </b-form-checkbox>
-            </b-form-group>
-          </b-col>
-
-          <b-col
-            cols="12"
-            lg="4"
-          >
-            <b-form-group class="text-primary">
-              <b-form-checkbox v-model="options.showDeletedRecordsOption">
-                {{ $t('recordList.record.showDeletedRecordsOption') }}
-              </b-form-checkbox>
 
               <b-form-checkbox
                 v-model="options.hideRecordPermissionsButton"
@@ -500,43 +579,6 @@
               </b-form-checkbox>
             </b-form-group>
           </b-col>
-
-          <b-col
-            cols="12"
-            lg="4"
-          >
-            <b-form-group class="text-primary">
-              <b-form-checkbox v-model="options.allowExport">
-                {{ $t('recordList.export.allow') }}
-              </b-form-checkbox>
-
-              <b-form-checkbox v-model="options.selectable">
-                {{ $t('recordList.selectable') }}
-              </b-form-checkbox>
-
-              <b-form-checkbox
-                v-if="!options.hidePaging"
-                v-model="options.showTotalCount"
-                data-test-id="show-total-record-count"
-              >
-                {{ $t('recordList.record.showTotalCount') }}
-              </b-form-checkbox>
-            </b-form-group>
-          </b-col>
-        </b-row>
-
-        <b-row>
-          <b-col cols="4">
-            <b-form-group
-              :label="$t('recordList.record.recordDisplayOptions')"
-              class="text-primary"
-            >
-              <b-form-select
-                v-model="options.recordDisplayOption"
-                :options="recordDisplayOptions"
-              />
-            </b-form-group>
-          </b-col>
         </b-row>
       </div>
     </b-tab>
diff --git a/lib/vue/src/components/input/CInputCheckbox.vue b/lib/vue/src/components/input/CInputCheckbox.vue
index 3a0a92564..d2edbd9fb 100644
--- a/lib/vue/src/components/input/CInputCheckbox.vue
+++ b/lib/vue/src/components/input/CInputCheckbox.vue
@@ -4,10 +4,7 @@
     >
       <span
         class="mb-0 inline-block text-primary mr-2"
-        :class="{ 
-          'text-muted': value,
-          'font-weight-bold': !value,
-       }"
+        :class="noClass"
       >
         {{ labels.off }}
       </span>
@@ -15,15 +12,14 @@
       <b-form-checkbox
         v-bind="$attrs"
         :checked="value"
+        :value="!invert"
+        :unchecked-value="invert"
         v-on="$listeners"
       />
 
       <span
         class="mb-0 inline-block strong text-primary ml-2"
-        :class="{ 
-          'text-muted': !value,
-          'font-weight-bold': value,
-       }"
+        :class="yesClass"
       >
         {{ labels.on }}
       </span>
@@ -44,6 +40,29 @@ export default {
       required: true,
       default: () => ({}),
     },
+
+    invert: {
+      type: Boolean,
+      default: false,
+    }
   },
+
+  computed: {
+    noClass () {
+      const value = this.invert ? !this.value : this.value
+      return {
+        'text-muted': value,
+        'font-weight-bold': !value,
+      }
+    },
+
+    yesClass () {
+      const value = this.invert ? !this.value : this.value
+      return {
+        'text-muted': !value,
+        'font-weight-bold': value,
+      }
+    }
+  }
 }
 </script>
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 1ac8122bb..684caab9f 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -257,7 +257,7 @@ recordList:
   editFields: Editable module fields
   export:
     all: Export all records
-    allow: Allow records export
+    allow: Users will be able to export records
     csv: CSV Export
     dateRange: 'Select date range:'
     query:
@@ -324,7 +324,7 @@ recordList:
   hideRecordPermissionsButton: Hide record permissions button
   hideRecordReminderButton: Hide record reminder button
   hideRecordViewButton: Hide view record button
-  enableRecordPageNavigation: Enable record page navigation
+  enableRecordPageNavigation: Users will be able to navigate to previous/next record
   import:
     dropzoneFileAdded: '{{name}} was uploaded and is ready for import ({{count}} record)'
     dropzoneFileAdded_plural: '{{name}} was uploaded and is ready for import ({{count}} records)'
@@ -390,21 +390,20 @@ recordList:
   record:
     draggable: Can drag & drop records to order them
     fullPageNavigation: Full page navigation
-    hideAddButton: The button 'Add Record' is hidden
-    hideImportButton: The button 'Import Record' is hidden
+    hideAddButton: Users will be able to add new records
+    hideImportButton: Users will be able to import records
     pagingLabel: Paging
     pagingOptions: Paging Options
     moreOptions: More Options
     hidePaging: User will be able to use Paging
     inlineEditor: Inline Options
-    inlineEditorAllow: Allow in-line record editing on module fields
-    inlineEditorFootnote: Only one inline editor with the same module can be present the same page
-    newLabel: New records
+    inlineEditorAllow: Inline record editor
+    recordsLabel: Records
     noPermission: No permission to read record
     perPage: Records per page
     prefilterFootnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}} and {{2}} are evaluated (when available)
-    prefilterHideSearch: Users are able to search the record list
-    filterHide: Users will see a prefiltered record list
+    prefilterHideSearch: Users will be able to search the record list
+    filterHide: Users will be able to filter the list
     prefilterLabel: Filtering
     generalLabel: General Settings
     prefilterCommand: Prefilter
@@ -417,10 +416,12 @@ recordList:
     presortPlaceholder: field1 DESC, field2 ASC
     showTotalCount: Show total record count
     showDeletedRecordsOption: Show option to see deleted records
-    openInSameTab: Open records in the same tab
-    openInNewTab: Open records in a new tab
-    openInModal: Open records in a modal
+    openInSameTab: Open record in the same tab
+    openInNewTab: Open record in a new tab
+    openInModal: Open record in a modal
+    enableBulkRecordEdit: Enable bulk record edit
     linkToParent: Link to parent record
+    buttons: Record buttons
     tooltip:
       clone: Clone
       edit: Edit
@@ -429,12 +430,12 @@ recordList:
       reminder: Reminder
       view: View
       permissions: Permissions
-    recordDisplayOptions: Record display options
+    recordDisplayOptions: On record click
   recordPage: record page
   refField:
     footnote: Field that links records with the parent record
     label: Parent field
-  selectable: Enable record selection
+  selectable: Users will be able to select records
   selected: '{{count}} of {{total}} records selected'
   sort:
     tooltip: Sort column