From d3a1ff92e288eb6d05bf518151ddc0c9fc16a47d Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Fri, 28 Mar 2025 15:23:38 +0100 Subject: [PATCH] Added option menu for calendar --- components/calendar/CalendarMenu.vue | 9 +-- components/calendar/CalendarOptions.vue | 57 +++++++++++++++++++ components/calendar/CalendarSwitch.vue | 34 ----------- .../dropdown-menu/DropdownMenuSubTrigger.vue | 18 ++++-- i18n.config.ts | 16 +++++- stores/CalendarStore.ts | 8 +-- 6 files changed, 94 insertions(+), 48 deletions(-) create mode 100644 components/calendar/CalendarOptions.vue delete mode 100644 components/calendar/CalendarSwitch.vue diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue index 29a8920..3c29a07 100644 --- a/components/calendar/CalendarMenu.vue +++ b/components/calendar/CalendarMenu.vue @@ -2,6 +2,7 @@ import { useCalendar } from "@/stores/CalendarStore" import { PhMagnifyingGlass } from "@phosphor-icons/vue" +import CalendarOptions from "./CalendarOptions.vue" const { revealAdvancedSearch } = useCalendar() const { isReadOnly } = storeToRefs(useCalendar()) @@ -26,13 +27,13 @@ const { isReadOnly } = storeToRefs(useCalendar())
  • - {{ $t('entity.advancedSearch.title') }} + + {{ $t('entity.advancedSearch.title') }} +
  • - - - +
    • diff --git a/components/calendar/CalendarOptions.vue b/components/calendar/CalendarOptions.vue new file mode 100644 index 0000000..aba7ad3 --- /dev/null +++ b/components/calendar/CalendarOptions.vue @@ -0,0 +1,57 @@ + + + diff --git a/components/calendar/CalendarSwitch.vue b/components/calendar/CalendarSwitch.vue deleted file mode 100644 index 4937c81..0000000 --- a/components/calendar/CalendarSwitch.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue index 12cd05b..2c3ac29 100644 --- a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue +++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue @@ -5,10 +5,10 @@ import { type DropdownMenuSubTriggerProps, useForwardProps } from "radix-vue" -import { ChevronRight } from "lucide-vue-next" import { cn } from "@/lib/utils" +import { PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue"; -const props = defineProps() +const props = defineProps() const delegatedProps = computed(() => { const { class: _, ...delegated } = props @@ -29,7 +29,17 @@ const forwardedProps = useForwardProps(delegatedProps) ) " > - - + + diff --git a/i18n.config.ts b/i18n.config.ts index 48bbf02..175d7a1 100644 --- a/i18n.config.ts +++ b/i18n.config.ts @@ -79,7 +79,7 @@ export default defineI18nConfig(() => ({ dark: "Dark", light: "Light", system: "System", - displayMode: "Display mode" + displayMode: "Display" }, common: { title: "Title", @@ -148,6 +148,7 @@ export default defineI18nConfig(() => ({ backToList: "Go back to calendars", isLoading: "Calendar is loading…", hasXEvents: "{count} available events", + seeOptions: "Calendar options", date: { start: "Start date", end: "End date", @@ -242,26 +243,31 @@ export default defineI18nConfig(() => ({ }, millennia: { nameSingular: "Millennia", + displayMode: "Millennial", nextSingular: "Next millennia", prevSingular: "Last millennia", }, centuries: { nameSingular: "Century", + displayMode: "Centuries", nextSingular: "Next century", prevSingular: "Last century", }, decades: { nameSingular: "Decade", + displayMode: "Decadal", nextSingular: "Next decade", prevSingular: "Last decade", }, years: { nameSingular: "Year", + displayMode: "Yearly", nextSingular: "Next year", prevSingular: "Last year", }, months: { nameSingular: "Month", + displayMode: "Monthly", nextSingular: "Next month", prevSingular: "Last month", inputName: "Month's name", @@ -375,7 +381,7 @@ export default defineI18nConfig(() => ({ dark: "Sombre", light: "Clair", system: "Système", - displayMode: "Mode d'affichage", + displayMode: "Affichage", }, common: { title: "Titre", @@ -444,6 +450,7 @@ export default defineI18nConfig(() => ({ backToList: "Retourner aux calendriers", isLoading: "Chargement du calendrier…", hasXEvents: "{count} évènements disponibles", + seeOptions: "Options du calendrier", date: { start: "Date de début", end: "Date de fin", @@ -541,26 +548,31 @@ export default defineI18nConfig(() => ({ }, millennia: { nameSingular: "Millénaire", + displayMode: "Par millénaire", nextSingular: "Millénaire suivant", prevSingular: "Millénaire précédent", }, centuries: { nameSingular: "Siècle", + displayMode: "Par siècle", nextSingular: "Siècle suivant", prevSingular: "Siècle précédent", }, decades: { nameSingular: "Décennie", + displayMode: "Par décennie", nextSingular: "Décennie suivante", prevSingular: "Décennie précédente", }, years: { nameSingular: "Année", + displayMode: "Annuel", nextSingular: "Année suivante", prevSingular: "Année précédente", }, months: { nameSingular: "Mois", + displayMode: "Mensuel", nextSingular: "Mois suivant", prevSingular: "Mois précédent", inputName: "Nom du mois", diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts index b678d44..1eab643 100644 --- a/stores/CalendarStore.ts +++ b/stores/CalendarStore.ts @@ -345,17 +345,17 @@ export const useCalendar = defineStore("calendar", () => { function getViewTypeTitle(viewType: CalendarViewType): string { switch (viewType) { case "year": - return t("entity.calendar.years.nameSingular") + return t("entity.calendar.years.displayMode") case "decade": - return "Décennie" + return t("entity.calendar.decades.displayMode") case "century": - return "Siècle" + return t("entity.calendar.centuries.displayMode") case "month": default: - return t("entity.calendar.months.nameSingular") + return t("entity.calendar.months.displayMode") } }