From 8df7d5d265b0c5ba16f167a213631d765d2f985e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 25 Apr 2023 13:27:25 +0200
Subject: [PATCH] get it working

---
 .../CategoriesSelect/CategoriesSelect.vue     | 153 +++----
 .../ContributionForm/ContributionForm.vue     | 376 +++++++++---------
 2 files changed, 265 insertions(+), 264 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 5d6963d36..91fb7704c 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,82 +20,83 @@
 </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,
-     }
-   },
-   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)
-       },
-     },
-   },
- }
+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() {
+      if (!this.selectedCategoryIds.length && this.existingCategoryIds.length) {
+        this.selectedCategoryIds = this.existingCategoryIds
+        this.$forceUpdate()
+      }
+    },
+  },
+  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 2933ca018..a031baa28 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -94,197 +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
-     },
-     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']
+    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) : [], // : this.groupCategories.map((cat) => cat.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 //  && group.categories.map((cat) => cat.id )
+    },
+  },
+  watch: {
+    groupCategories() {
+      if (!this.formData.categoryIds.length && this.groupCategories)
+        this.formData.categoryIds = this.groupCategories.map((cat) => cat.id)
+    },
+  },
+  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">