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,7 +82,12 @@ export class EnergyDeviceSettings extends LitElement {
               "ui.panel.config.energy.device_consumption.devices"
             )}
           </h3>
-          ${this.preferences.device_consumption.map((device) => {
+          <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}>
@@ -108,7 +116,10 @@ export class EnergyDeviceSettings extends LitElement {
                       ></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;
+        }
+      `,
+    ];
   }
 }