Allow to move card from other view to section view (#22399)

* Allow to move card from other view to section view

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

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Move to dedicated section

* Feedbacks

* Update src/translations/en.json

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

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

@@ -28,7 +28,10 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import { saveConfig } from "../../../data/lovelace/config/types";
-import { isStrategyView } from "../../../data/lovelace/config/view";
+import {
+  isStrategyView,
+  type LovelaceViewConfig,
+} from "../../../data/lovelace/config/view";
 import {
   showAlertDialog,
   showPromptDialog,
@@ -40,12 +43,14 @@ import { computeCardSize } from "../common/compute-card-size";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
 import {
   addCard,
+  addSection,
   deleteCard,
   moveCardToContainer,
   moveCardToIndex,
 } from "../editor/config-util";
 import {
   LovelaceCardPath,
+  type LovelaceContainerPath,
   findLovelaceItems,
   getLovelaceContainerPath,
   parseLovelaceCardPath,
@@ -53,6 +58,7 @@ import {
 import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
 import { Lovelace, LovelaceCard } from "../types";
 import { SECTIONS_VIEW_LAYOUT } from "../views/const";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 
 @customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
@@ -353,34 +359,79 @@ export class HuiCardOptions extends LitElement {
       allowDashboardChange: true,
       header: this.hass!.localize("ui.panel.lovelace.editor.move_card.header"),
       viewSelectedCallback: async (urlPath, selectedDashConfig, viewIndex) => {
-        const view = selectedDashConfig.views[viewIndex];
+        const fromView = selectedDashConfig.views[this.path![0]];
+        let toView = selectedDashConfig.views[viewIndex];
+        let newConfig = selectedDashConfig;
 
-        if (!isStrategyView(view) && view.type === SECTIONS_VIEW_LAYOUT) {
+        if (isStrategyView(toView)) {
           showAlertDialog(this, {
             title: this.hass!.localize(
               "ui.panel.lovelace.editor.move_card.error_title"
             ),
             text: this.hass!.localize(
-              "ui.panel.lovelace.editor.move_card.error_text_section"
+              "ui.panel.lovelace.editor.move_card.error_text_strategy"
             ),
             warning: true,
           });
           return;
         }
 
+        const isSectionsView = toView.type === SECTIONS_VIEW_LAYOUT;
+
+        let toPath: LovelaceContainerPath = [viewIndex];
+
+        // If the view is a section view and has no "imported cards" section, adds a default section.
+        if (isSectionsView) {
+          const importedCardHeading = fromView.title
+            ? this.hass!.localize(
+                "ui.panel.lovelace.editor.section.imported_card_section_title_view",
+                { view_title: fromView.title }
+              )
+            : this.hass!.localize(
+                "ui.panel.lovelace.editor.section.imported_card_section_title_default"
+              );
+
+          let sectionIndex = toView.sections
+            ? toView.sections.findIndex(
+                (s) =>
+                  "cards" in s &&
+                  s.cards?.some(
+                    (c) =>
+                      c.type === "heading" && c.heading === importedCardHeading
+                  )
+              )
+            : -1;
+          if (sectionIndex === -1) {
+            const newSection: LovelaceSectionConfig = {
+              type: "grid",
+              cards: [
+                {
+                  type: "heading",
+                  heading: importedCardHeading,
+                },
+              ],
+            };
+            newConfig = addSection(selectedDashConfig, viewIndex, newSection);
+            toView = newConfig.views[viewIndex] as LovelaceViewConfig;
+            sectionIndex = toView.sections!.length - 1;
+          }
+          toPath = [viewIndex, sectionIndex];
+        }
+
         if (urlPath === this.lovelace!.urlPath) {
           this.lovelace!.saveConfig(
-            moveCardToContainer(this.lovelace!.config, this.path!, [viewIndex])
+            moveCardToContainer(newConfig, this.path!, toPath)
           );
           showSaveSuccessToast(this, this.hass!);
           return;
         }
         try {
           const { cardIndex } = parseLovelaceCardPath(this.path!);
+          const card = this._cards[cardIndex];
           await saveConfig(
             this.hass!,
             urlPath,
-            addCard(selectedDashConfig, [viewIndex], this._cards[cardIndex])
+            addCard(newConfig, toPath, card)
           );
           this.lovelace!.saveConfig(
             deleteCard(this.lovelace!.config, this.path!)

src/translations/en.json

@@ -5696,8 +5696,8 @@
           },
           "move_card": {
             "header": "Choose a view to move the card to",
-            "error_title": "Impossible to move the card",
+            "strategy_error_title": "Impossible to move the card",
-            "error_text_section": "Moving a card to a section view is not supported yet. Use copy/cut/paste instead."
+            "strategy_error_text_strategy": "Moving a card to an auto generated view is not supported."
           },
           "change_position": {
             "title": "Change card position",
@@ -5715,7 +5715,9 @@
             "add_badge": "Add badge",
             "add_card": "[%key:ui::panel::lovelace::editor::edit_card::add%]",
             "create_section": "Create section",
-            "default_section_title": "New section"
+            "default_section_title": "New section",
+            "imported_card_section_title_view": "Imported cards from ''{view_title}'' view",
+            "imported_card_section_title_default": "Imported cards from another view"
           },
           "delete_section": {
             "title": "Delete section",