sort categories on group profile

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)
       },
     },
   },

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',
     },

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

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',

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}`)"