diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index d26660345e..5eaa08aaa6 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -131,9 +131,8 @@ class HaConfigDashboard extends LitElement { }); protected render(): TemplateResult { - const canInstallUpdates = this._filterUpdateEntitiesWithInstall( - this.hass.states - ); + const [canInstallUpdates, totalUpdates] = + this._filterUpdateEntitiesWithInstall(this.hass.states); return html` @@ -177,8 +176,19 @@ class HaConfigDashboard extends LitElement { + ${totalUpdates > canInstallUpdates.length + ? html` + ${this.hass.localize( + "ui.panel.config.updates.more_updates", + { + count: totalUpdates - canInstallUpdates.length, + } + )} + ` + : ""} ` : ""} @@ -259,10 +269,15 @@ class HaConfigDashboard extends LitElement { ); private _filterUpdateEntitiesWithInstall = memoizeOne( - (entities: HassEntities) => - this._filterUpdateEntities(entities).filter((entity) => + (entities: HassEntities): [UpdateEntity[], number] => { + const updates = this._filterUpdateEntities(entities).filter((entity) => updateCanInstall(entity) - ) + ); + return [ + updates.slice(0, updates.length === 3 ? updates.length : 2), + updates.length, + ]; + } ); private _showQuickBar(): void { @@ -320,6 +335,11 @@ class HaConfigDashboard extends LitElement { text-decoration: none; color: var(--primary-text-color); } + a.button { + display: block; + color: var(--primary-color); + padding: 16px; + } .title { font-size: 16px; padding: 16px; diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts index 08406b0b50..f2d823bd01 100644 --- a/src/panels/config/dashboard/ha-config-updates.ts +++ b/src/panels/config/dashboard/ha-config-updates.ts @@ -19,22 +19,20 @@ class HaConfigUpdates extends LitElement { @property({ attribute: false }) public updateEntities?: UpdateEntity[]; - @property({ type: Boolean, reflect: true }) showAll = false; + @property({ type: Number }) + public total?: number; protected render(): TemplateResult { if (!this.updateEntities?.length) { return html``; } - const updates = - this.showAll || this.updateEntities.length <= 3 - ? this.updateEntities - : this.updateEntities.slice(0, 2); + const updates = this.updateEntities; return html`
${this.hass.localize("ui.panel.config.updates.title", { - count: this.updateEntities.length, + count: this.total || this.updateEntities.length, })}
${updates.map( @@ -70,15 +68,6 @@ class HaConfigUpdates extends LitElement { ` )} - ${!this.showAll && this.updateEntities.length >= 4 - ? html` - - ` - : ""} `; } @@ -88,10 +77,6 @@ class HaConfigUpdates extends LitElement { }); } - private _showAllClicked() { - this.showAll = true; - } - static get styles(): CSSResultGroup[] { return [ css`