transaction edit dialog supports transaction time

2026-05-14 15:07:33 +08:00 · 2023-08-19 22:41:13 +08:00
parent 7257abefb4
commit b8bdb03fc0
3 changed files with 151 additions and 6 deletions
@@ -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>