Force rerender on update/save (#4396)

* Force rerender on update/save

* Fix linting issue

* Define properties by using @property() instead

* Add styles to disabled save button

* Change to use @customElement, and remove _generation as a property.
This commit is contained in:
Joakim Sørensen 2020-01-02 21:15:26 +01:00 committed by Bram Kragten
parent f0808c1f54
commit 70b81de49d

View File

@ -1,4 +1,12 @@
import { LitElement, html, TemplateResult, CSSResult, css } from "lit-element"; import {
customElement,
LitElement,
html,
TemplateResult,
CSSResult,
css,
property,
} from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import { safeDump, safeLoad } from "js-yaml"; import { safeDump, safeLoad } from "js-yaml";
@ -27,23 +35,15 @@ const lovelaceStruct = struct.interface({
resources: struct.optional(["object"]), resources: struct.optional(["object"]),
}); });
@customElement("hui-editor")
class LovelaceFullConfigEditor extends LitElement { class LovelaceFullConfigEditor extends LitElement {
public hass!: HomeAssistant; @property() public hass!: HomeAssistant;
public lovelace?: Lovelace; @property() public lovelace?: Lovelace;
public closeEditor?: () => void; @property() public closeEditor?: () => void;
private _saving?: boolean; @property() private _saving?: boolean;
private _changed?: boolean; @property() private _changed?: boolean;
private _generation = 1;
static get properties() { private _generation = 1;
return {
hass: {},
lovelace: {},
closeEditor: {},
_saving: {},
_changed: {},
};
}
public render(): TemplateResult | void { public render(): TemplateResult | void {
return html` return html`
@ -73,7 +73,10 @@ class LovelaceFullConfigEditor extends LitElement {
"ui.panel.lovelace.editor.raw_editor.saved" "ui.panel.lovelace.editor.raw_editor.saved"
)} )}
</div> </div>
<mwc-button raised @click="${this._handleSave}" <mwc-button
raised
@click="${this._handleSave}"
.disabled=${!this._changed}
>${this.hass!.localize( >${this.hass!.localize(
"ui.panel.lovelace.editor.raw_editor.save" "ui.panel.lovelace.editor.raw_editor.save"
)}</mwc-button )}</mwc-button
@ -116,6 +119,11 @@ class LovelaceFullConfigEditor extends LitElement {
color: var(--dark-text-color); color: var(--dark-text-color);
} }
mwc-button[disabled] {
background-color: var(--mdc-theme-on-primary);
border-radius: 4px;
}
.comments { .comments {
font-size: 16px; font-size: 16px;
} }
@ -242,5 +250,3 @@ declare global {
"hui-editor": LovelaceFullConfigEditor; "hui-editor": LovelaceFullConfigEditor;
} }
} }
customElements.define("hui-editor", LovelaceFullConfigEditor);