refactor: improve preference

src/renderer/components/Preference/Advanced.vue

@@ -371,16 +371,18 @@
   import is from 'electron-is'
   import { dialog } from '@electron/remote'
   import { mapState } from 'vuex'
-  import { cloneDeep } from 'lodash'
+  import { cloneDeep, extend, isEmpty } from 'lodash'
   import randomize from 'randomatic'
   import * as clipboard from 'clipboard-polyfill'
   import ShowInFolder from '@/components/Native/ShowInFolder'
   import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
   import userAgentMap from '@shared/ua'
-  import { trackerSourceOptions } from '@shared/constants'
+  import { APP_RUN_MODE, trackerSourceOptions } from '@shared/constants'
   import {
+    backupConfig,
     buildRpcUrl,
     calcFormLabelWidth,
+    changedConfig,
     checkIsNeedRestart,
     convertCommaToLine,
     convertLineToComma,
@@ -391,6 +393,8 @@
   import '@/components/Icons/dice'
   import '@/components/Icons/sync'
   import '@/components/Icons/refresh'
+  import { getLanguage } from '@shared/locales'
+  import { getLocaleManager } from '@/components/Locale'
 
   const initForm = (config) => {
     const {
@@ -446,8 +450,9 @@
     },
     data () {
       const { locale } = this.$store.state.preference.config
-      const form = initForm(this.$store.state.preference.config)
-      const formOriginal = cloneDeep(form)
+      const formOriginal = initForm(this.$store.state.preference.config)
+      let form = {}
+      form = initForm(extend(form, formOriginal, changedConfig.advanced))
 
       return {
         form,
@@ -594,6 +599,10 @@
           .then((config) => {
             this.form = initForm(config)
             this.formOriginal = cloneDeep(this.form)
+            if (changedConfig.basic.theme !== undefined) {
+              this.$electron.ipcRenderer.send('command',
+                                              'application:change-theme', changedConfig.basic.theme)
+            }
           })
       },
       submitForm (formName) {
@@ -603,15 +612,19 @@
             return false
           }
 
-          const changed = diffConfig(this.formOriginal, this.form)
           const data = {
-            ...changed,
-            protocols: {
-              ...this.form.protocols
-            }
+            ...diffConfig(this.formOriginal, this.form),
+            ...changedConfig.basic
+          }
+
+          const { btAutoDownloadContent, runMode, openAtLogin, autoHideWindow, btTracker, noProxy } = data
+
+          if ('btAutoDownloadContent' in data) {
+            data.pauseMetadata = !btAutoDownloadContent
+            data.followMetalink = btAutoDownloadContent
+            data.followTorrent = btAutoDownloadContent
           }
 
-          const { btTracker, noProxy } = changed
           if (btTracker) {
             data.btTracker = reduceTrackerString(convertLineToComma(btTracker))
           }
@@ -632,7 +645,28 @@
               this.$msg.success(this.$t('preferences.save-fail-message'))
             })
 
+          changedConfig.basic = {}
+          changedConfig.advanced = {}
+
           if (this.isRenderer) {
+            this.$electron.ipcRenderer.send('command',
+                                            'application:open-at-login', openAtLogin)
+
+            if ('runMode' in data) {
+              this.$electron.ipcRenderer.send('command',
+                                              'application:toggle-dock', runMode === APP_RUN_MODE.STANDARD)
+            }
+
+            if ('autoHideWindow' in data) {
+              this.$electron.ipcRenderer.send('command',
+                                              'application:auto-hide-window', autoHideWindow)
+            }
+
+            if (checkIsNeedRestart(data)) {
+              this.$electron.ipcRenderer.send('command',
+                                              'application:relaunch')
+            }
+
             this.$electron.ipcRenderer.send('command',
                                             'application:setup-protocols-client', data.protocols)
 
@@ -645,6 +679,41 @@
       resetForm (formName) {
         this.syncFormConfig()
       }
+    },
+    beforeRouteLeave (to, from, next) {
+      changedConfig.advanced = diffConfig(this.formOriginal, this.form)
+      if (to.path === '/preference/basic') {
+        next()
+      } else {
+        if (isEmpty(changedConfig.basic) && isEmpty(changedConfig.advanced)) {
+          next()
+        } else {
+          dialog.showMessageBox({
+            type: 'warning',
+            title: this.$t('preferences.not-saved'),
+            message: this.$t('preferences.not-saved-confirm'),
+            buttons: [this.$t('app.yes'), this.$t('app.no')],
+            cancelId: 1
+          }).then(({ response }) => {
+            if (response === 0) {
+              if (changedConfig.basic.theme !== undefined) {
+                this.$electron.ipcRenderer.send('command',
+                                                'application:change-theme', backupConfig.theme)
+              }
+              if (changedConfig.basic.locale !== undefined) {
+                const lng = getLanguage(backupConfig.locale)
+                getLocaleManager().changeLanguage(lng)
+                this.$electron.ipcRenderer.send('command',
+                                                'application:change-locale', lng)
+              }
+              changedConfig.basic = {}
+              changedConfig.advanced = {}
+              backupConfig.theme = undefined
+              next()
+            }
+          })
+        }
+      }
     }
   }
 </script>

src/renderer/components/Preference/Basic.vue

@@ -25,6 +25,7 @@
             <mo-theme-switcher
               v-model="form.theme"
               @change="handleThemeChange"
+              ref="themeSwitcher"
             />
           </el-col>
           <el-col v-if="showHideAppMenuOption" class="form-item-sub" :span="16">
@@ -256,19 +257,24 @@
 
 <script>
   import is from 'electron-is'
+  import { dialog } from '@electron/remote'
   import { mapState } from 'vuex'
-  import { cloneDeep } from 'lodash'
+  import { cloneDeep, extend, isEmpty } from 'lodash'
   import SubnavSwitcher from '@/components/Subnav/SubnavSwitcher'
   import SelectDirectory from '@/components/Native/SelectDirectory'
   import ThemeSwitcher from '@/components/Preference/ThemeSwitcher'
   import { availableLanguages, getLanguage } from '@shared/locales'
   import { getLocaleManager } from '@/components/Locale'
   import {
+    backupConfig,
     calcFormLabelWidth,
+    changedConfig,
     checkIsNeedRestart,
+    convertLineToComma,
     diffConfig
   } from '@shared/utils'
   import { APP_RUN_MODE } from '@shared/constants'
+  import { reduceTrackerString } from '@shared/utils/tracker'
 
   const initForm = (config) => {
     const {
@@ -338,8 +344,16 @@
     },
     data () {
       const { locale } = this.$store.state.preference.config
-      const form = initForm(this.$store.state.preference.config)
-      const formOriginal = cloneDeep(form)
+      const formOriginal = initForm(this.$store.state.preference.config)
+      let form = {}
+      form = initForm(extend(form, formOriginal, changedConfig.basic))
+
+      if (backupConfig.theme === undefined) {
+        backupConfig.theme = formOriginal.theme
+      } else {
+        formOriginal.theme = backupConfig.theme
+      }
+      backupConfig.locale = formOriginal.locale
 
       return {
         form,
@@ -480,16 +494,27 @@
             return false
           }
 
-          const { btAutoDownloadContent, runMode, openAtLogin, autoHideWindow } = this.form
-          const changed = diffConfig(this.formOriginal, this.form)
           const data = {
-            ...changed
+            ...diffConfig(this.formOriginal, this.form),
+            ...changedConfig.advanced
           }
-          if ('btAutoDownloadContent' in changed) {
+
+          const { btAutoDownloadContent, runMode, openAtLogin, autoHideWindow, btTracker, noProxy } = data
+
+          if ('btAutoDownloadContent' in data) {
             data.pauseMetadata = !btAutoDownloadContent
             data.followMetalink = btAutoDownloadContent
             data.followTorrent = btAutoDownloadContent
           }
+
+          if (btTracker) {
+            data.btTracker = reduceTrackerString(convertLineToComma(btTracker))
+          }
+
+          if (noProxy) {
+            data.noProxy = convertLineToComma(noProxy)
+          }
+
           console.log('[Motrix] preference changed data:', data)
 
           this.$store.dispatch('preference/save', data)
@@ -502,16 +527,19 @@
               this.$msg.success(this.$t('preferences.save-fail-message'))
             })
 
+          changedConfig.basic = {}
+          changedConfig.advanced = {}
+
           if (this.isRenderer) {
             this.$electron.ipcRenderer.send('command',
                                             'application:open-at-login', openAtLogin)
 
-            if ('runMode' in changed) {
+            if ('runMode' in data) {
               this.$electron.ipcRenderer.send('command',
                                               'application:toggle-dock', runMode === APP_RUN_MODE.STANDARD)
             }
 
-            if ('autoHideWindow' in changed) {
+            if ('autoHideWindow' in data) {
               this.$electron.ipcRenderer.send('command',
                                               'application:auto-hide-window', autoHideWindow)
             }
@@ -520,12 +548,53 @@
               this.$electron.ipcRenderer.send('command',
                                               'application:relaunch')
             }
+
+            this.$electron.ipcRenderer.send('command',
+                                            'application:setup-protocols-client', data.protocols)
+
+            if (checkIsNeedRestart(data)) {
+              this.$electron.ipcRenderer.send('command', 'application:relaunch')
+            }
           }
         })
       },
       resetForm (formName) {
+        this.$refs.themeSwitcher.currentValue = backupConfig.theme
+        this.handleLocaleChange(this.formOriginal.locale)
         this.syncFormConfig()
       }
+    },
+    beforeRouteLeave (to, from, next) {
+      changedConfig.basic = diffConfig(this.formOriginal, this.form)
+      if (to.path === '/preference/advanced') {
+        next()
+      } else {
+        if (isEmpty(changedConfig.basic) && isEmpty(changedConfig.advanced)) {
+          next()
+        } else {
+          dialog.showMessageBox({
+            type: 'warning',
+            title: this.$t('preferences.not-saved'),
+            message: this.$t('preferences.not-saved-confirm'),
+            buttons: [this.$t('app.yes'), this.$t('app.no')],
+            cancelId: 1
+          }).then(({ response }) => {
+            if (response === 0) {
+              if (changedConfig.basic.theme !== undefined) {
+                this.$electron.ipcRenderer.send('command',
+                                                'application:change-theme', backupConfig.theme)
+              }
+              if (changedConfig.basic.locale !== undefined) {
+                this.handleLocaleChange(this.formOriginal.locale)
+              }
+              changedConfig.basic = {}
+              changedConfig.advanced = {}
+              backupConfig.theme = undefined
+              next()
+            }
+          })
+        }
+      }
     }
   }
 </script>

src/shared/locales/ar/preferences.js

@@ -78,5 +78,7 @@ export default {
   'baidu-exporter-help': 'اضغط هنا لبدء الاستخدام',
   'auto-update': 'التحديث التلقائي',
   'auto-check-update': 'تحقق تلقائيًا من التحديث',
-  'last-check-update-time': 'آخر مرة تم التحقق من وجود تحديثات'
+  'last-check-update-time': 'آخر مرة تم التحقق من وجود تحديثات',
+  'not-saved': 'التفضيلات غير محفوظة',
+  'not-saved-confirm': 'ستفقد التفضيلات التي تم تغييرها ، هل أنت متأكد من المغادرة؟'
 }

src/shared/locales/bg/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'Кликнете тук, за да използвате',
   'auto-update':'автоматично обновяване',
   'auto-check-update':'автоматична проверка на актуализациите',
-  'last-check-update-time': 'последната актуализация е проверена'
+  'last-check-update-time': 'последната актуализация е проверена',
+  'not-saved': 'Предпочитанията не са запазени',
+  'not-saved-confirm': 'Променените предпочитания ще бъдат загубени, сигурни ли сте, че ще напуснете?'
 }

src/shared/locales/ca/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'Fes click aquí per veure l\'ús',
   'auto-update': 'Actualitzar automàticament',
   'auto-check-update': 'Revisar actualitzacions automàticament',
-  'last-check-update-time': 'Última revisió d\'actualitzacions'
+  'last-check-update-time': 'Última revisió d\'actualitzacions',
+  'not-saved': 'Preferències no desades',
+  'not-saved-confirm': 'Les preferències modificades es perdran, esteu segur que marxareu?'
 }

src/shared/locales/de/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'mehr über die Verwendung zu erfahren',
   'auto-update': 'Auto-Update',
   'auto-check-update': 'Automatische Updates überprüfen',
-  'last-check-update-time': 'letzte kontrolle update - zeit'
+  'last-check-update-time': 'letzte kontrolle update - zeit',
+  'not-saved': 'Einstellungen nicht gespeichert',
+  'not-saved-confirm': 'Die geänderten Einstellungen gehen verloren. Möchten Sie wirklich gehen?'
 }

src/shared/locales/el/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'Κάντε κλικ εδώ για χρήση',
   'auto-update': 'Αυτόματη ενημέρωση',
   'auto-check-update': 'Αυτόματος έλεγχος για ενημερώσεις',
-  'last-check-update-time': 'Τελευταία φορά που έγινε έλεγχος για Ενημερώσεις'
+  'last-check-update-time': 'Τελευταία φορά που έγινε έλεγχος για Ενημερώσεις',
+  'not-saved': 'Οι προτιμήσεις δεν αποθηκεύτηκαν',
+  'not-saved-confirm': 'Οι αλλαγμένες προτιμήσεις θα χαθούν, είστε σίγουροι ότι θα φύγετε;'
 }

src/shared/locales/en-US/preferences.js

@@ -78,5 +78,7 @@ export default {
   'baidu-exporter-help': 'Click here for usage',
   'auto-update': 'Auto Update',
   'auto-check-update': 'Automatically check for update',
-  'last-check-update-time': 'Last Time Checking for Update'
+  'last-check-update-time': 'Last Time Checking for Update',
+  'not-saved': 'Preferences not saved',
+  'not-saved-confirm': 'The modified preferences will be lost, are you sure to leave?'
 }

src/shared/locales/es/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'Presiona aqui para ver el uso',
   'auto-update': 'Auto-actualizar',
   'auto-check-update': 'Revisar automáticamente por actualizaciones',
-  'last-check-update-time': 'Última revisión de actualizaciones'
+  'last-check-update-time': 'Última revisión de actualizaciones',
+  'not-saved': 'Preferencias no guardadas',
+  'not-saved-confirm': 'Las preferencias cambiadas se perderán, ¿está seguro de irse?'
 }

src/shared/locales/fa/preferences.js

@@ -78,5 +78,7 @@ export default {
   'baidu-exporter-help': 'برای استفاده اینجا کلیک کنید',
   'auto-update': 'به‌روز رسانی خودکار',
   'auto-check-update': 'به صورت خودکار برای به‌روز رسانی بررسی کن',
-  'last-check-update-time': 'آخرین زمان بررسی برای به‌روز رسانی'
+  'last-check-update-time': 'آخرین زمان بررسی برای به‌روز رسانی',
+  'not-saved': 'تنظیمات برگزیده ذخیره نشد',
+  'not-saved-confirm': 'تنظیمات برگزیده تغییر یافته از بین خواهند رفت، آیا مطمئن هستید که می روید؟'
 }

src/shared/locales/fr/preferences.js

@@ -76,5 +76,7 @@ export default {
   'baidu-exporter-help': 'Cliquez ici pour voir l\'utilisation',
   'auto-update': 'Mettre à jour',
   'auto-check-update': 'Mise à jour automatique',
-  'last-check-update-time': 'dernier contrôle la mise à jour du temps'
+  'last-check-update-time': 'dernier contrôle la mise à jour du temps',
+  'not-saved': 'Préférences non enregistrées',
+  'not-saved-confirm': 'Les préférences modifiées seront perdues, êtes-vous sûr de partir ?'
 }