From 8e9eac0e6e436342888af2bd525623353d7da496 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:54:39 +0530
Subject: [PATCH] refactor(gui): limit max height of sort list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/SortListMenu.vue       | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index eaddd9d7ec..1bab0ce817 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nextTick } from '@vue/runtime-core'
 import type { ColumnType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -22,7 +23,17 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 
-const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+const { sorts, saveOrUpdate, loadSorts, addSort:_addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+
+const removeIcon = ref<HTMLElement>()
+
+const addSort = () => {
+  _addSort()
+  nextTick(() => {
+    console.log(removeIcon.value)
+    removeIcon.value?.[removeIcon.value?.length - 1]?.$el?.scrollIntoView()
+  })
+}
 
 eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.SORT_RELOAD) {
@@ -30,6 +41,7 @@ eventBus.on((event) => {
   }
 })
 
+
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
@@ -56,6 +68,8 @@ watch(
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
+
+
 </script>
 
 <template>
@@ -78,9 +92,9 @@ useMenuCloseOnEsc(open)
         class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border"
         data-testid="nc-sorts-menu"
       >
-        <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
+        <div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
-            <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+            <MdiCloseBox ref="removeIcon" class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
@@ -92,6 +106,7 @@ useMenuCloseOnEsc(open)
             />
 
             <a-select
+              ref=""
               v-model:value="sort.direction"
               class="shrink grow-0 nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"