74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
|
<div class="inline-items">
|
||
|
|
<div class="inline-items-header">
|
||
|
|
<span class="items-count">{{ totalCount() }} {{ 'ITEMS_COUNT' | translate }}</span>
|
||
|
|
<button mat-mini-fab color="accent" (click)="addItem()" [matTooltip]="'CREATE_NEW_ITEM' | translate">
|
||
|
|
<mat-icon>add</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if (items().length > 0) {
|
||
|
|
<div class="inline-items-grid">
|
||
|
|
@for (item of items(); track item.id) {
|
||
|
|
<div class="inline-item-card" (click)="openItem(item.id)" [class.hidden-item]="!item.visible">
|
||
|
|
<div class="inline-item-image">
|
||
|
|
@if (item.imgs.length) {
|
||
|
|
<img [src]="item.imgs[0]" [alt]="item.name" (error)="onImageError($event)">
|
||
|
|
}
|
||
|
|
<div class="no-image" [style.display]="item.imgs.length ? 'none' : 'flex'">
|
||
|
|
<mat-icon>image</mat-icon>
|
||
|
|
</div>
|
||
|
|
@if (item.quantity === 0) {
|
||
|
|
<div class="out-of-stock">{{ 'OUT_OF_STOCK' | translate }}</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inline-item-info">
|
||
|
|
<span class="item-name">{{ item.name }}</span>
|
||
|
|
<div class="item-details">
|
||
|
|
<span class="price">{{ item.price }} {{ item.currency }}</span>
|
||
|
|
@if (item.discount > 0) {
|
||
|
|
<span class="discount">-{{ item.discount }}%</span>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="item-meta">
|
||
|
|
<span class="qty">{{ 'QTY' | translate }}: {{ item.quantity }}</span>
|
||
|
|
<mat-icon class="visibility-icon" [class.visible]="item.visible" [class.not-visible]="!item.visible">
|
||
|
|
{{ item.visible ? 'visibility' : 'visibility_off' }}
|
||
|
|
</mat-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
color="warn"
|
||
|
|
class="delete-btn"
|
||
|
|
(click)="deleteItem(item, $event)"
|
||
|
|
[matTooltip]="'DELETE' | translate">
|
||
|
|
<mat-icon>delete</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
@if (loading()) {
|
||
|
|
<div class="inline-loading">
|
||
|
|
<mat-spinner diameter="28"></mat-spinner>
|
||
|
|
<span>{{ 'LOADING_MORE' | translate }}</span>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
@if (!loading() && items().length === 0) {
|
||
|
|
<div class="inline-empty">
|
||
|
|
<mat-icon>inventory_2</mat-icon>
|
||
|
|
<span>{{ 'NO_ITEMS_FOUND' | translate }}</span>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
@if (!hasMore() && items().length > 0 && !loading()) {
|
||
|
|
<div class="inline-end">{{ 'NO_MORE_ITEMS' | translate }}</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
<div #scrollSentinel class="scroll-sentinel"></div>
|
||
|
|
</div>
|