From f435293e19ed2802ff11c238fbd9a113c444098d Mon Sep 17 00:00:00 2001
From: "kelly.nguyen" <kelly.nguyen@etu.hesge.ch>
Date: Wed, 20 Dec 2023 22:01:08 +0100
Subject: [PATCH] add filter by dropdown
---
.../exercise-student.component.html | 25 +-
.../exercise-student.component.ts | 255 ++++++++++++------
AngularApp/src/app/model/employees.ts | 13 +-
3 files changed, 197 insertions(+), 96 deletions(-)
diff --git a/AngularApp/src/app/exercise-student/exercise-student.component.html b/AngularApp/src/app/exercise-student/exercise-student.component.html
index c7eb79c..8ea6354 100644
--- a/AngularApp/src/app/exercise-student/exercise-student.component.html
+++ b/AngularApp/src/app/exercise-student/exercise-student.component.html
@@ -6,10 +6,12 @@
<p class="card-category"> Technique de compilation</p>
</div>
<div class="card-body">
- <mat-form-field appearance="standard">
+ <!-- Filter with input text -->
+ <!-- <mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search columns" #input>
</mat-form-field>
+
<table mat-table [dataSource]="dataSource" class="table">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
@@ -18,6 +20,27 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let emprow; columns: displayedColumns"></tr>
+ </table> -->
+
+ <!-- Filter by dropdown -->
+ <mat-form-field appearance="fill" *ngFor="let empfilter of empFilters">
+ <mat-label>{{empfilter.name}}</mat-label>
+ <mat-select [(value)]="empfilter.defaultValue" (selectionChange)="applyEmpFilter($event,empfilter)">
+ <mat-option *ngFor="let op of empfilter.options" [value]="op">
+ {{op}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <table mat-table [dataSource]="dataSourceFilters" class="table">
+ <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+ <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+ <td mat-cell *matCellDef="let emp"> {{emp[column]}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let emprow; columns: displayedColumns;"></tr>
+
</table>
</div>
</div>
diff --git a/AngularApp/src/app/exercise-student/exercise-student.component.ts b/AngularApp/src/app/exercise-student/exercise-student.component.ts
index 5251f3d..8e27b6a 100644
--- a/AngularApp/src/app/exercise-student/exercise-student.component.ts
+++ b/AngularApp/src/app/exercise-student/exercise-student.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table'
import { Employee, EmpFilter } from '../model/employees'
+import { MatSelectChange } from '@angular/material/select';
@Component({
@@ -11,98 +12,174 @@ import { Employee, EmpFilter } from '../model/employees'
export class ExerciseStudentComponent implements OnInit {
- constructor() { }
- displayedColumns: string[] = ['Id', 'FirstName', 'LastName', 'Email','Gender','JobTitle'];
- genders: string[]=['All','Male','Female'];
- jobtitles: string[]=['All','Support Analyst','Project Manager','Senior officer','Software Engineer'];
- departments: string[]=['All','Support','Human Resources','Marketing','Engineering'];
- empFilters: EmpFilter[]=[];
- defaultValue = "All";
- EmpData : Employee[] =[{
- "Id": 1,
- "FirstName": "Johannah",
- "LastName": "Kiffin",
- "Email": "jkiffin0@google.pl",
- "Gender": "F",
- "JobTitle": "Administrative Assistant I"
- }, {
- "Id": 2,
- "FirstName": "Eldin",
- "LastName": "Astbery",
- "Email": "eastbery1@geocities.jp",
- "Gender": "M",
- "JobTitle": "Senior Editor"
- }, {
- "Id": 3,
- "FirstName": "Nahum",
- "LastName": "Mounce",
- "Email": "nmounce2@vk.com",
- "Gender": "M",
- "JobTitle": "Programmer II"
- }, {
- "Id": 4,
- "FirstName": "Gallard",
- "LastName": "Standell",
- "Email": "gstandell3@europa.eu",
- "Gender": "M",
- "JobTitle": "Account Representative II"
- }, {
- "Id": 5,
- "FirstName": "Koenraad",
- "LastName": "Domleo",
- "Email": "kdomleo4@cornell.edu",
- "Gender": "M",
- "JobTitle": "Quality Control Specialist"
- }, {
- "Id": 6,
- "FirstName": "Uriah",
- "LastName": "Turbat",
- "Email": "uturbat5@aol.com",
- "Gender": "M",
- "JobTitle": "Accounting Assistant II"
- }, {
- "Id": 7,
- "FirstName": "Waldemar",
- "LastName": "Fowley",
- "Email": "wfowley6@sun.com",
- "Gender": "M",
- "JobTitle": "Account Coordinator"
- }, {
- "Id": 8,
- "FirstName": "Rodolfo",
- "LastName": "Trenchard",
- "Email": "rtrenchard7@yandex.ru",
- "Gender": "M",
- "JobTitle": "Data Coordiator"
- }, {
- "Id": 9,
- "FirstName": "Konstance",
- "LastName": "Dudek",
- "Email": "kdudek8@techcrunch.com",
- "Gender": "F",
- "JobTitle": "Administrative Assistant I"
- }, {
- "Id": 10,
- "FirstName": "Monti",
- "LastName": "Perton",
- "Email": "mperton9@youtube.com",
- "Gender": "M",
- "JobTitle": "Operator"
- }];
-
+ displayedColumns: string[] = [
+ 'id',
+ 'firstname',
+ 'lastname',
+ 'email',
+ 'gender',
+ 'jobtitle',
+ 'department',
+ ];
+
+ EmpData: Employee[] = [
+ {
+ id: 1,
+ firstname: 'Mellie',
+ lastname: 'Gabbott',
+ email: 'mgabbott0@indiatimes.com',
+ gender: 'Female',
+ department: 'Support',
+ jobtitle: 'Support Analyst',
+ },
+ {
+ id: 2,
+ firstname: 'Yehudi',
+ lastname: 'Ainsby',
+ email: 'yainsby1@w3.org',
+ gender: 'Female',
+ department: 'Support',
+ jobtitle: 'Support Analyst',
+ },
+ {
+ id: 3,
+ firstname: 'Noellyn',
+ lastname: 'Primett',
+ email: 'nprimett2@ning.com',
+ gender: 'Female',
+ department: 'Human Resources',
+ jobtitle: 'Project Manager',
+ },
+ {
+ id: 4,
+ firstname: 'Stefanie',
+ lastname: 'Yurenin',
+ email: 'syurenin3@boston.com',
+ gender: 'Female',
+ department: 'Marketing',
+ jobtitle: 'Senior officer',
+ },
+ {
+ id: 5,
+ firstname: 'Stormi',
+ lastname: "O'Lunny",
+ email: 'solunny4@patch.com',
+ gender: 'Female',
+ department: 'Engineering',
+ jobtitle: 'Software Engineer',
+ },
+ {
+ id: 6,
+ firstname: 'Keelia',
+ lastname: 'Giraudy',
+ email: 'kgiraudy5@nba.com',
+ gender: 'Male',
+ department: 'Marketing',
+ jobtitle: 'Senior officer',
+ },
+ {
+ id: 7,
+ firstname: 'Ikey',
+ lastname: 'Laight',
+ email: 'ilaight6@wiley.com',
+ gender: 'Male',
+ department: 'Support',
+ jobtitle: 'Support Analyst',
+ },
+ {
+ id: 8,
+ firstname: 'Adrianna',
+ lastname: 'Ruddom',
+ email: 'aruddom7@seattletimes.com',
+ gender: 'Male',
+ department: 'Marketing',
+ jobtitle: 'Senior officer',
+ },
+ {
+ id: 9,
+ firstname: 'Dionysus',
+ lastname: 'McCory',
+ email: 'dmccory8@ox.ac.uk',
+ gender: 'Male',
+ department: 'Engineering',
+ jobtitle: 'Software Engineer',
+ },
+ {
+ id: 10,
+ firstname: 'Claybourne',
+ lastname: 'Shellard',
+ email: 'cshellard9@rediff.com',
+ gender: 'Male',
+ department: 'Engineering',
+ jobtitle: 'Software Engineer',
+ },
+ ];
+
+ genders: string[] = ['All', 'Male', 'Female'];
+ jobtitles: string[] = [
+ 'All',
+ 'Support Analyst',
+ 'Project Manager',
+ 'Senior officer',
+ 'Software Engineer',
+ ];
+ departments: string[] = [
+ 'All',
+ 'Support',
+ 'Human Resources',
+ 'Marketing',
+ 'Engineering',
+ ];
+ empFilters: EmpFilter[] = [];
+
+ defaultValue = 'All';
+
+ filterDictionary = new Map<string, string>();
+
dataSource = new MatTableDataSource(this.EmpData);
-
+ dataSourceFilters = new MatTableDataSource(this.EmpData);
+
+ constructor() {}
+
+ ngOnInit(): void {
+ this.empFilters.push({
+ name: 'gender',
+ options: this.genders,
+ defaultValue: this.defaultValue,
+ });
+ this.empFilters.push({
+ name: 'jobtitle',
+ options: this.jobtitles,
+ defaultValue: this.defaultValue,
+ });
+ this.empFilters.push({
+ name: 'department',
+ options: this.departments,
+ defaultValue: this.defaultValue,
+ });
+
+ this.dataSourceFilters.filterPredicate = function (record, filter) {
+ debugger;
+ var map = new Map(JSON.parse(filter));
+ let isMatch = false;
+ for (let [key, value] of map) {
+ isMatch = value == 'All' || record[key as keyof Employee] == value;
+ if (!isMatch) return false;
+ }
+ return isMatch;
+ };
+ }
+
+ applyEmpFilter(ob: MatSelectChange, empfilter: EmpFilter) {
+ this.filterDictionary.set(empfilter.name, ob.value);
+ var jsonString = JSON.stringify(
+ Array.from(this.filterDictionary.entries())
+ );
+ this.dataSourceFilters.filter = jsonString;
+ }
+
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
-
- ngOnInit(): void {
- this.dataSource.filterPredicate = function (record,filter) {
- return record.Gender.toLocaleLowerCase() == filter.toLocaleLowerCase();
- }
- this.empFilters.push({name:'gender',options:this.genders,defaultValue:this.defaultValue});
- this.empFilters.push({name:'jobtitle',options:this.jobtitles,defaultValue:this.defaultValue});
- this.empFilters.push({name:'department',options:this.departments,defaultValue:this.defaultValue});
- }
}
diff --git a/AngularApp/src/app/model/employees.ts b/AngularApp/src/app/model/employees.ts
index 2110886..a9a4092 100644
--- a/AngularApp/src/app/model/employees.ts
+++ b/AngularApp/src/app/model/employees.ts
@@ -1,10 +1,11 @@
export interface Employee {
- Id : number,
- FirstName:string,
- LastName:string,
- Email:string,
- Gender:string,
- JobTitle:string
+ id : number,
+ firstname:string,
+ lastname:string,
+ email:string,
+ gender:string,
+ department:string,
+ jobtitle:string
}
export interface EmpFilter {
--
GitLab