Allow attaching additional data to schedule in UI (#22798)

* Allow attaching additional data to schedule in UI

* use expandable

src/panels/config/helpers/forms/dialog-schedule-block-info.ts

@@ -1,5 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
+import memoizeOne from "memoize-one";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
@@ -13,19 +14,6 @@ import type {
 } from "./show-dialog-schedule-block-info";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 
-const SCHEMA = [
-  {
-    name: "from",
-    required: true,
-    selector: { time: { no_second: true } },
-  },
-  {
-    name: "to",
-    required: true,
-    selector: { time: { no_second: true } },
-  },
-];
-
 class DialogScheduleBlockInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -35,10 +23,39 @@ class DialogScheduleBlockInfo extends LitElement {
 
   @state() private _params?: ScheduleBlockInfoDialogParams;
 
+  private _expand = false;
+
+  private _schema = memoizeOne((expand: boolean) => [
+    {
+      name: "from",
+      required: true,
+      selector: { time: { no_second: true } },
+    },
+    {
+      name: "to",
+      required: true,
+      selector: { time: { no_second: true } },
+    },
+    {
+      name: "advanced_settings",
+      type: "expandable" as const,
+      flatten: true,
+      expanded: expand,
+      schema: [
+        {
+          name: "data",
+          required: false,
+          selector: { object: {} },
+        },
+      ],
+    },
+  ]);
+
   public showDialog(params: ScheduleBlockInfoDialogParams): void {
     this._params = params;
     this._error = undefined;
     this._data = params.block;
+    this._expand = !!params.block?.data;
   }
 
   public closeDialog(): void {
@@ -66,7 +83,7 @@ class DialogScheduleBlockInfo extends LitElement {
         <div>
           <ha-form
             .hass=${this.hass}
-            .schema=${SCHEMA}
+            .schema=${this._schema(this._expand)}
             .data=${this._data}
             .error=${this._error}
             .computeLabel=${this._computeLabelCallback}
@@ -110,12 +127,20 @@ class DialogScheduleBlockInfo extends LitElement {
     }
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     switch (schema.name) {
       case "from":
         return this.hass!.localize("ui.dialogs.helper_settings.schedule.start");
       case "to":
         return this.hass!.localize("ui.dialogs.helper_settings.schedule.end");
+      case "data":
+        return this.hass!.localize("ui.dialogs.helper_settings.schedule.data");
+      case "advanced_settings":
+        return this.hass!.localize(
+          "ui.dialogs.helper_settings.schedule.advanced_settings"
+        );
     }
     return "";
   };

src/panels/config/helpers/forms/show-dialog-schedule-block-info.ts

@@ -3,6 +3,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 export interface ScheduleBlockInfo {
   from: string;
   to: string;
+  data?: Record<string, any>;
 }
 
 export interface ScheduleBlockInfoDialogParams {

src/translations/en.json

@@ -1612,7 +1612,9 @@
           "confirm_delete": "Do you want to delete this item?",
           "edit_schedule_block": "Edit schedule block",
           "start": "Start",
-          "end": "End"
+          "end": "End",
+          "data": "Additional data",
+          "advanced_settings": "Advanced settings"
         },
         "template": {
           "time": "[%key:ui::panel::developer-tools::tabs::templates::time%]",