diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 261c95775865..568c0a1e569f 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/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, + 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, + LovelaceContainerPath, findLovelaceItems, getLovelaceContainerPath, parseLovelaceCardPath, @@ -353,34 +358,49 @@ 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]; + let view = selectedDashConfig.views[viewIndex]; + let newConfig = selectedDashConfig; - if (!isStrategyView(view) && view.type === SECTION_VIEW_LAYOUT) { + if (isStrategyView(view)) { 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 isSectionView = view.type === SECTION_VIEW_LAYOUT; + + // If the view is a section view and has no sections, add a default section. + if (isSectionView && !view.sections?.length) { + const newSection = { type: "grid", cards: [] }; + newConfig = addSection(selectedDashConfig, viewIndex, newSection); + view = newConfig.views[viewIndex] as LovelaceViewConfig; + } + + const toPath: LovelaceContainerPath = isSectionView + ? [viewIndex, view.sections!.length - 1] + : [viewIndex]; + 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!) diff --git a/src/translations/en.json b/src/translations/en.json index faaad698a33f..571e236571d9 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5682,8 +5682,8 @@ }, "move_card": { "header": "Choose a view to move the card to", - "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_title": "Impossible to move the card", + "strategy_error_text_strategy": "Moving a card to a strategy view is not supported." }, "change_position": { "title": "Change card position",