mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 15:07:33 +08:00
migrate datetime selection sheet to composition API and typescript
This commit is contained in:
MaysWind
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user