52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
@if (imageViewsQuery.isLoading()) {
|
|
<app-spinner></app-spinner>
|
|
} @else if (imageViewsQuery.isError()) {
|
|
<p>There was an error loading images.</p>
|
|
} @else if (imageViewsQuery.isSuccess()) {
|
|
<div class="image-grid">
|
|
@for (imageQuery of imageQueries(); track $index) {
|
|
@if (imageQuery.isLoading()) {
|
|
<app-spinner></app-spinner>
|
|
} @else if (imageQuery.isError()) {
|
|
<p>There was an error loading this image.</p>
|
|
} @else {
|
|
@let imageData = imageQuery.data();
|
|
<mat-card>
|
|
<img
|
|
mat-card-image
|
|
[src]="imageData!.blobUrl"
|
|
alt="imageData!.imageView.alt"
|
|
(click)="onImageClick(imageData!.imageView)"
|
|
class="image-grid-image"
|
|
/>
|
|
<mat-card-content>
|
|
<p>{{ imageData!.imageView.filename }}</p>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<mat-checkbox
|
|
[checked]="isSelected(imageData!.imageView)"
|
|
(click)="onImageClick(imageData!.imageView)"
|
|
>Main?</mat-checkbox
|
|
>
|
|
<button matButton="text" type="button" [matMenuTriggerFor]="imageActionsMenu">
|
|
<fa-icon [icon]="faEllipsis"></fa-icon>
|
|
</button>
|
|
<mat-menu #imageActionsMenu>
|
|
<button mat-menu-item type="button" (click)="editImage(imageData!.imageView)">Edit</button>
|
|
<button mat-menu-item type="button" (click)="deleteImage(imageData!.imageView)">
|
|
Delete
|
|
</button>
|
|
</mat-menu>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
}
|
|
}
|
|
</div>
|
|
<mat-paginator
|
|
[length]="imageCount()"
|
|
[pageSize]="pageSize()"
|
|
[pageSizeOptions]="[3, 6, 9, 12]"
|
|
(page)="onPage($event)"
|
|
></mat-paginator>
|
|
}
|