feat(webapp): 🍰 Sort Categories By Name

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -23,13 +23,15 @@
 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 },
@@ -72,7 +74,7 @@ export default {
         return CategoryQuery()
       },
       result({ data: { Category } }) {
-        this.categories = Category
+        this.categories = this.sortCategories(Category)
       },
     },
   },

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)
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/mixins/sortCategoriesMixin.js

@@ -0,0 +1,25 @@
+export default {
+  methods: {
+    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 (
+            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
+    },
+  },
+}

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 post.categories"
+                v-for="category in sortCategories(post.categories)"
                 :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,