jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 24 deletions
Show Stats 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,

17
src/panels/lovelace/editor/card-editor/hui-card-editor.ts
View File

@ -5,14 +5,16 @@ import {
CSSResult,
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
query,
TemplateResult,
} from "lit-element";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTL } from "../../../../common/util/compute_rtl";
import { deepEqual } from "../../../../common/util/deep-equal";
import "../../../../components/ha-circular-progress";
import "../../../../components/ha-code-editor";
import type { HaCodeEditor } from "../../../../components/ha-code-editor";
import type {
@ -20,14 +22,12 @@ import type {
LovelaceConfig,
} from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import { handleStructError } from "../../common/structs/handle-errors";
import { getCardElementClass } from "../../create-element/create-card-element";
import type { EntityConfig } from "../../entity-rows/types";
import type { LovelaceCardEditor } from "../../types";
import type { GUIModeChangedEvent } from "../types";
import "../../../../components/ha-circular-progress";
import { deepEqual } from "../../../../common/util/deep-equal";
import { handleStructError } from "../../common/structs/handle-errors";
import { GUISupportError } from "../gui-support-error";
import type { GUIModeChangedEvent } from "../types";
export interface ConfigChangedEvent {
config: LovelaceCardConfig;
@ -78,6 +78,9 @@ export class HuiCardEditor extends LitElement {
@query("ha-code-editor") _yamlEditor?: HaCodeEditor;
public get yaml(): string {
if (!this._yaml) {
this._yaml = safeDump(this._config);
}
return this._yaml || "";
}
@ -101,7 +104,7 @@ export class HuiCardEditor extends LitElement {
return;
}
this._config = config;
this._yaml = safeDump(config);
this._yaml = undefined;
this._error = undefined;
this._setConfig();
}