feat: Add prev and next icon in expanded form

re #501

Signed-off-by: Pranav C <pranavxc@gmail.com>

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() {

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(() => {