Dispatch request for report

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
         }
       })

components/PostCard.vue

@@ -53,6 +53,7 @@
         <no-ssr>
           <content-menu
             context="contribution"
+            :item-id="post.id"
             :name="post.title"
           />
         </no-ssr>

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
+        })
     }
   }
 }

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>

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>