Implement 'decide' button and functionality

backend/src/schema/resolvers/moderation.js

@@ -31,7 +31,10 @@ export default {
 
       const session = driver.session()
       try {
-        const queryOpenDecisionWriteTxResultPromise = queryOpenDecisionWriteTransaction(session, resourceId)
+        const queryOpenDecisionWriteTxResultPromise = queryOpenDecisionWriteTransaction(
+          session,
+          resourceId,
+        )
         const [openDecisionTxResult] = await queryOpenDecisionWriteTxResultPromise
 
         let cypherHeader = ''
@@ -50,7 +53,8 @@ export default {
               CREATE (resource)<-[decision:DECIDED]-(moderator)
               SET decision.latest = true
               `
-        } else { // an open decision, then change it
+        } else {
+          // an open decision, then change it
           if (disable === undefined) disable = openDecisionTxResult.decision.properties.disable // default set to existing
           if (closed === undefined) closed = openDecisionTxResult.decision.properties.closed // default set to existing
           // current moderator is not the same as old
@@ -100,8 +104,7 @@ export default {
         // console.log('disable: ', disable)
 
         const mutateDecisionWriteTxResultPromise = session.writeTransaction(async txc => {
-          const mutateDecisionTransactionResponse = await txc.run(
-            cypher, {
+          const mutateDecisionTransactionResponse = await txc.run(cypher, {
             resourceId,
             moderatorId: moderator.id,
             disable,

webapp/graphql/Moderation.js

@@ -110,3 +110,13 @@ export const reportMutation = () => {
     }
   `
 }
+
+export const decideMutation = () => {
+  return gql`
+    mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+      decide(resourceId: $resourceId, disable: $disable, closed: $closed) {
+        disable
+      }
+    }
+  `
+}

webapp/locales/de.json

@@ -454,9 +454,11 @@
       "typeRowHeadline": "Typ",
       "contentRowHeadline": "Inhalt",
       "authorRowHeadline": "Autor",
-      "decisionRowHeadline": "Decision",
+      "decisionRowHeadline": "Entscheidung",
       "decided": "Entschieden",
       "noDecision": "Keine Entscheidung!",
+      "decideButton": "Entscheide",
+      "DecisionSuccess": "Erfolgreich entschieden!",
       "enabledBy": "Aktiviert von",
       "disabledBy": "Deaktiviert von",
       "reasonCategory": "Kategorie",

webapp/locales/en.json

@@ -458,6 +458,8 @@
       "decisionRowHeadline": "Decision",
       "decided": "Decided",
       "noDecision": "No decision!",
+      "decideButton": "Decide",
+      "DecisionSuccess": "Decided successfully!",
       "enabledBy": "Enabled by",
       "disabledBy": "Disabled by",
       "reasonCategory": "Category",

webapp/pages/moderation/index.vue

@@ -8,7 +8,7 @@
       cellpadding="0"
     >
       <colgroup><col width="" /></colgroup>
-      <template v-for="content in reportedContentStructure">
+      <template v-for="(content, index) in reportedContentStructure">
         <thead
           :class="[
             content.closed ? 'decision' : 'no-decision',
@@ -77,28 +77,30 @@
                 <hc-user :user="content.user" :showAvatar="false" :trunc="30" />
               </div>
             </td>
+            <!-- contentBelongsToUser -->
             <td class="ds-table-col ds-table-head-col-border">
-              <ds-flex v-if="content.contentBelongsToUser">
-                <ds-flex-item width="20px">
-                  <ds-icon
-                    v-tooltip="{ content: $t('report.author'), placement: 'right' }"
-                    name="user"
-                  />
-                </ds-flex-item>
-                <ds-flex-item>
-                  <hc-user :user="content.contentBelongsToUser" :showAvatar="false" :trunc="30" />
-                </ds-flex-item>
-              </ds-flex>
+              <hc-user
+                v-if="content.contentBelongsToUser"
+                :user="content.contentBelongsToUser"
+                :showAvatar="false"
+                :trunc="30"
+              />
               <span v-else>—</span>
             </td>
             <td class="ds-table-col ds-table-head-col-border">
               <!-- closed -->
-              <b v-if="content.closed" class="decision">
+              <b v-if="content.closed">
                 {{ $t('moderation.reports.decided') }}
               </b>
-              <b v-else class="no-decision">
-                {{ $t('moderation.reports.noDecision') }}
-              </b>
+              <ds-button
+                v-else
+                danger
+                class="confirm"
+                icon="exclamation-circle"
+                @click="confirm(content.resource.id, index)"
+              >
+                {{ $t('moderation.reports.decideButton') }}
+              </ds-button>
               <!-- decidedByModerator -->
               <div v-if="content.resource.decidedByModerator">
                 <br />
@@ -153,7 +155,7 @@
 <script>
 import HcEmpty from '~/components/Empty.vue'
 import HcUser from '~/components/User/User'
-import { reportListQuery } from '~/graphql/Moderation.js'
+import { reportListQuery, decideMutation } from '~/graphql/Moderation.js'
 
 export default {
   components: {
@@ -231,9 +233,29 @@ export default {
       },
     },
   },
+  methods: {
+    async confirm(resourceId, index) {
+      this.$apollo
+        .mutate({
+          mutation: decideMutation(),
+          variables: { resourceId, closed: true },
+        })
+        .then(() => {
+          this.$toast.success(this.$t('moderation.reports.DecisionSuccess'))
+          this.$apollo.queries.reports.refetch()
+        })
+        .catch(error => this.$toast.error(error.message))
+    },
+  },
   apollo: {
     reports: {
       query: reportListQuery(),
+      variables() {
+        return {}
+      },
+      // Wolle update({ Post }) {
+      //   this.setCurrentPosts(Post)
+      // },
       fetchPolicy: 'cache-and-network',
     },
   },
@@ -249,6 +271,6 @@ export default {
   color: $color-secondary;
 }
 .no-decision {
-  color: $text-color-danger;
+  color: $color-warning;
 }
 </style>