Skip to content

Entity Settings Page to MWC 3 #11694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balloob merged 7 commits into from
Feb 18, 2022
Merged

Entity Settings Page to MWC 3 #11694

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bf46769
Entity Settings Page to MWC 3
zsarnett Feb 14, 2022
1404af0
input select settings to mwc 3
zsarnett Feb 14, 2022
f407ba4
input Number to mwc
zsarnett Feb 14, 2022
a2f7c71
stash
zsarnett Feb 14, 2022
7b1d612
helpers
zsarnett Feb 15, 2022
bc3955d
change alert
zsarnett Feb 15, 2022
5eb273b
detail could be undefined
zsarnett Feb 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/panels/config/entities/entity-registry-basic-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-area-picker";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch";
import {
DeviceRegistryEntry,
Expand All @@ -17,7 +17,6 @@ import {
} from "../../../data/entity_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";

@customElement("ha-registry-basic-editor")
Expand Down Expand Up @@ -123,16 +122,16 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
computeDomain(this.entry.entity_id);

return html`
<paper-input
<ha-textfield
error-message="Domain needs to stay the same"

@balloob balloob Feb 18, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a property for textfield https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes

@zsarnett zsarnett Feb 18, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is on ha-textfield

@zsarnett zsarnett Feb 18, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/home-assistant/frontend/blob/dev/src/components/ha-textfield.ts#L10

.value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id"
)}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
@input=${this._entityIdChanged}
></ha-textfield>
<ha-area-picker
.hass=${this.hass}
.value=${this._areaId}
Expand Down Expand Up @@ -177,8 +176,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
this._areaId = ev.detail.value;
}

private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
this._entityId = ev.detail.value;
private _entityIdChanged(ev): void {
this._entityId = ev.target.value;
}

private _disabledByChanged(ev: Event): void {
Expand All @@ -199,6 +198,10 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
.secondary {
color: var(--secondary-text-color);
}
ha-textfield {
display: block;
margin-bottom: 8px;
}
`;
}
}
36 changes: 20 additions & 16 deletions src/panels/config/entities/entity-registry-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
Expand All @@ -19,6 +18,7 @@ import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-picker";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch";
import {
DeviceRegistryEntry,
Expand All @@ -36,7 +36,6 @@ import {
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
Expand Down Expand Up @@ -137,15 +136,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
</div>
`
: ""}
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
${this._error ? html`<div class="error">${this._error}</div>` : ""}
Comment thread
zsarnett marked this conversation as resolved.
Outdated
<div class="form container">
<paper-input
<ha-textfield
.value=${this._name}
@value-changed=${this._nameChanged}
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
.placeholder=${this.entry.original_name}
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
.placeholder=${this.entry.original_name}
@input=${this._nameChanged}
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
@value-changed=${this._iconChanged}
Expand Down Expand Up @@ -176,16 +176,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
)}
</mwc-select>`
: ""}
<paper-input
<ha-textfield
error-message="Domain needs to stay the same"

@balloob balloob Feb 18, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

@zsarnett zsarnett Feb 18, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/home-assistant/frontend/blob/dev/src/components/ha-textfield.ts#L10

.value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id"
)}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
@input=${this._entityIdChanged}
></ha-textfield>
${!this.entry.device_id
? html`<ha-area-picker
.hass=${this.hass}
Expand Down Expand Up @@ -282,19 +282,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
`;
}

private _nameChanged(ev: PolymerChangedEvent<string>): void {
private _nameChanged(ev): void {
this._error = undefined;
this._name = ev.detail.value;
this._name = ev.target.value;
}

private _iconChanged(ev: PolymerChangedEvent<string>): void {
private _iconChanged(ev: CustomEvent): void {
this._error = undefined;
this._icon = ev.detail.value;
}

private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
private _entityIdChanged(ev): void {
this._error = undefined;
this._entityId = ev.detail.value;
this._entityId = ev.target.value;
}

private _deviceClassChanged(ev): void {
Expand Down Expand Up @@ -423,6 +423,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
ha-switch {
margin-right: 16px;
}
ha-textfield {
display: block;
margin: 8px 0;
}
.row {
margin: 8px 0;
color: var(--primary-text-color);
Expand Down
46 changes: 27 additions & 19 deletions src/panels/config/helpers/forms/ha-input_number-form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
Expand Down Expand Up @@ -73,10 +73,10 @@ class HaInputNumberForm extends LitElement {

return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
Expand All @@ -85,7 +85,7 @@ class HaInputNumberForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
Expand All @@ -94,24 +94,24 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-picker>
<paper-input
<ha-textfield
.value=${this._min}
.configValue=${"min"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.min"
)}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${this._max}
.configValue=${"max"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.max"
)}
></paper-input>
></ha-textfield>
${this.hass.userData?.showAdvanced
? html`
<div class="layout horizontal center justified">
Expand Down Expand Up @@ -143,24 +143,24 @@ class HaInputNumberForm extends LitElement {
></ha-radio>
</ha-formfield>
</div>
<paper-input
<ha-textfield
.value=${this._step}
.configValue=${"step"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.step"
)}
></paper-input>
></ha-textfield>

<paper-input
.value=${this._unit_of_measurement}
<ha-textfield
.value=${this._unit_of_measurement || ""}
.configValue=${"unit_of_measurement"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.unit_of_measurement"
)}
></paper-input>
></ha-textfield>
`
: ""}
</div>
Expand All @@ -181,15 +181,18 @@ class HaInputNumberForm extends LitElement {
const target = ev.target as any;
const configValue = target.configValue;
const value =
target.type === "number" ? Number(ev.detail.value) : ev.detail.value;
target.type === "number"
? Number(target.value)
: ev.detail.value || target.value;
Comment thread
bramkragten marked this conversation as resolved.
Outdated

if (this[`_${configValue}`] === value) {
return;
}
const newValue = { ...this._item };
if (value === undefined || value === "") {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
Expand All @@ -203,6 +206,11 @@ class HaInputNumberForm extends LitElement {
.form {
color: var(--primary-text-color);
}

ha-textfield {
display: block;
margin-bottom: 8px;
}
`,
];
}
Expand Down
Loading