zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate transaction tag list page to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-11 23:09:03 +08:00
parent 6cb045453a
commit eb2b6d1002
6 changed files with 534 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/ConfirmDialog.vue
+18 -8
View File
@@ -19,7 +19,7 @@ import { ref, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { isString } from '@/lib/common.ts';
import { isString, isObject } from '@/lib/common.ts';
const props = defineProps<{
show?: boolean
@@ -42,16 +42,26 @@ const finalColor = ref<string>(props.color || 'primary');
let resolveFunc: ((value?: unknown) => void) | null = null;
let rejectFunc: ((reason?: unknown) => void) | null = null;
function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>): Promise<unknown> {
function open(titleOrText: string, textOrOptions?: string | Record<string, unknown>, options?: Record<string, unknown>): Promise<unknown> {
showState.value = true;
if (isString(textOrOptions)) { // second parameter is text
titleContent.value = tt(titleOrText, options);
textContent.value = tt(textOrOptions as string, options);
} else { // second parameter is options
const actualOptions = textOrOptions as Record<string, unknown>;
if (!textOrOptions || isObject(textOrOptions)) { // only one parameter or second parameter is options
titleContent.value = tt('global.app.title');
textContent.value = tt(titleOrText, actualOptions);
if (!textOrOptions) {
textContent.value = tt(titleOrText);
} else {
const actualOptions = textOrOptions as Record<string, unknown>;
textContent.value = tt(titleOrText, actualOptions);
}
} else if (isString(textOrOptions)) { // second parameter is text
if (!options) {
titleContent.value = tt(titleOrText);
textContent.value = tt(textOrOptions as string);
} else {
titleContent.value = tt(titleOrText, options);
textContent.value = tt(textOrOptions as string, options);
}
}
if (options && isString(options.color)) {
src/components/desktop/SnackBar.vue
+7 -2
View File
@@ -24,9 +24,14 @@ const { tt, te } = useI18n();
const showState= ref<boolean>(false);
const messageContent = ref<string>('');
function showMessage(message: string, options: Record<string, unknown>): void {
function showMessage(message: string, options?: Record<string, unknown>): void {
showState.value = true;
messageContent.value = tt(message, options);
if (options) {
messageContent.value = tt(message, options);
} else {
messageContent.value = tt(message);
}
}
function showError(error: string | { message: string }): void {
src/lib/tag.js → src/lib/tag.ts
+6 -4
View File
@@ -1,4 +1,6 @@
export function isNoAvailableTag(tags, showHidden) {
import { TransactionTag } from '@/models/transaction_tag.ts';
export function isNoAvailableTag(tags: TransactionTag[], showHidden: boolean): boolean {
for (let i = 0; i < tags.length; i++) {
if (showHidden || !tags[i].hidden) {
return false;
@@ -8,7 +10,7 @@ export function isNoAvailableTag(tags, showHidden) {
return true;
}
export function getAvailableTagCount(tags, showHidden) {
export function getAvailableTagCount(tags: TransactionTag[], showHidden: boolean): number {
let count = 0;
for (let i = 0; i < tags.length; i++) {
@@ -20,7 +22,7 @@ export function getAvailableTagCount(tags, showHidden) {
return count;
}
export function getFirstShowingId(tags, showHidden) {
export function getFirstShowingId(tags: TransactionTag[], showHidden: boolean): string | null {
for (let i = 0; i < tags.length; i++) {
if (showHidden || !tags[i].hidden) {
return tags[i].id;
@@ -30,7 +32,7 @@ export function getFirstShowingId(tags, showHidden) {
return null;
}
export function getLastShowingId(tags, showHidden) {
export function getLastShowingId(tags: TransactionTag[], showHidden: boolean): string | null {
for (let i = tags.length - 1; i >= 0; i--) {
if (showHidden || !tags[i].hidden) {
return tags[i].id;
src/lib/ui/mobile.ts
+19 -1
View File
@@ -1,3 +1,4 @@
import { type Ref, watch } from 'vue';
import { useI18n as useVueI18n } from 'vue-i18n';
import { f7, f7ready } from 'framework7-vue';
import type { Dialog, Picker, Router } from 'framework7/types';
@@ -211,9 +212,26 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
export function useI18nUIComponents() {
const i18nGlobal = useVueI18n();
function routeBackOnError<T>(f7router: Router.Router, errorRef: Ref<T>): void {
const unwatch = watch(errorRef, (newValue) => {
if (newValue) {
setTimeout(() => {
if (unwatch) {
unwatch();
}
f7router.back();
}, 200);
}
}, {
immediate: true
});
}
return {
showAlert: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, i18nGlobal.t),
showConfirm: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: (dialog: Dialog.Dialog, e: Event) => void): void => showConfirm(message, confirmCallback, cancelCallback, i18nGlobal.t),
showToast: (message: string, timeout?: number): void => showToast(message, timeout, i18nGlobal.t)
showToast: (message: string, timeout?: number): void => showToast(message, timeout, i18nGlobal.t),
routeBackOnError
}
}
src/views/desktop/tags/ListPage.vue
+230 -236
View File
@@ -4,12 +4,12 @@
<v-card>
<template #title>
<div class="title-and-toolbar d-flex align-center">
<span>{{ $t('Transaction Tags') }}</span>
<span>{{ tt('Transaction Tags') }}</span>
<v-btn class="ml-3" color="default" variant="outlined"
:disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
:disabled="loading || updating || hasEditingTag" @click="add">{{ tt('Add') }}</v-btn>
<v-btn class="ml-3" color="primary" variant="tonal"
:disabled="loading || updating || hasEditingTag" @click="saveSortResult"
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
<v-btn density="compact" color="default" variant="text" size="24"
class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag"
:loading="loading" @click="reload">
@@ -17,7 +17,7 @@
<v-progress-circular indeterminate size="20"/>
</template>
<v-icon :icon="icons.refresh" size="24" />
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
<v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
</v-btn>
<v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
@@ -26,10 +26,10 @@
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="icons.show"
:title="$t('Show Hidden Transaction Tags')"
:title="tt('Show Hidden Transaction Tags')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="icons.hide"
:title="$t('Hide Hidden Transaction Tags')"
:title="tt('Hide Hidden Transaction Tags')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
@@ -42,9 +42,9 @@
<tr>
<th>
<div class="d-flex align-center">
<span>{{ $t('Tag Title') }}</span>
<span>{{ tt('Tag Title') }}</span>
<v-spacer/>
<span>{{ $t('Operation') }}</span>
<span>{{ tt('Operation') }}</span>
</div>
</th>
</tr>
@@ -60,7 +60,7 @@
<tbody v-if="!loading && noAvailableTag && !newTag">
<tr>
<td>{{ $t('No available tag') }}</td>
<td>{{ tt('No available tag') }}</td>
</tr>
</tbody>
@@ -89,7 +89,7 @@
<v-text-field class="w-100 mr-2" type="text"
density="compact" variant="underlined"
:disabled="loading || updating"
:placeholder="$t('Tag Title')"
:placeholder="tt('Tag Title')"
v-model="editingTag.name"
v-else-if="editingTag.id === element.id"
@keyup.enter="save(editingTag)"
@@ -117,7 +117,7 @@
<template #loader>
<v-progress-circular indeterminate size="20" width="2"/>
</template>
{{ element.hidden ? $t('Show') : $t('Hide') }}
{{ element.hidden ? tt('Show') : tt('Hide') }}
</v-btn>
<v-btn class="px-2" color="default"
density="comfortable" variant="text"
@@ -130,7 +130,7 @@
<template #loader>
<v-progress-circular indeterminate size="20" width="2"/>
</template>
{{ $t('Edit') }}
{{ tt('Edit') }}
</v-btn>
<v-btn class="px-2" color="default"
density="comfortable" variant="text"
@@ -143,7 +143,7 @@
<template #loader>
<v-progress-circular indeterminate size="20" width="2"/>
</template>
{{ $t('Delete') }}
{{ tt('Delete') }}
</v-btn>
<v-btn class="px-2"
density="comfortable" variant="text"
@@ -154,19 +154,19 @@
<template #loader>
<v-progress-circular indeterminate size="20" width="2"/>
</template>
{{ $t('Save') }}
{{ tt('Save') }}
</v-btn>
<v-btn class="px-2" color="default"
density="comfortable" variant="text"
:prepend-icon="icons.cancel"
:disabled="loading || updating"
v-if="editingTag.id === element.id" @click="cancelSave(editingTag)">
{{ $t('Cancel') }}
{{ tt('Cancel') }}
</v-btn>
<span class="ml-2">
<v-icon :class="!loading && !updating && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
<v-icon :class="!loading && !updating && !hasEditingTag && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
:icon="icons.drag"/>
<v-tooltip activator="parent" v-if="!loading && !updating && availableTagCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
<v-tooltip activator="parent" v-if="!loading && !updating && !hasEditingTag && availableTagCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
</span>
</div>
</td>
@@ -175,12 +175,12 @@
</draggable-list>
<tbody v-if="newTag">
<tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
<tr class="text-sm" :class="{ 'even-row': (availableTagCount & 1) === 1}">
<td>
<div class="d-flex align-center">
<v-text-field class="w-100 mr-2" type="text" color="primary"
density="compact" variant="underlined"
:disabled="loading || updating" :placeholder="$t('Tag Title')"
:disabled="loading || updating" :placeholder="tt('Tag Title')"
v-model="newTag.name" @keyup.enter="save(newTag)">
<template #prepend>
<v-icon size="20" start :icon="icons.tag"/>
@@ -191,20 +191,20 @@
<v-btn class="px-2" density="comfortable" variant="text"
:prepend-icon="icons.confirm"
:loading="tagUpdating[null]"
:loading="tagUpdating['']"
:disabled="loading || updating || !isTagModified(newTag)"
@click="save(newTag)">
<template #loader>
<v-progress-circular indeterminate size="20" width="2"/>
</template>
{{ $t('Save') }}
{{ tt('Save') }}
</v-btn>
<v-btn class="px-2" color="default"
density="comfortable" variant="text"
:prepend-icon="icons.cancel"
:disabled="loading || updating"
@click="cancelSave(newTag)">
{{ $t('Cancel') }}
{{ tt('Cancel') }}
</v-btn>
<span class="ml-2">
<v-icon class="disabled" :icon="icons.drag"/>
@@ -222,8 +222,14 @@
<snack-bar ref="snackbar" />
</template>
<script>
import { mapStores } from 'pinia';
<script setup lang="ts">
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, computed, useTemplateRef } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
import { TransactionTag } from '@/models/transaction_tag.ts';
@@ -231,7 +237,7 @@ import { TransactionTag } from '@/models/transaction_tag.ts';
import {
isNoAvailableTag,
getAvailableTagCount
} from '@/lib/tag.js';
} from '@/lib/tag.ts';
import {
mdiRefresh,
@@ -247,226 +253,214 @@ import {
mdiPound
} from '@mdi/js';
export default {
data() {
return {
newTag: null,
editingTag: TransactionTag.createNewTag(),
loading: true,
updating: false,
tagUpdating: {},
tagHiding: {},
tagRemoving: {},
displayOrderModified: false,
showHidden: false,
icons: {
refresh: mdiRefresh,
add: mdiPlus,
edit: mdiPencilOutline,
confirm: mdiCheck,
cancel: mdiClose,
show: mdiEyeOutline,
hide: mdiEyeOffOutline,
remove: mdiDeleteOutline,
drag: mdiDrag,
more: mdiDotsVertical,
tag: mdiPound
}
};
},
computed: {
...mapStores(useTransactionTagsStore),
tags() {
return this.transactionTagsStore.allTransactionTags;
},
noAvailableTag() {
return isNoAvailableTag(this.tags, this.showHidden);
},
availableTagCount() {
return getAvailableTagCount(this.tags, this.showHidden);
},
hasEditingTag() {
return !!(this.newTag || (this.editingTag.id && this.editingTag.id !== ''));
}
},
created() {
const self = this;
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
type SnackBarType = InstanceType<typeof SnackBar>;
self.loading = true;
const icons = {
refresh: mdiRefresh,
add: mdiPlus,
edit: mdiPencilOutline,
confirm: mdiCheck,
cancel: mdiClose,
show: mdiEyeOutline,
hide: mdiEyeOffOutline,
remove: mdiDeleteOutline,
drag: mdiDrag,
more: mdiDotsVertical,
tag: mdiPound
};
self.transactionTagsStore.loadAllTags({
force: false
}).then(() => {
self.loading = false;
}).catch(error => {
self.loading = false;
const newTag = ref<TransactionTag | null>(null);
const editingTag = ref<TransactionTag>(TransactionTag.createNewTag());
const loading = ref<boolean>(true);
const updating = ref<boolean>(false);
const tagUpdating = ref<Record<string, boolean>>({});
const tagHiding = ref<Record<string, boolean>>({});
const tagRemoving = ref<Record<string, boolean>>({});
const displayOrderModified = ref<boolean>(false);
const showHidden = ref<boolean>(false);
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
methods: {
reload() {
if (this.hasEditingTag) {
return;
}
const { tt } = useI18n();
const self = this;
self.loading = true;
const transactionTagsStore = useTransactionTagsStore();
self.transactionTagsStore.loadAllTags({
force: true
}).then(() => {
self.loading = false;
self.displayOrderModified = false;
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
const snackbar = useTemplateRef<SnackBarType>('snackbar');
self.$refs.snackbar.showMessage('Tag list has been updated');
}).catch(error => {
self.loading = false;
const tags = computed(() => transactionTagsStore.allTransactionTags);
const noAvailableTag = computed(() => isNoAvailableTag(tags.value, showHidden.value));
const availableTagCount = computed(() => getAvailableTagCount(tags.value, showHidden.value));
const hasEditingTag = computed(() => !!(newTag.value || (editingTag.value.id && editingTag.value.id !== '')));
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
onMove(event) {
if (!event || !event.moved) {
return;
}
const self = this;
const moveEvent = event.moved;
if (!moveEvent.element || !moveEvent.element.id) {
self.$refs.snackbar.showMessage('Unable to move tag');
return;
}
self.transactionTagsStore.changeTagDisplayOrder({
tagId: moveEvent.element.id,
from: moveEvent.oldIndex,
to: moveEvent.newIndex
}).then(() => {
self.displayOrderModified = true;
}).catch(error => {
self.$refs.snackbar.showError(error);
});
},
saveSortResult() {
const self = this;
if (!self.displayOrderModified) {
return;
}
self.loading = true;
self.transactionTagsStore.updateTagDisplayOrders().then(() => {
self.loading = false;
self.displayOrderModified = false;
}).catch(error => {
self.loading = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
add() {
this.newTag = TransactionTag.createNewTag();
},
edit(tag) {
this.editingTag.id = tag.id;
this.editingTag.name = tag.name;
},
save(tag) {
const self = this;
self.updating = true;
self.tagUpdating[tag.id || null] = true;
self.transactionTagsStore.saveTag({
tag: tag
}).then(() => {
self.updating = false;
self.tagUpdating[tag.id || null] = false;
if (tag.id) {
self.editingTag.id = '';
self.editingTag.name = '';
} else {
self.newTag = null;
}
}).catch(error => {
self.updating = false;
self.tagUpdating[tag.id || null] = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
cancelSave(tag) {
if (tag.id) {
this.editingTag.id = '';
this.editingTag.name = '';
} else {
this.newTag = null;
}
},
isTagModified(tag) {
if (tag.id) {
return this.editingTag.name !== '' && this.editingTag.name !== tag.name;
} else {
return tag.name !== '';
}
},
hide(tag, hidden) {
const self = this;
self.updating = true;
self.tagHiding[tag.id] = true;
self.transactionTagsStore.hideTag({
tag: tag,
hidden: hidden
}).then(() => {
self.updating = false;
self.tagHiding[tag.id] = false;
}).catch(error => {
self.updating = false;
self.tagHiding[tag.id] = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
remove(tag) {
const self = this;
self.$refs.confirmDialog.open('Are you sure you want to delete this tag?').then(() => {
self.updating = true;
self.tagRemoving[tag.id] = true;
self.transactionTagsStore.deleteTag({
tag: tag
}).then(() => {
self.updating = false;
self.tagRemoving[tag.id] = false;
}).catch(error => {
self.updating = false;
self.tagRemoving[tag.id] = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
});
}
function isTagModified(tag: TransactionTag): boolean {
if (tag.id) {
return editingTag.value.name !== '' && editingTag.value.name !== tag.name;
} else {
return tag.name !== '';
}
}
function reload(): void {
if (hasEditingTag.value) {
return;
}
loading.value = true;
transactionTagsStore.loadAllTags({
force: true
}).then(() => {
loading.value = false;
displayOrderModified.value = false;
snackbar.value?.showMessage('Tag list has been updated');
}).catch(error => {
loading.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
function add(): void {
newTag.value = TransactionTag.createNewTag();
}
function edit(tag: TransactionTag): void {
editingTag.value.id = tag.id;
editingTag.value.name = tag.name;
}
function save(tag: TransactionTag): void {
updating.value = true;
tagUpdating.value[tag.id || ''] = true;
transactionTagsStore.saveTag({
tag: tag
}).then(() => {
updating.value = false;
tagUpdating.value[tag.id || ''] = false;
if (tag.id) {
editingTag.value.id = '';
editingTag.value.name = '';
} else {
newTag.value = null;
}
}).catch(error => {
updating.value = false;
tagUpdating.value[tag.id || ''] = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
function cancelSave(tag: TransactionTag): void {
if (tag.id) {
editingTag.value.id = '';
editingTag.value.name = '';
} else {
newTag.value = null;
}
}
function saveSortResult(): void {
if (!displayOrderModified.value) {
return;
}
loading.value = true;
transactionTagsStore.updateTagDisplayOrders().then(() => {
loading.value = false;
displayOrderModified.value = false;
}).catch(error => {
loading.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
function hide(tag: TransactionTag, hidden: boolean): void {
updating.value = true;
tagHiding.value[tag.id] = true;
transactionTagsStore.hideTag({
tag: tag,
hidden: hidden
}).then(() => {
updating.value = false;
tagHiding.value[tag.id] = false;
}).catch(error => {
updating.value = false;
tagHiding.value[tag.id] = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
function remove(tag: TransactionTag): void {
confirmDialog.value?.open('Are you sure you want to delete this tag?').then(() => {
updating.value = true;
tagRemoving.value[tag.id] = true;
transactionTagsStore.deleteTag({
tag: tag
}).then(() => {
updating.value = false;
tagRemoving.value[tag.id] = false;
}).catch(error => {
updating.value = false;
tagRemoving.value[tag.id] = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
});
}
function onMove(event: { moved: { element: { id: string }; oldIndex: number; newIndex: number } }): void {
if (!event || !event.moved) {
return;
}
const moveEvent = event.moved;
if (!moveEvent.element || !moveEvent.element.id) {
snackbar.value?.showMessage('Unable to move tag');
return;
}
transactionTagsStore.changeTagDisplayOrder({
tagId: moveEvent.element.id,
from: moveEvent.oldIndex,
to: moveEvent.newIndex
}).then(() => {
displayOrderModified.value = true;
}).catch(error => {
snackbar.value?.showError(error);
});
}
transactionTagsStore.loadAllTags({
force: false
}).then(() => {
loading.value = false;
}).catch(error => {
loading.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
</script>
<style>
src/views/mobile/tags/ListPage.vue
+254 -271
View File
@@ -1,12 +1,12 @@
<template>
<f7-page :ptr="!sortable && !hasEditingTag" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
<f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Transaction Tags')"></f7-nav-title>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Transaction Tags')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link :class="{ 'disabled': hasEditingTag || !tags.length }" icon-f7="ellipsis" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
<f7-link :class="{ 'disabled': hasEditingTag }" icon-f7="plus" v-if="!sortable" @click="add"></f7-link>
<f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -24,7 +24,7 @@
</f7-list>
<f7-list strong inset dividers class="tag-item-list margin-top" v-if="!loading && noAvailableTag && !newTag">
<f7-list-item :title="$t('No available tag')"></f7-list-item>
<f7-list-item :title="tt('No available tag')"></f7-list-item>
</f7-list>
<f7-list strong inset dividers sortable class="tag-item-list margin-top"
@@ -52,7 +52,7 @@
</div>
<f7-input class="list-title-input padding-left-half"
type="text"
:placeholder="$t('Tag Title')"
:placeholder="tt('Tag Title')"
v-else-if="editingTag.id === tag.id"
v-model:value="editingTag.name"
@keyup.enter="save(tag)">
@@ -82,7 +82,7 @@
</f7-swipeout-button>
</f7-swipeout-actions>
<f7-swipeout-actions right v-if="!sortable && editingTag.id !== tag.id">
<f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(tag)"></f7-swipeout-button>
<f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(tag)"></f7-swipeout-button>
<f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(tag, false)">
<f7-icon f7="trash"></f7-icon>
</f7-swipeout-button>
@@ -97,7 +97,7 @@
<div class="display-flex">
<f7-input class="list-title-input padding-left-half"
type="text"
:placeholder="$t('Tag Title')"
:placeholder="tt('Tag Title')"
v-model:value="newTag.name"
@keyup.enter="save(newTag)">
</f7-input>
@@ -122,29 +122,34 @@
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Tags') }}</f7-actions-button>
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Tags') }}</f7-actions-button>
<f7-actions-button @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Transaction Tags') }}</f7-actions-button>
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Transaction Tags') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
</f7-actions-group>
</f7-actions>
<f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
<f7-actions-group>
<f7-actions-label>{{ $t('Are you sure you want to delete this tag?') }}</f7-actions-label>
<f7-actions-button color="red" @click="remove(tagToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
<f7-actions-label>{{ tt('Are you sure you want to delete this tag?') }}</f7-actions-label>
<f7-actions-button color="red" @click="remove(tagToDelete, true)">{{ tt('Delete') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
<script>
import { mapStores } from 'pinia';
<script setup lang="ts">
import { ref, computed } from 'vue';
import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
import { TransactionTag } from '@/models/transaction_tag.ts';
@@ -153,269 +158,247 @@ import {
isNoAvailableTag,
getFirstShowingId,
getLastShowingId
} from '@/lib/tag.js';
import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
} from '@/lib/tag.ts';
export default {
props: [
'f7router'
],
data() {
return {
newTag: null,
editingTag: TransactionTag.createNewTag(),
loading: true,
loadingError: null,
showHidden: false,
sortable: false,
tagToDelete: null,
showMoreActionSheet: false,
showDeleteActionSheet: false,
editSaving: false,
displayOrderModified: false,
displayOrderSaving: false
};
},
computed: {
...mapStores(useTransactionTagsStore),
tags() {
return this.transactionTagsStore.allTransactionTags;
},
firstShowingId() {
return getFirstShowingId(this.tags, this.showHidden);
},
lastShowingId() {
return getLastShowingId(this.tags, this.showHidden);
},
noAvailableTag() {
return isNoAvailableTag(this.tags, this.showHidden);
},
hasEditingTag() {
return !!(this.newTag || (this.editingTag.id && this.editingTag.id !== ''));
}
},
created() {
const self = this;
const props = defineProps<{
f7router: Router.Router;
}>();
self.loading = true;
const newTag = ref<TransactionTag | null>(null);
const editingTag = ref<TransactionTag>(TransactionTag.createNewTag());
const loading = ref<boolean>(true);
const loadingError = ref<unknown | null>(null);
const showHidden = ref<boolean>(false);
const sortable = ref<boolean>(false);
const tagToDelete = ref<TransactionTag | null>(null);
const showMoreActionSheet = ref<boolean>(false);
const showDeleteActionSheet = ref<boolean>(false);
const displayOrderModified = ref<boolean>(false);
const displayOrderSaving = ref<boolean>(false);
self.transactionTagsStore.loadAllTags({
force: false
}).then(() => {
self.loading = false;
}).catch(error => {
if (error.processed) {
self.loading = false;
} else {
self.loadingError = error;
self.$toast(error.message || error);
}
});
},
methods: {
onPageAfterIn() {
this.$routeBackOnError(this.f7router, 'loadingError');
},
reload(done) {
if (this.sortable || this.hasEditingTag) {
done();
return;
}
const { tt } = useI18n();
const { showToast, routeBackOnError } = useI18nUIComponents();
const self = this;
const force = !!done;
const transactionTagsStore = useTransactionTagsStore();
self.transactionTagsStore.loadAllTags({
force: force
}).then(() => {
if (done) {
done();
}
const tags = computed(() => transactionTagsStore.allTransactionTags);
const firstShowingId = computed(() => getFirstShowingId(tags.value, showHidden.value));
const lastShowingId = computed(() => getLastShowingId(tags.value, showHidden.value));
const noAvailableTag = computed(() => isNoAvailableTag(tags.value, showHidden.value));
const hasEditingTag = computed(() => !!(newTag.value || (editingTag.value.id && editingTag.value.id !== '')));
if (force) {
self.$toast('Tag list has been updated');
}
}).catch(error => {
if (done) {
done();
}
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
setSortable() {
if (this.sortable || this.hasEditingTag) {
return;
}
this.showHidden = true;
this.sortable = true;
this.displayOrderModified = false;
},
onSort(event) {
const self = this;
if (!event || !event.el || !event.el.id) {
self.$toast('Unable to move tag');
return;
}
const id = self.parseTagIdFromDomId(event.el.id);
if (!id) {
self.$toast('Unable to move tag');
return;
}
self.transactionTagsStore.changeTagDisplayOrder({
tagId: id,
from: event.from,
to: event.to
}).then(() => {
self.displayOrderModified = true;
}).catch(error => {
self.$toast(error.message || error);
});
},
saveSortResult() {
const self = this;
if (!self.displayOrderModified) {
self.showHidden = false;
self.sortable = false;
return;
}
self.displayOrderSaving = true;
self.$showLoading();
self.transactionTagsStore.updateTagDisplayOrders().then(() => {
self.displayOrderSaving = false;
self.$hideLoading();
self.showHidden = false;
self.sortable = false;
self.displayOrderModified = false;
}).catch(error => {
self.displayOrderSaving = false;
self.$hideLoading();
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
add() {
this.newTag = TransactionTag.createNewTag();
},
edit(tag) {
this.editingTag.id = tag.id;
this.editingTag.name = tag.name;
},
save(tag) {
const self = this;
self.$showLoading();
self.transactionTagsStore.saveTag({
tag: tag
}).then(() => {
self.$hideLoading();
if (tag.id) {
self.editingTag.id = '';
self.editingTag.name = '';
} else {
self.newTag = null;
}
}).catch(error => {
self.$hideLoading();
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
cancelSave(tag) {
if (tag.id) {
this.editingTag.id = '';
this.editingTag.name = '';
} else {
this.newTag = null;
}
},
isTagModified(tag) {
if (tag.id) {
return this.editingTag.name !== '' && this.editingTag.name !== tag.name;
} else {
return tag.name !== '';
}
},
hide(tag, hidden) {
const self = this;
self.$showLoading();
self.transactionTagsStore.hideTag({
tag: tag,
hidden: hidden
}).then(() => {
self.$hideLoading();
}).catch(error => {
self.$hideLoading();
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
remove(tag, confirm) {
const self = this;
if (!tag) {
self.$alert('An error occurred');
return;
}
if (!confirm) {
self.tagToDelete = tag;
self.showDeleteActionSheet = true;
return;
}
self.showDeleteActionSheet = false;
self.tagToDelete = null;
self.$showLoading();
self.transactionTagsStore.deleteTag({
tag: tag,
beforeResolve: (done) => {
onSwipeoutDeleted(self.getTagDomId(tag), done);
}
}).then(() => {
self.$hideLoading();
}).catch(error => {
self.$hideLoading();
if (!error.processed) {
self.$toast(error.message || error);
}
});
},
getTagDomId(category) {
return 'tag_' + category.id;
},
parseTagIdFromDomId(domId) {
if (!domId || domId.indexOf('tag_') !== 0) {
return null;
}
return domId.substring(4); // tag_
}
function isTagModified(tag: TransactionTag): boolean {
if (tag.id) {
return editingTag.value.name !== '' && editingTag.value.name !== tag.name;
} else {
return tag.name !== '';
}
}
function getTagDomId(tag: TransactionTag): string {
return 'tag_' + tag.id;
}
function parseTagIdFromDomId(domId: string): string | null {
if (!domId || domId.indexOf('tag_') !== 0) {
return null;
}
return domId.substring(4); // tag_
}
function reload(done?: () => void): void {
if (sortable.value || hasEditingTag.value) {
done?.();
return;
}
const force = !!done;
transactionTagsStore.loadAllTags({
force: force
}).then(() => {
done?.();
if (force) {
showToast('Tag list has been updated');
}
}).catch(error => {
done?.();
if (!error.processed) {
showToast(error.message || error);
}
});
}
function add(): void {
newTag.value = TransactionTag.createNewTag();
}
function edit(tag: TransactionTag): void {
editingTag.value.id = tag.id;
editingTag.value.name = tag.name;
}
function save(tag: TransactionTag): void {
showLoading();
transactionTagsStore.saveTag({
tag: tag
}).then(() => {
hideLoading();
if (tag.id) {
editingTag.value.id = '';
editingTag.value.name = '';
} else {
newTag.value = null;
}
}).catch(error => {
hideLoading();
if (!error.processed) {
showToast(error.message || error);
}
});
}
function cancelSave(tag: TransactionTag): void {
if (tag.id) {
editingTag.value.id = '';
editingTag.value.name = '';
} else {
newTag.value = null;
}
}
function setSortable(): void {
if (sortable.value || hasEditingTag.value) {
return;
}
showHidden.value = true;
sortable.value = true;
displayOrderModified.value = false;
}
function saveSortResult(): void {
if (!displayOrderModified.value) {
showHidden.value = false;
sortable.value = false;
return;
}
displayOrderSaving.value = true;
showLoading();
transactionTagsStore.updateTagDisplayOrders().then(() => {
displayOrderSaving.value = false;
hideLoading();
showHidden.value = false;
sortable.value = false;
displayOrderModified.value = false;
}).catch(error => {
displayOrderSaving.value = false;
hideLoading();
if (!error.processed) {
showToast(error.message || error);
}
});
}
function hide(tag: TransactionTag, hidden: boolean): void {
showLoading();
transactionTagsStore.hideTag({
tag: tag,
hidden: hidden
}).then(() => {
hideLoading();
}).catch(error => {
hideLoading();
if (!error.processed) {
showToast(error.message || error);
}
});
}
function remove(tag: TransactionTag | null, confirm: boolean): void {
if (!tag) {
showToast('An error occurred');
return;
}
if (!confirm) {
tagToDelete.value = tag;
showDeleteActionSheet.value = true;
return;
}
showDeleteActionSheet.value = false;
tagToDelete.value = null;
showLoading();
transactionTagsStore.deleteTag({
tag: tag,
beforeResolve: (done) => {
onSwipeoutDeleted(getTagDomId(tag), done);
}
}).then(() => {
hideLoading();
}).catch(error => {
hideLoading();
if (!error.processed) {
showToast(error.message || error);
}
});
}
function onPageAfterIn(): void {
routeBackOnError(props.f7router, loadingError);
}
function onSort(event: { el: { id: string }, from: number, to: number }): void {
if (!event || !event.el || !event.el.id) {
showToast('Unable to move tag');
return;
}
const id = parseTagIdFromDomId(event.el.id);
if (!id) {
showToast('Unable to move tag');
return;
}
transactionTagsStore.changeTagDisplayOrder({
tagId: id,
from: event.from,
to: event.to
}).then(() => {
displayOrderModified.value = true;
}).catch(error => {
showToast(error.message || error);
});
}
transactionTagsStore.loadAllTags({
force: false
}).then(() => {
loading.value = false;
}).catch(error => {
if (error.processed) {
loading.value = false;
} else {
loadingError.value = error;
showToast(error.message || error);
}
});
</script>
<style>