perf: scroll to bottom when append item in new key dialog

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>

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

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>

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>

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>

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>

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>