feature: add New Moadal - deleteUserModal

webapp/components/DeleteUserModal/DeleteUserModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="message" />
+    <delete-data />
+    <template slot="footer">
+      <base-button class="cancel" @click="cancel">löschen abbrechen</base-button>
+      <base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
+        User jetzt Löschen!
+      </base-button>
+    </template>
+  </ds-modal>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import DeleteData from '~/components/DeleteData/DeleteData.vue'
+
+export default {
+  components: {
+    DeleteData,
+  },
+  props: {
+    name: { type: String, default: 'jetzt löschen' },
+    type: { type: String, required: true },
+    id: { type: String, required: true },
+  },
+  data() {
+    return {
+      isOpen: true,
+      success: false,
+      loading: false,
+    }
+  },
+  computed: {
+    title() {
+      return 'User Löschen'
+      // return this.$t(`release.${this.type}.title`)
+    },
+    message() {
+      const name = this.$filters.truncate(this.name, 30)
+      return name
+      // return this.$t(`release.${this.type}.message`, { name })
+    },
+  },
+  methods: {
+    cancel() {
+      // TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
+      // await this.modalData.buttons.cancel.callback()
+      this.isOpen = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 1000)
+    },
+    async confirm() {
+      try {
+        // TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
+        // await this.modalData.buttons.confirm.callback()
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+              review(resourceId: $resourceId, disable: $disable, closed: $closed) {
+                disable
+              }
+            }
+          `,
+          variables: { resourceId: this.id, disable: false, closed: false },
+        })
+        this.$toast.success('user gelöscht')
+        this.isOpen = false
+        setTimeout(() => {
+          this.$emit('close')
+        }, 1000)
+      } catch (err) {
+        this.$toast.error(err.message)
+        this.isOpen = false
+      }
+    },
+  },
+}
+</script>

webapp/components/Modal.vue

@@ -30,6 +30,13 @@
       :modalData="data.modalData"
       @close="close"
     />
+    <delete-modal
+      v-if="open === 'delete'"
+      :id="data.resource.id"
+      :type="data.type"
+      :name="name"
+      @close="close"
+    />
   </div>
 </template>
 
@@ -38,6 +45,7 @@ import ConfirmModal from '~/components/Modal/ConfirmModal'
 import DisableModal from '~/components/Modal/DisableModal'
 import ReleaseModal from '~/components/ReleaseModal/ReleaseModal.vue'
 import ReportModal from '~/components/Modal/ReportModal'
+import DeleteModal from '~/components/DeleteUserModal/DeleteUserModal.vue'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -47,6 +55,7 @@ export default {
     ReleaseModal,
     ReportModal,
     ConfirmModal,
+    DeleteModal,
   },
   computed: {
     ...mapGetters({

webapp/pages/admin/users.vue

@@ -48,6 +48,11 @@
         <template slot="createdAt" slot-scope="scope">
           {{ scope.row.createdAt | dateTime }}
         </template>
+        <template slot="delete" slot-scope="scope">
+          <div @click="deleteUser(scope.row.id)">
+            <ds-icon name="trash"></ds-icon>
+          </div>
+        </template>
       </ds-table>
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </base-card>
@@ -111,6 +116,10 @@ export default {
           label: this.$t('admin.users.table.columns.role'),
           align: 'right',
         },
+        delete: {
+          label: '-',
+          align: 'right',
+        },
       }
     },
   },
@@ -155,6 +164,16 @@ export default {
     },
   },
   methods: {
+    openModal() {
+      this.$store.commit('modal/SET_OPEN', {
+        name: 'delete',
+        data: {
+          type: 'sss',
+          resource: 'dfdd',
+          modalData: {},
+        },
+      })
+    },
     back() {
       this.offset = Math.max(this.offset - this.pageSize, 0)
     },
@@ -174,6 +193,9 @@ export default {
         }
       }
     },
+    deleteUser(dd) {
+      this.openModal()
+    },
   },
 }
 </script>