From 009973fbc98ac5cd1ae0fc5d6d4186f21e9505d2 Mon Sep 17 00:00:00 2001
From: "kelly.nguyen" <kelly.nguyen@etu.hesge.ch>
Date: Fri, 22 Dec 2023 14:01:15 +0100
Subject: [PATCH] add filter with design of mockup
---
AngularApp/src/app/app.module.ts | 2 +
.../card-assignment.component.html | 13 ++++++
.../card-assignment.component.scss | 0
.../card-assignment.component.spec.ts | 23 ++++++++++
.../card-assignment.component.ts | 18 ++++++++
.../exercise-student.component.html | 23 +++++++---
.../exercise-student.component.ts | 44 +++++++++++++++++--
AngularApp/src/app/model/assignment.ts | 5 +++
8 files changed, 119 insertions(+), 9 deletions(-)
create mode 100644 AngularApp/src/app/card-assignment/card-assignment.component.html
create mode 100644 AngularApp/src/app/card-assignment/card-assignment.component.scss
create mode 100644 AngularApp/src/app/card-assignment/card-assignment.component.spec.ts
create mode 100644 AngularApp/src/app/card-assignment/card-assignment.component.ts
create mode 100644 AngularApp/src/app/model/assignment.ts
diff --git a/AngularApp/src/app/app.module.ts b/AngularApp/src/app/app.module.ts
index f332ae9..7580cfd 100644
--- a/AngularApp/src/app/app.module.ts
+++ b/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]
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.html b/AngularApp/src/app/card-assignment/card-assignment.component.html
new file mode 100644
index 0000000..418f0b8
--- /dev/null
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.html
@@ -0,0 +1,13 @@
+<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
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.scss b/AngularApp/src/app/card-assignment/card-assignment.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.spec.ts b/AngularApp/src/app/card-assignment/card-assignment.component.spec.ts
new file mode 100644
index 0000000..d0eff95
--- /dev/null
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.spec.ts
@@ -0,0 +1,23 @@
+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();
+ });
+});
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.ts b/AngularApp/src/app/card-assignment/card-assignment.component.ts
new file mode 100644
index 0000000..5e0893e
--- /dev/null
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.ts
@@ -0,0 +1,18 @@
+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 {
+ }
+
+}
diff --git a/AngularApp/src/app/exercise-student/exercise-student.component.html b/AngularApp/src/app/exercise-student/exercise-student.component.html
index 8ea6354..1db6599 100644
--- a/AngularApp/src/app/exercise-student/exercise-student.component.html
+++ b/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>
diff --git a/AngularApp/src/app/exercise-student/exercise-student.component.ts b/AngularApp/src/app/exercise-student/exercise-student.component.ts
index 8e27b6a..59f7d85 100644
--- a/AngularApp/src/app/exercise-student/exercise-student.component.ts
+++ b/AngularApp/src/app/exercise-student/exercise-student.component.ts
@@ -1,7 +1,8 @@
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
diff --git a/AngularApp/src/app/model/assignment.ts b/AngularApp/src/app/model/assignment.ts
new file mode 100644
index 0000000..4539f2d
--- /dev/null
+++ b/AngularApp/src/app/model/assignment.ts
@@ -0,0 +1,5 @@
+export interface Assignment {
+ title : string,
+ description : string,
+ language : string
+}
\ No newline at end of file
--
GitLab