Currently, I am working on a project involving a datatable with various filtering options:
https://i.sstatic.net/uFFWP.gif
The HTML code snippet is as follows:
<div class="row topbuffer-20">
<div class="col">
<h3>Thief: The Dark Project</h3>
<p>There are <span *ngIf="fanmissions"><strong>{{fanmissions.length}}</strong></span> available Fan Missions. The last released is <strong>Veniam in Sunt Pariatur</strong> and the last updated is <strong>Ullamco Ad in Elit</strong>.</p>
</div>
</div>
...
To-do list:
- Filter items by entering a value in the search input. This filter should be able to filter by ID, Name, Author, Game abbreviation, Game full name, Version, First release date, and Last update date.
- Filter items by clicking one of the three filter options. When an option is selected, only the relevant items should be visible. Only one option can be active at a time.
- Update the main heading based on the active filter option. The heading should display the full name of the game for the active filter option.
- Update the paragraph below the main heading based on the filter options. It should reflect the total number of items in the database, the latest published item, and the most recently updated item when no filters are applied. When using the search input, it should display the number of available items and details of the latest updates.
- Enable sorting of the datatable content ASC/DESC based on table head clicks.
- Show "No result found" if there are no search results.
I require custom Pipes to implement these functionalities in my ectm-list.component.
Please check out my GitHub project structure for reference:
Seeking assistance to accomplish this task successfully!
1. Filter items writing a value in the search input
Currently, I can only filter by NAME using the following Pipe:
@Pipe({
name: 'EctmFilterFMsBySearch'
})
export class EctmFilterFMsBySearchPipe implements PipeTransform {
transform(value: any, arg: any): any {
if (value != null && arg != null) {
var filteredfanmissions = value.filter((fanmission) => fanmission.name.search(new RegExp(arg, "i")) >= 0);
if (filteredfanmissions != 0) {
return filteredfanmissions;
}
} else {
return value;
}
}
}
Need to modify fanmission.name to include other listed filter options mentioned earlier. How can this be achieved? Is a loop necessary?