Use entity picker in calendar event editor (#14772)

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -47,7 +47,7 @@ class DialogCalendarEventDetail extends LitElement {
     if (params.entry) {
       const entry = params.entry!;
       this._data = entry;
-      this._calendarId = params.calendarId || params.calendars[0].entity_id;
+      this._calendarId = params.calendarId;
     }
   }
 

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import { mdiClose } from "@mdi/js";
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import {
   addDays,
   addHours,
@@ -8,16 +7,20 @@ import {
   differenceInMilliseconds,
   startOfHour,
 } from "date-fns/esm";
+import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
+import { supportsFeature } from "../../common/entity/supports-feature";
 import { isDate } from "../../common/string/is_date";
+import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-input";
 import "../../components/ha-textarea";
 import "../../components/ha-time-input";
 import {
-  Calendar,
+  CalendarEntityFeature,
   CalendarEventMutableParams,
   createCalendarEvent,
   deleteCalendarEvent,
@@ -27,14 +30,9 @@ import { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
-import { CalendarEventDetailDialogParams } from "./show-dialog-calendar-event-detail";
 import { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
 
-const rowRenderer: ComboBoxLitRenderer<Calendar> = (
-  item
-) => html`<mwc-list-item>
-  <span>${item.name}</span>
-</mwc-list-item>`;
+const CALENDAR_DOMAINS = ["calendar"];
 
 @customElement("dialog-calendar-event-editor")
 class DialogCalendarEventEditor extends LitElement {
@@ -44,9 +42,7 @@ class DialogCalendarEventEditor extends LitElement {
 
   @state() private _info?: string;
 
-  @state() private _params?: CalendarEventDetailDialogParams;
-
-  @state() private _calendars: Calendar[] = [];
+  @state() private _params?: CalendarEventEditDialogParams;
 
   @state() private _calendarId?: string;
 
@@ -68,8 +64,13 @@ class DialogCalendarEventEditor extends LitElement {
     this._error = undefined;
     this._info = undefined;
     this._params = params;
-    this._calendars = params.calendars;
-    this._calendarId = params.calendarId || this._calendars[0].entity_id;
+    this._calendarId =
+      params.calendarId ||
+      Object.values(this.hass.states).find(
+        (stateObj) =>
+          computeStateDomain(stateObj) === "calendar" &&
+          supportsFeature(stateObj, CalendarEntityFeature.CREATE_EVENT)
+      )?.entity_id;
     if (params.entry) {
       const entry = params.entry!;
       this._allDay = isDate(entry.dtstart);
@@ -99,7 +100,6 @@ class DialogCalendarEventEditor extends LitElement {
     if (!this._params) {
       return;
     }
-    this._calendars = [];
     this._calendarId = undefined;
     this._params = undefined;
     this._dtstart = undefined;
@@ -172,19 +172,16 @@ class DialogCalendarEventEditor extends LitElement {
             @change=${this._handleDescriptionChanged}
             autogrow
           ></ha-textarea>
-          <ha-combo-box
+          <ha-entity-picker
             name="calendar"
             .hass=${this.hass}
             .label=${this.hass.localize("ui.components.calendar.label")}
             .value=${this._calendarId!}
-            .renderer=${rowRenderer}
-            .items=${this._calendars}
-            item-id-path="entity_id"
-            item-value-path="entity_id"
-            item-label-path="name"
+            .includeDomains=${CALENDAR_DOMAINS}
+            .entityFilter=${this._isEditableCalendar}
             required
             @value-changed=${this._handleCalendarChanged}
-          ></ha-combo-box>
+          ></ha-entity-picker>
           <ha-formfield
             .label=${this.hass.localize("ui.components.calendar.event.all_day")}
           >
@@ -281,6 +278,9 @@ class DialogCalendarEventEditor extends LitElement {
     `;
   }
 
+  private _isEditableCalendar = (entityStateObj: HassEntity) =>
+    supportsFeature(entityStateObj, CalendarEntityFeature.CREATE_EVENT);
+
   private _getLocaleStrings = memoizeOne((startDate?: Date, endDate?: Date) =>
     // en-CA locale used for date format YYYY-MM-DD
     // en-GB locale used for 24h time format HH:MM:SS
@@ -557,9 +557,6 @@ class DialogCalendarEventEditor extends LitElement {
         ha-rrule {
           display: block;
         }
-        ha-combo-box {
-          display: block;
-        }
         ha-svg-icon {
           width: 40px;
           margin-right: 8px;

src/panels/calendar/ha-full-calendar.ts

@@ -200,7 +200,7 @@ export class HAFullCalendar extends LitElement {
         : ""}
 
       <div id="calendar"></div>
-      ${this._mutableCalendars.length > 0
+      ${this._hasMutableCalendars
         ? html`<ha-fab
             slot="fab"
             .label=${this.hass.localize("ui.components.calendar.event.add")}
@@ -270,17 +270,15 @@ export class HAFullCalendar extends LitElement {
     this._fireViewChanged();
   }
 
-  // Return calendars that support creating events
-  private get _mutableCalendars(): CalendarData[] {
-    return this.calendars
-      .filter((selCal) => {
-        const entityStateObj = this.hass.states[selCal.entity_id];
-        return (
-          entityStateObj &&
-          supportsFeature(entityStateObj, CalendarEntityFeature.CREATE_EVENT)
-        );
-      })
-      .map((cal) => cal);
+  // Return if there are calendars that support creating events
+  private get _hasMutableCalendars(): boolean {
+    return this.calendars.some((selCal) => {
+      const entityStateObj = this.hass.states[selCal.entity_id];
+      return (
+        entityStateObj &&
+        supportsFeature(entityStateObj, CalendarEntityFeature.CREATE_EVENT)
+      );
+    });
   }
 
   private _createEvent(_info) {
@@ -289,7 +287,6 @@ export class HAFullCalendar extends LitElement {
     // current actual month, as for that one the current day is automatically highlighted and
     // defaulting to a different day in the event creation dialog would be weird.
     showCalendarEventEditDialog(this, {
-      calendars: this._mutableCalendars,
       selectedDate:
         this._activeView === "dayGridWeek" ||
         this._activeView === "dayGridDay" ||
@@ -309,7 +306,6 @@ export class HAFullCalendar extends LitElement {
       entityStateObj &&
       supportsFeature(entityStateObj, CalendarEntityFeature.DELETE_EVENT);
     showCalendarEventDetailDialog(this, {
-      calendars: this.calendars,
       calendarId: info.event.extendedProps.calendar,
       entry: info.event.extendedProps.eventData,
       color: info.event.backgroundColor,

src/panels/calendar/show-dialog-calendar-event-detail.ts

@@ -1,10 +1,9 @@
 import { fireEvent } from "../../common/dom/fire_event";
-import { Calendar, CalendarEventData } from "../../data/calendar";
+import { CalendarEventData } from "../../data/calendar";
 
 export interface CalendarEventDetailDialogParams {
-  calendars: Calendar[]; // When creating new events, is the list of calendar entities that support creation
-  calendarId?: string;
-  entry?: CalendarEventData;
+  calendarId: string;
+  entry: CalendarEventData;
   canDelete?: boolean;
   canEdit?: boolean;
   updated: () => void;

src/panels/calendar/show-dialog-calendar-event-editor.ts

@@ -1,8 +1,7 @@
 import { fireEvent } from "../../common/dom/fire_event";
-import { Calendar, CalendarEventData } from "../../data/calendar";
+import { CalendarEventData } from "../../data/calendar";
 
 export interface CalendarEventEditDialogParams {
-  calendars: Calendar[]; // When creating new events, is the list of calendar entities that support creation
   calendarId?: string;
   selectedDate?: Date; // When provided is used as the pre-filled date for the event creation dialog
   entry?: CalendarEventData;