Implementing orders feature

src/app/admin/orderTable.component.html

@@ -0,0 +1,33 @@
+<div class="form-check">
+    <label class="form-check-label">
+        <input type="checkbox" class="form-check-input" [(ngModel)]="includeShipped"/>
+        Display Shipped Orders
+    </label>
+</div>
+<div class="table table-sm">
+    <thead>
+        <tr><th>Name</th><th>Zip</th><th colspan="2">Cart</th><th></th></tr>
+    </thead>
+    <tbody>
+        <tr *ngIf="getOrders().length == 0">
+            <td colspan="5">There are no orders</td>
+        </tr>
+        <ng-template ngFor let-o [ngForOf]="getOrders()">
+            <tr>
+                <td>{{o.name}}</td>
+                <td>{{o.zip}}</td>
+                <th>Product</th>
+                <th>Quantity</th>
+                <td>
+                    <button class="btn btn-warning" (click)="markShipped(o)">Ship</button>
+                    <button class="btn btn-danger" (click)="delete(o.id)">Delete</button>
+                </td>
+            </tr>
+            <tr *ngFor="let line of o.cart.lines">
+                <td colspan="2"></td>
+                <td>{{line.product.name}}</td>
+                <td>{{line.quantity}}</td>
+            </tr>
+        </ng-template>
+    </tbody>
+</div>

src/app/admin/orderTable.component.ts

@@ -1,7 +1,27 @@
 import { Component } from "@angular/core";
+import { Order } from "../model/order.model";
+import { OrderRepository } from "../model/order.repository";
 
 @Component({
-    template: `<div class="bg-info p-2 text-white"><h3>Order Table placeholder</h3></div>`
+    templateUrl: "orderTable.component.html" 
 })
 
-export class OrderTableComponent {}
+export class OrderTableComponent {
+
+    includeShipped: boolean = false;
+
+    constructor(private repository: OrderRepository) {}
+
+    getOrders(): Order[] {
+        return this.repository.getOrders().filter(o => this.includeShipped || !o.shipped);
+    }
+
+    markShipped(order: Order) {
+        order.shipped = true;
+        this.repository.updateOrder(order);
+    }
+
+    delete(id: number) {
+        this.repository.deleteOrder(id);
+    }
+}