From 1d5f0f68e3ccf3f1940a1a590bdca1c9e7c7ea62 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 24 Nov 2022 19:12:17 +0100
Subject: [PATCH 1/6] feat(webapp): sort categories by name

---
 .../CategoriesSelect/CategoriesSelect.vue     | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 7fc9bcf1c..153b0369d 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -65,6 +65,26 @@ export default {
     categoryButtonsId(categoryId) {
       return `category-buttons-${categoryId}`
     },
+    sortCategories(categories) {
+      const misc = categories.find((cat) => cat.slug === 'miscellaneous')
+      const sortedCategories = categories
+        .filter((cat) => cat.slug !== 'miscellaneous')
+        .sort((a, b) => {
+          if (
+            this.$t(`contribution.category.name.${a.slug}`) <
+            this.$t(`contribution.category.name.${b.slug}`)
+          )
+            return -1
+          if (
+            this.$t(`contribution.category.name.${a.slug}`) >
+            this.$t(`contribution.category.name.${b.slug}`)
+          )
+            return 1
+          return 0
+        })
+      if (misc) sortedCategories.push(misc)
+      return sortedCategories
+    },
   },
   apollo: {
     Category: {
@@ -72,7 +92,7 @@ export default {
         return CategoryQuery()
       },
       result({ data: { Category } }) {
-        this.categories = Category
+        this.categories = this.sortCategories(Category)
       },
     },
   },

From 269f5bd741ebb2b9b19b6bf09c10a2e50b8ee26e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Nov 2022 12:18:41 +0100
Subject: [PATCH 2/6] Update
 webapp/components/CategoriesSelect/CategoriesSelect.vue

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 webapp/components/CategoriesSelect/CategoriesSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 153b0369d..b6489072f 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -68,7 +68,7 @@ export default {
     sortCategories(categories) {
       const misc = categories.find((cat) => cat.slug === 'miscellaneous')
       const sortedCategories = categories
-        .filter((cat) => cat.slug !== 'miscellaneous')
+        .filter((cat) => cat.slug !== misc.slug)
         .sort((a, b) => {
           if (
             this.$t(`contribution.category.name.${a.slug}`) <

From bd9a7d1e1bbc37826a2269dca89531ffb114e836 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Nov 2022 13:44:07 +0100
Subject: [PATCH 3/6] sort categories as mixin

---
 .../CategoriesSelect/CategoriesSelect.vue     | 24 +++----------------
 webapp/mixins/sortCategoriesMixin.js          | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 webapp/mixins/sortCategoriesMixin.js

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index b6489072f..ce1c6a77d 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -23,6 +23,7 @@
 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: {
@@ -30,6 +31,7 @@ export default {
       default: null,
     },
   },
+  mixins: [SortCategories],
   props: {
     existingCategoryIds: { type: Array, default: () => [] },
     model: { type: String, required: true },
@@ -65,26 +67,6 @@ export default {
     categoryButtonsId(categoryId) {
       return `category-buttons-${categoryId}`
     },
-    sortCategories(categories) {
-      const misc = categories.find((cat) => cat.slug === 'miscellaneous')
-      const sortedCategories = categories
-        .filter((cat) => cat.slug !== misc.slug)
-        .sort((a, b) => {
-          if (
-            this.$t(`contribution.category.name.${a.slug}`) <
-            this.$t(`contribution.category.name.${b.slug}`)
-          )
-            return -1
-          if (
-            this.$t(`contribution.category.name.${a.slug}`) >
-            this.$t(`contribution.category.name.${b.slug}`)
-          )
-            return 1
-          return 0
-        })
-      if (misc) sortedCategories.push(misc)
-      return sortedCategories
-    },
   },
   apollo: {
     Category: {
@@ -92,7 +74,7 @@ export default {
         return CategoryQuery()
       },
       result({ data: { Category } }) {
-        this.categories = this.sortCategories(Category)
+        this.categories = this.sortCategories(Category, this.$t)
       },
     },
   },
diff --git a/webapp/mixins/sortCategoriesMixin.js b/webapp/mixins/sortCategoriesMixin.js
new file mode 100644
index 000000000..f66770488
--- /dev/null
+++ b/webapp/mixins/sortCategoriesMixin.js
@@ -0,0 +1,24 @@
+export default {
+  methods: {
+    sortCategories(categories, locales) {
+      const misc = categories.find((cat) => cat.slug === 'miscellaneous')
+      const sortedCategories = categories
+        .filter((cat) => cat.slug !== misc.slug)
+        .sort((a, b) => {
+          if (
+            locales(`contribution.category.name.${a.slug}`) <
+            locales(`contribution.category.name.${b.slug}`)
+          )
+            return -1
+          if (
+            locales(`contribution.category.name.${a.slug}`) >
+            locales(`contribution.category.name.${b.slug}`)
+          )
+            return 1
+          return 0
+        })
+      if (misc) sortedCategories.push(misc)
+      return sortedCategories
+    },
+  },
+}

From 5c3d9d893db5c5e9494fe52752b7cdbee8cfcb59 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Nov 2022 13:46:40 +0100
Subject: [PATCH 4/6] add sort categories to category filter menu

---
 webapp/components/FilterMenu/CategoriesFilter.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 0d27507f9..0d1c4301a 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -39,12 +39,14 @@ import CategoryQuery from '~/graphql/CategoryQuery.js'
 import SaveCategories from '~/graphql/SaveCategories.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+import SortCategories from '~/mixins/sortCategoriesMixin.js'
 
 export default {
   components: {
     FilterMenuSection,
     LabeledButton,
   },
+  mixins: [SortCategories],
   props: {
     showMobileMenu: { type: Boolean, default: false },
   },
@@ -84,7 +86,7 @@ export default {
       },
       update({ Category }) {
         if (!Category) return []
-        this.categories = Category
+        this.categories = this.sortCategories(Category, this.$t)
       },
       fetchPolicy: 'cache-and-network',
     },

From ab9b14d756b372e36d79638ea672514eceff5f68 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Nov 2022 13:55:01 +0100
Subject: [PATCH 5/6] sort catgeories on post

---
 webapp/mixins/sortCategoriesMixin.js  | 5 +++--
 webapp/pages/post/_id/_slug/index.vue | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webapp/mixins/sortCategoriesMixin.js b/webapp/mixins/sortCategoriesMixin.js
index f66770488..1cc998777 100644
--- a/webapp/mixins/sortCategoriesMixin.js
+++ b/webapp/mixins/sortCategoriesMixin.js
@@ -1,9 +1,10 @@
 export default {
   methods: {
     sortCategories(categories, locales) {
-      const misc = categories.find((cat) => cat.slug === 'miscellaneous')
+      const miscSlug = 'miscellaneous'
+      const misc = categories.find((cat) => cat.slug === miscSlug)
       const sortedCategories = categories
-        .filter((cat) => cat.slug !== misc.slug)
+        .filter((cat) => cat.slug !== miscSlug)
         .sort((a, b) => {
           if (
             locales(`contribution.category.name.${a.slug}`) <
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 2366eb072..50cf0f154 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -61,7 +61,7 @@
               <ds-space margin="xx-large" />
               <ds-space margin="xx-small" />
               <hc-category
-                v-for="category in post.categories"
+                v-for="category in sortCategories(post.categories, $t)"
                 :key="category.id"
                 :icon="category.icon"
                 :name="$t(`contribution.category.name.${category.slug}`)"
@@ -146,6 +146,7 @@ import PostQuery from '~/graphql/PostQuery'
 import { groupQuery } from '~/graphql/groups'
 import PostMutations from '~/graphql/PostMutations'
 import links from '~/constants/links.js'
+import SortCategories from '~/mixins/sortCategoriesMixin.js'
 
 export default {
   name: 'PostSlug',
@@ -164,6 +165,7 @@ export default {
     PageParamsLink,
     UserTeaser,
   },
+  mixins: [SortCategories],
   head() {
     return {
       title: this.title,

From e2ac3ba84689b14fca54697c3f4b33f97554a174 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Nov 2022 14:02:37 +0100
Subject: [PATCH 6/6] sort categories on group profile

---
 .../CategoriesSelect/CategoriesSelect.vue     |  2 +-
 .../FilterMenu/CategoriesFilter.vue           |  2 +-
 webapp/mixins/sortCategoriesMixin.js          | 10 +-
 webapp/pages/group/_id/_slug.vue              | 99 ++++++++++---------
 webapp/pages/post/_id/_slug/index.vue         |  2 +-
 5 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index ce1c6a77d..4f7a555a3 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -74,7 +74,7 @@ export default {
         return CategoryQuery()
       },
       result({ data: { Category } }) {
-        this.categories = this.sortCategories(Category, this.$t)
+        this.categories = this.sortCategories(Category)
       },
     },
   },
diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 0d1c4301a..5db8d1fdd 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -86,7 +86,7 @@ export default {
       },
       update({ Category }) {
         if (!Category) return []
-        this.categories = this.sortCategories(Category, this.$t)
+        this.categories = this.sortCategories(Category)
       },
       fetchPolicy: 'cache-and-network',
     },
diff --git a/webapp/mixins/sortCategoriesMixin.js b/webapp/mixins/sortCategoriesMixin.js
index 1cc998777..2a22a8610 100644
--- a/webapp/mixins/sortCategoriesMixin.js
+++ b/webapp/mixins/sortCategoriesMixin.js
@@ -1,19 +1,19 @@
 export default {
   methods: {
-    sortCategories(categories, locales) {
+    sortCategories(categories) {
       const miscSlug = 'miscellaneous'
       const misc = categories.find((cat) => cat.slug === miscSlug)
       const sortedCategories = categories
         .filter((cat) => cat.slug !== miscSlug)
         .sort((a, b) => {
           if (
-            locales(`contribution.category.name.${a.slug}`) <
-            locales(`contribution.category.name.${b.slug}`)
+            this.$t(`contribution.category.name.${a.slug}`) <
+            this.$t(`contribution.category.name.${b.slug}`)
           )
             return -1
           if (
-            locales(`contribution.category.name.${a.slug}`) >
-            locales(`contribution.category.name.${b.slug}`)
+            this.$t(`contribution.category.name.${a.slug}`) >
+            this.$t(`contribution.category.name.${b.slug}`)
           )
             return 1
           return 0
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index d1b410081..1b6d66033 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -26,10 +26,10 @@
             />
             <!-- TODO: implement later on -->
             <!-- @mute="muteUser"
-              @unmute="unmuteUser"
-              @block="blockUser"
-              @unblock="unblockUser"
-              @delete="deleteUser" -->
+                 @unmute="unmuteUser"
+                 @block="blockUser"
+                 @unblock="unblockUser"
+                 @delete="deleteUser" -->
           </client-only>
           <ds-space margin="small">
             <!-- group name -->
@@ -65,38 +65,38 @@
               </client-only>
             </ds-flex-item>
             <!-- <ds-flex-item>
-              <client-only>
-                <ds-number :label="$t('profile.followers')">
-                  <count-to
-                    slot="count"
-                    :start-val="followedByCountStartValue"
-                    :end-val="user.followedByCount"
-                  />
-                </ds-number>
-              </client-only>
-            </ds-flex-item> -->
+                 <client-only>
+                 <ds-number :label="$t('profile.followers')">
+                 <count-to
+                 slot="count"
+                 :start-val="followedByCountStartValue"
+                 :end-val="user.followedByCount"
+                 />
+                 </ds-number>
+                 </client-only>
+                 </ds-flex-item> -->
             <!-- <ds-flex-item>
-              <client-only>
-                <ds-number :label="$t('profile.following')">
-                  <count-to slot="count" :end-val="user.followingCount" />
-                </ds-number>
-              </client-only>
-            </ds-flex-item> -->
+                 <client-only>
+                 <ds-number :label="$t('profile.following')">
+                 <count-to slot="count" :end-val="user.followingCount" />
+                 </ds-number>
+                 </client-only>
+                 </ds-flex-item> -->
           </ds-flex>
           <div class="action-buttons">
             <!-- <base-button v-if="user.isBlocked" @click="unblockUser(user)">
-              {{ $t('settings.blocked-users.unblock') }}
-            </base-button>
-            <base-button v-if="user.isMuted" @click="unmuteUser(user)">
-              {{ $t('settings.muted-users.unmute') }}
-            </base-button>
-            <follow-button
-              v-if="!user.isMuted && !user.isBlocked"
-              :follow-id="user.id"
-              :is-followed="user.followedByCurrentUser"
-              @optimistic="optimisticFollow"
-              @update="updateFollow"
-            /> -->
+                 {{ $t('settings.blocked-users.unblock') }}
+                 </base-button>
+                 <base-button v-if="user.isMuted" @click="unmuteUser(user)">
+                 {{ $t('settings.muted-users.unmute') }}
+                 </base-button>
+                 <follow-button
+                 v-if="!user.isMuted && !user.isBlocked"
+                 :follow-id="user.id"
+                 :is-followed="user.followedByCurrentUser"
+                 @optimistic="optimisticFollow"
+                 @update="updateFollow"
+                 /> -->
             <!-- Group join / leave -->
             <join-leave-button
               :group="group || {}"
@@ -108,7 +108,7 @@
               @update="updateJoinLeave"
             />
             <!-- implement:
-              v-if="!user.isMuted && !user.isBlocked" -->
+                 v-if="!user.isMuted && !user.isBlocked" -->
           </div>
           <hr />
           <ds-space margin-top="small" margin-bottom="small">
@@ -161,7 +161,9 @@
               <ds-space margin="xx-small" />
               <div class="categories">
                 <div
-                  v-for="(category, index) in group.categories"
+                  v-for="(category, index) in sortCategories(
+                    group && group.categories ? group.categories : [],
+                  )"
                   :key="category.id"
                   align="center"
                 >
@@ -211,19 +213,19 @@
           @fetchAllProfiles="fetchAllMembers"
         />
         <!-- <ds-space />
-        <follow-list
-          :loading="$apollo.loading"
-          :user="user"
-          type="followedBy"
-          @fetchAllConnections="fetchAllConnections"
-        />
-        <ds-space />
-        <follow-list
-          :loading="$apollo.loading"
-          :user="user"
-          type="following"
-          @fetchAllConnections="fetchAllConnections"
-        /> -->
+             <follow-list
+             :loading="$apollo.loading"
+             :user="user"
+             type="followedBy"
+             @fetchAllConnections="fetchAllConnections"
+             />
+             <ds-space />
+             <follow-list
+             :loading="$apollo.loading"
+             :user="user"
+             type="following"
+             @fetchAllConnections="fetchAllConnections"
+             /> -->
         <!-- <social-media :user-name="groupName" :user="user" /> -->
       </ds-flex-item>
 
@@ -326,6 +328,7 @@ import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import ProfileList from '~/components/features/ProfileList/ProfileList'
+import SortCategories from '~/mixins/sortCategoriesMixin.js'
 // import SocialMedia from '~/components/SocialMedia/SocialMedia'
 // import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 
@@ -356,7 +359,7 @@ export default {
     // SocialMedia,
     // TabNavigation,
   },
-  mixins: [postListActions],
+  mixins: [postListActions, SortCategories],
   transition: {
     name: 'slide-up',
     mode: 'out-in',
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 50cf0f154..6e104bc53 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -61,7 +61,7 @@
               <ds-space margin="xx-large" />
               <ds-space margin="xx-small" />
               <hc-category
-                v-for="category in sortCategories(post.categories, $t)"
+                v-for="category in sortCategories(post.categories)"
                 :key="category.id"
                 :icon="category.icon"
                 :name="$t(`contribution.category.name.${category.slug}`)"