Skip to content

Commit

Permalink
refactor(igx-combo): refactor combo sample #1260
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lipata
Lipata committed Jun 25, 2018
1 parent e39adbd commit 4ecf6c1
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 117 deletions.
74 changes: 10 additions & 64 deletions src/app/combo/combo.sample.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
<div class="sample-wrapper">
<app-page-header title="Combo" description="Combo lets you choose value from a list"></app-page-header>
<section class="combo-sample">
<div class="btn-wrapper mb24">
<h3 class="mb24">COMBO DEMO</h3>
<span class="mb16">Change combo data to:</span>
<div class="btn-container">
<button class="igx-button--flat" igxRipple (click)="changeData()">Initial</button>
<button class="igx-button--flat" igxRipple (click)="changeData('primitive')">Primitve</button>
<button class="igx-button--flat" igxRipple (click)="changeData('complex')">Complex</button>
<button class="igx-button--flat" igxRipple (click)="toggleItem('Connecticut')">Toggle "Connecticut"</button>
</div>
</div>
<div class="input-wrapper">
<div class="input-row">
<igx-input-group type="box" class="input-container">
Expand All @@ -23,76 +13,32 @@ <h3 class="mb24">COMBO DEMO</h3>
<input igxInput name="age" placeholder="Age"/>
</igx-input-group>
</div>

<div class="input-row">
<igx-combo class="input-container" placeholder="Location(s)"
(onAddition)="handleAddition($event)"
[data]="items"
[allowCustomValues]="true"
[filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
(onAddition)="handleAddition($event)"
[data]="items"
[allowCustomValues]="true"
[filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
<div class="state-card--simple">
<!--<span class="small-red-circle"></span>-->
<div class="display-value--main">{{display[key]}}</div>
<div class="display-value--sub">{{display.region}}</div>
</div>
</ng-template>
<ng-template *ngIf="currentDataType === 'primitive'" #itemTemplate let-display let-key="valueKey">
<div class="state-card--simple">
<!--<span class="small-red-circle"></span>-->
<div class="display-value--main">{{display}}</div>
<div class="display-value--sub"></div>
</div>
</ng-template>
<!--<ng-template #dropdownHeader>-->
<!--<div class="header-class"><span>State</span><span>Region</span></div>-->
<!--</ng-template>-->
<!--<ng-template #dropdownFooter>-->
<!--<div class="footer-class">This is a footer</div>-->
<!--</ng-template>-->
</igx-combo>
</div>
<div class="btn-wrapper mb24">
<div class="btn-container">
<button class="igx-button--flat" igxRipple (click)="toggleItem('Connecticut')">Toggle "Connecticut"</button>
</div>
</div>
</div>
</section>
<!-- <section class="sample-content">
<hr>
<div>
<igx-combo class="input-container" placeholder="Location(s)"
[data]="[1,2,3,4,5,6,21,121,11,2121,1212,1121,21121,12111]" [width]="'400px'" [filterable]='true'>
</igx-combo>
</div>
</section> -->

<!-- <form #templateBased="ngForm" (ngSubmit)="onSubmitTemplateBased()">
<p>
<igx-combo #comboTemplate [(ngModel)]="valuesTemplate" name="comboTemplatche"
class="input-container" [filterable]="true" placeholder="Location(s)" [width]="'100%'"
[data]="items" [disaplyKey]="'field'" [valueKey]="'field'" [groupKey]="'region'"></igx-combo>
</p>
<p>
<button type="submit" [disabled]="!templateBased.valid">Submit</button>
</p>
</form> -->

<div class="input-wrapper" style="display: none; visibility: hidden;">
<form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
<p>
<label>First Name:</label>
<input type="text" formControlName="firstName">
</p>
<p>
<label>Password:</label>
<input type="password" formControlName="password">
</p>
<p>
<igx-combo #comboReactive formControlName="townCombo"
class="input-container" [filterable]="true" placeholder="Location(s)" [width]="'100%'"
[data]="items" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''"></igx-combo>
</p>
<p>
<button type="submit" [disabled]="!reactiveForm.valid">Submit</button>
</p>
</form>
</div>
</div>
54 changes: 1 addition & 53 deletions src/app/combo/combo.sample.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,26 +40,7 @@ export class ComboSampleComponent implements OnInit {
public valueKeyVar = 'field';
public currentDataType = '';

get valuesTemplate() {
return this.comboTemplate.selectedItems();
}
set valuesTemplate(values: Array<any>) {
this.comboTemplate.selectItems(values);
}

reactiveForm: FormGroup;

onSubmitReactive() {
console.log('model-based form submitted');
console.log(this.reactiveForm);
}

onSubmitTemplateBased() {
console.log('template-driven form submitted');
console.log(this.reactiveForm);
}

constructor(fb: FormBuilder) {
constructor() {

const division = {
'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
Expand Down Expand Up @@ -89,39 +70,6 @@ export class ComboSampleComponent implements OnInit {
this.initData = this.items;
});
}

this.reactiveForm = fb.group({
'firstName': new FormControl('', Validators.required),
'password': ['', Validators.required],
'townCombo': [{ value: [this.items[0]], disabled: true }, Validators.required]
});

}

changeData(type) {
switch (type) {
case 'complex':
this.igxCombo.deselectAllItems();
this.valueKeyVar = 'field';
this.currentDataType = 'complex';
this.items = complex;
console.log(this.items, complex);
break;
case 'primitive':
this.igxCombo.deselectAllItems();
this.currentDataType = 'primitive';
this.igxCombo.groupKey = '';
this.valueKeyVar = '';
this.items = primitive;
console.log(this.items);
break;
default:
this.igxCombo.deselectAllItems();
this.valueKeyVar = 'field';
this.currentDataType = 'initial';
this.items = this.initData;
console.log(this.items);
}
}

onSelection(ev) {
Expand Down

0 comments on commit 4ecf6c1

Please sign in to comment.