From 487fe2aabe763eed2cf3321f966d1bcee93c25c8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:57:31 +0100
Subject: [PATCH] Dispatch request for report

---
 components/ContentMenu.vue |  2 +
 components/PostCard.vue    |  1 +
 components/ReportModal.vue | 76 +++++++++++++++++++++++++++++++++++++-
 pages/post/_slug/index.vue |  1 +
 pages/profile/_slug.vue    |  1 +
 5 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index 4c799fba7..cece9dc95 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -53,6 +53,7 @@ export default {
   },
   props: {
     placement: { type: String, default: 'top-end' },
+    itemId: { type: String, required: true },
     name: { type: String, required: true },
     context: {
       type: String,
@@ -95,6 +96,7 @@ export default {
         name: 'report',
         data: {
           context: this.context,
+          id: this.itemId,
           name: this.name
         }
       })
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 00d2db0ad..6aa26673d 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -53,6 +53,7 @@
         <no-ssr>
           <content-menu
             context="contribution"
+            :item-id="post.id"
             :name="post.title"
           />
         </no-ssr>
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index 8cc70731d..b3fc87853 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -4,14 +4,46 @@
     :is-open="isOpen"
     :confirm-label="$t('report.submit')"
     :cancel-label="$t('report.cancel')"
-    @close="close"
+    confrim-icon="warning"
+    @confirm="report"
+    @cancel="close"
   >
     <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+    <template
+      slot="footer"
+      slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
+    >
+      <ds-button
+        ghost
+        icon="close"
+        :disabled="disabled || loading"
+        @click.prevent="cancel('cancel')"
+      >
+        {{ cancelLabel }}
+      </ds-button>
+      <ds-button
+        danger
+        icon="exclamation-circle"
+        :loading="loading"
+        :disabled="disabled || loading"
+        @click.prevent="confirm('confirm')"
+      >
+        {{ confirmLabel }}
+      </ds-button>
+    </template>
   </ds-modal>
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
+  data() {
+    return {
+      loading: false,
+      disabled: false
+    }
+  },
   computed: {
     data() {
       return this.$store.getters['modal/data'] || {}
@@ -23,9 +55,51 @@ export default {
       return this.$store.getters['modal/open'] === 'report'
     }
   },
+  watch: {
+    isOpen(open) {
+      if (open) {
+        this.disabled = false
+        this.loading = false
+      }
+    }
+  },
   methods: {
     close() {
       this.$store.commit('modal/SET_OPEN', {})
+    },
+    report() {
+      console.log('')
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $type: _ResourceType!, $description: String) {
+              report(
+                resource: { id: $id, type: $type }
+                description: $description
+              ) {
+                id
+              }
+            }
+          `,
+          variables: {
+            id: this.data.id,
+            type: this.data.context,
+            description: '-'
+          }
+        })
+        .then(() => {
+          this.isOpen = false
+          this.$toast.success(err.message)
+          this.disabled = true
+        })
+        .catch(err => {
+          this.$toast.error(err.message)
+          this.disabled = false
+        })
+        .finally(() => {
+          this.loading = false
+        })
     }
   }
 }
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 15d120261..619841310 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -11,6 +11,7 @@
         style="float: right; display: inline-block; margin-top: -5rem;"
         placement="bottom-end"
         context="contribution"
+        :item-id="post.id"
         :name="post.title"
       />
     </no-ssr>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 1a6809f1c..e2eab1e87 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -22,6 +22,7 @@
               style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
               placement="bottom-start"
               context="user"
+              :item-id="user.id"
               :name="user.name"
             />
           </no-ssr>