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

initial display mode of the date time sheet in mobile version depends on the click content (#28)

Browse Source
This commit is contained in:
MaysWind
2024-09-26 00:46:42 +08:00
parent a3ff181b6e
commit 368322f906
2 changed files with 57 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/DateTimeSelectionSheet.vue
+5 -2
View File
@@ -70,6 +70,7 @@ import { createInlinePicker } from '@/lib/ui.mobile.js';
export default {
props: [
'modelValue',
'initMode',
'show'
],
emits: [
@@ -93,7 +94,7 @@ export default {
const datetime = getLocalDatetimeFromUnixTime(value);
return {
mode: 'time',
mode: self.initMode || 'time',
yearRange: [
2000,
getCurrentYear() + 1
@@ -136,7 +137,7 @@ export default {
methods: {
onSheetOpen() {
const self = this;
self.mode = 'time';
self.mode = self.initMode || 'time';
if (self.modelValue) {
self.dateTime = getLocalDatetimeFromUnixTime(self.modelValue);
@@ -148,9 +149,11 @@ export default {
self.timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
self.getTimePickerColumns(), self.timeValues, {
change(picker, values) {
if (self.mode === 'time') {
self.timeValues = values;
self.dateTime = getCombinedDateAndTimeValues(self.dateTime, self.timeValues, self.is24Hour, self.isMeridiemIndicatorFirst);
}
}
});
} else {
self.updateTimePicker(true);
src/views/mobile/transactions/EditPage.vue
+50 -8
View File
@@ -230,15 +230,21 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title"
class="transaction-edit-datetime list-item-with-header-and-title"
link="#" no-chevron
:class="{ 'readonly': mode === 'view' && transaction.utcOffset === currentTimezoneOffsetMinutes }"
:header="$t('Transaction Time')"
:title="transactionDisplayTime"
@click="mode !== 'view' ? showTransactionDateTimeSheet = true : showTimeInDefaultTimezone = !showTimeInDefaultTimezone"
v-if="type === 'transaction'"
>
<date-time-selection-sheet v-model:show="showTransactionDateTimeSheet"
<template #header>
<div class="transaction-edit-datetime-header" @click="showDateTimeDialog('time')">{{ $t('Transaction Time') }}</div>
</template>
<template #title>
<div class="transaction-edit-datetime-title">
<div @click="showDateTimeDialog('date')">{{ transactionDisplayDate }}</div>&nbsp;<div class="transaction-edit-datetime-time" @click="showDateTimeDialog('time')">{{ transactionDisplayTime }}</div>
</div>
</template>
<date-time-selection-sheet :init-mode="transactionDateTimeSheetMode"
v-model:show="showTransactionDateTimeSheet"
v-model="transaction.time">
</date-time-selection-sheet>
</f7-list-item>
@@ -486,6 +492,7 @@ export default {
uploadingPicture: false,
removingPictureId: null,
isSupportGeoLocation: !!navigator.geolocation,
transactionDateTimeSheetMode: 'time',
showTimeInDefaultTimezone: false,
showGeoLocationActionSheet: false,
showMoreActionSheet: false,
@@ -665,12 +672,19 @@ export default {
return this.$t('None');
}
},
transactionDisplayTime() {
transactionDisplayDate() {
if (this.mode !== 'view' || !this.showTimeInDefaultTimezone) {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
}
return `${this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, this.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()))} (UTC${getTimezoneOffset(this.settingsStore.appSettings.timeZone)})`;
return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(this.transaction.time, this.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()));
},
transactionDisplayTime() {
if (this.mode !== 'view' || !this.showTimeInDefaultTimezone) {
return this.$locale.formatUnixTimeToLongTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
}
return `${this.$locale.formatUnixTimeToLongTime(this.userStore, getActualUnixTimeForStore(this.transaction.time, this.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()))} (UTC${getTimezoneOffset(this.settingsStore.appSettings.timeZone)})`;
},
transactionDisplayScheduledFrequency() {
if (this.type !== 'template') {
@@ -1222,6 +1236,14 @@ export default {
this.transaction.destinationAmount = oldSourceAmount;
}
},
showDateTimeDialog(sheetMode) {
if (this.mode === 'view') {
this.showTimeInDefaultTimezone = !this.showTimeInDefaultTimezone;
} else {
this.transactionDateTimeSheetMode = sheetMode;
this.showTransactionDateTimeSheet = true;
}
},
showOpenPictureDialog() {
if (!this.canAddTransactionPicture || this.submitting) {
return;
@@ -1355,6 +1377,26 @@ export default {
padding-top: calc(var(--f7-typography-padding) / 2);
}
.transaction-edit-datetime .item-title {
width: 100%;
}
.transaction-edit-datetime .item-title > .item-header > .transaction-edit-datetime-header {
display: block;
width: 100%;
}
.transaction-edit-datetime .item-title > .transaction-edit-datetime-title {
display: flex;
width: 100%;
}
.transaction-edit-datetime .item-title > .transaction-edit-datetime-title > .transaction-edit-datetime-time {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-edit-timezone-name {
padding-left: 4px;
}