Order categories by translated label

Closes #1082

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Event/EditView.vue

@@ -33,7 +33,7 @@
 
       <div class="flex flex-wrap gap-4">
         <o-field
-          v-if="eventCategories"
+          v-if="orderedCategories"
           :label="t('Category')"
           label-for="categoryField"
           class="w-full md:max-w-fit"
@@ -45,7 +45,7 @@
             expanded
           >
             <option
-              v-for="category in eventCategories"
+              v-for="category in orderedCategories"
               :value="category.id"
               :key="category.id"
             >
@@ -595,6 +595,7 @@ import { Notifier } from "@/plugins/notifier";
 import { useHead } from "@vueuse/head";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import type { Locale } from "date-fns";
+import sortBy from "lodash/sortBy";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -1331,6 +1332,11 @@ watch(group, () => {
     event.value.visibility = EventVisibility.PUBLIC;
   }
 });
+
+const orderedCategories = computed(() => {
+  if (!eventCategories.value) return undefined;
+  return sortBy(eventCategories.value, ["label"]);
+});
 </script>
 
 <style lang="scss">

js/src/views/SearchView.vue

@@ -193,7 +193,7 @@
           <template #options>
             <fieldset class="flex flex-col">
               <legend class="sr-only">{{ t("Categories") }}</legend>
-              <div v-for="category in eventCategories" :key="category.id">
+              <div v-for="category in orderedCategories" :key="category.id">
                 <input
                   :id="category.id"
                   v-model="categoryOneOf"
@@ -692,6 +692,7 @@ import { IAddress } from "@/types/address.model";
 import { IConfig } from "@/types/config.model";
 import { TypeNamed } from "@/types/apollo";
 import { LatLngBounds } from "leaflet";
+import lodashSortBy from "lodash/sortBy";
 
 const EventMarkerMap = defineAsyncComponent(
   () => import("@/components/Search/EventMarkerMap.vue")
@@ -825,6 +826,11 @@ const props = defineProps<{
 const { features } = useFeatures();
 const { eventCategories } = useEventCategories();
 
+const orderedCategories = computed(() => {
+  if (!eventCategories.value) return [];
+  return lodashSortBy(eventCategories.value, ["label"]);
+});
+
 const searchEvents = computed(() => searchElementsResult.value?.searchEvents);
 const searchGroups = computed(() => searchElementsResult.value?.searchGroups);