mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
Upgrade to vue3 (#16)
* upgrade to vue 3.x and framework7 8.x * change calendar plugin to vue-datepicker * disable export button when user does not hava any transaction * implement new pin code input * append thousands separator in amount in exchange rates page
This commit is contained in:
mayswind
@@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<f7-sheet style="height:auto" :opened="show"
|
||||
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
|
||||
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<div class="swipe-handler"></div>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
|
||||
<p class="no-margin-top" v-if="hint">{{ hint }}</p>
|
||||
<p class="no-margin-top margin-bottom" v-if="beginDateTime && endDateTime">
|
||||
<span>{{ beginDateTime }}</span>
|
||||
<span> - </span>
|
||||
<span>{{ endDateTime }}</span>
|
||||
</p>
|
||||
<slot></slot>
|
||||
<f7-list no-hairlines inline-labels class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
:label="$t('Begin Time')"
|
||||
type="datepicker"
|
||||
class="date-range-sheet-time-item"
|
||||
:calendar-params="{
|
||||
timePicker: true,
|
||||
dateFormat: $t('input-format.datetime.long'),
|
||||
firstDay: defaultFirstDayOfWeek,
|
||||
toolbarCloseText: $t('Done'),
|
||||
timePickerPlaceholder: $t('Select Time'),
|
||||
timePickerFormat: $locale.getInputTimeIntlDateTimeFormatOptions(),
|
||||
monthNames: $locale.getAllLongMonthNames(),
|
||||
monthNamesShort: $locale.getAllShortMonthNames(),
|
||||
dayNames: $locale.getAllLongWeekdayNames(),
|
||||
dayNamesShort: $locale.getAllShortWeekdayNames()}"
|
||||
:value="currentMinDate"
|
||||
@calendar:change="currentMinDate = $event"
|
||||
>
|
||||
</f7-list-input>
|
||||
|
||||
<f7-list-input
|
||||
:label="$t('End Time')"
|
||||
type="datepicker"
|
||||
class="date-range-sheet-time-item"
|
||||
:calendar-params="{
|
||||
timePicker: true,
|
||||
dateFormat: $t('input-format.datetime.long'),
|
||||
firstDay: defaultFirstDayOfWeek,
|
||||
toolbarCloseText: $t('Done'),
|
||||
timePickerPlaceholder: $t('Select Time'),
|
||||
timePickerFormat: $locale.getInputTimeIntlDateTimeFormatOptions(),
|
||||
monthNames: $locale.getAllLongMonthNames(),
|
||||
monthNamesShort: $locale.getAllShortMonthNames(),
|
||||
dayNames: $locale.getAllLongWeekdayNames(),
|
||||
dayNamesShort: $locale.getAllShortWeekdayNames()}"
|
||||
:value="currentMaxDate"
|
||||
@calendar:change="currentMaxDate = $event"
|
||||
>
|
||||
</f7-list-input>
|
||||
</f7-list>
|
||||
<VueDatePicker range inline enable-seconds six-weeks
|
||||
auto-apply month-name-format="long"
|
||||
class="margin-bottom"
|
||||
:dark="isDarkMode"
|
||||
:week-start="firstDayOfWeek"
|
||||
:year-range="yearRange"
|
||||
:day-names="dayNames"
|
||||
:is24="is24Hour"
|
||||
:partial-range="false"
|
||||
:preset-ranges="presetRanges"
|
||||
v-model="dateRange">
|
||||
<template #month="{ text }">
|
||||
{{ $t(`datetime.${text}.short`) }}
|
||||
</template>
|
||||
<template #month-overlay-value="{ text }">
|
||||
{{ $t(`datetime.${text}.short`) }}
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentMinDate || !currentMaxDate }"
|
||||
:class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
|
||||
:text="$t('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
@@ -71,6 +54,10 @@ export default {
|
||||
'hint',
|
||||
'show'
|
||||
],
|
||||
emits: [
|
||||
'update:show',
|
||||
'dateRange:change'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
let minDate = self.$utilities.getTodayFirstUnixTime();
|
||||
@@ -84,65 +71,87 @@ export default {
|
||||
maxDate = self.maxTime;
|
||||
}
|
||||
|
||||
minDate = self.$utilities.getDummyUnixTimeForLocalUsage(minDate, self.$utilities.getTimezoneOffsetMinutes(), self.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
maxDate = self.$utilities.getDummyUnixTimeForLocalUsage(maxDate, self.$utilities.getTimezoneOffsetMinutes(), self.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
|
||||
return {
|
||||
currentMinDate: [self.$utilities.getLocalDatetimeFromUnixTime(minDate)],
|
||||
currentMaxDate: [self.$utilities.getLocalDatetimeFromUnixTime(maxDate)]
|
||||
yearRange: [
|
||||
2000,
|
||||
this.$utilities.getYear(this.$utilities.getCurrentDateTime()) + 1
|
||||
],
|
||||
dateRange: [
|
||||
this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(minDate, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes())),
|
||||
this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(maxDate, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()))
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultFirstDayOfWeek() {
|
||||
return this.$store.getters.currentUserFirstDayOfWeek;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'currentMinDate': function (newValue) {
|
||||
if (!newValue) {
|
||||
this.currentMinDate = [this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getCurrentUnixTime())];
|
||||
}
|
||||
isDarkMode() {
|
||||
return this.$root.isDarkMode;
|
||||
},
|
||||
'currentMaxDate': function (newValue) {
|
||||
if (!newValue) {
|
||||
this.currentMaxDate = [this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getCurrentUnixTime())];
|
||||
}
|
||||
firstDayOfWeek() {
|
||||
return this.$store.getters.currentUserFirstDayOfWeek;
|
||||
},
|
||||
dayNames() {
|
||||
return this.$locale.getAllMinWeekdayNames();
|
||||
},
|
||||
is24Hour() {
|
||||
const datetimeFormat = this.$t('format.datetime.long');
|
||||
return this.$utilities.is24HourFormat(datetimeFormat);
|
||||
},
|
||||
beginDateTime() {
|
||||
const actualBeginUnixTime = this.$utilities.getActualUnixTimeForStore(this.$utilities.getUnixTime(this.dateRange[0]), this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
return this.$utilities.formatUnixTime(actualBeginUnixTime, this.$t('format.datetime.long'));
|
||||
},
|
||||
endDateTime() {
|
||||
const actualEndUnixTime = this.$utilities.getActualUnixTimeForStore(this.$utilities.getUnixTime(this.dateRange[1]), this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
return this.$utilities.formatUnixTime(actualEndUnixTime, this.$t('format.datetime.long'));
|
||||
},
|
||||
presetRanges() {
|
||||
const presetRanges = [];
|
||||
|
||||
[
|
||||
this.$constants.datetime.allDateRanges.Today,
|
||||
this.$constants.datetime.allDateRanges.LastSevenDays,
|
||||
this.$constants.datetime.allDateRanges.LastThirtyDays,
|
||||
this.$constants.datetime.allDateRanges.ThisWeek,
|
||||
this.$constants.datetime.allDateRanges.ThisMonth,
|
||||
this.$constants.datetime.allDateRanges.ThisYear
|
||||
].forEach(dateRangeType => {
|
||||
const dateRange = this.$utilities.getDateRangeByDateType(dateRangeType.type, this.firstDayOfWeek);
|
||||
|
||||
presetRanges.push({
|
||||
label: this.$t(dateRangeType.name),
|
||||
range: [
|
||||
this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(dateRange.minTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes())),
|
||||
this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(dateRange.maxTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()))
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
return presetRanges;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen() {
|
||||
if (this.minTime) {
|
||||
const minTime = this.$utilities.getDummyUnixTimeForLocalUsage(this.minTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
this.currentMinDate = [this.$utilities.getLocalDatetimeFromUnixTime(minTime)];
|
||||
this.dateRange[0] = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(this.minTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()));
|
||||
}
|
||||
|
||||
if (this.maxTime) {
|
||||
const maxTime = this.$utilities.getDummyUnixTimeForLocalUsage(this.maxTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
|
||||
this.currentMaxDate = [this.$utilities.getLocalDatetimeFromUnixTime(maxTime)];
|
||||
this.dateRange[1] = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(this.maxTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()));
|
||||
}
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.currentMinDate || !this.currentMaxDate) {
|
||||
if (!this.dateRange[0] || !this.dateRange[1]) {
|
||||
return;
|
||||
}
|
||||
|
||||
let currentMinDate = this.currentMinDate;
|
||||
const currentMinDate = this.dateRange[0];
|
||||
const currentMaxDate = this.dateRange[1];
|
||||
|
||||
if (this.$utilities.isArray(this.currentMinDate)) {
|
||||
currentMinDate = this.currentMinDate[0];
|
||||
}
|
||||
|
||||
let currentMaxDate = this.currentMaxDate;
|
||||
|
||||
if (this.$utilities.isArray(this.currentMaxDate)) {
|
||||
currentMaxDate = this.currentMaxDate[0];
|
||||
}
|
||||
|
||||
let minUnixTime = this.$utilities.getMinuteFirstUnixTime(currentMinDate);
|
||||
let maxUnixTime = this.$utilities.getMinuteLastUnixTime(currentMaxDate);
|
||||
let minUnixTime = this.$utilities.getUnixTime(currentMinDate);
|
||||
let maxUnixTime = this.$utilities.getUnixTime(currentMaxDate);
|
||||
|
||||
if (minUnixTime < 0 || maxUnixTime < 0) {
|
||||
this.$toast('Date is too early');
|
||||
@@ -160,9 +169,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list .date-range-sheet-time-item > .item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user