Move modal to plugin

client/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="{'no-scroll': showModal || showMobileNavigation}" class="app" id="app">
+    <component :is="showModalDeprecated" v-if="showModalDeprecated"></component>
     <component :is="showModal" v-if="showModal"></component>
     <component :is="layout"></component>
     <mobile-navigation v-if="showMobileNavigation"></mobile-navigation>
@@ -62,7 +63,13 @@
       layout() {
         return (this.$route.meta.layout || 'default') + '-layout';
       },
-      ...mapGetters(['showModal', 'showMobileNavigation'])
+      ...mapGetters({
+        showModalDeprecated: 'showModal', // don't use this any more todo: remove this
+        showMobileNavigation: 'showMobileNavigation'
+      }),
+      showModal() {
+        return this.$modal.state.component;
+      }
     },
 
     mounted() {

client/src/components/profile/DeactivatePerson.vue

@@ -58,32 +58,29 @@
 <script>
   import Modal from '@/components/Modal';
 
-  import {mapGetters} from 'vuex';
-
   export default {
     components: {
       Modal
     },
 
     computed: {
-      ...mapGetters(['modulePayload']),
       myself() {
-        return this.modulePayload[0] || false
+        return this.$modal.state.payload.myself;
       },
       name() {
-        return this.modulePayload[1] || ''
+        return this.$modal.state.payload.name;
       },
       schoolClass() {
-        return this.modulePayload[2] || ''
+        return this.$modal.state.payload.className;
       }
     },
 
     methods: {
       confirm() {
-        this.$store.dispatch('confirmModal');
+        this.$modal.confirm();
       },
       cancel() {
-        this.$store.dispatch('cancelModal');
+        this.$modal.cancel();
       }
     }
   }

client/src/main.js

@@ -17,9 +17,12 @@ import {dateFilter} from './filters/date-filter';
 import autoGrow from '@/directives/auto-grow'
 import clickOutside from '@/directives/click-outside'
 import ME_QUERY from '@/graphql/gql/meQuery.gql';
+import VueModal from '@/plugins/modal';
 
 Vue.config.productionTip = false;
 
+Vue.use(VueModal);
+
 // TODO: Move into a separate project as a plugin
 //
 function getRidOfEdges(collection) {
@@ -141,6 +144,7 @@ router.beforeEach(async (to, from, next) => {
   // handle logout
   if (to.path === '/logout') {
     privateApolloClient.resetStore();
+    publicApolloClient.resetStore();
     next({name: 'login'});
     return
   }

client/src/pages/myClass.vue

@@ -61,11 +61,11 @@
         this.changeMember(member, true);
       },
       remove(member) {
-        this.$store.dispatch('deactivateUser', [
+        this.$modal.open('deactivate-person', {
-          member.id === this.me.id, // myself
+          myself: member.id === this.me.id,
-          `${member.firstName} ${member.lastName}`, // full name
+          name: `${member.firstName} ${member.lastName}`,
-          this.me.selectedClass.name // class name
+          className: this.me.selectedClass.name,
-        ])
+        })
           .then(() => {
             this.changeMember(member, false);
           })

client/src/plugins/modal.js

@@ -0,0 +1,72 @@
+// adapted from
+// https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
+import Vue from 'vue';
+
+class ModalStore {
+  constructor(data = {}) {
+    this.vm = new Vue({
+      data: () => ({
+        component: '',
+        payload: {},
+        _resolve: () => {
+        },
+        _reject: () => {
+        }
+      })
+    });
+  }
+
+  get state() {
+    return this.vm.$data;
+  }
+
+  // set component(c) {
+  //   console.log(c);
+  //   this.vm.$data.component = c;
+  // }
+}
+
+const ModalPlugin = {
+  // Store: ModalStore,
+  install(Vue, options) {
+    const store = new ModalStore({});
+
+    const reset = () => {
+      store.state.component = '';
+      store.state.payload = {};
+      store.state._resolve = () => {
+      };
+      store.state._reject = () => {
+      };
+    };
+
+    Vue.prototype.$modal = {
+      state: store.state,
+      component: store.state.component,
+      payload: store.state.payload,
+      open: (component, payload) => {
+        store.state.payload = payload;
+        store.state.component = component;
+        return new Promise((resolve, reject) => {
+          this._resolve = resolve;
+          this._reject = reject;
+        });
+      },
+      confirm: () => {
+        reset();
+        this._resolve();
+      },
+      cancel: () => {
+        reset();
+        this._reject();
+      },
+      _resolve: () => {
+      },
+      _reject: () => {
+      },
+
+    };
+  }
+};
+
+export default ModalPlugin;