Perf: Remove redundant dialog code, use Modal Mixin

package.json

@@ -25,7 +25,6 @@
     "uuid": "^8.3.2",
     "vue": "^2.6.12",
     "vue-apexcharts": "^1.6.0",
-    "vue-context": "^6.0.0",
     "vue-router": "^3.5.1",
     "vue-toastification": "^1.7.11",
     "vuedraggable": "^2.24.3",

src/components/Modals/AddModal.vue

@@ -204,7 +204,6 @@ export default {
   props: ['initialMagnet'],
   data() {
     return {
-      hndlDialog: true,
       showWrapDrag: false,
       files: [],
       category: null,
@@ -247,16 +246,6 @@ export default {
     },
     availableCategories() {
       return this.getCategories()
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/ChangeLocationModal.vue

@@ -64,7 +64,6 @@ export default {
   },
   data() {
     return {
-      hndlDialog: true,
       newPath: '',
       mdiFile, mdiFolder, mdiClose
     }
@@ -79,16 +78,6 @@ export default {
     },
     isPhone() {
       return this.$vuetify.breakpoint.xsOnly
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/ConfirmDeleteModal.vue

@@ -63,7 +63,6 @@ export default {
   mixins: [Modal],
   data() {
     return {
-      hndlDialog: true,
       withFiles: false
     }
   },
@@ -72,16 +71,6 @@ export default {
     ...mapGetters(['getTorrents']),
     torrents() {
       return this.getTorrents().filter(t => this.selected_torrents.includes(t.hash))
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   beforeDestroy() {

src/components/Modals/RenameModal.vue

@@ -61,7 +61,6 @@ export default {
   },
   data() {
     return {
-      hndlDialog: true,
       name: '',
       mdiFile
     }
@@ -73,16 +72,6 @@ export default {
     },
     isPhone() {
       return this.$vuetify.breakpoint.xsOnly
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/SearchModal/SearchModal.vue

@@ -97,7 +97,6 @@ export default {
   mixins: [Modal, FullScreenModal, General],
   data() {
     return {
-      hndlDialog: true,
       search: {
         id: null,
         status: null,
@@ -129,16 +128,6 @@ export default {
     },
     enabledSearchPlugins() {
       return this.getSearchPlugins().filter(p => p.enabled)
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/SettingsModal/SettingsModal.vue

@@ -95,7 +95,6 @@ export default {
   mixins: [Modal, FullScreenModal, SettingsTab],
   data() {
     return {
-      hndlDialog: true,
       tab: null,
       items: [],
       peers: [],
@@ -105,16 +104,6 @@ export default {
   computed: {
     isPhone() {
       return this.$vuetify.breakpoint.xsOnly
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/SortModal.vue

@@ -50,7 +50,6 @@ export default {
   mixins: [Modal],
   data() {
     return {
-      hndlDialog: true,
       sortProperty: { value: 'added_on', name: 'Added On' },
       reverse: true,
       options: [
@@ -75,17 +74,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['sort_options']),
+    ...mapState(['sort_options'])
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
-    }
   },
   methods: {
     close() {

src/components/Modals/SpeedLimitModal.vue

@@ -63,7 +63,6 @@ export default {
   },
   data() {
     return {
-      hndlDialog: true,
       limit: '',
       mdiSpeedometer, mdiClose
     }
@@ -75,16 +74,6 @@ export default {
     },
     isPhone() {
       return this.$vuetify.breakpoint.xsOnly
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/TagsAndCategories/CreateCategoryDialog.vue

@@ -68,7 +68,6 @@ export default {
     initialCategory: Object
   },
   data: () => ({
-    hndlDialog: true,
     nameRules: [
       v => !!v || 'Category name is required',
       v =>
@@ -87,16 +86,6 @@ export default {
     hasInitialCategory() {
       return !!(this.initialCategory &&
           this.initialCategory.name)
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   created() {

src/components/Modals/TagsAndCategories/CreateTagDialog.vue

@@ -45,25 +45,12 @@ export default {
   name: 'CreateTagDialog',
   mixins: [Modal],
   data: () => ({
-    hndlDialog: true,
     tagname: '',
     rules: [
       v => !!v || 'Tag is required',
       v => v.length <= 10 || 'Tag must be less than 10 characters'
     ]
   }),
-  computed: {
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
-    }
-  },
   methods: {
     create() {
       qbit.createTag(this.tagname)

src/components/Modals/TorrentDetailModal/TorrentDetailModal.vue

@@ -93,7 +93,6 @@ export default {
   },
   data() {
     return {
-      hndlDialog: true,
       hndlFullscreen: false,
       tab: null,
       items: [{ tab: 'Info' }, { tab: 'Content' }],
@@ -116,16 +115,6 @@ export default {
         return true
 
       return false
-    },
-    dialog: {
-      get: function () {
-        return this.hndlDialog
-      },
-      set: function (e) {
-        this.hndlDialog = e
-        if (e === false)
-          this.deleteModal()
-      }
     }
   },
   methods: {

src/mixins/Modal.js

@@ -1,12 +1,31 @@
 import { mapGetters } from 'vuex'
 export default {
   props: ['guid'],
-  computed: {
+  data() {
-    ...mapGetters(['getModalState'])
+    return {
+      hndlDialog: true
+    }
   },
+  computed: {
+    ...mapGetters(['getModalState']),
+    dialog: {
+      get() {
+        return this.hndlDialog
+      },
+      set(val) {
+        this.hndlDialog = val
+        if (!val)
+          this.deleteModal()
+      }
+    }
+  },
+  
   methods: {
     deleteModal() {
-      setTimeout(() => this.$store.commit('DELETE_MODAL', this.guid), 100)
+      //this.hndlDialog = false
+      setTimeout(function () {
+        this.$store.commit('DELETE_MODAL', this.guid)
+      }.bind(this), 300)
     }
   },
   beforeDestroy() {