Move delete button to its own card

home-assistant · Mar 10, 2020 · c9b2bf3 · c9b2bf3
1 parent cdfc0c0
commit c9b2bf3
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 40 deletions.
diff --git a/src/panels/config/devices/device-detail/ha-device-card-mqtt.ts b/src/panels/config/devices/device-detail/ha-device-card-mqtt.ts
@@ -0,0 +1,68 @@
+import { DeviceRegistryEntry } from "../../../../data/device_registry";
+import { removeMQTTDeviceEntry } from "../../../../data/mqtt";
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  TemplateResult,
+  CSSResult,
+  css,
+} from "lit-element";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../../../types";
+import { AreaRegistryEntry } from "../../../../data/area_registry";
+
+@customElement("ha-device-card-mqtt")
+export class HaDeviceCardMqtt extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public device!: DeviceRegistryEntry;
+  @property() public devices!: DeviceRegistryEntry[];
+  @property() public areas!: AreaRegistryEntry[];
+  @property() public narrow!: boolean;
+  @property() public domains!: string[];
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="info">
+        <div class="buttons">
+          <mwc-button class="warning" @click="${this._confirmDeleteEntry}">
+            ${this.hass.localize("ui.panel.config.devices.delete")}
+          </mwc-button>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+  }
+
+  private async _deleteEntry(): Promise<void> {
+    await removeMQTTDeviceEntry(this.hass!, this.device.id);
+  }
+
+  private _confirmDeleteEntry(): void {
+    showConfirmationDialog(this, {
+      text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+      confirm: () => this._deleteEntry(),
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-card {
+        flex: 1 0 100%;
+        padding-bottom: 10px;
+        min-width: 0;
+      }
+      .device {
+        width: 30%;
+      }
+      mwc-button.warning {
+        margin-right: auto;
+        --mdc-theme-primary: var(--google-red-500);
+      }
+    `;
+  }
+}
diff --git a/src/panels/config/devices/device-detail/ha-device-card.ts b/src/panels/config/devices/device-detail/ha-device-card.ts
@@ -2,7 +2,6 @@ import {
   DeviceRegistryEntry,
   computeDeviceName,
 } from "../../../../data/device_registry";
-import { removeMQTTDeviceEntry } from "../../../../data/mqtt";
 import { loadDeviceRegistryDetailDialog } from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
 import {
   LitElement,
@@ -13,7 +12,6 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../../types";
 import { AreaRegistryEntry } from "../../../../data/area_registry";
 
@@ -24,7 +22,6 @@ export class HaDeviceCard extends LitElement {
   @property() public devices!: DeviceRegistryEntry[];
   @property() public areas!: AreaRegistryEntry[];
   @property() public narrow!: boolean;
-  @property() public domains!: string[];
 
   protected render(): TemplateResult {
     return html`
@@ -84,18 +81,6 @@ export class HaDeviceCard extends LitElement {
               </div>
             `
           : ""}
-        ${this.domains.includes("mqtt")
-          ? html`
-              <div class="buttons">
-                <mwc-button
-                  class="warning"
-                  @click="${this._confirmDeleteEntry}"
-                >
-                  ${this.hass.localize("ui.panel.config.devices.delete")}
-                </mwc-button>
-              </div>
-            `
-          : ""}
       </div>
     `;
   }
@@ -122,17 +107,6 @@ export class HaDeviceCard extends LitElement {
         )})`;
   }
 
-  private async _deleteEntry(): Promise<void> {
-    await removeMQTTDeviceEntry(this.hass!, this.device.id);
-  }
-
-  private _confirmDeleteEntry(): void {
-    showConfirmationDialog(this, {
-      text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
-      confirm: () => this._deleteEntry(),
-    });
-  }
-
   static get styles(): CSSResult {
     return css`
       ha-card {
@@ -154,10 +128,6 @@ export class HaDeviceCard extends LitElement {
       .model {
         color: var(--secondary-text-color);
       }
-      mwc-button.warning {
-        margin-right: auto;
-        --mdc-theme-primary: var(--google-red-500);
-      }
     `;
   }
 }
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
@@ -16,6 +16,7 @@ import "../../../layouts/hass-error-screen";
 import "../ha-config-section";
 
 import "./device-detail/ha-device-card";
+import "./device-detail/ha-device-card-mqtt";
 import "./device-detail/ha-device-entities-card";
 import { HomeAssistant, Route } from "../../../types";
 import { ConfigEntry } from "../../../data/config_entries";
@@ -69,7 +70,7 @@ export class HaConfigDevicePage extends LitElement {
       devices ? devices.find((device) => device.id === deviceId) : undefined
   );
 
-  private _domains = memoizeOne(
+  private _integrations = memoizeOne(
     (device: DeviceRegistryEntry, entries: ConfigEntry[]): string[] =>
       entries
         .filter((entry) => device.config_entries.includes(entry.entry_id))
@@ -119,7 +120,7 @@ export class HaConfigDevicePage extends LitElement {
       `;
     }
 
-    const domains = this._domains(device, this.entries);
+    const integrations = this._integrations(device, this.entries);
     const entities = this._entities(this.deviceId, this.entities);
 
     return html`
@@ -158,8 +159,19 @@ export class HaConfigDevicePage extends LitElement {
                 .areas=${this.areas}
                 .devices=${this.devices}
                 .device=${device}
-                .domains=${domains}
               ></ha-device-card>
+              ${
+                integrations.includes("mqtt")
+                  ? html`
+                      <ha-device-card-mqtt
+                        .hass=${this.hass}
+                        .areas=${this.areas}
+                        .devices=${this.devices}
+                        .device=${device}
+                      ></ha-device-card-mqtt>
+                    `
+                  : html``
+              }
             </div>
 
             ${

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -652,9 +652,9 @@
           "enabled_label": "Enable entity",
           "enabled_cause": "Disabled by {cause}.",
           "enabled_description": "Disabled entities will not be added to Home Assistant.",
-          "delete": "DELETE",
+          "delete": "Delete",
           "confirm_delete": "Are you sure you want to delete this entry?",
-          "update": "UPDATE",
+          "update": "Update",
           "note": "Note: this might not work yet with all integrations."
         }
       },
@@ -789,13 +789,13 @@
             "introduction2": "To place devices in an area, use the link below to navigate to the integrations page and then click on a configured integration to get to the device cards.",
             "integrations_page": "Integrations page",
             "no_areas": "Looks like you have no areas yet!",
-            "create_area": "CREATE AREA"
+            "create_area": "Create Area"
           },
           "editor": {
             "default_name": "New Area",
-            "delete": "DELETE",
-            "update": "UPDATE",
-            "create": "CREATE"
+            "delete": "Delete",
+            "update": "Update",
+            "create": "Create"
           },
           "delete": {
             "confirmation_title": "Are you sure you want to delete this area?",
@@ -1481,7 +1481,7 @@
             "integration": "Integration",
             "battery": "Battery"
           },
-          "delete": "DELETE",
+          "delete": "Delete",
           "confirm_delete": "Are you sure you want to delete this device?"
         },
         "entities": {