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

Add create category and label to multi select (#20365)

Browse Source 
* Add create category and label to multi select

* move out of map
This commit is contained in:
Bram Kragten 2024-04-03 13:23:00 +02:00 committed by GitHub
parent ccde9cceee
commit e25d4f17aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 178 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/panels/config/automation/ha-automation-picker.ts
View File

@ -73,6 +73,7 @@ import {
} from "../../../data/automation"; } from "../../../data/automation";
import { import {
CategoryRegistryEntry, CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry, subscribeCategoryRegistry,
} from "../../../data/category_registry"; } from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context"; import { fullEntitiesContext } from "../../../data/context";
@ -84,6 +85,7 @@ import {
} from "../../../data/entity_registry"; } from "../../../data/entity_registry";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../../../data/label_registry"; } from "../../../data/label_registry";
import { findRelated } from "../../../data/search"; import { findRelated } from "../../../data/search";
@ -98,7 +100,9 @@ import { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url"; import { documentationUrl } from "../../../util/documentation-url";
import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity"; import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category"; import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import { showNewAutomationDialog } from "./show-dialog-new-automation"; import { showNewAutomationDialog } from "./show-dialog-new-automation";
type AutomationItem = AutomationEntity & { type AutomationItem = AutomationEntity & {
@ -367,21 +371,32 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
"ui.panel.config.automation.picker.bulk_actions.no_category" "ui.panel.config.automation.picker.bulk_actions.no_category"
)} )}
</div> </div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
const labelItems = html` ${this._labels?.map((label) => { const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item return html`<ha-menu-item
.value=${label.label_id} .value=${label.label_id}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
> >
<ha-label style=${color ? `--color: ${color}` : ""}> <ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon ${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-menu-item> `;
})} <md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
})}`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@ -1090,6 +1105,20 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
await Promise.all(promises); await Promise.all(promises);
} }
private _createCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "automation",
createEntry: (values) =>
createCategoryRegistryEntry(this.hass, "automation", values),
});
}
private _createLabel() {
showLabelDetailDialog(this, {
createEntry: (values) => createLabelRegistryEntry(this.hass, values),
});
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,

39
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -57,6 +57,7 @@ import {
import { IntegrationManifest } from "../../../data/integration"; import { IntegrationManifest } from "../../../data/integration";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../../../data/label_registry"; } from "../../../data/label_registry";
import "../../../layouts/hass-tabs-subpage-data-table"; import "../../../layouts/hass-tabs-subpage-data-table";
@ -67,6 +68,7 @@ import { brandsUrl } from "../../../util/brands-url";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu"; import "../integrations/ha-integration-overflow-menu";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog"; import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
interface DeviceRowData extends DeviceRegistryEntry { interface DeviceRowData extends DeviceRegistryEntry {
device?: DeviceRowData; device?: DeviceRowData;
@ -542,20 +544,25 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
this._labels this._labels
); );
const labelItems = html` ${this._labels?.map((label) => { const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item return html`<ha-menu-item
.value=${label.label_id} .value=${label.label_id}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
> >
<ha-label style=${color ? `--color: ${color}` : ""}> <ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon ${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-menu-item> `;
})}<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
})}`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@ -787,6 +794,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
await Promise.all(promises); await Promise.all(promises);
} }
private _createLabel() {
showLabelDetailDialog(this, {
createEntry: (values) => createLabelRegistryEntry(this.hass, values),
});
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
css` css`

37
src/panels/config/entities/ha-config-entities.ts
View File

@ -70,6 +70,7 @@ import {
import { entryIcon } from "../../../data/icons"; import { entryIcon } from "../../../data/icons";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../../../data/label_registry"; } from "../../../data/label_registry";
import { import {
@ -86,6 +87,7 @@ import type { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu"; import "../integrations/ha-integration-overflow-menu";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog"; import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
export interface StateEntity export interface StateEntity
extends Omit<EntityRegistryEntry, "id" | "unique_id"> { extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@ -515,19 +517,24 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
); );
const labelItems = html` ${this._labels?.map((label) => { const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item return html`<ha-menu-item
.value=${label.label_id} .value=${label.label_id}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
> >
<ha-label style=${color ? `--color: ${color}` : ""}> <ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon ${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-menu-item>`;
})}<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
})}`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@ -1091,6 +1098,12 @@ ${
}); });
} }
private _createLabel() {
showLabelDetailDialog(this, {
createEntry: (values) => createLabelRegistryEntry(this.hass, values),
});
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,

59
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -27,6 +27,7 @@ import {
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { formatShortDateTime } from "../../../common/datetime/format_date_time"; import { formatShortDateTime } from "../../../common/datetime/format_date_time";
import { relativeTime } from "../../../common/datetime/relative_time"; import { relativeTime } from "../../../common/datetime/relative_time";
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event"; import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
@ -48,12 +49,13 @@ import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-labels"; import "../../../components/ha-filter-labels";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-icon-overflow-menu"; import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon";
import "../../../components/ha-menu-item"; import "../../../components/ha-menu-item";
import "../../../components/ha-state-icon";
import "../../../components/ha-sub-menu"; import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import { import {
CategoryRegistryEntry, CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry, subscribeCategoryRegistry,
} from "../../../data/category_registry"; } from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context"; import { fullEntitiesContext } from "../../../data/context";
@ -66,6 +68,7 @@ import {
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../../../data/label_registry"; } from "../../../data/label_registry";
import { import {
@ -86,8 +89,9 @@ import { HomeAssistant, Route } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url"; import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast"; import { showToast } from "../../../util/toast";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category"; import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import { computeCssColor } from "../../../common/color/compute-color"; import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
type SceneItem = SceneEntity & { type SceneItem = SceneEntity & {
name: string; name: string;
@ -361,21 +365,32 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
"ui.panel.config.automation.picker.bulk_actions.no_category" "ui.panel.config.automation.picker.bulk_actions.no_category"
)} )}
</div> </div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
const labelItems = html` ${this._labels?.map((label) => { const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item return html`<ha-menu-item
.value=${label.label_id} .value=${label.label_id}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
> >
<ha-label style=${color ? `--color: ${color}` : ""}> <ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon ${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-menu-item>`;
})}<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
})}`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@ -840,6 +855,20 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
}); });
} }
private _createCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "scene",
createEntry: (values) =>
createCategoryRegistryEntry(this.hass, "scene", values),
});
}
private _createLabel() {
showLabelDetailDialog(this, {
createEntry: (values) => createLabelRegistryEntry(this.hass, values),
});
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,

56
src/panels/config/script/ha-script-picker.ts
View File

@ -27,6 +27,7 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatShortDateTime } from "../../../common/datetime/format_date_time"; import { formatShortDateTime } from "../../../common/datetime/format_date_time";
import { relativeTime } from "../../../common/datetime/relative_time"; import { relativeTime } from "../../../common/datetime/relative_time";
@ -49,11 +50,12 @@ import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-labels"; import "../../../components/ha-filter-labels";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-icon-overflow-menu"; import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-svg-icon";
import "../../../components/ha-menu-item"; import "../../../components/ha-menu-item";
import "../../../components/ha-sub-menu"; import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import { import {
CategoryRegistryEntry, CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry, subscribeCategoryRegistry,
} from "../../../data/category_registry"; } from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context"; import { fullEntitiesContext } from "../../../data/context";
@ -65,6 +67,7 @@ import {
} from "../../../data/entity_registry"; } from "../../../data/entity_registry";
import { import {
LabelRegistryEntry, LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../../../data/label_registry"; } from "../../../data/label_registry";
import { import {
@ -88,8 +91,9 @@ import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast"; import { showToast } from "../../../util/toast";
import { showNewAutomationDialog } from "../automation/show-dialog-new-automation"; import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category"; import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import { computeCssColor } from "../../../common/color/compute-color"; import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
type ScriptItem = ScriptEntity & { type ScriptItem = ScriptEntity & {
name: string; name: string;
@ -373,22 +377,32 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.no_category" "ui.panel.config.automation.picker.bulk_actions.no_category"
)} )}
</div> </ha-menu-item
><md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div> </div>
</ha-menu-item>`; </ha-menu-item>`;
const labelItems = html` ${this._labels?.map((label) => { const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item return html`<ha-menu-item
.value=${label.label_id} .value=${label.label_id}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
> >
<ha-label style=${color ? `--color: ${color}` : ""}> <ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon ${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-menu-item>`;
})}<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._createLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`; </ha-menu-item>`;
})}`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@ -957,6 +971,20 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
} }
} }
private _createCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "script",
createEntry: (values) =>
createCategoryRegistryEntry(this.hass, "script", values),
});
}
private _createLabel() {
showLabelDetailDialog(this, {
createEntry: (values) => createLabelRegistryEntry(this.hass, values),
});
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
haStyle, haStyle,