Refine global dialog

src/components/GlobalDialog.vue

@@ -1,22 +1,22 @@
 <template>
   <v-dialog
-    v-bind="config"
+    v-bind="config.dialog"
     v-model="value"
   >
     <v-card v-if="!!config">
-      <v-card-title v-text="content.title" />
+      <v-card-title v-text="config.title" />
       <v-card-text class="content">
         <v-text-field
           v-if="isInput"
           v-model="input"
-          :label="content.text"
-          :rules="content.rules"
-          :placeholder="content.placeholder"
-          :hide-details="!content.rules"
+          :label="config.text"
+          :rules="config.rules"
+          :placeholder="config.placeholder"
+          :hide-details="!config.rules"
           autofocus
         />
         <template v-else>
-          {{ content.text }}
+          {{ config.text }}
         </template>
       </v-card-text>
       <v-card-actions>
@@ -61,7 +61,9 @@ const BUTTONS = {
 };
 
 const DefaultConfig = {
-  width: '25%',
+  dialog: {
+    width: '25%',
+  }
 };
 
 export default {
@@ -74,17 +76,16 @@ export default {
       }
       return Object.assign({}, DefaultConfig, userConfig.value) as DialogConfig;
     });
-    const content = computed(() => (config.value ? config.value.content : null));
     const value = ref<boolean>();
     const input = ref<string>();
 
     const isInput = computed(() => {
-      const type = content.value!.type
+      const type = config.value!.type
       return type === DialogType.Input
     })
 
     async function clickBtn(btnValue: any) {
-      const cb = content.value!.callback;
+      const cb = config.value!.callback;
 
       if (cb) {
         if (isInput.value) {
@@ -102,7 +103,7 @@ export default {
       if (!v) {
         input.value = undefined
       } else {
-        input.value = v.content.value
+        input.value = v.value
       }
     });
     watch(value, (v) => {
@@ -114,7 +115,7 @@ export default {
     }, { lazy: true });
 
     const btns = computed(() => {
-      const c = content.value;
+      const c = config.value;
       const dialogType = (c && c.type) ? c.type : DialogType.Alert;
 
       if (dialogType === DialogType.Custom) {
@@ -126,7 +127,6 @@ export default {
 
     return {
       config,
-      content,
       value,
       input,
       isInput,

src/components/Torrents.vue

@@ -358,7 +358,6 @@ function getStateInfo(state: string) {
   methods: {
     ...mapMutations([
       'updateConfig',
-      'showDialog',
       'showSnackBar',
     ]),
     ...mapActions([
@@ -403,7 +402,6 @@ export default class Torrents extends Vue {
   filter!: TorrentFilter
 
   updateConfig!: (_: ConfigPayload) => void
-  showDialog!: (_: DialogConfig) => void
   showSnackBar!: (_: SnackBarConfig) => void
   asyncShowDialog!: (_: DialogConfig) => Promise<string | undefined>
 
@@ -475,11 +473,9 @@ export default class Torrents extends Vue {
       this.selectedRows = this.allTorrents;
     }
     const v = await this.asyncShowDialog({
-      content: {
-        title: 'Reannounce Torrents',
-        text: 'Are you sure want to reannounce torrents?',
-        type: DialogType.OkCancel,
-      },
+      title: 'Reannounce Torrents',
+      text: 'Are you sure want to reannounce torrents?',
+      type: DialogType.OkCancel,
     });
 
     if (!v) {
@@ -492,15 +488,10 @@ export default class Torrents extends Vue {
   }
 
   async recheckTorrents() {
-    const v = await new Promise((resolve) => {
-      this.showDialog({
-        content: {
-          title: 'Recheck Torrents',
-          text: 'Are you sure want to recheck torrents?',
-          type: DialogType.OkCancel,
-          callback: resolve,
-        },
-      });
+    const v = await this.asyncShowDialog({
+      title: 'Recheck Torrents',
+      text: 'Are you sure want to recheck torrents?',
+      type: DialogType.OkCancel,
     });
 
     if (!v) {
@@ -516,12 +507,10 @@ export default class Torrents extends Vue {
 
     const oldPath = savePaths.length > 1 ? '' : savePaths[0].save_path
     const v = await this.asyncShowDialog({
-      content: {
-        title: tr('title.set_location'),
-        text: '',
-        type: DialogType.Input,
-        value: oldPath,
-      },
+      title: tr('title.set_location'),
+      text: '',
+      type: DialogType.Input,
+      value: oldPath,
     });
 
     if (!v) {

src/components/dialogs/RssDialog.vue

@@ -367,10 +367,8 @@ export default class RssDialog extends HasTask {
 
   async addRssItem() {
     const input = await this.asyncShowDialog({
-      content: {
-        text: tr('dialog.rss.feed_url'),
-        type: DialogType.Input,
-      },
+      text: tr('dialog.rss.feed_url'),
+      type: DialogType.Input,
     })
 
     if (!input) {
@@ -389,11 +387,9 @@ export default class RssDialog extends HasTask {
 
   async renameRssItem() {
     const input = await this.asyncShowDialog({
-      content: {
-        text: tr('name'),
-        type: DialogType.Input,
-        value: this.selectedPath!,
-      },
+      text: tr('name'),
+      type: DialogType.Input,
+      value: this.selectedPath!,
     })
 
     if (!input) {
@@ -419,10 +415,8 @@ export default class RssDialog extends HasTask {
 
   async deleteRssItem() {
     const confirm = await this.asyncShowDialog({
-      content: {
-        text: tr('dialog.rss.delete_feeds'),
-        type: DialogType.OkCancel,
-      },
+      text: tr('dialog.rss.delete_feeds'),
+      type: DialogType.OkCancel,
     })
 
     if (!confirm) {

src/components/dialogs/RssRulesDialog.vue

@@ -283,10 +283,8 @@ export default class RssRulesDialog extends Vue {
 
   async addRssRule() {
     const name = await this.asyncShowDialog({
-      content: {
-        text: tr('dialog.rss_rule.new_rule_name'),
-        type: DialogType.Input,
-      }
+      text: tr('dialog.rss_rule.new_rule_name'),
+      type: DialogType.Input,
     })
 
     if (!name) {
@@ -305,10 +303,8 @@ export default class RssRulesDialog extends Vue {
 
   async deleteRssRule() {
     const input = await this.asyncShowDialog({
-      content: {
-        text: tr('dialog.rss_rule.delete_rule'),
-        type: DialogType.OkCancel,
-      }
+      text: tr('dialog.rss_rule.delete_rule'),
+      type: DialogType.OkCancel,
     })
 
     if (!input) {

src/components/drawer/DrawerFooter.vue

@@ -63,7 +63,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component';
-import { mapMutations } from 'vuex';
+import { mapMutations, mapActions } from 'vuex';
 import { Watch } from 'vue-property-decorator';
 
 import { tr, translations, defaultLocale, LocaleKey } from '@/locale';
@@ -80,10 +80,12 @@ type AllLocaleKey = NonNullable<LocaleKey> | typeof AUTO_KEY;
   },
   methods: {
     ...mapMutations([
-      'showDialog',
       'showSnackBar',
       'updateConfig',
     ]),
+    ...mapActions([
+      'asyncShowDialog',
+    ]),
   },
 })
 export default class DrawerFooter extends Vue {
@@ -92,7 +94,7 @@ export default class DrawerFooter extends Vue {
   oldLocale = this.currentLocale
   showInfo = false
 
-  showDialog!: (_: DialogConfig) => void
+  asyncShowDialog!: (_: DialogConfig) => Promise<string | undefined>
   showSnackBar!: (_: SnackBarConfig) => void
   updateConfig!: (_: ConfigPayload) => void
 
@@ -126,15 +128,10 @@ export default class DrawerFooter extends Vue {
       return;
     }
 
-    const confirm = await new Promise((resolve) => {
-      const localeKey = locale === AUTO_KEY ? defaultLocale : locale
-      this.showDialog({
-        content: {
-          text: tr('dialog.switch_locale.msg', { lang: translations[localeKey].lang }),
-          type: DialogType.OkCancel,
-          callback: resolve,
-        },
-      });
+    const localeKey = locale === AUTO_KEY ? defaultLocale : locale
+    const confirm = await this.asyncShowDialog({
+      text: tr('dialog.switch_locale.msg', { lang: translations[localeKey].lang }),
+      type: DialogType.OkCancel,
     });
 
     if (!confirm) {

src/store/dialog.ts

@@ -1,4 +1,4 @@
-import { merge, isString, cloneDeep } from 'lodash'
+import { merge, cloneDeep } from 'lodash'
 import { Module } from 'vuex';
 import { DialogState } from './types';
 
@@ -10,15 +10,7 @@ export const dialogStore: Module<DialogState, any> = {
   },
   mutations: {
     showDialog(state, payload) {
-      if (isString(payload)) {
-        state.config = {
-          content: {
-            text: payload,
-          },
-        };
-      } else {
-        state.config = cloneDeep(payload);
-      }
+      state.config = cloneDeep(payload);
     },
     closeDialog(state) {
       state.config = null;

src/store/types.ts

@@ -33,18 +33,19 @@ export enum DialogType {
 }
 
 export interface DialogConfig {
-  content: {
-    title?: string;
-    text: string;
-    callback?: CallableFunction;
-    type?: DialogType;
-    buttons?: any;
-
-    rules?: CallableFunction[];
-    placeholder?: string;
-    value?: string;
+  dialog?: {
+    width?: string;
   };
-  width?: string;
+
+  title?: string;
+  text: string;
+  callback?: CallableFunction;
+  type?: DialogType;
+  buttons?: any;
+
+  rules?: CallableFunction[];
+  placeholder?: string;
+  value?: string;
 }
 
 export interface DialogState {