From 0ae8246d8a88851cca8f1f70224ee02d24bdd37f Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 5 Dec 2022 16:11:12 +0100 Subject: [PATCH] Simplify calendar "listWeek" and enable for "initial_view" (#9993) fixes undefined --- src/panels/calendar/ha-full-calendar.ts | 89 ++++++++++++------- .../lovelace/cards/hui-calendar-card.ts | 4 +- .../hui-calendar-card-editor.ts | 2 +- src/translations/en.json | 3 +- src/types.ts | 2 +- 5 files changed, 63 insertions(+), 37 deletions(-) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index d55c344a43..569e3d6492 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -29,28 +29,29 @@ import { } from "lit"; import { property, state } from "lit/decorators"; import memoize from "memoize-one"; +import { firstWeekdayIndex } from "../../common/datetime/first_weekday"; import { useAmPm } from "../../common/datetime/use_am_pm"; import { fireEvent } from "../../common/dom/fire_event"; +import { supportsFeature } from "../../common/entity/supports-feature"; +import { LocalizeFunc } from "../../common/translations/localize"; +import { computeRTLDirection } from "../../common/util/compute_rtl"; import "../../components/ha-button-toggle-group"; import "../../components/ha-fab"; -import "../../components/ha-icon-button-prev"; import "../../components/ha-icon-button-next"; +import "../../components/ha-icon-button-prev"; +import type { + Calendar as CalendarData, + CalendarEvent, +} from "../../data/calendar"; +import { CalendarEntityFeature } from "../../data/calendar"; import { haStyle } from "../../resources/styles"; -import { computeRTLDirection } from "../../common/util/compute_rtl"; import type { CalendarViewChanged, FullCalendarView, HomeAssistant, ToggleButton, } from "../../types"; -import { firstWeekdayIndex } from "../../common/datetime/first_weekday"; -import { supportsFeature } from "../../common/entity/supports-feature"; import { showCalendarEventDetailDialog } from "./show-dialog-calendar-event-detail"; -import type { - Calendar as CalendarData, - CalendarEvent, -} from "../../data/calendar"; -import { CalendarEntityFeature } from "../../data/calendar"; import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor"; declare global { @@ -62,15 +63,6 @@ declare global { } } -const getListWeekRange = (currentDate: Date): { start: Date; end: Date } => { - const startDate = new Date(currentDate.valueOf()); - const endDate = new Date(currentDate.valueOf()); - - endDate.setDate(endDate.getDate() + 7); - - return { start: startDate, end: endDate }; -}; - const defaultFullCalendarConfig: CalendarOptions = { headerToolbar: false, plugins: [dayGridPlugin, listPlugin, interactionPlugin], @@ -80,19 +72,13 @@ const defaultFullCalendarConfig: CalendarOptions = { eventDisplay: "list-item", locales: allLocales, views: { - list: { - visibleRange: getListWeekRange, + listWeek: { + type: "list", + duration: { days: 7 }, }, }, }; -const viewButtons: ToggleButton[] = [ - { label: "Month View", value: "dayGridMonth", iconPath: mdiViewModule }, - { label: "Week View", value: "dayGridWeek", iconPath: mdiViewWeek }, - { label: "Day View", value: "dayGridDay", iconPath: mdiViewDay }, - { label: "List View", value: "list", iconPath: mdiViewAgenda }, -]; - export class HAFullCalendar extends LitElement { public hass!: HomeAssistant; @@ -106,12 +92,15 @@ export class HAFullCalendar extends LitElement { "dayGridMonth", "dayGridWeek", "dayGridDay", + "listWeek", ]; @property() public initialView: FullCalendarView = "dayGridMonth"; private calendar?: Calendar; + private _viewButtons?: ToggleButton[]; + @state() private _activeView = this.initialView; public updateSize(): void { @@ -119,7 +108,10 @@ export class HAFullCalendar extends LitElement { } protected render(): TemplateResult { - const viewToggleButtons = this._viewToggleButtons(this.views); + const viewToggleButtons = this._viewToggleButtons( + this.views, + this.hass.localize + ); return html` ${this.calendar @@ -349,11 +341,44 @@ export class HAFullCalendar extends LitElement { }); } - private _viewToggleButtons = memoize((views) => - viewButtons.filter((button) => + private _viewToggleButtons = memoize((views, localize: LocalizeFunc) => { + if (!this._viewButtons) { + this._viewButtons = [ + { + label: localize( + "ui.panel.lovelace.editor.card.calendar.views.dayGridMonth" + ), + value: "dayGridMonth", + iconPath: mdiViewModule, + }, + { + label: localize( + "ui.panel.lovelace.editor.card.calendar.views.dayGridWeek" + ), + value: "dayGridWeek", + iconPath: mdiViewWeek, + }, + { + label: localize( + "ui.panel.lovelace.editor.card.calendar.views.dayGridDay" + ), + value: "dayGridDay", + iconPath: mdiViewDay, + }, + { + label: localize( + "ui.panel.lovelace.editor.card.calendar.views.listWeek" + ), + value: "listWeek", + iconPath: mdiViewAgenda, + }, + ]; + } + + return this._viewButtons.filter((button) => views.includes(button.value as FullCalendarView) - ) - ); + ); + }); static get styles(): CSSResultGroup { return [ diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 313762e918..6b551746c3 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -119,8 +119,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { } const views: FullCalendarView[] = this._veryNarrow - ? ["list"] - : ["list", "dayGridMonth", "dayGridDay"]; + ? ["listWeek"] + : ["dayGridMonth", "dayGridDay", "listWeek"]; return html` diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts index 7f0f6ff8a0..ed25fd5201 100644 --- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts @@ -31,7 +31,7 @@ const cardConfigStruct = assign( }) ); -const views = ["dayGridMonth", "dayGridDay", "list"] as const; +const views = ["dayGridMonth", "dayGridDay", "listWeek"] as const; @customElement("hui-calendar-card-editor") export class HuiCalendarCardEditor diff --git a/src/translations/en.json b/src/translations/en.json index ea1db48ce7..c67b281e9c 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4010,8 +4010,9 @@ "calendar_entities": "Calendar Entities", "views": { "dayGridMonth": "Month", + "dayGridWeek": "Week", "dayGridDay": "Day", - "list": "List" + "listWeek": "List (7 days)" } }, "conditional": { diff --git a/src/types.ts b/src/types.ts index e5939b7a4f..30f9139310 100644 --- a/src/types.ts +++ b/src/types.ts @@ -122,7 +122,7 @@ export type FullCalendarView = | "dayGridMonth" | "dayGridWeek" | "dayGridDay" - | "list"; + | "listWeek"; export interface ToggleButton { label: string;