mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 00:12:11 +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
+250
-445
@@ -1,54 +1,80 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import { createApp } from 'vue';
|
||||
import { createStore } from 'vuex';
|
||||
import { createI18n } from 'vue-i18n';
|
||||
|
||||
import VueI18n from 'vue-i18n';
|
||||
import PincodeInput from 'vue-pincode-input';
|
||||
import VueClipboard from 'vue-clipboard2';
|
||||
import moment from "moment-timezone";
|
||||
|
||||
import moment from 'moment-timezone';
|
||||
import Framework7 from 'framework7/lite';
|
||||
import Framework7Dialog from 'framework7/components/dialog';
|
||||
import Framework7Popup from 'framework7/components/popup';
|
||||
import Framework7LoginScreen from 'framework7/components/login-screen';
|
||||
import Framework7Popover from 'framework7/components/popover';
|
||||
import Framework7Actions from 'framework7/components/actions';
|
||||
import Framework7Sheet from 'framework7/components/sheet';
|
||||
import Framework7Toast from 'framework7/components/toast';
|
||||
import Framework7Preloader from 'framework7/components/preloader';
|
||||
import Framework7Progressbar from 'framework7/components/progressbar';
|
||||
import Framework7Sortable from 'framework7/components/sortable';
|
||||
import Framework7Swipeout from 'framework7/components/swipeout';
|
||||
import Framework7Accordion from 'framework7/components/accordion';
|
||||
import Framework7Card from 'framework7/components/card';
|
||||
import Framework7Chip from 'framework7/components/chip';
|
||||
import Framework7Form from 'framework7/components/form';
|
||||
import Framework7Input from 'framework7/components/input';
|
||||
import Framework7Checkbox from 'framework7/components/checkbox';
|
||||
import Framework7Radio from 'framework7/components/radio';
|
||||
import Framework7Toggle from 'framework7/components/toggle';
|
||||
import Framework7SmartSelect from 'framework7/components/smart-select';
|
||||
import Framework7Grid from 'framework7/components/grid';
|
||||
import Framework7Picker from 'framework7/components/picker';
|
||||
import Framework7InfiniteScroll from 'framework7/components/infinite-scroll';
|
||||
import Framework7PullToRefresh from 'framework7/components/pull-to-refresh';
|
||||
import Framework7Searchbar from 'framework7/components/searchbar';
|
||||
import Framework7Tooltip from 'framework7/components/tooltip';
|
||||
import Framework7Skeleton from 'framework7/components/skeleton';
|
||||
import Framework7Treeview from 'framework7/components/treeview';
|
||||
import Framework7Typography from 'framework7/components/typography';
|
||||
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
|
||||
|
||||
import Framework7 from 'framework7/framework7-lite.esm.js';
|
||||
import Framework7Dialog from 'framework7/components/dialog/dialog';
|
||||
import Framework7Popup from 'framework7/components/popup/popup';
|
||||
import Framework7LoginScreen from 'framework7/components/login-screen/login-screen';
|
||||
import Framework7Popover from 'framework7/components/popover/popover';
|
||||
import Framework7Actions from 'framework7/components/actions/actions';
|
||||
import Framework7Sheet from 'framework7/components/sheet/sheet';
|
||||
import Framework7Toast from 'framework7/components/toast/toast';
|
||||
import Framework7Preloader from 'framework7/components/preloader/preloader';
|
||||
import Framework7Progressbar from 'framework7/components/progressbar/progressbar';
|
||||
import Framework7Sortable from 'framework7/components/sortable/sortable';
|
||||
import Framework7Swipeout from 'framework7/components/swipeout/swipeout';
|
||||
import Framework7Accordion from 'framework7/components/accordion/accordion';
|
||||
import Framework7Card from 'framework7/components/card/card';
|
||||
import Framework7Chip from 'framework7/components/chip/chip';
|
||||
import Framework7Form from 'framework7/components/form/form';
|
||||
import Framework7Input from 'framework7/components/input/input';
|
||||
import Framework7Checkbox from 'framework7/components/checkbox/checkbox';
|
||||
import Framework7Radio from 'framework7/components/radio/radio';
|
||||
import Framework7Toggle from 'framework7/components/toggle/toggle';
|
||||
import Framework7SmartSelect from 'framework7/components/smart-select/smart-select';
|
||||
import Framework7Grid from 'framework7/components/grid/grid';
|
||||
import Framework7Calendar from 'framework7/components/calendar/calendar';
|
||||
import Framework7Picker from 'framework7/components/picker/picker';
|
||||
import Framework7InfiniteScroll from 'framework7/components/infinite-scroll/infinite-scroll';
|
||||
import Framework7PullToRefresh from 'framework7/components/pull-to-refresh/pull-to-refresh';
|
||||
import Framework7Searchbar from 'framework7/components/searchbar/searchbar';
|
||||
import Framework7Tooltip from 'framework7/components/tooltip/tooltip';
|
||||
import Framework7Skeleton from 'framework7/components/skeleton/skeleton';
|
||||
import Framework7Menu from 'framework7/components/menu/menu';
|
||||
import Framework7Treeview from 'framework7/components/treeview/treeview';
|
||||
import Framework7Typography from 'framework7/components/typography/typography';
|
||||
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
|
||||
import 'framework7/css';
|
||||
import 'framework7/components/dialog/css';
|
||||
import 'framework7/components/popup/css';
|
||||
import 'framework7/components/login-screen/css';
|
||||
import 'framework7/components/popover/css';
|
||||
import 'framework7/components/actions/css';
|
||||
import 'framework7/components/sheet/css';
|
||||
import 'framework7/components/toast/css';
|
||||
import 'framework7/components/preloader/css';
|
||||
import 'framework7/components/progressbar/css';
|
||||
import 'framework7/components/sortable/css';
|
||||
import 'framework7/components/swipeout/css';
|
||||
import 'framework7/components/accordion/css';
|
||||
import 'framework7/components/card/css';
|
||||
import 'framework7/components/chip/css';
|
||||
import 'framework7/components/form/css';
|
||||
import 'framework7/components/input/css';
|
||||
import 'framework7/components/checkbox/css';
|
||||
import 'framework7/components/radio/css';
|
||||
import 'framework7/components/toggle/css';
|
||||
import 'framework7/components/smart-select/css';
|
||||
import 'framework7/components/grid/css';
|
||||
import 'framework7/components/picker/css';
|
||||
import 'framework7/components/infinite-scroll/css';
|
||||
import 'framework7/components/pull-to-refresh/css';
|
||||
import 'framework7/components/searchbar/css';
|
||||
import 'framework7/components/tooltip/css';
|
||||
import 'framework7/components/skeleton/css';
|
||||
import 'framework7/components/treeview/css';
|
||||
import 'framework7/components/typography/css';
|
||||
|
||||
import 'framework7/css/framework7.bundle.css';
|
||||
import 'framework7-icons';
|
||||
|
||||
import 'line-awesome/dist/line-awesome/css/line-awesome.css';
|
||||
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
import api from './consts/api.js';
|
||||
import datetime from './consts/datetime.js';
|
||||
import timezone from './consts/timezone.js';
|
||||
import currency from './consts/currency.js';
|
||||
import colors from './consts/color.js';
|
||||
import icons from './consts/icon.js';
|
||||
@@ -65,35 +91,42 @@ import services from './lib/services.js';
|
||||
import userstate from './lib/userstate.js';
|
||||
import webauthn from './lib/webauthn.js';
|
||||
import utils from './lib/utils.js';
|
||||
import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
|
||||
import {
|
||||
getAllLanguageInfos,
|
||||
getLanguageInfo,
|
||||
getDefaultLanguage,
|
||||
transateIf,
|
||||
getAllLongMonthNames,
|
||||
getAllShortMonthNames,
|
||||
getAllLongWeekdayNames,
|
||||
getAllShortWeekdayNames,
|
||||
getAllMinWeekdayNames,
|
||||
getAllTimezones,
|
||||
getAllCurrencies,
|
||||
getDisplayCurrency,
|
||||
getI18nOptions,
|
||||
} from './lib/i18n.js';
|
||||
import {
|
||||
showAlert,
|
||||
showConfirm,
|
||||
showToast,
|
||||
showLoading,
|
||||
hideLoading,
|
||||
routeBackOnError,
|
||||
elements,
|
||||
isModalShowing,
|
||||
onSwipeoutDeleted
|
||||
} from './lib/mobile/ui.js';
|
||||
|
||||
import stores from './store/index.js';
|
||||
|
||||
import localizedFilter from './filters/localized.js';
|
||||
import momentFilter from './filters/moment.js';
|
||||
import percentFilter from './filters/percent.js';
|
||||
import formatFilter from './filters/format.js';
|
||||
import optionNameFilter from './filters/optionName.js';
|
||||
import itemFieldContentFilter from './filters/itemFieldContent.js';
|
||||
import languageNameFilter from './filters/languageName.js';
|
||||
import currencyFilter from './filters/currency.js';
|
||||
import exchangeRateFilter from './filters/exchangeRate.js';
|
||||
import utcOffsetFilter from './filters/utcOffset.js';
|
||||
import textLimitFilter from './filters/textLimit.js';
|
||||
import iconFilter from './filters/icon.js';
|
||||
import iconStyleFilter from './filters/iconStyle.js';
|
||||
import defaultIconColorFilter from './filters/defaultIconColor.js';
|
||||
import accountIconFilter from './filters/accountIcon.js';
|
||||
import accountIconStyleFilter from './filters/accountIconStyle.js';
|
||||
import categoryIconFilter from './filters/categoryIcon.js';
|
||||
import categoryIconStyleFilter from './filters/categoryIconStyle.js';
|
||||
import tokenDeviceFilter from './filters/tokenDevice.js';
|
||||
import tokenIconFilter from './filters/tokenIcon.js';
|
||||
|
||||
import ItemIcon from './components/mobile/ItemIcon.vue';
|
||||
import PieChart from './components/mobile/PieChart.vue';
|
||||
import PinCodeInput from './components/mobile/PinCodeInput.vue';
|
||||
import PinCodeInputSheet from './components/mobile/PinCodeInputSheet.vue';
|
||||
import PasswordInputSheet from './components/mobile/PasswordInputSheet.vue';
|
||||
import PasscodeInputSheet from './components/mobile/PasscodeInputSheet.vue';
|
||||
import PinCodeInputSheet from './components/mobile/PinCodeInputSheet.vue';
|
||||
import DateTimeSelectionSheet from './components/mobile/DateTimeSelectionSheet.vue';
|
||||
import DateRangeSelectionSheet from './components/mobile/DateRangeSelectionSheet.vue';
|
||||
import ListItemSelectionSheet from './components/mobile/ListItemSelectionSheet.vue';
|
||||
import TwoColumnListItemSelectionSheet from './components/mobile/TwoColumnListItemSelectionSheet.vue';
|
||||
@@ -104,93 +137,136 @@ import InformationSheet from './components/mobile/InformationSheet.vue';
|
||||
import NumberPadSheet from './components/mobile/NumberPadSheet.vue';
|
||||
import TransactionTagSelectionSheet from './components/mobile/TransactionTagSelectionSheet.vue';
|
||||
|
||||
import TextareaAutoSize from "./directives/mobile/textareaAutoSize.js";
|
||||
|
||||
import App from './Mobile.vue';
|
||||
|
||||
Framework7.use(Framework7Dialog);
|
||||
Framework7.use(Framework7Popup);
|
||||
Framework7.use(Framework7LoginScreen);
|
||||
Framework7.use(Framework7Popover);
|
||||
Framework7.use(Framework7Actions);
|
||||
Framework7.use(Framework7Sheet);
|
||||
Framework7.use(Framework7Toast);
|
||||
Framework7.use(Framework7Preloader);
|
||||
Framework7.use(Framework7Progressbar);
|
||||
Framework7.use(Framework7Sortable);
|
||||
Framework7.use(Framework7Swipeout);
|
||||
Framework7.use(Framework7Accordion);
|
||||
Framework7.use(Framework7Card);
|
||||
Framework7.use(Framework7Chip);
|
||||
Framework7.use(Framework7Form);
|
||||
Framework7.use(Framework7Input);
|
||||
Framework7.use(Framework7Checkbox);
|
||||
Framework7.use(Framework7Radio);
|
||||
Framework7.use(Framework7Toggle);
|
||||
Framework7.use(Framework7SmartSelect);
|
||||
Framework7.use(Framework7Grid);
|
||||
Framework7.use(Framework7Calendar);
|
||||
Framework7.use(Framework7Picker);
|
||||
Framework7.use(Framework7InfiniteScroll);
|
||||
Framework7.use(Framework7PullToRefresh);
|
||||
Framework7.use(Framework7Searchbar);
|
||||
Framework7.use(Framework7Tooltip);
|
||||
Framework7.use(Framework7Skeleton);
|
||||
Framework7.use(Framework7Menu);
|
||||
Framework7.use(Framework7Treeview);
|
||||
Framework7.use(Framework7Typography);
|
||||
Framework7.use(Framework7Vue);
|
||||
Framework7.use([
|
||||
Framework7Dialog,
|
||||
Framework7Popup,
|
||||
Framework7LoginScreen,
|
||||
Framework7Popover,
|
||||
Framework7Actions,
|
||||
Framework7Sheet,
|
||||
Framework7Toast,
|
||||
Framework7Preloader,
|
||||
Framework7Progressbar,
|
||||
Framework7Sortable,
|
||||
Framework7Swipeout,
|
||||
Framework7Accordion,
|
||||
Framework7Card,
|
||||
Framework7Chip,
|
||||
Framework7Form,
|
||||
Framework7Input,
|
||||
Framework7Checkbox,
|
||||
Framework7Radio,
|
||||
Framework7Toggle,
|
||||
Framework7SmartSelect,
|
||||
Framework7Grid,
|
||||
Framework7Picker,
|
||||
Framework7InfiniteScroll,
|
||||
Framework7PullToRefresh,
|
||||
Framework7Searchbar,
|
||||
Framework7Tooltip,
|
||||
Framework7Skeleton,
|
||||
Framework7Treeview,
|
||||
Framework7Typography,
|
||||
Framework7Vue
|
||||
]);
|
||||
|
||||
Vue.use(Vuex);
|
||||
Vue.use(VueI18n);
|
||||
Vue.use(VueClipboard);
|
||||
const app = createApp(App);
|
||||
const store = createStore(stores);
|
||||
const i18n = createI18n(getI18nOptions());
|
||||
registerComponents(app);
|
||||
app.use(store);
|
||||
app.use(i18n);
|
||||
|
||||
Vue.component('PincodeInput', PincodeInput);
|
||||
Vue.component('PieChart', PieChart);
|
||||
Vue.component('PasswordInputSheet', PasswordInputSheet);
|
||||
Vue.component('PasscodeInputSheet', PasscodeInputSheet);
|
||||
Vue.component('PinCodeInputSheet', PinCodeInputSheet);
|
||||
Vue.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
|
||||
Vue.component('ListItemSelectionSheet', ListItemSelectionSheet);
|
||||
Vue.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
|
||||
Vue.component('TreeViewSelectionSheet', TreeViewSelectionSheet);
|
||||
Vue.component('IconSelectionSheet', IconSelectionSheet);
|
||||
Vue.component('ColorSelectionSheet', ColorSelectionSheet);
|
||||
Vue.component('InformationSheet', InformationSheet);
|
||||
Vue.component('NumberPadSheet', NumberPadSheet);
|
||||
Vue.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
|
||||
function setLanguage(locale) {
|
||||
if (settings.getLanguage() !== locale) {
|
||||
settings.setLanguage(locale);
|
||||
}
|
||||
|
||||
Vue.filter('localized', (value, options) => localizedFilter({ i18n }, value, options));
|
||||
Vue.filter('moment', (value, format, options) => momentFilter(value, format, options));
|
||||
Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(value, precision, lowPrecisionValue));
|
||||
Vue.filter('format', (value, format) => formatFilter(value, format));
|
||||
Vue.filter('optionName', (value, options, keyField, nameField, defaultName) => optionNameFilter(value, options, keyField, nameField, defaultName));
|
||||
Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
|
||||
Vue.filter('languageName', (languageCode) => languageNameFilter(languageCode));
|
||||
Vue.filter('currency', (value, currencyCode, notConvertValue) => currencyFilter({ i18n }, value, currencyCode, notConvertValue));
|
||||
Vue.filter('exchangeRate', (value, currentCurrency, allExchangeRates) => exchangeRateFilter(value, currentCurrency, allExchangeRates));
|
||||
Vue.filter('utcOffset', (value) => utcOffsetFilter(value));
|
||||
Vue.filter('textLimit', (value, maxLength) => textLimitFilter(value, maxLength));
|
||||
Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
|
||||
Vue.filter('iconStyle', (value, iconType, defaultColor, additionalFieldName) => iconStyleFilter(value, iconType, defaultColor, additionalFieldName));
|
||||
Vue.filter('defaultIconColor', (value, defaultColor) => defaultIconColorFilter(value, defaultColor));
|
||||
Vue.filter('accountIcon', (value) => accountIconFilter(value));
|
||||
Vue.filter('accountIconStyle', (value, defaultColor, additionalFieldName) => accountIconStyleFilter(value, defaultColor, additionalFieldName));
|
||||
Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
|
||||
Vue.filter('categoryIconStyle', (value, defaultColor, additionalFieldName) => categoryIconStyleFilter(value, defaultColor, additionalFieldName));
|
||||
Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));
|
||||
Vue.filter('tokenIcon', (value) => tokenIconFilter(value));
|
||||
i18n.global.locale.value = locale;
|
||||
moment.locale(locale, {
|
||||
months : app.config.globalProperties.$locale.getAllLongMonthNames(),
|
||||
monthsShort : app.config.globalProperties.$locale.getAllShortMonthNames(),
|
||||
weekdays : app.config.globalProperties.$locale.getAllLongWeekdayNames(),
|
||||
weekdaysShort : app.config.globalProperties.$locale.getAllShortWeekdayNames(),
|
||||
weekdaysMin : app.config.globalProperties.$locale.getAllMinWeekdayNames(),
|
||||
});
|
||||
services.setLocale(locale);
|
||||
document.querySelector('html').setAttribute('lang', locale);
|
||||
|
||||
const store = new Vuex.Store(stores);
|
||||
const i18n = new VueI18n(getI18nOptions());
|
||||
const defaultCurrency = i18n.global.t('default.currency');
|
||||
const defaultFirstDayOfWeekName = i18n.global.t('default.firstDayOfWeek');
|
||||
let defaultFirstDayOfWeek = datetime.defaultFirstDayOfWeek;
|
||||
|
||||
Vue.prototype.$version = version.getVersion();
|
||||
Vue.prototype.$buildTime = version.getBuildTime();
|
||||
if (datetime.allWeekDays[defaultFirstDayOfWeekName]) {
|
||||
defaultFirstDayOfWeek = datetime.allWeekDays[defaultFirstDayOfWeekName].type;
|
||||
}
|
||||
|
||||
Vue.prototype.$licenses = {
|
||||
store.dispatch('updateLocalizedDefaultSettings', { defaultCurrency, defaultFirstDayOfWeek });
|
||||
|
||||
return locale;
|
||||
}
|
||||
|
||||
function setTimezone(timezone) {
|
||||
if (timezone) {
|
||||
settings.setTimezone(timezone);
|
||||
moment.tz.setDefault(timezone);
|
||||
} else {
|
||||
settings.setTimezone('');
|
||||
moment.tz.setDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function initLocale() {
|
||||
if (settings.getLanguage()) {
|
||||
logger.info(`Current language is ${settings.getLanguage()}`);
|
||||
setLanguage(settings.getLanguage());
|
||||
} else {
|
||||
logger.info(`No language is set, use browser default ${getDefaultLanguage()}`);
|
||||
setLanguage(getDefaultLanguage());
|
||||
}
|
||||
|
||||
if (settings.getTimezone()) {
|
||||
logger.info(`Current timezone is ${settings.getTimezone()}`);
|
||||
setTimezone(settings.getTimezone());
|
||||
} else {
|
||||
logger.info(`No timezone is set, use browser default ${utils.getTimezoneOffset()} (maybe ${moment.tz.guess(true)})`);
|
||||
}
|
||||
}
|
||||
|
||||
app.component('VueDatePicker', VueDatePicker);
|
||||
|
||||
app.component('ItemIcon', ItemIcon);
|
||||
app.component('PieChart', PieChart);
|
||||
app.component('PinCodeInput', PinCodeInput);
|
||||
app.component('PinCodeInputSheet', PinCodeInputSheet);
|
||||
app.component('PasswordInputSheet', PasswordInputSheet);
|
||||
app.component('PasscodeInputSheet', PasscodeInputSheet);
|
||||
app.component('DateTimeSelectionSheet', DateTimeSelectionSheet);
|
||||
app.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
|
||||
app.component('ListItemSelectionSheet', ListItemSelectionSheet);
|
||||
app.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
|
||||
app.component('TreeViewSelectionSheet', TreeViewSelectionSheet);
|
||||
app.component('IconSelectionSheet', IconSelectionSheet);
|
||||
app.component('ColorSelectionSheet', ColorSelectionSheet);
|
||||
app.component('InformationSheet', InformationSheet);
|
||||
app.component('NumberPadSheet', NumberPadSheet);
|
||||
app.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
|
||||
|
||||
app.directive('TextareaAutoSize', TextareaAutoSize);
|
||||
|
||||
app.config.globalProperties.$version = version.getVersion();
|
||||
app.config.globalProperties.$buildTime = version.getBuildTime();
|
||||
|
||||
app.config.globalProperties.$licenses = {
|
||||
license: licenses.getLicense(),
|
||||
thirdPartyLicenses: licenses.getThirdPartyLicenses()
|
||||
};
|
||||
|
||||
Vue.prototype.$constants = {
|
||||
app.config.globalProperties.$constants = {
|
||||
api: api,
|
||||
datetime: datetime,
|
||||
currency: currency,
|
||||
@@ -202,314 +278,43 @@ Vue.prototype.$constants = {
|
||||
statistics: statistics,
|
||||
};
|
||||
|
||||
Vue.prototype.$utilities = utils;
|
||||
Vue.prototype.$logger = logger;
|
||||
Vue.prototype.$webauthn = webauthn;
|
||||
Vue.prototype.$settings = settings;
|
||||
Vue.prototype.$locale = {
|
||||
defaultTimezoneOffset: utils.getTimezoneOffset(),
|
||||
defaultTimezoneOffsetMinutes: utils.getTimezoneOffsetMinutes(),
|
||||
app.config.globalProperties.$utilities = utils;
|
||||
app.config.globalProperties.$logger = logger;
|
||||
app.config.globalProperties.$webauthn = webauthn;
|
||||
app.config.globalProperties.$settings = settings;
|
||||
app.config.globalProperties.$locale = {
|
||||
getDefaultLanguage: getDefaultLanguage,
|
||||
getAllLanguages: getAllLanguages,
|
||||
getAllLongMonthNames: function () {
|
||||
return [
|
||||
i18n.t('datetime.January.long'),
|
||||
i18n.t('datetime.February.long'),
|
||||
i18n.t('datetime.March.long'),
|
||||
i18n.t('datetime.April.long'),
|
||||
i18n.t('datetime.May.long'),
|
||||
i18n.t('datetime.June.long'),
|
||||
i18n.t('datetime.July.long'),
|
||||
i18n.t('datetime.August.long'),
|
||||
i18n.t('datetime.September.long'),
|
||||
i18n.t('datetime.October.long'),
|
||||
i18n.t('datetime.November.long'),
|
||||
i18n.t('datetime.December.long')
|
||||
];
|
||||
},
|
||||
getAllShortMonthNames: function () {
|
||||
return [
|
||||
i18n.t('datetime.January.short'),
|
||||
i18n.t('datetime.February.short'),
|
||||
i18n.t('datetime.March.short'),
|
||||
i18n.t('datetime.April.short'),
|
||||
i18n.t('datetime.May.short'),
|
||||
i18n.t('datetime.June.short'),
|
||||
i18n.t('datetime.July.short'),
|
||||
i18n.t('datetime.August.short'),
|
||||
i18n.t('datetime.September.short'),
|
||||
i18n.t('datetime.October.short'),
|
||||
i18n.t('datetime.November.short'),
|
||||
i18n.t('datetime.December.short')
|
||||
];
|
||||
},
|
||||
getAllLongWeekdayNames: function () {
|
||||
return [
|
||||
i18n.t('datetime.Sunday.long'),
|
||||
i18n.t('datetime.Monday.long'),
|
||||
i18n.t('datetime.Tuesday.long'),
|
||||
i18n.t('datetime.Wednesday.long'),
|
||||
i18n.t('datetime.Thursday.long'),
|
||||
i18n.t('datetime.Friday.long'),
|
||||
i18n.t('datetime.Saturday.long')
|
||||
];
|
||||
},
|
||||
getAllShortWeekdayNames: function () {
|
||||
return [
|
||||
i18n.t('datetime.Sunday.short'),
|
||||
i18n.t('datetime.Monday.short'),
|
||||
i18n.t('datetime.Tuesday.short'),
|
||||
i18n.t('datetime.Wednesday.short'),
|
||||
i18n.t('datetime.Thursday.short'),
|
||||
i18n.t('datetime.Friday.short'),
|
||||
i18n.t('datetime.Saturday.short')
|
||||
];
|
||||
},
|
||||
getAllMinWeekdayNames: function () {
|
||||
return [
|
||||
i18n.t('datetime.Sunday.min'),
|
||||
i18n.t('datetime.Monday.min'),
|
||||
i18n.t('datetime.Tuesday.min'),
|
||||
i18n.t('datetime.Wednesday.min'),
|
||||
i18n.t('datetime.Thursday.min'),
|
||||
i18n.t('datetime.Friday.min'),
|
||||
i18n.t('datetime.Saturday.min')
|
||||
];
|
||||
},
|
||||
getInputTimeIntlDateTimeFormatOptions: function () {
|
||||
const hourMinuteFormat = i18n.t('input-format.datetime.long');
|
||||
const is24HourFormat = hourMinuteFormat.indexOf('H') > 0;
|
||||
const hour2Digits = (hourMinuteFormat.indexOf('HH') > 0) || (hourMinuteFormat.indexOf('hh') > 0);
|
||||
const minute2Digits = hourMinuteFormat.indexOf(':mm') > 0;
|
||||
getAllLanguageInfos: getAllLanguageInfos,
|
||||
getLanguageInfo: getLanguageInfo,
|
||||
getAllLongMonthNames: () => getAllLongMonthNames(i18n.global.t),
|
||||
getAllShortMonthNames: () => getAllShortMonthNames(i18n.global.t),
|
||||
getAllLongWeekdayNames: () => getAllLongWeekdayNames(i18n.global.t),
|
||||
getAllShortWeekdayNames: () => getAllShortWeekdayNames(i18n.global.t),
|
||||
getAllMinWeekdayNames: () => getAllMinWeekdayNames(i18n.global.t),
|
||||
setLanguage: setLanguage,
|
||||
getTimezone: settings.getTimezone,
|
||||
setTimezone: setTimezone,
|
||||
getAllTimezones: (includeSystemDefault) => getAllTimezones(includeSystemDefault, i18n.global.t),
|
||||
getAllCurrencies: () => getAllCurrencies(i18n.global.t),
|
||||
getDisplayCurrency: (value, currencyCode, notConvertValue) => getDisplayCurrency(value, currencyCode, notConvertValue, i18n.global.t),
|
||||
initLocale: initLocale
|
||||
};
|
||||
app.config.globalProperties.$tIf = (text, isTranslate) => transateIf(text, isTranslate, i18n.global.t);
|
||||
|
||||
return {
|
||||
hour12: !is24HourFormat,
|
||||
hour: hour2Digits ? '2-digit' : 'numeric',
|
||||
minute: minute2Digits ? '2-digit' : 'numeric'
|
||||
}
|
||||
},
|
||||
getLanguage: getLanguage,
|
||||
setLanguage: function (locale) {
|
||||
if (settings.getLanguage() !== locale) {
|
||||
settings.setLanguage(locale);
|
||||
}
|
||||
|
||||
i18n.locale = locale;
|
||||
moment.locale(locale, {
|
||||
months : this.getAllLongMonthNames(),
|
||||
monthsShort : this.getAllShortMonthNames(),
|
||||
weekdays : this.getAllLongWeekdayNames(),
|
||||
weekdaysShort : this.getAllShortWeekdayNames(),
|
||||
weekdaysMin : this.getAllMinWeekdayNames(),
|
||||
});
|
||||
services.setLocale(locale);
|
||||
document.querySelector('html').setAttribute('lang', locale);
|
||||
|
||||
const defaultCurrency = i18n.t('default.currency');
|
||||
const defaultFirstDayOfWeekName = i18n.t('default.firstDayOfWeek');
|
||||
let defaultFirstDayOfWeek = datetime.defaultFirstDayOfWeek;
|
||||
|
||||
if (datetime.allWeekDays[defaultFirstDayOfWeekName]) {
|
||||
defaultFirstDayOfWeek = datetime.allWeekDays[defaultFirstDayOfWeekName].type;
|
||||
}
|
||||
|
||||
store.dispatch('updateLocalizedDefaultSettings', { defaultCurrency, defaultFirstDayOfWeek });
|
||||
|
||||
return locale;
|
||||
},
|
||||
getTimezone: function () {
|
||||
return settings.getTimezone();
|
||||
},
|
||||
setTimezone: function (timezone) {
|
||||
if (timezone) {
|
||||
settings.setTimezone(timezone);
|
||||
moment.tz.setDefault(timezone);
|
||||
} else {
|
||||
settings.setTimezone('');
|
||||
moment.tz.setDefault();
|
||||
}
|
||||
},
|
||||
getAllTimezones: function (includeSystemDefault) {
|
||||
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: i18n.t(`timezone.${allTimezones[i].displayName}`)
|
||||
});
|
||||
}
|
||||
|
||||
if (includeSystemDefault) {
|
||||
allTimezoneInfos.push({
|
||||
name: '',
|
||||
utcOffset: this.defaultTimezoneOffset,
|
||||
utcOffsetMinutes: this.defaultTimezoneOffsetMinutes,
|
||||
displayName: i18n.t('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;
|
||||
},
|
||||
getAllCurrencies: function () {
|
||||
const allCurrencyCodes = currency.all;
|
||||
const allCurrencies = [];
|
||||
|
||||
for (let currencyCode in allCurrencyCodes) {
|
||||
if (!Object.prototype.hasOwnProperty.call(allCurrencyCodes, currencyCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
allCurrencies.push({
|
||||
code: currencyCode,
|
||||
displayName: i18n.t(`currency.${currencyCode}`)
|
||||
});
|
||||
}
|
||||
|
||||
allCurrencies.sort(function(c1, c2){
|
||||
return c1.displayName.localeCompare(c2.displayName);
|
||||
})
|
||||
|
||||
return allCurrencies;
|
||||
},
|
||||
init: function () {
|
||||
if (settings.getLanguage()) {
|
||||
logger.info(`Current language is ${settings.getLanguage()}`);
|
||||
this.setLanguage(settings.getLanguage());
|
||||
} else {
|
||||
logger.info(`No language is set, use browser default ${getDefaultLanguage()}`);
|
||||
this.setLanguage(getDefaultLanguage());
|
||||
}
|
||||
|
||||
if (settings.getTimezone()) {
|
||||
logger.info(`Current timezone is ${settings.getTimezone()}`);
|
||||
this.setTimezone(settings.getTimezone());
|
||||
} else {
|
||||
logger.info(`No timezone is set, use browser default ${utils.getTimezoneOffset()} (maybe ${moment.tz.guess(true)})`);
|
||||
}
|
||||
}
|
||||
app.config.globalProperties.$alert = (message, confirmCallback) => showAlert(message, confirmCallback, i18n.global.t);
|
||||
app.config.globalProperties.$confirm = (message, confirmCallback, cancelCallback) => showConfirm(message, confirmCallback, cancelCallback, i18n.global.t);
|
||||
app.config.globalProperties.$toast = (message, timeout) => showToast(message, timeout, i18n.global.t);
|
||||
app.config.globalProperties.$showLoading = showLoading;
|
||||
app.config.globalProperties.$hideLoading = hideLoading;
|
||||
app.config.globalProperties.$routeBackOnError = routeBackOnError;
|
||||
app.config.globalProperties.$ui = {
|
||||
elements: elements,
|
||||
isModalShowing: isModalShowing,
|
||||
onSwipeoutDeleted: onSwipeoutDeleted
|
||||
};
|
||||
|
||||
Vue.prototype.$alert = function (message, confirmCallback) {
|
||||
let parameters = {};
|
||||
app.config.globalProperties.$user = userstate;
|
||||
|
||||
if (message && message.error) {
|
||||
const localizedError = getLocalizedError(message.error);
|
||||
message = localizedError.message;
|
||||
parameters = getLocalizedErrorParameters(localizedError.parameters, s => i18n.t(s));
|
||||
}
|
||||
app.config.globalProperties.$locale.initLocale();
|
||||
|
||||
this.$f7.dialog.create({
|
||||
title: i18n.t('global.app.title'),
|
||||
text: i18n.t(message, parameters),
|
||||
animate: settings.isEnableAnimate(),
|
||||
buttons: [
|
||||
{
|
||||
text: i18n.t('OK'),
|
||||
onClick: confirmCallback
|
||||
}
|
||||
]
|
||||
}).open();
|
||||
};
|
||||
Vue.prototype.$confirm = function (message, confirmCallback, cancelCallback) {
|
||||
this.$f7.dialog.create({
|
||||
title: i18n.t('global.app.title'),
|
||||
text: i18n.t(message),
|
||||
animate: settings.isEnableAnimate(),
|
||||
buttons: [
|
||||
{
|
||||
text: i18n.t('Cancel'),
|
||||
onClick: cancelCallback
|
||||
},
|
||||
{
|
||||
text: i18n.t('OK'),
|
||||
onClick: confirmCallback
|
||||
}
|
||||
]
|
||||
}).open();
|
||||
};
|
||||
Vue.prototype.$toast = function (message, timeout) {
|
||||
let parameters = {};
|
||||
|
||||
if (message && message.error) {
|
||||
const localizedError = getLocalizedError(message.error);
|
||||
message = localizedError.message;
|
||||
parameters = getLocalizedErrorParameters(localizedError.parameters, s => i18n.t(s));
|
||||
}
|
||||
|
||||
this.$f7.toast.create({
|
||||
text: i18n.t(message, parameters),
|
||||
position: 'center',
|
||||
closeTimeout: timeout || 1500
|
||||
}).open();
|
||||
};
|
||||
Vue.prototype.$showLoading = function (delayConditionFunc, delayMills) {
|
||||
if (!delayConditionFunc) {
|
||||
return this.$f7.preloader.show();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (delayConditionFunc()) {
|
||||
this.$f7.preloader.show();
|
||||
}
|
||||
}, delayMills || 200);
|
||||
};
|
||||
Vue.prototype.$hideLoading = function () {
|
||||
return this.$f7.preloader.hide();
|
||||
};
|
||||
Vue.prototype.$routeBackOnError = function (errorPropertyName) {
|
||||
const self = this;
|
||||
const router = self.$f7router;
|
||||
|
||||
const unwatch = self.$watch(errorPropertyName, () => {
|
||||
if (self[errorPropertyName]) {
|
||||
setTimeout(() => {
|
||||
if (unwatch) {
|
||||
unwatch();
|
||||
}
|
||||
|
||||
router.back();
|
||||
}, 200);
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
};
|
||||
|
||||
Vue.prototype.$user = userstate;
|
||||
|
||||
Vue.prototype.$locale.init();
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
i18n: i18n,
|
||||
store: store,
|
||||
render: h => h(App),
|
||||
mounted: function () {
|
||||
const app = this.$f7;
|
||||
const $$ = app.$;
|
||||
|
||||
app.on('pageBeforeOut', () => {
|
||||
if ($$('.modal-in').length) {
|
||||
app.actions.close('.actions-modal.modal-in', false);
|
||||
app.dialog.close('.dialog.modal-in', false);
|
||||
app.popover.close('.popover.modal-in', false);
|
||||
app.popup.close('.popup.modal-in', false);
|
||||
app.sheet.close('.sheet-modal.modal-in', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
app.mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user