Browse Source

feat(iot-hub): unify empty/loading state in installed-items table

- Replace the plain text empty placeholder with the same illustration +
  title + subtitle layout used by tb-iot-hub-empty-state in the browse
  component (no-data illustration, 18/500 title, 14/0.54 body).
- Add a no-installed-items-text locale key ("Try adjusting your search
  or filters.").
- Make the table wrapper a flex column and place the empty state and
  loading spinner inside it as flex-1 children so both vertically
  centre below the sticky header instead of pinning to the top.
pull/15615/head
Igor Kulikov 1 month ago
parent
commit
bb28862df6
  1. 26
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html
  2. 21
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss
  3. 1
      ui-ngx/src/assets/locale/locale.constant-en_US.json

26
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html

@ -16,7 +16,7 @@
-->
<div class="tb-installed-table-container flex flex-1 flex-col overflow-hidden rounded-lg">
<div class="tb-installed-table-wrapper flex-1 overflow-auto">
<div class="tb-installed-table-wrapper flex flex-1 flex-col overflow-auto">
<table mat-table [dataSource]="dataSource" matSort matSortActive="createdTime" matSortDirection="desc">
<!-- Name -->
<ng-container matColumnDef="itemName">
@ -134,19 +134,21 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let _row; columns: displayedColumns;"></tr>
</table>
</div>
@if (isLoading) {
<div class="flex justify-center py-12">
<mat-spinner diameter="40"></mat-spinner>
</div>
}
@if (isLoading) {
<div class="flex flex-1 items-center justify-center py-12">
<mat-spinner diameter="40"></mat-spinner>
</div>
}
@if (!isLoading && dataSource.length === 0) {
<div class="tb-installed-empty py-12 text-center text-sm">
{{ 'iot-hub.no-installed-items' | translate }}
</div>
}
@if (!isLoading && dataSource.length === 0) {
<div class="tb-iot-hub-empty-state flex flex-1 flex-col items-center justify-center py-20 text-center">
<div class="tb-no-data-bg"></div>
<h3>{{ 'iot-hub.no-installed-items' | translate }}</h3>
<p>{{ 'iot-hub.no-installed-items-text' | translate }}</p>
</div>
}
</div>
<!-- Paginator inside border -->
<mat-divider></mat-divider>

21
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss

@ -203,8 +203,25 @@
}
}
.tb-installed-empty {
color: rgba(0, 0, 0, 0.54);
// Empty state mirrors the browse component's tb-iot-hub-empty-state
.tb-iot-hub-empty-state {
.tb-no-data-bg {
flex: auto;
height: 100px;
}
h3 {
font-size: 18px;
font-weight: 500;
color: rgba(0, 0, 0, 0.87);
margin: 16px 0 8px;
}
p {
font-size: 14px;
color: rgba(0, 0, 0, 0.54);
margin: 0;
}
}
:host(:not(.tb-installed-with-version)) {

1
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -3854,6 +3854,7 @@
"item-version": "Version",
"installed-date": "Installed",
"no-installed-items": "No installed items found",
"no-installed-items-text": "Try adjusting your search or filters.",
"remove-installed-item-title": "Remove Installed Item",
"remove-installed-item-text": "Are you sure you want to remove '{{name}}'? The installed entity will also be removed.",
"installed-item-removed": "'{{name}}' has been removed",

Loading…
Cancel
Save