add filter with design of mockup

AngularApp/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
 import { ExerciseStudentComponent } from './exercise-student/exercise-student.component';
 import { MaterialComponentsModule } from './material-components/material-components.module';
+import { CardAssignmentComponent } from './card-assignment/card-assignment.component';
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { MaterialComponentsModule } from './material-components/material-compone
     AppComponent,
     AdminLayoutComponent,
     ExerciseStudentComponent,
+    CardAssignmentComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]

AngularApp/src/app/card-assignment/card-assignment.component.html

+<div class="card card-stats">
+    <div class="card-header card-header-warning card-header-icon">
+        <div class="card-icon">
+            <i class="material-icons">content_paste</i>
+        </div>
+        <p class="card-category">{{desc}}</p>
+        <h3 class="card-title">{{titleCard}}</h3>
+        <a mat-raised-button type="submit" class="btn btn-outline-info pull-right">Create</a>
+    </div>
+    <div class="card-footer">
+        <p>{{lang}}</p>
+    </div>
+</div>
\ No newline at end of file

AngularApp/src/app/card-assignment/card-assignment.component.spec.ts

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

AngularApp/src/app/card-assignment/card-assignment.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-card-assignment',
+  templateUrl: './card-assignment.component.html',
+  styleUrls: ['./card-assignment.component.scss'],
+})
+export class CardAssignmentComponent implements OnInit {
+ @Input() titleCard : string;
+ @Input() desc : string;
+ @Input() lang : string;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -11,7 +11,7 @@
                     <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>
@@ -23,7 +23,8 @@
                 </table> -->
                 
                 <!-- Filter by dropdown -->
-                <mat-form-field appearance="fill" *ngFor="let empfilter of empFilters">
+                
+                <!-- <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">
@@ -37,11 +38,23 @@
                         <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>
+                </table> -->
+
+                <!-- Display classic by mockup -->
+                <mat-form-field appearance="fill">
+                    <mat-label>Language</mat-label>
+                    <mat-select name="selectLang" id="selectLang" (selectionChange)="filterBy($event)">
+                        <mat-option *ngFor="let op of language" [value]="op">{{op}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <!-- <table class="table"> -->
+                    <div *ngFor="let col of assignmentFilter">
+                        <app-card-assignment [titleCard]="col['title']" [desc]="col['description']" [lang]="col['language']"></app-card-assignment>
+                    </div>
+                <!-- </table> -->
             </div>
         </div>
     </div>

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'
+import { Employee, EmpFilter } from 'app/model/employees'
 import { MatSelectChange } from '@angular/material/select';
+import { Assignment } from 'app/model/assignment';
 
 
 @Component({
@@ -11,7 +12,25 @@ import { MatSelectChange } from '@angular/material/select';
 })
 
 export class ExerciseStudentComponent implements OnInit {
-  
+  displayColAssignment : string[] = [
+    'title',
+    'description',
+    'language'
+  ];
+
+  dataAssignment : Assignment [] = [
+    {
+      title: 'TCP',
+      description: 'Technique de compilation',
+      language: 'Java'
+    },
+    {
+      title: 'Virtualisation',
+      description: 'Comprehension des VM',
+      language: 'C'
+    },
+  ];
+
   displayedColumns: string[] = [
     'id',
     'firstname',
@@ -132,12 +151,19 @@ export class ExerciseStudentComponent implements OnInit {
   ];
   empFilters: EmpFilter[] = [];
 
-  defaultValue = 'All';
+  language: string[] = [
+    'All',
+    'Java',
+    'C'
+  ];
+  assignmentFilter: Assignment[] = [];
 
+  defaultValue = 'All';
   filterDictionary = new Map<string, string>();
 
   dataSource = new MatTableDataSource(this.EmpData);
   dataSourceFilters = new MatTableDataSource(this.EmpData);
+  dataSourceAssignment = new MatTableDataSource(this.dataAssignment);
 
   constructor() {}
 
@@ -158,6 +184,7 @@ export class ExerciseStudentComponent implements OnInit {
       defaultValue: this.defaultValue,
     });
 
+    this.assignmentFilter = this.dataAssignment;
     this.dataSourceFilters.filterPredicate = function (record, filter) {
       debugger;
       var map = new Map(JSON.parse(filter));
@@ -182,4 +209,13 @@ export class ExerciseStudentComponent implements OnInit {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
-}
+
+  filterBy(ob: HTMLSelectElement) {
+    if (ob.value) {
+      this.assignmentFilter = this.dataAssignment.filter(p => p.language === ob.value);
+    }
+    if (ob.value == 'All') {
+      this.assignmentFilter = this.dataAssignment;
+    }
+  }
+}
\ No newline at end of file

AngularApp/src/app/model/assignment.ts

+export interface Assignment {
+    title : string,
+    description : string,
+    language : string
+}
\ No newline at end of file