Improve record toolbar back button

2023-04-20 15:47:14 +02:00
parent d1b0621424
commit b9f40c6009
11 changed files with 103 additions and 13 deletions
@@ -14,7 +14,6 @@
    <b-tabs
      v-if="modal"
      v-model="currentTabIndex"
-      active-nav-item-class="bg-grey"
      nav-wrapper-class="bg-white border-bottom"
      card
    >
@@ -12,7 +12,6 @@
    @change="$emit('change', $event)"
  >
    <b-tabs
-      active-nav-item-class="bg-grey"
      nav-wrapper-class="bg-white border-bottom"
      active-tab-class="tab-content h-auto overflow-auto"
      card
@@ -16,15 +16,16 @@
          v-if="!(hideBack || settings.hideBack)"
          data-test-id="button-back"
          variant="link"
-          class="text-dark back"
          :disabled="processing"
+          class="text-dark back"
          @click.prevent="$emit('back')"
        >
          <font-awesome-icon
-            :icon="['fas', showRecordModal ? 'times' : 'chevron-left']"
+
+            :icon="['fas', showRecordModal && !inEditing ? 'times' : 'chevron-left']"
            class="back-icon"
          />
-          {{ showRecordModal ? $t('label.close') : labels.back || $t('label.back') }}
+          {{ backLabel }}
        </b-button>

        <slot name="start-actions" />
@@ -266,6 +267,11 @@ export default {
      required: false,
      default: () => ({}),
    },
+
+    hasBack: {
+      type: Boolean,
+      default: true,
+    },
  },

  computed: {
@@ -306,6 +312,16 @@ export default {

      return this.isDeleted && this.record.canUndeleteRecord && !this.processing && this.record.recordID !== NoID
    },
+
+    backLabel () {
+      if (this.inEditing) {
+        return this.$t('label.cancel')
+      } else if (this.showRecordModal) {
+        return this.$t('label.close')
+      }
+
+      return this.hasBack ? this.labels.back || this.$t('label.back') : this.$t('label.home')
+    },
  },

  methods: {
@@ -1,7 +1,6 @@
 <template>
  <b-tabs
    data-test-id="page-block-configurator"
-    active-nav-item-class="bg-grey"
    nav-wrapper-class="bg-white border-bottom"
    card
    lazy
@@ -5,7 +5,7 @@
    scrollable
    dialog-class="h-100 mw-90"
    content-class="position-initial"
-    body-class="p-0"
+    body-class="p-0 bg-gray"
    footer-class="p-0"
    size="xl"
    @hidden="hideModal"
@@ -7,6 +7,10 @@ const types = {
  clearRecordPagination: 'clearRecordPagination',
  recordPaginationUsable: 'recordPaginationUsable',
  setRecordPaginationUsable: 'setRecordPaginationUsable',
+  previousPages: 'previousPages',
+  setPreviousPages: 'setPreviousPages',
+  pushPreviousPages: 'pushPreviousPages',
+  popPreviousPages: 'popPreviousPages',
 }

 export default function (ComposeAPI) {
@@ -18,6 +22,8 @@ export default function (ComposeAPI) {
      pending: false,
      recordPaginationIDs: [],
      recordPaginationUsable: false,
+
+      previousPages: [],
    },

    getters: {
@@ -27,6 +33,8 @@ export default function (ComposeAPI) {

      recordPaginationUsable: (state) => state.recordPaginationUsable,

+      previousPages: (state) => state.previousPages,
+
      getNextAndPrevRecord: ({ recordPaginationIDs }) => (recordID) => {
        const recordIndex = recordPaginationIDs.indexOf(recordID)
        const prev = recordIndex >= 0 ? recordPaginationIDs[recordIndex - 1] : undefined
@@ -62,6 +70,20 @@ export default function (ComposeAPI) {
      setRecordPaginationUsable ({ commit }, value) {
        commit(types.recordPaginationUsable, value)
      },
+
+      setPreviousPages ({ commit }, value) {
+        commit(types.setPreviousPages, value)
+      },
+
+      pushPreviousPages ({ commit }, value) {
+        commit(types.pushPreviousPages, value)
+      },
+
+      popPreviousPages ({ commit, state }) {
+        const previousPage = state.previousPages.slice(-1)[0]
+        commit(types.popPreviousPages)
+        return new Promise((resolve) => resolve(previousPage))
+      },
    },

    mutations: {
@@ -92,6 +114,18 @@ export default function (ComposeAPI) {
      [types.recordPaginationUsable] (state, value) {
        state.recordPaginationUsable = value
      },
+
+      [types.setPreviousPages] (state, value) {
+        state.previousPages = value
+      },
+
+      [types.pushPreviousPages] (state, value) {
+        state.previousPages.push(value)
+      },
+
+      [types.popPreviousPages] (state) {
+        return state.previousPages.pop()
+      },
    },
  }
 }
@@ -1,4 +1,8 @@
 /* stylelint-disable no-descending-specificity */
+.bg-gray {
+  background-color: $gray-200;
+}
+
 html {
  height: 100vh;
  width: 100vw;
@@ -1,6 +1,7 @@
 <template>
  <div
    class="d-flex flex-column flex-grow-1 w-100 h-100 overflow-auto"
+    style="overflow-x: hidden !important;"
  >
    <b-alert
      v-if="isDeleted"
@@ -54,6 +55,7 @@
        :hide-clone="!layoutButtons.has('clone')"
        :hide-edit="!layoutButtons.has('edit')"
        :hide-submit="!layoutButtons.has('submit')"
+        :has-back="previousPages.length > 0"
        @add="handleAdd()"
        @clone="handleClone()"
        @edit="handleEdit()"
@@ -106,7 +108,7 @@
 </template>

 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import Grid from 'corteza-webapp-compose/src/components/Public/Page/Grid'
 import RecordToolbar from 'corteza-webapp-compose/src/components/Common/RecordToolbar'
 import record from 'corteza-webapp-compose/src/mixins/record'
@@ -175,6 +177,7 @@ export default {
    ...mapGetters({
      getNextAndPrevRecord: 'ui/getNextAndPrevRecord',
      getPageLayouts: 'pageLayout/getByPageID',
+      previousPages: 'ui/previousPages',
    }),

    portalTopbarTitle () {
@@ -269,6 +272,10 @@ export default {
  },

  methods: {
+    ...mapActions({
+      popPreviousPages: 'ui/popPreviousPages',
+    }),
+
    async loadRecord () {
      this.record = undefined

@@ -296,17 +303,25 @@ export default {
      }
    },

-    handleBack () {
+    async handleBack () {
      /**
       * Not the best way since we can not always know where we
       * came from (and "were" is back).
       */
      if (this.showRecordModal) {
+        if (!this.inEditing || this.inCreating) {
+          this.$bvModal.hide('record-modal')
+        }
        this.inEditing = false
        this.inCreating = false
-        this.$bvModal.hide('record-modal')
      } else {
-        this.$router.back()
+        const previousPage = await this.popPreviousPages()
+        const extraPop = !this.inCreating
+        this.$router.push(previousPage || { name: 'pages', params: { slug: this.namespace.slug || this.namespace.namespaceID } })
+        // Pop an additional time so that the route we went back to isn't added to previousPages
+        if (extraPop) {
+          this.popPreviousPages()
+        }
      }
    },

@@ -350,6 +365,7 @@ export default {
        this.$router.push({
          params: { ...this.$route.params, recordID },
        })
+        this.popPreviousPages()
      }
    },

@@ -202,11 +202,34 @@ export default {
    this.$root.$off('refetch-records')
  },

+  beforeRouteLeave (to, from, next) {
+    this.setPreviousPages([])
+    next()
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    const { recordID: toRecordID } = to.params
+    const { recordID: fromRecordID } = from.params
+
+    // Update either if coming from a record page and going to another record page and if the record isn't yet in previous pages to (avoid loop)
+    const fromToRecordPage = fromRecordID && toRecordID !== fromRecordID
+    // or if going from normal to record page
+    const fromNormalToRecordPage = from.name === 'page' && to.name !== 'page'
+
+    if (fromNormalToRecordPage || fromToRecordPage) {
+      this.pushPreviousPages(from)
+    }
+
+    next()
+  },
+
  methods: {
    ...mapActions({
      updatePageSet: 'page/updateSet',
      setRecordPaginationUsable: 'ui/setRecordPaginationUsable',
      clearRecordIDs: 'ui/clearRecordIDs',
+      setPreviousPages: 'ui/setPreviousPages',
+      pushPreviousPages: 'ui/pushPreviousPages',
    }),

    evaluateLayoutExpressions () {
@@ -153,7 +153,6 @@
    >
      <b-tabs
        v-if="currentBlock"
-        active-nav-item-class="bg-grey"
        nav-wrapper-class="bg-white border-bottom"
        active-tab-class="tab-content h-auto overflow-auto"
        card
@@ -212,7 +211,7 @@
              {{ name || kind }}
              <font-awesome-icon
                :icon="['fas', 'bars']"
-                class="grab text-grey"
+                class="grab"
              />
            </template>

@@ -34,6 +34,7 @@ label:
  general: General
  handle: Handle
  here: here
+  home: Home
  import: Import
  importPlaceholder: Upload files to import
  loading: Loading