From 0d6765a7574c1dbdbcb59dc493453785f66538a5 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 6 Jan 2024 23:06:29 +0800
Subject: [PATCH] perf: scroll to bottom when append item in new key dialog

---
 frontend/src/components/dialogs/NewKeyDialog.vue  | 15 +++++++++++++--
 frontend/src/components/dialogs/SetTtlDialog.vue  |  2 +-
 .../src/components/new_value/NewHashValue.vue     | 12 ++++++++++--
 .../src/components/new_value/NewListValue.vue     | 12 ++++++++++--
 frontend/src/components/new_value/NewSetValue.vue | 12 ++++++++++--
 .../src/components/new_value/NewStreamValue.vue   | 12 ++++++++++--
 .../src/components/new_value/NewZSetValue.vue     | 12 ++++++++++--
 7 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index cce9a9c..0c9af43 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -64,6 +64,7 @@ const defaultValue = {
 }
 
 const dialogStore = useDialog()
+const scrollRef = ref(null)
 watchEffect(() => {
     if (dialogStore.newKeyDialogVisible) {
         const { prefix, server, db } = dialogStore.newKeyParam
@@ -106,6 +107,12 @@ const renderTypeLabel = (option) => {
     )
 }
 
+const onAppend = () => {
+    nextTick(() => {
+        scrollRef.value?.scrollTo({ position: 'bottom' })
+    })
+}
+
 const onChangeType = () => {
     newForm.value = null
 }
@@ -181,7 +188,7 @@ const onClose = () => {
         transform-origin="center"
         @positive-click="onAdd"
         @negative-click="onClose">
-        <n-scrollbar style="max-height: 500px">
+        <n-scrollbar ref="scrollRef" style="max-height: 500px">
             <n-form
                 ref="newFormRef"
                 :model="newForm"
@@ -219,7 +226,11 @@ const onClose = () => {
                         </n-button>
                     </n-input-group>
                 </n-form-item>
-                <component :is="newValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />
+                <component
+                    :is="newValueComponent[newForm.type]"
+                    ref="subFormRef"
+                    v-model:value="newForm.value"
+                    @append="onAppend" />
                 <!--  TODO: Add import from txt file option -->
             </n-form>
         </n-scrollbar>
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index b5be274..10a71aa 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import useBrowserStore from 'stores/browser.js'
 import { useI18n } from 'vue-i18n'
-import { isEmpty, size } from 'lodash'
+import { isEmpty } from 'lodash'
 import TtlInput from '@/components/common/TtlInput.vue'
 
 const ttlForm = reactive({
diff --git a/frontend/src/components/new_value/NewHashValue.vue b/frontend/src/components/new_value/NewHashValue.vue
index 60aec84..5b4b245 100644
--- a/frontend/src/components/new_value/NewHashValue.vue
+++ b/frontend/src/components/new_value/NewHashValue.vue
@@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
 const props = defineProps({
     value: Array,
 })
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'append'])
 
 /**
  * @typedef Hash
@@ -46,7 +46,15 @@ defineExpose({
             @update:value="onUpdate">
             <template #action="{ index, create, remove, move }">
                 <icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
-                <icon-button :icon="Add" size="18" @click="() => create(index)" />
+                <icon-button
+                    :icon="Add"
+                    size="18"
+                    @click="
+                        () => {
+                            create(index)
+                            emit('append')
+                        }
+                    " />
             </template>
         </n-dynamic-input>
     </n-form-item>
diff --git a/frontend/src/components/new_value/NewListValue.vue b/frontend/src/components/new_value/NewListValue.vue
index a22c8b0..94e7481 100644
--- a/frontend/src/components/new_value/NewListValue.vue
+++ b/frontend/src/components/new_value/NewListValue.vue
@@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
 const props = defineProps({
     value: Array,
 })
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'append'])
 
 const list = ref([''])
 const onUpdate = (val) => {
@@ -28,7 +28,15 @@ defineExpose({
         <n-dynamic-input v-model:value="list" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
             <template #action="{ index, create, remove, move }">
                 <icon-button v-if="list.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
-                <icon-button :icon="Add" size="18" @click="() => create(index)" />
+                <icon-button
+                    :icon="Add"
+                    size="18"
+                    @click="
+                        () => {
+                            create(index)
+                            emit('append')
+                        }
+                    " />
             </template>
         </n-dynamic-input>
     </n-form-item>
diff --git a/frontend/src/components/new_value/NewSetValue.vue b/frontend/src/components/new_value/NewSetValue.vue
index c566f52..4e03ac1 100644
--- a/frontend/src/components/new_value/NewSetValue.vue
+++ b/frontend/src/components/new_value/NewSetValue.vue
@@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
 const props = defineProps({
     value: Array,
 })
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'append'])
 
 const set = ref([''])
 const onUpdate = (val) => {
@@ -28,7 +28,15 @@ defineExpose({
         <n-dynamic-input v-model:value="set" :placeholder="$t('dialogue.field.enter_elem')" @update:value="onUpdate">
             <template #action="{ index, create, remove, move }">
                 <icon-button v-if="set.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
-                <icon-button :icon="Add" size="18" @click="() => create(index)" />
+                <icon-button
+                    :icon="Add"
+                    size="18"
+                    @click="
+                        () => {
+                            create(index)
+                            emit('append')
+                        }
+                    " />
             </template>
         </n-dynamic-input>
     </n-form-item>
diff --git a/frontend/src/components/new_value/NewStreamValue.vue b/frontend/src/components/new_value/NewStreamValue.vue
index 4888a8f..1f3ad93 100644
--- a/frontend/src/components/new_value/NewStreamValue.vue
+++ b/frontend/src/components/new_value/NewStreamValue.vue
@@ -12,7 +12,7 @@ defineOptions({
     inheritAttrs: false,
 })
 const id = ref('*')
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'append'])
 
 /**
  * @typedef Hash
@@ -52,7 +52,15 @@ defineExpose({
             @update:value="onUpdate">
             <template #action="{ index, create, remove, move }">
                 <icon-button v-if="kvList.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
-                <icon-button :icon="Add" size="18" @click="() => create(index)" />
+                <icon-button
+                    :icon="Add"
+                    size="18"
+                    @click="
+                        () => {
+                            create(index)
+                            emit('append')
+                        }
+                    " />
             </template>
         </n-dynamic-input>
     </n-form-item>
diff --git a/frontend/src/components/new_value/NewZSetValue.vue b/frontend/src/components/new_value/NewZSetValue.vue
index 99326ee..9028cc7 100644
--- a/frontend/src/components/new_value/NewZSetValue.vue
+++ b/frontend/src/components/new_value/NewZSetValue.vue
@@ -8,7 +8,7 @@ import IconButton from '@/components/common/IconButton.vue'
 const props = defineProps({
     value: Array,
 })
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'append'])
 
 /**
  * @typedef ZSetItem
@@ -57,7 +57,15 @@ defineExpose({
             </template>
             <template #action="{ index, create, remove, move }">
                 <icon-button v-if="zset.length > 1" :icon="Delete" size="18" @click="() => remove(index)" />
-                <icon-button :icon="Add" size="18" @click="() => create(index)" />
+                <icon-button
+                    :icon="Add"
+                    size="18"
+                    @click="
+                        () => {
+                            create(index)
+                            emit('append')
+                        }
+                    " />
             </template>
         </n-dynamic-input>
     </n-form-item>