Browse Source
- New TbIotHubInstalledItemsDialogComponent opened from detail dialog Manage section - Extract TbIotHubInstalledItemsTableComponent with itemVersion mode for single-item view - Add installed item counts API (GET /installedItems/counts) and itemId filter to installed items list - Wire installed counts into home, browse, search, and detail dialog (replaces installedDevices list) - Propagate ChipOverflowDirective with minChips input; use on detail dialog meta chips - openEntity opens in new tab; "View item details" swaps to "Review device instructions" for DEVICE itemspull/15508/head
Igor Kulikov
5 months ago
29 changed files with 1446 additions and 701 deletions
@ -0,0 +1,41 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2026 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-iot-hub-installed-items-dialog"> |
||||
|
<div class="dlg-header"> |
||||
|
<h2 class="dlg-title" tbTruncateWithTooltip> |
||||
|
{{ 'iot-hub.installed-items-for' | translate:{ name: item.name } }} |
||||
|
</h2> |
||||
|
<button mat-icon-button |
||||
|
class="dlg-close" |
||||
|
type="button" |
||||
|
(click)="close()"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div mat-dialog-content> |
||||
|
<tb-iot-hub-installed-items-table [itemVersion]="item"> |
||||
|
</tb-iot-hub-installed-items-table> |
||||
|
</div> |
||||
|
<div mat-dialog-actions class="flex items-center justify-end"> |
||||
|
<button mat-button |
||||
|
type="button" |
||||
|
(click)="close()"> |
||||
|
{{ 'action.close' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,96 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2026 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
@import "../../../../../scss/constants"; |
||||
|
|
||||
|
:host { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
.tb-iot-hub-installed-items-dialog { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
.dlg-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
height: 64px; |
||||
|
padding: 12px 12px 12px 24px; |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.dlg-title { |
||||
|
flex: 1 1 auto; |
||||
|
min-width: 0; |
||||
|
margin: 0; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.1px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.dlg-close { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
:host-context(.mat-mdc-dialog-container) { |
||||
|
.mat-mdc-dialog-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1 1 auto; |
||||
|
min-height: 0; |
||||
|
padding: 24px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
tb-iot-hub-installed-items-table { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1 1 auto; |
||||
|
min-height: 0; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-gt-xs} { |
||||
|
height: 500px; |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-gt-sm} { |
||||
|
width: 700px; |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-gt-md} { |
||||
|
width: 800px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-dialog-actions { |
||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, Inject } from '@angular/core'; |
||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models'; |
||||
|
|
||||
|
export interface IotHubInstalledItemsDialogData { |
||||
|
item: MpItemVersionView; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-iot-hub-installed-items-dialog', |
||||
|
standalone: false, |
||||
|
templateUrl: './iot-hub-installed-items-dialog.component.html', |
||||
|
styleUrls: ['./iot-hub-installed-items-dialog.component.scss'] |
||||
|
}) |
||||
|
export class TbIotHubInstalledItemsDialogComponent extends DialogComponent<TbIotHubInstalledItemsDialogComponent> { |
||||
|
|
||||
|
item: MpItemVersionView; |
||||
|
|
||||
|
constructor( |
||||
|
protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
protected dialogRef: MatDialogRef<TbIotHubInstalledItemsDialogComponent>, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: IotHubInstalledItemsDialogData |
||||
|
) { |
||||
|
super(store, router, dialogRef); |
||||
|
this.item = data.item; |
||||
|
} |
||||
|
|
||||
|
close(): void { |
||||
|
this.dialogRef.close(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,162 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2026 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-installed-table-container"> |
||||
|
<div class="tb-installed-table-wrapper"> |
||||
|
<table mat-table [dataSource]="dataSource" matSort matSortActive="createdTime" matSortDirection="desc"> |
||||
|
<!-- Name --> |
||||
|
<ng-container matColumnDef="itemName"> |
||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.item-name' | translate }}</th> |
||||
|
<td mat-cell *matCellDef="let item">{{ item.itemName }}</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Type --> |
||||
|
<ng-container matColumnDef="itemType"> |
||||
|
<th mat-header-cell *matHeaderCellDef>{{ 'iot-hub.item-type' | translate }}</th> |
||||
|
<td mat-cell *matCellDef="let item"> |
||||
|
<span class="tb-installed-type" [ngClass]="getItemTypeChipClass(item.itemType)"> |
||||
|
<mat-icon class="tb-installed-type-icon">{{ getItemTypeIcon(item.itemType) }}</mat-icon> |
||||
|
{{ getItemTypeLabel(item.itemType) }} |
||||
|
</span> |
||||
|
</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Version --> |
||||
|
<ng-container matColumnDef="version"> |
||||
|
<th mat-header-cell *matHeaderCellDef>{{ 'iot-hub.item-version' | translate }}</th> |
||||
|
<td mat-cell *matCellDef="let item">{{ item.version }}</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Installed date --> |
||||
|
<ng-container matColumnDef="createdTime"> |
||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.installed-date' | translate }}</th> |
||||
|
<td mat-cell *matCellDef="let item">{{ item.createdTime | date:'mediumDate' }}</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Updates --> |
||||
|
<ng-container matColumnDef="updates"> |
||||
|
<th mat-header-cell *matHeaderCellDef>@if (updatesChecked) { {{ 'iot-hub.updates' | translate }} }</th> |
||||
|
<td mat-cell *matCellDef="let item"> |
||||
|
@if (updatesChecked) { |
||||
|
@if (getPublishedVersionInfo(item); as pubInfo) { |
||||
|
@if (pubInfo.publishedVersionId !== item.itemVersionId) { |
||||
|
<div class="tb-installed-update-row"> |
||||
|
@if (!itemVersion) { |
||||
|
<button class="tb-installed-version-btn" (click)="viewUpdateDetails(pubInfo, item)"> |
||||
|
<mat-icon>arrow_upward</mat-icon> |
||||
|
v{{ pubInfo.publishedVersion }} {{ 'iot-hub.available' | translate }} |
||||
|
</button> |
||||
|
} |
||||
|
<button mat-stroked-button color="warn" class="tb-installed-update-btn" (click)="updateItem(item, pubInfo)"> |
||||
|
@if (itemVersion) { |
||||
|
{{ 'iot-hub.update-to-version' | translate:{ version: pubInfo.publishedVersion } }} |
||||
|
} @else { |
||||
|
{{ 'iot-hub.update' | translate }} |
||||
|
} |
||||
|
</button> |
||||
|
</div> |
||||
|
} @else { |
||||
|
<span class="tb-installed-up-to-date"> |
||||
|
<mat-icon>check</mat-icon> |
||||
|
{{ 'iot-hub.up-to-date' | translate }} |
||||
|
</span> |
||||
|
} |
||||
|
} @else { |
||||
|
<span class="tb-installed-up-to-date"> |
||||
|
<mat-icon>check</mat-icon> |
||||
|
{{ 'iot-hub.up-to-date' | translate }} |
||||
|
</span> |
||||
|
} |
||||
|
} |
||||
|
</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<!-- Actions --> |
||||
|
<ng-container matColumnDef="actions" stickyEnd> |
||||
|
<th mat-header-cell *matHeaderCellDef> |
||||
|
<div [ngClass]="itemVersion ? 'gt-sm:!hidden' : 'gt-md:!hidden'" style="min-width: 48px;"></div> |
||||
|
<div [ngClass]="itemVersion ? 'lt-md:!hidden' : 'lt-lg:!hidden'" style="min-width: 144px;"></div> |
||||
|
</th> |
||||
|
<td mat-cell *matCellDef="let item"> |
||||
|
<!-- Desktop: individual buttons --> |
||||
|
<div class="tb-installed-actions" [ngClass]="itemVersion ? 'lt-md:!hidden' : 'lt-lg:!hidden'"> |
||||
|
@if (!itemVersion || item.itemType === 'DEVICE') { |
||||
|
<button mat-icon-button (click)="viewItemDetails(item)" matTooltip="{{ (item.itemType === 'DEVICE' ? 'iot-hub.review-device-instructions' : 'iot-hub.view-item-details') | translate }}"> |
||||
|
<mat-icon>info_outline</mat-icon> |
||||
|
</button> |
||||
|
} |
||||
|
<button mat-icon-button (click)="openEntity(item)" matTooltip="{{ (item.itemType === 'SOLUTION_TEMPLATE' ? 'iot-hub.goto-main-dashboard' : 'iot-hub.open-item-type') | translate:{ type: getItemTypeLabel(item.itemType) } }}"> |
||||
|
<mat-icon>open_in_new</mat-icon> |
||||
|
</button> |
||||
|
<button mat-icon-button (click)="deleteItem(item)" matTooltip="{{ 'iot-hub.remove' | translate }}"> |
||||
|
<tb-icon>mdi:trash-can-outline</tb-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<!-- Mobile: dropdown menu --> |
||||
|
<div [ngClass]="itemVersion ? 'gt-sm:!hidden' : 'gt-md:!hidden'"> |
||||
|
<button mat-icon-button (click)="$event.stopPropagation()" [matMenuTriggerFor]="actionsMenu"> |
||||
|
<mat-icon>more_vert</mat-icon> |
||||
|
</button> |
||||
|
<mat-menu #actionsMenu="matMenu" xPosition="before"> |
||||
|
@if (!itemVersion || item.itemType === 'DEVICE') { |
||||
|
<button mat-menu-item (click)="viewItemDetails(item)"> |
||||
|
<mat-icon>info_outline</mat-icon> |
||||
|
<span>{{ (item.itemType === 'DEVICE' ? 'iot-hub.review-device-instructions' : 'iot-hub.view-item-details') | translate }}</span> |
||||
|
</button> |
||||
|
} |
||||
|
<button mat-menu-item (click)="openEntity(item)"> |
||||
|
<mat-icon>open_in_new</mat-icon> |
||||
|
<span>{{ (item.itemType === 'SOLUTION_TEMPLATE' ? 'iot-hub.goto-main-dashboard' : 'iot-hub.open-item-type') | translate:{ type: getItemTypeLabel(item.itemType) } }}</span> |
||||
|
</button> |
||||
|
<button mat-menu-item (click)="deleteItem(item)"> |
||||
|
<tb-icon>mdi:trash-can-outline</tb-icon> |
||||
|
<span>{{ 'iot-hub.remove' | translate }}</span> |
||||
|
</button> |
||||
|
</mat-menu> |
||||
|
</div> |
||||
|
</td> |
||||
|
</ng-container> |
||||
|
|
||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> |
||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
|
||||
|
@if (isLoading) { |
||||
|
<div class="tb-installed-loading"> |
||||
|
<mat-spinner diameter="40"></mat-spinner> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
@if (!isLoading && dataSource.length === 0) { |
||||
|
<div class="tb-installed-empty"> |
||||
|
{{ 'iot-hub.no-installed-items' | translate }} |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<!-- Paginator inside border --> |
||||
|
<mat-divider></mat-divider> |
||||
|
<mat-paginator |
||||
|
[length]="totalElements" |
||||
|
[pageSize]="pageSize" |
||||
|
[pageIndex]="pageIndex" |
||||
|
[pageSizeOptions]="[10, 25, 50]" |
||||
|
[hidePageSize]="hidePageSize" |
||||
|
(page)="onPageChange($event)" |
||||
|
showFirstLastButtons> |
||||
|
</mat-paginator> |
||||
|
</div> |
||||
@ -0,0 +1,274 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2026 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
@import "../../../../../scss/constants"; |
||||
|
|
||||
|
:host { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
// Table + paginator container — unified border |
||||
|
.tb-installed-table-container { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.tb-installed-table-wrapper { |
||||
|
overflow: auto; |
||||
|
flex: 1; |
||||
|
|
||||
|
table { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
// Header cells — Design: 16px Medium, rgba(0,0,0,0.87), tracking 0.25 |
||||
|
th.mat-mdc-header-cell { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
|
||||
|
// Body cells — Design: 14px Regular, rgba(0,0,0,0.76), tracking 0.2 |
||||
|
td.mat-mdc-cell { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// Column sizing |
||||
|
.mat-column-itemName { |
||||
|
width: 50%; |
||||
|
min-width: 200px; |
||||
|
max-width: 50%; |
||||
|
} |
||||
|
|
||||
|
.mat-column-itemType { |
||||
|
width: 50%; |
||||
|
min-width: 50%; |
||||
|
max-width: 50%; |
||||
|
} |
||||
|
|
||||
|
.mat-column-version { |
||||
|
width: 80px; |
||||
|
min-width: 80px; |
||||
|
max-width: 80px; |
||||
|
} |
||||
|
|
||||
|
.mat-column-createdTime { |
||||
|
width: 100px; |
||||
|
min-width: 100px; |
||||
|
max-width: 100px; |
||||
|
} |
||||
|
|
||||
|
.mat-column-updates { |
||||
|
width: 250px; |
||||
|
min-width: 250px; |
||||
|
max-width: 250px; |
||||
|
} |
||||
|
|
||||
|
.mat-column-actions { |
||||
|
width: 108px; |
||||
|
min-width: 108px; |
||||
|
max-width: 108px; |
||||
|
} |
||||
|
|
||||
|
::ng-deep .mat-mdc-paginator-range-label { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
// Nowrap columns |
||||
|
.mat-column-itemType, |
||||
|
.mat-column-createdTime, |
||||
|
.mat-column-updates { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
// Type chip — Design: pill, h-32, rounded-16, px-12 py-6, gap-4, bg at 6% opacity |
||||
|
.tb-installed-type { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
height: 32px; |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 16px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
} |
||||
|
|
||||
|
.tb-installed-type-icon { |
||||
|
font-size: 18px; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
color: inherit !important; |
||||
|
--mat-icon-color: currentColor; |
||||
|
} |
||||
|
|
||||
|
.tb-type-widget { color: rgb(32, 115, 61); background: rgba(46, 166, 88, 0.06); } |
||||
|
.tb-type-dashboard { color: rgb(61, 76, 166); background: rgba(61, 76, 166, 0.06); } |
||||
|
.tb-type-solution-template { color: rgb(0, 137, 186); background: rgba(0, 137, 186, 0.06); } |
||||
|
.tb-type-calc-field { color: rgb(40, 120, 148); background: rgba(40, 120, 148, 0.06); } |
||||
|
.tb-type-rule-chain { color: rgb(178, 121, 29); background: rgba(179, 121, 29, 0.06); } |
||||
|
.tb-type-device { color: rgb(24, 146, 110); background: rgba(24, 146, 110, 0.06); } |
||||
|
|
||||
|
// Update row — flex container for version btn + update btn |
||||
|
.tb-installed-update-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
// "vX.X.X Available" button — Design: border rgba(0,0,0,0.12), rounded-4, px-12 py-6, gap-8 |
||||
|
.tb-installed-version-btn { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
background: none; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
border-radius: 4px; |
||||
|
padding: 6px 12px; |
||||
|
cursor: pointer; |
||||
|
font-family: inherit; |
||||
|
|
||||
|
mat-icon { |
||||
|
font-size: 18px; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
color: inherit !important; |
||||
|
--mat-icon-color: currentColor; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background: rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// "Update" button — Design: same height as available btn, border matches text color |
||||
|
.tb-installed-update-btn.mat-mdc-outlined-button { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
padding: 6px 12px; |
||||
|
height: auto; |
||||
|
--mat-button-outlined-outline-color: var(--mat-button-outlined-label-text-color); |
||||
|
} |
||||
|
|
||||
|
// "Up to date" — Design: 14px Medium, #198038, gap-8, py-6 |
||||
|
.tb-installed-up-to-date { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: #198038; |
||||
|
padding: 6px 0; |
||||
|
|
||||
|
mat-icon { |
||||
|
font-size: 18px; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
color: inherit !important; |
||||
|
--mat-icon-color: currentColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Actions column |
||||
|
.tb-installed-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 0; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.mat-mdc-icon-button { |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
padding: 6px; |
||||
|
--mdc-icon-button-state-layer-size: 36px; |
||||
|
--mdc-icon-button-icon-color: rgba(0, 0, 0, 0.54); |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Loading / Empty |
||||
|
.tb-installed-loading { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 48px 0; |
||||
|
} |
||||
|
|
||||
|
.tb-installed-empty { |
||||
|
text-align: center; |
||||
|
padding: 48px 0; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
:host(:not(.tb-installed-with-version)) { |
||||
|
@media #{$mat-lt-lg} { |
||||
|
.mat-column-actions { |
||||
|
width: 36px; |
||||
|
min-width: 36px; |
||||
|
max-width: 36px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host(.tb-installed-with-version) { |
||||
|
.mat-column-version { |
||||
|
width: 160px; |
||||
|
min-width: 0; |
||||
|
max-width: 160px; |
||||
|
} |
||||
|
|
||||
|
.mat-column-createdTime { |
||||
|
width: 200px; |
||||
|
min-width: 0; |
||||
|
max-width: 200px; |
||||
|
} |
||||
|
|
||||
|
.mat-column-updates { |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-lt-md} { |
||||
|
.mat-column-actions { |
||||
|
width: 36px; |
||||
|
min-width: 36px; |
||||
|
max-width: 36px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,395 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
HostBinding, |
||||
|
Input, |
||||
|
NgZone, |
||||
|
OnChanges, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
SimpleChanges, |
||||
|
ViewChild |
||||
|
} from '@angular/core'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||
|
import { IotHubApiService } from '@core/http/iot-hub-api.service'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
||||
|
import { switchMap } from 'rxjs/operators'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
||||
|
import { |
||||
|
DeviceInstalledItemDescriptor, |
||||
|
IotHubInstalledItem, |
||||
|
ItemPublishedVersionInfo |
||||
|
} from '@shared/models/iot-hub/iot-hub-installed-item.models'; |
||||
|
import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models'; |
||||
|
import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { getEntityDetailsPageURL } from '@core/utils'; |
||||
|
import { |
||||
|
IotHubItemDetailDialogData, |
||||
|
TbIotHubItemDetailDialogComponent |
||||
|
} from '@home/components/iot-hub/iot-hub-item-detail-dialog.component'; |
||||
|
import { |
||||
|
IotHubUpdateDialogData, |
||||
|
TbIotHubUpdateDialogComponent |
||||
|
} from '@home/components/iot-hub/iot-hub-update-dialog.component'; |
||||
|
import { |
||||
|
IotHubDeleteDialogData, |
||||
|
TbIotHubDeleteDialogComponent |
||||
|
} from '@home/components/iot-hub/iot-hub-delete-dialog.component'; |
||||
|
import { |
||||
|
DeviceInstallDialogData, |
||||
|
TbDeviceInstallDialogComponent |
||||
|
} from '@home/components/iot-hub/device-install-dialog/device-install-dialog.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-iot-hub-installed-items-table', |
||||
|
standalone: false, |
||||
|
templateUrl: './iot-hub-installed-items-table.component.html', |
||||
|
styleUrls: ['./iot-hub-installed-items-table.component.scss'] |
||||
|
}) |
||||
|
export class TbIotHubInstalledItemsTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy { |
||||
|
|
||||
|
@Input() textSearch = ''; |
||||
|
@Input() typeFilters: string[] = []; |
||||
|
@Input() itemVersion: MpItemVersionView; |
||||
|
|
||||
|
@HostBinding('class.tb-installed-with-version') get withVersionClass() { |
||||
|
return !!this.itemVersion; |
||||
|
} |
||||
|
|
||||
|
displayedColumns: string[] = ['itemName', 'itemType', 'version', 'createdTime', 'updates', 'actions']; |
||||
|
dataSource: IotHubInstalledItem[] = []; |
||||
|
totalElements = 0; |
||||
|
pageSize = 10; |
||||
|
pageIndex = 0; |
||||
|
hidePageSize = false; |
||||
|
isLoading = false; |
||||
|
|
||||
|
publishedVersionMap = new Map<string, ItemPublishedVersionInfo>(); |
||||
|
updatesChecked = false; |
||||
|
isCheckingUpdates = false; |
||||
|
|
||||
|
private widgetResize$: ResizeObserver; |
||||
|
|
||||
|
@ViewChild(MatSort, {static: true}) sort: MatSort; |
||||
|
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; |
||||
|
|
||||
|
constructor( |
||||
|
private iotHubApiService: IotHubApiService, |
||||
|
private translate: TranslateService, |
||||
|
private store: Store<AppState>, |
||||
|
private router: Router, |
||||
|
private dialog: MatDialog, |
||||
|
private elementRef: ElementRef, |
||||
|
private zone: NgZone, |
||||
|
private cd: ChangeDetectorRef |
||||
|
) { |
||||
|
this.widgetResize$ = new ResizeObserver(() => { |
||||
|
this.zone.run(() => { |
||||
|
const shouldHide = this.elementRef.nativeElement.offsetWidth < 640; |
||||
|
if (shouldHide !== this.hidePageSize) { |
||||
|
this.hidePageSize = shouldHide; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
this.widgetResize$.observe(this.elementRef.nativeElement); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
if (this.itemVersion) { |
||||
|
this.displayedColumns = ['version', 'createdTime', 'updates', 'actions']; |
||||
|
this.updatesChecked = true; |
||||
|
this.publishedVersionMap.set(this.itemVersion.itemId, { |
||||
|
itemId: this.itemVersion.itemId, |
||||
|
publishedVersionId: this.itemVersion.id, |
||||
|
publishedVersion: this.itemVersion.version |
||||
|
}); |
||||
|
} |
||||
|
this.loadData(); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
if (changes.textSearch || changes.typeFilters) { |
||||
|
if (!changes.textSearch?.firstChange || !changes.typeFilters?.firstChange) { |
||||
|
this.pageIndex = 0; |
||||
|
if (this.paginator) { |
||||
|
this.paginator.pageIndex = 0; |
||||
|
} |
||||
|
this.loadData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
this.sort.sortChange.subscribe(() => { |
||||
|
this.pageIndex = 0; |
||||
|
this.paginator.pageIndex = 0; |
||||
|
this.loadData(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.widgetResize$?.disconnect(); |
||||
|
} |
||||
|
|
||||
|
onPageChange(event: any): void { |
||||
|
this.pageIndex = event.pageIndex; |
||||
|
this.pageSize = event.pageSize; |
||||
|
this.loadData(); |
||||
|
} |
||||
|
|
||||
|
getItemTypeIcon(itemType: string): string { |
||||
|
switch (itemType) { |
||||
|
case 'WIDGET': return 'widgets'; |
||||
|
case 'DASHBOARD': return 'dashboard'; |
||||
|
case 'SOLUTION_TEMPLATE': return 'integration_instructions'; |
||||
|
case 'CALCULATED_FIELD': return 'functions'; |
||||
|
case 'RULE_CHAIN': return 'settings_ethernet'; |
||||
|
case 'DEVICE': return 'memory'; |
||||
|
default: return 'category'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
deleteItem(item: IotHubInstalledItem): void { |
||||
|
const dialogRef = this.dialog.open(TbIotHubDeleteDialogComponent, { |
||||
|
panelClass: ['tb-dialog'], |
||||
|
autoFocus: false, |
||||
|
data: { itemName: item.itemName, itemType: item.itemType } as IotHubDeleteDialogData |
||||
|
}); |
||||
|
dialogRef.afterClosed().subscribe(confirmed => { |
||||
|
if (confirmed) { |
||||
|
this.iotHubApiService.deleteInstalledItem(item.id.id).subscribe({ |
||||
|
next: () => { |
||||
|
this.store.dispatch(new ActionNotificationShow({ |
||||
|
message: this.translate.instant('iot-hub.installed-item-removed', {name: item.itemName}), |
||||
|
type: 'success', |
||||
|
duration: 3000 |
||||
|
})); |
||||
|
this.loadData(); |
||||
|
}, |
||||
|
error: () => { |
||||
|
this.store.dispatch(new ActionNotificationShow({ |
||||
|
message: this.translate.instant('iot-hub.installed-item-remove-error', {name: item.itemName}), |
||||
|
type: 'error', |
||||
|
duration: 5000 |
||||
|
})); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
getItemTypeLabel(itemType: string): string { |
||||
|
const key = itemTypeTranslations.get(itemType as ItemType); |
||||
|
return key ? this.translate.instant(key) : itemType; |
||||
|
} |
||||
|
|
||||
|
getItemTypeChipClass(itemType: string): string { |
||||
|
switch (itemType) { |
||||
|
case 'WIDGET': return 'tb-type-widget'; |
||||
|
case 'DASHBOARD': return 'tb-type-dashboard'; |
||||
|
case 'CALCULATED_FIELD': return 'tb-type-calc-field'; |
||||
|
case 'RULE_CHAIN': return 'tb-type-rule-chain'; |
||||
|
case 'DEVICE': return 'tb-type-device'; |
||||
|
case 'SOLUTION_TEMPLATE': return 'tb-type-solution-template'; |
||||
|
default: return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
viewItemDetails(item: IotHubInstalledItem): void { |
||||
|
if (item.itemType === 'DEVICE') { |
||||
|
this.openDeviceReviewDialog(item); |
||||
|
return; |
||||
|
} |
||||
|
this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true}).subscribe(versionView => { |
||||
|
const dialogRef = this.dialog.open(TbIotHubItemDetailDialogComponent, { |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
autoFocus: false, |
||||
|
data: { |
||||
|
item: versionView, |
||||
|
installedItem: item |
||||
|
} as IotHubItemDetailDialogData |
||||
|
}); |
||||
|
dialogRef.afterClosed().subscribe(result => { |
||||
|
if (result === 'updated' || result === 'deleted') { |
||||
|
this.loadData(); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private openDeviceReviewDialog(item: IotHubInstalledItem): void { |
||||
|
const descriptor = item.descriptor as DeviceInstalledItemDescriptor; |
||||
|
if (!descriptor.installState || !descriptor.selectedInstallMethod) { |
||||
|
this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true}).subscribe(versionView => { |
||||
|
this.dialog.open(TbIotHubItemDetailDialogComponent, { |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
autoFocus: false, |
||||
|
data: { item: versionView, installedItem: item } as IotHubItemDetailDialogData |
||||
|
}); |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
this.iotHubApiService.getVersionFileData(item.itemVersionId, { ignoreLoading: true, ignoreErrors: true }).subscribe({ |
||||
|
next: async (blob: Blob) => { |
||||
|
const zipData = await blob.arrayBuffer(); |
||||
|
this.iotHubApiService.getVersionInfo(item.itemVersionId, {ignoreLoading: true, ignoreErrors: true}).subscribe(versionView => { |
||||
|
this.dialog.open(TbDeviceInstallDialogComponent, { |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog-lt-md'], |
||||
|
disableClose: false, |
||||
|
autoFocus: false, |
||||
|
data: { |
||||
|
item: versionView, |
||||
|
zipData, |
||||
|
reviewMode: true, |
||||
|
selectedInstallMethod: descriptor.selectedInstallMethod, |
||||
|
installState: descriptor.installState |
||||
|
} as DeviceInstallDialogData |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
getEntityId(item: IotHubInstalledItem): string | null { |
||||
|
const descriptor = item.descriptor; |
||||
|
switch (descriptor.type) { |
||||
|
case 'WIDGET': return descriptor.widgetTypeId?.id; |
||||
|
case 'DASHBOARD': return descriptor.dashboardId?.id; |
||||
|
case 'CALCULATED_FIELD': return descriptor.entityId?.id; |
||||
|
case 'RULE_CHAIN': return descriptor.ruleChainId?.id; |
||||
|
case 'DEVICE': return descriptor.dashboardId?.id ?? null; |
||||
|
case 'SOLUTION_TEMPLATE': return descriptor.dashboardId?.id; |
||||
|
default: return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getEntityType(item: IotHubInstalledItem): EntityType | null { |
||||
|
const descriptor = item.descriptor; |
||||
|
switch (descriptor.type) { |
||||
|
case 'WIDGET': return EntityType.WIDGET_TYPE; |
||||
|
case 'DASHBOARD': return EntityType.DASHBOARD; |
||||
|
case 'CALCULATED_FIELD': return descriptor.entityId?.entityType as EntityType; |
||||
|
case 'RULE_CHAIN': return EntityType.RULE_CHAIN; |
||||
|
case 'DEVICE': return descriptor.dashboardId ? EntityType.DASHBOARD : null; |
||||
|
case 'SOLUTION_TEMPLATE': return EntityType.DASHBOARD; |
||||
|
default: return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
openEntity(item: IotHubInstalledItem): void { |
||||
|
const entityType = this.getEntityType(item); |
||||
|
const entityId = this.getEntityId(item); |
||||
|
if (entityType && entityId) { |
||||
|
const url = getEntityDetailsPageURL(entityId, entityType); |
||||
|
if (url) { |
||||
|
window.open(this.router.serializeUrl(this.router.parseUrl(url)), '_blank'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
checkForUpdates(): void { |
||||
|
this.isCheckingUpdates = true; |
||||
|
this.iotHubApiService.getInstalledItemIds({ ignoreLoading: true }).pipe( |
||||
|
switchMap(itemIds => this.iotHubApiService.getItemsPublishedVersions(itemIds, { ignoreLoading: true })) |
||||
|
).subscribe({ |
||||
|
next: (infos) => { |
||||
|
this.publishedVersionMap.clear(); |
||||
|
infos.forEach(info => this.publishedVersionMap.set(info.itemId, info)); |
||||
|
this.updatesChecked = true; |
||||
|
this.isCheckingUpdates = false; |
||||
|
}, |
||||
|
error: () => { |
||||
|
this.isCheckingUpdates = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
viewUpdateDetails(publishedInfo: ItemPublishedVersionInfo, installedItem: IotHubInstalledItem): void { |
||||
|
this.iotHubApiService.getVersionInfo(publishedInfo.publishedVersionId, {ignoreLoading: true}).subscribe(versionView => { |
||||
|
const dialogRef = this.dialog.open(TbIotHubItemDetailDialogComponent, { |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
autoFocus: false, |
||||
|
data: { |
||||
|
item: versionView, |
||||
|
installedItem |
||||
|
} as IotHubItemDetailDialogData |
||||
|
}); |
||||
|
dialogRef.afterClosed().subscribe(result => { |
||||
|
if (result === 'updated' || result === 'deleted') { |
||||
|
this.loadData(); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
updateItem(item: IotHubInstalledItem, publishedInfo: ItemPublishedVersionInfo): void { |
||||
|
const dialogRef = this.dialog.open(TbIotHubUpdateDialogComponent, { |
||||
|
panelClass: ['tb-dialog'], |
||||
|
data: { |
||||
|
installedItemId: item.id.id, |
||||
|
itemName: item.itemName, |
||||
|
itemType: item.itemType as ItemType, |
||||
|
version: publishedInfo.publishedVersion, |
||||
|
versionId: publishedInfo.publishedVersionId, |
||||
|
} as IotHubUpdateDialogData |
||||
|
}); |
||||
|
dialogRef.afterClosed().subscribe(result => { |
||||
|
if (result === 'updated') { |
||||
|
this.loadData(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
getPublishedVersionInfo(item: IotHubInstalledItem): ItemPublishedVersionInfo | undefined { |
||||
|
return this.publishedVersionMap.get(item.itemId); |
||||
|
} |
||||
|
|
||||
|
private loadData(): void { |
||||
|
this.isLoading = true; |
||||
|
const sortOrder: SortOrder = { |
||||
|
property: this.sort?.active || 'createdTime', |
||||
|
direction: this.sort?.direction === 'asc' ? Direction.ASC : Direction.DESC |
||||
|
}; |
||||
|
const pageLink = new PageLink(this.pageSize, this.pageIndex, this.textSearch || null, sortOrder); |
||||
|
const typeFilters = this.typeFilters?.length ? this.typeFilters : null; |
||||
|
this.iotHubApiService.getInstalledItems(pageLink, typeFilters, this.itemVersion?.itemId, {ignoreLoading: true}).subscribe({ |
||||
|
next: (data) => { |
||||
|
this.dataSource = data.data; |
||||
|
this.totalElements = data.totalElements; |
||||
|
this.isLoading = false; |
||||
|
}, |
||||
|
error: () => { |
||||
|
this.dataSource = []; |
||||
|
this.totalElements = 0; |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,174 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2026 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, Directive, ElementRef, Input, NgZone, OnDestroy, Renderer2 } from '@angular/core'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[tb-chip-overflow]', |
||||
|
standalone: false |
||||
|
}) |
||||
|
export class ChipOverflowDirective implements AfterViewInit, OnDestroy { |
||||
|
|
||||
|
@Input() chipSelector = '.tb-chip'; |
||||
|
@Input() gap = 8; |
||||
|
@Input() overflowTemplate = '+{n}'; |
||||
|
@Input() overflowClass = 'tb-overflow-chip'; |
||||
|
@Input() minChips = 1; |
||||
|
|
||||
|
private resizeObserver?: ResizeObserver; |
||||
|
private mutationObserver?: MutationObserver; |
||||
|
private overflowEl!: HTMLElement; |
||||
|
private timeoutId?: NodeJS.Timeout; |
||||
|
|
||||
|
constructor( |
||||
|
private host: ElementRef<HTMLElement>, |
||||
|
private renderer: Renderer2, |
||||
|
private zone: NgZone |
||||
|
) {} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
this.prepareHost(); |
||||
|
this.createOverflowChip(); |
||||
|
this.zone.runOutsideAngular(() => { |
||||
|
requestAnimationFrame(() => { |
||||
|
this.reflow(); |
||||
|
this.observeResize(); |
||||
|
this.observeMutations(); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.resizeObserver?.disconnect(); |
||||
|
this.mutationObserver?.disconnect(); |
||||
|
if (this.timeoutId) { |
||||
|
clearTimeout(this.timeoutId); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private prepareHost() { |
||||
|
const el = this.host.nativeElement; |
||||
|
const styles: { [key: string]: string } = { |
||||
|
display: 'flex', |
||||
|
flexWrap: 'nowrap', |
||||
|
alignItems: 'center', |
||||
|
overflow: 'hidden', |
||||
|
gap: `${this.gap}px`, |
||||
|
whiteSpace: 'nowrap', |
||||
|
minWidth: '0' |
||||
|
}; |
||||
|
Object.entries(styles).forEach(([prop, value]) => |
||||
|
this.renderer.setStyle(el, prop, value) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private createOverflowChip() { |
||||
|
this.overflowEl = this.renderer.createElement('div') as HTMLElement; |
||||
|
this.renderer.setProperty(this.overflowEl, 'className', this.overflowClass); |
||||
|
this.renderer.setStyle(this.overflowEl, 'display', 'none'); |
||||
|
this.renderer.setStyle(this.overflowEl, 'userSelect', 'none'); |
||||
|
this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none'); |
||||
|
this.renderer.appendChild(this.host.nativeElement, this.overflowEl); |
||||
|
} |
||||
|
|
||||
|
private observeResize(): void { |
||||
|
this.resizeObserver = new ResizeObserver(() => { |
||||
|
if (this.timeoutId) { |
||||
|
clearTimeout(this.timeoutId); |
||||
|
} |
||||
|
this.timeoutId = setTimeout(() => this.reflow()); |
||||
|
}); |
||||
|
this.resizeObserver.observe(this.host.nativeElement); |
||||
|
} |
||||
|
|
||||
|
private observeMutations(): void { |
||||
|
this.mutationObserver = new MutationObserver(mutations => { |
||||
|
const relevantMutations = mutations.some( |
||||
|
mutation => |
||||
|
mutation.type === 'childList' && |
||||
|
Array.from(mutation.addedNodes).some(node => node instanceof HTMLElement && node.matches(this.chipSelector)) || |
||||
|
Array.from(mutation.removedNodes).some(node => node instanceof HTMLElement && node.matches(this.chipSelector)) |
||||
|
); |
||||
|
|
||||
|
if (relevantMutations) { |
||||
|
if (this.timeoutId) { |
||||
|
clearTimeout(this.timeoutId); |
||||
|
} |
||||
|
this.timeoutId = setTimeout(() => this.reflow()); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.mutationObserver.observe(this.host.nativeElement, { |
||||
|
childList: true, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private reflow() { |
||||
|
const container = this.host.nativeElement; |
||||
|
const chips = Array.from(container.querySelectorAll<HTMLElement>(this.chipSelector)) |
||||
|
.filter(el => el !== this.overflowEl); |
||||
|
|
||||
|
if (!chips.length) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 1. Show all chips to measure their natural widths
|
||||
|
chips.forEach(chip => this.renderer.setStyle(chip, 'display', '')); |
||||
|
this.renderer.setStyle(this.overflowEl, 'display', 'none'); |
||||
|
|
||||
|
const chipWidths = chips.map(chip => Math.ceil(chip.offsetWidth)); |
||||
|
|
||||
|
// 2. Hide everything to measure the true available width
|
||||
|
// without content inflating the table cell
|
||||
|
chips.forEach(chip => this.renderer.setStyle(chip, 'display', 'none')); |
||||
|
|
||||
|
const availableWidth = container.clientWidth; |
||||
|
|
||||
|
if (!availableWidth) { |
||||
|
chips.forEach(chip => this.renderer.setStyle(chip, 'display', '')); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 3. Measure overflow chip width
|
||||
|
this.renderer.setProperty(this.overflowEl, 'textContent', this.overflowTemplate.replace('{n}', '9')); |
||||
|
this.renderer.setStyle(this.overflowEl, 'display', 'inline-flex'); |
||||
|
const minOverflowWidth = this.overflowEl.offsetWidth; |
||||
|
this.renderer.setStyle(this.overflowEl, 'display', 'none'); |
||||
|
|
||||
|
// 4. Determine which chips fit
|
||||
|
let usedWidth = 0; |
||||
|
let hiddenCount = 0; |
||||
|
const minChips = Math.max(1, this.minChips); |
||||
|
|
||||
|
for (let i = 0; i < chips.length; i++) { |
||||
|
const chipWidth = chipWidths[i]; |
||||
|
const nextUsedWidth = usedWidth ? usedWidth + this.gap + chipWidth : chipWidth; |
||||
|
const withOverflow = nextUsedWidth + (nextUsedWidth ? this.gap : 0) + minOverflowWidth; |
||||
|
|
||||
|
if (i < minChips || withOverflow <= availableWidth) { |
||||
|
this.renderer.setStyle(chips[i], 'display', 'inline-flex'); |
||||
|
usedWidth = nextUsedWidth; |
||||
|
} else { |
||||
|
hiddenCount++; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (hiddenCount > 0) { |
||||
|
this.renderer.setProperty(this.overflowEl, 'textContent', this.overflowTemplate.replace('{n}', String(hiddenCount))); |
||||
|
this.renderer.setStyle(this.overflowEl, 'display', 'inline-flex'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue