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

transaction edit dialog supports transaction time

Browse Source
This commit is contained in:
MaysWind
2023-08-19 22:41:13 +08:00
parent 7257abefb4
commit b8bdb03fc0
3 changed files with 151 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/DateTimeSelect.vue
+137
View File
@@ -0,0 +1,137 @@
<template>
<v-select
persistent-placeholder
:readonly="readonly"
:disabled="disabled"
:label="label"
:menu-props="{ 'content-class': 'date-time-select-menu' }"
v-model="dateTime"
>
<template #selection>
<v-label class="cursor-pointer">{{ displayTime }}</v-label>
</template>
<template #no-data>
<vue-date-picker inline vertical time-picker-inline enable-seconds auto-apply
ref="datepicker"
month-name-format="long"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:is24="is24Hour"
v-model="dateTime">
<template #month="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #am-pm-button="{ toggle, value }">
<button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ $t(`datetime.${value}.content`) }}</button>
</template>
</vue-date-picker>
</template>
</v-select>
</template>
<script>
import { useTheme } from 'vuetify';
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/user.js';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.js';
import {
getCurrentUnixTime,
getCurrentDateTime,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getLocalDatetimeFromUnixTime,
getActualUnixTimeForStore,
getYear, getUnixTime
} from '@/lib/datetime.js';
export default {
props: [
'modelValue',
'disabled',
'readonly',
'label'
],
emits: [
'update:modelValue',
'error'
],
expose: [
'init'
],
data() {
return {
yearRange: [
2000,
getYear(getCurrentDateTime()) + 1
]
}
},
computed: {
...mapStores(useUserStore),
dateTime: {
get: function () {
return getLocalDatetimeFromUnixTime(this.modelValue);
},
set: function (value) {
const unixTime = getUnixTime(value);
if (unixTime < 0) {
this.$emit('error', 'Date is too early');
return;
}
this.$emit('update:modelValue', unixTime);
}
},
isDarkMode() {
return this.globalTheme.global.name.value === 'dark';
},
firstDayOfWeek() {
return this.userStore.currentUserFirstDayOfWeek;
},
dayNames() {
return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
},
is24Hour() {
return this.$locale.isLongTime24HourFormat(this.userStore);
},
displayTime() {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(this.modelValue, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
}
},
setup() {
const theme = useTheme();
return {
globalTheme: theme
};
},
methods: {
setCurrentTime() {
this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime())
},
getMonthShortName(month) {
return this.$locale.getMonthShortName(month);
}
}
}
</script>
<style>
.date-time-select-menu {
max-height: inherit !important;
}
.date-time-select-menu .dp__menu {
border: 0;
}
</style>
src/desktop-main.js
+2
View File
@@ -84,6 +84,7 @@ import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/desktop/ItemIcon.vue';
import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
import AmountInput from '@/components/desktop/AmountInput.vue';
import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
import ColorSelect from '@/components/desktop/ColorSelect.vue';
import IconSelect from '@/components/desktop/IconSelect.vue';
import StepsBar from '@/components/desktop/StepsBar.vue';
@@ -398,6 +399,7 @@ app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('BtnVerticalGroup', BtnVerticalGroup);
app.component('AmountInput', AmountInput);
app.component('DateTimeSelect', DateTimeSelect);
app.component('ColorSelect', ColorSelect);
app.component('IconSelect', IconSelect);
app.component('StepsBar', StepsBar);
src/views/desktop/transactions/list/dialogs/EditDialog.vue
+12 -6
View File
@@ -55,8 +55,8 @@
<v-row>
<v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
<amount-input persistent-placeholder
:disabled="loading || submitting"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:hide="transaction.hideAmount"
:label="$t(sourceAmountName)"
:placeholder="$t(sourceAmountName)"
@@ -64,8 +64,8 @@
</v-col>
<v-col cols="12" :md="6" v-if="transaction.type === allTransactionTypes.Transfer">
<amount-input persistent-placeholder
:disabled="loading || submitting"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:hide="transaction.hideAmount"
:label="$t('Transfer In Amount')"
:placeholder="$t('Transfer In Amount')"
@@ -159,11 +159,12 @@
</v-select>
</v-col>
<v-col cols="12" md="6">
<v-text-field
disabled
persistent-placeholder
<dateTime-select
:readonly="mode === 'view'"
:disabled="loading || submitting"
:label="$t('Transaction Time')"
:placeholder="$t('Transaction Time')" />
v-model="transaction.time"
@error="showDateTimeError" />
</v-col>
<v-col cols="12" md="6">
<v-autocomplete
@@ -173,6 +174,7 @@
auto-select-first
persistent-placeholder
:readonly="mode === 'view'"
:disabled="loading || submitting"
:label="$t('Timezone')"
:placeholder="!transaction.timeZone && transaction.timeZone !== '' ? `(${transactionDisplayTimezone}) ${transactionTimezoneTimeDifference}` : $t('Timezone')"
:items="allTimezones"
@@ -217,6 +219,7 @@
chips
:closable-chips="mode !== 'view'"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:label="$t('Tags')"
:placeholder="$t('None')"
:items="allTags"
@@ -612,6 +615,9 @@ export default {
this.showState = false;
},
showDateTimeError(error) {
this.$refs.snackbar.showError(error);
},
updateGeoLocation(forceUpdate) {
const self = this;