From 8c7fc0fef98b7fcbe687380d5b5d65b0a72acf16 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 11 Jan 2025 16:51:56 +0800
Subject: [PATCH] migrate datetime selection sheet to composition API and
 typescript

---
 .../mobile/DateTimeSelectionSheet.vue         | 417 +++++++++---------
 src/lib/ui/mobile.ts                          |   2 +-
 2 files changed, 203 insertions(+), 216 deletions(-)

diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index 5487d955..18fee050 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -4,10 +4,10 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :text="$t('Now')" @click="setCurrentTime"></f7-link>
+                <f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="$t('Done')" @click="confirm"></f7-link>
+                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
             </div>
         </f7-toolbar>
         <f7-page-content class="padding-bottom">
@@ -41,15 +41,22 @@
             <div class="margin-top text-align-center">
                 <div class="display-flex padding-horizontal justify-content-space-between">
                     <div class="align-self-center">{{ displayTime }}</div>
-                    <f7-button outline :text="switchButtonTitle" @click="switchMode"></f7-button>
+                    <f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
                 </div>
             </div>
         </f7-page-content>
     </f7-sheet>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed, nextTick, useTemplateRef, onBeforeUnmount } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import type { Picker } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, createInlinePicker } from '@/lib/ui/mobile.ts';
+
+import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
@@ -64,226 +71,206 @@ import {
     getTimeValues,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
-import { createInlinePicker } from '@/lib/ui/mobile.ts';
 
-export default {
-    props: [
-        'modelValue',
-        'initMode',
-        'show'
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const userStore = useUserStore();
-        const self = this;
+type VueDatePickerType = InstanceType<typeof VueDatePicker>;
 
-        self.is24Hour = self.$locale.isLongTime24HourFormat(userStore);
-        self.isMeridiemIndicatorFirst = self.$locale.isLongTimeMeridiemIndicatorFirst(userStore);
-        self.timePickerHolder = null;
+const props = defineProps<{
+    modelValue: number;
+    initMode?: string;
+    show: boolean;
+}>();
 
-        let value = getCurrentUnixTime();
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: number): void;
+    (e: 'update:show', value: boolean): void;
+}>();
 
-        if (self.modelValue) {
-            value = self.modelValue;
-        }
+const { tt, getAllMinWeekdayNames, getAllMeridiemIndicators, getMonthShortName, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat, isLongTimeMeridiemIndicatorFirst } = useI18n();
+const { showToast } = useI18nUIComponents();
 
-        const datetime = getLocalDatetimeFromUnixTime(value);
+const environmentsStore = useEnvironmentsStore();
+const userStore = useUserStore();
 
-        return {
-            mode: self.initMode || 'time',
-            yearRange: [
-                2000,
-                getCurrentYear() + 1
-            ],
-            dateTime: datetime,
-            timeValues: self.getTimeValues(datetime),
-        }
-    },
-    computed: {
-        ...mapStores(useUserStore),
-        isDarkMode() {
-            return this.$root.isDarkMode;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        dayNames() {
-            return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
-        },
-        isYearFirst() {
-            return this.$locale.isLongDateMonthAfterYear(this.userStore);
-        },
-        displayTime() {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(getUnixTime(this.dateTime), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-        },
-        switchButtonTitle() {
-            if (this.mode === 'time') {
-                return this.$t('Date');
-            } else {
-                return this.$t('Time');
-            }
-        }
-    },
-    beforeUnmount() {
-        if (this.timePickerHolder) {
-            this.timePickerHolder.destroy();
-            this.timePickerHolder = null;
-        }
-    },
-    methods: {
-        onSheetOpen() {
-            const self = this;
-            self.mode = self.initMode || 'time';
-
-            if (self.modelValue) {
-                self.dateTime = getLocalDatetimeFromUnixTime(self.modelValue);
-            }
-
-            self.timeValues = self.getTimeValues(self.dateTime);
-
-            if (!self.timePickerHolder) {
-                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);
-            }
-
-            self.$refs.datetimepicker.switchView('calendar');
-        },
-        onSheetClosed() {
-            this.$emit('update:show', false);
-        },
-        switchMode() {
-            if (this.mode === 'time') {
-                this.mode = 'date';
-            } else {
-                this.mode = 'time';
-                this.updateTimePicker(true);
-            }
-        },
-        setCurrentTime() {
-            this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
-            this.timeValues = this.getTimeValues(this.dateTime);
-
-            if (this.mode === 'time') {
-                this.updateTimePicker(false);
-            }
-        },
-        confirm() {
-            if (!this.dateTime) {
-                return;
-            }
-
-            const unixTime = getUnixTime(this.dateTime);
-
-            if (unixTime < 0) {
-                this.$toast('Date is too early');
-                return;
-            }
-
-            this.$emit('update:modelValue', unixTime);
-            this.$emit('update:show', false);
-        },
-        getMonthShortName(month) {
-            return this.$locale.getMonthShortName(month);
-        },
-        getTimeValues(datetime) {
-            return getTimeValues(datetime, this.is24Hour, this.isMeridiemIndicatorFirst);
-        },
-        getTimePickerColumns() {
-            const ret = [];
-
-            if (!this.is24Hour && this.isMeridiemIndicatorFirst) {
-                ret.push(this.$locale.getAllMeridiemIndicators());
-            }
-
-            // Hours
-            ret.push({
-                values: this.generateAllHours()
-            });
-            // Divider
-            ret.push({
-                divider: true,
-                content: ':',
-            });
-            // Minutes
-            ret.push({
-                values: this.generateAllMinutesOrSeconds()
-            });
-            // Divider
-            ret.push({
-                divider: true,
-                content: ':',
-            });
-            // Seconds
-            ret.push({
-                values: this.generateAllMinutesOrSeconds()
-            });
-
-            if (!this.is24Hour && !this.isMeridiemIndicatorFirst) {
-                ret.push(this.$locale.getAllMeridiemIndicators());
-            }
-
-            return ret;
-        },
-        getDisplayTimeValue(value) {
-            if (value < 10) {
-                return `0${value}`;
-            } else {
-                return value.toString();
-            }
-        },
-        generateAllHours() {
-            const ret = [];
-            const startHour = this.is24Hour ? 0 : 1;
-            const endHour = this.is24Hour ? 23 : 11;
-
-            if (!this.is24Hour) {
-                ret.push('12');
-            }
-
-            for (let i = startHour; i <= endHour; i++) {
-                ret.push(this.getDisplayTimeValue(i));
-            }
-
-            return ret;
-        },
-        generateAllMinutesOrSeconds() {
-            const ret = [];
-
-            for (let i = 0; i < 60; i++) {
-                ret.push(this.getDisplayTimeValue(i));
-            }
-
-            return ret;
-        },
-        updateTimePicker(lazy) {
-            const self = this;
-
-            if (lazy) {
-                self.$nextTick(() => {
-                    if (self.timePickerHolder) {
-                        self.timePickerHolder.setValue(self.timeValues);
-                    }
-                });
-            } else {
-                if (self.timePickerHolder) {
-                    self.timePickerHolder.setValue(self.timeValues);
-                }
+const is24Hour: boolean = isLongTime24HourFormat();
+const isMeridiemIndicatorFirst: boolean = isLongTimeMeridiemIndicatorFirst() || false;
+let timePickerHolder: Picker.Picker | null = null;
+
+const mode = ref<string>(props.initMode || 'time');
+const yearRange = ref<number[]>([
+    2000,
+    getCurrentYear() + 1
+]);
+const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getCurrentUnixTime()));
+const timeValues = ref<string[]>(getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst));
+
+const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
+
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
+const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
+const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
+const displayTime = computed<string>(() => {
+    return formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+});
+const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
+
+function switchMode(): void {
+    if (mode.value === 'time') {
+        mode.value = 'date';
+    } else {
+        mode.value = 'time';
+        updateTimePicker(true);
+    }
+}
+
+function setCurrentTime(): void {
+    dateTime.value = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
+    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
+
+    if (mode.value === 'time') {
+        updateTimePicker(false);
+    }
+}
+
+function confirm(): void {
+    if (!dateTime.value) {
+        return;
+    }
+
+    const unixTime = getUnixTime(dateTime.value);
+
+    if (unixTime < 0) {
+        showToast('Date is too early');
+        return;
+    }
+
+    emit('update:modelValue', unixTime);
+    emit('update:show', false);
+}
+
+function getTimePickerColumns(): Picker.ColumnParameters[] {
+    const ret: Picker.ColumnParameters[] = [];
+
+    if (!is24Hour && isMeridiemIndicatorFirst) {
+        ret.push(getAllMeridiemIndicators());
+    }
+
+    // Hours
+    ret.push({
+        values: generateAllHours()
+    });
+    // Divider
+    ret.push({
+        divider: true,
+        content: ':',
+    });
+    // Minutes
+    ret.push({
+        values: generateAllMinutesOrSeconds()
+    });
+    // Divider
+    ret.push({
+        divider: true,
+        content: ':',
+    });
+    // Seconds
+    ret.push({
+        values: generateAllMinutesOrSeconds()
+    });
+
+    if (!is24Hour && !isMeridiemIndicatorFirst) {
+        ret.push(getAllMeridiemIndicators());
+    }
+
+    return ret;
+}
+
+function getDisplayTimeValue(value: number): string {
+    if (value < 10) {
+        return `0${value}`;
+    } else {
+        return value.toString();
+    }
+}
+
+function generateAllHours(): string[] {
+    const ret: string[] = [];
+    const startHour = is24Hour ? 0 : 1;
+    const endHour = is24Hour ? 23 : 11;
+
+    if (!is24Hour) {
+        ret.push('12');
+    }
+
+    for (let i = startHour; i <= endHour; i++) {
+        ret.push(getDisplayTimeValue(i));
+    }
+
+    return ret;
+}
+
+function generateAllMinutesOrSeconds(): string[] {
+    const ret: string[] = [];
+
+    for (let i = 0; i < 60; i++) {
+        ret.push(getDisplayTimeValue(i));
+    }
+
+    return ret;
+}
+
+function updateTimePicker(lazy: boolean): void {
+    if (lazy) {
+        nextTick(() => {
+            if (timePickerHolder) {
+                timePickerHolder.setValue(timeValues.value);
             }
+        });
+    } else {
+        if (timePickerHolder) {
+            timePickerHolder.setValue(timeValues.value);
         }
     }
 }
+
+function onSheetOpen(): void {
+    mode.value = props.initMode || 'time';
+
+    if (props.modelValue) {
+        dateTime.value = getLocalDatetimeFromUnixTime(props.modelValue);
+    }
+
+    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
+
+    if (!timePickerHolder) {
+        timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
+            getTimePickerColumns(), timeValues.value, {
+                change(picker, values) {
+                    if (mode.value === 'time' && values) {
+                        timeValues.value = values as string[];
+                        dateTime.value = getCombinedDateAndTimeValues(dateTime.value, timeValues.value, is24Hour, isMeridiemIndicatorFirst);
+                    }
+                }
+            });
+    } else {
+        updateTimePicker(true);
+    }
+
+    if (datetimepicker.value) {
+        datetimepicker.value.switchView('calendar');
+    }
+}
+
+function onSheetClosed(): void {
+    emit('update:show', false);
+}
+
+onBeforeUnmount(() => {
+    if (timePickerHolder) {
+        timePickerHolder.destroy();
+        timePickerHolder = null;
+    }
+});
 </script>
 
 <style>
diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
index 4c00c3d2..376b4f0c 100644
--- a/src/lib/ui/mobile.ts
+++ b/src/lib/ui/mobile.ts
@@ -89,7 +89,7 @@ export function hideLoading() {
     });
 }
 
-export function createInlinePicker(containerEl: HTMLElement, inputEl: HTMLElement, cols: Picker.ColumnParameters[], value: unknown[], events?: { change: (picker: Picker.Picker, value: unknown, displayValue: unknown) => void }): Picker.Picker {
+export function createInlinePicker(containerEl: string, inputEl: string, cols: Picker.ColumnParameters[], value: string[], events?: { change: (picker: Picker.Picker, value: unknown, displayValue: unknown) => void }): Picker.Picker {
     return f7.picker.create({
         containerEl: containerEl,
         inputEl: inputEl,