55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
@if (loading()) {
|
|
<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 blocks</mat-label>
|
|
<mat-icon matPrefix fontIcon="search"></mat-icon>
|
|
<input matInput placeholder="Search blocks..." [(ngModel)]="searchTerm" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="flex py-2 text-sm w-full min-w-0 items-center text-center justify-center h-18 overflow-x-hidden">
|
|
<app-ordering [orderFields]="orderFields" [orderView]="orderView" (orderChanged)="onOrderChanged($event)"></app-ordering>
|
|
</div>
|
|
-->
|
|
|
|
@if (filteredBlocks().length === 0) {
|
|
<div class="blocks-list-empty">
|
|
No blocks found
|
|
</div>
|
|
} @else {
|
|
<div class="blocks-list-items">
|
|
@for (block of filteredBlocks(); track block.type) {
|
|
<mat-card
|
|
class="blocks-list-card"
|
|
draggable="true"
|
|
(dragstart)="onDragStart($event, block)">
|
|
<mat-card-header class="blocks-list-card-header">
|
|
<div matCardAvatar class="blocks-list-card-avatar">
|
|
<mat-icon [fontIcon]="block.userInteractive ? 'touch_app' : 'auto_awesome'"></mat-icon>
|
|
</div>
|
|
<mat-card-title class="blocks-list-card-title">{{ block.type }}</mat-card-title>
|
|
<mat-card-subtitle class="blocks-list-card-subtitle">
|
|
{{ block.userInteractive ? 'Interactive' : 'Automatic' }}
|
|
</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content class="blocks-list-card-content">
|
|
<p class="blocks-list-card-copy">{{ block.description }}</p>
|
|
</mat-card-content>
|
|
<mat-card-actions class="blocks-list-card-actions" align="end">
|
|
<mat-chip class="blocks-list-card-chip" [class.blocks-list-card-chip-interactive]="block.userInteractive">
|
|
{{ block.userInteractive ? 'Human step' : 'Automated step' }}
|
|
</mat-chip>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|