Add confirmation modal when deactivating users in school class

client/src/App.vue

@@ -27,6 +27,7 @@
   import FullscreenImage from '@/components/FullscreenImage';
   import FullscreenInfographic from '@/components/FullscreenInfographic';
   import FullscreenVideo from '@/components/FullscreenVideo';
+  import DeactivatePerson from '@/components/profile/DeactivatePerson';
 
   import {mapGetters} from 'vuex';
 
@@ -53,7 +54,8 @@
       EditClassNameWizard,
       FullscreenImage,
       FullscreenInfographic,
-      FullscreenVideo
+      FullscreenVideo,
+      DeactivatePerson
     },
 
     computed: {

client/src/components/profile/DeactivatePerson.vue

@@ -0,0 +1,118 @@
+<template>
+  <modal class="deactivate-user" :hide-header="true" :small="true">
+    <h3 class="deactivate-user__heading">
+      <template v-if="myself">
+        Mich
+      </template>
+      <template v-else>
+        Person
+      </template>
+      deaktivieren
+    </h3>
+    <p class="deactivate-user__text deactivate-user__paragraph">
+      <template v-if="myself">
+        Möchten Sie die Klasse <strong class="deactivate-user__text--strong">{{schoolClass}}</strong> verlassen?
+      </template>
+      <template v-else>
+        Möchten Sie <strong
+        class="deactivate-user__text--strong">{{name}}</strong> in der
+        Klasse
+        <strong class="deactivate-user__text--strong">{{schoolClass}}</strong> deaktivieren?
+      </template>
+    </p>
+    <ul class="deactivate-user__list">
+      <li class="deactivate-user__text deactivate-user__list-item">
+        <template v-if="myself">
+          Sie können
+        </template>
+        <template v-else>
+          Diese Person kann
+        </template>
+        in Zukunft keine Inhalte mehr erfassen, bearbeiten und teilen.
+      </li>
+      <li class="deactivate-user__text deactivate-user__list-item">
+        <template v-if="myself">
+          Sie können
+        </template>
+        <template v-else>
+          Diese Person kann
+        </template>
+        weiterhin Module und Instrumente lesen.
+      </li>
+      <li class="deactivate-user__text deactivate-user__list-item">
+        <template v-if="myself">
+          Sie können der Klasse jederzeit wieder beitreten.
+        </template>
+        <template v-else>
+          Sie können diese Person jederzeit wieder aktivieren.
+        </template>
+      </li>
+    </ul>
+    <div slot="footer">
+      <a class="button button--primary" data-cy="modal-save-button" v-on:click="confirm">Speichern</a>
+      <a class="button" v-on:click="cancel">Abbrechen</a>
+    </div>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+
+  import {mapGetters} from 'vuex';
+
+  export default {
+    components: {
+      Modal
+    },
+
+    computed: {
+      ...mapGetters(['modulePayload']),
+      myself() {
+        return this.modulePayload[0] || false
+      },
+      name() {
+        return this.modulePayload[1] || ''
+      },
+      schoolClass() {
+        return this.modulePayload[2] || ''
+      }
+    },
+
+    methods: {
+      confirm() {
+        this.$store.dispatch('confirmModal');
+      },
+      cancel() {
+        this.$store.dispatch('cancelModal');
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .deactivate-user {
+    &__heading {
+      margin-bottom: $medium-spacing;
+    }
+
+    &__list {
+      padding-left: $medium-spacing;
+    }
+
+    &__list-item {
+      list-style: disc;
+    }
+
+    &__text {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
+
+      &--strong {
+        font-weight: 600;
+      }
+    }
+  }
+</style>

client/src/pages/myClass.vue

@@ -61,7 +61,16 @@
         this.changeMember(member, true);
       },
       remove(member) {
-        this.changeMember(member, false);
+        this.$store.dispatch('deactivateUser', [
+          member.id === this.me.id, // myself
+          `${member.firstName} ${member.lastName}`, // full name
+          this.me.selectedClass.name // class name
+        ])
+          .then(() => {
+            this.changeMember(member, false);
+          })
+          .catch(() => {
+          });
       }
     },
   }

client/src/store/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 // WARNING fixme todo: please do not use this anymore, use the local GraphQL cache
 export default new Vuex.Store({
@@ -33,7 +33,10 @@ export default new Vuex.Store({
     scrollToAssignmentId: '',
     scrollToAssignmentReady: false,
     scrollingToAssignment: false,
-    editModule: false
+    editModule: false,
+    modulePayload: [],
+    modalResolve: () => {},
+    modalReject: () => {},
   },
 
   getters: {
@@ -50,12 +53,21 @@ export default new Vuex.Store({
     currentNote: state => state.currentNote,
     currentNoteParent: state => state.currentNoteParent,
     noteType: state => state.noteType,
+    modulePayload: state => state.modulePayload
   },
 
   actions: {
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
     },
+    confirmModal({dispatch, state}) {
+      dispatch('hideModal');
+      state.modalResolve();
+    },
+    cancelModal({dispatch, state}) {
+      dispatch('hideModal');
+      state.modalReject();
+    },
     hideModal({commit, dispatch}) {
       document.body.classList.remove('no-scroll'); // won't get at the body any other way
       commit('setModal', false);
@@ -80,6 +92,7 @@ export default new Vuex.Store({
       commit('setVimeoId', null);
       commit('setCurrentNote', null);
       commit('setNoteType', '');
+      commit('setModulePayload', []);
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -109,7 +122,12 @@ export default new Vuex.Store({
     },
     showModal({commit}, payload) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
+
       commit('setModal', payload);
+      return new Promise((resolve, reject) => {
+        commit('setModalResolve', resolve);
+        commit('setModalReject', reject);
+      })
     },
     addProjectEntry({commit, dispatch}, payload) {
       commit('setParentProject', payload);
@@ -167,8 +185,12 @@ export default new Vuex.Store({
     editModule({commit}, payload) {
       commit('setEditModule', payload)
     },
-    editClassName({commit, dispatch}, payload) {
+    editClassName({dispatch}, payload) {
       dispatch('showModal', 'edit-class-name-wizard');
+    },
+    deactivateUser({commit, dispatch}, payload) {
+      commit('setModulePayload', payload);
+      return dispatch('showModal', 'deactivate-person');
     }
   },
 
@@ -244,6 +266,15 @@ export default new Vuex.Store({
     },
     setNoteType(state, payload) {
       state.noteType = payload;
+    },
+    setModulePayload(state, payload) {
+      state.modulePayload = payload;
+    },
+    setModalResolve(state, payload) {
+      state.modalResolve = payload;
+    },
+    setModalReject(state, payload) {
+      state.modalReject = payload;
     }
   }
 })