Skip to content

Commit 75c1804

Browse files
committed
added support for complex objects in select
1 parent 4d0a990 commit 75c1804

File tree

7 files changed

+89
-68
lines changed

7 files changed

+89
-68
lines changed

.idea/workspace.xml

Lines changed: 18 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

projects/ng-metro4/src/lib/form/ng-metro4-forms.module.ts

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
1-
import { NgModule } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
33
import 'metro4';
44

5-
import { TagInputComponent } from './tag-input/tag-input.component';
6-
import { SelectComponent } from './select/select.component';
7-
import { InputComponent } from './input/input.component';
8-
import { MaterialInputComponent } from './material-input/material-input.component';
9-
import { TextareaComponent } from './textarea/textarea.component';
10-
import { CheckboxComponent } from './checkbox/checkbox.component';
11-
import { RadioComponent } from './radio/radio.component';
12-
import { RadioGroupComponent } from './radio-group/radio-group.component';
13-
import { SwitchComponent } from './switch/switch.component';
14-
import { FileInputComponent } from './file-input/file-input.component';
15-
import { KeypadComponent } from './keypad/keypad.component';
16-
import { SliderComponent } from './slider/slider.component';
17-
import { SpinnerComponent } from './spinner/spinner.component';
18-
import { RatingComponent } from './rating/rating.component';
19-
import { CalendarPickerComponent } from './calendar-picker/calendar-picker.component';
20-
import { CalendarComponent } from './calendar/calendar.component';
21-
import { DatePickerComponent } from './date-picker/date-picker.component';
22-
import { TimePickerComponent } from './time-picker/time-picker.component';
5+
import {TagInputComponent} from './tag-input/tag-input.component';
6+
import {SelectComponent} from './select/select.component';
7+
import {InputComponent} from './input/input.component';
8+
import {MaterialInputComponent} from './material-input/material-input.component';
9+
import {TextareaComponent} from './textarea/textarea.component';
10+
import {CheckboxComponent} from './checkbox/checkbox.component';
11+
import {RadioComponent} from './radio/radio.component';
12+
import {RadioGroupComponent} from './radio-group/radio-group.component';
13+
import {SwitchComponent} from './switch/switch.component';
14+
import {FileInputComponent} from './file-input/file-input.component';
15+
import {KeypadComponent} from './keypad/keypad.component';
16+
import {SliderComponent} from './slider/slider.component';
17+
import {SpinnerComponent} from './spinner/spinner.component';
18+
import {RatingComponent} from './rating/rating.component';
19+
import {CalendarPickerComponent} from './calendar-picker/calendar-picker.component';
20+
import {CalendarComponent} from './calendar/calendar.component';
21+
import {DatePickerComponent} from './date-picker/date-picker.component';
22+
import {TimePickerComponent} from './time-picker/time-picker.component';
2323
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
24-
import { CheckboxGroupComponent } from './checkbox-group/checkbox-group.component';
24+
import {CheckboxGroupComponent} from './checkbox-group/checkbox-group.component';
2525
import {IsArrayPipe} from './pipes/is-array.pipe';
26-
import { FormControlWrapperComponent } from './form-control-wrapper/form-control-wrapper.component';
27-
import { ErrorDisplayPipe } from './pipes/error-display.pipe';
28-
import { FormWrapperComponent } from './form-wrapper/form-wrapper.component';
29-
import { FormBuilderComponent } from './form-builder/form-builder.component';
30-
import { DynamicFormControlComponent } from './dynamic-form-control/dynamic-form-control.component';
31-
import { UnwrapObservableOrValuePipe } from './pipes/unwrap-observable-or-value.pipe';
32-
import { ExecuteFunctionOncePipe } from './pipes/execute-function-once.pipe';
33-
import { TrustHtmlPipe } from './pipes/trust-html.pipe';
34-
import { ObjectKeysPipe } from './pipes/object-keys.pipe';
26+
import {FormControlWrapperComponent} from './form-control-wrapper/form-control-wrapper.component';
27+
import {ErrorDisplayPipe} from './pipes/error-display.pipe';
28+
import {FormWrapperComponent} from './form-wrapper/form-wrapper.component';
29+
import {FormBuilderComponent} from './form-builder/form-builder.component';
30+
import {DynamicFormControlComponent} from './dynamic-form-control/dynamic-form-control.component';
31+
import {UnwrapObservableOrValuePipe} from './pipes/unwrap-observable-or-value.pipe';
32+
import {ExecuteFunctionOncePipe} from './pipes/execute-function-once.pipe';
33+
import {TrustHtmlPipe} from './pipes/trust-html.pipe';
34+
import {ObjectKeysPipe} from './pipes/object-keys.pipe';
35+
import { CreateHashPipe } from './pipes/create-hash.pipe';
3536

3637
const declarations = [
3738
TagInputComponent,
@@ -73,6 +74,7 @@ const declarations = [
7374
TrustHtmlPipe,
7475
ObjectKeysPipe,
7576
...declarations,
77+
CreateHashPipe,
7678
],
7779
exports: [
7880
...declarations,

projects/ng-metro4/src/lib/form/select/select.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020

2121
<ng-container *ngIf="options | isArray">
2222
<ng-container *ngFor="let option of options">
23-
<option *ngIf="!option.options" [value]="option.value" [attr.data-template]="option.dataTemplate">
23+
<option *ngIf="!option.options" [value]="option.value | createHash" [attr.data-template]="option.dataTemplate">
2424
{{option.title}}
2525
</option>
2626

2727
<optgroup *ngIf="option.options" [label]="option.groupName">
28-
<option *ngFor="let childOption of option.options" [value]="childOption.value" [attr.data-template]="childOption.dataTemplate">
28+
<option *ngFor="let childOption of option.options" [value]="childOption.value | createHash" [attr.data-template]="childOption.dataTemplate">
2929
{{childOption.title}}
3030
</option>
3131
</optgroup>

projects/ng-metro4/src/lib/form/select/select.component.ts

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {DefaultValueAccessor} from '../../helper/default-value-accessor';
44
import {TypeAlias} from '../../helper/type-alias';
55
import {asapScheduler} from 'rxjs';
66
import {ObjectHelper} from '../../helper/object-helper';
7+
import {StringHelper} from '../../helper/string-helper';
78

89
declare var $: any;
910

@@ -20,7 +21,7 @@ export interface Option {
2021
providers: [DefaultValueAccessor.get(SelectComponent), TypeAlias.get(SelectComponent)],
2122
changeDetection: ChangeDetectionStrategy.OnPush
2223
})
23-
export class SelectComponent extends ControlBase<string|string[]> implements OnChanges {
24+
export class SelectComponent extends ControlBase<object|object[]> implements OnChanges {
2425
@Input('options') options: { [key: string]: (string | { [key: string]: string }) } |
2526
(Option | { groupName: string, options: Option[] })[];
2627
@Input('multiple') multiple = false;
@@ -69,6 +70,22 @@ export class SelectComponent extends ControlBase<string|string[]> implements OnC
6970
});
7071

7172
this.select.options.onChange = (val) => {
73+
if (this.options instanceof Array) {
74+
const allOptions: Option[] = [];
75+
76+
this.options.forEach((option: Option | { options: Option[] }) => {
77+
if (!!(<any>option).options) {
78+
(<any>option).options.forEach((subOption: Option) => {
79+
allOptions.push(subOption);
80+
});
81+
} else {
82+
allOptions.push(<Option>option);
83+
}
84+
});
85+
86+
val = val.map(key => allOptions.find(option => StringHelper.createHash(option.value) === key)).filter(v => !!v).map(v => v.value);
87+
}
88+
7289
if (this.multiple) {
7390
this.changeValue(val.slice(0));
7491
} else {
@@ -98,12 +115,17 @@ export class SelectComponent extends ControlBase<string|string[]> implements OnC
98115
return;
99116
}
100117

118+
let selectValue: any[] = this.multiple ? <any[]>this.innerValue : [ this.innerValue ];
119+
120+
if (this.options instanceof Array) {
121+
selectValue = selectValue.map(v => StringHelper.createHash(v));
122+
}
123+
101124
if (this.multiple) {
102125
this.select.reset();
103-
this.select.val(this.innerValue);
104-
} else {
105-
this.select.val([this.innerValue]);
106126
}
127+
128+
this.select.val(selectValue);
107129
}
108130

109131
newClassValue(newClasses: string[], oldClasses: string[]) {

projects/ng-metro4/src/lib/helper/string-helper.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export class StringHelper {
33
/**
44
* Creates a GUID
55
*/
6-
public static guid() {
6+
public static guid(): string {
77
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
88
/[xy]/g,
99
(c: string): string => {
@@ -15,4 +15,8 @@ export class StringHelper {
1515

1616
return uuid;
1717
}
18+
19+
public static createHash(object: any): string {
20+
return JSON.stringify(object || null);
21+
}
1822
}

src/app/form/select/select.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,20 @@ <h1>Select</h1>
6565
]]>
6666
</app-doc-component>
6767

68-
<app-doc-component header="Using an array as options" [values]="{ model: 'value', options: options }" [showModel]="true">
68+
<app-doc-component header="Using an array as options" [values]="{ model: 28, options: options }" [showModel]="true">
6969
<![CDATA[
70+
<m4-select [(ngModel)]="model" [options]="options"></m4-select>\n
7071
<m4-select [(ngModel)]="model" [options]="options"></m4-select>
7172
]]>
7273
<div lang>
7374
<![CDATA[
7475
\f:(ts)
7576
options = [\n
76-
\t{title: 'Das ist ein test', value: 12, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'},\n
77+
\t{title: 'Das ist ein test', value: { test: 'This is the first test' }, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'},\n
7778
\t{\n
7879
\t\tgroupName: 'Test Gruppe',\n
7980
\t\toptions: [\n
80-
\t\t\t{title: 'Das ist ein test', value: 13, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'}\n
81+
\t\t\t{title: 'Das ist ein test', value: 28, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'}\n
8182
\t\t]\n
8283
\t}\n
8384
];

src/app/form/select/select.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {Component, OnInit} from '@angular/core';
77
})
88
export class SelectComponent implements OnInit {
99
options = [
10-
{title: 'Das ist ein test', value: 12, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'},
10+
{title: 'Test 1 with object', value: { test: 'This is the first test' }, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'},
1111
{
1212
groupName: 'Test Gruppe',
1313
options: [
14-
{title: 'Das ist ein test', value: 13, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'}
14+
{title: 'Test 2 only number', value: 28, dataTemplate: '<span class=\'mif-amazon icon\'></span> $1'}
1515
]
1616
}
1717
];

0 commit comments

Comments
 (0)