mirror of
https://github.com/mayswind/ezbookkeeping
synced 2026-04-21 13:37:43 +00:00
scroll page to bottom when creating a new tag
This commit is contained in:
parent
b4c31fc9d0
commit
fe0187ac2c
3 changed files with 31 additions and 8 deletions
|
|
@ -52,7 +52,7 @@ export function useTagListPageBase() {
|
|||
}
|
||||
}
|
||||
|
||||
function add(): void {
|
||||
function createNewTag(): void {
|
||||
newTag.value = TransactionTag.createNewTag('', activeTagGroupId.value);
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ export function useTagListPageBase() {
|
|||
// functions
|
||||
isTagModified,
|
||||
switchTagGroup,
|
||||
add,
|
||||
createNewTag,
|
||||
edit
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@
|
|||
</template>
|
||||
</draggable-list>
|
||||
|
||||
<tbody v-if="newTag">
|
||||
<tbody ref="newTagRow" v-if="newTag">
|
||||
<tr class="text-sm" :class="{ 'even-row': (availableTagCount & 1) === 1}">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
|
|
@ -348,7 +348,7 @@ import RenameDialog from '@/components/desktop/RenameDialog.vue';
|
|||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef, watch } from 'vue';
|
||||
import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
|
||||
import { useDisplay } from 'vuetify';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
|
@ -406,12 +406,13 @@ const {
|
|||
hasEditingTag,
|
||||
isTagModified,
|
||||
switchTagGroup,
|
||||
add,
|
||||
createNewTag,
|
||||
edit
|
||||
} = useTagListPageBase();
|
||||
|
||||
const transactionTagsStore = useTransactionTagsStore();
|
||||
|
||||
const newTagRow = useTemplateRef<HTMLElement>('newTagRow');
|
||||
const tagGroupChangeDisplayOrderDialog = useTemplateRef<TagGroupChangeDisplayOrderDialogType>('tagGroupChangeDisplayOrderDialog');
|
||||
const renameDialog = useTemplateRef<RenameDialogType>('renameDialog');
|
||||
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
|
||||
|
|
@ -461,6 +462,14 @@ function reload(): void {
|
|||
});
|
||||
}
|
||||
|
||||
function add(): void {
|
||||
createNewTag();
|
||||
|
||||
nextTick(() => {
|
||||
newTagRow.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
});
|
||||
}
|
||||
|
||||
function addTagGroup(): void {
|
||||
renameDialog.value?.open('', tt('New Tag Group Name')).then((newName: string) => {
|
||||
updating.value = true;
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
</f7-swipeout-actions>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="editing-list-item" v-if="newTag">
|
||||
<f7-list-item ref="newTagItem" class="editing-list-item" v-if="newTag">
|
||||
<template #media>
|
||||
<f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
|
||||
</template>
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, useTemplateRef, nextTick } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
|
@ -257,12 +257,14 @@ const {
|
|||
hasEditingTag,
|
||||
isTagModified,
|
||||
switchTagGroup,
|
||||
add,
|
||||
createNewTag,
|
||||
edit
|
||||
} = useTagListPageBase();
|
||||
|
||||
const transactionTagsStore = useTransactionTagsStore();
|
||||
|
||||
const newTagItem = useTemplateRef<{ $el: HTMLElement }>('newTagItem');
|
||||
|
||||
const loadingError = ref<unknown | null>(null);
|
||||
const sortable = ref<boolean>(false);
|
||||
const moveToTagGroupId = ref<string | undefined>(undefined);
|
||||
|
|
@ -336,6 +338,18 @@ function reload(done?: () => void): void {
|
|||
});
|
||||
}
|
||||
|
||||
function add(): void {
|
||||
createNewTag();
|
||||
|
||||
nextTick(() => {
|
||||
const el = newTagItem.value?.$el as HTMLElement | undefined;
|
||||
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function save(tag: TransactionTag): void {
|
||||
showLoading();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue