credit card account supports statement date

src/views/desktop/accounts/list/dialogs/EditDialog.vue

@@ -108,7 +108,7 @@
                                                   :disabled="loading || submitting"
                                                   v-model="selectedAccount.color" />
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
+                                <v-col cols="12" :md="isAccountSupportCreditCardStatementDate() ? 6 : 12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
                                     <v-autocomplete
                                         item-title="displayName"
                                         item-value="currencyCode"
@@ -126,6 +126,20 @@
                                         </template>
                                     </v-autocomplete>
                                 </v-col>
+                                <v-col cols="12" :md="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0 ? 6 : 12" v-if="isAccountSupportCreditCardStatementDate()">
+                                    <v-autocomplete
+                                        item-title="displayName"
+                                        item-value="day"
+                                        auto-select-first
+                                        persistent-placeholder
+                                        :disabled="loading || submitting"
+                                        :label="$t('Statement Date')"
+                                        :placeholder="$t('Statement Date')"
+                                        :items="allAvailableMonthDays"
+                                        :no-data-text="$t('No results')"
+                                        v-model="selectedAccount.creditCardStatementDate"
+                                    ></v-autocomplete>
+                                </v-col>
                                 <v-col cols="12" :md="!editAccountId && selectedAccount.balance ? 6 : 12"
                                        v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
                                     <amount-input :disabled="loading || submitting || !!editAccountId"
@@ -267,6 +281,23 @@ export default {
         allCurrencies() {
             return this.$locale.getAllCurrencies();
         },
+        allAvailableMonthDays() {
+            const allAvailableDays = [];
+
+            allAvailableDays.push({
+                day: 0,
+                displayName: this.$t('Not set'),
+            });
+
+            for (let i = 1; i <= 28; i++) {
+                allAvailableDays.push({
+                    day: i,
+                    displayName: this.$locale.getMonthdayShortName(i),
+                });
+            }
+
+            return allAvailableDays;
+        },
         selectedAccount() {
             if (this.currentAccountIndex < 0) {
                 return this.account;
@@ -415,6 +446,9 @@ export default {
 
             this.showState = false;
         },
+        isAccountSupportCreditCardStatementDate() {
+            return this.account && this.account.category === accountConstants.creditCardCategoryType;
+        },
         chooseSuitableIcon(oldCategory, newCategory) {
             setAccountSuitableIcon(this.account, oldCategory, newCategory);
         },

src/views/mobile/accounts/EditPage.vue

@@ -173,6 +173,20 @@
                 </select>
             </f7-list-item>
 
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Statement Date')"
+                :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Statement Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Statement Date'), popupCloseLinkText: $t('Done') }"
+                v-if="isAccountSupportCreditCardStatementDate()"
+            >
+                <select v-model="account.creditCardStatementDate">
+                    <option :value="monthDay.day"
+                            :key="monthDay.day"
+                            v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item
                 link="#" no-chevron
                 class="list-item-with-header-and-title"
@@ -282,6 +296,20 @@
                 </template>
             </f7-list-item>
 
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Statement Date')"
+                :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Statement Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Statement Date'), popupCloseLinkText: $t('Done') }"
+                v-if="isAccountSupportCreditCardStatementDate()"
+            >
+                <select v-model="account.creditCardStatementDate">
+                    <option :value="monthDay.day"
+                            :key="monthDay.day"
+                            v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item :title="$t('Visible')" v-if="editAccountId">
                 <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
             </f7-list-item>
@@ -387,6 +415,20 @@
                     </select>
                 </f7-list-item>
 
+                <f7-list-item
+                    class="list-item-with-header-and-title list-item-no-item-after"
+                    :header="$t('Statement Date')"
+                    :title="getAccountCreditCardStatementDate(subAccount.creditCardStatementDate)"
+                    smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Statement Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Statement Date'), popupCloseLinkText: $t('Done') }"
+                    v-if="isAccountSupportCreditCardStatementDate()"
+                >
+                    <select v-model="subAccount.creditCardStatementDate">
+                        <option :value="monthDay.day"
+                                :key="monthDay.day"
+                                v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
+                    </select>
+                </f7-list-item>
+
                 <f7-list-item
                     link="#" no-chevron
                     class="list-item-with-header-and-title"
@@ -544,6 +586,23 @@ export default {
         allCurrencies() {
             return this.$locale.getAllCurrencies();
         },
+        allAvailableMonthDays() {
+            const allAvailableDays = [];
+
+            allAvailableDays.push({
+                day: 0,
+                displayName: this.$t('Not set'),
+            });
+
+            for (let i = 1; i <= 28; i++) {
+                allAvailableDays.push({
+                    day: i,
+                    displayName: this.$locale.getMonthdayShortName(i),
+                });
+            }
+
+            return allAvailableDays;
+        },
         allowedMinAmount() {
             return transactionConstants.minAmountNumber;
         },
@@ -705,6 +764,9 @@ export default {
         getAccountCategoryName(accountCategory) {
             return getNameByKeyValue(this.allAccountCategories, accountCategory, 'id', 'displayName');
         },
+        getAccountCreditCardStatementDate(statementDate) {
+            return getNameByKeyValue(this.allAvailableMonthDays, statementDate, 'day', 'displayName');
+        },
         getAccountBalance(account) {
             return this.getDisplayCurrency(account.balance, account.currency);
         },
@@ -717,6 +779,9 @@ export default {
         getDisplayCurrency(value, currencyCode) {
             return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
+        isAccountSupportCreditCardStatementDate() {
+            return this.account && this.account.category === accountConstants.creditCardCategoryType;
+        },
         chooseSuitableIcon(oldCategory, newCategory) {
             setAccountSuitableIcon(this.account, oldCategory, newCategory);
         },