env vatiable for CATEGORIES_ACTIVE and switch for categories in contribution form

webapp/.env.template

@@ -4,3 +4,4 @@ PUBLIC_REGISTRATION=false
 INVITE_REGISTRATION=true
 WEBSOCKETS_URI=ws://localhost:3000/api/graphql
 GRAPHQL_URI=http://localhost:4000/
+CATEGORIES_ACTIVE=false

webapp/components/ContributionForm/ContributionForm.vue

@@ -51,6 +51,19 @@
           {{ contentLength }}
           <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+        <ds-chip
+          v-if="categoriesActive"
+          size="base"
+          :color="errors && errors.categoryIds && 'danger'"
+        >
+          {{ formData.categoryIds.length }} / 3
+          <base-icon v-if="errors && errors.categoryIds" name="warning" />
+        </ds-chip>
         <div class="buttons">
           <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
             {{ $t('actions.cancel') }}
@@ -69,6 +82,7 @@ import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import PostMutations from '~/graphql/PostMutations.js'
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import ImageUploader from '~/components/ImageUploader/ImageUploader'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
@@ -78,6 +92,7 @@ export default {
     HcEditor,
     ImageUploader,
     PageParamsLink,
+    CategoriesSelect,
   },
   props: {
     contribution: {
@@ -86,7 +101,7 @@ export default {
     },
   },
   data() {
-    const { title, content, image } = this.contribution
+    const { title, content, image, categories } = this.contribution
     const {
       sensitive: imageBlurred = false,
       aspectRatio: imageAspectRatio = null,
@@ -94,6 +109,7 @@ export default {
     } = image || {}
 
     return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
       links,
       formData: {
         title: title || '',
@@ -102,11 +118,22 @@ export default {
         imageAspectRatio,
         imageType,
         imageBlurred,
+        categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
         content: { required: true },
         imageBlurred: { required: false },
+        categoryIds: {
+          type: 'array',
+          required: true,
+          validator: (_, value = []) => {
+            if (value.length === 0 || value.length > 3) {
+              return [new Error(this.$t('common.validations.categories'))]
+            }
+            return []
+          },
+        },
       },
       loading: false,
       users: [],
@@ -125,7 +152,7 @@ export default {
   methods: {
     submit() {
       let image = null
-      const { title, content } = this.formData
+      const { title, content, categoryIds } = this.formData
       if (this.formData.image) {
         image = {
           sensitive: this.formData.imageBlurred,
@@ -143,6 +170,7 @@ export default {
           variables: {
             title,
             content,
+            categoryIds,
             id: this.contribution.id || null,
             image,
           },

webapp/config/index.js

@@ -33,6 +33,7 @@ const options = {
   // Cookies
   COOKIE_EXPIRE_TIME: process.env.COOKIE_EXPIRE_TIME || 730, // Two years by default
   COOKIE_HTTPS_ONLY: process.env.COOKIE_HTTPS_ONLY || process.env.NODE_ENV === 'production', // ensure true in production if not set explicitly
+  CATEGORIES_ACTIVE: process.env.CATEGORIES_ACTIVE === 'true' || false,
 }
 
 const CONFIG = {