show notification in frontend

mayswind · Aug 5, 2024 · 0e946a4 · 0e946a4
1 parent 051c319
commit 0e946a4
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 5 deletions.
diff --git a/src/DesktopApp.vue b/src/DesktopApp.vue
@@ -3,18 +3,30 @@
     <v-app>
         <router-view />
     </v-app>
+    <v-snackbar color="notification-background" location="top"
+                :multi-line="true" :timeout="-1" :close-on-content-click="true" v-model="showNotification">
+        <div class="d-inline-flex">
+            <img alt="logo" class="notification-logo" :src="ezBookkeepingLogoPath" />
+            <span class="ml-2">{{ $t('global.app.title') }}</span>
+        </div>
+        <div>
+            {{ currentNotificationContent }}
+        </div>
+    </v-snackbar>
 </template>
 
 <script>
 import { useTheme } from 'vuetify';
 import { register } from 'register-service-worker';
 
 import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import assetConstants from '@/consts/asset.js';
 import { isProduction } from '@/lib/version.js';
 import { loadMapAssets } from '@/lib/map/index.js';
 import { getSystemTheme, setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
@@ -23,11 +35,23 @@ export default {
     data() {
         return {
             isProduction: isProduction(),
-            devCookiePath: isProduction() ? '' : '/dev/cookies'
+            devCookiePath: isProduction() ? '' : '/dev/cookies',
+            showNotification: false
         }
     },
     computed: {
-        ...mapStores(useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        ezBookkeepingLogoPath() {
+            return assetConstants.ezBookkeepingLogoPath;
+        },
+        currentNotificationContent() {
+            return this.rootStore.currentNotification;
+        }
+    },
+    watch: {
+        currentNotificationContent: function (newValue) {
+            this.showNotification = !!newValue;
+        }
     },
     created() {
         const self = this;
@@ -57,14 +81,18 @@ export default {
         setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
 
         if (self.$user.isUserLogined()) {
-            if (!self.settingsStore.appSettings.applicationLock) {
+            if (!self.settingsStore.appSettings.applicationLock || self.$user.isUserUnlocked()) {
                 // refresh token if user is logined
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user) {
                         localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
+
+                        if (response.notificationContent) {
+                            self.rootStore.setNotificationContent(response.notificationContent);
+                        }
                     }
                 });
 
@@ -91,3 +119,10 @@ export default {
     }
 }
 </script>
+
+<style>
+.notification-logo {
+    width: 1.2rem;
+    height: 1.2rem;
+}
+</style>
diff --git a/src/MobileApp.vue b/src/MobileApp.vue
@@ -10,11 +10,13 @@ import { f7ready } from 'framework7-vue';
 import routes from './router/mobile.js';
 
 import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import assetConstants from '@/consts/asset.js';
 import { isProduction } from '@/lib/version.js';
 import { getTheme, isEnableAnimate } from '@/lib/settings.js';
 import { loadMapAssets } from '@/lib/map/index.js';
@@ -35,6 +37,7 @@ export default {
         return {
             isProduction: isProduction(),
             devCookiePath: isProduction() ? '' : '/dev/cookies',
+            notification: null,
             f7params: {
                 name: 'ezBookkeeping',
                 theme: 'ios',
@@ -94,7 +97,37 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useExchangeRatesStore),
+        currentNotificationContent() {
+            return this.rootStore.currentNotification;
+        }
+    },
+    watch: {
+        currentNotificationContent: function (newValue) {
+            const self = this;
+
+            if (self.notification) {
+                self.notification.close();
+                self.notification.destroy();
+                self.notification = null;
+            }
+
+            if (newValue) {
+                f7ready((f7) => {
+                    self.notification = f7.notification.create({
+                        icon: `<img alt="logo" src="${assetConstants.ezBookkeepingLogoPath}" />`,
+                        title: self.$t('global.app.title'),
+                        text: newValue,
+                        closeOnClick: true,
+                        on: {
+                            close() {
+                                self.rootStore.setNotificationContent(null);
+                            }
+                        }
+                    }).open();
+                });
+            }
+        }
     },
     created() {
         const self = this;
@@ -105,14 +138,18 @@ export default {
         setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
 
         if (self.$user.isUserLogined()) {
-            if (!self.settingsStore.appSettings.applicationLock) {
+            if (!self.settingsStore.appSettings.applicationLock || self.$user.isUserUnlocked()) {
                 // refresh token if user is logined
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user) {
                         localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
+
+                        if (response.notificationContent) {
+                            self.rootStore.setNotificationContent(response.notificationContent);
+                        }
                     }
                 });
 

diff --git a/src/desktop-main.js b/src/desktop-main.js
@@ -306,6 +306,8 @@ const vuetify = createVuetify({
                     'on-background': '#413935',
                     'surface': '#fff',
                     'on-surface': '#413935',
+                    'notification-background': '#ffffff',
+                    'on-notification-background': '#000',
                     'grey-50': '#fafafa',
                     'grey-100': '#f0f2f8',
                     'grey-200': '#eeeeee',
@@ -374,6 +376,8 @@ const vuetify = createVuetify({
                     'on-background': '#fcf0e3',
                     'surface': '#1c1c1d',
                     'on-surface': '#fcf0e3',
+                    'notification-background': '#1e1e1e',
+                    'on-notification-background': '#fff',
                     'grey-50': '#212121',
                     'grey-100': '#424242',
                     'grey-200': '#616161',

diff --git a/src/mobile-main.js b/src/mobile-main.js
@@ -9,6 +9,7 @@ import Framework7LoginScreen from 'framework7/components/login-screen';
 import Framework7Popover from 'framework7/components/popover';
 import Framework7Actions from 'framework7/components/actions';
 import Framework7Sheet from 'framework7/components/sheet';
+import Framework7Notification from 'framework7/components/notification';
 import Framework7Toast from 'framework7/components/toast';
 import Framework7Preloader from 'framework7/components/preloader';
 import Framework7Progressbar from 'framework7/components/progressbar';
@@ -42,6 +43,7 @@ import 'framework7/components/login-screen/css';
 import 'framework7/components/popover/css';
 import 'framework7/components/actions/css';
 import 'framework7/components/sheet/css';
+import 'framework7/components/notification/css';
 import 'framework7/components/toast/css';
 import 'framework7/components/preloader/css';
 import 'framework7/components/progressbar/css';
@@ -130,6 +132,7 @@ Framework7.use([
     Framework7Popover,
     Framework7Actions,
     Framework7Sheet,
+    Framework7Notification,
     Framework7Toast,
     Framework7Preloader,
     Framework7Progressbar,

diff --git a/src/stores/index.js b/src/stores/index.js
@@ -17,13 +17,18 @@ import logger from '@/lib/logger.js';
 import { isObject, isString } from '@/lib/common.js';
 
 export const useRootStore = defineStore('root', {
+    state: () => ({
+        currentNotification: null
+    }),
     actions: {
         resetAllStates(resetUserInfoAndSettings) {
             if (resetUserInfoAndSettings) {
                 const exchangeRatesStore = useExchangeRatesStore();
                 exchangeRatesStore.resetLatestExchangeRates();
             }
 
+            this.setNotificationContent(null);
+
             const statisticsStore = useStatisticsStore();
             statisticsStore.resetTransactionStatistics();
 
@@ -511,6 +516,9 @@ export const useRootStore = defineStore('root', {
                     }
                 });
             });
+        },
+        setNotificationContent(content) {
+            this.currentNotification = content;
         }
     }
 });
diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css
@@ -62,6 +62,7 @@ input[type=number] {
     --f7-color-gray-rgb: 142, 142, 147;
     --f7-color-gray-shade: #79797f;
     --f7-color-gray-tint: #a3a3a7;
+    --f7-notification-title-text-transform: unset;
 }
 
 .color-gray {

diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
@@ -306,6 +306,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (authResponse.notificationContent) {
+                    self.rootStore.setNotificationContent(authResponse.notificationContent);
+                }
+
                 self.$router.replace('/');
             }).catch(error => {
                 self.logining = false;
@@ -355,6 +359,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (authResponse.notificationContent) {
+                    self.rootStore.setNotificationContent(authResponse.notificationContent);
+                }
+
                 self.$router.replace('/');
             }).catch(error => {
                 self.verifying = false;

diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
@@ -463,6 +463,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (response.notificationContent) {
+                    self.rootStore.setNotificationContent(response.notificationContent);
+                }
+
                 self.submitting = false;
 
                 if (self.usePresetCategories && !response.presetCategoriesSaved) {

diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
@@ -188,6 +188,10 @@ export default {
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
+
+                    if (response.notificationContent) {
+                        self.rootStore.setNotificationContent(response.notificationContent);
+                    }
                 });
 
                 if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
@@ -233,6 +237,10 @@ export default {
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
+
+                    if (response.notificationContent) {
+                        self.rootStore.setNotificationContent(response.notificationContent);
+                    }
                 });
 
                 if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {

diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
@@ -315,6 +315,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (authResponse.notificationContent) {
+                    self.rootStore.setNotificationContent(authResponse.notificationContent);
+                }
+
                 router.refreshPage();
             }).catch(error => {
                 self.logining = false;
@@ -378,6 +382,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (authResponse.notificationContent) {
+                    self.rootStore.setNotificationContent(authResponse.notificationContent);
+                }
+
                 self.show2faSheet = false;
                 router.refreshPage();
             }).catch(error => {

diff --git a/src/views/mobile/SignupPage.vue b/src/views/mobile/SignupPage.vue
@@ -333,6 +333,10 @@ export default {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
+                if (response.notificationContent) {
+                    self.rootStore.setNotificationContent(response.notificationContent);
+                }
+
                 self.submitting = false;
                 self.$hideLoading();
 

diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
@@ -141,6 +141,10 @@ export default {
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
+
+                    if (response.notificationContent) {
+                        self.rootStore.setNotificationContent(response.notificationContent);
+                    }
                 });
 
                 if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
@@ -191,6 +195,10 @@ export default {
 
                         setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
+
+                    if (response.notificationContent) {
+                        self.rootStore.setNotificationContent(response.notificationContent);
+                    }
                 });
 
                 if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {