From 09fce90c6a6560ac217a1a61a87024561015b000 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 28 Oct 2022 10:39:42 +0200
Subject: [PATCH] Order categories by translated label
Closes #1082
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/views/Event/EditView.vue | 10 ++++++++--
js/src/views/SearchView.vue | 8 +++++++-
2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 6602ed90b..2917e9532 100644
--- a/js/src/views/Event/EditView.vue
+++ b/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">
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue
index e76f01411..52808e904 100644
--- a/js/src/views/SearchView.vue
+++ b/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);