user search component added
This commit is contained in:
byung eun park
parent
6edc8bf2fe
commit
a8af79c2ce
|
|
@ -4,6 +4,7 @@ import { UserConnectComponent } from './user-connect/user-connect.component';
|
|||
import { UserRegistComponent } from './user-regist/user-regist.component';
|
||||
import { UserFeesComponent } from './user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './user-attendance/user-attendance.component';
|
||||
import { ListSearchComponent } from '../component/list-search/list-search.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
UserDetailComponent,
|
||||
|
|
@ -11,5 +12,6 @@ export const COMPONENTS = [
|
|||
UserConnectComponent,
|
||||
UserRegistComponent,
|
||||
UserFeesComponent,
|
||||
UserAttendanceComponent
|
||||
UserAttendanceComponent,
|
||||
ListSearchComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Search
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
Search Click
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="mb-24" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row">
|
||||
|
||||
<form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
|
||||
name="form" [formGroup]="form">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="25" class="pr-4">
|
||||
<mat-label>First name</mat-label>
|
||||
<input matInput formControlName="firstName" required>
|
||||
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
|
||||
<mat-error>First Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="25" class="pl-4">
|
||||
<mat-label>Last name</mat-label>
|
||||
<input matInput formControlName="lastName" required>
|
||||
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
|
||||
<mat-error>Last Name is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Address</mat-label>
|
||||
<textarea matInput formControlName="address" required>
|
||||
1600 Amphitheatre Pkwy
|
||||
</textarea>
|
||||
<mat-error>Address is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Address 2</mat-label>
|
||||
<textarea matInput formControlName="address2"></textarea>
|
||||
<mat-error>Address 2 is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="33">
|
||||
<mat-label>City</mat-label>
|
||||
<input matInput formControlName="city" required>
|
||||
<mat-icon matSuffix class="secondary-text">location_city</mat-icon>
|
||||
<mat-error>City is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="34" class="px-8">
|
||||
<mat-label>State</mat-label>
|
||||
<input matInput formControlName="state" required>
|
||||
<mat-icon matSuffix class="secondary-text">location_city</mat-icon>
|
||||
<mat-error>State is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="33">
|
||||
<mat-label>Postal Code</mat-label>
|
||||
<input matInput #postalCode value="94043" formControlName="postalCode" maxlength="5" required>
|
||||
<mat-icon matSuffix class="secondary-text">markunread_mailbox</mat-icon>
|
||||
<!-- <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint> -->
|
||||
<mat-error>Postal Code is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
|
||||
|
||||
<mat-form-field appearance="outline" fxFlex="100">
|
||||
<mat-label>Country</mat-label>
|
||||
<mat-select formControlName="country" required>
|
||||
<mat-option [value]="'United States of America'">
|
||||
United States of America
|
||||
</mat-option>
|
||||
<mat-option [value]="'United Kingdom'">
|
||||
United Kingdom
|
||||
</mat-option>
|
||||
<mat-option [value]="'Russia'">
|
||||
Russia
|
||||
</mat-option>
|
||||
<mat-option [value]="'China'">
|
||||
China
|
||||
</mat-option>
|
||||
<mat-option [value]="'Japan'">
|
||||
Japan
|
||||
</mat-option>
|
||||
<mat-option [value]="'Turkey'">
|
||||
Turkey
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
|
||||
<mat-error>Country is required!</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div class="example-button-row" fxLayoutAlign="center" fxFlex="1 0 auto">
|
||||
<button mat-flat-button color="accent">Accent</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<!--
|
||||
-->
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.example-button-row button,
|
||||
.example-button-row a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ListSearchComponent } from './list-search.component';
|
||||
|
||||
describe('ListSearchComponent', () => {
|
||||
let component: ListSearchComponent;
|
||||
let fixture: ComponentFixture<ListSearchComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ListSearchComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ListSearchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-search',
|
||||
templateUrl: './list-search.component.html',
|
||||
styleUrls: ['./list-search.component.scss']
|
||||
})
|
||||
export class ListSearchComponent implements OnInit, OnDestroy {
|
||||
panelOpenState = false;
|
||||
form: FormGroup;
|
||||
|
||||
// Private
|
||||
private unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor(
|
||||
private _formBuilder: FormBuilder
|
||||
) {
|
||||
this.unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.form = this._formBuilder.group({
|
||||
company: [
|
||||
{
|
||||
value: 'Google',
|
||||
disabled: true
|
||||
}, Validators.required
|
||||
],
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
address: ['', Validators.required],
|
||||
address2: ['', Validators.required],
|
||||
city: ['', Validators.required],
|
||||
state: ['', Validators.required],
|
||||
postalCode: ['', [Validators.required, Validators.maxLength(5)]],
|
||||
country: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
// Unsubscribe from all subscriptions
|
||||
this.unsubscribeAll.next();
|
||||
this.unsubscribeAll.complete();
|
||||
}
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Finish the horizontal stepper
|
||||
*/
|
||||
finishHorizontalStepper(): void {
|
||||
alert('You have finished the horizontal stepper!');
|
||||
}
|
||||
|
||||
/**
|
||||
* Finish the vertical stepper
|
||||
*/
|
||||
finishVerticalStepper(): void {
|
||||
alert('You have finished the vertical stepper!');
|
||||
}
|
||||
}
|
||||
|
|
@ -18,14 +18,18 @@
|
|||
<!-- / APP TITLE -->
|
||||
|
||||
<!-- SEARCH -->
|
||||
<div class="search-wrapper ml-sm-32">
|
||||
|
||||
<!-- <div class="search-wrapper ml-sm-32">
|
||||
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input #filter placeholder="Search for an order" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- / SEARCH -->
|
||||
</div>
|
||||
<div class="center">
|
||||
<app-list-search></app-list-search>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user