From 3244f3f86d1e8c09e0fd49f43c49f0a3aa8b85ab Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 25 Apr 2023 12:35:46 +0200
Subject: [PATCH] feat(webapp): group categories on posts

---
 .../CategoriesSelect/CategoriesSelect.vue     | 145 +++----
 .../ContributionForm/ContributionForm.vue     | 367 +++++++++---------
 2 files changed, 264 insertions(+), 248 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 4f7a555a3..5d6963d36 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -10,9 +10,9 @@
       :icon="category.icon"
       size="small"
       v-tooltip="{
-        content: $t(`contribution.category.description.${category.slug}`),
-        placement: 'bottom-start',
-      }"
+             content: $t(`contribution.category.description.${category.slug}`),
+             placement: 'bottom-start',
+             }"
     >
       {{ $t(`contribution.category.name.${category.slug}`) }}
     </base-button>
@@ -20,75 +20,82 @@
 </template>
 
 <script>
-import CategoryQuery from '~/graphql/CategoryQuery'
-import { CATEGORIES_MAX } from '~/constants/categories.js'
-import xor from 'lodash/xor'
-import SortCategories from '~/mixins/sortCategoriesMixin.js'
+ import CategoryQuery from '~/graphql/CategoryQuery'
+ import { CATEGORIES_MAX } from '~/constants/categories.js'
+ import xor from 'lodash/xor'
+ import SortCategories from '~/mixins/sortCategoriesMixin.js'
 
-export default {
-  inject: {
-    $parentForm: {
-      default: null,
-    },
-  },
-  mixins: [SortCategories],
-  props: {
-    existingCategoryIds: { type: Array, default: () => [] },
-    model: { type: String, required: true },
-  },
-  data() {
-    return {
-      categories: null,
-      selectedMax: CATEGORIES_MAX,
-      selectedCategoryIds: this.existingCategoryIds,
-    }
-  },
-  computed: {
-    selectedCount() {
-      return this.selectedCategoryIds.length
-    },
-    reachedMaximum() {
-      return this.selectedCount >= this.selectedMax
-    },
-  },
-  methods: {
-    toggleCategory(id) {
-      this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
-      if (this.$parentForm) {
-        this.$parentForm.update(this.model, this.selectedCategoryIds)
-      }
-    },
-    isActive(id) {
-      return this.selectedCategoryIds.includes(id)
-    },
-    isDisabled(id) {
-      return !!(this.reachedMaximum && !this.isActive(id))
-    },
-    categoryButtonsId(categoryId) {
-      return `category-buttons-${categoryId}`
-    },
-  },
-  apollo: {
-    Category: {
-      query() {
-        return CategoryQuery()
-      },
-      result({ data: { Category } }) {
-        this.categories = this.sortCategories(Category)
-      },
-    },
-  },
-}
+ export default {
+   inject: {
+     $parentForm: {
+       default: null,
+     },
+   },
+   mixins: [SortCategories],
+   props: {
+     existingCategoryIds: { type: Array, default: () => [] },
+     model: { type: String, required: true },
+   },
+   data() {
+     return {
+       categories: null,
+       selectedMax: CATEGORIES_MAX,
+       selectedCategoryIds: this.existingCategoryIds,
+     }
+   },
+   watch: {
+     existingCategoryIds() {
+       console.log('existingCategoryIds', this.selectedCategoryIds)
+       if (!this.selectedCategoryIds.length)
+         this.selectedCategoryIds = this.existingCategoryIds
+     },
+   },
+   computed: {
+     selectedCount() {
+       return this.selectedCategoryIds.length
+     },
+     reachedMaximum() {
+       return this.selectedCount >= this.selectedMax
+     },
+   },
+   methods: {
+     toggleCategory(id) {
+       this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
+       if (this.$parentForm) {
+         this.$parentForm.update(this.model, this.selectedCategoryIds)
+       }
+     },
+     isActive(id) {
+       return this.selectedCategoryIds.includes(id)
+     },
+     isDisabled(id) {
+       return !!(this.reachedMaximum && !this.isActive(id))
+     },
+     categoryButtonsId(categoryId) {
+       return `category-buttons-${categoryId}`
+     },
+   },
+   apollo: {
+     Category: {
+       query() {
+         return CategoryQuery()
+       },
+       result({ data: { Category } }) {
+         this.categories = this.sortCategories(Category)
+       },
+     },
+   },
+ }
 </script>
 
 <style lang="scss">
-.categories-select {
-  display: flex;
-  flex-wrap: wrap;
+ .categories-select {
+   display: flex;
+   flex-wrap: wrap;
 
-  > .base-button {
-    margin-right: $space-xx-small;
-    margin-bottom: $space-xx-small;
-  }
-}
+   > .base-button {
+     margin-right: $space-xx-small;
+     margin-bottom: $space-xx-small;
+   }
+ }
 </style>
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 8863fbc8a..2933ca018 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -94,188 +94,197 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
-import Editor from '~/components/Editor/Editor'
-import PostMutations from '~/graphql/PostMutations.js'
-import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
-import ImageUploader from '~/components/Uploader/ImageUploader'
-import links from '~/constants/links.js'
-import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+ import gql from 'graphql-tag'
+ import { mapGetters } from 'vuex'
+ import Editor from '~/components/Editor/Editor'
+ import PostMutations from '~/graphql/PostMutations.js'
+ import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+ import ImageUploader from '~/components/Uploader/ImageUploader'
+ import links from '~/constants/links.js'
+ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
-export default {
-  components: {
-    Editor,
-    ImageUploader,
-    PageParamsLink,
-    CategoriesSelect,
-  },
-  props: {
-    contribution: {
-      type: Object,
-      default: () => ({}),
-    },
-    group: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  data() {
-    const { title, content, image, categories } = this.contribution
-    const {
-      sensitive: imageBlurred = false,
-      aspectRatio: imageAspectRatio = null,
-      type: imageType = null,
-    } = image || {}
+ export default {
+   components: {
+     Editor,
+     ImageUploader,
+     PageParamsLink,
+     CategoriesSelect,
+   },
+   props: {
+     contribution: {
+       type: Object,
+       default: () => ({}),
+     },
+     group: {
+       type: Object,
+       default: () => null,
+     },
+   },
+   data() {
+     const { title, content, image, categories } = this.contribution
+     const {
+       sensitive: imageBlurred = false,
+       aspectRatio: imageAspectRatio = null,
+       type: imageType = null,
+     } = image || {}
 
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      links,
-      formData: {
-        title: title || '',
-        content: content || '',
-        image: image || null,
-        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: this.categoriesActive,
-          validator: (_, value = []) => {
-            if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
-              return [new Error(this.$t('common.validations.categories'))]
-            }
-            return []
-          },
-        },
-      },
-      loading: false,
-      users: [],
-      hashtags: [],
-      imageUpload: null,
-    }
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'auth/user',
-    }),
-    contentLength() {
-      return this.$filters.removeHtml(this.formData.content).length
-    },
-    groupId() {
-      return this.group && this.group.id
-    },
-    showGroupHint() {
-      return this.groupId && ['closed', 'hidden'].includes(this.group.groupType)
-    },
-    groupName() {
-      return this.group && this.group.name
-    },
-  },
-  methods: {
-    submit() {
-      let image = null
-      const { title, content, categoryIds } = this.formData
-      if (this.formData.image) {
-        image = {
-          sensitive: this.formData.imageBlurred,
-        }
-        if (this.imageUpload) {
-          image.upload = this.imageUpload
-          image.aspectRatio = this.formData.imageAspectRatio
-          image.type = this.formData.imageType
-        }
-      }
-      this.loading = true
-      this.$apollo
-        .mutate({
-          mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
-          variables: {
-            title,
-            content,
-            categoryIds,
-            id: this.contribution.id || null,
-            image,
-            groupId: this.groupId,
-          },
-        })
-        .then(({ data }) => {
-          this.loading = false
-          this.$toast.success(this.$t('contribution.success'))
-          const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
+     return {
+       categoriesActive: this.$env.CATEGORIES_ACTIVE,
+       links,
+       formData: {
+         title: title || '',
+         content: content || '',
+         image: image || null,
+         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: this.categoriesActive,
+           validator: (_, value = []) => {
+             if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+               return [new Error(this.$t('common.validations.categories'))]
+             }
+             return []
+           },
+         },
+       },
+       loading: false,
+       users: [],
+       hashtags: [],
+       imageUpload: null,
+     }
+   },
+   computed: {
+     ...mapGetters({
+       currentUser: 'auth/user',
+     }),
+     contentLength() {
+       return this.$filters.removeHtml(this.formData.content).length
+     },
+     groupId() {
+       return this.group && this.group.id
+     },
+     showGroupHint() {
+       return this.groupId && ['closed', 'hidden'].includes(this.group.groupType)
+     },
+     groupName() {
+       return this.group && this.group.name
+     },
+     groupCategories() {
+       return this.group && this.group.categories
+     },
+   },
+   watch: {
+     groupCategories() {
+       console.log('groupCategories', this.groupCategories)
+       if (!this.formData.categoryIds && this.groupCategories) this.formData.categoryIds = this.groupCategories
+     },
+   },
+   methods: {
+     submit() {
+       let image = null
+       const { title, content, categoryIds } = this.formData
+       if (this.formData.image) {
+         image = {
+           sensitive: this.formData.imageBlurred,
+         }
+         if (this.imageUpload) {
+           image.upload = this.imageUpload
+           image.aspectRatio = this.formData.imageAspectRatio
+           image.type = this.formData.imageType
+         }
+       }
+       this.loading = true
+       this.$apollo
+           .mutate({
+             mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
+             variables: {
+               title,
+               content,
+               categoryIds,
+               id: this.contribution.id || null,
+               image,
+               groupId: this.groupId,
+             },
+           })
+           .then(({ data }) => {
+             this.loading = false
+             this.$toast.success(this.$t('contribution.success'))
+             const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
 
-          this.$router.push({
-            name: 'post-id-slug',
-            params: { id: result.id, slug: result.slug },
-          })
-        })
-        .catch((err) => {
-          this.$toast.error(err.message)
-          this.loading = false
-        })
-    },
-    updateEditorContent(value) {
-      this.$refs.contributionForm.update('content', value)
-    },
-    addHeroImage(file) {
-      this.formData.image = null
-      if (file) {
-        const reader = new FileReader()
-        reader.onload = ({ target }) => {
-          this.formData.image = {
-            ...this.formData.image,
-            url: target.result,
-          }
-        }
-        reader.readAsDataURL(file)
-        this.imageUpload = file
-      }
-    },
-    addImageAspectRatio(aspectRatio) {
-      this.formData.imageAspectRatio = aspectRatio
-    },
-    addImageType(imageType) {
-      this.formData.imageType = imageType
-    },
-  },
-  apollo: {
-    User: {
-      query() {
-        return gql`
-          query {
-            User(orderBy: slug_asc) {
-              id
-              slug
-            }
-          }
-        `
-      },
-      result({ data: { User } }) {
-        this.users = User
-      },
-    },
-    Tag: {
-      query() {
-        return gql`
-          query {
-            Tag(orderBy: id_asc) {
-              id
-            }
-          }
-        `
-      },
-      result({ data: { Tag } }) {
-        this.hashtags = Tag
-      },
-    },
-  },
-}
+             this.$router.push({
+               name: 'post-id-slug',
+               params: { id: result.id, slug: result.slug },
+             })
+           })
+           .catch((err) => {
+             this.$toast.error(err.message)
+             this.loading = false
+           })
+     },
+     updateEditorContent(value) {
+       this.$refs.contributionForm.update('content', value)
+     },
+     addHeroImage(file) {
+       this.formData.image = null
+       if (file) {
+         const reader = new FileReader()
+         reader.onload = ({ target }) => {
+           this.formData.image = {
+             ...this.formData.image,
+             url: target.result,
+           }
+         }
+         reader.readAsDataURL(file)
+         this.imageUpload = file
+       }
+     },
+     addImageAspectRatio(aspectRatio) {
+       this.formData.imageAspectRatio = aspectRatio
+     },
+     addImageType(imageType) {
+       this.formData.imageType = imageType
+     },
+   },
+   apollo: {
+     User: {
+       query() {
+         return gql`
+           query {
+             User(orderBy: slug_asc) {
+               id
+               slug
+             }
+           }
+         `
+       },
+       result({ data: { User } }) {
+         this.users = User
+       },
+     },
+     Tag: {
+       query() {
+         return gql`
+           query {
+             Tag(orderBy: id_asc) {
+               id
+             }
+           }
+         `
+       },
+       result({ data: { Tag } }) {
+         this.hashtags = Tag
+       },
+     },
+   },
+ }
 </script>
 
 <style lang="scss">