allow users to set coordinate display type (#141)

This commit is contained in:
MaysWind
2025-05-27 01:01:55 +08:00
parent e338c7190d
commit 626d3895aa
36 changed files with 516 additions and 144 deletions
@@ -92,6 +92,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const defaultAccountId = computed<string>(() => userStore.currentUserDefaultAccountId);
const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
const allTimezones = computed<LocalizedTimezoneInfo[]>(() => getAllTimezones(true));
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
@@ -416,8 +417,9 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
currentTimezoneOffsetMinutes,
showAccountBalance,
defaultCurrency,
firstDayOfWeek,
defaultAccountId,
firstDayOfWeek,
coordinateDisplayType,
allTimezones,
allAccounts,
allVisibleAccounts,
@@ -30,6 +30,7 @@ export function useUserProfilePageBase() {
getAllDigitGroupingSymbols,
getAllDigitGroupingTypes,
getAllCurrencyDisplayTypes,
getAllCoordinateDisplayTypes,
getAllExpenseAmountColors,
getAllIncomeAmountColors,
getAllTransactionEditScopeTypes,
@@ -63,6 +64,7 @@ export function useUserProfilePageBase() {
const allDigitGroupingSymbols = computed<TypeAndDisplayName[]>(() => getAllDigitGroupingSymbols());
const allDigitGroupingTypes = computed<LocalizedDigitGroupingType[]>(() => getAllDigitGroupingTypes());
const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes());
const allCoordinateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCoordinateDisplayTypes());
const allExpenseAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllExpenseAmountColors());
const allIncomeAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllIncomeAmountColors());
const allTransactionEditScopeTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionEditScopeTypes());
@@ -106,6 +108,7 @@ export function useUserProfilePageBase() {
newProfile.value.digitGroupingSymbol === oldProfile.value.digitGroupingSymbol &&
newProfile.value.digitGrouping === oldProfile.value.digitGrouping &&
newProfile.value.currencyDisplayType === oldProfile.value.currencyDisplayType &&
newProfile.value.coordinateDisplayType === oldProfile.value.coordinateDisplayType &&
newProfile.value.expenseAmountColor === oldProfile.value.expenseAmountColor &&
newProfile.value.incomeAmountColor === oldProfile.value.incomeAmountColor) {
return 'Nothing has been modified';
@@ -195,6 +198,7 @@ export function useUserProfilePageBase() {
allDigitGroupingSymbols,
allDigitGroupingTypes,
allCurrencyDisplayTypes,
allCoordinateDisplayTypes,
allExpenseAmountColorTypes,
allIncomeAmountColorTypes,
allTransactionEditScopeTypes,
@@ -690,7 +690,7 @@
</div>
</template>
<template #item.geoLocation="{ item }">
<span v-if="item.geoLocation">{{ `(${item.geoLocation.longitude}, ${item.geoLocation.latitude})` }}</span>
<span v-if="item.geoLocation">{{ `(${formatCoordinate(item.geoLocation, coordinateDisplayType)})` }}</span>
<span v-else-if="!item.geoLocation">{{ tt('None') }}</span>
</template>
<template #item.tagIds="{ item }">
@@ -889,6 +889,7 @@ import {
getUtcOffsetByUtcOffsetMinutes,
getTimezoneOffsetMinutes
} from '@/lib/datetime.ts';
import { formatCoordinate } from '@/lib/coordinate.ts';
import {
getAccountMapByName
} from '@/lib/account.ts';
@@ -1015,6 +1016,7 @@ const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.sho
const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const coordinateDisplayType = computed<number>(() => userStore.currentUserCoordinateDisplayType);
const allSteps = computed<StepBarItem[]>(() => {
const steps: StepBarItem[] = [
@@ -278,7 +278,7 @@
v-model:menu="geoMenuState"
>
<template #selection>
<span class="cursor-pointer" v-if="transaction.geoLocation">{{ `(${transaction.geoLocation.longitude}, ${transaction.geoLocation.latitude})` }}</span>
<span class="cursor-pointer" v-if="transaction.geoLocation">{{ `(${formatCoordinate(transaction.geoLocation, coordinateDisplayType)})` }}</span>
<span class="cursor-pointer" v-else-if="!transaction.geoLocation">{{ geoLocationStatusInfo }}</span>
</template>
@@ -483,7 +483,7 @@ import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
import { useTransactionsStore } from '@/stores/transaction.ts';
import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
import type { MapPosition } from '@/core/map.ts';
import type { Coordinate } from '@/core/coordinate.ts';
import { CategoryType } from '@/core/category.ts';
import { TransactionType, TransactionEditScopeType } from '@/core/transaction.ts';
import { TemplateType, ScheduledTemplateFrequencyType } from '@/core/template.ts';
@@ -499,6 +499,7 @@ import {
getTimezoneOffsetMinutes,
getCurrentUnixTime
} from '@/lib/datetime.ts';
import { formatCoordinate } from '@/lib/coordinate.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import {
getTransactionPrimaryCategoryName,
@@ -567,6 +568,7 @@ const {
transaction,
defaultCurrency,
defaultAccountId,
coordinateDisplayType,
allTimezones,
allVisibleAccounts,
allAccountsMap,
@@ -1073,9 +1075,9 @@ function updateGeoLocation(forceUpdate: boolean): void {
geoLocationStatus.value = GeoLocationStatus.Getting;
}
function updateSpecifiedGeoLocation(mapPosition: MapPosition): void {
function updateSpecifiedGeoLocation(coordinate: Coordinate): void {
if (isSupportGetGeoLocationByClick() && setGeoLocationByClickMap.value) {
transaction.value.setLatitudeAndLongitude(mapPosition.latitude, mapPosition.longitude);
transaction.value.setLatitudeAndLongitude(coordinate.latitude, coordinate.longitude);
map.value?.setMarkerPosition(transaction.value.geoLocation);
}
}
@@ -263,6 +263,25 @@
<v-divider />
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="type"
persistent-placeholder
:disabled="loading || saving"
:label="tt('Geographic Location Format')"
:placeholder="tt('Geographic Location Format')"
:items="allCoordinateDisplayTypes"
v-model="newProfile.coordinateDisplayType"
/>
</v-col>
</v-row>
</v-card-text>
<v-divider />
<v-card-text>
<v-row>
<v-col cols="12" md="6">
@@ -360,6 +379,7 @@ const {
allDigitGroupingSymbols,
allDigitGroupingTypes,
allCurrencyDisplayTypes,
allCoordinateDisplayTypes,
allExpenseAmountColorTypes,
allIncomeAmountColorTypes,
allTransactionEditScopeTypes,
+4 -2
View File
@@ -338,7 +338,7 @@
>
<template #title>
<f7-block class="list-item-custom-title no-padding no-margin">
<span v-if="transaction.geoLocation">{{ `(${transaction.geoLocation.longitude}, ${transaction.geoLocation.latitude})` }}</span>
<span v-if="transaction.geoLocation">{{ `(${formatCoordinate(transaction.geoLocation, coordinateDisplayType)})` }}</span>
<span v-else-if="!transaction.geoLocation">{{ geoLocationStatusInfo }}</span>
</f7-block>
</template>
@@ -515,6 +515,7 @@ import {
getTimezoneOffset,
getTimezoneOffsetMinutes
} from '@/lib/datetime.ts';
import { formatCoordinate } from '@/lib/coordinate.ts';
import { generateRandomUUID } from '@/lib/misc.ts';
import { getTransactionPrimaryCategoryName, getTransactionSecondaryCategoryName } from '@/lib/category.ts';
import { setTransactionModelByTransaction } from '@/lib/transaction.ts';
@@ -554,8 +555,9 @@ const {
transaction,
currentTimezoneOffsetMinutes,
defaultCurrency,
firstDayOfWeek,
defaultAccountId,
firstDayOfWeek,
coordinateDisplayType,
allTimezones,
allVisibleAccounts,
allAccountsMap,
@@ -41,6 +41,10 @@
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Decimal Separator" title="Dot (.)" link="#"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Geographic Location Format" title="Coordinate Format" link="#"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Expense Amount Color" title="Amount Color" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Income Amount Color" title="Amount Color" link="#"></f7-list-item>
@@ -365,6 +369,28 @@
</f7-list-item>
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Geographic Location Format')"
:title="findDisplayNameByType(allCoordinateDisplayTypes, newProfile.coordinateDisplayType)"
@click="showCoordinateDisplayTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Geographic Location Format')"
:enable-filter="true"
:filter-placeholder="tt('Geographic Location Format')"
:filter-no-items-text="tt('No results')"
:items="allCoordinateDisplayTypes"
v-model:show="showCoordinateDisplayTypePopup"
v-model="newProfile.coordinateDisplayType">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
@@ -477,6 +503,7 @@ const {
allDigitGroupingSymbols,
allDigitGroupingTypes,
allCurrencyDisplayTypes,
allCoordinateDisplayTypes,
allExpenseAmountColorTypes,
allIncomeAmountColorTypes,
allTransactionEditScopeTypes,
@@ -514,6 +541,7 @@ const showCurrencyDisplayTypePopup = ref<boolean>(false);
const showDigitGroupingPopup = ref<boolean>(false);
const showDigitGroupingSymbolPopup = ref<boolean>(false);
const showDecimalSeparatorPopup = ref<boolean>(false);
const showCoordinateDisplayTypePopup = ref<boolean>(false);
const showExpenseAmountColorPopup = ref<boolean>(false);
const showIncomeAmountColorPopup = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);