jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add drag and drop to area dashboard (#20289)

Browse Source 
* Add drag and drop to area dashboard

* Update ha-config-areas-dashboard.ts

* Fix unassign path

* Add delay for touch

* Update ha-config-areas-dashboard.ts

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2024-04-02 11:23:32 +02:00 committed by GitHub
parent a3024b38e9
commit 2e58d6656c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/panels/config/areas/ha-config-areas-dashboard.ts
View File

@ -23,9 +23,11 @@ import "../../../components/ha-fab";
import "../../../components/ha-floor-icon"; import "../../../components/ha-floor-icon";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-sortable";
import { import {
AreaRegistryEntry, AreaRegistryEntry,
createAreaRegistryEntry, createAreaRegistryEntry,
updateAreaRegistryEntry,
} from "../../../data/area_registry"; } from "../../../data/area_registry";
import { import {
FloorRegistryEntry, FloorRegistryEntry,
@ -50,6 +52,10 @@ import {
} from "./show-dialog-area-registry-detail"; } from "./show-dialog-area-registry-detail";
import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail"; import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
const UNASSIGNED_PATH = ["__unassigned__"];
const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
@customElement("ha-config-areas-dashboard") @customElement("ha-config-areas-dashboard")
export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) { export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -187,13 +193,22 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
> >
</ha-button-menu> </ha-button-menu>
</div> </div>
<div class="areas"> <ha-sortable
${floor.areas.map((area) => this._renderArea(area))} handle-selector="a"
</div> draggable-selector="a"
@item-moved=${this._areaMoved}
group="floor"
.options=${SORT_OPTIONS}
.path=${[floor.floor_id]}
>
<div class="areas">
${floor.areas.map((area) => this._renderArea(area))}
</div>
</ha-sortable>
</div>` </div>`
)} )}
${areasAndFloors?.unassisgnedAreas.length ${areasAndFloors?.unassisgnedAreas.length
? html`<div class="unassigned"> ? html`<div class="floor">
<div class="header"> <div class="header">
<h2> <h2>
${this.hass.localize( ${this.hass.localize(
@ -201,11 +216,20 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
)} )}
</h2> </h2>
</div> </div>
<div class="areas"> <ha-sortable
${areasAndFloors?.unassisgnedAreas.map((area) => handle-selector="a"
this._renderArea(area) draggable-selector="a"
)} @item-moved=${this._areaMoved}
</div> group="floor"
.options=${SORT_OPTIONS}
.path=${UNASSIGNED_PATH}
>
<div class="areas">
${areasAndFloors?.unassisgnedAreas.map((area) =>
this._renderArea(area)
)}
</div>
</ha-sortable>
</div>` </div>`
: nothing} : nothing}
</div> </div>
@ -281,6 +305,29 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
loadAreaRegistryDetailDialog(); loadAreaRegistryDetailDialog();
} }
private async _areaMoved(ev) {
const areasAndFloors = this._processAreas(
this.hass.areas,
this.hass.devices,
this.hass.entities,
this._floors!
);
let area: AreaRegistryEntry;
if (ev.detail.oldPath === UNASSIGNED_PATH) {
area = areasAndFloors.unassisgnedAreas[ev.detail.oldIndex];
} else {
const oldFloor = areasAndFloors.floors!.find(
(floor) => floor.floor_id === ev.detail.oldPath[0]
);
area = oldFloor!.areas[ev.detail.oldIndex];
}
await updateAreaRegistryEntry(this.hass, area.area_id, {
floor_id:
ev.detail.newPath === UNASSIGNED_PATH ? null : ev.detail.newPath[0],
});
}
private _handleFloorAction(ev: CustomEvent<ActionDetail>) { private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
const floor = (ev.currentTarget as any).floor; const floor = (ev.currentTarget as any).floor;
switch (ev.detail.index) { switch (ev.detail.index) {