jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix entity drag (#6884)

Browse Source
This commit is contained in:
Bram Kragten
2020-09-09 17:23:03 +02:00
committed by GitHub
parent f7ab52fe9a
commit 432e3ba636
2 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/panels/lovelace/components/hui-entity-editor.ts
View File

@@ -34,7 +34,9 @@ export class HuiEntityEditor extends LitElement {
@internalProperty() private _attached = false;
private _sortable?;
@internalProperty() private _renderEmptySortable = false;
private _sortable?: Sortable;
public connectedCallback() {
super.connectedCallback();
@@ -60,21 +62,23 @@ export class HuiEntityEditor extends LitElement {
")"}
</h3>
<div class="entities">
${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>
`;
})
${guard([this.entities, this._renderEmptySortable], () =>
this._renderEmptySortable
? ""
: 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
@@ -112,10 +116,16 @@ export class HuiEntityEditor extends LitElement {
}
if (entitiesChanged) {
this._sortable.sort(this.entities?.map((entity) => entity.entity));
this._handleEntitiesChanged();
}
}
private async _handleEntitiesChanged() {
this._renderEmptySortable = true;
await this.updateComplete;
this._renderEmptySortable = false;
}
private _createSortable() {
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150,