mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 23:17:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

use pinia to replace vuex, code refactor

Browse Source
This commit is contained in:
MaysWind
2023-06-10 23:13:31 +08:00
parent 0d84f2857f
commit 46d85e92cd
80 changed files with 4972 additions and 4859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/DateRangeSelectionSheet.vue
+47 -27
View File
@@ -48,6 +48,25 @@
</template>
<script>
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/user.js';
import datetimeConstants from '@/consts/datetime.js';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.js';
import {
getCurrentUnixTime,
getCurrentDateTime,
getUnixTime,
getLocalDatetimeFromUnixTime,
getTodayFirstUnixTime,
getYear,
getDummyUnixTimeForLocalUsage,
getActualUnixTimeForStore,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getDateRangeByDateType
} from '@/lib/datetime.js';
export default {
props: [
'minTime',
@@ -62,8 +81,8 @@ export default {
],
data() {
const self = this;
let minDate = self.$utilities.getTodayFirstUnixTime();
let maxDate = self.$utilities.getCurrentUnixTime();
let minDate = getTodayFirstUnixTime();
let maxDate = getCurrentUnixTime();
if (self.minTime) {
minDate = self.minTime;
@@ -76,53 +95,54 @@ export default {
return {
yearRange: [
2000,
this.$utilities.getYear(this.$utilities.getCurrentDateTime()) + 1
getYear(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()))
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(minDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(maxDate, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
]
}
},
computed: {
...mapStores(useUserStore),
isDarkMode() {
return this.$root.isDarkMode;
},
firstDayOfWeek() {
return this.$store.getters.currentUserFirstDayOfWeek;
return this.userStore.currentUserFirstDayOfWeek;
},
dayNames() {
return this.$utilities.arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
},
is24Hour() {
return this.$locale.isLongTime24HourFormat();
return this.$locale.isLongTime24HourFormat(this.userStore);
},
beginDateTime() {
const actualBeginUnixTime = this.$utilities.getActualUnixTimeForStore(this.$utilities.getUnixTime(this.dateRange[0]), this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
return this.$utilities.formatUnixTime(actualBeginUnixTime, this.$locale.getLongDateTimeFormat());
const actualBeginUnixTime = getActualUnixTimeForStore(getUnixTime(this.dateRange[0]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, actualBeginUnixTime);
},
endDateTime() {
const actualEndUnixTime = this.$utilities.getActualUnixTimeForStore(this.$utilities.getUnixTime(this.dateRange[1]), this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
return this.$utilities.formatUnixTime(actualEndUnixTime, this.$locale.getLongDateTimeFormat());
const actualEndUnixTime = getActualUnixTimeForStore(getUnixTime(this.dateRange[1]), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, actualEndUnixTime);
},
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
datetimeConstants.allDateRanges.Today,
datetimeConstants.allDateRanges.LastSevenDays,
datetimeConstants.allDateRanges.LastThirtyDays,
datetimeConstants.allDateRanges.ThisWeek,
datetimeConstants.allDateRanges.ThisMonth,
datetimeConstants.allDateRanges.ThisYear
].forEach(dateRangeType => {
const dateRange = this.$utilities.getDateRangeByDateType(dateRangeType.type, this.firstDayOfWeek);
const dateRange = 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()))
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(dateRange.minTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())),
getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(dateRange.maxTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()))
]
});
});
@@ -133,11 +153,11 @@ export default {
methods: {
onSheetOpen() {
if (this.minTime) {
this.dateRange[0] = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(this.minTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()));
this.dateRange[0] = getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(this.minTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
}
if (this.maxTime) {
this.dateRange[1] = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getDummyUnixTimeForLocalUsage(this.maxTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes()));
this.dateRange[1] = getLocalDatetimeFromUnixTime(getDummyUnixTimeForLocalUsage(this.maxTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
}
},
onSheetClosed() {
@@ -151,16 +171,16 @@ export default {
const currentMinDate = this.dateRange[0];
const currentMaxDate = this.dateRange[1];
let minUnixTime = this.$utilities.getUnixTime(currentMinDate);
let maxUnixTime = this.$utilities.getUnixTime(currentMaxDate);
let minUnixTime = getUnixTime(currentMinDate);
let maxUnixTime = getUnixTime(currentMaxDate);
if (minUnixTime < 0 || maxUnixTime < 0) {
this.$toast('Date is too early');
return;
}
minUnixTime = this.$utilities.getActualUnixTimeForStore(minUnixTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
maxUnixTime = this.$utilities.getActualUnixTimeForStore(maxUnixTime, this.$utilities.getTimezoneOffsetMinutes(), this.$utilities.getBrowserTimezoneOffsetMinutes());
minUnixTime = getActualUnixTimeForStore(minUnixTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
maxUnixTime = getActualUnixTimeForStore(maxUnixTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes());
this.$emit('dateRange:change', minUnixTime, maxUnixTime);
},
src/components/mobile/DateTimeSelectionSheet.vue
+22 -9
View File
@@ -34,6 +34,18 @@
</template>
<script>
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/user.js';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.js';
import {
getCurrentUnixTime,
getCurrentDateTime,
getUnixTime,
getLocalDatetimeFromUnixTime,
getYear
} from '@/lib/datetime.js';
export default {
props: [
'modelValue',
@@ -45,7 +57,7 @@ export default {
],
data() {
const self = this;
let value = self.$utilities.getCurrentUnixTime();
let value = getCurrentUnixTime();
if (self.modelValue) {
value = self.modelValue;
@@ -54,43 +66,44 @@ export default {
return {
yearRange: [
2000,
this.$utilities.getYear(this.$utilities.getCurrentDateTime()) + 1
getYear(getCurrentDateTime()) + 1
],
dateTime: this.$utilities.getLocalDatetimeFromUnixTime(value),
dateTime: getLocalDatetimeFromUnixTime(value),
}
},
computed: {
...mapStores(useUserStore),
isDarkMode() {
return this.$root.isDarkMode;
},
firstDayOfWeek() {
return this.$store.getters.currentUserFirstDayOfWeek;
return this.userStore.currentUserFirstDayOfWeek;
},
dayNames() {
return this.$utilities.arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
},
is24Hour() {
return this.$locale.isLongTime24HourFormat();
return this.$locale.isLongTime24HourFormat(this.userStore);
}
},
methods: {
onSheetOpen() {
if (this.modelValue) {
this.dateTime = this.$utilities.getLocalDatetimeFromUnixTime(this.modelValue)
this.dateTime = getLocalDatetimeFromUnixTime(this.modelValue)
}
},
onSheetClosed() {
this.$emit('update:show', false);
},
setCurrentTime() {
this.dateTime = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getCurrentUnixTime())
this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime())
},
confirm() {
if (!this.dateTime) {
return;
}
const unixTime = this.$utilities.getUnixTime(this.dateTime);
const unixTime = getUnixTime(this.dateTime);
if (unixTime < 0) {
this.$toast('Date is too early');
src/components/mobile/InformationSheet.vue
+4 -2
View File
@@ -25,6 +25,8 @@
</template>
<script>
import { makeButtonCopyToClipboard, changeClipboardObjectText } from '@/lib/misc.js';
export default {
props: [
'title',
@@ -52,7 +54,7 @@ export default {
watch: {
'information': function (newValue) {
if (this.clipboardHolder) {
this.$utilities.changeClipboardObjectText(this.clipboardHolder, newValue);
changeClipboardObjectText(this.clipboardHolder, newValue);
}
}
},
@@ -71,7 +73,7 @@ export default {
}
if (self.$refs.copyToClipboardIcon) {
self.clipboardHolder = self.$utilities.makeButtonCopyToClipboard({
self.clipboardHolder = makeButtonCopyToClipboard({
el: '#copy-to-clipboard-icon',
text: self.information,
successCallback: function () {
src/components/mobile/ItemIcon.vue
+15 -11
View File
@@ -5,6 +5,10 @@
</template>
<script>
import iconConstatns from '@/consts/icon.js';
import colorConstatns from '@/consts/color.js';
import { isNumber } from '@/lib/common.js';
export default {
props: [
'iconType',
@@ -50,29 +54,29 @@ export default {
},
methods: {
getAccountIcon(iconId) {
if (this.$utilities.isNumber(iconId)) {
if (isNumber(iconId)) {
iconId = iconId.toString();
}
if (!this.$constants.icons.allAccountIcons[iconId]) {
return this.$constants.icons.defaultAccountIcon.icon;
if (!iconConstatns.allAccountIcons[iconId]) {
return iconConstatns.defaultAccountIcon.icon;
}
return this.$constants.icons.allAccountIcons[iconId].icon;
return iconConstatns.allAccountIcons[iconId].icon;
},
getCategoryIcon(iconId) {
if (this.$utilities.isNumber(iconId)) {
if (isNumber(iconId)) {
iconId = iconId.toString();
}
if (!this.$constants.icons.allCategoryIcons[iconId]) {
return this.$constants.icons.defaultCategoryIcon.icon;
if (!iconConstatns.allCategoryIcons[iconId]) {
return iconConstatns.defaultCategoryIcon.icon;
}
return this.$constants.icons.allCategoryIcons[iconId].icon;
return iconConstatns.allCategoryIcons[iconId].icon;
},
getAccountIconStyle(color, defaultColor, additionalColorAttr) {
if (color && color !== this.$constants.colors.defaultAccountColor) {
if (color && color !== colorConstatns.defaultAccountColor) {
color = '#' + color;
} else {
color = defaultColor;
@@ -89,7 +93,7 @@ export default {
return ret;
},
getCategoryIconStyle(color, defaultColor, additionalColorAttr) {
if (color && color !== this.$constants.colors.defaultCategoryColor) {
if (color && color !== colorConstatns.defaultCategoryColor) {
color = '#' + color;
} else {
color = defaultColor;
@@ -106,7 +110,7 @@ export default {
return ret;
},
getDefaultIconStyle(color, defaultColor, additionalColorAttr) {
if (color && color !== this.$constants.colors.defaultColor) {
if (color && color !== colorConstatns.defaultColor) {
color = '#' + color;
} else {
color = defaultColor;
src/components/mobile/NumberPadSheet.vue
+19 -16
View File
@@ -63,6 +63,9 @@
</template>
<script>
import { isString, appendThousandsSeparator } from '@/lib/common.js';
import { numericCurrencyToString, stringCurrencyToNumeric } from '@/lib/currency.js';
export default {
props: [
'modelValue',
@@ -85,8 +88,8 @@ export default {
},
computed: {
currentDisplay() {
const previousValue = this.$utilities.appendThousandsSeparator(this.previousValue);
const currentValue = this.$utilities.appendThousandsSeparator(this.currentValue);
const previousValue = appendThousandsSeparator(this.previousValue);
const currentValue = appendThousandsSeparator(this.currentValue);
if (this.currentSymbol) {
return `${previousValue} ${this.currentSymbol} ${currentValue}`;
@@ -115,7 +118,7 @@ export default {
},
methods: {
getStringValue(value) {
let str = this.$utilities.numericCurrencyToString(value);
let str = numericCurrencyToString(value);
if (str.indexOf(',')) {
str = str.replaceAll(/,/g, '');
@@ -173,18 +176,18 @@ export default {
const newValue = this.currentValue + num.toString();
if (this.$utilities.isString(this.minValue) && this.minValue !== '') {
const min = this.$utilities.stringCurrencyToNumeric(this.minValue);
const current = this.$utilities.stringCurrencyToNumeric(newValue);
if (isString(this.minValue) && this.minValue !== '') {
const min = stringCurrencyToNumeric(this.minValue);
const current = stringCurrencyToNumeric(newValue);
if (current < min) {
return;
}
}
if (this.$utilities.isString(this.maxValue) && this.maxValue !== '') {
const max = this.$utilities.stringCurrencyToNumeric(this.maxValue);
const current = this.$utilities.stringCurrencyToNumeric(newValue);
if (isString(this.maxValue) && this.maxValue !== '') {
const max = stringCurrencyToNumeric(this.maxValue);
const current = stringCurrencyToNumeric(newValue);
if (current > max) {
return;
@@ -247,8 +250,8 @@ export default {
},
confirm() {
if (this.currentSymbol && this.currentValue.length >= 1) {
const previousValue = this.$utilities.stringCurrencyToNumeric(this.previousValue);
const currentValue = this.$utilities.stringCurrencyToNumeric(this.currentValue);
const previousValue = stringCurrencyToNumeric(this.previousValue);
const currentValue = stringCurrencyToNumeric(this.currentValue);
let finalValue = 0;
switch (this.currentSymbol) {
@@ -265,8 +268,8 @@ export default {
finalValue = previousValue;
}
if (this.$utilities.isString(this.minValue) && this.minValue !== '') {
const min = this.$utilities.stringCurrencyToNumeric(this.minValue);
if (isString(this.minValue) && this.minValue !== '') {
const min = stringCurrencyToNumeric(this.minValue);
if (finalValue < min) {
this.$toast('Numeric Overflow');
@@ -274,8 +277,8 @@ export default {
}
}
if (this.$utilities.isString(this.maxValue) && this.maxValue !== '') {
const max = this.$utilities.stringCurrencyToNumeric(this.maxValue);
if (isString(this.maxValue) && this.maxValue !== '') {
const max = stringCurrencyToNumeric(this.maxValue);
if (finalValue > max) {
this.$toast('Numeric Overflow');
@@ -295,7 +298,7 @@ export default {
return true;
} else {
const value = this.$utilities.stringCurrencyToNumeric(this.currentValue);
const value = stringCurrencyToNumeric(this.currentValue);
this.$emit('update:modelValue', value);
this.close();
src/components/mobile/PieChart.vue
+13 -5
View File
@@ -49,7 +49,7 @@
<span class="skeleton-text">Percent</span>
</f7-chip>
<f7-chip outline
:text="$utilities.formatPercent(selectedItem.percent, 2, '&lt;0.01')"
:text="selectedItem.displayPercent"
:style="getColorStyle(selectedItem ? selectedItem.color : '', '--f7-chip-outline-border-color')"
v-else-if="!skeleton"></f7-chip>
</p>
@@ -60,7 +60,7 @@
<span class="skeleton-text" v-if="skeleton">Name</span>
<span v-else-if="!skeleton && selectedItem.name">{{ selectedItem.name }}</span>
<span class="skeleton-text" v-if="skeleton">Value</span>
<span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem ? selectedItem.color : '')">{{ $locale.getDisplayCurrency(selectedItem.value, (selectedItem.currency || defaultCurrency)) }}</span>
<span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem ? selectedItem.color : '')">{{ selectedItem.displayValue }}</span>
<f7-icon class="item-navigate-icon" f7="chevron_right" v-if="enableClickItem"></f7-icon>
</f7-link>
<f7-link :no-link-class="true" v-else-if="!validItems || !validItems.length">
@@ -77,6 +77,9 @@
</template>
<script>
import colorConstants from '@/consts/color.js';
import { formatPercent } from '@/lib/common.js';
const defaultColors = [
'cc4a66',
'e3564a',
@@ -140,7 +143,7 @@ export default {
if (item[this.valueField] && item[this.valueField] > 0 &&
(!this.hiddenField || !item[this.hiddenField]) &&
(!this.minValidPercent || item[this.valueField] / totalValidValue > this.minValidPercent)) {
validItems.push({
const finalItem = {
name: item[this.nameField],
value: item[this.valueField],
percent: (item[this.percentField] > 0 || item[this.percentField] === 0 || item[this.percentField] === '0') ? item[this.percentField] : (item[this.valueField] / totalValidValue * 100),
@@ -148,7 +151,12 @@ export default {
currency: item[this.currencyField],
color: item[this.colorField] ? item[this.colorField] : defaultColors[validItems.length % defaultColors.length],
sourceItem: item
});
};
finalItem.displayPercent = formatPercent(finalItem.percent, 2, '&lt;0.01');
finalItem.displayValue = this.$locale.getDisplayCurrency(finalItem.value, (finalItem.currency || this.defaultCurrency));
validItems.push(finalItem);
}
}
@@ -225,7 +233,7 @@ export default {
}
},
getColor: function (color) {
if (color && color !== this.$constants.colors.defaultColor) {
if (color && color !== colorConstants.defaultColor) {
color = '#' + color;
} else {
color = 'var(--default-icon-color)';
src/components/mobile/TransactionTagSelectionSheet.vue
+7 -4
View File
@@ -41,6 +41,9 @@
</template>
<script>
import { copyArrayTo } from '@/lib/common.js';
import { elements } from '@/lib/ui.mobile.js';
export default {
props: [
'modelValue',
@@ -55,7 +58,7 @@ export default {
const self = this;
return {
selectedItemIds: self.$utilities.copyArrayTo(self.modelValue, [])
selectedItemIds: copyArrayTo(self.modelValue, [])
}
},
computed: {
@@ -78,7 +81,7 @@ export default {
this.$emit('update:show', false);
},
onSheetOpen(event) {
this.selectedItemIds = this.$utilities.copyArrayTo(this.modelValue, []);
this.selectedItemIds = copyArrayTo(this.modelValue, []);
this.scrollToSelectedItem(event.$el);
},
onSheetClosed() {
@@ -120,8 +123,8 @@ export default {
let lastSelectedItem = selectedItem;
if (selectedItem.length > 0) {
firstSelectedItem = this.$ui.elements(selectedItem[0]);
lastSelectedItem = this.$ui.elements(selectedItem[selectedItem.length - 1]);
firstSelectedItem = elements(selectedItem[0]);
lastSelectedItem = elements(selectedItem[selectedItem.length - 1]);
}
let firstSelectedItemInTop = firstSelectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10);
src/components/mobile/TreeViewSelectionSheet.vue
+3 -1
View File
@@ -39,6 +39,8 @@
</template>
<script>
import { isArray } from '@/lib/common.js';
export default {
props: [
'modelValue',
@@ -73,7 +75,7 @@ export default {
},
computed: {
hugeTreeViewItems() {
if (this.$utilities.isArray(this.items)) {
if (isArray(this.items)) {
return this.items.length > 10;
} else {
let count = 0;
src/components/mobile/TwoColumnListItemSelectionSheet.vue
+4 -2
View File
@@ -60,6 +60,8 @@
</template>
<script>
import { isArray } from '@/lib/common.js';
export default {
props: [
'modelValue',
@@ -104,7 +106,7 @@ export default {
computed: {
selectedPrimaryItem() {
if (this.primaryValueField) {
if (this.$utilities.isArray(this.items)) {
if (isArray(this.items)) {
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
@@ -181,7 +183,7 @@ export default {
},
getPrimaryValueBySecondaryValue(secondaryValue) {
if (this.primarySubItemsField) {
if (this.$utilities.isArray(this.items)) {
if (isArray(this.items)) {
for (let i = 0; i < this.items.length; i++) {
const primaryItem = this.items[i];