feat(#1, #17 - Appointment Scheduler, Vehicles List) - Real data hook…

…up, layout improvements

- Finish date and vehicle selection
- Auto-select vehicle when initiated from vehicles list
- Improve vehicle card and container layout

projects/MyCar/src/app/appointment-scheduler/appointment-scheduler-http.service.ts

@@ -1,31 +1,81 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { sortBy } from 'lodash-es';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { environment } from '../../environments/environment';
 import { AuthTokenService } from '../auth/auth-token.service';
 import { AppointmentScheduleResponse } from './appointment-scheduler.models';
+import { DynamicFormData } from './appointment-scheduler.component';
 
 @Injectable()
 export class AppointmentSchedulerHttpService {
 
+	private static fuelEconomyApiMapper(dto): DynamicFormData[] {
+		return dto.menuItem.map(item => {
+			return {
+				formValue: item.value,
+				viewValue: item.text
+			} as DynamicFormData
+		});
+	}
+
+	private static fuelEconomyApiHttpOptions = { headers: new HttpHeaders({'Accept': 'application/json'}) };
+
 	constructor(
 		private authTokenService: AuthTokenService,
 		private httpClient: HttpClient,
 		private jwtHelperService: JwtHelperService) {
 	}
 
-	public getAvaliableDates(): Observable<any> {
+	public getScheduleViewModel(): Observable<AppointmentScheduleResponse> {
 		const token = this.jwtHelperService.decodeToken(this.authTokenService.authToken);
 
 		return this.httpClient.get<any>(`${environment.apiBaseUrl}/${token.conos[0]}/schedule`, environment.httpOptions).pipe(
 				map(dto => {
-					dto.daysAvailable = dto.daysAvailable.map(d => new Date(d * 1000).toISOString());
+					dto.daysAvailable = dto.daysAvailable.map(d => new Date(d * 1000));
+
+					const problemDescriptions = [];
+					for (let p of dto.problemDescriptions) {
+						for (let viewValue of p.Desc) {
+							problemDescriptions.push({
+								formValue: p.category,
+								viewValue: viewValue
+							} as DynamicFormData);
+						}
+					}
+					dto.problemDescriptions = problemDescriptions;
+
 					return dto as AppointmentScheduleResponse;
 				})
 		);
 	}
+
+	public getVehicleYears(): Observable<DynamicFormData[]> {
+		return this.httpClient.get<any>(
+			`https://www.fueleconomy.gov/ws/rest/vehicle/menu/year`,
+			AppointmentSchedulerHttpService.fuelEconomyApiHttpOptions)
+			.pipe(
+				map(AppointmentSchedulerHttpService.fuelEconomyApiMapper)
+			);
+	}
+
+	public getVehicleMakesByYear(year: string): Observable<DynamicFormData[]> {
+		return this.httpClient.get<any>(
+			`https://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year=${year}`,
+			AppointmentSchedulerHttpService.fuelEconomyApiHttpOptions)
+			.pipe(
+				map(AppointmentSchedulerHttpService.fuelEconomyApiMapper)
+			);
+	}
+
+	public getVehicleModelsByYearAndMake(year: string, make: string): Observable<DynamicFormData[]> {
+		return this.httpClient.get<any>(
+			`https://www.fueleconomy.gov/ws/rest/vehicle/menu/model?year=${year}&make=${make}`,
+			AppointmentSchedulerHttpService.fuelEconomyApiHttpOptions)
+			.pipe(
+				map(AppointmentSchedulerHttpService.fuelEconomyApiMapper)
+			);
+	}
 }

projects/MyCar/src/app/appointment-scheduler/appointment-scheduler-routing.module.ts

@@ -12,6 +12,11 @@ export const appointmentSchedulerRoutes: Routes = [
 		path: '',
 		component: AppointmentSchedulerComponent,
 		canDeactivate: [CanDeactivateGuard]
+	},
+	{
+		path: ':vehicleId',
+		component: AppointmentSchedulerComponent,
+		canDeactivate: [CanDeactivateGuard]
 	}
 ];
 @NgModule({

projects/MyCar/src/app/appointment-scheduler/appointment-scheduler.component.html

@@ -1,4 +1,4 @@
-<mat-vertical-stepper *ngIf="scheduleProgress === 'Entry'" [linear]="isLinear" color="accent">
+<mat-vertical-stepper *ngIf="scheduleProgress === 'Entry'" [linear]="true" color="accent">
 	<!-- Step 1 - Need To Schedule? -->
 	<mat-step state="scheduling-viability" color="accent">
 		<div fxLayout="column" fxLayoutGap="10px">
@@ -74,10 +74,11 @@
 
 			<form [formGroup]="vehicleFormGroup" fxLayout="column" fxLayoutGap="10px">
 				<!-- Known vehicles -->
-				<ng-container *ngIf="isVehicleNewToCustomer === 'Existing'">
+				<ng-container *ngIf="isVehicleNewToCustomer === 'Existing' && myVehicles.length > 0">
 					<mat-form-field style="width: 100%" color="accent">
-						<mat-select formControlName="knownVehicle" placeholder="Choose a vehicle *">
-							<mat-option *ngFor="let v of myVehicles" value="{{v.formValue}}">{{v.viewValue}}</mat-option>
+						<mat-select [formControl]="knownVehicle" placeholder="Choose a vehicle *">
+							<mat-option selected>--</mat-option>
+							<mat-option *ngFor="let v of myVehicles" [value]="v.formValue">{{v.viewValue}}</mat-option>
 						</mat-select>
 						<mat-error *ngIf="knownVehicle.hasError('required')">Vehicle is required</mat-error>
 					</mat-form-field>
@@ -86,12 +87,15 @@
 				<!-- Add a new vehicle -->
 				<ng-container *ngIf="isVehicleNewToCustomer === 'New'">
 					<mat-form-field style="width: 100%" color="accent">
-						<input matInput type="number" formControlName="year" placeholder="Year *">
+						<mat-select formControlName="year" placeholder="Year *" (selectionChange)="onYearChange()">
+							<mat-option selected>--</mat-option>
+							<mat-option *ngFor="let v of vehicleYears" value="{{v.formValue}}">{{v.viewValue}}</mat-option>
+						</mat-select>
 						<mat-error *ngIf="year.hasError('required')">Vehicle year is required</mat-error>
 					</mat-form-field>
 
 					<mat-form-field style="width: 100%" color="accent">
-						<mat-select formControlName="make" placeholder="Make *">
+						<mat-select formControlName="make" placeholder="Make *" (selectionChange)="onMakeChange()">
 							<mat-option *ngFor="let v of vehicleMakes" value="{{v.formValue}}">{{v.viewValue}}</mat-option>
 						</mat-select>
 						<mat-error *ngIf="make.hasError('required')">Vehicle make is required</mat-error>
@@ -119,21 +123,28 @@
 			<form [formGroup]="issuesFormGroup" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="10px">
 				<mat-form-field style="width: 100%" color="accent">
 					<mat-chip-list #chipList>
-						<mat-chip *ngFor="let issue of issues" [selectable]="chipIsSelectable"
-						          [removable]="chipIsRemovable" (removed)="remove(issue)">
+						<mat-chip
+								*ngFor="let issue of issues"
+								[selectable]="true"
+								[removable]="true"
+								(removed)="remove(issue)">
 							{{issue.viewValue}}
-							<mat-icon matChipRemove *ngIf="chipIsRemovable">cancel</mat-icon>
+							<mat-icon matChipRemove>cancel</mat-icon>
 						</mat-chip>
 						<input placeholder="Common concerns and issues"
 						       #issueInput
 						       formControlName="commonIssues"
 						       [matAutocomplete]="auto"
 						       [matChipInputFor]="chipList"
 						       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-						       [matChipInputAddOnBlur]="chipAddsOnBlur">
+						       [matChipInputAddOnBlur]="false">
 					</mat-chip-list>
-					<mat-autocomplete #auto="matAutocomplete" (optionSelected)="addFromAutocomplete($event)">
-						<mat-option *ngFor="let issue of filteredIssues | async" [value]="issue">
+					<mat-autocomplete
+						#auto="matAutocomplete"
+						(optionSelected)="addFromAutocomplete($event)">
+						<mat-option
+								*ngFor="let issue of filteredIssues | async"
+								[value]="issue">
 							{{issue.viewValue}}
 						</mat-option>
 					</mat-autocomplete>
@@ -146,7 +157,7 @@
 				</mat-form-field>
 
 				<div>
-					<button mat-button color="accent" type="submit" matStepperNext>Schedule</button>
+					<button mat-button [disabled]="issuesFormGroup.invalid" color="accent" type="submit" matStepperNext>Schedule</button>
 				</div>
 			</form>
 		</div>