Make picture elements editor sortable (#51563)

* Make picture elements editor sortable

* Update src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Update src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

Author: karwosts

src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts

@@ -1,6 +1,7 @@
 import {
   mdiClose,
   mdiContentDuplicate,
+  mdiDragHorizontalVariant,
   mdiPencil,
   mdiPlaylistPlus,
 } from "@mdi/js";
@@ -13,6 +14,7 @@ import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
@@ -64,49 +66,61 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
         )}
       </h3>
       <div class="elements">
-        ${this.elements.map(
-          (element, index) => html`
-            <div class="element">
-              ${element.type
-                ? html`
-                    <div class="element-row">
-                      <div>
-                        <span>
-                          ${this.hass?.localize(
-                            `ui.panel.lovelace.editor.card.picture-elements.element_types.${element.type}`
-                          ) || element.type}
-                        </span>
-                        <span class="secondary"
-                          >${this._getSecondaryDescription(element)}</span
-                        >
-                      </div>
-                    </div>
-                  `
-                : nothing}
-              <ha-icon-button
-                .label=${this.hass!.localize("ui.common.delete")}
-                .path=${mdiClose}
-                class="remove-icon"
-                .index=${index}
-                @click=${this._removeRow}
-              ></ha-icon-button>
-              <ha-icon-button
-                .label=${this.hass!.localize("ui.common.edit")}
-                .path=${mdiPencil}
-                class="edit-icon"
-                .index=${index}
-                @click=${this._editRow}
-              ></ha-icon-button>
-              <ha-icon-button
-                .label=${this.hass!.localize("ui.common.duplicate")}
-                .path=${mdiContentDuplicate}
-                class="duplicate-icon"
-                .index=${index}
-                @click=${this._duplicateRow}
-              ></ha-icon-button>
-            </div>
-          `
-        )}
+        <ha-sortable
+          handle-selector=".handle"
+          @item-moved=${this._elementMoved}
+        >
+          <div>
+            ${this.elements.map(
+              (element, index) => html`
+                <div class="element">
+                  <div class="handle">
+                    <ha-svg-icon
+                      .path=${mdiDragHorizontalVariant}
+                    ></ha-svg-icon>
+                  </div>
+                  ${element.type
+                    ? html`
+                        <div class="element-row">
+                          <div>
+                            <span>
+                              ${this.hass?.localize(
+                                `ui.panel.lovelace.editor.card.picture-elements.element_types.${element.type}`
+                              ) || element.type}
+                            </span>
+                            <span class="secondary"
+                              >${this._getSecondaryDescription(element)}</span
+                            >
+                          </div>
+                        </div>
+                      `
+                    : nothing}
+                  <ha-icon-button
+                    .label=${this.hass!.localize("ui.common.delete")}
+                    .path=${mdiClose}
+                    class="remove-icon"
+                    .index=${index}
+                    @click=${this._removeRow}
+                  ></ha-icon-button>
+                  <ha-icon-button
+                    .label=${this.hass!.localize("ui.common.edit")}
+                    .path=${mdiPencil}
+                    class="edit-icon"
+                    .index=${index}
+                    @click=${this._editRow}
+                  ></ha-icon-button>
+                  <ha-icon-button
+                    .label=${this.hass!.localize("ui.common.duplicate")}
+                    .path=${mdiContentDuplicate}
+                    class="duplicate-icon"
+                    .index=${index}
+                    @click=${this._duplicateRow}
+                  ></ha-icon-button>
+                </div>
+              `
+            )}
+          </div>
+        </ha-sortable>
         <ha-dropdown @wa-select=${this._addElement}>
           <ha-button size="small" slot="trigger" appearance="filled">
             <ha-svg-icon slot="start" .path=${mdiPlaylistPlus}></ha-svg-icon>
@@ -193,6 +207,17 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
     fireEvent(this, "elements-changed", { elements: newElements });
   }
 
+  private _elementMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+
+    const newElements = this.elements!.concat();
+
+    newElements.splice(newIndex, 0, newElements.splice(oldIndex, 1)[0]);
+
+    fireEvent(this, "elements-changed", { elements: newElements });
+  }
+
   private _removeRow(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
     const element = this.elements?.[index];
@@ -242,6 +267,17 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
       display: flex;
       align-items: center;
     }
+    .handle {
+      padding-right: var(--ha-space-2);
+      cursor: move;
+      cursor: grab;
+      padding-inline-end: var(--ha-space-2);
+      padding-inline-start: initial;
+      direction: var(--direction);
+    }
+    .handle > * {
+      pointer-events: none;
+    }
 
     .element-row {
       height: 60px;