Add back navigation feture on record modal

client/web/compose/src/components/Common/RecordToolbar.vue

@@ -21,7 +21,7 @@
           @click.prevent="$emit('back')"
         >
           <font-awesome-icon
-            :icon="['fas', showRecordModal ? 'times' : 'chevron-left']"
+            :icon="['fas', hasBack ? 'chevron-left' : 'times']"
             class="back-icon"
           />
           {{ backLabel }}
@@ -302,7 +302,7 @@ export default {
 
     backLabel () {
       if (this.showRecordModal) {
-        return this.$t('label.close')
+        return this.hasBack ? this.$t('label.back') : this.$t('label.close')
       }
 
       return this.hasBack ? this.labels.back || this.$t('label.back') : this.$t('label.home')

client/web/compose/src/components/Public/Record/Modal.vue

@@ -26,6 +26,7 @@
       :ref-record="refRecord"
       show-record-modal
       @handle-record-redirect="loadRecord"
+      @on-modal-back="loadRecord"
     />
 
     <template #modal-footer>
@@ -81,6 +82,7 @@ export default {
       getModuleByID: 'module/getByID',
       getPageByID: 'page/getByID',
       recordPaginationUsable: 'ui/recordPaginationUsable',
+      modalPreviousPages: 'ui/modalPreviousPages',
     }),
   },
 
@@ -90,6 +92,7 @@ export default {
       handler (recordPageID, oldRecordPageID) {
         if (!recordPageID) {
           this.showModal = false
+          this.clearModalPreviousPage()
         }
 
         if (recordPageID !== oldRecordPageID) {
@@ -124,15 +127,22 @@ export default {
     ...mapActions({
       setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
       clearRecordIDs: 'ui/clearRecordIDs',
+      pushModalPreviousPage: 'ui/pushModalPreviousPage',
+      clearModalPreviousPage: 'ui/clearModalPreviousPage',
     }),
 
-    loadRecord ({ recordID, recordPageID, values, refRecord }) {
+    loadRecord ({ recordID, recordPageID, values, refRecord, pushModalPreviousPage = true }) {
       this.recordID = recordID
       this.values = values
       this.refRecord = refRecord
 
       this.loadModal({ recordID, recordPageID })
 
+      // Push the previous modal view page to the modal route history stack on the store so we can go back to it
+      if (pushModalPreviousPage) {
+        this.pushModalPreviousPage({ recordID, recordPageID })
+      }
+
       setTimeout(() => {
         this.$router.push({
           query: {
@@ -190,6 +200,7 @@ export default {
       this.page = undefined
       this.values = undefined
       this.refRecord = undefined
+      this.clearModalPreviousPage()
     },
 
     destroyEvents () {

client/web/compose/src/store/ui.js

@@ -13,6 +13,10 @@ const types = {
   popPreviousPages: 'popPreviousPages',
   previousPage: 'previousPage',
   setPreviousPage: 'setPreviousPage',
+  modalPreviousPages: 'modalPreviousPages',
+  pushModalPreviousPage: 'pushModalPreviousPage',
+  clearModalPreviousPage: 'clearModalPreviousPage',
+  popModalPreviousPage: 'popModalPreviousPage',
 }
 
 export default function (ComposeAPI) {
@@ -27,6 +31,7 @@ export default function (ComposeAPI) {
 
       previousPages: [],
       previousPage: null,
+      modalPreviousPages: [],
     },
 
     getters: {
@@ -47,6 +52,8 @@ export default function (ComposeAPI) {
 
         return { prev, next }
       },
+
+      modalPreviousPages: (state) => state.modalPreviousPages,
     },
 
     actions: {
@@ -103,6 +110,20 @@ export default function (ComposeAPI) {
           commit(types.setPreviousPage, value)
         }
       },
+
+      pushModalPreviousPage ({ commit }, value) {
+        commit(types.pushModalPreviousPage, value)
+      },
+
+      clearModalPreviousPage ({ commit }) {
+        commit(types.clearModalPreviousPage)
+      },
+
+      popModalPreviousPage ({ commit, state }) {
+        const previousPage = state.modalPreviousPages[state.modalPreviousPages.length - 2] || {}
+        commit(types.popModalPreviousPage)
+        return new Promise((resolve) => resolve(previousPage))
+      },
     },
 
     mutations: {
@@ -149,6 +170,18 @@ export default function (ComposeAPI) {
       [types.setPreviousPage] (state, value) {
         state.previousPage = value
       },
+
+      [types.pushModalPreviousPage] (state, value) {
+        state.modalPreviousPages.push(value)
+      },
+
+      [types.clearModalPreviousPage] (state) {
+        state.modalPreviousPages = []
+      },
+
+      [types.popModalPreviousPage] (state) {
+        state.modalPreviousPages.pop()
+      },
     },
   }
 }

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -56,7 +56,7 @@
         :hide-clone="!layoutButtons.has('clone')"
         :hide-edit="!layoutButtons.has('edit')"
         :hide-submit="!layoutButtons.has('submit')"
-        :has-back="previousPages.length > 0"
+        :has-back="viewHasBack"
         @add="handleAdd()"
         @clone="handleClone()"
         @edit="handleEdit()"
@@ -203,6 +203,7 @@ export default {
       getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
       getPageLayouts: 'pageLayout/getByPageID',
       previousPages: 'ui/previousPages',
+      modalPreviousPages: 'ui/modalPreviousPages',
     }),
 
     portalTopbarTitle () {
@@ -274,6 +275,14 @@ export default {
       const { recordID } = this.record || {}
       return this.getNextAndPrevRecord(recordID)
     },
+
+    viewHasBack () {
+      if (this.showRecordModal) {
+        return this.modalPreviousPages.length > 1
+      }
+
+      return this.previousPages.length > 0
+    },
   },
 
   watch: {
@@ -327,6 +336,7 @@ export default {
     ...mapActions({
       popPreviousPages: 'ui/popPreviousPages',
       clearRecordSet: 'record/clearSet',
+      popModalPreviousPage: 'ui/popModalPreviousPage',
     }),
 
     async loadRecord (recordID = this.recordID) {
@@ -381,7 +391,10 @@ export default {
        * came from (and "where" is back).
       */
       if (this.showRecordModal) {
-        this.$bvModal.hide('record-modal')
+        this.popModalPreviousPage().then(({ recordID, recordPageID }) => {
+          this.$emit('on-modal-back', { recordID, recordPageID, pushModalPreviousPage: false })
+        })
+
         return
       }