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,152 +71,93 @@ import {
     getTimeValues,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
-import { createInlinePicker } from '@/lib/ui/mobile.ts';
 
-export default {
+type VueDatePickerType = InstanceType<typeof VueDatePicker>;
-    props: [
+
-        'modelValue',
+const props = defineProps<{
-        'initMode',
+    modelValue: number;
-        'show'
+    initMode?: string;
-    ],
+    show: boolean;
-    emits: [
+}>();
-        'update:modelValue',
+
-        'update:show'
+const emit = defineEmits<{
-    ],
+    (e: 'update:modelValue', value: number): void;
-    data() {
+    (e: 'update:show', value: boolean): void;
+}>();
+
+const { tt, getAllMinWeekdayNames, getAllMeridiemIndicators, getMonthShortName, formatUnixTimeToLongDateTime, isLongDateMonthAfterYear, isLongTime24HourFormat, isLongTimeMeridiemIndicatorFirst } = useI18n();
+const { showToast } = useI18nUIComponents();
+
+const environmentsStore = useEnvironmentsStore();
 const userStore = useUserStore();
-        const self = this;
 
-        self.is24Hour = self.$locale.isLongTime24HourFormat(userStore);
+const is24Hour: boolean = isLongTime24HourFormat();
-        self.isMeridiemIndicatorFirst = self.$locale.isLongTimeMeridiemIndicatorFirst(userStore);
+const isMeridiemIndicatorFirst: boolean = isLongTimeMeridiemIndicatorFirst() || false;
-        self.timePickerHolder = null;
+let timePickerHolder: Picker.Picker | null = null;
 
-        let value = getCurrentUnixTime();
+const mode = ref<string>(props.initMode || 'time');
-
+const yearRange = ref<number[]>([
-        if (self.modelValue) {
-            value = self.modelValue;
-        }
-
-        const datetime = getLocalDatetimeFromUnixTime(value);
-
-        return {
-            mode: self.initMode || 'time',
-            yearRange: [
     2000,
     getCurrentYear() + 1
-            ],
+]);
-            dateTime: datetime,
+const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getCurrentUnixTime()));
-            timeValues: self.getTimeValues(datetime),
+const timeValues = ref<string[]>(getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst));
-        }
-    },
-    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) {
+const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
-                self.dateTime = getLocalDatetimeFromUnixTime(self.modelValue);
-            }
 
-            self.timeValues = self.getTimeValues(self.dateTime);
+const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
-
+const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
-            if (!self.timePickerHolder) {
+const dayNames = computed<string[]>(() => arrangeArrayWithNewStartIndex(getAllMinWeekdayNames(), firstDayOfWeek.value));
-                self.timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
+const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
-                    self.getTimePickerColumns(), self.timeValues, {
+const displayTime = computed<string>(() => {
-                        change(picker, values) {
+    return formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-                            if (self.mode === 'time') {
-                                self.timeValues = values;
-                                self.dateTime = getCombinedDateAndTimeValues(self.dateTime, self.timeValues, self.is24Hour, self.isMeridiemIndicatorFirst);
-                            }
-                        }
 });
+const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
+
+function switchMode(): void {
+    if (mode.value === 'time') {
+        mode.value = 'date';
     } else {
-                self.updateTimePicker(true);
+        mode.value = 'time';
+        updateTimePicker(true);
+    }
 }
 
-            self.$refs.datetimepicker.switchView('calendar');
+function setCurrentTime(): void {
-        },
+    dateTime.value = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
-        onSheetClosed() {
+    timeValues.value = getTimeValues(dateTime.value, is24Hour, isMeridiemIndicatorFirst);
-            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') {
+    if (mode.value === 'time') {
-                this.updateTimePicker(false);
+        updateTimePicker(false);
     }
-        },
+}
-        confirm() {
+
-            if (!this.dateTime) {
+function confirm(): void {
+    if (!dateTime.value) {
         return;
     }
 
-            const unixTime = getUnixTime(this.dateTime);
+    const unixTime = getUnixTime(dateTime.value);
 
     if (unixTime < 0) {
-                this.$toast('Date is too early');
+        showToast('Date is too early');
         return;
     }
 
-            this.$emit('update:modelValue', unixTime);
+    emit('update:modelValue', unixTime);
-            this.$emit('update:show', false);
+    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) {
+function getTimePickerColumns(): Picker.ColumnParameters[] {
-                ret.push(this.$locale.getAllMeridiemIndicators());
+    const ret: Picker.ColumnParameters[] = [];
+
+    if (!is24Hour && isMeridiemIndicatorFirst) {
+        ret.push(getAllMeridiemIndicators());
     }
 
     // Hours
     ret.push({
-                values: this.generateAllHours()
+        values: generateAllHours()
     });
     // Divider
     ret.push({
@@ -218,7 +166,7 @@ export default {
     });
     // Minutes
     ret.push({
-                values: this.generateAllMinutesOrSeconds()
+        values: generateAllMinutesOrSeconds()
     });
     // Divider
     ret.push({
@@ -227,63 +175,102 @@ export default {
     });
     // Seconds
     ret.push({
-                values: this.generateAllMinutesOrSeconds()
+        values: generateAllMinutesOrSeconds()
     });
 
-            if (!this.is24Hour && !this.isMeridiemIndicatorFirst) {
+    if (!is24Hour && !isMeridiemIndicatorFirst) {
-                ret.push(this.$locale.getAllMeridiemIndicators());
+        ret.push(getAllMeridiemIndicators());
     }
 
     return ret;
-        },
+}
-        getDisplayTimeValue(value) {
+
+function getDisplayTimeValue(value: number): string {
     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) {
+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(this.getDisplayTimeValue(i));
+        ret.push(getDisplayTimeValue(i));
     }
 
     return ret;
-        },
+}
-        generateAllMinutesOrSeconds() {
+
-            const ret = [];
+function generateAllMinutesOrSeconds(): string[] {
+    const ret: string[] = [];
 
     for (let i = 0; i < 60; i++) {
-                ret.push(this.getDisplayTimeValue(i));
+        ret.push(getDisplayTimeValue(i));
     }
 
     return ret;
-        },
+}
-        updateTimePicker(lazy) {
-            const self = this;
 
+function updateTimePicker(lazy: boolean): void {
     if (lazy) {
-                self.$nextTick(() => {
+        nextTick(() => {
-                    if (self.timePickerHolder) {
+            if (timePickerHolder) {
-                        self.timePickerHolder.setValue(self.timeValues);
+                timePickerHolder.setValue(timeValues.value);
             }
         });
     } else {
-                if (self.timePickerHolder) {
+        if (timePickerHolder) {
-                    self.timePickerHolder.setValue(self.timeValues);
+            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,