Order categories by translated label
Closes #1082 Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
dfd8094017
commit
09fce90c6a
|
@ -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">
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue