Add currency dropdown

...to make the frontend look pretty
fhammerl · Oct 22, 2020 · d151b14 · d151b14
1 parent f0494b8
commit d151b14
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.component.html b/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.component.html
@@ -1,14 +1,14 @@
 <button nz-button (click)="addRow()" nzType="primary">Add</button>
 <br />
 <br />
-    <nz-table #editRowTable nzBordered [nzData]="expenses" [nzPageSize]="5">
+<nz-table #editRowTable nzBordered [nzData]="expenses" [nzPageSize]="5">
     <thead>
         <tr>
             <th nzWidth="30%">Id</th>
-            <th>Amount</th>
-            <th>Currency</th>
-            <th>Recipient</th>
-            <th>Actions</th>
+            <th nzWidth="10%">Amount</th>
+            <th nzWidth="10%">Currency</th>
+            <th nzWidth="30%">Recipient</th>
+            <th nzWidth="20%">Actions</th>
         </tr>
     </thead>
     <tbody>
@@ -17,14 +17,19 @@
                 *ngIf="!editCache[expense.expenseID] || !editCache[expense.expenseID].edit; else editTemplate">
                 <td>{{ expense.expenseID }}</td>
                 <td>{{ expense.amount }}</td>
-                <td>{{ expense.currency }}</td>
+                <td>{{ currencies[expense.currency].name }}</td> <!-- currencies[expense.currency] would cause issues if there was a gap in currency IDs or a different order in the currencies array  -->
                 <td>{{ expense.recipient }}</td>
                 <td><a (click)="startEdit(expense.expenseID)">Edit</a></td>
             </ng-container>
             <ng-template #editTemplate>
                 <td>{{ expense.expenseID }}</td>
                 <td><input type="number" nz-input [(ngModel)]="editCache[expense.expenseID].data.amount" /></td>
-                <td><input type="number" nz-input [(ngModel)]="editCache[expense.expenseID].data.currency" /></td>
+                <td>
+                    <nz-select [(ngModel)]="editCache[expense.expenseID].data.currency">
+                        <nz-option *ngFor="let currency of currencies" [nzValue]="currency.id"
+                            [nzLabel]="currency.name"></nz-option>
+                    </nz-select>
+                </td>
                 <td><input type="text" nz-input [(ngModel)]="editCache[expense.expenseID].data.recipient" /></td>
                 <td>
                     <a class="action" (click)="saveEdit(expense.expenseID)">Save</a>

diff --git a/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.component.ts b/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.component.ts
@@ -12,6 +12,12 @@ export class ExpenseComponent implements OnInit {
   expenses: Expense[];
   editCache: { [key: string]: { edit: boolean; data: Expense } } = {};
   readonly newRecordId: string = "n/a";
+  readonly currencies = [ // TODO: find a better place for this
+    { id: 0, name: 'Eur' },
+    { id: 1, name: 'Gbp' },
+    { id: 2, name: 'Usd' },
+    { id: 3, name: 'Chf' },
+  ];
 
   constructor(private expenseService: ExpenseService) { }
 
@@ -41,7 +47,7 @@ export class ExpenseComponent implements OnInit {
     var record = this.editCache[id].data;
     delete record.expenseID;
     this.expenseService.create(record).subscribe((result) => {
-      Object.assign(this.expenses[this.expenses.length - 1] , result);
+      Object.assign(this.expenses[this.expenses.length - 1], result);
       this.updateEditCache();
     });
   }

diff --git a/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.module.ts b/ExpenseTracker.Client/expense-tracker/src/app/expense/expense.module.ts
@@ -5,14 +5,15 @@ import { ExpenseService } from '../shared/services/expense.service';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { FormsModule } from '@angular/forms';
 import { NzButtonModule } from 'ng-zorro-antd/button';
-
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 @NgModule({
   declarations: [ExpenseComponent],
   imports: [
     CommonModule,
     NzTableModule,
     NzButtonModule,
+    NzSelectModule,
     FormsModule
   ],
   providers: [