add example of filter

AngularApp/src/app/app.module.ts

@@ -7,7 +7,8 @@ import { AppRoutingModule } from './app.routing';
 import { ComponentsModule } from './components/components.module';
 import { AppComponent } from './app.component';
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
-// import { ExercisePageComponent } from './exercise-page/exercise-page.component';
+import { ExerciseStudentComponent } from './exercise-student/exercise-student.component';
+import { MaterialComponentsModule } from './material-components/material-components.module';
 
 @NgModule({
   imports: [
@@ -18,10 +19,12 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
     ComponentsModule,
     RouterModule,
     AppRoutingModule,
+    MaterialComponentsModule
   ],
   declarations: [
     AppComponent,
     AdminLayoutComponent,
+    ExerciseStudentComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]

AngularApp/src/app/components/sidebar/sidebar.component.ts

@@ -16,6 +16,7 @@ export const ROUTES: RouteInfo[] = [
     // { path: '/icons', title: 'Icons',  icon:'bubble_chart', class: '' },
     // { path: '/maps', title: 'Maps',  icon:'location_on', class: '' },
     { path: '/notifications', title: 'Notifications',  icon:'notifications', class: '' },
+    { path: '/exercise-student', title: 'Exercise for Student',  icon:'unarchive', class: '' },
     { path: '/upgrade', title: 'Upgrade to PRO',  icon:'unarchive', class: 'active-pro' },
 ];
 

AngularApp/src/app/exercise-student/exercise-student.component.html

+<div class="main-content">
+    <div class="container-fluid">
+        <div class="card">
+            <div class="card-header card-header-danger">
+                <h4 class="card-title ">TCP</h4>
+                <p class="card-category"> Technique de compilation</p>
+            </div>
+            <div class="card-body">
+                <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>
+                        <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>
+    </div>
+</div>
\ No newline at end of file

AngularApp/src/app/exercise-student/exercise-student.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExerciseStudentComponent } from './exercise-student.component';
+
+describe('ExerciseStudentComponent', () => {
+  let component: ExerciseStudentComponent;
+  let fixture: ComponentFixture<ExerciseStudentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExerciseStudentComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ExerciseStudentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AngularApp/src/app/exercise-student/exercise-student.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table'
+import { Employee, EmpFilter } from '../model/employees'
+
+
+@Component({
+  selector: 'app-exercise-student',
+  templateUrl: './exercise-student.component.html',
+  styleUrls: ['./exercise-student.component.scss']
+})
+
+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"
+  }];
+  
+  dataSource = new MatTableDataSource(this.EmpData);
+  
+  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});
+  }
+}

AngularApp/src/app/layouts/admin-layout/admin-layout.routing.ts

@@ -9,6 +9,7 @@ import { MapsComponent } from '../../maps/maps.component';
 import { NotificationsComponent } from '../../notifications/notifications.component';
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
 import { ExercisePageComponent } from '../../exercise-page/exercise-page.component';
+import { ExerciseStudentComponent } from 'app/exercise-student/exercise-student.component';
 
 export const AdminLayoutRoutes: Routes = [
     { path: 'dashboard',      component: DashboardComponent },
@@ -19,5 +20,6 @@ export const AdminLayoutRoutes: Routes = [
     { path: 'maps',           component: MapsComponent },
     { path: 'notifications',  component: NotificationsComponent },
     { path: 'exercise-page',  component: ExercisePageComponent },
+    { path: 'exercise-student',  component: ExerciseStudentComponent },
     { path: 'upgrade',        component: UpgradeComponent },
 ];

AngularApp/src/app/material-components/material-components.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCardModule} from '@angular/material/card';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    MatTableModule,
+    CommonModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule
+  ],
+  exports:[
+    MatTableModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule
+  ]
+})
+export class MaterialComponentsModule { }

AngularApp/src/app/model/employees.ts

+export interface Employee {
+    Id : number,	
+    FirstName:string,	
+    LastName:string,	
+    Email:string,
+    Gender:string,	
+    JobTitle:string
+}
+
+export interface EmpFilter {
+    name:string;
+    options:string[];
+    defaultValue:string;
+}
\ No newline at end of file