optimisation

src/app/components/inline-items-list/inline-items-list.component.html

@@ -0,0 +1,73 @@
+<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>