mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 18:06:36 +00:00
Move views (#2610)
* A start, still buggy... * Tests and move with view * Lint
This commit is contained in:
parent
2ad27f7400
commit
b37eee56c0
@ -178,6 +178,22 @@ export const replaceView = (
|
||||
),
|
||||
});
|
||||
|
||||
export const swapView = (
|
||||
config: LovelaceConfig,
|
||||
path1: number,
|
||||
path2: number
|
||||
): LovelaceConfig => {
|
||||
const view1 = config.views[path1];
|
||||
const view2 = config.views[path2];
|
||||
|
||||
return {
|
||||
...config,
|
||||
views: config.views.map((origView, index) =>
|
||||
index === path2 ? view1 : index === path1 ? view2 : origView
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const deleteView = (
|
||||
config: LovelaceConfig,
|
||||
viewIndex: number
|
||||
|
@ -35,6 +35,8 @@ import { LovelaceConfig } from "../../data/lovelace";
|
||||
import { navigate } from "../../common/navigate";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { computeNotifications } from "./common/compute-notifications";
|
||||
import { swapView } from "./editor/config-util";
|
||||
|
||||
import "./components/notifications/hui-notification-drawer";
|
||||
import "./components/notifications/hui-notifications-button";
|
||||
import "./hui-view";
|
||||
@ -235,6 +237,17 @@ class HUIRoot extends LitElement {
|
||||
${this.lovelace!.config.views.map(
|
||||
(view) => html`
|
||||
<paper-tab>
|
||||
${this._editMode
|
||||
? html`
|
||||
<paper-icon-button
|
||||
title="Move view left"
|
||||
class="edit-icon view"
|
||||
icon="hass:arrow-left"
|
||||
@click="${this._moveViewLeft}"
|
||||
?disabled="${this._curView === 0}"
|
||||
></paper-icon-button>
|
||||
`
|
||||
: ""}
|
||||
${view.icon
|
||||
? html`
|
||||
<ha-icon
|
||||
@ -246,10 +259,20 @@ class HUIRoot extends LitElement {
|
||||
${this._editMode
|
||||
? html`
|
||||
<ha-icon
|
||||
title="Edit view"
|
||||
class="edit-icon view"
|
||||
@click="${this._editView}"
|
||||
icon="hass:pencil"
|
||||
@click="${this._editView}"
|
||||
></ha-icon>
|
||||
<paper-icon-button
|
||||
title="Move view right"
|
||||
class="edit-icon view"
|
||||
icon="hass:arrow-right"
|
||||
@click="${this._moveViewRight}"
|
||||
?disabled="${(this._curView! as number) +
|
||||
1 ===
|
||||
this.lovelace!.config.views.length}"
|
||||
></paper-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</paper-tab>
|
||||
@ -314,6 +337,9 @@ class HUIRoot extends LitElement {
|
||||
color: var(--accent-color);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.edit-icon[disabled] {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
.edit-icon.view {
|
||||
display: none;
|
||||
}
|
||||
@ -511,6 +537,22 @@ class HUIRoot extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private _moveViewLeft() {
|
||||
const lovelace = this.lovelace!;
|
||||
const oldIndex = this._curView as number;
|
||||
const newIndex = (this._curView as number) - 1;
|
||||
this._curView = newIndex;
|
||||
lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
|
||||
}
|
||||
|
||||
private _moveViewRight() {
|
||||
const lovelace = this.lovelace!;
|
||||
const oldIndex = this._curView as number;
|
||||
const newIndex = (this._curView as number) + 1;
|
||||
this._curView = newIndex;
|
||||
lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
|
||||
}
|
||||
|
||||
private _addView() {
|
||||
showEditViewDialog(this, {
|
||||
lovelace: this.lovelace!,
|
||||
|
@ -3,6 +3,7 @@ import * as assert from "assert";
|
||||
import {
|
||||
swapCard,
|
||||
moveCard,
|
||||
swapView,
|
||||
} from "../../../../src/panels/lovelace/editor/config-util";
|
||||
import { LovelaceConfig } from "../../../../src/data/lovelace";
|
||||
|
||||
@ -129,3 +130,65 @@ describe("moveCard", () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("swapView", () => {
|
||||
it("swaps 2 view", () => {
|
||||
const config: LovelaceConfig = {
|
||||
views: [
|
||||
{
|
||||
title: "view1",
|
||||
cards: [],
|
||||
},
|
||||
{
|
||||
title: "view2",
|
||||
cards: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const result = swapView(config, 1, 0);
|
||||
const expected = {
|
||||
views: [
|
||||
{
|
||||
title: "view2",
|
||||
cards: [],
|
||||
},
|
||||
{
|
||||
title: "view1",
|
||||
cards: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
assert.deepEqual(expected, result);
|
||||
});
|
||||
|
||||
it("swaps the same views", () => {
|
||||
const config: LovelaceConfig = {
|
||||
views: [
|
||||
{
|
||||
title: "view1",
|
||||
cards: [],
|
||||
},
|
||||
{
|
||||
title: "view2",
|
||||
cards: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const result = swapView(config, 0, 0);
|
||||
const expected = {
|
||||
views: [
|
||||
{
|
||||
title: "view1",
|
||||
cards: [],
|
||||
},
|
||||
{
|
||||
title: "view2",
|
||||
cards: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
assert.deepEqual(expected, result);
|
||||
});
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user