add language and country selection

src/app/pages/quickstart/quickstart.component.html

@@ -26,7 +26,52 @@
 		</mat-step>
 		<mat-step [stepControl]="secondFormGroup" label="Preferred MetaData Language">
 			<form [formGroup]="secondFormGroup">
+				<div>
+					<mat-accordion class="accordion">
+						<mat-expansion-panel>
+							<mat-expansion-panel-header>
+								<mat-panel-title>
+									Languages
+								</mat-panel-title>
+								<mat-panel-description class="description">
+									Select preferred languages for metadata
+									<mat-icon>language</mat-icon>
+								</mat-panel-description>
+							</mat-expansion-panel-header>
+							<mat-form-field appearance="fill" class="lang">
+								<mat-label>Language</mat-label>
+								<mat-select [formControl]="language" multiple [(ngModel)]="default">
+									<input type="text" matInput formControlName="profile" >
+									<mat-option *ngFor="let language of languageList"
+													[value]="language">{{language}}</mat-option>
+								</mat-select>
+							</mat-form-field>
+							<button mat-button (click)="reset()">reset selection</button>
+						</mat-expansion-panel>
+						<mat-expansion-panel>
+							<mat-expansion-panel-header>
+								<mat-panel-title>
+									Country
+								</mat-panel-title>
+								<mat-panel-description class="description">
+									Select your country
+									<mat-icon> place</mat-icon>
+								</mat-panel-description>
+							</mat-expansion-panel-header>
+							<mat-form-field class="example-full-width" appearance="fill">
+								<mat-label>Country</mat-label>
+								<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
+								<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+									<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+										{{option.name}}
+									</mat-option>
+								</mat-autocomplete>
+							</mat-form-field>
 
+						</mat-expansion-panel>
+					</mat-accordion>
+
+				</div>
 				<div>
 					<button mat-button matStepperPrevious>Back</button>
 					<button mat-button matStepperNext>Next</button>

src/app/pages/quickstart/quickstart.component.scss

@@ -22,6 +22,24 @@
 		text-align: center;
 	}
 }
+
 .mr-xl-5{
 	margin-right: 0 !important;
 }
+
+.accordion .mat-expansion-panel-header-title,
+.accordion .mat-expansion-panel-header-description{
+	flex-basis: 0;
+}
+.accordion .mat-expansion-panel-header-description {
+	justify-content: space-between;
+	align-items: center;
+}
+
+.accordion .mat-form-field + .mat-form-field {
+	margin-left: 8px;
+}
+
+.lang{
+	width: 10%
+}

src/app/pages/quickstart/quickstart.component.ts

@@ -1,23 +1,27 @@
-import { Component, OnDestroy, AfterViewInit, OnInit } from "@angular/core";
+import { Component, OnDestroy, AfterViewInit , OnInit } from "@angular/core";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { DomSanitizer, SafeStyle, Title } from "@angular/platform-browser";
 import { ActivatedRoute, Router } from "@angular/router";
 import { MatDialog } from "@angular/material/dialog";
 import { HttpClient } from "@angular/common/http";
-import { FormBuilder, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { BreakpointObserver } from "@angular/cdk/layout";
 import { StepperOrientation } from "@angular/material/stepper";
 import { Observable } from "rxjs";
-import { map } from "rxjs/operators";
+import { map, startWith } from "rxjs/operators";
 import { AuthService } from "../../auth/auth.service";
 
+export interface Country {
+	name: string;
+}
 
 @Component({
 	selector: "app-quickstart",
 	templateUrl: "./quickstart.component.html",
 	styleUrls: ["./quickstart.component.scss"]
 })
-export class QuickstartComponent implements OnDestroy, AfterViewInit {
+
+export class QuickstartComponent implements OnDestroy, AfterViewInit, OnInit {
 
 
 	constructor(private route: ActivatedRoute,
@@ -35,10 +39,10 @@ export class QuickstartComponent implements OnDestroy, AfterViewInit {
 		this.stepperOrientation = breakpointObserver.observe("(min-width: 800px)")
 			.pipe(map(({matches}) => matches ? "horizontal" : "vertical"));
 	}
-
 	private scrollZone: HTMLElement;
 	private toolbar: HTMLElement;
 
+	// stepper
 	firstFormGroup = this._formBuilder.group({
 		firstCtrl: ["", Validators.required]
 	});
@@ -52,23 +56,54 @@ export class QuickstartComponent implements OnDestroy, AfterViewInit {
 
 	isShowDivIf = true;
 
+	language = new FormControl();
+	languageList: string[] = ["French", "English", "German", "Japanese", "Chinese"];
+	default = "";
 
+	myControl = new FormControl();
+	options: Country[] = [
+		{name: "France"},
+		{name: "England"},
+		{name: "Germany"},
+		{name: "Japan"},
+		{name: "China"},
+	];
+	filteredOptions: Observable<Country[]>;
 
-	// tslint:disable-next-line:typedef
-	toggleDisplayDivIf() {
-
-		this.isShowDivIf = !this.isShowDivIf;
-
+	// tslint:disable-next-line:no-shadowed-variable variable-name
+	displayFn(Country: Country): string {
+		return Country && Country.name ? Country.name : "";
 	}
 
+	private _filter(name: string): Country[] {
+		// tslint:disable-next-line:typedef
+		const filterValue = name.toLowerCase();
+
+		return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
+	}
+
+
+	reset(): void {
+		this.default = "";
+	}
+
+	toggleDisplayDivIf(): void {
+		this.isShowDivIf = !this.isShowDivIf;
+	}
 
 	Register(): void
 	{
 		this.authManager.login();
 	}
 
-	ngOnDestroy(): void {
 
+	ngOnInit(): void {
+		this.filteredOptions = this.myControl.valueChanges
+			.pipe(
+				startWith(""),
+				map(value => typeof value === "string" ? value : value.name),
+				map(name => name ? this._filter(name) : this.options.slice())
+			);
 	}
 
 	ngAfterViewInit(): void {
@@ -78,4 +113,8 @@ export class QuickstartComponent implements OnDestroy, AfterViewInit {
 		this.scrollZone.style.marginTop = "0";
 		this.scrollZone.style.maxHeight = "100vh";
 	}
+
+	ngOnDestroy(): void {
+	}
 }
+