migrate datetime selection sheet to composition API and typescript

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>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+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 {
+type VueDatePickerType = InstanceType<typeof VueDatePicker>;
-    props: [
-        'modelValue',
-        'initMode',
-        'show'
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const userStore = useUserStore();
-        const self = this;
 
-        self.is24Hour = self.$locale.isLongTime24HourFormat(userStore);
+const props = defineProps<{
-        self.isMeridiemIndicatorFirst = self.$locale.isLongTimeMeridiemIndicatorFirst(userStore);
+    modelValue: number;
-        self.timePickerHolder = null;
+    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) {
+const { tt, getAllMinWeekdayNames, getAllMeridiemIndicators, getMonthShortName, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat, isLongTimeMeridiemIndicatorFirst } = useI18n();
-            value = self.modelValue;
+const { showToast } = useI18nUIComponents();
-        }
 
-        const datetime = getLocalDatetimeFromUnixTime(value);
+const environmentsStore = useEnvironmentsStore();
+const userStore = useUserStore();
 
-        return {
+const is24Hour: boolean = isLongTime24HourFormat();
-            mode: self.initMode || 'time',
+const isMeridiemIndicatorFirst: boolean = isLongTimeMeridiemIndicatorFirst() || false;
-            yearRange: [
+let timePickerHolder: Picker.Picker | null = null;
-                2000,
+
-                getCurrentYear() + 1
+const mode = ref<string>(props.initMode || 'time');
-            ],
+const yearRange = ref<number[]>([
-            dateTime: datetime,
+    2000,
-            timeValues: self.getTimeValues(datetime),
+    getCurrentYear() + 1
-        }
+]);
-    },
+const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getCurrentUnixTime()));
-    computed: {
+const timeValues = ref<string[]>(getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst));
-        ...mapStores(useUserStore),
+
-        isDarkMode() {
+const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
-            return this.$root.isDarkMode;
+
-        },
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-        firstDayOfWeek() {
+const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
-            return this.userStore.currentUserFirstDayOfWeek;
+const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-        },
+const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-        dayNames() {
+const displayTime = computed<string>(() => {
-            return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
+    return formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-        },
+});
-        isYearFirst() {
+const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
-            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+
-        },
+function switchMode(): void {
-        displayTime() {
+    if (mode.value === 'time') {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, getActualUnixTimeForStore(getUnixTime(this.dateTime), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+        mode.value = 'date';
-        },
+    } else {
-        switchButtonTitle() {
+        mode.value = 'time';
-            if (this.mode === 'time') {
+        updateTimePicker(true);
-                return this.$t('Date');
+    }
-            } else {
+}
-                return this.$t('Time');
+
-            }
+function setCurrentTime(): void {
-        }
+    dateTime.value = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
-    },
+    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
-    beforeUnmount() {
+
-        if (this.timePickerHolder) {
+    if (mode.value === 'time') {
-            this.timePickerHolder.destroy();
+        updateTimePicker(false);
-            this.timePickerHolder = null;
+    }
-        }
+}
-    },
+
-    methods: {
+function confirm(): void {
-        onSheetOpen() {
+    if (!dateTime.value) {
-            const self = this;
+        return;
-            self.mode = self.initMode || 'time';
+    }
-
+
-            if (self.modelValue) {
+    const unixTime = getUnixTime(dateTime.value);
-                self.dateTime = getLocalDatetimeFromUnixTime(self.modelValue);
+
-            }
+    if (unixTime < 0) {
-
+        showToast('Date is too early');
-            self.timeValues = self.getTimeValues(self.dateTime);
+        return;
-
+    }
-            if (!self.timePickerHolder) {
+
-                self.timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
+    emit('update:modelValue', unixTime);
-                    self.getTimePickerColumns(), self.timeValues, {
+    emit('update:show', false);
-                        change(picker, values) {
+}
-                            if (self.mode === 'time') {
+
-                                self.timeValues = values;
+function getTimePickerColumns(): Picker.ColumnParameters[] {
-                                self.dateTime = getCombinedDateAndTimeValues(self.dateTime, self.timeValues, self.is24Hour, self.isMeridiemIndicatorFirst);
+    const ret: Picker.ColumnParameters[] = [];
-                            }
+
-                        }
+    if (!is24Hour && isMeridiemIndicatorFirst) {
-                    });
+        ret.push(getAllMeridiemIndicators());
-            } else {
+    }
-                self.updateTimePicker(true);
+
-            }
+    // Hours
-
+    ret.push({
-            self.$refs.datetimepicker.switchView('calendar');
+        values: generateAllHours()
-        },
+    });
-        onSheetClosed() {
+    // Divider
-            this.$emit('update:show', false);
+    ret.push({
-        },
+        divider: true,
-        switchMode() {
+        content: ':',
-            if (this.mode === 'time') {
+    });
-                this.mode = 'date';
+    // Minutes
-            } else {
+    ret.push({
-                this.mode = 'time';
+        values: generateAllMinutesOrSeconds()
-                this.updateTimePicker(true);
+    });
-            }
+    // Divider
-        },
+    ret.push({
-        setCurrentTime() {
+        divider: true,
-            this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
+        content: ':',
-            this.timeValues = this.getTimeValues(this.dateTime);
+    });
-
+    // Seconds
-            if (this.mode === 'time') {
+    ret.push({
-                this.updateTimePicker(false);
+        values: generateAllMinutesOrSeconds()
-            }
+    });
-        },
+
-        confirm() {
+    if (!is24Hour && !isMeridiemIndicatorFirst) {
-            if (!this.dateTime) {
+        ret.push(getAllMeridiemIndicators());
-                return;
+    }
-            }
+
-
+    return ret;
-            const unixTime = getUnixTime(this.dateTime);
+}
-
+
-            if (unixTime < 0) {
+function getDisplayTimeValue(value: number): string {
-                this.$toast('Date is too early');
+    if (value < 10) {
-                return;
+        return `0${value}`;
-            }
+    } else {
-
+        return value.toString();
-            this.$emit('update:modelValue', unixTime);
+    }
-            this.$emit('update:show', false);
+}
-        },
+
-        getMonthShortName(month) {
+function generateAllHours(): string[] {
-            return this.$locale.getMonthShortName(month);
+    const ret: string[] = [];
-        },
+    const startHour = is24Hour ? 0 : 1;
-        getTimeValues(datetime) {
+    const endHour = is24Hour ? 23 : 11;
-            return getTimeValues(datetime, this.is24Hour, this.isMeridiemIndicatorFirst);
+
-        },
+    if (!is24Hour) {
-        getTimePickerColumns() {
+        ret.push('12');
-            const ret = [];
+    }
-
+
-            if (!this.is24Hour && this.isMeridiemIndicatorFirst) {
+    for (let i = startHour; i <= endHour; i++) {
-                ret.push(this.$locale.getAllMeridiemIndicators());
+        ret.push(getDisplayTimeValue(i));
-            }
+    }
-
+
-            // Hours
+    return ret;
-            ret.push({
+}
-                values: this.generateAllHours()
+
-            });
+function generateAllMinutesOrSeconds(): string[] {
-            // Divider
+    const ret: string[] = [];
-            ret.push({
+
-                divider: true,
+    for (let i = 0; i < 60; i++) {
-                content: ':',
+        ret.push(getDisplayTimeValue(i));
-            });
+    }
-            // Minutes
+
-            ret.push({
+    return ret;
-                values: this.generateAllMinutesOrSeconds()
+}
-            });
+
-            // Divider
+function updateTimePicker(lazy: boolean): void {
-            ret.push({
+    if (lazy) {
-                divider: true,
+        nextTick(() => {
-                content: ':',
+            if (timePickerHolder) {
-            });
+                timePickerHolder.setValue(timeValues.value);
-            // 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);
-                }
             }
+        });
+    } 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>

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,