Add reorder option to entity selector (#26217)

src/components/entity/ha-entities-picker.ts

@@ -1,9 +1,11 @@
+import { mdiDrag } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-sortable";
 import "./ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
 
@@ -76,6 +78,9 @@ class HaEntitiesPicker extends LitElement {
 
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 
+  @property({ type: Boolean })
+  public reorder = false;
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -84,9 +89,15 @@ class HaEntitiesPicker extends LitElement {
     const currentEntities = this._currentEntities;
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <ha-sortable
+        .disabled=${!this.reorder || this.disabled}
+        handle-selector=".entity-handle"
+        @item-moved=${this._entityMoved}
+      >
+        <div class="list">
           ${currentEntities.map(
             (entityId) => html`
-          <div>
+              <div class="entity">
                 <ha-entity-picker
                   allow-custom-entity
                   .curValue=${entityId}
@@ -103,9 +114,19 @@ class HaEntitiesPicker extends LitElement {
                   .createDomains=${this.createDomains}
                   @value-changed=${this._entityChanged}
                 ></ha-entity-picker>
+                ${this.reorder
+                  ? html`
+                      <ha-svg-icon
+                        class="entity-handle"
+                        .path=${mdiDrag}
+                      ></ha-svg-icon>
+                    `
+                  : nothing}
               </div>
             `
           )}
+        </div>
+      </ha-sortable>
       <div>
         <ha-entity-picker
           allow-custom-entity
@@ -131,6 +152,17 @@ class HaEntitiesPicker extends LitElement {
     `;
   }
 
+  private _entityMoved(e: CustomEvent) {
+    e.stopPropagation();
+    const { oldIndex, newIndex } = e.detail;
+    const currentEntities = this._currentEntities;
+    const movedEntity = currentEntities[oldIndex];
+    const newEntities = [...currentEntities];
+    newEntities.splice(oldIndex, 1);
+    newEntities.splice(newIndex, 0, movedEntity);
+    this._updateEntities(newEntities);
+  }
+
   private _excludeEntities = memoizeOne(
     (
       value: string[] | undefined,
@@ -201,6 +233,19 @@ class HaEntitiesPicker extends LitElement {
       display: block;
       margin: 0 0 8px;
     }
+    .entity {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .entity ha-entity-picker {
+      flex: 1;
+    }
+    .entity-handle {
+      padding: 8px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
   `;
 }
 

src/components/ha-selector/ha-selector-entity.ts

@@ -83,6 +83,7 @@ export class HaEntitySelector extends LitElement {
         .helper=${this.helper}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
+        .reorder=${this.selector.entity.reorder ?? false}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
         .disabled=${this.disabled}

src/data/selector.ts

@@ -226,6 +226,7 @@ export interface EntitySelector {
     include_entities?: string[];
     exclude_entities?: string[];
     filter?: EntitySelectorFilter | readonly EntitySelectorFilter[];
+    reorder?: boolean;
   } | null;
 }