diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts index e5056aa16b..0e663e5daa 100644 --- a/src/panels/developer-tools/service/developer-tools-service.ts +++ b/src/panels/developer-tools/service/developer-tools-service.ts @@ -4,7 +4,6 @@ import { CSSResultArray, html, LitElement, - internalProperty, property, query, } from "lit-element"; @@ -33,8 +32,6 @@ class HaPanelDevService extends LitElement { @property() public narrow!: boolean; - @internalProperty() private _error?: string; - @LocalStorage("panel-dev-service-state-service-data", true) private _serviceData?: ServiceAction = { service: "", target: {}, data: {} }; @@ -79,7 +76,7 @@ class HaPanelDevService extends LitElement { this._serviceData?.service ); - const isValid = this._isValid(this._serviceData, fields, target); + const { isValid, error } = this._isValid(this._serviceData, fields, target); return html`
@@ -108,7 +105,7 @@ class HaPanelDevService extends LitElement { @value-changed=${this._serviceDataChanged} >
`} - ${this._error ? html`

Error: ${this._error}

` : ""} + ${error ? html`

Error: ${error}

` : ""}
@@ -195,23 +192,20 @@ class HaPanelDevService extends LitElement { fields.filter((field) => !field.selector) ); - private _isValid = memoizeOne((serviceData, fields, target): boolean => { + private _isValid = memoizeOne((serviceData, fields, target): { + isValid: boolean; + error?: string; + } => { if (!serviceData?.service) { - return false; + return { isValid: false }; } - if (hasTemplate(this._serviceData!)) { - this._error = this.hass.localize( - "ui.panel.developer-tools.tabs.services.no_templates" - ); - return false; - } - this._error = undefined; - const domain = computeDomain(serviceData.service); const service = computeObjectId(serviceData.service); if (!domain || !service) { - return false; + return { + isValid: false, + }; } if ( target && @@ -220,17 +214,27 @@ class HaPanelDevService extends LitElement { !serviceData.data?.device_id && !serviceData.data?.area_id ) { - return false; + return { isValid: false }; } for (const field of fields) { if ( field.required && (!serviceData.data || serviceData.data[field.key] === undefined) ) { - return false; + return { isValid: false }; } } - return true; + + if (hasTemplate(this._serviceData!)) { + return { + isValid: false, + error: this.hass.localize( + "ui.panel.developer-tools.tabs.services.no_templates" + ), + }; + } + + return { isValid: true }; }); private _fields = memoizeOne(