Use Sortable to move entities in entities editor

package.json

@@ -79,6 +79,7 @@
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.5.0",
     "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@vue/web-component-wrapper": "^1.2.0",

src/components/ha-sidebar.ts

@@ -23,7 +23,6 @@ import {
   LitElement,
   property,
   PropertyValues,
-  TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { guard } from "lit-html/directives/guard";
@@ -160,7 +159,7 @@ const computePanels = memoizeOne(
 
 let Sortable;
 
-let sortStyles: TemplateResult;
+let sortStyles: CSSResult;
 
 @customElement("ha-sidebar")
 class HaSidebar extends LitElement {
@@ -228,7 +227,13 @@ class HaSidebar extends LitElement {
     }
 
     return html`
-      ${this._editMode ? sortStyles : ""}
+      ${this._editMode
+        ? html`
+            <style>
+              ${sortStyles?.cssText}
+            </style>
+          `
+        : ""}
       <div class="menu">
         ${!this.narrow
           ? html`
@@ -480,10 +485,10 @@ class HaSidebar extends LitElement {
     if (!Sortable) {
       const [sortableImport, sortStylesImport] = await Promise.all([
         import("sortablejs/modular/sortable.core.esm"),
-        import("./ha-sidebar-sort-styles"),
+        import("../resources/ha-sortable-style"),
       ]);
 
-      sortStyles = sortStylesImport.sortStyles;
+      sortStyles = sortStylesImport.sortableStyles;
 
       Sortable = sortableImport.Sortable;
       Sortable.mount(sortableImport.OnSpill);

src/panels/lovelace/components/hui-entity-editor.ts

@@ -1,27 +1,51 @@
-import "../../../components/ha-icon-button";
+import { mdiDrag } from "@mdi/js";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
+  PropertyValues,
   TemplateResult,
 } from "lit-element";
+import { guard } from "lit-html/directives/guard";
+import type { SortableEvent } from "sortablejs";
+import Sortable, {
+  AutoScroll,
+  OnSpill,
+} from "sortablejs/modular/sortable.core.esm";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
+import "../../../components/ha-icon-button";
+import { sortableStyles } from "../../../resources/ha-sortable-style";
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
 import { EntityConfig } from "../entity-rows/types";
 
 @customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {
-  @property() protected hass?: HomeAssistant;
+  @property({ attribute: false }) protected hass?: HomeAssistant;
 
-  @property() protected entities?: EntityConfig[];
+  @property({ attribute: false }) protected entities?: EntityConfig[];
 
   @property() protected label?: string;
 
+  @internalProperty() private _attached = false;
+
+  private _sortable?;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._attached = true;
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._attached = false;
+  }
+
   protected render(): TemplateResult {
     if (!this.entities) {
       return html``;
@@ -36,42 +60,73 @@ export class HuiEntityEditor extends LitElement {
           ")"}
       </h3>
       <div class="entities">
-        ${this.entities.map((entityConf, index) => {
-          return html`
-            <div class="entity">
-              <ha-entity-picker
-                .hass=${this.hass}
-                .value="${entityConf.entity}"
-                .index="${index}"
-                @change="${this._valueChanged}"
-                allow-custom-entity
-              ></ha-entity-picker>
-              <ha-icon-button
-                title="Move entity down"
-                icon="hass:arrow-down"
-                .index="${index}"
-                @click="${this._entityDown}"
-                ?disabled="${index === this.entities!.length - 1}"
-              ></ha-icon-button>
-              <ha-icon-button
-                title="Move entity up"
-                icon="hass:arrow-up"
-                .index="${index}"
-                @click="${this._entityUp}"
-                ?disabled="${index === 0}"
-              ></ha-icon-button>
-            </div>
-          `;
-        })}
-        <ha-entity-picker
-          .hass=${this.hass}
-          @change="${this._addEntity}"
-        ></ha-entity-picker>
+        ${guard([this.entities], () =>
+          this.entities!.map((entityConf, index) => {
+            return html`
+              <div class="entity" data-entity-id=${entityConf.entity}>
+                <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                <ha-entity-picker
+                  .hass=${this.hass}
+                  .value=${entityConf.entity}
+                  .index=${index}
+                  @change=${this._valueChanged}
+                  allow-custom-entity
+                ></ha-entity-picker>
+              </div>
+            `;
+          })
+        )}
       </div>
+      <ha-entity-picker
+        .hass=${this.hass}
+        @change=${this._addEntity}
+      ></ha-entity-picker>
     `;
   }
 
-  private _addEntity(ev: Event): void {
+  protected firstUpdated(): void {
+    Sortable.mount(OnSpill);
+    Sortable.mount(new AutoScroll());
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+
+    const attachedChanged = changedProps.has("_attached");
+    const entitiesChanged = changedProps.has("entities");
+
+    if (!entitiesChanged && !attachedChanged) {
+      return;
+    }
+
+    if (attachedChanged && !this._attached) {
+      // Tear down sortable, if available
+      this._sortable?.destroy();
+      this._sortable = undefined;
+      return;
+    }
+
+    if (!this._sortable && this.entities) {
+      this._createSortable();
+      return;
+    }
+
+    if (entitiesChanged) {
+      this._sortable.sort(this.entities?.map((entity) => entity.entity));
+    }
+  }
+
+  private _createSortable() {
+    this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
+      animation: 150,
+      fallbackClass: "sortable-fallback",
+      handle: "ha-svg-icon",
+      dataIdAttr: "data-entity-id",
+      onEnd: async (evt: SortableEvent) => this._entityMoved(evt),
+    });
+  }
+
+  private async _addEntity(ev: Event): Promise<void> {
     const target = ev.target! as EditorTarget;
     if (target.value === "") {
       return;
@@ -83,26 +138,14 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  private _entityUp(ev: Event): void {
-    const target = ev.target! as EditorTarget;
-    const newEntities = this.entities!.concat();
-
-    [newEntities[target.index! - 1], newEntities[target.index!]] = [
-      newEntities[target.index!],
-      newEntities[target.index! - 1],
-    ];
-
-    fireEvent(this, "entities-changed", { entities: newEntities });
-  }
+  private _entityMoved(ev: SortableEvent): void {
+    if (ev.oldIndex === ev.newIndex) {
+      return;
+    }
 
-  private _entityDown(ev: Event): void {
-    const target = ev.target! as EditorTarget;
     const newEntities = this.entities!.concat();
 
-    [newEntities[target.index! + 1], newEntities[target.index!]] = [
-      newEntities[target.index!],
-      newEntities[target.index! + 1],
-    ];
+    newEntities.splice(ev.newIndex!, 0, newEntities.splice(ev.oldIndex!, 1)[0]);
 
     fireEvent(this, "entities-changed", { entities: newEntities });
   }
@@ -123,16 +166,23 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  static get styles(): CSSResult {
-    return css`
-      .entity {
-        display: flex;
-        align-items: flex-end;
-      }
-      .entity ha-entity-picker {
-        flex-grow: 1;
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      sortableStyles,
+      css`
+        .entity {
+          display: flex;
+          align-items: center;
+        }
+        .entity ha-svg-icon {
+          padding-right: 8px;
+          cursor: move;
+        }
+        .entity ha-entity-picker {
+          flex-grow: 1;
+        }
+      `,
+    ];
   }
 }