mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Allow moving cards (#2241)
This commit is contained in:
parent
f9182e5453
commit
a33ff7479a
@ -8,6 +8,7 @@ import { confDeleteCard } from "../editor/delete-card";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { LovelaceCardConfig } from "../../../data/lovelace";
|
||||
import { Lovelace } from "../types";
|
||||
import { swapCard } from "../editor/config-util";
|
||||
|
||||
export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
|
||||
public cardConfig?: LovelaceCardConfig;
|
||||
@ -46,6 +47,19 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
|
||||
this.localize("ui.panel.lovelace.editor.edit_card.edit")
|
||||
}</paper-button
|
||||
>
|
||||
<paper-icon-button
|
||||
icon="hass:arrow-up"
|
||||
@click="${this._cardUp}"
|
||||
?disabled="${this.path![1] === 0}"
|
||||
></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="hass:arrow-down"
|
||||
@click="${this._cardDown}"
|
||||
?disabled="${
|
||||
this.lovelace!.config.views[this.path![0]].cards!.length ===
|
||||
this.path![1] + 1
|
||||
}"
|
||||
></paper-icon-button>
|
||||
<paper-icon-button
|
||||
class="delete"
|
||||
icon="hass:delete"
|
||||
@ -55,12 +69,30 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _editCard(): void {
|
||||
showEditCardDialog(this, {
|
||||
lovelace: this.lovelace!,
|
||||
path: this.path!,
|
||||
});
|
||||
}
|
||||
|
||||
private _cardUp(): void {
|
||||
const lovelace = this.lovelace!;
|
||||
const path = this.path!;
|
||||
lovelace.saveConfig(
|
||||
swapCard(lovelace.config, path, [path[0], path[1] - 1])
|
||||
);
|
||||
}
|
||||
|
||||
private _cardDown(): void {
|
||||
const lovelace = this.lovelace!;
|
||||
const path = this.path!;
|
||||
lovelace.saveConfig(
|
||||
swapCard(lovelace.config, path, [path[0], path[1] + 1])
|
||||
);
|
||||
}
|
||||
|
||||
private _deleteCard(): void {
|
||||
confDeleteCard(this.lovelace!, this.path!);
|
||||
}
|
||||
|
@ -89,6 +89,38 @@ export const deleteCard = (
|
||||
};
|
||||
};
|
||||
|
||||
export const swapCard = (
|
||||
config: LovelaceConfig,
|
||||
path1: [number, number],
|
||||
path2: [number, number]
|
||||
): LovelaceConfig => {
|
||||
const card1 = config.views[path1[0]].cards![path1[1]];
|
||||
const card2 = config.views[path2[0]].cards![path2[1]];
|
||||
|
||||
const origView1 = config.views[path1[0]];
|
||||
const newView1 = {
|
||||
...origView1,
|
||||
cards: origView1.cards!.map((origCard, index) =>
|
||||
index === path1[1] ? card2 : origCard
|
||||
),
|
||||
};
|
||||
|
||||
const origView2 = path1[0] === path2[0] ? newView1 : config.views[path2[0]];
|
||||
const newView2 = {
|
||||
...origView2,
|
||||
cards: origView2.cards!.map((origCard, index) =>
|
||||
index === path2[1] ? card1 : origCard
|
||||
),
|
||||
};
|
||||
|
||||
return {
|
||||
...config,
|
||||
views: config.views.map((origView, index) =>
|
||||
index === path2[0] ? newView2 : index === path1[0] ? newView1 : origView
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const addView = (
|
||||
config: LovelaceConfig,
|
||||
viewConfig: LovelaceViewConfig
|
||||
|
54
test-mocha/panels/lovelace/editor/config-util.spec.ts
Normal file
54
test-mocha/panels/lovelace/editor/config-util.spec.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import * as assert from "assert";
|
||||
|
||||
import { swapCard } from "../../../../src/panels/lovelace/editor/config-util";
|
||||
import { LovelaceConfig } from "../../../../src/data/lovelace";
|
||||
|
||||
describe("swapCard", () => {
|
||||
it("swaps 2 cards in same view", () => {
|
||||
const config: LovelaceConfig = {
|
||||
views: [
|
||||
{},
|
||||
{
|
||||
cards: [{ type: "card1" }, { type: "card2" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const result = swapCard(config, [1, 0], [1, 1]);
|
||||
const expected = {
|
||||
views: [
|
||||
{},
|
||||
{
|
||||
cards: [{ type: "card2" }, { type: "card1" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
assert.deepEqual(expected, result);
|
||||
});
|
||||
|
||||
it("swaps 2 cards in different views", () => {
|
||||
const config: LovelaceConfig = {
|
||||
views: [
|
||||
{
|
||||
cards: [{ type: "v1-c1" }, { type: "v1-c2" }],
|
||||
},
|
||||
{
|
||||
cards: [{ type: "v2-c1" }, { type: "v2-c2" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const result = swapCard(config, [0, 0], [1, 1]);
|
||||
const expected = {
|
||||
views: [
|
||||
{
|
||||
cards: [{ type: "v2-c2" }, { type: "v1-c2" }],
|
||||
},
|
||||
{
|
||||
cards: [{ type: "v2-c1" }, { type: "v1-c1" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
assert.deepEqual(expected, result);
|
||||
});
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user