Need assistance with my dropdown component that filters a list based on 'state' data. Below is the HTML code for the dropdown:
<section class="select-wrapper {{wrapperClass}}" [ngClass]="{'expanded': toggle}" (click)="toggleSelect($event)">
<input
type="text"
[hidden]="true"
disabled="true"
/>
<div class="data-display" [ngClass]="{'has-value': title}">{{title}}</div>
<label>
<span>
{{label}}
</span>
</label>
<div class="search-wrapper" *ngIf="search && toggle && !disabled">
<input
class="search"
type="text"
autofocus
(input)="changeSearch($event.target.value)"
/>
</div>
<ul *ngIf="toggle && !disabled">
<li *ngFor='let opt of options' (click)="clickAction(opt)" [hidden]="opt.show === false"> {{opt.title}}</li>
</ul>
</section>
Here's how it is implemented in my HTML component:
<ciev-select-dropdown *ngIf="orders_states.length > 1" wrapperClass="custom-input-mid" label="Filter by state" (eClickAction)="this.setStateSelected($event)" [options]="orders_states"></ciev-select-dropdown>
Below is part of my orders component TypeScript file:
setStateSelected(singleStates: any) {
singleStates = singleStates;
this.stateSelected.emit(singleStates);
if (singleStates !== undefined && singleStates !== null) {
this.orders.forEach((item: { disabled: boolean; marking: any; }) => {
item.disabled = item.marking !== singleStates;
});
if (singleStates === 'all') {
this.orders.forEach((item: { disabled: boolean; marking: any; }) => {
item.disabled = item.marking === singleStates;
});
}
}
}
setStateOptions(orders: { marking: any; }) {
const exist = this.orders_states.find((e: { value: any; }) => e.value === orders.marking);
if (exist === undefined) {
let title = '';
switch (orders.marking) {
case 'draft': title = 'Unfinished order' ;
break;
case 'pending': title = 'Pending confirmation';
break;
case 'validated': title = 'Order confirmed';
break;
}
this.options_states.push(
{ title: title , value: orders.marking},
);
}
}
I want to add a fourth option that includes all other states, allowing me to display the complete list again. I've attempted the following approaches:
switch (convention.marking) {
case 'all': title = 'All your orders';
break;
case 'draft': title = 'Unfinished order' ;
break;
case 'pending': title = 'Pending confirmation';
break;
case 'validated': title = 'Order confirmed';
break;
}
this.options_states.push(
{ title: title , value: convention.marking}
);
}
and also tried this:
this.options_states.push(
{ title: title , value: convention.marking},
{ title: 'All your orders' , value 'all'}
);
However, both methods ended up creating extra options for each original one, resulting in six search options but none providing the complete list view.
If anyone could provide some guidance or solutions, it would be greatly appreciated. Thank you in advance.