Add context to event trigger (#7182)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/user/ha-user-picker.ts

@@ -24,10 +24,14 @@ class HaUserPicker extends LitElement {
 
   @property() public label?: string;
 
-  @property() public value?: string;
+  @property() public noUserLabel?: string;
+
+  @property() public value = "";
 
   @property() public users?: User[];
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _sortedUsers = memoizeOne((users?: User[]) => {
     if (!users) {
       return [];
@@ -40,15 +44,19 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu-light .label=${this.label}>
+      <paper-dropdown-menu-light
+        .label=${this.label}
+        .disabled=${this.disabled}
+      >
         <paper-listbox
           slot="dropdown-content"
-          .selected=${this._value}
+          .selected=${this.value}
           attr-for-selected="data-user-id"
           @iron-select=${this._userChanged}
         >
           <paper-icon-item data-user-id="">
-            No user
+            ${this.noUserLabel ||
+            this.hass?.localize("ui.components.user-picker.no_user")}
           </paper-icon-item>
           ${this._sortedUsers(this.users).map(
             (user) => html`
@@ -67,10 +75,6 @@ class HaUserPicker extends LitElement {
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this.users === undefined) {
@@ -83,7 +87,7 @@ class HaUserPicker extends LitElement {
   private _userChanged(ev) {
     const newValue = ev.detail.item.dataset.userId;
 
-    if (newValue !== this._value) {
+    if (newValue !== this.value) {
       this.value = ev.detail.value;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
@@ -111,3 +115,9 @@ class HaUserPicker extends LitElement {
 }
 
 customElements.define("ha-user-picker", HaUserPicker);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-user-picker": HaUserPicker;
+  }
+}

src/components/user/ha-users-picker.ts

@@ -0,0 +1,169 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { PolymerChangedEvent } from "../../polymer-types";
+import type { HomeAssistant } from "../../types";
+import { fetchUsers, User } from "../../data/user";
+import "./ha-user-picker";
+import { mdiClose } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { guard } from "lit-html/directives/guard";
+
+@customElement("ha-users-picker")
+class HaUsersPickerLight extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public value?: string[];
+
+  @property({ attribute: "picked-user-label" })
+  public pickedUserLabel?: string;
+
+  @property({ attribute: "pick-user-label" })
+  public pickUserLabel?: string;
+
+  @property({ attribute: false })
+  public users?: User[];
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    if (this.users === undefined) {
+      fetchUsers(this.hass!).then((users) => {
+        this.users = users;
+      });
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.users) {
+      return html``;
+    }
+
+    const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+    return html`
+      ${guard([notSelectedUsers], () =>
+        this.value?.map(
+          (user_id, idx) => html`
+            <div>
+              <ha-user-picker
+                .label=${this.pickedUserLabel}
+                .noUserLabel=${this.hass?.localize(
+                  "ui.components.user-picker.remove_user"
+                )}
+                .index=${idx}
+                .hass=${this.hass}
+                .value=${user_id}
+                .users=${this._notSelectedUsersAndSelected(
+                  user_id,
+                  this.users,
+                  notSelectedUsers
+                )}
+                @value-changed=${this._userChanged}
+              ></ha-user-picker>
+              <mwc-icon-button .userId=${user_id} @click=${this._removeUser}>
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>
+            </div>
+          `
+        )
+      )}
+      <ha-user-picker
+        .noUserLabel=${this.pickUserLabel ||
+        this.hass?.localize("ui.components.user-picker.add_user")}
+        .hass=${this.hass}
+        .users=${notSelectedUsers}
+        .disabled=${!notSelectedUsers?.length}
+        @value-changed=${this._addUser}
+      ></ha-user-picker>
+    `;
+  }
+
+  private _notSelectedUsers = memoizeOne(
+    (users?: User[], currentUsers?: string[]) =>
+      currentUsers
+        ? users?.filter(
+            (user) => !user.system_generated && !currentUsers.includes(user.id)
+          )
+        : users?.filter((user) => !user.system_generated)
+  );
+
+  private _notSelectedUsersAndSelected = (
+    userId: string,
+    users?: User[],
+    notSelected?: User[]
+  ) => {
+    const selectedUser = users?.find((user) => user.id === userId);
+    if (selectedUser) {
+      return notSelected ? [...notSelected, selectedUser] : [selectedUser];
+    }
+    return notSelected;
+  };
+
+  private get _currentUsers() {
+    return this.value || [];
+  }
+
+  private async _updateUsers(users) {
+    this.value = users;
+    fireEvent(this, "value-changed", {
+      value: users,
+    });
+  }
+
+  private _userChanged(event: PolymerChangedEvent<string>) {
+    event.stopPropagation();
+    const index = (event.currentTarget as any).index;
+    const newValue = event.detail.value;
+    const newUsers = [...this._currentUsers];
+    if (newValue === "") {
+      newUsers.splice(index, 1);
+    } else {
+      newUsers.splice(index, 1, newValue);
+    }
+    this._updateUsers(newUsers);
+  }
+
+  private async _addUser(event: PolymerChangedEvent<string>) {
+    event.stopPropagation();
+    const toAdd = event.detail.value;
+    (event.currentTarget as any).value = "";
+    if (!toAdd) {
+      return;
+    }
+    const currentUsers = this._currentUsers;
+    if (currentUsers.includes(toAdd)) {
+      return;
+    }
+
+    this._updateUsers([...currentUsers, toAdd]);
+  }
+
+  private _removeUser(event) {
+    const userId = (event.currentTarget as any).userId;
+    this._updateUsers(this._currentUsers.filter((user) => user !== userId));
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+      }
+      div {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-users-picker": HaUsersPickerLight;
+  }
+}

src/data/automation.ts

@@ -109,10 +109,17 @@ export interface TemplateTrigger {
   value_template: string;
 }
 
+export interface ContextConstraint {
+  context_id?: string;
+  parent_id?: string;
+  user_id?: string | string[];
+}
+
 export interface EventTrigger {
   platform: "event";
   event_type: string;
-  event_data: any;
+  event_data?: any;
+  context?: ContextConstraint;
 }
 
 export type Trigger =

src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts

@@ -2,12 +2,14 @@ import "@polymer/paper-input/paper-input";
 import { customElement, LitElement, property } from "lit-element";
 import { html } from "lit-html";
 import "../../../../../components/ha-yaml-editor";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import { EventTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
   handleChangeEvent,
   TriggerElement,
 } from "../ha-automation-trigger-row";
+import "../../../../../components/user/ha-users-picker";
 
 @customElement("ha-automation-trigger-event")
 export class HaEventTrigger extends LitElement implements TriggerElement {
@@ -16,11 +18,11 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
   @property() public trigger!: EventTrigger;
 
   public static get defaultConfig() {
-    return { event_type: "", event_data: {} };
+    return { event_type: "" };
   }
 
   protected render() {
-    const { event_type, event_data } = this.trigger;
+    const { event_type, event_data, context } = this.trigger;
     return html`
       <paper-input
         .label=${this.hass.localize(
@@ -38,9 +40,34 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
         .defaultValue=${event_data}
         @value-changed=${this._dataChanged}
       ></ha-yaml-editor>
+      <br />
+      ${this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.type.event.context_users"
+      )}
+      <ha-users-picker
+        .pickedUserLabel=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.event.context_user_picked"
+        )}
+        .pickUserLabel=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.event.context_user_pick"
+        )}
+        .hass=${this.hass}
+        .value=${this._wrapUsersInArray(context?.user_id)}
+        @value-changed=${this._usersChanged}
+      ></ha-users-picker>
     `;
   }
 
+  private _wrapUsersInArray(user_id: string | string[] | undefined): string[] {
+    if (!user_id) {
+      return [];
+    }
+    if (typeof user_id === "string") {
+      return [user_id];
+    }
+    return user_id;
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     handleChangeEvent(this, ev);
@@ -53,6 +80,22 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
     }
     handleChangeEvent(this, ev);
   }
+
+  private _usersChanged(ev) {
+    ev.stopPropagation();
+    const value = { ...this.trigger };
+    if (!ev.detail.value.length && value.context) {
+      delete value.context.user_id;
+    } else {
+      if (!value.context) {
+        value.context = {};
+      }
+      value.context.user_id = ev.detail.value;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+  }
 }
 
 declare global {

src/panels/config/person/dialog-person-detail.ts

@@ -14,7 +14,6 @@ import "../../../components/entity/ha-entities-picker";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
-import "../../../components/user/ha-user-picker";
 import { PersonMutableParams } from "../../../data/person";
 import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { PolymerChangedEvent } from "../../../polymer-types";
@@ -440,9 +439,6 @@ class DialogPersonDetail extends LitElement {
           display: block;
           padding: 16px 0;
         }
-        ha-user-picker {
-          margin-top: 16px;
-        }
         a {
           color: var(--primary-color);
         }

src/panels/config/zone/dialog-zone-detail.ts

@@ -303,9 +303,6 @@ class DialogZoneDetail extends LitElement {
         ha-location-editor {
           margin-top: 16px;
         }
-        ha-user-picker {
-          margin-top: 16px;
-        }
         a {
           color: var(--primary-color);
         }

src/translations/en.json

@@ -325,6 +325,11 @@
           "show_attributes": "Show attributes"
         }
       },
+      "user-picker": {
+        "no_user": "No user",
+        "add_user": "Add user",
+        "remove_user": "Remove user"
+      },
       "device-picker": {
         "clear": "Clear",
         "toggle": "Toggle",
@@ -1105,7 +1110,10 @@
                 "event": {
                   "label": "Event",
                   "event_type": "Event type",
-                  "event_data": "Event data"
+                  "event_data": "Event data",
+                  "context_users": "Limit to events triggered by",
+                  "context_user_picked": "User firing event",
+                  "context_user_pick": "Add user"
                 },
                 "geo_location": {
                   "label": "Geolocation",