support account color

cmd/webserver.go

@@ -74,6 +74,7 @@ func startWebServer(c *cli.Context) error {
 		_ = v.RegisterValidation("validUsername", validators.ValidUsername)
 		_ = v.RegisterValidation("validEmail", validators.ValidEmail)
 		_ = v.RegisterValidation("validCurrency", validators.ValidCurrency)
+		_ = v.RegisterValidation("validRGBColor", validators.ValidRGBColor)
 	}
 
 	router.NoRoute(bindApi(api.Default.ApiNotFound))

pkg/api/accounts.go

@@ -343,6 +343,7 @@ func (a *AccountsApi) createNewAccount(uid int64, accountCreateReq *models.Accou
 		Category:     accountCreateReq.Category,
 		Type:         accountCreateReq.Type,
 		Icon:         accountCreateReq.Icon,
+		Color:        accountCreateReq.Color,
 		Currency:     accountCreateReq.Currency,
 		Comment:      accountCreateReq.Comment,
 	}
@@ -369,6 +370,7 @@ func (a *AccountsApi) getToUpdateAccount(uid int64, accountModifyReq *models.Acc
 		Name:      accountModifyReq.Name,
 		Category:  accountModifyReq.Category,
 		Icon:      accountModifyReq.Icon,
+		Color:     accountModifyReq.Color,
 		Comment:   accountModifyReq.Comment,
 		Hidden:    accountModifyReq.Hidden,
 	}
@@ -376,6 +378,7 @@ func (a *AccountsApi) getToUpdateAccount(uid int64, accountModifyReq *models.Acc
 	if newAccount.Name != oldAccount.Name ||
 		newAccount.Category != oldAccount.Category ||
 		newAccount.Icon != oldAccount.Icon ||
+		newAccount.Color != oldAccount.Color ||
 		newAccount.Comment != oldAccount.Comment ||
 		newAccount.Hidden != oldAccount.Hidden {
 		return newAccount

pkg/models/account.go

@@ -32,6 +32,7 @@ type Account struct {
 	Name            string          `xorm:"VARCHAR(32) NOT NULL"`
 	DisplayOrder    int             `xorm:"INDEX(IDX_account_uid_deleted_parent_account_id_order) NOT NULL"`
 	Icon            int64           `xorm:"NOT NULL"`
+	Color           string          `xorm:"VARCHAR(6) NOT NULL"`
 	Currency        string          `xorm:"VARCHAR(3) NOT NULL"`
 	Balance         int64           `xorm:"NOT NULL"`
 	Comment         string          `xorm:"VARCHAR(255) NOT NULL"`
@@ -46,6 +47,7 @@ type AccountCreateRequest struct {
 	Category    AccountCategory         `json:"category" binding:"required"`
 	Type        AccountType             `json:"type" binding:"required"`
 	Icon        int64                   `json:"icon,string" binding:"required,min=1"`
+	Color       string                  `json:"color" binding:"required,len=6,validRGBColor"`
 	Currency    string                  `json:"currency" binding:"required,len=3,validCurrency"`
 	Comment     string                  `json:"comment" binding:"max=255"`
 	SubAccounts []*AccountCreateRequest `json:"subAccounts" binding:"omitempty"`
@@ -60,6 +62,7 @@ type AccountModifyRequest struct {
 	Name        string                  `json:"name" binding:"required,notBlank,max=32"`
 	Category    AccountCategory         `json:"category" binding:"required"`
 	Icon        int64                   `json:"icon,string" binding:"min=1"`
+	Color       string                  `json:"color" binding:"required,len=6,validRGBColor"`
 	Comment     string                  `json:"comment" binding:"max=255"`
 	Hidden      bool                    `json:"hidden"`
 	SubAccounts []*AccountModifyRequest `json:"subAccounts" binding:"omitempty"`
@@ -90,6 +93,7 @@ type AccountInfoResponse struct {
 	Category     AccountCategory          `json:"category"`
 	Type         AccountType              `json:"type"`
 	Icon         int64                    `json:"icon,string"`
+	Color        string                   `json:"color"`
 	Currency     string                   `json:"currency"`
 	Balance      int64                    `json:"balance"`
 	Comment      string                   `json:"comment"`
@@ -106,6 +110,7 @@ func (a *Account) ToAccountInfoResponse() *AccountInfoResponse {
 		Category:     a.Category,
 		Type:         a.Type,
 		Icon:         a.Icon,
+		Color:        a.Color,
 		Currency:     a.Currency,
 		Balance:      a.Balance,
 		Comment:      a.Comment,

pkg/services/accounts.go

@@ -151,7 +151,7 @@ func (s *AccountService) ModifyAccounts(uid int64, accounts []*models.Account) e
 	return s.UserDataDB(uid).DoTransaction(func(sess *xorm.Session) error {
 		for i := 0; i < len(accounts); i++ {
 			account := accounts[i]
-			_, err := sess.Cols("name", "category", "icon", "comment", "hidden", "updated_unix_time").Where("account_id=? AND uid=? AND deleted=?", account.AccountId, uid, false).Update(account)
+			_, err := sess.Cols("name", "category", "icon", "color", "comment", "hidden", "updated_unix_time").Where("account_id=? AND uid=? AND deleted=?", account.AccountId, uid, false).Update(account)
 
 			if err != nil {
 				return err

pkg/utils/regexps.go

@@ -5,6 +5,7 @@ import "regexp"
 var (
 	UsernamePattern = regexp.MustCompile("^(?i)[a-z0-9_-]+$")
 	EmailPattern = regexp.MustCompile("^(?i)(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])$")
+	RGBColorPattern = regexp.MustCompile("^(?i)([0-9a-f]{6}|[0-9a-f]{3})$")
 )
 
 func IsValidUsername(username string) bool {
@@ -14,3 +15,7 @@ func IsValidUsername(username string) bool {
 func IsValidEmail(email string) bool {
 	return EmailPattern.MatchString(email)
 }
+
+func IsValidRGBColor(color string) bool {
+	return RGBColorPattern.MatchString(color)
+}

pkg/validators/rgb_color.go

@@ -0,0 +1,17 @@
+package validators
+
+import (
+	"github.com/go-playground/validator/v10"
+
+	"github.com/mayswind/lab/pkg/utils"
+)
+
+func ValidRGBColor(fl validator.FieldLevel) bool {
+	if value, ok := fl.Field().Interface().(string); ok {
+		if utils.IsValidRGBColor(value) {
+			return true
+		}
+	}
+
+	return false
+}

src/consts/color.js

@@ -0,0 +1,22 @@
+const defaultAccountColor = '000000';
+const allAccountColors = [
+    '000000', // black
+    '8e8e93', // gray
+    'ff3b30', // red
+    'ff2d55', // pink
+    'ff6b22', // deep orange
+    'ff9500', // orange
+    'ffcc00', // yellow
+    'cddc39', // lime
+    '009688', // teal
+    '4cd964', // green
+    '5ac8fa', // light blue
+    '2196f3', // blue
+    '673ab7', // deep purple
+    '9c27b0', // purple
+];
+
+export default {
+    allAccountColors: allAccountColors,
+    defaultAccountColor: defaultAccountColor,
+};

src/lib/services.js

@@ -169,23 +169,25 @@ export default {
     getAccount: ({ id }) => {
         return axios.get('v1/accounts/get.json?id=' + id);
     },
-    addAccount: ({ category, type, name, icon, currency, comment, subAccounts }) => {
+    addAccount: ({ category, type, name, icon, color, currency, comment, subAccounts }) => {
         return axios.post('v1/accounts/add.json', {
             category,
             type,
             name,
             icon,
+            color,
             currency,
             comment,
             subAccounts
         });
     },
-    modifyAccount: ({ id, category, name, icon, comment, hidden, subAccounts }) => {
+    modifyAccount: ({ id, category, name, icon, color, comment, hidden, subAccounts }) => {
         return axios.post('v1/accounts/modify.json', {
             id,
             category,
             name,
             icon,
+            color,
             comment,
             hidden,
             subAccounts

src/locales/en.js

@@ -224,6 +224,7 @@ export default {
         'nickname': 'Nickname',
         'oldPassword': 'Current Password',
         'defaultCurrency': 'Default Currency',
+        'color': 'Color',
     },
     'parameterizedError': {
         'parameter invalid': '{parameter} is invalid',
@@ -328,6 +329,8 @@ export default {
     'Your sub account name': 'Your sub account name',
     'Account Icon': 'Account Icon',
     'Sub Account Icon': 'Sub Account Icon',
+    'Account Color': 'Account Color',
+    'Sub Account Color': 'Sub Account Color',
     'Currency': 'Currency',
     'Description': 'Description',
     'Your account description (optional)': 'Your account description (optional)',

src/locales/zh_Hans.js

@@ -224,6 +224,7 @@ export default {
         'nickname': '昵称',
         'oldPassword': '当前密码',
         'defaultCurrency': '默认货币',
+        'color': '颜色',
     },
     'parameterizedError': {
         'parameter invalid': '{parameter}无效',
@@ -328,6 +329,8 @@ export default {
     'Your sub account name': '你的子账户名称',
     'Account Icon': '账户图标',
     'Sub Account Icon': '子账户图标',
+    'Account Color': '账户颜色',
+    'Sub Account Color': '子账户颜色',
     'Currency': '货币',
     'Description': '描述',
     'Your account description (optional)': '你的账户描述 (可选)',

src/mobile-main.js

@@ -14,6 +14,7 @@ import 'framework7-icons';
 
 import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
 import currency from './consts/currency.js';
+import colors from './consts/color.js';
 import icons from './consts/icon.js';
 import account from './consts/account.js';
 import version from './lib/version.js';
@@ -36,6 +37,7 @@ const i18n = new VueI18n(getI18nOptions());
 Vue.prototype.$version = version.getVersion;
 Vue.prototype.$constants = {
     currency: currency,
+    colors: colors,
     icons: icons,
     account: account,
 };

src/views/mobile/accounts/AccountEdit.vue

@@ -50,6 +50,7 @@
                 <f7-list>
                     <f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
                     <f7-list-item header="Account Icon" after="Icon"></f7-list-item>
+                    <f7-list-item header="Account Color" after="Color"></f7-list-item>
                     <f7-list-input label="Currency" placeholder="Currency"></f7-list-input>
                     <f7-list-input type="textarea" label="Description" placeholder="Your account description (optional)"></f7-list-input>
                 </f7-list>
@@ -70,7 +71,12 @@
 
                     <f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
                                   @click="showIconSelectionSheet(account)">
-                        <f7-icon slot="after" :f7="account.icon | accountIcon"></f7-icon>
+                        <f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                    </f7-list-item>
+
+                    <f7-list-item :header="$t('Account Color')" key="singleTypeAccountColorSelection" link="#"
+                                  @click="showColorSelectionSheet(account)">
+                        <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
                     </f7-list-item>
 
                     <f7-list-input
@@ -114,7 +120,12 @@
 
                     <f7-list-item :header="$t('Account Icon')" key="multiTypeAccountIconSelection" link="#"
                                   @click="showIconSelectionSheet(account)">
-                        <f7-icon slot="after" :f7="account.icon | accountIcon"></f7-icon>
+                        <f7-icon slot="after" :f7="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                    </f7-list-item>
+
+                    <f7-list-item :header="$t('Account Color')" key="multiTypeAccountColorSelection" link="#"
+                                  @click="showColorSelectionSheet(account)">
+                        <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
                     </f7-list-item>
 
                     <f7-list-input
@@ -151,7 +162,12 @@
 
                         <f7-list-item :header="$t('Sub Account Icon')" key="subAccountIconSelection" link="#"
                                       @click="showIconSelectionSheet(subAccount)">
-                            <f7-icon slot="after" :f7="subAccount.icon | accountIcon"></f7-icon>
+                            <f7-icon slot="after" :f7="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                        </f7-list-item>
+
+                        <f7-list-item :header="$t('Sub Account Color')" key="subAccountColorSelection" link="#"
+                                      @click="showColorSelectionSheet(subAccount)">
+                            <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
                         </f7-list-item>
 
                         <f7-list-input
@@ -207,6 +223,28 @@
                 </f7-block>
             </f7-page-content>
         </f7-sheet>
+
+        <f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
+            <f7-toolbar>
+                <div class="left"></div>
+                <div class="right">
+                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                </div>
+            </f7-toolbar>
+            <f7-page-content>
+                <f7-block>
+                    <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allAccountColorRows" :key="idx">
+                        <f7-col v-for="accountColor in row" :key="accountColor.color">
+                            <f7-icon f7="app_fill" :style="{ color: '#' + accountColor.color }" @click.native="setSelectedColor(accountColor.color)">
+                                <f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingColor && accountChoosingColor.color === accountColor.color">
+                                    <f7-icon f7="checkmark_alt"></f7-icon>
+                                </f7-badge>
+                            </f7-icon>
+                        </f7-col>
+                    </f7-row>
+                </f7-block>
+            </f7-page-content>
+        </f7-sheet>
     </f7-page>
 </template>
 
@@ -223,14 +261,17 @@ export default {
                 type: self.$constants.account.allAccountTypes.SingleAccount.toString(),
                 name: '',
                 icon: self.$constants.icons.defaultAccountIconId,
+                color: self.$constants.colors.defaultAccountColor,
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
                 comment: '',
                 visible: true
             },
             subAccounts: [],
             accountChoosingIcon: null,
+            accountChoosingColor: null,
             submitting: false,
-            showIconSelection: false
+            showIconSelection: false,
+            showColorSelection: false
         };
     },
     computed: {
@@ -279,6 +320,24 @@ export default {
 
             return ret;
         },
+        allAccountColorRows() {
+            const allAccountColors = this.$constants.colors.allAccountColors;
+            const colorPerRow = 7;
+            const ret = [];
+            let rowCount = -1;
+
+            for (let i = 0; i < allAccountColors.length; i++) {
+                if (i % colorPerRow === 0) {
+                    ret[++rowCount] = [];
+                }
+
+                ret[rowCount].push({
+                    color: allAccountColors[i]
+                });
+            }
+
+            return ret;
+        },
         allCurrencies() {
             return this.$getAllCurrencies();
         }
@@ -310,6 +369,7 @@ export default {
                 self.account.type = account.type.toString();
                 self.account.name = account.name;
                 self.account.icon = account.icon;
+                self.account.color = account.color;
                 self.account.currency = account.currency;
                 self.account.comment = account.comment;
                 self.account.visible = !account.hidden;
@@ -324,6 +384,7 @@ export default {
                             type: subAccount.type.toString(),
                             name: subAccount.name,
                             icon: subAccount.icon,
+                            color: subAccount.color,
                             currency: subAccount.currency,
                             comment: subAccount.comment,
                             visible: !subAccount.hidden
@@ -360,6 +421,7 @@ export default {
                 type: null,
                 name: '',
                 icon: this.account.icon,
+                color: this.account.color,
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
                 comment: ''
             });
@@ -388,6 +450,23 @@ export default {
             this.accountChoosingIcon = null;
             this.showIconSelection = false;
         },
+        showColorSelectionSheet(account) {
+            this.accountChoosingColor = account;
+            this.showColorSelection = true;
+        },
+        setSelectedColor(color) {
+            if (!this.accountChoosingColor) {
+                return;
+            }
+
+            this.accountChoosingColor.color = color;
+            this.accountChoosingColor = null;
+            this.showColorSelection = false;
+        },
+        hideColorSelectionSheet() {
+            this.accountChoosingColor = null;
+            this.showColorSelection = false;
+        },
         save() {
             const self = this;
             const router = self.$f7router;
@@ -412,6 +491,7 @@ export default {
                         type: self.$constants.account.allAccountTypes.SingleAccount,
                         name: subAccount.name,
                         icon: subAccount.icon,
+                        color: subAccount.color,
                         currency: subAccount.currency,
                         comment: subAccount.comment
                     };
@@ -430,6 +510,7 @@ export default {
                 type: parseInt(self.account.type),
                 name: self.account.name,
                 icon: self.account.icon,
+                color: self.account.color,
                 currency: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? self.account.currency : self.$constants.currency.parentAccountCurrencyPlacehodler,
                 comment: self.account.comment,
                 subAccounts: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? null : subAccounts,

src/views/mobile/accounts/AccountList.vue

@@ -82,7 +82,7 @@
                     >
                         <f7-block slot="title" class="no-padding">
                             <div class="display-flex">
-                                <f7-icon slot="media" :f7="account.icon | accountIcon">
+                                <f7-icon slot="media" :f7="account.icon | accountIcon" :style="{ 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>
@@ -96,7 +96,7 @@
                                                   :title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
                                                   link="#"
                                     >
-                                        <f7-icon slot="media" :f7="subAccount.icon | accountIcon">
+                                        <f7-icon slot="media" :f7="subAccount.icon | accountIcon" :style="{ 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>