Sortable energy individual devices (#23330)

* Sortable energy individual devices

* change key fn

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -1,12 +1,15 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-state-icon";
+import "../../../../components/ha-sortable";
+import "../../../../components/ha-svg-icon";
 import type {
   DeviceConsumptionEnergyPreference,
   EnergyPreferences,
@@ -79,36 +82,44 @@ export class EnergyDeviceSettings extends LitElement {
               "ui.panel.config.energy.device_consumption.devices"
             )}
           </h3>
-          ${this.preferences.device_consumption.map((device) => {
-            const entityState = this.hass.states[device.stat_consumption];
-            return html`
-              <div class="row" .device=${device}>
-                <ha-state-icon
-                  .hass=${this.hass}
-                  .stateObj=${entityState}
-                ></ha-state-icon>
-                <span class="content"
-                  >${device.name ||
-                  getStatisticLabel(
-                    this.hass,
-                    device.stat_consumption,
-                    this.statsMetadata?.[device.stat_consumption]
-                  )}</span
-                >
-                <ha-icon-button
-                  .label=${this.hass.localize("ui.common.edit")}
-                  @click=${this._editDevice}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize("ui.common.delete")}
-                  @click=${this._deleteDevice}
-                  .device=${device}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
+          <ha-sortable handle-selector=".row" @item-moved=${this._itemMoved}>
+            <div class="devices">
+              ${repeat(
+                this.preferences.device_consumption,
+                (device) => device.stat_consumption,
+                (device) => {
+                  const entityState = this.hass.states[device.stat_consumption];
+                  return html`
+                    <div class="row" .device=${device}>
+                      <ha-state-icon
+                        .hass=${this.hass}
+                        .stateObj=${entityState}
+                      ></ha-state-icon>
+                      <span class="content"
+                        >${device.name ||
+                        getStatisticLabel(
+                          this.hass,
+                          device.stat_consumption,
+                          this.statsMetadata?.[device.stat_consumption]
+                        )}</span
+                      >
+                      <ha-icon-button
+                        .label=${this.hass.localize("ui.common.edit")}
+                        @click=${this._editDevice}
+                        .path=${mdiPencil}
+                      ></ha-icon-button>
+                      <ha-icon-button
+                        .label=${this.hass.localize("ui.common.delete")}
+                        @click=${this._deleteDevice}
+                        .device=${device}
+                        .path=${mdiDelete}
+                      ></ha-icon-button>
+                    </div>
+                  `;
+                }
+              )}
+            </div>
+          </ha-sortable>
           <div class="row">
             <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
             <mwc-button @click=${this._addDevice}
@@ -122,6 +133,21 @@ export class EnergyDeviceSettings extends LitElement {
     `;
   }
 
+  private _itemMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const devices = this.preferences.device_consumption.concat();
+    const device = devices.splice(oldIndex, 1)[0];
+    devices.splice(newIndex, 0, device);
+
+    const newPrefs = {
+      ...this.preferences,
+      device_consumption: devices,
+    };
+    fireEvent(this, "value-changed", { value: newPrefs });
+    this._savePreferences(newPrefs);
+  }
+
   private _editDevice(ev) {
     const origDevice: DeviceConsumptionEnergyPreference =
       ev.currentTarget.closest(".row").device;
@@ -184,7 +210,16 @@ export class EnergyDeviceSettings extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, energyCardStyles];
+    return [
+      haStyle,
+      energyCardStyles,
+      css`
+        .row {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+        }
+      `,
+    ];
   }
 }