From f5e8e33b4f37bbbcd4a7ed0dec2dae4b79984f53 Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Mon, 19 Feb 2024 17:23:48 +0100
Subject: [PATCH] Allow records to be opened in edit mode

---
 .../components/PageBlocks/RecordListBase.vue  | 24 ++++++++++++-------
 .../PageBlocks/RecordListConfigurator.vue     | 16 +++++++++++++
 .../compose/types/page-block/record-list.ts   |  3 +++
 locale/en/corteza-webapp-compose/block.yaml   |  1 +
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index 58b8ae51d..efad6a9a5 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -320,7 +320,7 @@
               :key="`${index}${item.r.recordID}`"
               :class="{ 'pointer': !(options.editable && editing), }"
               :variant="inlineEditing && item.r.deletedAt ? 'warning' : ''"
-              @click="handleRowClicked(item)"
+              @click="handleRowClick(item)"
             >
               <b-td
                 v-if="options.draggable && inlineEditing"
@@ -434,6 +434,7 @@
                       :icon="['fas', 'ellipsis-v']"
                     />
                   </template>
+
                   <template v-if="inlineEditing">
                     <b-dropdown-item
                       v-if="isCloneRecordActionVisible"
@@ -1456,7 +1457,7 @@ export default {
       this.processing = false
     },
 
-    handleRowClicked ({ r: { recordID } }) {
+    handleRowClick ({ r: { recordID } }) {
       if ((this.options.editable && this.editing) || (!this.recordPageID && !this.options.rowViewUrl)) {
         return
       }
@@ -1470,9 +1471,19 @@ export default {
         })
       }
 
+      if (this.options.recordDisplayOption === 'modal' || this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: this.recordPageID,
+          edit: this.options.openRecordInEditMode,
+        })
+        return
+      }
+
       const pageID = this.recordPageID
+      const name = this.options.openRecordInEditMode ? this.options.rowEditUrl || 'page.record.edit' : this.options.rowViewUrl || 'page.record'
       const route = {
-        name: this.options.rowViewUrl || 'page.record',
+        name,
         params: {
           pageID,
           recordID,
@@ -1480,12 +1491,7 @@ export default {
         query: null,
       }
 
-      if (this.options.recordDisplayOption === 'modal' || this.inModal) {
-        this.$root.$emit('show-record-modal', {
-          recordID,
-          recordPageID: this.recordPageID,
-        })
-      } else if (this.options.recordDisplayOption === 'newTab') {
+      if (this.options.recordDisplayOption === 'newTab') {
         window.open(this.$router.resolve(route).href)
       } else {
         this.$router.push(route)
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 4e45b6a44..671aac904 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -619,6 +619,22 @@
             <b-col
               cols="12"
               lg="6"
+            >
+              <b-form-group
+                :label="$t('recordList.record.editMode')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  v-model="options.openRecordInEditMode"
+                  switch
+                  :labels="checkboxLabel"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              md="6"
             >
               <b-form-group
                 :label="$t('recordList.selectable')"
diff --git a/lib/js/src/compose/types/page-block/record-list.ts b/lib/js/src/compose/types/page-block/record-list.ts
index 037c22c69..ce5fd769d 100644
--- a/lib/js/src/compose/types/page-block/record-list.ts
+++ b/lib/js/src/compose/types/page-block/record-list.ts
@@ -67,6 +67,7 @@ export interface Options {
   inlineRecordEditEnabled: boolean;
   filterPresets: FilterPreset[];
   showRecordPerPageOption: boolean;
+  openRecordInEditMode: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -120,6 +121,7 @@ const defaults: Readonly<Options> = Object.freeze({
   inlineRecordEditEnabled: false,
   filterPresets: [],
   showRecordPerPageOption: false,
+  openRecordInEditMode: false,
 })
 
 export class PageBlockRecordList extends PageBlock {
@@ -183,6 +185,7 @@ export class PageBlockRecordList extends PageBlock {
       'bulkRecordEditEnabled',
       'inlineRecordEditEnabled',
       'showRecordPerPageOption',
+      'openRecordInEditMode',
     )
 
     if (o.selectionButtons) {
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index c7689569d..1b36cad3b 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -465,6 +465,7 @@ recordList:
     withPresortedRecords: with presorted ({{0}}) record
   record:
     draggable: Can drag & drop records to order them
+    editMode: Users will be able to open record in edit mode when a row is clicked
     fullPageNavigation: Full page navigation
     hideAddButton: Users will be able to add new records
     hideImportButton: Users will be able to import records