Browse Source
Search component: - New TbIotHubSearchComponent in home/components/iot-hub/ with search toolbar, pagination, grouped results, sort, loading/empty states - Inputs: searchText (two-way), creatorId, showCreator; ng-content for title - Custom search input (320x40px, border, search icon, clear button) - Sort icon-only button on lt-sm, mobile results count in title row - Divider before categories section Search page: - Renamed to TbIotHubSearchPageComponent, embeds TbIotHubSearchComponent - Title projected via ng-content, responsive inset padding per breakpoint - Full-height layout with flex Creator profile: - Two-column layout: creator info (360px) + vertical divider + published items - Uses TbIotHubSearchComponent with creatorId and showCreator=false - 140px avatar, 28px name, description, link rows with hover styles - Responsive: column layout on lt-lg, adjustable padding per breakpoint - Back button inside creator info column Item detail dialog: - showCreator parameter (default true), hides author section when false - openItemDetail service method accepts showCreator argument Item card: - Respects showCreator input, hides author in both compact and big layoutspull/15508/head
Igor Kulikov
6 months ago
16 changed files with 838 additions and 359 deletions
@ -0,0 +1,143 @@ |
|||
<!-- |
|||
|
|||
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-search-title-row"> |
|||
<ng-content></ng-content> |
|||
@if (!isLoading && totalElements > 0) { |
|||
<span class="tb-search-results-count tb-search-results-count-mobile"> |
|||
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }} |
|||
</span> |
|||
} |
|||
</div> |
|||
<!-- Search + Sort row --> |
|||
<div class="tb-search-toolbar"> |
|||
<div class="tb-search-input-field"> |
|||
<mat-icon class="tb-search-input-icon">search</mat-icon> |
|||
<input class="tb-search-input" |
|||
[placeholder]="'iot-hub.search' | translate" |
|||
[(ngModel)]="searchText" |
|||
(input)="onSearchInput()" |
|||
(keyup.enter)="onSearchEnter()"> |
|||
@if (searchText) { |
|||
<button mat-icon-button class="tb-search-input-clear" (click)="clearSearch()"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
} |
|||
</div> |
|||
<button mat-button color="primary" class="tb-search-sort-btn tb-search-sort-btn-full" [matMenuTriggerFor]="sortMenu"> |
|||
<mat-icon>filter_list</mat-icon> |
|||
{{ sortOptions[selectedSortIndex].label | translate }} |
|||
</button> |
|||
<button mat-icon-button color="primary" class="tb-search-sort-btn tb-search-sort-btn-icon" [matMenuTriggerFor]="sortMenu"> |
|||
<mat-icon>filter_list</mat-icon> |
|||
</button> |
|||
<mat-menu #sortMenu="matMenu"> |
|||
@for (option of sortOptions; track option.value; let i = $index) { |
|||
<button mat-menu-item (click)="onSortChange(i)">{{ option.label | translate }}</button> |
|||
} |
|||
</mat-menu> |
|||
</div> |
|||
|
|||
<!-- Results count + Pagination (shown when results exist) --> |
|||
@if (!isLoading && totalElements > 0) { |
|||
<div class="tb-search-pagination-row"> |
|||
<span class="tb-search-results-count"> |
|||
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }} |
|||
</span> |
|||
<div class="tb-search-pagination"> |
|||
<div class="tb-search-pagination-pages"> |
|||
<button mat-icon-button [disabled]="pageIndex === 0" (click)="goToPage(pageIndex - 1)"> |
|||
<mat-icon>chevron_left</mat-icon> |
|||
</button> |
|||
@for (p of getPageNumbers(); track p) { |
|||
<button class="tb-search-page-btn" [class.active]="p === pageIndex" (click)="goToPage(p)"> |
|||
{{ p + 1 }} |
|||
</button> |
|||
} |
|||
<button mat-icon-button [disabled]="pageIndex >= totalPages - 1" (click)="goToPage(pageIndex + 1)"> |
|||
<mat-icon>chevron_right</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="tb-search-page-size"> |
|||
<span>{{ 'iot-hub.items-per-page' | translate }}:</span> |
|||
<mat-select [value]="pageSize" (selectionChange)="onPageSizeChange($event.value)" class="tb-search-page-size-select"> |
|||
@for (size of pageSizeOptions; track size) { |
|||
<mat-option [value]="size">{{ size }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
<!-- No results count when 0 --> |
|||
@if (!isLoading && totalElements === 0 && searchText?.trim()) { |
|||
<div class="tb-search-pagination-row"> |
|||
<span class="tb-search-results-count"> |
|||
{{ 'iot-hub.results-count' | translate:{ count: 0 } }} |
|||
</span> |
|||
</div> |
|||
} |
|||
|
|||
<!-- Loading --> |
|||
@if (isLoading) { |
|||
<div class="tb-search-loading"> |
|||
<mat-spinner diameter="40"></mat-spinner> |
|||
</div> |
|||
} |
|||
|
|||
<!-- No results --> |
|||
@if (!isLoading && totalElements === 0 && searchText?.trim()) { |
|||
<div class="tb-search-empty"> |
|||
<mat-icon class="tb-search-empty-icon">search_off</mat-icon> |
|||
<h3>{{ 'iot-hub.no-items-found' | translate }}</h3> |
|||
<p>{{ 'iot-hub.try-adjusting-search' | translate }}</p> |
|||
</div> |
|||
} |
|||
|
|||
<!-- Results grouped by type --> |
|||
@if (!isLoading && resultGroups.length > 0) { |
|||
<div class="tb-search-divider"></div> |
|||
<div class="tb-search-categories"> |
|||
@for (group of resultGroups; track group.type) { |
|||
<div class="tb-search-section"> |
|||
<!-- Section header --> |
|||
<button mat-button class="tb-search-section-header" (click)="navigateToType(group.type)"> |
|||
{{ getTypeLabel(group.type) }} |
|||
<mat-icon>chevron_right</mat-icon> |
|||
</button> |
|||
<!-- Card grid --> |
|||
<div class="tb-search-card-grid" [class.tb-search-card-grid-compact]="isCompactType(group.type)"> |
|||
@for (item of group.items; track item.id) { |
|||
<tb-iot-hub-item-card |
|||
[item]="item" |
|||
[installedItem]="getInstalledItem(item)" |
|||
[showTypeChip]="false" |
|||
[showSubtype]="false" |
|||
[showCreator]="showCreator" |
|||
(cardClick)="openItemDetail($event)" |
|||
(creatorClick)="navigateToCreator($event)" |
|||
(installClick)="installItem($event)" |
|||
(updateClick)="updateItem($event)" |
|||
(deleteClick)="deleteInstalledItem($event)"> |
|||
</tb-iot-hub-item-card> |
|||
} |
|||
</div> |
|||
</div> |
|||
} |
|||
</div> |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
<!-- |
|||
|
|||
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-search-page"> |
|||
<!-- Back --> |
|||
<button mat-button color="primary" class="tb-search-back-btn" (click)="navigateBack()"> |
|||
<mat-icon>chevron_left</mat-icon> |
|||
{{ 'iot-hub.back-to-iot-hub' | translate }} |
|||
</button> |
|||
|
|||
<!-- Search component --> |
|||
<tb-iot-hub-search [(searchText)]="searchText"> |
|||
<!-- Title --> |
|||
<h1 class="tb-search-title"> |
|||
@if (searchText?.trim()) { |
|||
{{ 'iot-hub.search-results-for' | translate }}<span class="tb-search-title-query">'{{ searchText.trim() }}'</span> |
|||
} @else { |
|||
{{ 'iot-hub.search-results' | translate }} |
|||
} |
|||
</h1> |
|||
</tb-iot-hub-search> |
|||
</div> |
|||
@ -0,0 +1,155 @@ |
|||
/** |
|||
* 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: block; |
|||
padding: 16px; |
|||
height: 100%; |
|||
} |
|||
|
|||
.tb-search-page { |
|||
background: white; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40px; |
|||
height: 100%; |
|||
} |
|||
|
|||
// Back button |
|||
.tb-search-back-btn { |
|||
align-self: flex-start; |
|||
margin-top: 40px; |
|||
margin-left: 123px; |
|||
} |
|||
|
|||
// Title |
|||
.tb-search-title { |
|||
font-size: 28px; |
|||
font-weight: 500; |
|||
line-height: 36px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-search-title-query { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
tb-iot-hub-search { |
|||
flex: 1; |
|||
min-height: 0; |
|||
padding-left: 123px; |
|||
padding-right: 123px; |
|||
|
|||
::ng-deep { |
|||
.tb-search-divider { |
|||
margin-left: -123px; |
|||
margin-right: -123px; |
|||
} |
|||
|
|||
.tb-search-categories { |
|||
padding-right: 123px; |
|||
padding-bottom: 40px; |
|||
margin-right: -123px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Responsive |
|||
@media #{$mat-lt-xxl} { |
|||
.tb-search-back-btn { |
|||
margin-left: 40px; |
|||
} |
|||
|
|||
tb-iot-hub-search { |
|||
padding-left: 40px; |
|||
padding-right: 40px; |
|||
|
|||
::ng-deep { |
|||
.tb-search-divider { |
|||
margin-left: -40px; |
|||
margin-right: -40px; |
|||
} |
|||
|
|||
.tb-search-categories { |
|||
padding-right: 40px; |
|||
margin-right: -40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media #{$mat-lt-lg} { |
|||
.tb-search-page { |
|||
gap: 24px; |
|||
} |
|||
|
|||
.tb-search-back-btn { |
|||
margin-top: 24px; |
|||
margin-left: 24px; |
|||
} |
|||
|
|||
tb-iot-hub-search { |
|||
padding-left: 24px; |
|||
padding-right: 24px; |
|||
|
|||
::ng-deep { |
|||
.tb-search-divider { |
|||
margin-left: -24px; |
|||
margin-right: -24px; |
|||
} |
|||
|
|||
.tb-search-categories { |
|||
padding-right: 24px; |
|||
padding-bottom: 24px; |
|||
margin-right: -24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media #{$mat-lt-sm} { |
|||
.tb-search-page { |
|||
gap: 16px; |
|||
} |
|||
|
|||
.tb-search-back-btn { |
|||
margin-top: 16px; |
|||
margin-left: 16px; |
|||
} |
|||
|
|||
tb-iot-hub-search { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
|
|||
::ng-deep { |
|||
.tb-search-divider { |
|||
margin-left: -16px; |
|||
margin-right: -16px; |
|||
} |
|||
|
|||
.tb-search-categories { |
|||
padding-right: 16px; |
|||
padding-bottom: 16px; |
|||
margin-right: -16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
///
|
|||
/// 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, OnInit } from '@angular/core'; |
|||
import { ActivatedRoute, Router } from '@angular/router'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-iot-hub-search-page', |
|||
standalone: false, |
|||
templateUrl: './iot-hub-search-page.component.html', |
|||
styleUrls: ['./iot-hub-search-page.component.scss'] |
|||
}) |
|||
export class TbIotHubSearchPageComponent implements OnInit { |
|||
|
|||
searchText = ''; |
|||
|
|||
constructor( |
|||
private route: ActivatedRoute, |
|||
private router: Router |
|||
) {} |
|||
|
|||
ngOnInit(): void { |
|||
const search = this.route.snapshot.queryParamMap.get('search'); |
|||
if (search) { |
|||
this.searchText = search; |
|||
} |
|||
} |
|||
|
|||
navigateBack(): void { |
|||
this.router.navigate(['/iot-hub']); |
|||
} |
|||
} |
|||
@ -1,148 +0,0 @@ |
|||
<!-- |
|||
|
|||
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-search-page"> |
|||
<!-- Back --> |
|||
<button mat-button color="primary" class="tb-search-back-btn" (click)="navigateBack()"> |
|||
<mat-icon>chevron_left</mat-icon> |
|||
{{ 'iot-hub.back-to-iot-hub' | translate }} |
|||
</button> |
|||
|
|||
<!-- Title --> |
|||
<h1 class="tb-search-title"> |
|||
@if (searchText?.trim()) { |
|||
{{ 'iot-hub.search-results-for' | translate }}<span class="tb-search-title-query">'{{ searchText.trim() }}'</span> |
|||
} @else { |
|||
{{ 'iot-hub.search-results' | translate }} |
|||
} |
|||
</h1> |
|||
|
|||
<!-- Search + Sort row --> |
|||
<div class="tb-search-toolbar"> |
|||
<mat-form-field appearance="outline" class="tb-search-input-field" subscriptSizing="dynamic"> |
|||
<input matInput |
|||
[(ngModel)]="searchText" |
|||
(input)="onSearchInput()" |
|||
(keyup.enter)="onSearchEnter()"> |
|||
@if (searchText) { |
|||
<button matSuffix mat-icon-button (click)="clearSearch()"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
} |
|||
<button matSuffix mat-icon-button (click)="$event.stopPropagation(); onSearchEnter()"> |
|||
<mat-icon>search</mat-icon> |
|||
</button> |
|||
</mat-form-field> |
|||
<button mat-button color="primary" class="tb-search-sort-btn" [matMenuTriggerFor]="sortMenu"> |
|||
<mat-icon>filter_list</mat-icon> |
|||
{{ sortOptions[selectedSortIndex].label | translate }} |
|||
</button> |
|||
<mat-menu #sortMenu="matMenu"> |
|||
@for (option of sortOptions; track option.value; let i = $index) { |
|||
<button mat-menu-item (click)="onSortChange(i)">{{ option.label | translate }}</button> |
|||
} |
|||
</mat-menu> |
|||
</div> |
|||
|
|||
<!-- Results count + Pagination (shown when results exist) --> |
|||
@if (!isLoading && totalElements > 0) { |
|||
<div class="tb-search-pagination-row"> |
|||
<span class="tb-search-results-count"> |
|||
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }} |
|||
</span> |
|||
<div class="tb-search-pagination"> |
|||
<div class="tb-search-pagination-pages"> |
|||
<button mat-icon-button [disabled]="pageIndex === 0" (click)="goToPage(pageIndex - 1)"> |
|||
<mat-icon>chevron_left</mat-icon> |
|||
</button> |
|||
@for (p of getPageNumbers(); track p) { |
|||
<button class="tb-search-page-btn" [class.active]="p === pageIndex" (click)="goToPage(p)"> |
|||
{{ p + 1 }} |
|||
</button> |
|||
} |
|||
<button mat-icon-button [disabled]="pageIndex >= totalPages - 1" (click)="goToPage(pageIndex + 1)"> |
|||
<mat-icon>chevron_right</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="tb-search-page-size"> |
|||
<span>{{ 'iot-hub.items-per-page' | translate }}:</span> |
|||
<mat-select [value]="pageSize" (selectionChange)="onPageSizeChange($event.value)" class="tb-search-page-size-select"> |
|||
@for (size of pageSizeOptions; track size) { |
|||
<mat-option [value]="size">{{ size }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
<!-- No results count when 0 --> |
|||
@if (!isLoading && totalElements === 0 && searchText?.trim()) { |
|||
<div class="tb-search-pagination-row"> |
|||
<span class="tb-search-results-count"> |
|||
{{ 'iot-hub.results-count' | translate:{ count: 0 } }} |
|||
</span> |
|||
</div> |
|||
} |
|||
|
|||
<!-- Loading --> |
|||
@if (isLoading) { |
|||
<div class="tb-search-loading"> |
|||
<mat-spinner diameter="40"></mat-spinner> |
|||
</div> |
|||
} |
|||
|
|||
<!-- No results --> |
|||
@if (!isLoading && totalElements === 0 && searchText?.trim()) { |
|||
<div class="tb-search-empty"> |
|||
<mat-icon class="tb-search-empty-icon">search_off</mat-icon> |
|||
<h3>{{ 'iot-hub.no-items-found' | translate }}</h3> |
|||
<p>{{ 'iot-hub.try-adjusting-search' | translate }}</p> |
|||
</div> |
|||
} |
|||
|
|||
<!-- Results grouped by type --> |
|||
@if (!isLoading && resultGroups.length > 0) { |
|||
<div class="tb-search-categories"> |
|||
@for (group of resultGroups; track group.type) { |
|||
<div class="tb-search-section"> |
|||
<!-- Section header --> |
|||
<button mat-button class="tb-search-section-header" (click)="navigateToType(group.type)"> |
|||
{{ getTypeLabel(group.type) }} |
|||
<mat-icon>chevron_right</mat-icon> |
|||
</button> |
|||
<!-- Card grid --> |
|||
<div class="tb-search-card-grid" [class.tb-search-card-grid-compact]="isCompactType(group.type)"> |
|||
@for (item of group.items; track item.id) { |
|||
<tb-iot-hub-item-card |
|||
[item]="item" |
|||
[installedItem]="getInstalledItem(item)" |
|||
[showTypeChip]="false" |
|||
[showSubtype]="false" |
|||
(cardClick)="openItemDetail($event)" |
|||
(creatorClick)="navigateToCreator($event)" |
|||
(installClick)="installItem($event)" |
|||
(updateClick)="updateItem($event)" |
|||
(deleteClick)="deleteInstalledItem($event)"> |
|||
</tb-iot-hub-item-card> |
|||
} |
|||
</div> |
|||
</div> |
|||
} |
|||
</div> |
|||
} |
|||
</div> |
|||
Loading…
Reference in new issue