63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
@if (showLoading()) {
|
|
<div class="blocks-list-loading">
|
|
<mat-spinner diameter="32"></mat-spinner>
|
|
</div>
|
|
} @else {
|
|
<div class="blocks-list-root">
|
|
<div class="blocks-list-search">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Search containers</mat-label>
|
|
<mat-icon matPrefix fontIcon="search"></mat-icon>
|
|
<input matInput placeholder="Search containers..." [(ngModel)]="searchTerm" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
@if (filteredContainers().length === 0) {
|
|
<div class="blocks-list-empty">
|
|
No containers found
|
|
</div>
|
|
} @else {
|
|
<div class="blocks-list-items">
|
|
@for (container of filteredContainers(); track container.type) {
|
|
<mat-card
|
|
class="blocks-list-card blocks-list-card--container"
|
|
draggable="true"
|
|
(dragstart)="onDragStart($event, container)">
|
|
<mat-card-header class="blocks-list-card-header">
|
|
<div matCardAvatar class="blocks-list-card-avatar blocks-list-card-avatar--container">
|
|
<mat-icon fontIcon="inventory_2"></mat-icon>
|
|
</div>
|
|
<div class="blocks-list-card-heading">
|
|
<div class="blocks-list-card-title-row">
|
|
<mat-card-title class="blocks-list-card-title">{{ container.type }}</mat-card-title>
|
|
<button
|
|
type="button"
|
|
class="blocks-list-card-info"
|
|
matTooltip="{{ container.description }}"
|
|
aria-label="Show container description"
|
|
title=""
|
|
(pointerdown)="$event.stopPropagation()"
|
|
(click)="$event.stopPropagation()">
|
|
<mat-icon fontIcon="info"></mat-icon>
|
|
</button>
|
|
</div>
|
|
<mat-card-subtitle class="blocks-list-card-subtitle">
|
|
Container
|
|
</mat-card-subtitle>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content class="blocks-list-card-content">
|
|
<p class="blocks-list-card-copy">{{ container.description }}</p>
|
|
</mat-card-content>
|
|
<mat-card-actions class="blocks-list-card-actions" align="end">
|
|
<mat-chip class="blocks-list-card-chip blocks-list-card-chip-container">
|
|
Container node
|
|
</mat-chip>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|