diff --git a/src/app/features/calendar/calendar.component.html b/src/app/features/calendar/calendar.component.html index c1318cca..ca751484 100644 --- a/src/app/features/calendar/calendar.component.html +++ b/src/app/features/calendar/calendar.component.html @@ -6,9 +6,9 @@ @@ -19,9 +19,9 @@ @@ -47,12 +47,13 @@
- {{ 'Select a Month' | translate }} + {{ translations.calendar.controls.date_picker.month.title | translate }} @@ -65,12 +66,13 @@ - {{ 'Select a Year' | translate }} + {{ translations.calendar.controls.date_picker.year.title | translate }} @@ -162,6 +164,8 @@ - Cancel + + {{ translations.calendar.controls.cancel | translate }} +
diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.html b/src/app/features/calendar/components/calendar-events/calendar-events.component.html index 8f2c127c..ffb6f47c 100644 --- a/src/app/features/calendar/components/calendar-events/calendar-events.component.html +++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.html @@ -1,9 +1,15 @@ - {{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }} + {{ isToday(calendarDate.date) ? (translations.calendar.events.title.today | translate) : (translations.calendar.events.title.not_today | translate) + (calendarDate.date | localizedDate) }} - + @@ -57,7 +63,13 @@
- + @@ -66,8 +78,8 @@ theme="black" class="delete-btn" matButtonType="mat-icon-button" - [tooltip]="'Delete Event' | translate" - [ariaLabel]="'Delete Event' | translate" + [tooltip]="translations.calendar.events.actions.delete.title | translate" + [ariaLabel]="translations.calendar.events.actions.delete.aria | translate" (click)="deleteEvent(event)" > @@ -75,7 +87,9 @@
} @empty { -
There are no events.
+
+ {{ translations.calendar.events.none | translate }} +
}
diff --git a/src/app/features/calendar/components/calendar-events/calendar-events.component.ts b/src/app/features/calendar/components/calendar-events/calendar-events.component.ts index c778b2af..e178a5f2 100644 --- a/src/app/features/calendar/components/calendar-events/calendar-events.component.ts +++ b/src/app/features/calendar/components/calendar-events/calendar-events.component.ts @@ -2,6 +2,9 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, Iterab import { ICalendarDate } from '../../interfaces/calendar-date.interface'; import { Event } from 'src/app/features/events/models/event'; import { isToday } from 'date-fns'; +import { Translations } from 'src/app/core/services/translations.service'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-calendar-events', @@ -21,6 +24,7 @@ export class CalendarEventsComponent implements DoCheck { private iterableDifferEvents: IterableDiffer; constructor( + public translations: Translations, private iterableDiffers: IterableDiffers, private changeDetectorRef: ChangeDetectorRef ) { diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.html b/src/app/features/calendar/components/calendar-search/calendar-search.component.html index 0c74c9d6..31f5c25b 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.html +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.html @@ -5,12 +5,17 @@ [name]="'calendarSearch'" formControlName="calendarSearch" [control]="form.controls['calendarSearch'] | formControl" - [label]="''" - [placeholder]="'Search My Calendar'" + [label]="translations.calendar.search.search_input.label | translate" + [placeholder]="translations.calendar.search.search_input.placeholder | translate" [required]="false" > - Show All + + {{ translations.calendar.search.show_all.title | translate }} + @for (event of pagedEvents; track $index) { @@ -40,12 +45,12 @@ } @empty {
@if (search !== '') { - There are {{ showAll ? 'no events' : 'no events in ' + (this.date | localizedDate: 'MMMM YYYY' | titlecase) }} that match your search. + {{ translations.calendar.search.results.none | translate }} } @else { - Begin typing to search for events. + {{ translations.calendar.search.results.placeholder | translate }} }
}
- + diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.scss b/src/app/features/calendar/components/calendar-search/calendar-search.component.scss index 8f184a4e..fa93346e 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.scss +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.scss @@ -21,6 +21,9 @@ .mat-mdc-form-field-subscript-wrapper { display: none; } + mat-label { + display: none; + } } } diff --git a/src/app/features/calendar/components/calendar-search/calendar-search.component.ts b/src/app/features/calendar/components/calendar-search/calendar-search.component.ts index 81c2791a..b0237266 100644 --- a/src/app/features/calendar/components/calendar-search/calendar-search.component.ts +++ b/src/app/features/calendar/components/calendar-search/calendar-search.component.ts @@ -70,6 +70,7 @@ export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck { this.translatePaginator(); }); + this.translatePaginator(); this.onEventsChange(); } @@ -109,6 +110,7 @@ export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck { const startIndex = pageEvent.pageIndex * pageEvent.pageSize; const endIndex = startIndex + pageEvent.pageSize; this.pagedEvents = this.filteredEvents.slice(startIndex, endIndex); + this.accordion.closeAll(); } // TODO: If show all off, only search for the selected month's events diff --git a/src/assets/i18n/translations.en.ts b/src/assets/i18n/translations.en.ts index fb849fc4..243919d4 100644 --- a/src/assets/i18n/translations.en.ts +++ b/src/assets/i18n/translations.en.ts @@ -389,31 +389,51 @@ export default { "sun": "Sun" } }, - "views": { - "day": "Day", - "week": "Week", - "month": "Month" - }, "controls": { + "add_event": { + "title": "Add Event", + "aria_on": "Click to open the event form to add an event.", + "aria_off": "Click to close the event form." + }, + "search": { + "title": "Search", + "close": "Close Search", + "aria_open": "Click to open the search pane.", + "aria_close": "Click to close the search pane." + }, "next": { - "title_day": "Next day", - "title_week": "Next week", "title_month": "Next month", - "aria_day": "Click to navigate to the next day.", - "aria_week": "Click to navigate to the next week.", "aria_month": "Click to navigate to the next month." }, "previous": { - "title_day": "Previous day", - "title_week": "Previous week", "title_month": "Previous month", - "aria_day": "Click to navigate to the previous day.", - "aria_week": "Click to navigate to the previous week.", "aria_month": "Click to navigate to the previous month." }, - "viewBtn": { - "title": "Switch View", - "aria": "Current view: " + "date_picker": { + "month": { + "title": "Select a month", + "aria": "Open the month select drop down menu" + }, + "year": { + "title": "Select a year", + "aria": "Open the year select drop down menu" + } + }, + "cancel": "Cancel" + }, + "search": { + "search_input": { + "label": "Search Events", + "placeholder": "Search My Calendar" + }, + "show_all": { + "title": "Show All", + "aria_on": "Toggle to close show all events", + "aria_off": "Toggle to show all events" + }, + "results": { + "none": "There are no events that match your search.", + "placeholder": "Begin typing to search for events." } }, "paginator": { @@ -422,7 +442,25 @@ export default { "prev_page": "Previous page", "first_page": "First page", "last_page": "Last page", - "range_label": "{{ start }} - {{ end }} of {{ total }}" + "range_label": "{{ start }} - {{ end }} of {{ total }}", + "aria": "Select a page" + }, + "events": { + "title": { + "today": "Today's Events", + "not_today": "Events on " + }, + "actions": { + "edit": { + "title": "Edit Event", + "aria": "Click to edit the event." + }, + "delete": { + "title": "Delete Event", + "aria": "Click to delete the event." + } + }, + "none": "There are no events." } }, "duration": { diff --git a/src/assets/i18n/translations.fr.ts b/src/assets/i18n/translations.fr.ts index 2296ef1c..bfdbf441 100644 --- a/src/assets/i18n/translations.fr.ts +++ b/src/assets/i18n/translations.fr.ts @@ -390,31 +390,51 @@ const fr: typeof import('./translations.en').default = { "sun": "Dim" } }, - "views": { - "day": "Jour", - "week": "Semaine", - "month": "Mois" - }, "controls": { + "add_event": { + "title": "Ajouter un évènement", + "aria_on": "Cliquez pour ouvrir le formulaire d'événement pour ajouter un événement.", + "aria_off": "Cliquez pour fermer le formulaire d'événement." + }, + "search": { + "title": "Recherche", + "close": "Fermer la recherche", + "aria_open": "Cliquez pour ouvrir le volet de recherche.", + "aria_close": "Cliquez pour fermer le volet de recherche." + }, "next": { - "title_day": "Suivant jour", - "title_week": "Suivant semaine", "title_month": "Suivant mois", - "aria_day": "Cliquez pour accéder au suivant jour.", - "aria_week": "Cliquez pour accéder au suivant semaine.", "aria_month": "Cliquez pour accéder au suivant mois." }, "previous": { - "title_day": "Précédent jour", - "title_week": "Précédent semaine", "title_month": "Précédent mois", - "aria_day": "Cliquez pour accéder au précédent jour.", - "aria_week": "Cliquez pour accéder au précédent semaine.", "aria_month": "Cliquez pour accéder au précédent mois." }, - "viewBtn": { - "title": "Changer de vue", - "aria": "Vue actuelle: " + "date_picker": { + "month": { + "title": "Sélectionnez un mois", + "aria": "Ouvrez le menu déroulant de sélection du mois" + }, + "year": { + "title": "Sélectionnez une année", + "aria": "Ouvrez le menu déroulant de sélection de l'année" + } + }, + "cancel": "Annuler" + }, + "search": { + "search_input": { + "label": "Rechercher des événements", + "placeholder": "Rechercher dans mon calendrier" + }, + "show_all": { + "title": "Afficher tout", + "aria_on": "Basculer pour fermer afficher tous les événements", + "aria_off": "Basculer pour afficher tous les événements" + }, + "results": { + "none": "Aucun événement ne correspond à votre recherche.", + "placeholder": "Commencez à taper pour rechercher des événements." } }, "paginator": { @@ -423,7 +443,25 @@ const fr: typeof import('./translations.en').default = { "prev_page": "Page précédente", "first_page": "Première page", "last_page": "Dernière page", - "range_label": "{{ start }} - {{ end }} à {{ total }}" + "range_label": "{{ start }} - {{ end }} à {{ total }}", + "aria": "Sélectionner une page" + }, + "events": { + "title": { + "today": "Les événements d'aujourd'hui", + "not_today": "Événements sur " + }, + "actions": { + "edit": { + "title": "Modifier l'événement", + "aria": "Cliquez pour modifier l'événement." + }, + "delete": { + "title": "Supprimer l'événement", + "aria": "Cliquez pour supprimer l'événement." + } + }, + "none": "Il n'y a aucun événement." } }, "duration": {