update order-service

bitovi · Jan 8, 2024 · fedc10c · fedc10c
1 parent 0cf09f0
commit fedc10c
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 102 deletions.
diff --git a/src/angular/14-building-order-form/child-component/order-2.component.ts b/src/angular/14-building-order-form/child-component/order-2.component.ts
@@ -20,8 +20,8 @@ export interface Item {
   price: number;
 }
 
-interface OrderForm {
-  restaurant: FormControl<string | undefined>;
+export interface OrderForm {
+  restaurant: FormControl<string>;
   name: FormControl<string>;
   address: FormControl<string>;
   phone: FormControl<string>;
@@ -47,7 +47,6 @@ export class OrderComponent implements OnInit, OnDestroy {
   orderForm?: FormGroup<OrderForm>;
   restaurant?: Restaurant;
   isLoading = true;
-  items?: FormArray;
   orderTotal = 0.0;
   completedOrder: any;
   orderComplete = false;
@@ -83,7 +82,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   createOrderForm(): void {
     this.orderForm = this.formBuilder.nonNullable.group({
-      restaurant: [this.restaurant?._id],
+      restaurant: [this.restaurant?._id ?? '', Validators.required],
       name: ['', Validators.required],
       address: ['', Validators.required],
       phone: ['', Validators.required],
@@ -118,7 +117,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   startNewOrder(): void {
     this.orderComplete = false;
-    this.completedOrder = this.orderForm?.value;
+    this.completedOrder = undefined;
     // CLEAR THE ORDER FORM
     this.createOrderForm();
   }

diff --git a/src/angular/14-building-order-form/order.component-solution.ts b/src/angular/14-building-order-form/order.component-solution.ts
@@ -20,8 +20,8 @@ export interface Item {
   price: number;
 }
 
-interface OrderForm {
-  restaurant: FormControl<string | undefined>;
+export interface OrderForm {
+  restaurant: FormControl<string>;
   name: FormControl<string>;
   address: FormControl<string>;
   phone: FormControl<string>;
@@ -47,7 +47,6 @@ export class OrderComponent implements OnInit, OnDestroy {
   orderForm?: FormGroup<OrderForm>;
   restaurant?: Restaurant;
   isLoading = true;
-  items?: FormArray;
   orderTotal = 0.0;
   completedOrder: any;
   orderComplete = false;
@@ -83,7 +82,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   createOrderForm(): void {
     this.orderForm = this.formBuilder.nonNullable.group({
-      restaurant: [this.restaurant?._id],
+      restaurant: [this.restaurant?._id ?? '', Validators.required],
       name: ['', Validators.required],
       address: ['', Validators.required],
       phone: ['', Validators.required],
@@ -114,7 +113,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   startNewOrder(): void {
     this.orderComplete = false;
-    this.completedOrder = this.orderForm?.value;
+    this.completedOrder = undefined;
     // CLEAR THE ORDER FORM
     this.createOrderForm();
   }

diff --git a/src/angular/14-building-order-form/order.component-starter.ts b/src/angular/14-building-order-form/order.component-starter.ts
@@ -19,8 +19,8 @@ export interface Item {
   price: number;
 }
 
-interface OrderForm {
-  restaurant: FormControl<string | undefined>;
+export interface OrderForm {
+  restaurant: FormControl<string>;
   name: FormControl<string>;
   address: FormControl<string>;
   phone: FormControl<string>;
@@ -46,7 +46,6 @@ export class OrderComponent implements OnInit, OnDestroy {
   orderForm?: FormGroup<OrderForm>;
   restaurant?: Restaurant;
   isLoading = true;
-  items?: FormArray;
   orderTotal = 0.0;
   completedOrder: any;
   orderComplete = false;
@@ -80,7 +79,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   startNewOrder(): void {
     this.orderComplete = false;
-    this.completedOrder = this.orderForm?.value;
+    this.completedOrder = undefined;
     // CLEAR THE ORDER FORM
     this.createOrderForm();
   }

diff --git a/src/angular/16-order-service/order-2.service.ts b/src/angular/16-order-service/order-2.service.ts
@@ -1,14 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';
+import { environment } from '../../environments/environment';
 
 export interface Item {
   name: string;
   price: number;
 }
 
-export interface OrderForm {
+export interface CreateOrderDto {
   restaurant: string;
   name: string;
   address: string;
@@ -38,7 +38,7 @@ export class OrderService {
     );
   }
 
-  createOrder(order: OrderForm): Observable<Order> {
+  createOrder(order: CreateOrderDto): Observable<Order> {
     const orderData = {
       ...order,
       status: 'new',

diff --git a/src/angular/16-order-service/order-service.md b/src/angular/16-order-service/order-service.md
@@ -20,10 +20,10 @@ We need to create a new service to handle creating and updating orders. We'll ne
 
 ## P1: Technical Requirements
 
-Create a new service `order` in the order directory, and write and export `OrderForm`, `Order` and `Item` interfaces representing these objects in the new service:
+Create a new service `order` in the order directory, and write and export `CreateOrderDto`, `Order` and `Item` interfaces representing these objects in the new service:
 
 ```typescript
-const orderForm = {
+const createOrderDto = {
   restaurant: '12345',
   name: 'Jennifer',
   address: '123 Main st',
@@ -96,7 +96,7 @@ ng test
 
 - The method signatures for the methods you'll be adding to `OrderService`:
   - `getOrders(): Observable<{data: Order[]}>` should make a `GET` request
-  - `createOrder(orderForm: OrderForm): Observable<Order>` should make a `POST` request
+  - `createOrder(orderForm: CreateOrderDto): Observable<Order>` should make a `POST` request
   - `updateOrder(order: Order, status: string): Observable<Order>` should make a `PUT` request to `/orders/<order-id>`
   - `deleteOrder(orderId: string): Observable<Order>` should make a `DELETE` request to `/orders/<order-id>`
 - You will need to make sure `HttpClient` is imported and
@@ -133,6 +133,8 @@ How we will solve this:
    and set back to `false` when `startNewOrder()` is called.
 5. We will save the completed order in `completedOrder`.
 
+> A FormGroup's `value` property is wrapped in `Partial` type because controls are removed from the form's value when disabled. For our case, we don't need to disable controls. We can use a FormGroup's `getRawValue()` method to access its value with the full type.
+
 ## P3: Setup
 
 Before starting:

diff --git a/src/angular/16-order-service/order.component-solution.ts b/src/angular/16-order-service/order.component-solution.ts
@@ -3,6 +3,7 @@ import {
   AbstractControl,
   FormArray,
   FormBuilder,
+  FormControl,
   FormGroup,
   ValidationErrors,
   ValidatorFn,
@@ -15,6 +16,19 @@ import { Restaurant } from '../restaurant/restaurant';
 import { RestaurantService } from '../restaurant/restaurant.service';
 import { Order, OrderService } from './order.service';
 
+export interface Item {
+  name: string;
+  price: number;
+}
+
+export interface OrderForm {
+  restaurant: FormControl<string>;
+  name: FormControl<string>;
+  address: FormControl<string>;
+  phone: FormControl<string>;
+  items: FormControl<Item[]>;
+}
+
 // CUSTOM VALIDATION FUNCTION TO ENSURE THAT THE ITEMS FORM VALUE CONTAINS AT LEAST ONE ITEM.
 function minLengthArray(min: number): ValidatorFn {
   return (c: AbstractControl): ValidationErrors | null => {
@@ -31,10 +45,9 @@ function minLengthArray(min: number): ValidatorFn {
   styleUrls: ['./order.component.less'],
 })
 export class OrderComponent implements OnInit, OnDestroy {
-  orderForm?: FormGroup;
+  orderForm?: FormGroup<OrderForm>;
   restaurant?: Restaurant;
   isLoading = true;
-  items?: FormArray;
   orderTotal = 0.0;
   completedOrder?: Order;
   orderComplete = false;
@@ -70,26 +83,25 @@ export class OrderComponent implements OnInit, OnDestroy {
   }
 
   createOrderForm(): void {
-    this.orderForm = this.formBuilder.group({
-      restaurant: [this.restaurant?._id],
-      name: [null, Validators.required],
-      address: [null, Validators.required],
-      phone: [null, Validators.required],
+    this.orderForm = this.formBuilder.nonNullable.group({
+      restaurant: [this.restaurant?._id ?? '', Validators.required],
+      name: ['', Validators.required],
+      address: ['', Validators.required],
+      phone: ['', Validators.required],
       // PASSING OUR CUSTOM VALIDATION FUNCTION TO THIS FORM CONTROL
-      items: [[], minLengthArray(1)],
+      items: [[] as Item[], minLengthArray(1)],
     });
     this.onChanges();
   }
 
-  getChange(newItems: []): void {
-    this.orderForm?.get('items')?.patchValue(newItems);
+  getChange(newItems: Item[]): void {
+    this.orderForm?.controls.items.patchValue(newItems);
   }
 
   onChanges(): void {
     // WHEN THE ITEMS CHANGE WE WANT TO CALCULATE A NEW TOTAL
-    this.orderForm
-      ?.get('items')
-      ?.valueChanges.pipe(takeUntil(this.onDestroy$))
+    this.orderForm?.controls.items.valueChanges
+      .pipe(takeUntil(this.onDestroy$))
       .subscribe((val) => {
         let total = 0.0;
         if (val.length) {
@@ -104,9 +116,13 @@ export class OrderComponent implements OnInit, OnDestroy {
   }
 
   onSubmit(): void {
+    if (!this.orderForm?.valid) {
+      return;
+    }
+
     this.orderProcessing = true;
     this.orderService
-      .createOrder(this.orderForm?.value)
+      .createOrder(this.orderForm.getRawValue())
       .pipe(takeUntil(this.onDestroy$))
       .subscribe((res: Order) => {
         this.completedOrder = res;
@@ -117,7 +133,7 @@ export class OrderComponent implements OnInit, OnDestroy {
 
   startNewOrder(): void {
     this.orderComplete = false;
-    this.completedOrder = this.orderForm?.value;
+    this.completedOrder = undefined;
     this.orderTotal = 0.0;
     // CLEAR THE ORDER FORM
     this.createOrderForm();

diff --git a/src/angular/16-order-service/order.component.html b/src/angular/16-order-service/order.component.html
@@ -36,41 +36,37 @@ <h4>Items ordered:</h4>
   </ng-container>
   <ng-template #showOrderForm>
     <h2>Order here</h2>
-    <form *ngIf="orderForm" [formGroup]="orderForm" (ngSubmit)="onSubmit()">
+    <form
+      *ngIf="orderForm && restaurant"
+      [formGroup]="orderForm"
+      (ngSubmit)="onSubmit()"
+    >
       <tabset>
-        <tab heading="Lunch Menu" *ngIf="restaurant?.menu?.lunch">
+        <tab heading="Lunch Menu" *ngIf="restaurant.menu.lunch">
           <ul class="list-group">
             <pmo-menu-items
-              [items]="restaurant?.menu?.lunch"
+              [items]="restaurant.menu.lunch"
               formControlName="items"
             ></pmo-menu-items>
           </ul>
         </tab>
-        <tab heading="Dinner Menu" *ngIf="restaurant?.menu?.dinner">
+        <tab heading="Dinner Menu" *ngIf="restaurant.menu.dinner">
           <ul class="list-group">
             <pmo-menu-items
-              [items]="restaurant?.menu?.dinner"
+              [items]="restaurant.menu.dinner"
               formControlName="items"
             ></pmo-menu-items>
           </ul>
         </tab>
       </tabset>
       <div class="form-group">
         <label class="control-label">Name:</label>
-        <input
-          name="name"
-          type="text"
-          formControlName="name"
-        />
+        <input name="name" type="text" formControlName="name" />
         <p>Please enter your name.</p>
       </div>
       <div class="form-group">
         <label class="control-label">Address:</label>
-        <input
-          name="address"
-          type="text"
-          formControlName="address"
-        />
+        <input name="address" type="text" formControlName="address" />
         <p class="help-text">Please enter your address.</p>
       </div>
       <div class="form-group">