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
2026-05-16 16:07:33 +08:00 · 2023-04-21 01:45:00 +08:00
parent 4b0f7d45e8
commit b1c765eb51
89 changed files with 8353 additions and 16671 deletions
@@ -1,4 +1,8 @@
 import { defaultLanguage, allLanguages } from '../locales/index.js';
+import timezone from "../consts/timezone.js";
+import currency from "../consts/currency.js";
+import settings from "./settings";
+import utils from './utils.js';

 const apiNotFoundErrorCode = 100001;
 const specifiedApiNotFoundErrors = {
@@ -121,11 +125,11 @@ const parameterizedErrors = [
    }
 ];

-export function getAllLanguages() {
+export function getAllLanguageInfos() {
    return allLanguages;
 }

-export function getLanguage(locale) {
+export function getLanguageInfo(locale) {
    return allLanguages[locale];
 }

@@ -168,8 +172,196 @@ export function getDefaultLanguage() {
    return browserLocale;
 }

+export function transateIf(text, isTranslate, translateFn) {
+    if (isTranslate) {
+        return translateFn(text);
+    }
+
+    return text;
+}
+
+export function getAllLongMonthNames(translateFn) {
+    return [
+        translateFn('datetime.January.long'),
+        translateFn('datetime.February.long'),
+        translateFn('datetime.March.long'),
+        translateFn('datetime.April.long'),
+        translateFn('datetime.May.long'),
+        translateFn('datetime.June.long'),
+        translateFn('datetime.July.long'),
+        translateFn('datetime.August.long'),
+        translateFn('datetime.September.long'),
+        translateFn('datetime.October.long'),
+        translateFn('datetime.November.long'),
+        translateFn('datetime.December.long')
+    ];
+}
+
+export function getAllShortMonthNames(translateFn) {
+    return [
+        translateFn('datetime.January.short'),
+        translateFn('datetime.February.short'),
+        translateFn('datetime.March.short'),
+        translateFn('datetime.April.short'),
+        translateFn('datetime.May.short'),
+        translateFn('datetime.June.short'),
+        translateFn('datetime.July.short'),
+        translateFn('datetime.August.short'),
+        translateFn('datetime.September.short'),
+        translateFn('datetime.October.short'),
+        translateFn('datetime.November.short'),
+        translateFn('datetime.December.short')
+    ];
+}
+
+export function getAllLongWeekdayNames(translateFn) {
+    return [
+        translateFn('datetime.Sunday.long'),
+        translateFn('datetime.Monday.long'),
+        translateFn('datetime.Tuesday.long'),
+        translateFn('datetime.Wednesday.long'),
+        translateFn('datetime.Thursday.long'),
+        translateFn('datetime.Friday.long'),
+        translateFn('datetime.Saturday.long')
+    ];
+}
+
+export function getAllShortWeekdayNames(translateFn) {
+    return [
+        translateFn('datetime.Sunday.short'),
+        translateFn('datetime.Monday.short'),
+        translateFn('datetime.Tuesday.short'),
+        translateFn('datetime.Wednesday.short'),
+        translateFn('datetime.Thursday.short'),
+        translateFn('datetime.Friday.short'),
+        translateFn('datetime.Saturday.short')
+    ];
+}
+
+export function getAllMinWeekdayNames(translateFn) {
+    return [
+        translateFn('datetime.Sunday.min'),
+        translateFn('datetime.Monday.min'),
+        translateFn('datetime.Tuesday.min'),
+        translateFn('datetime.Wednesday.min'),
+        translateFn('datetime.Thursday.min'),
+        translateFn('datetime.Friday.min'),
+        translateFn('datetime.Saturday.min')
+    ];
+}
+
+export function getAllTimezones(includeSystemDefault, translateFn) {
+    const defaultTimezoneOffset = utils.getTimezoneOffset();
+    const defaultTimezoneOffsetMinutes = utils.getTimezoneOffsetMinutes();
+    const allTimezones = timezone.all;
+    const allTimezoneInfos = [];
+
+    for (let i = 0; i < allTimezones.length; i++) {
+        allTimezoneInfos.push({
+            name: allTimezones[i].timezoneName,
+            utcOffset: (allTimezones[i].timezoneName !== 'Etc/GMT' ? utils.getTimezoneOffset(allTimezones[i].timezoneName) : ''),
+            utcOffsetMinutes: utils.getTimezoneOffsetMinutes(allTimezones[i].timezoneName),
+            displayName: translateFn(`timezone.${allTimezones[i].displayName}`)
+        });
+    }
+
+    if (includeSystemDefault) {
+        allTimezoneInfos.push({
+            name: '',
+            utcOffset: defaultTimezoneOffset,
+            utcOffsetMinutes: defaultTimezoneOffsetMinutes,
+            displayName: translateFn('System Default')
+        });
+    }
+
+    allTimezoneInfos.sort(function(c1, c2){
+        const utcOffset1 = parseInt(c1.utcOffset.replace(':', ''));
+        const utcOffset2 = parseInt(c2.utcOffset.replace(':', ''));
+
+        if (utcOffset1 !== utcOffset2) {
+            return utcOffset1 - utcOffset2;
+        }
+
+        return c1.displayName.localeCompare(c2.displayName);
+    })
+
+    return allTimezoneInfos;
+}
+
+export function getAllCurrencies(translateFn) {
+    const allCurrencyCodes = currency.all;
+    const allCurrencies = [];
+
+    for (let currencyCode in allCurrencyCodes) {
+        if (!Object.prototype.hasOwnProperty.call(allCurrencyCodes, currencyCode)) {
+            return;
+        }
+
+        allCurrencies.push({
+            code: currencyCode,
+            displayName: translateFn(`currency.${currencyCode}`)
+        });
+    }
+
+    allCurrencies.sort(function(c1, c2){
+        return c1.displayName.localeCompare(c2.displayName);
+    })
+
+    return allCurrencies;
+}
+
+export function getDisplayCurrency(value, currencyCode, notConvertValue, translateFn) {
+    if (!utils.isNumber(value) && !utils.isString(value)) {
+        return value;
+    }
+
+    if (utils.isNumber(value)) {
+        value = value.toString();
+    }
+
+    if (!notConvertValue) {
+        const hasIncompleteFlag = utils.isString(value) && value.charAt(value.length - 1) === '+';
+
+        if (hasIncompleteFlag) {
+            value = value.substring(0, value.length - 1);
+        }
+
+        value = utils.numericCurrencyToString(value);
+
+        if (hasIncompleteFlag) {
+            value = value + '+';
+        }
+    }
+
+    const currencyDisplayMode = settings.getCurrencyDisplayMode();
+
+    if (currencyCode && currencyDisplayMode === currency.allCurrencyDisplayModes.Symbol) {
+        const currencyInfo = currency.all[currencyCode];
+        let currencySymbol = currency.defaultCurrencySymbol;
+
+        if (currencyInfo && currencyInfo.symbol) {
+            currencySymbol = currencyInfo.symbol;
+        } else if (currencyInfo && currencyInfo.code) {
+            currencySymbol = currencyInfo.code;
+        }
+
+        return translateFn('format.currency.symbol', {
+            amount: value,
+            symbol: currencySymbol
+        });
+    } else if (currencyCode && currencyDisplayMode === currency.allCurrencyDisplayModes.Code) {
+        return `${value} ${currencyCode}`;
+    } else if (currencyCode && currencyDisplayMode === currency.allCurrencyDisplayModes.Name) {
+        const currencyName = translateFn(`currency.${currencyCode}`);
+        return `${value} ${currencyName}`;
+    } else {
+        return value;
+    }
+}
+
 export function getI18nOptions() {
    return {
+        legacy: false,
        locale: defaultLanguage,
        fallbackLocale: defaultLanguage,
        formatFallbackMessages: true,
@@ -1,8 +1,8 @@
 export default {
    getLicense: () => {
-        return process.env.LICENSE;
+        return __EZBOOKKEEPING_LICENSE__; // eslint-disable-line
    },
    getThirdPartyLicenses: () => {
-        return process.env.THIRD_PARTY_LICENSES || [];
+        return __EZBOOKKEEPING_THIRD_PARTY_LICENSES__ || []; // eslint-disable-line
    }
 };
@@ -0,0 +1,130 @@
+import { f7, f7ready } from 'framework7-vue';
+
+import settings from "../settings.js";
+import {
+    getLocalizedError,
+    getLocalizedErrorParameters
+} from "../i18n.js";
+
+export function showAlert(message, confirmCallback, translateFn) {
+    let parameters = {};
+
+    if (message && message.error) {
+        const localizedError = getLocalizedError(message.error);
+        message = localizedError.message;
+        parameters = getLocalizedErrorParameters(localizedError.parameters, s => translateFn(s));
+    }
+
+    f7ready((f7) => {
+        f7.dialog.create({
+            title: translateFn('global.app.title'),
+            text: translateFn(message, parameters),
+            animate: settings.isEnableAnimate(),
+            buttons: [
+                {
+                    text: translateFn('OK'),
+                    onClick: confirmCallback
+                }
+            ]
+        }).open();
+    });
+}
+
+export function showConfirm(message, confirmCallback, cancelCallback, translateFn) {
+    f7ready((f7) => {
+        f7.dialog.create({
+            title: translateFn('global.app.title'),
+            text: translateFn(message),
+            animate: settings.isEnableAnimate(),
+            buttons: [
+                {
+                    text: translateFn('Cancel'),
+                    onClick: cancelCallback
+                },
+                {
+                    text: translateFn('OK'),
+                    onClick: confirmCallback
+                }
+            ]
+        }).open();
+    });
+}
+
+export function showToast(message, timeout, translateFn) {
+    let parameters = {};
+
+    if (message && message.error) {
+        const localizedError = getLocalizedError(message.error);
+        message = localizedError.message;
+        parameters = getLocalizedErrorParameters(localizedError.parameters, s => translateFn(s));
+    }
+
+    f7ready((f7) => {
+        f7.toast.create({
+            text: translateFn(message, parameters),
+            position: 'center',
+            closeTimeout: timeout || 1500
+        }).open();
+    });
+}
+
+export function showLoading(delayConditionFunc, delayMills) {
+    if (!delayConditionFunc) {
+        f7ready((f7) => {
+            return f7.preloader.show();
+        });
+    }
+
+    f7ready((f7) => {
+        setTimeout(() => {
+            if (delayConditionFunc()) {
+                f7.preloader.show();
+            }
+        }, delayMills || 200);
+    });
+}
+
+export function hideLoading() {
+    f7ready((f7) => {
+        return f7.preloader.hide();
+    });
+}
+
+export function routeBackOnError(f7router, errorPropertyName) {
+    const self = this;
+    const router = f7router;
+
+    const unwatch = self.$watch(errorPropertyName, () => {
+        if (self[errorPropertyName]) {
+            setTimeout(() => {
+                if (unwatch) {
+                    unwatch();
+                }
+
+                router.back();
+            }, 200);
+        }
+    }, {
+        immediate: true
+    });
+}
+
+export function elements(selector) {
+    return f7.$(selector);
+}
+
+export function isModalShowing() {
+    return f7.$('.modal-in').length;
+}
+
+export function onSwipeoutDeleted(domId, callback) {
+    f7.swipeout.delete(f7.$('#' + domId), callback);
+}
+
+export function autoChangeTextareaSize(el) {
+    f7.$(el).find('textarea').each(el => {
+        el.scrollTop = 0;
+        el.style.height = '';
+        el.style.height = el.scrollHeight + 'px';
+    });
+}
@@ -1,5 +1,6 @@
 import CryptoJS from 'crypto-js';
 import moment from 'moment';
+import Clipboard from 'clipboard';
 import uaParser from 'ua-parser-js';

 import dateTimeConstants from '../consts/datetime.js';
@@ -157,6 +158,10 @@ function getCurrentUnixTime() {
    return moment().unix();
 }

+function getCurrentDateTime() {
+    return moment();
+}
+
 function parseDateFromUnixTime(unixTime, utcOffset, currentUtcOffset) {
    if (isNumber(utcOffset)) {
        if (!isNumber(currentUtcOffset)) {
@@ -169,6 +174,16 @@ function parseDateFromUnixTime(unixTime, utcOffset, currentUtcOffset) {
    return moment.unix(unixTime);
 }

+function is24HourFormat(format) {
+    if (format.indexOf('HH') >= 0 && format.indexOf('hh') < 0) {
+        return true;
+    } else if (format.indexOf('HH') < 0 && format.indexOf('hh') >= 0) {
+        return false;
+    }
+
+    return true;
+}
+
 function formatUnixTime(unixTime, format, utcOffset, currentUtcOffset) {
    return parseDateFromUnixTime(unixTime, utcOffset, currentUtcOffset).format(format);
 }
@@ -571,6 +586,38 @@ function getExchangedAmount(amount, fromRate, toRate) {
    return amount * exchangeRate;
 }

+function formatPercent(value, precision, lowPrecisionValue) {
+    const ratio = Math.pow(10, precision);
+    const normalizedValue = Math.floor(value * ratio);
+
+    if (value > 0 && normalizedValue < 1 && lowPrecisionValue) {
+        return lowPrecisionValue + '%';
+    }
+
+    const result = normalizedValue / ratio;
+    return result + '%';
+}
+
+function limitText(value, maxLength) {
+    let length = 0;
+
+    for (let i = 0; i < value.length; i++) {
+        const c = value.charCodeAt(i);
+
+        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
+            length++;
+        } else {
+            length += 2;
+        }
+    }
+
+    if (length <= maxLength || maxLength <= 3) {
+        return value;
+    }
+
+    return value.substring(0, maxLength - 3) + '...';
+}
+
 function base64encode(arrayBuffer) {
    if (!arrayBuffer || arrayBuffer.length === 0) {
        return null;
@@ -587,6 +634,48 @@ function stringToArrayBuffer(str){
    return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
 }

+function getNameByKeyValue(src, value, keyField, nameField, defaultName) {
+    if (isArray(src)) {
+        if (keyField) {
+            for (let i = 0; i < src.length; i++) {
+                const option = src[i];
+
+                if (option[keyField] === value) {
+                    return option[nameField];
+                }
+            }
+        } else {
+            if (src[value]) {
+                const option = src[value];
+
+                return option[nameField];
+            }
+        }
+    } else if (isObject(src)) {
+        if (keyField) {
+            for (let key in src) {
+                if (!Object.prototype.hasOwnProperty.call(src, key)) {
+                    continue;
+                }
+
+                const option = src[key];
+
+                if (option[keyField] === value) {
+                    return option[nameField];
+                }
+            }
+        } else {
+            if (src[value]) {
+                const option = src[value];
+
+                return option[nameField];
+            }
+        }
+    }
+
+    return defaultName;
+}
+
 function generateRandomString() {
    const baseString = 'ebk_' + Math.round(new Date().getTime() / 1000) + '_' + Math.random();
    return CryptoJS.SHA256(baseString).toString();
@@ -612,6 +701,41 @@ function parseUserAgent(ua) {
    };
 }

+function parseDeviceInfo(ua) {
+    const uaInfo = parseUserAgent(ua);
+    let result = '';
+
+    if (uaInfo.device.model) {
+        result = uaInfo.device.model;
+    } else if (uaInfo.os.name) {
+        result = uaInfo.os.name;
+
+        if (uaInfo.os.version) {
+            result += ' ' + uaInfo.os.version;
+        }
+    }
+
+    if (uaInfo.browser.name) {
+        let browserInfo = uaInfo.browser.name;
+
+        if (uaInfo.browser.version) {
+            browserInfo += ' ' + uaInfo.browser.version;
+        }
+
+        if (result) {
+            result += ' (' + browserInfo + ')';
+        } else {
+            result = browserInfo;
+        }
+    }
+
+    if (!result) {
+        return 'Unknown Device';
+    }
+
+    return result;
+}
+
 function transactionTypeToCategroyType(transactionType) {
    if (transactionType === transactionConstants.allTransactionTypes.Income) {
        return categoryConstants.allCategoryTypes.Income;
@@ -721,6 +845,38 @@ function getAllFilteredAccountsBalance(categorizedAccounts, accountFilter) {
    return ret;
 }

+function makeButtonCopyToClipboard({ text, el, successCallback, errorCallback }) {
+    const clipboard = new Clipboard(el, {
+        text: function () {
+            return text;
+        }
+    });
+
+    clipboard.on('success', (e) => {
+        if (successCallback) {
+            successCallback(e);
+        }
+    });
+
+    clipboard.on('error', (e) => {
+        if (errorCallback) {
+            errorCallback(e);
+        }
+    });
+
+    return clipboard;
+}
+
+function changeClipboardObjectText(clipboard, text) {
+    if (!clipboard) {
+        return;
+    }
+
+    clipboard.text = function () {
+        return text;
+    };
+}
+
 export default {
    isFunction,
    isObject,
@@ -739,7 +895,9 @@ export default {
    getActualUnixTimeForStore,
    getDummyUnixTimeForLocalUsage,
    getCurrentUnixTime,
+    getCurrentDateTime,
    parseDateFromUnixTime,
+    is24HourFormat,
    formatUnixTime,
    formatTime,
    getUnixTime,
@@ -773,14 +931,20 @@ export default {
    numericCurrencyToString,
    stringCurrencyToNumeric,
    getExchangedAmount,
+    formatPercent,
+    limitText,
    base64encode,
    arrayBufferToString,
    stringToArrayBuffer,
+    getNameByKeyValue,
    generateRandomString,
    parseUserAgent,
+    parseDeviceInfo,
    transactionTypeToCategroyType,
    categroyTypeToTransactionType,
    getCategoryInfo,
    getCategorizedAccounts,
    getAllFilteredAccountsBalance,
+    makeButtonCopyToClipboard,
+    changeClipboardObjectText,
 };
@@ -1,15 +1,15 @@
 export default {
    getVersion: () => {
-        let version = process.env.VERSION || 'unknown';
-        let commitHash = process.env.COMMIT_HASH;
+        let version = __EZBOOKKEEPING_VERSION__ || 'unknown'; // eslint-disable-line
+        let commitHash = __EZBOOKKEEPING_BUILD_COMMIT_HASH__; // eslint-disable-line

        if (commitHash) {
-            return `${version} (${commitHash.substr(0, Math.min(7, commitHash.length))})`
+            return `${version} (${commitHash.substring(0, Math.min(7, commitHash.length))})`
        } else {
            return version;
        }
    },
    getBuildTime: () => {
-        return process.env.BUILD_UNIXTIME;
+        return __EZBOOKKEEPING_BUILD_UNIX_TIME__; // eslint-disable-line
    }
 };