transaction edit dialog supports transaction time

src/components/desktop/DateTimeSelect.vue

@@ -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

@@ -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

@@ -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
+                                    <dateTime-select
-                                        disabled
+                                        :readonly="mode === 'view'"
-                                        persistent-placeholder
+                                        :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;