From 07576d084ca52f5db0b5dd4f4a37536ddc5ff576 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 26 Jun 2019 15:59:57 -0300
Subject: [PATCH] Get categories working with CreatePost

---
 .../src/middleware/permissionsMiddleware.js   |  2 +-
 backend/src/schema/resolvers/posts.js         |  1 -
 .../CategoriesSelect/CategoriesSelect.vue     | 90 +++++++++++++++++++
 webapp/components/ContributionForm/index.vue  | 16 +++-
 webapp/graphql/PostMutations.js               |  7 +-
 webapp/locales/en.json                        |  5 +-
 6 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 webapp/components/CategoriesSelect/CategoriesSelect.vue

diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js
index dbcde849c..66c61c12e 100644
--- a/backend/src/middleware/permissionsMiddleware.js
+++ b/backend/src/middleware/permissionsMiddleware.js
@@ -105,7 +105,7 @@ const permissions = shield(
     Query: {
       '*': deny,
       findPosts: allow,
-      Category: isAdmin,
+      Category: allow,
       Tag: isAdmin,
       Report: isModerator,
       Notification: isAdmin,
diff --git a/backend/src/schema/resolvers/posts.js b/backend/src/schema/resolvers/posts.js
index 7769fad14..d585bcfc0 100644
--- a/backend/src/schema/resolvers/posts.js
+++ b/backend/src/schema/resolvers/posts.js
@@ -62,7 +62,6 @@ export default {
         }
       }
       session.close()
-
       return post
     },
   },
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
new file mode 100644
index 000000000..1212aff4d
--- /dev/null
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
+      <div v-for="category in categories" :key="category.id">
+        <ds-flex-item>
+          <ds-button
+            size="small"
+            @click.prevent="toggleCategory(category.id)"
+            :primary="isActive(category.id)"
+            :disabled="isDisabled(category.id)"
+          >
+            <ds-icon :name="category.icon" />
+            {{ category.name }}
+          </ds-button>
+        </ds-flex-item>
+      </div>
+    </ds-flex>
+    <p class="small-info">
+      {{
+        $t('contribution.categories.infoSelectedNoOfMaxCategories', {
+          chosen: selectedCount,
+          max: selectedMax,
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  data() {
+    return {
+      categories: null,
+      selectedMax: 3,
+      selectedCategoryIds: [],
+    }
+  },
+  computed: {
+    selectedCount() {
+      return this.selectedCategoryIds.length
+    },
+    reachedMaximum() {
+      return this.selectedCount >= this.selectedMax
+    },
+  },
+  watch: {
+    selectedCategoryIds(categoryIds) {
+      this.$emit('updateCategories', categoryIds)
+    },
+  },
+  methods: {
+    toggleCategory(id) {
+      const index = this.selectedCategoryIds.indexOf(id)
+      if (index > -1) {
+        this.selectedCategoryIds.splice(index)
+      } else {
+        this.selectedCategoryIds.push(id)
+      }
+    },
+    isActive(id) {
+      const activeCategory = this.selectedCategoryIds.find(categoryId => categoryId === id)
+      if (activeCategory) {
+        return true
+      }
+      return false
+    },
+    isDisabled(id) {
+      return !!(this.reachedMaximum && !this.isActive(id))
+    },
+  },
+  apollo: {
+    Category: {
+      query() {
+        return gql(`{
+          Category {
+            id
+            name
+            icon
+          }
+        }`)
+      },
+      result(result) {
+        this.categories = result.data.Category
+      },
+    },
+  },
+}
+</script>
diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index c925a6dca..670960df5 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -7,6 +7,7 @@
           <hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
         </no-ssr>
         <ds-space margin-bottom="xxx-large" />
+        <hc-categories-select model="categories" @updateCategories="updateCategories" />
         <ds-flex class="contribution-form-footer">
           <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
           <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
@@ -50,10 +51,12 @@ import HcEditor from '~/components/Editor'
 import orderBy from 'lodash/orderBy'
 import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
+import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
   components: {
     HcEditor,
+    HcCategoriesSelect,
   },
   props: {
     contribution: { type: Object, default: () => {} },
@@ -65,6 +68,7 @@ export default {
         content: '',
         language: null,
         languageOptions: [],
+        categories: null,
       },
       formSchema: {
         title: { required: true, min: 3, max: 64 },
@@ -106,22 +110,23 @@ export default {
   },
   methods: {
     submit() {
+      const { title, content, language, categories } = this.form
       this.loading = true
       this.$apollo
         .mutate({
           mutation: this.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
           variables: {
             id: this.id,
-            title: this.form.title,
-            content: this.form.content,
-            language: this.form.language ? this.form.language.value : this.$i18n.locale(),
+            title,
+            content,
+            language: language ? language.value : this.$i18n.locale(),
+            categories,
           },
         })
         .then(res => {
           this.loading = false
           this.$toast.success(this.$t('contribution.success'))
           this.disabled = true
-
           const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
 
           this.$router.push({
@@ -144,6 +149,9 @@ export default {
         this.form.languageOptions.push({ label: locale.name, value: locale.code })
       })
     },
+    updateCategories(ids) {
+      this.form.categories = ids
+    },
   },
   apollo: {
     User: {
diff --git a/webapp/graphql/PostMutations.js b/webapp/graphql/PostMutations.js
index ad629bee7..4f195eb99 100644
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@@ -3,14 +3,17 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation($title: String!, $content: String!, $language: String) {
-        CreatePost(title: $title, content: $content, language: $language) {
+      mutation($title: String!, $content: String!, $language: String, $categories: [ID]) {
+        CreatePost(title: $title, content: $content, language: $language, categories: $categories) {
           id
           title
           slug
           content
           contentExcerpt
           language
+          categories {
+            name
+          }
         }
       }
     `,
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 2442dc202..8f09c5fe1 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -331,6 +331,9 @@
     "filterFollow": "Filter contributions from users I follow",
     "filterALL": "View all contributions",
     "success": "Saved!",
-    "languageSelectLabel": "Language"
+    "languageSelectLabel": "Language",
+    "categories": {
+      "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
+    }
   }
 }