Order categories by translated label

Closes #1082

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-28 10:39:42 +02:00
parent dfd8094017
commit 09fce90c6a
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 15 additions and 3 deletions

View file

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

View file

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