From 2dbaabdedd4a60a8bc5a41364c63344a58d3fc68 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 8 Nov 2020 23:16:51 +0800
Subject: [PATCH] add currency filter

---
 src/filters/currency.js       | 19 +++++++++++++++++++
 src/lib/settings.js           |  7 +++++++
 src/locales/en.js             |  4 ++++
 src/locales/zh_Hans.js        |  4 ++++
 src/mobile-main.js            |  3 +++
 src/views/mobile/Settings.vue | 17 +++++++++++++++++
 6 files changed, 54 insertions(+)
 create mode 100644 src/filters/currency.js

diff --git a/src/filters/currency.js b/src/filters/currency.js
new file mode 100644
index 00000000..46c58f80
--- /dev/null
+++ b/src/filters/currency.js
@@ -0,0 +1,19 @@
+import settings from "../lib/settings.js";
+
+export default function ({ i18n }, value, currencyCode) {
+    if (!value) {
+        return value;
+    }
+
+    value = value / 100;
+    const currencyDisplayMode = settings.getCurrencyDisplayMode();
+
+    if (currencyDisplayMode === 'code') {
+        return `${value} ${currencyCode}`;
+    } else if (currencyDisplayMode === 'name') {
+        const name = i18n.t(`currency.${currencyCode}`);
+        return `${value} ${name}`;
+    } else {
+        return value;
+    }
+}
diff --git a/src/lib/settings.js b/src/lib/settings.js
index e27e9975..5fc46980 100644
--- a/src/lib/settings.js
+++ b/src/lib/settings.js
@@ -5,6 +5,7 @@ const serverSettingsCookieKey = 'ACP_SETTINGS';
 
 const defaultSettings = {
     lang: 'en',
+    currencyDisplayMode: 'code', // or 'none' or 'name'
     animate: true,
     autoDarkMode: true
 };
@@ -32,6 +33,10 @@ function getOriginalOption(key) {
     return getOriginalSettings()[key];
 }
 
+function getOption(key) {
+    return getFinalSettings()[key];
+}
+
 function setOption(key, value) {
     if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
         return;
@@ -61,6 +66,8 @@ function getServerSetting(key) {
 export default {
     getLanguage: () => getOriginalOption('lang'),
     setLanguage: value => setOption('lang', value),
+    getCurrencyDisplayMode: () => getOption('currencyDisplayMode'),
+    setCurrencyDisplayMode: value => setOption('currencyDisplayMode', value),
     isEnableAnimate: () => getOriginalOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
     isEnableAutoDarkMode: () => getOriginalOption('autoDarkMode'),
diff --git a/src/locales/en.js b/src/locales/en.js
index a8b17560..0f060cd7 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -229,6 +229,7 @@ export default {
     'Cancel': 'Cancel',
     'Close': 'Close',
     'Update': 'Update',
+    'None': 'None',
     'Done': 'Done',
     'Continue': 'Continue',
     'Status': 'Status',
@@ -287,6 +288,9 @@ export default {
     'Transfer': 'Transfer',
     'User Profile': 'User Profile',
     'Language': 'Language',
+    'Currency Display Mode': 'Currency Display Mode',
+    'Currency Code': 'Currency Code',
+    'Currency Name': 'Currency Name',
     'Enable Animate': 'Enable Animate',
     'Enable Auto Dark Mode': 'Enable Auto Dark Mode',
     'You have been successfully registered': 'You have been successfully registered',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index f0e9c2a3..db1a137f 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -229,6 +229,7 @@ export default {
     'Cancel': '取消',
     'Close': '关闭',
     'Update': '更新',
+    'None': '无',
     'Done': '完成',
     'Continue': '继续',
     'Status': '状态',
@@ -287,6 +288,9 @@ export default {
     'Transfer': '转账',
     'User Profile': '用户信息',
     'Language': '语言',
+    'Currency Display Mode': '货币显示模式',
+    'Currency Code': '货币代码',
+    'Currency Name': '货币名称',
     'Enable Animate': '启用动画',
     'Enable Auto Dark Mode': '启用自动深色模式',
     'You have been successfully registered': '注册成功',
diff --git a/src/mobile-main.js b/src/mobile-main.js
index d0156ac1..a5c27c2d 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -19,6 +19,7 @@ import settings from './lib/settings.js';
 import services from './lib/services.js';
 import userstate from './lib/userstate.js';
 import utils from './lib/utils.js';
+import currencyFilter from './filters/currency.js';
 import App from './Mobile.vue';
 
 Vue.use(VueI18n);
@@ -139,6 +140,8 @@ Vue.prototype.$hideLoading = function () {
 Vue.prototype.$services = services;
 Vue.prototype.$user = userstate;
 
+Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
+
 Vue.prototype.$setLanguage(settings.getLanguage() || getDefaultLanguage());
 
 // refresh token if user is logined
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index 35801af6..b38d356e 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -19,6 +19,15 @@
                             :value="locale">{{ lang.displayName }}</option>
                 </select>
             </f7-list-item>
+            <f7-list-item
+                :title="$t('Currency Display Mode')"
+                smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
+                <select v-model="currencyDisplayMode">
+                    <option value="none">{{ $t('None') }}</option>
+                    <option value="code">{{ $t('Currency Code') }}</option>
+                    <option value="name">{{ $t('Currency Name') }}</option>
+                </select>
+            </f7-list-item>
             <f7-list-item>
                 <span>{{ $t('Enable Animate') }}</span>
                 <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
@@ -58,6 +67,14 @@ export default {
                 this.$setLanguage(value);
             }
         },
+        currencyDisplayMode: {
+            get: function () {
+                return this.$settings.getCurrencyDisplayMode();
+            },
+            set: function (value) {
+                this.$settings.setCurrencyDisplayMode(value);
+            }
+        },
         isEnableAnimate: {
             get: function () {
                 return this.$settings.isEnableAnimate();