-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
877 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Routes, RouterModule } from '@angular/router'; | ||
import { ModuleWithProviders } from '@angular/core'; | ||
|
||
import { AppFormComponent } from './form.component'; | ||
|
||
const routes: Routes = [ | ||
{ | ||
path: 'form', | ||
component: AppFormComponent | ||
} | ||
]; | ||
|
||
export const AppFormRoutingModule: ModuleWithProviders = RouterModule.forChild( | ||
routes | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<mat-card> | ||
<mat-card-subtitle>Common</mat-card-subtitle> | ||
<mat-card-title>Form</mat-card-title> | ||
<mat-card-content> | ||
See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/common/form">code of this example</a> | ||
</mat-card-content> | ||
</mat-card> | ||
|
||
<igo-form | ||
*ngIf="form$ | async as form" | ||
[form]="form" | ||
[formData]="data$ | async" | ||
(submitForm)="onSubmit($event)"> | ||
|
||
<igo-form-group [group]="form.groups[0]"></igo-form-group> | ||
|
||
<div formButtons> | ||
<button | ||
mat-button | ||
type="button" | ||
color="primary" | ||
(click)="fillForm()"> | ||
Fill Form | ||
</button> | ||
<button | ||
mat-flat-button | ||
type="submit" | ||
color="primary" | ||
[disabled]="submitDisabled"> | ||
Submit | ||
</button> | ||
</div> | ||
</igo-form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
pre, | ||
code { | ||
font-family: monospace, monospace; | ||
} | ||
pre { | ||
overflow: auto; | ||
} | ||
pre > code { | ||
display: block; | ||
padding: 1rem; | ||
word-wrap: normal; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import { Component, OnInit, OnDestroy } from '@angular/core'; | ||
import { Validators } from '@angular/forms'; | ||
import { BehaviorSubject, Subscription } from 'rxjs'; | ||
|
||
import { Form, FormService } from '@igo2/common'; | ||
|
||
@Component({ | ||
selector: 'app-form', | ||
templateUrl: './form.component.html', | ||
styleUrls: ['./form.component.scss'] | ||
}) | ||
export class AppFormComponent implements OnInit, OnDestroy { | ||
|
||
form$ = new BehaviorSubject<Form>(undefined); | ||
|
||
data$ = new BehaviorSubject<{[key: string]: any}>(undefined); | ||
|
||
submitDisabled: boolean = true; | ||
|
||
private valueChanges$$: Subscription; | ||
|
||
constructor(private formService: FormService) {} | ||
|
||
ngOnInit() { | ||
const fieldConfigs = [ | ||
{ | ||
name: 'id', | ||
title: 'ID', | ||
options: { | ||
cols: 1, | ||
validator: Validators.required | ||
} | ||
}, | ||
{ | ||
name: 'name', | ||
title: 'Name', | ||
options: { | ||
cols: 1, | ||
validator: Validators.required | ||
} | ||
}, | ||
{ | ||
name: 'status', | ||
title: 'Status', | ||
type: 'select', | ||
options: { | ||
cols: 2 | ||
}, | ||
inputs: { | ||
choices: [ | ||
{value: 1, title: 'Single'}, | ||
{value: 2, title: 'Married'} | ||
] | ||
} | ||
} | ||
]; | ||
|
||
const fields = fieldConfigs.map((config) => this.formService.field(config)); | ||
const form = this.formService.form([], [this.formService.group({name: 'info'}, fields)]); | ||
|
||
this.valueChanges$$ = form.control.valueChanges.subscribe(() => { | ||
this.submitDisabled = !form.control.valid; | ||
}); | ||
|
||
this.form$.next(form); | ||
} | ||
|
||
ngOnDestroy() { | ||
this.valueChanges$$.unsubscribe(); | ||
} | ||
|
||
fillForm() { | ||
this.data$.next({ | ||
id: 1, | ||
name: 'Bob', | ||
status: 2 | ||
}); | ||
} | ||
|
||
onSubmit(data: {[key: string]: any}) { | ||
alert(JSON.stringify(data)); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { MatButtonModule, MatCardModule } from '@angular/material'; | ||
|
||
import { IgoLibFormModule } from '@igo2/common'; | ||
|
||
import { AppFormComponent } from './form.component'; | ||
import { AppFormRoutingModule } from './form-routing.module'; | ||
|
||
@NgModule({ | ||
declarations: [AppFormComponent], | ||
imports: [ | ||
CommonModule, | ||
AppFormRoutingModule, | ||
MatButtonModule, | ||
MatCardModule, | ||
IgoLibFormModule | ||
], | ||
exports: [AppFormComponent] | ||
}) | ||
export class AppFormModule {} |
10 changes: 10 additions & 0 deletions
10
projects/common/src/lib/form/form-field/form-field-select.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<mat-form-field> | ||
<mat-select | ||
[required]="required" | ||
[placeholder]="placeholder" | ||
[formControl]="formControl"> | ||
<mat-option *ngFor="let choice of choices$ | async" [value]="choice.value"> | ||
{{choice.title}} | ||
</mat-option> | ||
</mat-select> | ||
</mat-form-field> |
56 changes: 56 additions & 0 deletions
56
projects/common/src/lib/form/form-field/form-field-select.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { | ||
Input, | ||
Component, | ||
ChangeDetectionStrategy, | ||
} from '@angular/core'; | ||
import { FormControl } from '@angular/forms'; | ||
|
||
import { Observable, of } from 'rxjs'; | ||
|
||
import { formControlIsRequired } from '../shared/form.utils'; | ||
import { FormFieldSelectChoice } from '../shared/form.interfaces'; | ||
import { FormFieldComponent } from '../shared/form-field-component'; | ||
|
||
/** | ||
* This component renders a select field | ||
*/ | ||
@FormFieldComponent('select') | ||
@Component({ | ||
selector: 'igo-form-field-select', | ||
templateUrl: './form-field-select.component.html', | ||
changeDetection: ChangeDetectionStrategy.OnPush | ||
}) | ||
export class FormFieldSelectComponent { | ||
|
||
public choices$: Observable<FormFieldSelectChoice[]>; | ||
|
||
/** | ||
* The field's form control | ||
*/ | ||
@Input() formControl: FormControl; | ||
|
||
/** | ||
* Field placeholder | ||
*/ | ||
@Input() placeholder: string; | ||
|
||
/** | ||
* Select input choices | ||
*/ | ||
@Input() | ||
set choices(value: Observable<FormFieldSelectChoice[]> | FormFieldSelectChoice[]) { | ||
if (value instanceof Observable) { | ||
this.choices$ = value; | ||
} else { | ||
this.choices$ = of(value); | ||
} | ||
} | ||
|
||
/** | ||
* Whether the field is required | ||
*/ | ||
get required(): boolean { | ||
return formControlIsRequired(this.formControl); | ||
} | ||
|
||
} |
9 changes: 9 additions & 0 deletions
9
projects/common/src/lib/form/form-field/form-field-text.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
|
||
|
||
<mat-form-field> | ||
<input | ||
matInput | ||
[required]="required" | ||
[placeholder]="placeholder" | ||
[formControl]="formControl"> | ||
</mat-form-field> |
39 changes: 39 additions & 0 deletions
39
projects/common/src/lib/form/form-field/form-field-text.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { | ||
Input, | ||
Component, | ||
ChangeDetectionStrategy, | ||
} from '@angular/core'; | ||
import { FormControl } from '@angular/forms'; | ||
|
||
import { formControlIsRequired } from '../shared/form.utils'; | ||
import { FormFieldComponent } from '../shared/form-field-component'; | ||
|
||
/** | ||
* This component renders a text field | ||
*/ | ||
@FormFieldComponent('text') | ||
@Component({ | ||
selector: 'igo-form-field-text', | ||
templateUrl: './form-field-text.component.html', | ||
changeDetection: ChangeDetectionStrategy.OnPush | ||
}) | ||
export class FormFieldTextComponent { | ||
|
||
/** | ||
* The field's form control | ||
*/ | ||
@Input() formControl: FormControl; | ||
|
||
/** | ||
* Field placeholder | ||
*/ | ||
@Input() placeholder: string; | ||
|
||
/** | ||
* Whether the field is required | ||
*/ | ||
get required(): boolean { | ||
return formControlIsRequired(this.formControl); | ||
} | ||
|
||
} |
9 changes: 9 additions & 0 deletions
9
projects/common/src/lib/form/form-field/form-field.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
|
||
|
||
<ng-container *ngIf="field !== undefined"> | ||
<igo-dynamic-outlet | ||
[component]="getFieldComponent()" | ||
[inputs]="getFieldInputs()" | ||
[subscribers]="getFieldSubscribers()"> | ||
</igo-dynamic-outlet> | ||
</ng-container> |
3 changes: 3 additions & 0 deletions
3
projects/common/src/lib/form/form-field/form-field.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:host { | ||
display: block; | ||
} |
44 changes: 44 additions & 0 deletions
44
projects/common/src/lib/form/form-field/form-field.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import { | ||
Component, | ||
Input, | ||
ChangeDetectionStrategy | ||
} from '@angular/core'; | ||
|
||
import { FormField, FormFieldInputs } from '../shared/form.interfaces'; | ||
import { FormFieldService } from '../shared/form-field.service'; | ||
|
||
/** | ||
* This component renders the proper form input based on | ||
* the field configuration it receives. | ||
*/ | ||
@Component({ | ||
selector: 'igo-form-field', | ||
templateUrl: './form-field.component.html', | ||
styleUrls: ['./form-field.component.scss'], | ||
changeDetection: ChangeDetectionStrategy.OnPush | ||
}) | ||
export class FormFieldComponent { | ||
|
||
/** | ||
* Field configuration | ||
*/ | ||
@Input() field: FormField; | ||
|
||
constructor(private formFieldService: FormFieldService) {} | ||
|
||
getFieldComponent(): any { | ||
return this.formFieldService.getFieldByType(this.field.type || 'text'); | ||
} | ||
|
||
getFieldInputs(): FormFieldInputs { | ||
return Object.assign( | ||
{placeholder: this.field.title}, | ||
Object.assign({}, this.field.inputs || {}), | ||
{formControl: this.field.control} | ||
); | ||
} | ||
|
||
getFieldSubscribers(): {[key: string]: ({field: FormField, control: FormControl}) => void } { | ||
return Object.assign({}, this.field.subscribers || {}); | ||
} | ||
} |
Oops, something went wrong.