Skip to content

Commit

Permalink
Use ha-form for custom repository dialog (#511)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeeus
ludeeus committed Nov 6, 2021
1 parent 53690fc commit f7c7c9a
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 165 deletions.
235 changes: 75 additions & 160 deletions src/components/dialogs/hacs-custom-repositories-dialog.ts
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,60 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiGithub } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-listbox/paper-listbox";
import { css, html, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
import "../../../homeassistant-frontend/src/components/ha-alert";
import "../../../homeassistant-frontend/src/components/ha-form/ha-form";
import type { HaFormSchema } from "../../../homeassistant-frontend/src/components/ha-form/types";
import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
import "../../../homeassistant-frontend/src/components/ha-settings-row";
import "../../../homeassistant-frontend/src/components/ha-svg-icon";
import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles";
import "./hacs-dialog";
import { HacsDialogBase } from "./hacs-dialog-base";

@customElement("hacs-custom-repositories-dialog")
export class HacsCustomRepositoriesDialog extends HacsDialogBase {
@property() private _inputRepository?: string;

@property() private _error: any;

@query("#add-input") private _addInput?: any;

@query("#category") private _addCategory?: any;
@state() private _addRepositoryData = { category: undefined, repository: undefined };

shouldUpdate(changedProperties: PropertyValues) {
return (
changedProperties.has("narrow") ||
changedProperties.has("active") ||
changedProperties.has("_error") ||
changedProperties.has("_addRepositoryData") ||
changedProperties.has("repositories")
);
}

protected render(): TemplateResult | void {
if (!this.active) return html``;
const repositories = this.repositories?.filter((repo) => repo.custom);
const addRepositorySchema: HaFormSchema[] = [
{
type: "string",
name: "repository",
},
{
type: "select",
name: "category",
optional: true,
options: this.hacs.configuration.categories.map((category) => [
category,
this.hacs.localize(`common.${category}`),
]),
},
];
return html`
<hacs-dialog
.active=${this.active}
.hass=${this.hass}
.title=${this.hacs.localize("dialog_custom_repositories.title")}
hideActions
scrimClickAction
escapeKeyAction
>
<div class="content">
<div class="list">
Expand All @@ -55,71 +66,42 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
${repositories
?.filter((repo) => this.hacs.configuration.categories.includes(repo.category))
.map(
(repo) => html`<paper-icon-item>
${repo.category === "integration"
? html`
<img
loading="lazy"
.src=${brandsUrl({
domain: repo.domain,
darkOptimized: this.hass.themes.darkMode,
type: "icon",
})}
referrerpolicy="no-referrer"
@error=${this._onImageError}
@load=${this._onImageLoad}
/>
`
: html`<ha-svg-icon .path=${mdiGithub} slot="item-icon"></ha-svg-icon>`}
<paper-item-body
@click=${() => this._showReopsitoryInfo(String(repo.id))}
three-line
>${repo.name}
<div secondary>${repo.description}</div>
<div secondary>Category: ${repo.category}</div></paper-item-body
>
(repo) => html`<ha-settings-row
@click=${() => this._showReopsitoryInfo(String(repo.id))}
>
${!this.narrow
? html`<ha-svg-icon slot="prefix" .path=${mdiGithub}></ha-svg-icon>`
: ""}
<span slot="heading">${repo.name}</span>
<span slot="description">${repo.full_name} (${repo.category})</span>
<mwc-icon-button @click=${() => this._removeRepository(repo.id)}>
<ha-svg-icon class="delete" .path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
</paper-icon-item>`
</ha-settings-row>`
)}
</div>
</div>
<div class="add-repository" ?narrow=${this.narrow}>
<input
id="add-input"
class="add-input"
slot="secondaryaction"
placeholder="${this.hacs.localize("dialog_custom_repositories.url_placeholder")}"
.value=${this._inputRepository || ""}
@input=${this._inputValueChanged}
?narrow=${this.narrow}
/>
<ha-paper-dropdown-menu
?narrow=${this.narrow}
class="category"
label="${this.hacs.localize("dialog_custom_repositories.category")}"
>
<paper-listbox id="category" slot="dropdown-content" selected="-1">
${this.hacs.configuration.categories.map(
(category) => html`
<paper-item class="categoryitem" .category=${category}>
${this.hacs.localize(`common.${category}`)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-button
<ha-form
?narrow=${this.narrow}
slot="primaryaction"
raised
@click=${this._addRepository}
.data=${this._addRepositoryData}
.schema=${addRepositorySchema}
.computeLabel=${(schema: HaFormSchema) =>
schema.name === "category"
? this.hacs.localize("dialog_custom_repositories.category")
: this.hacs.localize("common.repository")}
@value-changed=${this._valueChanged}
>
${this.hacs.localize("common.add")}
</mwc-button>
</ha-form>
</div>
<mwc-button
slot="primaryaction"
raised
.disabled=${this._addRepositoryData.category === undefined ||
this._addRepositoryData.repository === undefined}
@click=${this._addRepository}
>
${this.hacs.localize("common.add")}
</mwc-button>
</hacs-dialog>
`;
}
Expand All @@ -128,27 +110,29 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
this.hass.connection.subscribeEvents((msg) => (this._error = (msg as any).data), "hacs/error");
}

private _inputValueChanged() {
this._inputRepository = this._addInput?.value;
private _valueChanged(ev) {
this._addRepositoryData = ev.detail.value;
}

private async _addRepository() {
this._error = undefined;
const repository = this._inputRepository;
const category = this._addCategory?.selectedItem?.category;
if (!category) {
if (!this._addRepositoryData.category) {
this._error = {
message: this.hacs.localize("dialog_custom_repositories.no_category"),
};
return;
}
if (!repository) {
if (!this._addRepositoryData.repository) {
this._error = {
message: this.hacs.localize("dialog_custom_repositories.no_repository"),
};
return;
}
await repositoryAdd(this.hass, repository, category);
await repositoryAdd(
this.hass,
this._addRepositoryData.repository,
this._addRepositoryData.category
);
this.repositories = await getRepositories(this.hass);
}

Expand All @@ -158,16 +142,6 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
this.repositories = await getRepositories(this.hass);
}

private _onImageLoad(ev) {
ev.target.style.visibility = "initial";
}

private _onImageError(ev) {
if (ev.target) {
ev.target.outerHTML = `<ha-svg-icon path="${mdiGithub}" slot="item-icon"></ha-svg-icon>`;
}
}

private async _showReopsitoryInfo(repository: string) {
this.dispatchEvent(
new CustomEvent("hacs-dialog-secondary", {
Expand All @@ -186,92 +160,33 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
scrollBarStyle,
hacsIconStyle,
css`
.content {
width: 1024px;
display: contents;
}
.list {
position: relative;
margin-top: 16px;
margin-top: -16px;
max-height: 870px;
overflow: auto;
}
ha-svg-icon {
--mdc-icon-size: 36px;
}
img {
align-items: center;
ha-form {
display: block;
justify-content: center;
margin-bottom: 16px;
max-height: 36px;
max-width: 36px;
position: absolute;
}
.delete {
color: var(--hacs-error-color, var(--google-red-500));
}
paper-item-body {
cursor: pointer;
}
paper-item-body {
width: 100%;
min-height: var(--paper-item-body-two-line-min-height, 72px);
display: var(--layout-vertical_-_display);
flex-direction: var(--layout-vertical_-_flex-direction);
justify-content: var(--layout-center-justified_-_justify-content);
}
paper-item-body div {
font-size: 14px;
color: var(--secondary-text-color);
}
.add-repository {
display: grid;
width: 100%;
justify-items: right;
padding-bottom: 25px;
}
.add-input {
width: 100%;
height: 40px;
margin-top: 32px;
border: 0;
border-bottom: 1px var(--mdc-theme-primary) solid;
text-align: left;
padding: 0px;
font-size: initial;
color: var(--sidebar-text-color);
font-family: var(--paper-font-body1_-_font-family);
}
input:focus {
outline-offset: 0;
outline: 0;
}
input {
background-color: var(--sidebar-background-color);
ha-form[narrow] {
bottom: 0;
position: absolute;
width: calc(100% - 48px);
}
ha-paper-dropdown-menu {
width: 100%;
ha-svg-icon {
--mdc-icon-size: 36px;
}
mwc-button {
width: fit-content;
margin-top: 16px;
ha-svg-icon:not(.delete) {
margin-right: 4px;
}
input[narrow],
.add-repository[narrow],
ha-paper-dropdown-menu[narrow],
mwc-button[narrow] {
margin: 0;
ha-settings-row {
cursor: pointer;
padding: 0;
left: 0;
top: 0;
width: 100%;
max-width: 100%;
}
.add-repository[narrow] {
display: contents;
.delete {
color: var(--hcv-color-error);
}
`,
];
Expand Down
12 changes: 8 additions & 4 deletions src/components/dialogs/hacs-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,14 @@ import { HacsDialogBase } from "./hacs-dialog-base";

@customElement("hacs-dialog")
export class HacsDialog extends HacsDialogBase {
@property({ type: Boolean }) public hideActions: boolean = false;
@property({ type: Boolean }) public scrimClickAction: boolean = false;
@property({ type: Boolean }) public escapeKeyAction: boolean = false;
@property({ type: Boolean }) public noClose: boolean = false;
@property({ type: Boolean }) public hideActions = false;

@property({ type: Boolean }) public scrimClickAction = false;

@property({ type: Boolean }) public escapeKeyAction = false;

@property({ type: Boolean }) public noClose = false;

@property() public title!: string;

protected render(): TemplateResult | void {
Expand Down
9 changes: 8 additions & 1 deletion src/panels/hacs-store-panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,14 @@ export class HacsStorePanel extends LitElement {
{
path: mdiBroom,
label: this.hacs.localize("menu.dismiss"),
disabled: this.repositories?.filter((repo) => repo.new).length === 0,
disabled:
this.repositories?.filter(
(repo) =>
repo.new &&
this.hacs.sections
?.find((panel) => panel.id === this.section)
?.categories?.includes(repo.category)
).length === 0,
action: () => this._clearAllNewRepositories(),
},
{
Expand Down

0 comments on commit f7c7c9a

Please sign in to comment.