feat(inventory): show stats in inventory table, rework some table

After-the-End-of-All-Things · Sep 18, 2023 · 92a0bb7 · 92a0bb7
1 parent 16ecf0c
commit 92a0bb7
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/client/src/app/components/item-stats/item-stats.component.html b/client/src/app/components/item-stats/item-stats.component.html
@@ -1,9 +1,21 @@
-<div>
-  <ion-chip
-    class="stats readonly"
-    [color]="stat.value > 0 ? 'success' : 'danger'"
-    *ngFor="let stat of stats"
-  >
-    {{ stat.key }} +{{ stat.value }}
-  </ion-chip>
+<div [class.one-per-line]="oneStatPerLine">
+  <ng-container *ngIf="useChips">
+    <ion-chip
+      class="stats readonly"
+      [color]="stat.value > 0 ? 'success' : 'danger'"
+      *ngFor="let stat of stats"
+    >
+      {{ stat.key }} +{{ stat.value }}
+    </ion-chip>
+  </ng-container>
+
+  <ng-container *ngIf="!useChips">
+    <ion-text
+      class="stats readonly"
+      [color]="stat.value > 0 ? 'success' : 'danger'"
+      *ngFor="let stat of stats"
+    >
+      [{{ stat.key }} +{{ stat.value }}]
+    </ion-text>
+  </ng-container>
 </div>
diff --git a/client/src/app/components/item-stats/item-stats.component.scss b/client/src/app/components/item-stats/item-stats.component.scss
@@ -0,0 +1,10 @@
+
+ion-chip, ion-text {
+  white-space: nowrap;
+}
+
+.one-per-line {
+  ion-chip, ion-text {
+    display: block;
+  }
+}
diff --git a/client/src/app/components/item-stats/item-stats.component.ts b/client/src/app/components/item-stats/item-stats.component.ts
@@ -9,6 +9,8 @@ import { IEquipment, IItem, Stat } from '@interfaces';
 export class ItemStatsComponent implements OnInit {
   public stats: Array<{ key: string; value: number }> = [];
 
+  @Input() useChips = true;
+  @Input() oneStatPerLine = false;
   @Input({ required: true }) item!: IItem;
 
   constructor() {}

diff --git a/client/src/app/pages/inventory/inventory.page.html b/client/src/app/pages/inventory/inventory.page.html
@@ -24,7 +24,7 @@
             <ngx-datatable
               class="dark"
               [rows]="items"
-              [rowHeight]="64"
+              [rowHeight]="'auto'"
               [columnMode]="'force'"
               [sorts]="[{ prop: 'name', dir: 'asc' }]"
             >
@@ -46,25 +46,40 @@
                 [cellClass]="'text-wrap-column'"
               >
                 <ng-template let-row="row" ngx-datatable-cell-template>
-                  <div><strong>{{ row.name }}</strong></div>
+                  <div>
+                    <strong>{{ row.name }}</strong>
+                    <br />
+                    Lv. {{ row.levelRequirement || 0 }}
+                  </div>
                 </ng-template>
               </ngx-datatable-column>
 
-              <ngx-datatable-column name="Rarity" [sortable]="false">
+              <ngx-datatable-column name="Item Type" [sortable]="false">
                 <ng-template let-row="row" ngx-datatable-cell-template>
                   <app-item-rarity [item]="row"></app-item-rarity>
                 </ng-template>
               </ngx-datatable-column>
 
-              <ngx-datatable-column name="Level" [prop]="'levelRequirement'">
+              <ngx-datatable-column
+                name="Value"
+                [comparator]="valueComparison"
+                [maxWidth]="70"
+              >
                 <ng-template let-row="row" ngx-datatable-cell-template>
-                  Lv. {{ row.levelRequirement || 0 }}
+                  {{ getValueForItem(row) | number }}
                 </ng-template>
               </ngx-datatable-column>
 
-              <ngx-datatable-column name="Value" [comparator]="valueComparison">
+              <ngx-datatable-column
+                name="Stats"
+                [cellClass]="'text-wrap-column'"
+              >
                 <ng-template let-row="row" ngx-datatable-cell-template>
-                  {{ getValueForItem(row) | number }}
+                  <app-item-stats
+                    [item]="row"
+                    [oneStatPerLine]="true"
+                    [useChips]="false"
+                  ></app-item-stats>
                 </ng-template>
               </ngx-datatable-column>