From 94a8f849393e008be53861e73c732b418b040239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 24 Jul 2023 17:26:40 +0200
Subject: [PATCH] Update record edit/view flow

---
 .../src/components/Common/RecordToolbar.vue   | 25 ++++++--
 client/web/compose/src/mixins/record.js       | 26 ++++----
 .../src/views/Public/Pages/Records/View.vue   | 59 +++++++++++--------
 .../corteza-webapp-compose/notification.yaml  |  6 +-
 4 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 8c562e65d..569fbcfa6 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -63,7 +63,7 @@
       </b-col>
 
       <b-col
-        class="d-flex align-items-center justify-content-end"
+        class="d-flex align-items-center justify-content-end text-nowrap"
       >
         <template
           v-if="module"
@@ -75,6 +75,8 @@
             size-confirm="lg"
             variant="danger"
             :borderless="false"
+            button-class="d-flex align-items-center justify-content-center w-100 h-100"
+            style="min-height: 42px; min-width: 85px;"
             @confirmed="$emit('delete')"
           >
             <b-spinner
@@ -96,6 +98,8 @@
             variant="warning"
             variant-ok="warning"
             :borderless="false"
+            button-class="d-flex align-items-center justify-content-center w-100 h-100"
+            style="min-height: 42px; min-width: 95px;"
             @confirmed="$emit('undelete')"
           >
             <b-spinner
@@ -110,7 +114,7 @@
           </c-input-confirm>
 
           <b-button
-            v-if="!inEditing && isCreated && module.canCreateRecord && !(hideClone || settings.hideClone)"
+            v-if="isCreated && module.canCreateRecord && !(hideClone || settings.hideClone)"
             data-test-id="button-clone"
             variant="light"
             size="lg"
@@ -133,6 +137,18 @@
             {{ labels.edit || $t('label.edit') }}
           </b-button>
 
+          <b-button
+            v-else-if="inEditing && isCreated && !(hideEdit || settings.hideEdit)"
+            data-test-id="button-edit"
+            :disabled="!record.canUpdateRecord || processing"
+            variant="light"
+            size="lg"
+            class="ml-2"
+            @click.prevent="$emit('view')"
+          >
+            {{ labels.edit || $t('label.view') }}
+          </b-button>
+
           <b-button
             v-if="!inEditing && module.canCreateRecord && !(hideNew || settings.hideNew)"
             data-test-id="button-add-new"
@@ -152,6 +168,7 @@
             class="d-flex align-items-center justify-content-center ml-2"
             variant="primary"
             size="lg"
+            style="min-height: 42px; min-width: 73px;"
             @click.prevent="$emit('submit')"
           >
             <b-spinner
@@ -314,9 +331,7 @@ export default {
     },
 
     backLabel () {
-      if (this.inEditing) {
-        return this.$t('label.cancel')
-      } else if (this.showRecordModal) {
+      if (this.showRecordModal) {
         return this.$t('label.close')
       }
 
diff --git a/client/web/compose/src/mixins/record.js b/client/web/compose/src/mixins/record.js
index 346e330b8..95f3d76a6 100644
--- a/client/web/compose/src/mixins/record.js
+++ b/client/web/compose/src/mixins/record.js
@@ -150,18 +150,12 @@ export default {
         .then(() => {
           if (this.record.valueErrors.set) {
             this.toastWarning(this.$t('notification:record.validationWarnings'))
-          } else if (this.showRecordModal) {
-            this.inEditing = false
-            this.inCreating = false
           } else {
-            this.$router.push({ name: route, params: { ...this.$route.params, recordID: this.record.recordID } })
+            this.inCreating = false
           }
+          this.toastSuccess(this.$t(`notification:record.${isNew ? 'create' : 'update'}Success`))
         })
-        .catch(this.toastErrorHandler(this.$t(
-          isNew
-            ? 'notification:record.createFailed'
-            : 'notification:record.updateFailed',
-        )))
+        .catch(this.toastErrorHandler(this.$t(`notification:record.${isNew ? 'create' : 'update'}Failed`)))
         .finally(() => {
           this.processingSubmit = false
           this.processing = false
@@ -231,13 +225,14 @@ export default {
 
       return this
         .dispatchUiEvent('beforeDelete')
-        .then(() => this.$ComposeAPI.recordDelete(this.record))
+        .then(this.$ComposeAPI.recordDelete(this.record))
         .then(() => {
           this.record.deletedAt = (new Date()).toISOString()
         })
-        .then(() => this.dispatchUiEvent('afterDelete'))
-        .then(() => this.updatePrompts())
+        .then(this.dispatchUiEvent('afterDelete'))
+        .then(this.updatePrompts())
         .then(this.loadRecord)
+        .then(this.toastSuccess(this.$t('notification:record.deleteSuccess')))
         .catch(this.toastErrorHandler(this.$t('notification:record.deleteFailed')))
         .finally(() => {
           this.processingDelete = false
@@ -251,10 +246,11 @@ export default {
 
       return this
         .dispatchUiEvent('beforeUndelete')
-        .then(() => this.$ComposeAPI.recordUndelete(this.record))
-        .then(() => this.dispatchUiEvent('afterUndelete'))
-        .then(() => this.updatePrompts())
+        .then(this.$ComposeAPI.recordUndelete(this.record))
+        .then(this.dispatchUiEvent('afterUndelete'))
+        .then(this.updatePrompts())
         .then(this.loadRecord)
+        .then(this.toastSuccess(this.$t('notification:record.restoreSuccess')))
         .catch(this.toastErrorHandler(this.$t('notification:record.restoreFailed')))
         .finally(() => {
           this.processingUndelete = false
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index beb12afd9..e956801af 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -60,6 +60,7 @@
         @add="handleAdd()"
         @clone="handleClone()"
         @edit="handleEdit()"
+        @view="handleView()"
         @delete="handleDelete()"
         @undelete="handleUndelete()"
         @back="handleBack()"
@@ -273,7 +274,7 @@ export default {
 
   mounted () {
     this.$root.$on('refetch-record-blocks', () => {
-      // Don*t refresh when creating and prompt user before refreshing when editing
+      // Don't refresh when creating and prompt user before refreshing when editing
       if (this.inCreating || (this.inEditing && !window.confirm(this.$t('notification:record.staleDataRefresh')))) {
         return
       }
@@ -300,9 +301,7 @@ export default {
       clearRecordSet: 'record/clearSet',
     }),
 
-    async loadRecord () {
-      this.record = undefined
-
+    async loadRecord (recordID = this.recordID) {
       if (!this.page) {
         return
       }
@@ -312,12 +311,15 @@ export default {
       if (moduleID !== NoID) {
         const module = Object.freeze(this.getModuleByID(moduleID).clone())
 
-        if (this.recordID && this.recordID !== NoID) {
-          return this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID: this.recordID })
+        if (recordID && recordID !== NoID) {
+          return this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID })
             .then(record => {
               this.record = new compose.Record(module, record)
             })
-            .catch(this.toastErrorHandler(this.$t('notification:record.loadFailed')))
+            .catch(e => {
+              this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
+              this.handleBack()
+            })
         } else {
           this.record = new compose.Record(module, {})
         }
@@ -327,7 +329,7 @@ export default {
     async handleBack () {
       /**
        * Not the best way since we can not always know where we
-       * came from (and "were" is back).
+       * came from (and "where" is back).
        */
       if (this.showRecordModal) {
         if (!this.inEditing || this.inCreating) {
@@ -347,32 +349,31 @@ export default {
     },
 
     handleAdd () {
-      if (this.showRecordModal) {
-        this.inEditing = true
-        this.inCreating = true
-        this.record = new compose.Record(this.module, { values: this.values })
-      } else {
+      this.inEditing = true
+      this.inCreating = true
+      this.record = new compose.Record(this.module, { values: this.values })
+      if (!this.showRecordModal) {
         this.$router.push({ name: 'page.record.create', params: this.newRouteParams })
       }
     },
 
     handleClone () {
-      if (this.showRecordModal) {
-        this.inEditing = true
-        this.inCreating = true
-        this.record = new compose.Record(this.module, { values: this.record.values })
-      } else {
+      this.inEditing = true
+      this.inCreating = true
+      this.record = new compose.Record(this.module, { values: this.record.values })
+      if (!this.showRecordModal) {
         this.$router.push({ name: 'page.record.create', params: { pageID: this.page.pageID, values: this.record.values } })
       }
     },
 
     handleEdit () {
-      if (this.showRecordModal) {
-        this.inCreating = false
-        this.inEditing = true
-      } else {
-        this.$router.push({ name: 'page.record.edit', params: this.$route.params })
-      }
+      this.inEditing = true
+      this.inCreating = false
+    },
+
+    handleView () {
+      this.inEditing = false
+      this.inCreating = false
     },
 
     handleRedirectToPrevOrNext (recordID) {
@@ -434,7 +435,7 @@ export default {
       }
 
       // Check layouts for expressions/roles and find the first one that fits
-      this.layout = this.layouts.find(l => {
+      const matchedLayout = this.layouts.find(l => {
         if (pageLayoutID && l.pageLayoutID !== pageLayoutID) return
 
         const { expression, roles = [] } = l.config.visibility
@@ -446,11 +447,17 @@ export default {
         return this.$auth.user.roles.some(roleID => roles.includes(roleID))
       })
 
-      if (!this.layout) {
+      if (!matchedLayout) {
         this.toastWarning(this.$t('notification:page.page-layout.notFound.view'))
         return this.$router.go(-1)
       }
 
+      if (this.layout && matchedLayout.pageLayoutID === this.layout.pageLayoutID) {
+        return
+      }
+
+      this.layout = matchedLayout
+
       const { config = {} } = this.layout
       const { buttons = [] } = config
 
diff --git a/locale/en/corteza-webapp-compose/notification.yaml b/locale/en/corteza-webapp-compose/notification.yaml
index c1ec38b59..6fe5723ae 100644
--- a/locale/en/corteza-webapp-compose/notification.yaml
+++ b/locale/en/corteza-webapp-compose/notification.yaml
@@ -113,8 +113,13 @@ page:
       failed: Failed to delete layout
 record:
   createFailed: Could not create record
+  createSuccess: Record created
+  updateFailed: Could not update record
+  updateSuccess: Record updated
   deleteFailed: Could not delete record
+  deleteSuccess: Record deleted
   restoreFailed: Could not restore record
+  restoreSuccess: Record restored
   deleteBulkFailed: Could not delete selected records
   deleteBulkRecordUpdateFailed: Could not update selected records
   deleteBulkSuccess: Successfully deleted selected records
@@ -131,7 +136,6 @@ record:
   moduleOrPageNotSet: 'RecordList block error: module or page option not set'
   unexpectedInput: Unexpected input for values property, should be an array with name-value object pairs
   unexpectedValue: Unexpected value for record module ({{type}})
-  updateFailed: Could not update record
   validationErrors: check error messages on the form
   validationWarnings: Record saved successfully, check warning messages on the form
   staleDataRefresh: Stale record data, all unsaved changes will be lost. Do you wish to refresh the data now?