Skip to content

Use Sortable to move entities in entities editor #6810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 9 commits into from
Sep 7, 2020
Merged

Use Sortable to move entities in entities editor #6810

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a0fc4aa
Use Sortable to move entities in entities editor
zsarnett Sep 7, 2020
05edc85
Make it actually work
zsarnett Sep 7, 2020
c25b398
comment
zsarnett Sep 7, 2020
6325183
Remove array result
zsarnett Sep 7, 2020
acba1ee
Change comment from copy pasta
zsarnett Sep 7, 2020
5fc3126
make styles a css result - Not working
zsarnett Sep 7, 2020
e3ac8be
Fix it
zsarnett Sep 7, 2020
53c4b96
rename and move
zsarnett Sep 7, 2020
42418ab
lint
zsarnett Sep 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"@polymer/polymer": "3.1.0",
"@thomasloven/round-slider": "0.5.0",
"@types/chromecast-caf-sender": "^1.0.3",
"@types/sortablejs": "^1.10.6",
"@vaadin/vaadin-combo-box": "^5.0.10",
"@vaadin/vaadin-date-picker": "^4.0.7",
"@vue/web-component-wrapper": "^1.2.0",
Expand Down
174 changes: 112 additions & 62 deletions src/panels/lovelace/components/hui-entity-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,58 @@
import "../../../components/ha-icon-button";
import { mdiDrag } from "@mdi/js";
import {
css,
CSSResult,
customElement,
html,
internalProperty,
LitElement,
property,
PropertyValues,
TemplateResult,
} from "lit-element";
import { guard } from "lit-html/directives/guard";
import type { SortableEvent } from "sortablejs";
import Sortable, {
AutoScroll,
OnSpill,
} from "sortablejs/modular/sortable.core.esm";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker";
import "../../../components/ha-icon-button";
import { sortStyles } from "../../../components/ha-sidebar-sort-styles";
import { HomeAssistant } from "../../../types";
import { EditorTarget } from "../editor/types";
import { EntityConfig } from "../entity-rows/types";

@customElement("hui-entity-editor")
export class HuiEntityEditor extends LitElement {
@property() protected hass?: HomeAssistant;
@property({ attribute: false }) protected hass?: HomeAssistant;

@property() protected entities?: EntityConfig[];
@property({ attribute: false }) protected entities?: EntityConfig[];

@property() protected label?: string;

@internalProperty() private _attached = false;

private _sortable?;

public connectedCallback() {
super.connectedCallback();
this._attached = true;
}

public disconnectedCallback() {
super.disconnectedCallback();
this._attached = false;
}

protected render(): TemplateResult {
if (!this.entities) {
return html``;
}

return html`
${sortStyles}

@bramkragten bramkragten Sep 7, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put this in styles()

@zsarnett zsarnett Sep 7, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ITs a template result

@bramkragten bramkragten Sep 7, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So change it to CSSResult :-)

@bramkragten bramkragten Sep 7, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should rename it anyway when we are going to use it on multiple places

@zsarnett zsarnett Sep 7, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know how to dynamically return styles in static get styles() ? So that we only append if this.editMode in HaSidebar?

@bramkragten bramkragten Sep 7, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use

<style>
dragStyles.cssText
</style>

<h3>
${this.label ||
this.hass!.localize("ui.panel.lovelace.editor.card.generic.entities") +
Expand All @@ -36,42 +61,73 @@ export class HuiEntityEditor extends LitElement {
")"}
</h3>
<div class="entities">
${this.entities.map((entityConf, index) => {
return html`
<div class="entity">
<ha-entity-picker
.hass=${this.hass}
.value="${entityConf.entity}"
.index="${index}"
@change="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
<ha-icon-button
title="Move entity down"
icon="hass:arrow-down"
.index="${index}"
@click="${this._entityDown}"
?disabled="${index === this.entities!.length - 1}"
></ha-icon-button>
<ha-icon-button
title="Move entity up"
icon="hass:arrow-up"
.index="${index}"
@click="${this._entityUp}"
?disabled="${index === 0}"
></ha-icon-button>
</div>
`;
})}
<ha-entity-picker
.hass=${this.hass}
@change="${this._addEntity}"
></ha-entity-picker>
${guard([this.entities], () =>
this.entities!.map((entityConf, index) => {
return html`
<div class="entity" data-entity-id=${entityConf.entity}>
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
<ha-entity-picker
.hass=${this.hass}
.value=${entityConf.entity}
.index=${index}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
</div>
`;
})
)}
</div>
<ha-entity-picker
.hass=${this.hass}
@change=${this._addEntity}
></ha-entity-picker>
`;
}

private _addEntity(ev: Event): void {
protected firstUpdated(): void {
Sortable.mount(OnSpill);
Sortable.mount(new AutoScroll());
}

protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);

const attachedChanged = changedProps.has("_attached");
const entitiesChanged = changedProps.has("entities");

if (!entitiesChanged && !attachedChanged) {
return;
}

if (attachedChanged && !this._attached) {
// Tear down existing polyfill, if available
Comment thread
bramkragten marked this conversation as resolved.
Outdated
this._sortable?.destroy();
this._sortable = undefined;
return;
}

if (!this._sortable && this.entities) {
this._createSortable();
return;
}

if (entitiesChanged) {
this._sortable.sort(this.entities?.map((entity) => entity.entity));
}
}

private _createSortable() {
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150,
fallbackClass: "sortable-fallback",
handle: "ha-svg-icon",
dataIdAttr: "data-entity-id",
onEnd: async (evt: SortableEvent) => this._entityMoved(evt),
});
}

private async _addEntity(ev: Event): Promise<void> {
const target = ev.target! as EditorTarget;
if (target.value === "") {
return;
Expand All @@ -83,26 +139,14 @@ export class HuiEntityEditor extends LitElement {
fireEvent(this, "entities-changed", { entities: newConfigEntities });
}

private _entityUp(ev: Event): void {
const target = ev.target! as EditorTarget;
const newEntities = this.entities!.concat();

[newEntities[target.index! - 1], newEntities[target.index!]] = [
newEntities[target.index!],
newEntities[target.index! - 1],
];

fireEvent(this, "entities-changed", { entities: newEntities });
}
private _entityMoved(ev: SortableEvent): void {
if (ev.oldIndex === ev.newIndex) {
return;
}

private _entityDown(ev: Event): void {
const target = ev.target! as EditorTarget;
const newEntities = this.entities!.concat();

[newEntities[target.index! + 1], newEntities[target.index!]] = [
newEntities[target.index!],
newEntities[target.index! + 1],
];
newEntities.splice(ev.newIndex!, 0, newEntities.splice(ev.oldIndex!, 1)[0]);

fireEvent(this, "entities-changed", { entities: newEntities });
}
Expand All @@ -123,16 +167,22 @@ export class HuiEntityEditor extends LitElement {
fireEvent(this, "entities-changed", { entities: newConfigEntities });
}

static get styles(): CSSResult {
return css`
.entity {
display: flex;
align-items: flex-end;
}
.entity ha-entity-picker {
flex-grow: 1;
}
`;
static get styles(): CSSResult[] {
return [
css`
.entity {
display: flex;
align-items: center;
}
.entity ha-svg-icon {
padding-right: 8px;
cursor: move;
}
.entity ha-entity-picker {
flex-grow: 1;
}
`,
];
}
}

Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2710,6 +2710,11 @@
dependencies:
"@types/node" "*"

"@types/sortablejs@^1.10.6":
version "1.10.6"
resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.10.6.tgz#98725ae08f1dfe28b8da0fdf302c417f5ff043c0"
integrity sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A==

"@types/tern@*":
version "0.23.3"
resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
Expand Down