mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 09:14:27 +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
+380
-304
@@ -9,320 +9,393 @@
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Category" title="Category"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Type" title="Account Type"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Category" title="Category"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Type" title="Account Type"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-card v-else-if="!loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
link="#"
|
||||
:header="$t('Account Category')"
|
||||
:title="account.category | optionName(allAccountCategories, 'id', 'name') | localized"
|
||||
@click="showAccountCategorySheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
icon-field="defaultAccountIconId" icon-type="account"
|
||||
:title-i18n="true"
|
||||
:items="allAccountCategories"
|
||||
:show.sync="showAccountCategorySheet"
|
||||
v-model="account.category">
|
||||
</list-item-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading">
|
||||
<f7-list-item
|
||||
link="#" no-chevron
|
||||
class="list-item-with-header-and-title"
|
||||
:header="$t('Account Category')"
|
||||
:title="getAccountCategoryName(account.category)"
|
||||
@click="showAccountCategorySheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
icon-field="defaultAccountIconId" icon-type="account"
|
||||
:title-i18n="true"
|
||||
:items="allAccountCategories"
|
||||
v-model:show="showAccountCategorySheet"
|
||||
v-model="account.category">
|
||||
</list-item-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
link="#"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Account Type')"
|
||||
:title="account.type | optionName(allAccountTypes, 'id', 'name') | localized"
|
||||
:no-chevron="!!editAccountId"
|
||||
@click="showAccountTypeSheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
:items="allAccountTypes"
|
||||
:title-i18n="true"
|
||||
:show.sync="showAccountTypeSheet"
|
||||
v-model="account.type">
|
||||
</list-item-selection-sheet>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list-item
|
||||
link="#" no-chevron
|
||||
class="list-item-with-header-and-title"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Account Type')"
|
||||
:title="this.getAccountTypeName(account.type)"
|
||||
@click="showAccountTypeSheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
key-field="id" value-field="id" title-field="name"
|
||||
:items="allAccountTypes"
|
||||
:title-i18n="true"
|
||||
v-model:show="showAccountTypeSheet"
|
||||
v-model="account.type">
|
||||
</list-item-selection-sheet>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Icon" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Color" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency" title="Currency" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Balance" title="Balance" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
|
||||
<f7-list-input label="Description" type="textarea" placeholder="Your account description (optional)"></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
|
||||
<f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>Account Icon</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>Account Color</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency" title="Currency" :link="editAccountId ? null : '#'"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Balance" title="Balance"></f7-list-item>
|
||||
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
|
||||
<f7-list-input label="Description" type="textarea" placeholder="Your account description (optional)"></f7-list-input>
|
||||
</f7-list>
|
||||
|
||||
<f7-card v-else-if="!loading && account.type === $constants.account.allAccountTypes.SingleAccount">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
:value="account.name"
|
||||
@input="account.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === $constants.account.allAccountTypes.SingleAccount">
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
v-model:value="account.name"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Icon')" link="#"
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
v-model="account.icon"
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="account.showIconSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Account Icon') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Color')" link="#"
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
></color-selection-sheet>
|
||||
</f7-list-item>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:color="account.color"
|
||||
v-model:show="account.showIconSelectionSheet"
|
||||
v-model="account.icon"
|
||||
></icon-selection-sheet>
|
||||
</div>
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="account.showColorSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Account Color') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="fixed-f7" icon-id="app_fill" :color="account.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Currency')"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<f7-block slot="title" class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${account.currency}`) }} </span>
|
||||
<small class="smaller">{{ account.currency }}</small>
|
||||
</f7-block>
|
||||
<select autocomplete="transaction-currency" v-model="account.currency">
|
||||
<option v-for="currency in allCurrencies"
|
||||
:key="currency.code"
|
||||
:value="currency.code">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
v-model:show="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
></color-selection-sheet>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
:link="editAccountId ? null : '#'"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Account Balance')"
|
||||
:title="account.balance | currency(account.currency)"
|
||||
@click="account.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
:show.sync="account.showBalanceSheet"
|
||||
v-model="account.balance"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Currency')"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Name'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<div class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${account.currency}`) }} </span>
|
||||
<small class="smaller">{{ account.currency }}</small>
|
||||
</div>
|
||||
</template>
|
||||
<select autocomplete="transaction-currency" v-model="account.currency">
|
||||
<option :value="currency.code"
|
||||
:key="currency.code"
|
||||
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
<f7-list-item
|
||||
link="#" no-chevron
|
||||
class="list-item-with-header-and-title"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Account Balance')"
|
||||
:title="$locale.getDisplayCurrency(account.balance, account.currency)"
|
||||
@click="account.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
v-model:show="account.showBalanceSheet"
|
||||
v-model="account.balance"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
:value="account.comment"
|
||||
@input="account.comment = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-card v-else-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
:value="account.name"
|
||||
@input="account.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
v-textarea-auto-size
|
||||
v-model:value="account.comment"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Icon')" link="#"
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
v-model="account.icon"
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
v-model:value="account.name"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Color')" link="#"
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
></color-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="account.showIconSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Account Icon') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:color="account.color"
|
||||
v-model:show="account.showIconSelectionSheet"
|
||||
v-model="account.icon"
|
||||
></icon-selection-sheet>
|
||||
</div>
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="account.showColorSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Account Color') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="fixed-f7" icon-id="app_fill" :color="account.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
:value="account.comment"
|
||||
@input="account.comment = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
v-model:show="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
></color-selection-sheet>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
v-textarea-auto-size
|
||||
v-model:value="account.comment"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
|
||||
<f7-block class="no-padding no-margin" v-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<f7-card v-for="(subAccount, idx) in subAccounts" :key="idx">
|
||||
<f7-card-header>
|
||||
<small class="subaccount-header-content">{{ $t('Sub Account') + ' #' + (idx + 1) }}</small>
|
||||
<f7-button rasied fill color="red" icon-f7="trash" icon-size="16px"
|
||||
<f7-list strong inset dividers class="subaccount-edit-list margin-vertical"
|
||||
:key="idx"
|
||||
v-for="(subAccount, idx) in subAccounts">
|
||||
<f7-list-item group-title>
|
||||
<small>{{ $t('Sub Account') + ' #' + (idx + 1) }}</small>
|
||||
<f7-button rasied fill class="subaccount-delete-button" color="red" icon-f7="trash" icon-size="16px"
|
||||
:tooltip="$t('Remove Sub Account')"
|
||||
v-if="!editAccountId"
|
||||
@click="removeSubAccount(subAccount, false)">
|
||||
</f7-button>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Sub Account Name')"
|
||||
:placeholder="$t('Your sub account name')"
|
||||
:value="subAccount.name"
|
||||
@input="subAccount.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Sub Account Icon')" link="#"
|
||||
@click="subAccount.showIconSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="subAccount.icon | accountIcon"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="subAccount.showIconSelectionSheet"
|
||||
:color="subAccount.color"
|
||||
v-model="subAccount.icon"
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
clear-button
|
||||
:label="$t('Sub Account Name')"
|
||||
:placeholder="$t('Your sub account name')"
|
||||
v-model:value="subAccount.name"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Sub Account Color')" link="#"
|
||||
@click="subAccount.showColorSelectionSheet = true">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="subAccount.showColorSelectionSheet"
|
||||
v-model="subAccount.color"
|
||||
></color-selection-sheet>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-with-multi-item">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="subAccount.showIconSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Sub Account Icon') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Currency')"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<f7-block slot="title" class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${subAccount.currency}`) }} </span>
|
||||
<small class="smaller">{{ subAccount.currency }}</small>
|
||||
</f7-block>
|
||||
<select autocomplete="transaction-currency" v-model="subAccount.currency">
|
||||
<option v-for="currency in allCurrencies"
|
||||
:key="currency.code"
|
||||
:value="currency.code">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:color="subAccount.color"
|
||||
v-model:show="subAccount.showIconSelectionSheet"
|
||||
v-model="subAccount.icon"
|
||||
></icon-selection-sheet>
|
||||
</div>
|
||||
<div class="list-item-subitem no-chevron">
|
||||
<a class="item-link" href="#" @click="subAccount.showColorSelectionSheet = true">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-header">
|
||||
<span>{{ $t('Sub Account Color') }}</span>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<div class="list-item-custom-title no-padding">
|
||||
<ItemIcon icon-type="fixed-f7" icon-id="app_fill" :color="subAccount.color"></ItemIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
:link="editAccountId ? null : '#'"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Sub Account Balance')"
|
||||
:title="subAccount.balance | currency(subAccount.currency)"
|
||||
@click="subAccount.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
:show.sync="subAccount.showBalanceSheet"
|
||||
v-model="subAccount.balance"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
v-model:show="subAccount.showColorSelectionSheet"
|
||||
v-model="subAccount.color"
|
||||
></color-selection-sheet>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Currency')"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Name'), popupCloseLinkText: $t('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<div class="no-padding no-margin">
|
||||
<span>{{ $t(`currency.${subAccount.currency}`) }} </span>
|
||||
<small class="smaller">{{ subAccount.currency }}</small>
|
||||
</div>
|
||||
</template>
|
||||
<select autocomplete="transaction-currency" v-model="subAccount.currency">
|
||||
<option :value="currency.code"
|
||||
:key="currency.code"
|
||||
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your sub account description (optional)')"
|
||||
:value="subAccount.comment"
|
||||
@input="subAccount.comment = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list-item
|
||||
link="#" no-chevron
|
||||
class="list-item-with-header-and-title"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:header="$t('Sub Account Balance')"
|
||||
:title="$locale.getDisplayCurrency(subAccount.balance, subAccount.currency)"
|
||||
@click="subAccount.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
:max-value="$constants.transaction.maxAmount"
|
||||
v-model:show="subAccount.showBalanceSheet"
|
||||
v-model="subAccount.balance"
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input
|
||||
type="textarea"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your sub account description (optional)')"
|
||||
v-textarea-auto-size
|
||||
v-model:value="subAccount.comment"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-block>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
@@ -348,6 +421,10 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'f7route',
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
|
||||
@@ -427,7 +504,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const query = self.$f7route.query;
|
||||
const query = self.f7route.query;
|
||||
|
||||
if (query.id) {
|
||||
self.loading = true;
|
||||
@@ -484,12 +561,9 @@ export default {
|
||||
self.loading = false;
|
||||
}
|
||||
},
|
||||
updated: function () {
|
||||
this.autoChangeCommentTextareaSize();
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
this.$routeBackOnError('loadingError');
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
addSubAccount() {
|
||||
const self = this;
|
||||
@@ -536,7 +610,7 @@ export default {
|
||||
},
|
||||
save() {
|
||||
const self = this;
|
||||
const router = self.$f7router;
|
||||
const router = self.f7router;
|
||||
|
||||
let problemMessage = self.getInputEmptyProblemMessage(self.account, false);
|
||||
|
||||
@@ -622,15 +696,13 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
autoChangeCommentTextareaSize() {
|
||||
const app = this.$f7;
|
||||
const $$ = app.$;
|
||||
|
||||
$$('.textarea-auto-size textarea').each((idx, el) => {
|
||||
el.scrollTop = 0;
|
||||
el.style.height = '';
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
});
|
||||
getAccountTypeName(accountType) {
|
||||
const typeName = this.$utilities.getNameByKeyValue(this.allAccountTypes, accountType, 'id', 'name');
|
||||
return this.$t(typeName);
|
||||
},
|
||||
getAccountCategoryName(accountCategory) {
|
||||
const categoryName = this.$utilities.getNameByKeyValue(this.allAccountCategories, accountCategory, 'id', 'name');
|
||||
return this.$t(categoryName);
|
||||
},
|
||||
chooseSuitableIcon(oldCategory, newCategory) {
|
||||
const allCategories = this.$constants.account.allCategories;
|
||||
@@ -688,7 +760,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.subaccount-header-content {
|
||||
opacity: 0.6;
|
||||
.subaccount-edit-list {
|
||||
--f7-list-group-title-height: 40px;
|
||||
}
|
||||
|
||||
.subaccount-delete-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
+115
-154
@@ -18,7 +18,7 @@
|
||||
</p>
|
||||
<p class="no-margin">
|
||||
<span class="net-assets" v-if="loading">0.00 USD</span>
|
||||
<span class="net-assets" v-else-if="!loading">{{ netAssets | currency(defaultCurrency) }}</span>
|
||||
<span class="net-assets" v-else-if="!loading">{{ $locale.getDisplayCurrency(netAssets, defaultCurrency) }}</span>
|
||||
<f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
|
||||
<f7-icon :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
|
||||
</f7-link>
|
||||
@@ -29,155 +29,106 @@
|
||||
</small>
|
||||
<small class="account-overview-info" v-else-if="!loading">
|
||||
<span>{{ $t('Total assets') }}</span>
|
||||
<span>{{ totalAssets | currency(defaultCurrency) }}</span>
|
||||
<span>{{ $locale.getDisplayCurrency(totalAssets, defaultCurrency) }}</span>
|
||||
<span>|</span>
|
||||
<span>{{ $t('Total liabilities') }}</span>
|
||||
<span>{{ totalLiabilities | currency(defaultCurrency) }}</span>
|
||||
<span>{{ $locale.getDisplayCurrency(totalLiabilities, defaultCurrency) }}</span>
|
||||
</small>
|
||||
</p>
|
||||
</f7-card-header>
|
||||
</f7-card>
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-header>
|
||||
<small class="card-header-content">Account Category</small>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon slot="media" f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name</div>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="account-list margin-vertical skeleton-text"
|
||||
:key="listIdx" v-for="listIdx in [ 1, 2, 3 ]" v-if="loading">
|
||||
<f7-list-item group-title>
|
||||
<small>Account Category</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#"
|
||||
:key="itemIdx" v-for="itemIdx in (listIdx === 1 ? [ 1 ] : [ 1, 2 ])">
|
||||
<template #title>
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-header>
|
||||
<small class="card-header-content">Account Category 2</small>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon slot="media" f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name</div>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon slot="media" f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name 2</div>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="!loading && noAvailableAccount">
|
||||
<f7-list-item :title="$t('No available account')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-header>
|
||||
<small class="card-header-content">Account Category 3</small>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon slot="media" f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name</div>
|
||||
<div :key="accountCategory.id"
|
||||
v-for="accountCategory in allAccountCategories"
|
||||
v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
|
||||
<f7-list strong inset dividers sortable class="account-list margin-vertical"
|
||||
:sortable-enabled="sortable"
|
||||
v-if="categorizedAccounts[accountCategory.id]"
|
||||
@sortable:sort="onSort">
|
||||
<f7-list-item group-title :sortable="false">
|
||||
<small>
|
||||
<span>{{ $t(accountCategory.name) }}</span>
|
||||
<span style="margin-left: 10px">{{ $locale.getDisplayCurrency(accountCategoryTotalBalance(accountCategory), defaultCurrency) }}</span>
|
||||
</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item swipeout
|
||||
:id="getAccountDomId(account)"
|
||||
:class="{ 'nested-list-item': true, 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts }"
|
||||
:after="$locale.getDisplayCurrency(accountBalance(account), account.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + account.id : null"
|
||||
:key="account.id"
|
||||
v-for="account in categorizedAccounts[accountCategory.id].accounts"
|
||||
v-show="showHidden || !account.hidden"
|
||||
@taphold="setSortable()"
|
||||
>
|
||||
<template #title>
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
</ItemIcon>
|
||||
<div class="nested-list-item-title">
|
||||
<span>{{ account.name }}</span>
|
||||
<div class="item-footer" v-if="account.comment">{{ account.comment }}</div>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="nested-list-item" after="0.00 USD" link="#">
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon slot="media" f7="app_fill"></f7-icon>
|
||||
<div class="nested-list-item-title">Account Name 2</div>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-card v-if="!loading && noAvailableAccount">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item :title="$t('No available account')"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-card v-for="accountCategory in allAccountCategories" :key="accountCategory.id" v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
|
||||
<f7-card-header>
|
||||
<small class="card-header-content">
|
||||
<span>{{ $t(accountCategory.name) }}</span>
|
||||
<span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) | currency(defaultCurrency) }}</span>
|
||||
</small>
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list class="account-list" sortable :sortable-enabled="sortable" @sortable:sort="onSort" v-if="categorizedAccounts[accountCategory.id]">
|
||||
<f7-list-item v-for="account in categorizedAccounts[accountCategory.id].accounts" v-show="showHidden || !account.hidden"
|
||||
:key="account.id" :id="account | accountDomId"
|
||||
:class="{ 'nested-list-item': true, 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts }"
|
||||
:after="accountBalance(account) | currency(account.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + account.id : null"
|
||||
swipeout @taphold.native="setSortable()"
|
||||
>
|
||||
<f7-block slot="title" class="no-padding">
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<f7-icon class="align-self-center" slot="media" :icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
</f7-icon>
|
||||
<div class="nested-list-item-title">
|
||||
<span>{{ account.name }}</span>
|
||||
<div class="item-footer" slot="footer" v-if="account.comment">{{ account.comment }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<li v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<ul class="no-padding">
|
||||
<f7-list-item class="no-sortable nested-list-item-child" v-for="subAccount in account.subAccounts" v-show="showHidden || !subAccount.hidden"
|
||||
:key="subAccount.id" :id="subAccount | accountDomId"
|
||||
:title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(subAccount) | currency(subAccount.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + subAccount.id : null"
|
||||
>
|
||||
<f7-icon slot="media" :icon="subAccount.icon | accountIcon"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')">
|
||||
</div>
|
||||
<li v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<ul class="no-padding">
|
||||
<f7-list-item class="no-sortable nested-list-item-child"
|
||||
:id="getAccountDomId(subAccount)"
|
||||
:title="subAccount.name" :footer="subAccount.comment" :after="$locale.getDisplayCurrency(accountBalance(subAccount), subAccount.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + subAccount.id : null"
|
||||
:key="subAccount.id"
|
||||
v-for="subAccount in account.subAccounts"
|
||||
v-show="showHidden || !subAccount.hidden"
|
||||
>
|
||||
<template #media>
|
||||
<ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
</f7-icon>
|
||||
</f7-list-item>
|
||||
</ul>
|
||||
</li>
|
||||
</f7-block>
|
||||
<f7-swipeout-actions left v-if="sortable">
|
||||
<f7-swipeout-button :color="account.hidden ? 'blue' : 'gray'" class="padding-left padding-right"
|
||||
overswipe close @click="hide(account, !account.hidden)">
|
||||
<f7-icon :f7="account.hidden ? 'eye' : 'eye_slash'"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
<f7-swipeout-actions right v-if="!sortable">
|
||||
<f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(account, false)">
|
||||
<f7-icon f7="trash"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
</ItemIcon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
<f7-swipeout-actions left v-if="sortable">
|
||||
<f7-swipeout-button :color="account.hidden ? 'blue' : 'gray'" class="padding-left padding-right"
|
||||
overswipe close @click="hide(account, !account.hidden)">
|
||||
<f7-icon :f7="account.hidden ? 'eye' : 'eye_slash'"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
<f7-swipeout-actions right v-if="!sortable">
|
||||
<f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(account, false)">
|
||||
<f7-icon f7="trash"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</div>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
@@ -204,6 +155,9 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -353,7 +307,7 @@ export default {
|
||||
this.reload(null);
|
||||
}
|
||||
|
||||
this.$routeBackOnError('loadingError');
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
reload(done) {
|
||||
if (this.sortable) {
|
||||
@@ -473,17 +427,22 @@ export default {
|
||||
onSort(event) {
|
||||
const self = this;
|
||||
|
||||
if (!event || !event.el || !event.el.id || event.el.id.indexOf('account_') !== 0) {
|
||||
if (!event || !event.el || !event.el.id) {
|
||||
self.$toast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
const id = event.el.id.substring(8); // account_
|
||||
const id = self.parseAccountIdFromDomId(event.el.id);
|
||||
|
||||
if (!id) {
|
||||
self.$toast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
self.$store.dispatch('changeAccountDisplayOrder', {
|
||||
accountId: id,
|
||||
from: event.from,
|
||||
to: event.to
|
||||
from: event.from - 1, // first item in the list is title, so the index need minus one
|
||||
to: event.to - 1
|
||||
}).then(() => {
|
||||
self.displayOrderModified = true;
|
||||
}).catch(error => {
|
||||
@@ -519,7 +478,7 @@ export default {
|
||||
});
|
||||
},
|
||||
edit(account) {
|
||||
this.$f7router.navigate('/account/edit?id=' + account.id);
|
||||
this.f7router.navigate('/account/edit?id=' + account.id);
|
||||
},
|
||||
hide(account, hidden) {
|
||||
const self = this;
|
||||
@@ -541,8 +500,6 @@ export default {
|
||||
},
|
||||
remove(account, confirm) {
|
||||
const self = this;
|
||||
const app = self.$f7;
|
||||
const $$ = app.$;
|
||||
|
||||
if (!account) {
|
||||
self.$alert('An error has occurred');
|
||||
@@ -562,9 +519,7 @@ export default {
|
||||
self.$store.dispatch('deleteAccount', {
|
||||
account: account,
|
||||
beforeResolve: (done) => {
|
||||
app.swipeout.delete($$(`#${self.$options.filters.accountDomId(account)}`), () => {
|
||||
done();
|
||||
});
|
||||
self.$ui.onSwipeoutDeleted(self.getAccountDomId(account), done);
|
||||
}
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
@@ -575,11 +530,16 @@ export default {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
accountDomId(account) {
|
||||
},
|
||||
getAccountDomId(account) {
|
||||
return 'account_' + account.id;
|
||||
},
|
||||
parseAccountIdFromDomId(domId) {
|
||||
if (!domId || domId.indexOf('account_') !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return domId.substring(8); // account_
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -590,11 +550,11 @@ export default {
|
||||
background-color: var(--f7-color-yellow);
|
||||
}
|
||||
|
||||
.theme-dark .account-overview-card {
|
||||
.dark .account-overview-card {
|
||||
background-color: var(--f7-theme-color);
|
||||
}
|
||||
|
||||
.theme-dark .account-overview-card a {
|
||||
.dark .account-overview-card a {
|
||||
color: var(--f7-text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -616,6 +576,7 @@ export default {
|
||||
}
|
||||
|
||||
.account-list {
|
||||
--f7-list-group-title-height: 36px;
|
||||
--f7-list-item-footer-font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user