Next step

webapp/components/Modal/ReportModal.vue

@@ -1,5 +1,10 @@
 <template>
-  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
+  <ds-modal
+    :title="title"
+    :is-open="isOpen"
+    :width="{ base: '100%', sm: '200px', md: '200px', lg: '200px' }"
+    @cancel="cancel"
+  >
     <transition name="ds-transition-fade">
       <ds-flex v-if="success" class="hc-modal-success" centered>
         <sweetalert-icon icon="success" />
@@ -8,18 +13,18 @@
 
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="message" />
-    <ds-select
+    <ds-radio
-      model="XXX"
+      :model="form.reasonCategory"
+      :label="$t('report.reason.category.label')"
       :options="form.reasonCategoryOptions"
-      icon="comment"
+      :placeholder="$t('report.reason.category.placeholder')"
-      :label="$t('report.reason.addText.label')"
-      :placeholder="$t('report.reason.addText.placeholder')"
     />
     <ds-input
       id="text"
       :label="$t('report.reason.addText.label')"
       :placeholder="$t('report.reason.addText.placeholder')"
     />
+    <ds-space />
 
     <template slot="footer">
       <ds-button class="cancel" icon="close" @click="cancel">{{ $t('report.cancel') }}</ds-button>
@@ -28,6 +33,7 @@
         danger
         class="confirm"
         icon="exclamation-circle"
+        :disabled="failsValidations"
         :loading="loading"
         @click="confirm"
       >
@@ -56,13 +62,14 @@ export default {
       isOpen: true,
       success: false,
       loading: false,
+      failsValidations: true,
       form: {
         reasonCategory: null,
         reasonCategoryOptions: [
           this.$t('report.reason.category.options.discrimination-etc'),
           this.$t('report.reason.category.options.pornographic-content-links'),
           this.$t('report.reason.category.options.glorific-trivia-of-cruel-inhuman-acts'),
-          this.$t('report.reason.category.options.unauthorized-disclosure-personalinformation'),
+          this.$t('report.reason.category.options.doxing'),
           this.$t('report.reason.category.options.intentional-intimidation-stalking-persecution'),
           this.$t('report.reason.category.options.advert-products-services-commercial'),
           this.$t('report.reason.category.options.criminal-behavior-violation-german-law'),
@@ -71,7 +78,7 @@ export default {
         reasonAddText: '',
       },
       formSchema: {
-        reasonAddText: { required: true, min: 0, max: 150 },
+        reasonAddText: { required: true, min: 0, max: 200 },
       },
     }
   },
@@ -94,11 +101,13 @@ export default {
       }, 1000)
     },
     async confirm() {
+      const { reasonCategory, reasonAddText } = this.form
+
       this.loading = true
-      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 !!!
-        // 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.modalData.buttons.confirm.callback()
+      this.$apollo
-        await this.$apollo.mutate({
+        .mutate({
           mutation: gql`
             mutation($id: ID!) {
               report(id: $id) {
@@ -108,32 +117,34 @@ export default {
           `,
           variables: { id: this.id },
         })
-        this.success = true
+        .then(({ _data }) => {
-        this.$toast.success(this.$t('report.success'))
+          this.success = true
-        setTimeout(() => {
+          this.$toast.success(this.$t('report.success'))
-          this.isOpen = false
           setTimeout(() => {
-            this.success = false
+            this.isOpen = false
-            this.$emit('close')
+            setTimeout(() => {
-          }, 500)
+              this.success = false
-        }, 1500)
+              this.$emit('close')
-      } catch (err) {
+            }, 500)
-        this.$emit('close')
+          }, 1500)
-        this.success = false
+          this.loading = false
-        switch (err.message) {
+        })
-          case 'GraphQL error: User':
+        .catch(err => {
-            this.$toast.error(this.$t('report.user.error'))
+          this.$emit('close')
-            break
+          this.success = false
-          case 'GraphQL error: Post':
+          switch (err.message) {
-            this.$toast.error(this.$t('report.contribution.error'))
+            case 'GraphQL error: User':
-            break
+              this.$toast.error(this.$t('report.user.error'))
-          case 'GraphQL error: Comment':
+              break
-            this.$toast.error(this.$t('report.comment.error'))
+            case 'GraphQL error: Post':
-            break
+              this.$toast.error(this.$t('report.contribution.error'))
-        }
+              break
-      } finally {
+            case 'GraphQL error: Comment':
-        this.loading = false
+              this.$toast.error(this.$t('report.comment.error'))
-      }
+              break
+          }
+          this.loading = false
+        })
     },
   },
 }

webapp/locales/en.json

@@ -2,7 +2,7 @@
   "maintenance": {
     "title": "Human Connection is under maintenance",
     "explanation": "At the moment we are doing some scheduled maintenance, please try again later.",
-    "questions": "Any Questions or concerns, send an email to" 
+    "questions": "Any Questions or concerns, send an email to"
   },
   "index": {
     "no-results": "No contributions found.",
@@ -436,13 +436,13 @@
     },
     "reason": {
       "category": {
-        "label": "Why you like to report this?",
+        "label": "Select a category:",
-        "placeholder": "Additional information …",
+        "placeholder": "Category …",
         "options": {
           "discrimination-etc": "Discriminatory posts, comments, utterances or insults",
           "pornographic-content-links": "Posting or linking of clearly pornographic material",
           "glorific-trivia-of-cruel-inhuman-acts": "Glorification or trivialization of cruel or inhuman acts of violence",
-          "unauthorized-disclosure-personalinformation": "The disclosure of others' personal information without their consent or threat there of (\"doxing\")",
+          "doxing": "The disclosure of others' personal information without their consent or threat there of (\"doxing\")",
           "intentional-intimidation-stalking-persecution": "Intentional intimidation, stalking or persecution",
           "advert-products-services-commercial": "Advertising products and services with commercial intent",
           "criminal-behavior-violation-german-law": "Criminal behavior or violation of German law",
@@ -450,7 +450,7 @@
         }
       },
       "addText": {
-        "label": "Why you like to report this?",
+        "label": "Please explain why you like to report this?",
         "placeholder": "Additional information …"
       }
     }