credit card account supports statement date

src/consts/account.js

@@ -1,49 +1,61 @@
-const allAccountCategories = [
-    {
+const allAccountCategories = {
+    Cash: {
         id: 1,
         name: 'Cash',
         defaultAccountIconId: '1'
     },
-    {
+    CheckingAccount: {
         id: 2,
         name: 'Checking Account',
         defaultAccountIconId: '100'
     },
-    {
+    SavingsAccount: {
         id: 8,
         name: 'Savings Account',
         defaultAccountIconId: '100'
     },
-    {
+    CreditCard: {
         id: 3,
         name: 'Credit Card',
         defaultAccountIconId: '100'
     },
-    {
+    VirtualAccount: {
         id: 4,
         name: 'Virtual Account',
         defaultAccountIconId: '500'
     },
-    {
+    DebtAccount: {
         id: 5,
         name: 'Debt Account',
         defaultAccountIconId: '600'
     },
-    {
+    Receivables: {
         id: 6,
         name: 'Receivables',
         defaultAccountIconId: '700'
     },
-    {
+    CertificatePfDeposit: {
         id: 9,
         name: 'Certificate of Deposit',
         defaultAccountIconId: '110'
     },
-    {
+    InvestmentAccount: {
         id: 7,
         name: 'Investment Account',
         defaultAccountIconId: '800'
     }
+};
+
+const allAccountCategoriesArray = [
+    allAccountCategories.Cash,
+    allAccountCategories.CheckingAccount,
+    allAccountCategories.SavingsAccount,
+    allAccountCategories.CreditCard,
+    allAccountCategories.VirtualAccount,
+    allAccountCategories.DebtAccount,
+    allAccountCategories.Receivables,
+    allAccountCategories.CertificatePfDeposit,
+    allAccountCategories.InvestmentAccount
 ];
 const allAccountTypes = {
     SingleAccount: 1,
@@ -60,7 +72,9 @@ const allAccountTypesArray = [
 ];
 
 export default {
-    allCategories: allAccountCategories,
+    cashCategoryType: allAccountCategories.Cash.id,
+    creditCardCategoryType: allAccountCategories.CreditCard.id,
+    allCategories: allAccountCategoriesArray,
     allAccountTypes: allAccountTypes,
     allAccountTypesArray: allAccountTypesArray,
 };

src/lib/account.js

@@ -12,6 +12,7 @@ export function setAccountModelByAnotherAccount(account, account2) {
     account.balance = account2.balance;
     account.balanceTime = account2.balanceTime;
     account.comment = account2.comment;
+    account.creditCardStatementDate = account2.creditCardStatementDate;
     account.visible = !account2.hidden;
 }
 

src/lib/services.js

@@ -256,7 +256,7 @@ export default {
     getAccount: ({ id }) => {
         return axios.get('v1/accounts/get.json?id=' + id);
     },
-    addAccount: ({ category, type, name, icon, color, currency, balance, balanceTime, comment, subAccounts, clientSessionId }) => {
+    addAccount: ({ category, type, name, icon, color, currency, balance, balanceTime, comment, creditCardStatementDate, subAccounts, clientSessionId }) => {
         return axios.post('v1/accounts/add.json', {
             category,
             type,
@@ -267,11 +267,12 @@ export default {
             balance,
             balanceTime,
             comment,
+            creditCardStatementDate,
             subAccounts,
             clientSessionId
         });
     },
-    modifyAccount: ({ id, category, name, icon, color, comment, hidden, subAccounts }) => {
+    modifyAccount: ({ id, category, name, icon, color, comment, creditCardStatementDate, hidden, subAccounts }) => {
         return axios.post('v1/accounts/modify.json', {
             id,
             category,
@@ -279,6 +280,7 @@ export default {
             icon,
             color,
             comment,
+            creditCardStatementDate,
             hidden,
             subAccounts
         });

src/locales/en.json

@@ -1061,6 +1061,7 @@
         "account is in use and cannot be deleted": "Account is in use and it cannot be deleted",
         "account category is invalid": "Account category is invalid",
         "account balance time is not set": "Account balance time is not set",
+        "cannot set statement date for non credit card account": "Cannot set statement date for non credit card account",
         "transaction id is invalid": "Transaction ID is invalid",
         "transaction not found": "Transaction is not found",
         "transaction type is invalid": "Transaction type is invalid",
@@ -1172,6 +1173,7 @@
         "type": "Type",
         "color": "Color",
         "currency": "Currency",
+        "creditCardStatementDate": "Credit Card Statement Date",
         "parentId": "Parent Node ID",
         "categoryId": "Category ID",
         "time": "Time",
@@ -1232,6 +1234,7 @@
     "Clear": "Clear",
     "None": "None",
     "Unspecified": "Unspecified",
+    "Not set": "Not set",
     "No results": "No results",
     "Unknown": "Unknown",
     "Miscellaneous": "Miscellaneous",
@@ -1468,6 +1471,7 @@
     "Sub-account Balance": "Sub-account Balance",
     "Balance Time": "Balance Time",
     "Sub-account Balance Time": "Sub-account Balance Time",
+    "Statement Date": "Statement Date",
     "Description": "Description",
     "Your account description (optional)": "Your account description (optional)",
     "Your sub-account description (optional)": "Your sub-account description (optional)",

src/locales/vi.json

@@ -1061,6 +1061,7 @@
         "account is in use and cannot be deleted": "Tài khoản đang được sử dụng và không thể xóa",
         "account category is invalid": "Danh mục tài khoản không hợp lệ",
         "account balance time is not set": "Thời gian số dư tài khoản chưa được đặt",
+        "cannot set statement date for non credit card account": "Cannot set statement date for non credit card account",
         "transaction id is invalid": "ID giao dịch không hợp lệ",
         "transaction not found": "Không tìm thấy giao dịch",
         "transaction type is invalid": "Loại giao dịch không hợp lệ",
@@ -1172,6 +1173,7 @@
         "type": "Loại",
         "color": "Màu sắc",
         "currency": "Tiền tệ",
+        "creditCardStatementDate": "Credit Card Statement Date",
         "parentId": "ID nút cha",
         "categoryId": "ID danh mục",
         "time": "Thời gian",
@@ -1232,6 +1234,7 @@
     "Clear": "Xóa",
     "None": "Không có",
     "Unspecified": "Không xác định",
+    "Not set": "Not set",
     "No results": "Không có kết quả",
     "Unknown": "Không rõ",
     "Miscellaneous": "Linh tinh",
@@ -1468,6 +1471,7 @@
     "Sub-account Balance": "Số dư tài khoản phụ",
     "Balance Time": "Thời gian số dư",
     "Sub-account Balance Time": "Thời gian số dư tài khoản phụ",
+    "Statement Date": "Statement Date",
     "Description": "Mô tả",
     "Your account description (optional)": "Mô tả tài khoản của bạn (tùy chọn)",
     "Your sub-account description (optional)": "Mô tả tài khoản phụ của bạn (tùy chọn)",

src/locales/zh_Hans.json

@@ -1061,6 +1061,7 @@
         "account is in use and cannot be deleted": "账户正在被使用，无法删除",
         "account category is invalid": "账户分类无效",
         "account balance time is not set": "账户余额时间没有设置",
+        "cannot set statement date for non credit card account": "非信用卡账户不能设置账单日期",
         "transaction id is invalid": "交易ID无效",
         "transaction not found": "交易不存在",
         "transaction type is invalid": "交易类型无效",
@@ -1172,6 +1173,7 @@
         "type": "类型",
         "color": "颜色",
         "currency": "货币",
+        "creditCardStatementDate": "信用卡账单日期",
         "parentId": "父节点ID",
         "categoryId": "分类ID",
         "time": "时间",
@@ -1232,6 +1234,7 @@
     "Clear": "清除",
     "None": "无",
     "Unspecified": "未指定",
+    "Not set": "未设置",
     "No results": "无结果",
     "Unknown": "未知",
     "Miscellaneous": "杂项",
@@ -1468,6 +1471,7 @@
     "Sub-account Balance": "子账户余额",
     "Balance Time": "余额时间",
     "Sub-account Balance Time": "子账户余额时间",
+    "Statement Date": "账单日期",
     "Description": "描述",
     "Your account description (optional)": "你的账户描述 (可选)",
     "Your sub-account description (optional)": "你的子账户描述 (可选)",

src/stores/account.js

@@ -258,7 +258,7 @@ export const useAccountsStore = defineStore('accounts', {
             const now = getCurrentUnixTime();
 
             return {
-                category: 1,
+                category: accountConstants.cashCategoryType,
                 type: accountConstants.allAccountTypes.SingleAccount,
                 name: '',
                 icon: iconConstants.defaultAccountIconId,
@@ -267,6 +267,7 @@ export const useAccountsStore = defineStore('accounts', {
                 balance: 0,
                 balanceTime: now,
                 comment: '',
+                creditCardStatementDate: 0,
                 visible: true
             };
         },
@@ -284,6 +285,7 @@ export const useAccountsStore = defineStore('accounts', {
                 balance: 0,
                 balanceTime: now,
                 comment: '',
+                creditCardStatementDate: parentAccount.creditCardStatementDate,
                 visible: true
             };
         },
@@ -760,6 +762,10 @@ export const useAccountsStore = defineStore('accounts', {
                         comment: subAccount.comment
                     };
 
+                    if (account.category === accountConstants.creditCardCategoryType) {
+                        submitAccount.creditCardStatementDate = subAccount.creditCardStatementDate;
+                    }
+
                     if (isEdit) {
                         submitAccount.id = subAccount.id;
                         submitAccount.hidden = !subAccount.visible;
@@ -783,6 +789,10 @@ export const useAccountsStore = defineStore('accounts', {
                 subAccounts: account.type === accountConstants.allAccountTypes.SingleAccount ? null : submitSubAccounts,
             };
 
+            if (account.category === accountConstants.creditCardCategoryType) {
+                submitAccount.creditCardStatementDate = account.creditCardStatementDate;
+            }
+
             if (clientSessionId) {
                 submitAccount.clientSessionId = clientSessionId;
             }

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);
         },