Add delete button to MQTT devices' config page #5117
Conversation
src/translations/en.json
Outdated
| @@ -1480,7 +1480,9 @@ | |||
| "area": "Area", | |||
| "integration": "Integration", | |||
| "battery": "Battery" | |||
| } | |||
| }, | |||
| "delete": "DELETE", | |||
There was a problem hiding this comment.
Keeps this lowercase, the styling will make it uppercase
There was a problem hiding this comment.
Fixed.
I also changed some other button labels to lowercase.
| @@ -81,6 +84,18 @@ export class HaDeviceCard extends LitElement { | |||
| </div> | |||
| ` | |||
| : ""} | |||
| ${this.domains.includes("mqtt") | |||
There was a problem hiding this comment.
Let's not add this in ha-device-card but instead, make a separate card specific for mqtt options.
|
|
||
| static get styles(): CSSResult { | ||
| return css` | ||
| ha-card { |
There was a problem hiding this comment.
There is no ha-card in this element
| padding-bottom: 10px; | ||
| min-width: 0; | ||
| } | ||
| .device { |
There was a problem hiding this comment.
There is no element with the class device
| <div class="info"> | ||
| <div class="buttons"> |
There was a problem hiding this comment.
These classes are not defined, so probably the div is not needed.
| @property() public devices!: DeviceRegistryEntry[]; | ||
| @property() public areas!: AreaRegistryEntry[]; | ||
| @property() public narrow!: boolean; | ||
| @property() public domains!: string[]; |
| .areas=${this.areas} | ||
| .devices=${this.devices} |
emontnemery
force-pushed
the
mqtt_delete_device
branch
from
c9b2bf3
to
5bb60e8
Compare
| protected firstUpdated(changedProps) { | ||
| super.firstUpdated(changedProps); | ||
| } | ||
|
|
There was a problem hiding this comment.
Not used, can be removed.
| protected firstUpdated(changedProps) { | |
| super.firstUpdated(changedProps); | |
| } |
| private _confirmDeleteEntry(): void { | ||
| showConfirmationDialog(this, { | ||
| text: this.hass.localize("ui.panel.config.devices.confirm_delete"), | ||
| confirm: () => this._deleteEntry(), | ||
| }); | ||
| } |
There was a problem hiding this comment.
showConfirmationDialog returns a promise that resolves to true if user confirmed. So you can do something like
const confirmed = await showConfirmationDialog(…)
if (!confirmed) { return; }
await removeMQTTDeviceEntry(this.hass!, this.device.id);
| static get styles(): CSSResult { | ||
| return css` | ||
| mwc-button.warning { | ||
| margin-right: auto; |
There was a problem hiding this comment.
That seems weird to add here. Why is that ?
Also the coloring is already available in haStyle or something, I think ?
There was a problem hiding this comment.
I stole it from here:
frontend/src/panels/config/entities/entity-registry-settings.ts
Lines 242 to 245 in 5bb60e8
Do you mean to use this instead:
frontend/src/resources/ha-style.ts
Line 36 in 5bb60e8
There was a problem hiding this comment.
There was a problem hiding this comment.
The margin-right: auto is to pull the secondary button to the left in a dialog normally
There was a problem hiding this comment.
Thanks! Fixed now.
emontnemery
force-pushed
the
mqtt_delete_device
branch
from
bf282c6
to
ac82306
Compare
Proposed change
Add delete button to MQTT devices' config page
Type of change
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: