Skip to content

add optionValue to dropdown, multiselect, listbox and selectButton #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
clystian wants to merge 1 commit into
base: optionValue
Choose a base branch
from
Open

add optionValue to dropdown, multiselect, listbox and selectButton #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/components/dropdown/dropdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,8 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView

@Input() optionLabel: string;

@Input() optionValue: string;

@Input() autoDisplayFirst: boolean = true;

@Input() group: boolean;
Expand Down Expand Up @@ -354,7 +356,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
}

set options(val: any[]) {
let opts = this.optionLabel ? ObjectUtils.generateSelectItems(val, this.optionLabel) : val;
let opts = (this.optionLabel || this.optionValue) ? ObjectUtils.generateSelectItems(val, this.optionLabel, this.optionValue) : val;
this._options = opts;
this.optionsToDisplay = this._options;
this.updateSelectedOption(this.value);
Expand Down
4 changes: 3 additions & 1 deletion src/app/components/listbox/listbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ export class Listbox implements AfterContentInit, ControlValueAccessor {

@Input() optionLabel: string;

@Input() optionValue: string;

@Input() ariaFilterLabel: string;

@Output() onChange: EventEmitter<any> = new EventEmitter();
Expand Down Expand Up @@ -129,7 +131,7 @@ export class Listbox implements AfterContentInit, ControlValueAccessor {
}

set options(val: any[]) {
let opts = this.optionLabel ? ObjectUtils.generateSelectItems(val, this.optionLabel) : val;
let opts = (this.optionLabel || this.optionValue) ? ObjectUtils.generateSelectItems(val, this.optionLabel, this.optionValue) : val;
this._options = opts;
}

Expand Down
6 changes: 4 additions & 2 deletions src/app/components/multiselect/multiselect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,13 +204,15 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
@Input() showToggleAll: boolean = true;

@Input() emptyFilterMessage: string = 'No results found';

@Input() resetFilterOnHide: boolean = false;

@Input() dropdownIcon: string = 'pi pi-chevron-down';

@Input() optionLabel: string;

@Input() optionValue: string;

@Input() showHeader: boolean = true;

@Input() autoZIndex: boolean = true;
Expand Down Expand Up @@ -296,7 +298,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
}

set options(val: any[]) {
let opts = this.optionLabel ? ObjectUtils.generateSelectItems(val, this.optionLabel) : val;
let opts = (this.optionLabel || this.optionValue) ? ObjectUtils.generateSelectItems(val, this.optionLabel, this.optionValue) : val;
this.visibleOptions = opts;
this._options = opts;
this.updateLabel();
Expand Down
4 changes: 3 additions & 1 deletion src/app/components/selectbutton/selectbutton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ export class SelectButton implements ControlValueAccessor {
@Input() dataKey: string

@Input() optionLabel: string;

@Input() optionValue: string;

@Output() onOptionClick: EventEmitter<any> = new EventEmitter();

Expand All @@ -69,7 +71,7 @@ export class SelectButton implements ControlValueAccessor {
}

set options(val: any[]) {
let opts = this.optionLabel ? ObjectUtils.generateSelectItems(val, this.optionLabel) : val;
let opts = (this.optionLabel || this.optionValue) ? ObjectUtils.generateSelectItems(val, this.optionLabel, this.optionValue) : val;
this._options = opts;
}

Expand Down
7 changes: 5 additions & 2 deletions src/app/components/utils/objectutils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,12 +118,15 @@ export class ObjectUtils {
}
}

public static generateSelectItems(val: any[], field: string): SelectItem[] {
public static generateSelectItems(val: any[], field: string, valueField: string): SelectItem[] {
let selectItems: SelectItem[];
if(val && val.length) {
selectItems = [];
for(let item of val) {
selectItems.push({label: this.resolveFieldData(item, field), value: item});
selectItems.push({
label: field ? this.resolveFieldData(item, field) : item.label,
value: valueField ? this.resolveFieldData(item, valueField) : item
});
}
}

Expand Down
22 changes: 14 additions & 8 deletions src/app/showcase/components/dropdown/dropdowndemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

<div class="content-section implementation">
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" optionValue="code" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity}}</p>

<h3>Editable</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar1" editable="true" placeholder="Select a Brand"></p-dropdown>
Expand Down Expand Up @@ -62,13 +62,13 @@ <h3>Import</h3>

<h3>Getting Started</h3>
<p>Dropdown requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how
instances whereas other way is providing an array of arbitrary objects along with the optionLabel or optionValue property to specify the field name of the label or the value of the option. SelectItem API is designed to have more control on how
the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"&gt;&lt;/p-dropdown&gt;

&lt;p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"&gt;&lt;/p-dropdown&gt;
&lt;p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name" optionValue="code"&gt;&lt;/p-dropdown&gt;
</code>
</pre>

Expand Down Expand Up @@ -276,9 +276,15 @@ <h3>Properties</h3>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>label</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Name of the value field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
Expand Down Expand Up @@ -627,8 +633,8 @@ <h3>Dependencies</h3>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Single&lt;/h3&gt;
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"&gt;&lt;/p-dropdown&gt;
&lt;p&gt;Selected City: &#123;&#123;selectedCity ? selectedCity.name : 'none'&#125;&#125;&lt;/p&gt;
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" optionValue="code" [showClear]="true"&gt;&lt;/p-dropdown&gt;
&lt;p&gt;Selected City: &#123;&#123;selectedCity&#125;&#125;&lt;/p&gt;

&lt;h3&gt;Editable&lt;/h3&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar1" editable="true" placeholder="Select a Brand"&gt;&lt;/p-dropdown&gt;
Expand Down Expand Up @@ -669,7 +675,7 @@ <h3>Dependencies</h3>

cities: City[];

selectedCity: City;
selectedCity: string;

cars: SelectItem[];

Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/components/dropdown/dropdowndemo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class DropdownDemo {

cities: City[];

selectedCity: City;
selectedCity: string;

cars: SelectItem[];

Expand Down
11 changes: 8 additions & 3 deletions src/app/showcase/components/listbox/listboxdemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h3>Import</h3>

<h3>Getting Started</h3>
<p>Listbox requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how
instances whereas other way is providing an array of arbitrary objects along with the optionLabel or optionValue property to specify the field name of the label or the value of the option. SelectItem API is designed to have more control on how
the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<pre>

Expand Down Expand Up @@ -243,9 +243,14 @@ <h3>Properties</h3>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>label</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as
options.</td>
<td>Name of the value field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>multiple</td>
Expand Down
10 changes: 8 additions & 2 deletions src/app/showcase/components/multiselect/multiselectdemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h3>Import</h3>

<h3>Getting Started</h3>
<p>MultiSelect requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how
instances whereas other way is providing an array of arbitrary objects along with the optionLabel or optionValue property to specify the field name of the label or the value of the option. SelectItem API is designed to have more control on how
the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
Expand Down Expand Up @@ -203,9 +203,15 @@ <h3>Properties</h3>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>label</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Name of the value field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
Expand Down
10 changes: 8 additions & 2 deletions src/app/showcase/components/selectbutton/selectbuttondemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h3>Import</h3>

<h3>Getting Started</h3>
<p>SelectButton requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how
instances whereas other way is providing an array of arbitrary objects along with the optionLabel or optionValue property to specify the field name of the label or the value of the option. SelectItem API is designed to have more control on how
the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
Expand Down Expand Up @@ -222,9 +222,15 @@ <h3>Properties</h3>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>label</td>
<td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Name of the value field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
Expand Down