From d98f21a298a4b9a6f4a7b65e9b4d6b8c49219c70 Mon Sep 17 00:00:00 2001 From: On Freund Date: Thu, 1 Oct 2020 12:17:30 +0300 Subject: [PATCH 01/14] Add context to event trigger --- src/data/automation.ts | 1 + .../trigger/types/ha-automation-trigger-event.ts | 12 ++++++++++-- src/translations/en.json | 3 ++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/data/automation.ts b/src/data/automation.ts index acbd13df4702..bce1465a6d33 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -113,6 +113,7 @@ export interface EventTrigger { platform: "event"; event_type: string; event_data: any; + context: any; } export type Trigger = diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index cb7bd866ca70..54d51bde7157 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -16,11 +16,11 @@ export class HaEventTrigger extends LitElement implements TriggerElement { @property() public trigger!: EventTrigger; public static get defaultConfig() { - return { event_type: "", event_data: {} }; + return { event_type: "", event_data: {}, context: {} }; } protected render() { - const { event_type, event_data } = this.trigger; + const { event_type, event_data, context } = this.trigger; return html` + `; } diff --git a/src/translations/en.json b/src/translations/en.json index c0cfbd2c53e3..62b333b74c5b 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1089,7 +1089,8 @@ "event": { "label": "Event", "event_type": "Event type", - "event_data": "Event data" + "event_data": "Event data", + "context": "Event context" }, "geo_location": { "label": "Geolocation", From 840b2f3f9701bd61bbba1a6ef66ef2d03082902d Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 17:04:59 +0300 Subject: [PATCH 02/14] User picker instead of yaml --- src/components/user/ha-users-picker.ts | 108 ++++++++++++++++++ src/data/automation.ts | 8 +- .../types/ha-automation-trigger-event.ts | 41 +++++-- src/translations/en.json | 3 +- 4 files changed, 149 insertions(+), 11 deletions(-) create mode 100644 src/components/user/ha-users-picker.ts diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts new file mode 100644 index 000000000000..eeb0ebd230c9 --- /dev/null +++ b/src/components/user/ha-users-picker.ts @@ -0,0 +1,108 @@ +import { + 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"; + +@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({ type: Array, attribute: "users" }) + public users?: User[]; + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + const currentUsers = this._currentUsers; + console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<"); + console.log(currentUsers); + return html` + ${currentUsers.map( + (user_id) => html` +
+ +
+ ` + )} + + `; + } + + private get _currentUsers() { + return this.value || []; + } + + private async _updateUsers(users) { + this.value = users; + fireEvent(this, "value-changed", { + value: users, + }); + } + + private _userChanged(event: PolymerChangedEvent) { + event.stopPropagation(); + const curValue = (event.currentTarget as any).curValue; + const newValue = event.detail.value; + if (newValue === curValue) { + return; + } + if (newValue === "") { + this._updateUsers(this._currentUsers.filter((user) => user !== curValue)); + } else { + this._updateUsers( + this._currentUsers.map((user) => (user === curValue ? newValue : user)) + ); + } + } + + private async _addUser(event: PolymerChangedEvent) { + 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]); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-users-picker": HaUsersPickerLight; + } +} diff --git a/src/data/automation.ts b/src/data/automation.ts index bce1465a6d33..ce4ec33c66f2 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -109,11 +109,17 @@ export interface TemplateTrigger { value_template: string; } +export interface Context { + context_id: string; + parent_id?: string; + user_id?: string[]; +} + export interface EventTrigger { platform: "event"; event_type: string; event_data: any; - context: any; + context: Context; } export type Trigger = diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index 54d51bde7157..ac356e08ece7 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -1,13 +1,20 @@ import "@polymer/paper-input/paper-input"; -import { customElement, LitElement, property } from "lit-element"; +import { + customElement, + LitElement, + property, + internalProperty, +} from "lit-element"; import { html } from "lit-html"; import "../../../../../components/ha-yaml-editor"; import { EventTrigger } from "../../../../../data/automation"; +import { fetchUsers, User } from "../../../../../data/user"; 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 { @@ -15,8 +22,10 @@ export class HaEventTrigger extends LitElement implements TriggerElement { @property() public trigger!: EventTrigger; + @internalProperty() private _users?: User[]; + public static get defaultConfig() { - return { event_type: "", event_data: {}, context: {} }; + return { event_type: "", event_data: {}, context: { user_id: [] } }; } protected render() { @@ -38,14 +47,18 @@ export class HaEventTrigger extends LitElement implements TriggerElement { .defaultValue=${event_data} @value-changed=${this._dataChanged} > - + .pickUserLabel=${this.hass.localize( + "ui.panel.config.automation.editor.triggers.type.event.context_user_pick" + )} + .hass=${this.hass} + .value=${[].concat(context.user_id || [])} + .users=${this._users} + @value-changed=${this._valueChanged} + > `; } @@ -61,6 +74,16 @@ export class HaEventTrigger extends LitElement implements TriggerElement { } handleChangeEvent(this, ev); } + + protected firstUpdated(): void { + if (!this._users) { + this._getUsers(); + } + } + + private async _getUsers(): User[] { + this._users = await fetchUsers(this.hass); + } } declare global { diff --git a/src/translations/en.json b/src/translations/en.json index 62b333b74c5b..d738765f98d5 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1090,7 +1090,8 @@ "label": "Event", "event_type": "Event type", "event_data": "Event data", - "context": "Event context" + "context_user_picked": "User firing event", + "context_user_pick": "Add user" }, "geo_location": { "label": "Geolocation", From f3ed5bdd33cc4bdc4c689d6a9616da68cab603df Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 17:13:41 +0300 Subject: [PATCH 03/14] Remove console.log --- src/components/user/ha-users-picker.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index eeb0ebd230c9..1c9ea020f8a9 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -32,8 +32,6 @@ class HaUsersPickerLight extends LitElement { } const currentUsers = this._currentUsers; - console.log("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<"); - console.log(currentUsers); return html` ${currentUsers.map( (user_id) => html` From 40afd5a46c8b6d853c62221d361ecf890eb10aec Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 17:26:56 +0300 Subject: [PATCH 04/14] Fix lint --- src/components/user/ha-users-picker.ts | 2 +- src/data/automation.ts | 4 ++-- .../automation/trigger/types/ha-automation-trigger-event.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 1c9ea020f8a9..5fa2c1f7bc8f 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -8,7 +8,7 @@ import { 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 { User } from "../../data/user"; import "./ha-user-picker"; @customElement("ha-users-picker") diff --git a/src/data/automation.ts b/src/data/automation.ts index ce4ec33c66f2..09798ba2bb09 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -109,7 +109,7 @@ export interface TemplateTrigger { value_template: string; } -export interface Context { +export interface ContextConstraint { context_id: string; parent_id?: string; user_id?: string[]; @@ -119,7 +119,7 @@ export interface EventTrigger { platform: "event"; event_type: string; event_data: any; - context: Context; + context: ContextConstraint; } export type Trigger = diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index ac356e08ece7..3442ae462d8f 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -81,7 +81,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { } } - private async _getUsers(): User[] { + private async _getUsers(): void { this._users = await fetchUsers(this.hass); } } From 3979a48e8e20dd7171005d5a89c7f14b1622ec35 Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 19:14:35 +0300 Subject: [PATCH 05/14] More lint fixes --- src/data/automation.ts | 2 +- .../trigger/types/ha-automation-trigger-event.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/data/automation.ts b/src/data/automation.ts index 09798ba2bb09..01b499963bbe 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -112,7 +112,7 @@ export interface TemplateTrigger { export interface ContextConstraint { context_id: string; parent_id?: string; - user_id?: string[]; + user_id?: string | string[]; } export interface EventTrigger { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index 3442ae462d8f..9988cd6a60c4 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -55,13 +55,18 @@ export class HaEventTrigger extends LitElement implements TriggerElement { "ui.panel.config.automation.editor.triggers.type.event.context_user_pick" )} .hass=${this.hass} - .value=${[].concat(context.user_id || [])} + .value=${this._wrapUsersInArray(context)} .users=${this._users} @value-changed=${this._valueChanged} > `; } + private _wrapUsersInArray(context): string[] { + var empty: string[] = []; + return empty.concat(context.user_id || []); + } + private _valueChanged(ev: CustomEvent): void { ev.stopPropagation(); handleChangeEvent(this, ev); @@ -81,7 +86,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { } } - private async _getUsers(): void { + private async _getUsers(): Promise { this._users = await fetchUsers(this.hass); } } From 186c4fcf78c8fc7ca8a93b86638e43889c461b56 Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 19:20:32 +0300 Subject: [PATCH 06/14] var->let --- .../automation/trigger/types/ha-automation-trigger-event.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index 9988cd6a60c4..da20e530fd63 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -63,7 +63,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { } private _wrapUsersInArray(context): string[] { - var empty: string[] = []; + let empty: string[] = []; return empty.concat(context.user_id || []); } From 257d066a736a1579022986b1afbb9e685442f17a Mon Sep 17 00:00:00 2001 From: On Freund Date: Mon, 12 Oct 2020 19:30:35 +0300 Subject: [PATCH 07/14] let-const --- .../automation/trigger/types/ha-automation-trigger-event.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index da20e530fd63..c8ca72b5f140 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -63,7 +63,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { } private _wrapUsersInArray(context): string[] { - let empty: string[] = []; + const empty: string[] = []; return empty.concat(context.user_id || []); } From 60de9ef0ad8e06d9369aaff03ed4e8ada60b81e3 Mon Sep 17 00:00:00 2001 From: On Freund Date: Fri, 16 Oct 2020 11:08:25 +0300 Subject: [PATCH 08/14] Fix propagation --- src/data/automation.ts | 4 +-- .../types/ha-automation-trigger-event.ts | 32 +++++++++++++------ 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/data/automation.ts b/src/data/automation.ts index 01b499963bbe..2a219088bdf3 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -118,8 +118,8 @@ export interface ContextConstraint { export interface EventTrigger { platform: "event"; event_type: string; - event_data: any; - context: ContextConstraint; + event_data?: any; + context?: ContextConstraint; } export type Trigger = diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index c8ca72b5f140..a38d07cb7440 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -7,6 +7,7 @@ import { } 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 { fetchUsers, User } from "../../../../../data/user"; import { HomeAssistant } from "../../../../../types"; @@ -25,7 +26,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement { @internalProperty() private _users?: User[]; public static get defaultConfig() { - return { event_type: "", event_data: {}, context: { user_id: [] } }; + return { event_type: "" }; } protected render() { @@ -55,16 +56,21 @@ export class HaEventTrigger extends LitElement implements TriggerElement { "ui.panel.config.automation.editor.triggers.type.event.context_user_pick" )} .hass=${this.hass} - .value=${this._wrapUsersInArray(context)} + .value=${this._wrapUsersInArray(context?.user_id)} .users=${this._users} - @value-changed=${this._valueChanged} + @value-changed=${this._usersChanged} > `; } - private _wrapUsersInArray(context): string[] { - const empty: string[] = []; - return empty.concat(context.user_id || []); + 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 { @@ -80,10 +86,18 @@ export class HaEventTrigger extends LitElement implements TriggerElement { handleChangeEvent(this, ev); } + private _usersChanged(ev) { + ev.stopPropagation(); + fireEvent(this, "value-changed", { + value: { + ...this.trigger, + context: { ...this.trigger.context, user_id: ev.detail.value }, + }, + }); + } + protected firstUpdated(): void { - if (!this._users) { - this._getUsers(); - } + this._getUsers(); } private async _getUsers(): Promise { From b51e330ae135b42d41d6ff8417561de81b894d30 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 21 Oct 2020 14:16:10 +0200 Subject: [PATCH 09/14] Fix user picker --- src/components/user/ha-user-picker.ts | 10 +++------- src/components/user/ha-users-picker.ts | 27 +++++++++++++++++++++++++- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index ecd99f188fc3..b1d8c96d4929 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -24,7 +24,7 @@ class HaUserPicker extends LitElement { @property() public label?: string; - @property() public value?: string; + @property() public value = ""; @property() public users?: User[]; @@ -43,7 +43,7 @@ class HaUserPicker extends LitElement { @@ -67,10 +67,6 @@ class HaUserPicker extends LitElement { `; } - private get _value() { - return this.value || ""; - } - protected firstUpdated(changedProps) { super.firstUpdated(changedProps); if (this.users === undefined) { @@ -83,7 +79,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 }); diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 5fa2c1f7bc8f..1c8bce460980 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -1,4 +1,6 @@ import { + css, + CSSResult, customElement, html, LitElement, @@ -10,6 +12,8 @@ import type { PolymerChangedEvent } from "../../polymer-types"; import type { HomeAssistant } from "../../types"; import { User } from "../../data/user"; import "./ha-user-picker"; +import { mdiClose } from "@mdi/js"; +import memoizeOne from "memoize-one"; @customElement("ha-users-picker") class HaUsersPickerLight extends LitElement { @@ -44,18 +48,25 @@ class HaUsersPickerLight extends LitElement { .users=${this.users} @value-changed=${this._userChanged} > + + + ` )} `; } + private _notSelectedUsers = memoizeOne((users, currentUsers) => + users?.filter((user) => !currentUsers.includes(user.id)) + ); + private get _currentUsers() { return this.value || []; } @@ -97,6 +108,20 @@ class HaUsersPickerLight extends LitElement { 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` + div { + display: flex; + align-items: center; + } + `; + } } declare global { From 62b2f5766d397ad1f375d04f03ced9a498550031 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 21 Oct 2020 14:26:36 +0200 Subject: [PATCH 10/14] Remove user id when none selected --- src/data/automation.ts | 2 +- .../trigger/types/ha-automation-trigger-event.ts | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/data/automation.ts b/src/data/automation.ts index 2a219088bdf3..bb35448575f9 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -110,7 +110,7 @@ export interface TemplateTrigger { } export interface ContextConstraint { - context_id: string; + context_id?: string; parent_id?: string; user_id?: string | string[]; } diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index a38d07cb7440..d4edda87850c 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -88,11 +88,17 @@ export class HaEventTrigger extends LitElement implements TriggerElement { 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: { - ...this.trigger, - context: { ...this.trigger.context, user_id: ev.detail.value }, - }, + value, }); } From fe954d3295b24ddbb992072b4997ea7419ad53ad Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 21 Oct 2020 15:41:07 +0200 Subject: [PATCH 11/14] Move fetching users to users picker --- src/components/user/ha-users-picker.ts | 24 ++++++++++++++----- .../types/ha-automation-trigger-event.ts | 19 +-------------- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 1c8bce460980..b41ed286b83e 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -10,7 +10,7 @@ import { import { fireEvent } from "../../common/dom/fire_event"; import type { PolymerChangedEvent } from "../../polymer-types"; import type { HomeAssistant } from "../../types"; -import { User } from "../../data/user"; +import { fetchUsers, User } from "../../data/user"; import "./ha-user-picker"; import { mdiClose } from "@mdi/js"; import memoizeOne from "memoize-one"; @@ -27,11 +27,20 @@ class HaUsersPickerLight extends LitElement { @property({ attribute: "pick-user-label" }) public pickUserLabel?: string; - @property({ type: Array, attribute: "users" }) + @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) { + if (!this.hass || !this.users) { return html``; } @@ -57,14 +66,17 @@ class HaUsersPickerLight extends LitElement { `; } - private _notSelectedUsers = memoizeOne((users, currentUsers) => - users?.filter((user) => !currentUsers.includes(user.id)) + private _notSelectedUsers = memoizeOne( + (users?: User[], currentUsers?: string[]) => + currentUsers + ? users?.filter((user) => !currentUsers.includes(user.id)) + : users ); private get _currentUsers() { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index d4edda87850c..72b8edbadf08 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -1,15 +1,9 @@ import "@polymer/paper-input/paper-input"; -import { - customElement, - LitElement, - property, - internalProperty, -} from "lit-element"; +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 { fetchUsers, User } from "../../../../../data/user"; import { HomeAssistant } from "../../../../../types"; import { handleChangeEvent, @@ -23,8 +17,6 @@ export class HaEventTrigger extends LitElement implements TriggerElement { @property() public trigger!: EventTrigger; - @internalProperty() private _users?: User[]; - public static get defaultConfig() { return { event_type: "" }; } @@ -57,7 +49,6 @@ export class HaEventTrigger extends LitElement implements TriggerElement { )} .hass=${this.hass} .value=${this._wrapUsersInArray(context?.user_id)} - .users=${this._users} @value-changed=${this._usersChanged} > `; @@ -101,14 +92,6 @@ export class HaEventTrigger extends LitElement implements TriggerElement { value, }); } - - protected firstUpdated(): void { - this._getUsers(); - } - - private async _getUsers(): Promise { - this._users = await fetchUsers(this.hass); - } } declare global { From 010c589e9c222bd71725035fd2f73c12fcd2e50d Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 21 Oct 2020 16:33:00 +0200 Subject: [PATCH 12/14] Only allows selecting user once --- src/components/user/ha-users-picker.ts | 68 ++++++++++++++++---------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index b41ed286b83e..2de59eb9991f 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -14,6 +14,7 @@ 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 { @@ -44,29 +45,35 @@ class HaUsersPickerLight extends LitElement { return html``; } - const currentUsers = this._currentUsers; + const notSelectedUsers = this._notSelectedUsers(this.users, this.value); return html` - ${currentUsers.map( - (user_id) => html` -
- - - - -
- ` + ${guard([notSelectedUsers], () => + this.value?.map( + (user_id, idx) => html` +
+ + + + +
+ ` + ) )} `; @@ -79,6 +86,18 @@ class HaUsersPickerLight extends LitElement { : users ); + 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 || []; } @@ -92,18 +111,15 @@ class HaUsersPickerLight extends LitElement { private _userChanged(event: PolymerChangedEvent) { event.stopPropagation(); - const curValue = (event.currentTarget as any).curValue; + const index = (event.currentTarget as any).index; const newValue = event.detail.value; - if (newValue === curValue) { - return; - } + const newUsers = [...this._currentUsers]; if (newValue === "") { - this._updateUsers(this._currentUsers.filter((user) => user !== curValue)); + newUsers.splice(index, 1); } else { - this._updateUsers( - this._currentUsers.map((user) => (user === curValue ? newValue : user)) - ); + newUsers.splice(index, 1, newValue); } + this._updateUsers(newUsers); } private async _addUser(event: PolymerChangedEvent) { From 7cd4287ec00b307173b035b0249f1b80ecc6de92 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 21 Oct 2020 17:05:07 +0200 Subject: [PATCH 13/14] Finals tweaks and localize --- src/components/user/ha-user-picker.ts | 18 ++++++++++++++++-- src/components/user/ha-users-picker.ts | 16 +++++++++++++--- .../types/ha-automation-trigger-event.ts | 4 ++++ src/translations/en.json | 6 ++++++ 4 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index b1d8c96d4929..6b3e865c0586 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -24,10 +24,14 @@ class HaUserPicker extends LitElement { @property() public label?: 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,7 +44,10 @@ class HaUserPicker extends LitElement { protected render(): TemplateResult { return html` - + - No user + ${this.noUserLabel || + this.hass?.localize("ui.components.user-picker.no_user")} ${this._sortedUsers(this.users).map( (user) => html` @@ -107,3 +115,9 @@ class HaUserPicker extends LitElement { } customElements.define("ha-user-picker", HaUserPicker); + +declare global { + interface HTMLElementTagNameMap { + "ha-user-picker": HaUserPicker; + } +} diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 2de59eb9991f..d4fac81d4811 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -53,6 +53,9 @@ class HaUsersPickerLight extends LitElement {
`; @@ -82,8 +87,10 @@ class HaUsersPickerLight extends LitElement { private _notSelectedUsers = memoizeOne( (users?: User[], currentUsers?: string[]) => currentUsers - ? users?.filter((user) => !currentUsers.includes(user.id)) - : users + ? users?.filter( + (user) => !user.system_generated && !currentUsers.includes(user.id) + ) + : users?.filter((user) => !user.system_generated) ); private _notSelectedUsersAndSelected = ( @@ -144,6 +151,9 @@ class HaUsersPickerLight extends LitElement { static get styles(): CSSResult { return css` + :host { + display: block; + } div { display: flex; align-items: center; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index 72b8edbadf08..eed3d63e0f6d 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -40,6 +40,10 @@ export class HaEventTrigger extends LitElement implements TriggerElement { .defaultValue=${event_data} @value-changed=${this._dataChanged} > +
+ ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.type.event.context_users" + )} Date: Wed, 21 Oct 2020 17:06:43 +0200 Subject: [PATCH 14/14] clean up --- src/panels/config/person/dialog-person-detail.ts | 4 ---- src/panels/config/zone/dialog-zone-detail.ts | 3 --- 2 files changed, 7 deletions(-) diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 5844a0374fbd..67802ea92848 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/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); } diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 227c1b0ab8b9..f31f5e0565f6 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/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); }