From 7898e93ddea8e82650d00a3424a19721f84d9d69 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 30 Aug 2021 19:18:17 +0530
Subject: [PATCH] feat: Add prev and next icon in expanded form

re #501

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/expandedForm.vue     | 17 ++++++++++++++++-
 .../project/spreadsheet/rowsXcDataTable.vue     | 13 ++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
index d313cd31fd..383e1e8892 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
@@ -12,7 +12,8 @@
           </template>
           <template v-else>
             {{ table }}
-          </template> : {{ localState[primaryValueColumn] }}
+          </template>
+          : {{ localState[primaryValueColumn] }}
         </h5>
         <v-spacer />
         <v-btn small text @click="reload">
@@ -65,6 +66,16 @@
         <v-container fluid style="height:70vh" class="py-0">
           <v-row class="h-100">
             <v-col class="h-100 px-10" style="overflow-y: auto" cols="8" :offset="isNew || !toggleDrawer ? 2 : 0">
+              <div v-if="showNextPrev" class="d-flex my-4">
+                <x-icon tooltip="Previous record" small outlined @click="$emit('prev', localState)">
+                  mdi-arrow-left-bold-outline
+                </x-icon>
+                <span class="flex-grow-1" />
+                <x-icon tooltip="Next record" small outlined @click="$emit('next', localState)">
+                  mdi-arrow-right-bold-outline
+                </x-icon>
+              </div>
+
               <template
                 v-for="(col,i) in fields"
               >
@@ -266,6 +277,10 @@ export default {
   components: { VirtualHeaderCell, VirtualCell, EditableCell, HeaderCell },
   mixins: [colors],
   props: {
+    showNextPrev: {
+      type: Boolean,
+      default: false
+    },
     breadcrumbs: {
       type: Array,
       default() {
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 6f0328de2c..671032d3bf 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -463,10 +463,13 @@
         :available-columns="availableColumns"
         :nodes="nodes"
         :query-params="queryParams"
+        :show-next-prev="true"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (data[selectedExpandRowIndex] && data[selectedExpandRowIndex].rowMeta && delete data[selectedExpandRowIndex].rowMeta.new) ; loadTableData()"
         @commented="reloadComments"
         @loadTableData="loadTableData"
+        @next="loadNext"
+        @prev="loadPrev"
       />
     </v-dialog>
 
@@ -642,6 +645,12 @@ export default {
     ...mapActions({
       loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode'
     }),
+    loadNext() {
+      this.selectedExpandRowIndex = ++this.selectedExpandRowIndex % this.data.length
+    },
+    loadPrev() {
+      this.selectedExpandRowIndex = --this.selectedExpandRowIndex === -1 ? this.data.length - 1 : this.selectedExpandRowIndex
+    },
     checkAndDeleteTable() {
       if (
         !this.meta || (
@@ -992,7 +1001,9 @@ export default {
       this.loadingData = false
     },
     showRowContextMenu(e, row, rowMeta, index, colIndex, col) {
-      if (!this._isUIAllowed('table-grid-context-menu')) { return }
+      if (!this._isUIAllowed('table-grid-context-menu')) {
+        return
+      }
       e.preventDefault()
       this.rowContextMenu = false
       this.$nextTick(() => {