diff --git a/AngularApp/src/app/app.module.ts b/AngularApp/src/app/app.module.ts index f332ae98754c4fcedbbe1b730b64deb59cd7e788..7580cfdf32cf0b0928f364e42edc88baef069bfb 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 0000000000000000000000000000000000000000..418f0b8ce4a8e47ae97dcb1afd810492a7f8081e --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..d0eff95a2d04ebbfb444381b5c6dc9eb4bb249e8 --- /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 0000000000000000000000000000000000000000..5e0893eaa84ca46c81bb12d086ff9b24c6667a33 --- /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 8ea63542f4c50448fac242c16bd5e1b665c377ec..1db6599eec85c7c40d83941aa4c73a30bacf6ff2 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 8e27b6a471effac767a7438e0add9a3c226ff780..59f7d85c69611ce3bdc4f5277a3d1df66b10f192 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 0000000000000000000000000000000000000000..4539f2de889fb0ecd5545c168c1d57685b5d8666 --- /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