Add move card to position on dashboard editor (#17077)

* Add move card to position on dashboard editor

* Feedbacks

src/panels/lovelace/components/hui-card-options.ts

@@ -2,28 +2,37 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import deepClone from "deep-clone-simple";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, queryAssignedNodes } from "lit/decorators";
-import deepClone from "deep-clone-simple";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
-import { saveConfig, LovelaceCardConfig } from "../../../data/lovelace";
+import { LovelaceCardConfig, saveConfig } from "../../../data/lovelace";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showPromptDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 import { computeCardSize } from "../common/compute-card-size";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { addCard, deleteCard, moveCard, swapCard } from "../editor/config-util";
+import {
+  addCard,
+  deleteCard,
+  moveCard,
+  moveCardToPosition,
+  swapCard,
+} from "../editor/config-util";
 import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
 import { Lovelace, LovelaceCard } from "../types";
 
@@ -35,10 +44,10 @@ export class HuiCardOptions extends LitElement {
 
   @property() public path?: [number, number];
 
-  @property({ type: Boolean }) public showPosition = false;
-
   @queryAssignedNodes() private _assignedNodes?: NodeListOf<LovelaceCard>;
 
+  @property({ type: Boolean }) public showPosition = false;
+
   @storage({
     key: "lovelaceClipboard",
     state: false,
@@ -85,20 +94,14 @@ export class HuiCardOptions extends LitElement {
               this.path![1] + 1}
             ></ha-icon-button>
             ${this.showPosition
-              ? html`<div class="position-badge">
+              ? html`<ha-icon-button
-                  ${this.path![1] + 1}
+                  @click=${this._changeCardPosition}
-                  <simple-tooltip
+                  .label=${this.hass!.localize(
-                    >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.change_position"
-                      "ui.panel.lovelace.editor.edit_card.position",
+                  )}
-                      "position",
-                      `${this.path![1] + 1}`,
-                      "total",
-                      `${
-                        this.lovelace!.config.views[this.path![0]].cards!.length
-                      }`
-                    )}</simple-tooltip
                 >
-                </div>`
+                  <div class="position-badge">${this.path![1] + 1}</div>
+                </ha-icon-button>`
               : nothing}
             <ha-icon-button
               .label=${this.hass!.localize(
@@ -180,13 +183,14 @@ export class HuiCardOptions extends LitElement {
       }
 
       .position-badge {
-        display: inline-block;
+        display: block;
         width: 24px;
         line-height: 24px;
         box-sizing: border-box;
         border-radius: 50%;
-        font-weight: 400;
+        font-weight: 500;
         text-align: center;
+        font-size: 14px;
         background-color: var(--app-header-edit-background-color, #455a64);
         color: var(--app-header-edit-text-color, white);
       }
@@ -272,6 +276,30 @@ export class HuiCardOptions extends LitElement {
     );
   }
 
+  private async _changeCardPosition(): Promise<void> {
+    const lovelace = this.lovelace!;
+    const path = this.path!;
+
+    const positionString = await showPromptDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.lovelace.editor.change_position.title"
+      ),
+      text: this.hass!.localize(
+        "ui.panel.lovelace.editor.change_position.text"
+      ),
+      inputType: "number",
+      placeholder: String(path[1] + 1),
+    });
+
+    if (!positionString) return;
+
+    const position = parseInt(positionString);
+
+    if (isNaN(position)) return;
+
+    lovelace.saveConfig(moveCardToPosition(lovelace.config, path, position));
+  }
+
   private _moveCard(): void {
     showSelectViewDialog(this, {
       lovelaceConfig: this.lovelace!.config,

src/panels/lovelace/editor/config-util.ts

@@ -185,6 +185,35 @@ export const swapCard = (
   };
 };
 
+export const moveCardToPosition = (
+  config: LovelaceConfig,
+  path: [number, number],
+  position: number
+) => {
+  const view = config.views[path[0]];
+
+  const oldIndex = path[1];
+  const newIndex = Math.max(Math.min(position - 1, view.cards!.length - 1), 0);
+
+  const newCards = [...view.cards!];
+
+  const card = newCards[oldIndex];
+  newCards.splice(oldIndex, 1);
+  newCards.splice(newIndex, 0, card);
+
+  const newView = {
+    ...view,
+    cards: newCards,
+  };
+
+  return {
+    ...config,
+    views: config.views.map((origView, index) =>
+      index === path[0] ? newView : origView
+    ),
+  };
+};
+
 export const moveCard = (
   config: LovelaceConfig,
   fromPath: [number, number],

src/translations/en.json

@@ -4479,13 +4479,17 @@
             "move_down": "Move card down",
             "move_before": "Move card before",
             "move_after": "Move card after",
-            "position": "Card is in position {position} of {total}",
+            "change_position": "Change card position",
             "options": "More options",
             "search_cards": "Search cards"
           },
           "move_card": {
             "header": "Choose a view to move the card to"
           },
+          "change_position": {
+            "title": "Change card position",
+            "text": "What position do you want to move your card to?"
+          },
           "select_view": {
             "header": "Choose a view",
             "dashboard_label": "Dashboard",