get data from tmp api

AngularApp/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
 import { ExerciseStudentComponent } from './exercise-student/exercise-student.component';
 import { MaterialComponentsModule } from './material-components/material-components.module';
 import { CardAssignmentComponent } from './card-assignment/card-assignment.component';
+import { UserListComponent } from './user-list/user-list.component';
 
 @NgModule({
   imports: [
@@ -27,6 +28,7 @@ import { CardAssignmentComponent } from './card-assignment/card-assignment.compo
     AdminLayoutComponent,
     ExerciseStudentComponent,
     CardAssignmentComponent,
+    UserListComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]

AngularApp/src/app/app.routing.ts

@@ -8,7 +8,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
 const routes: Routes =[
   {
     path: '',
-    redirectTo: 'dashboard',
+    redirectTo: 'user-profile',
     pathMatch: 'full',
   }, {
     path: '',

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

@@ -5,7 +5,7 @@
         </div>
         <p class="card-category">{{assgn.description}}</p>
         <h3 class="card-title">{{assgn.title}}</h3>
-        <a mat-raised-button class="btn btn-outline-info pull-right">Details</a>
+        <a mat-raised-button class="btn btn-outline-info pull-right" href="#/notifications">Details</a>
     </div>
     <div class="card-footer">
         <p>{{assgn.language}}</p>

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

@@ -8,16 +8,11 @@ declare interface RouteInfo {
     class: string;
 }
 export const ROUTES: RouteInfo[] = [
-    { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
     { path: '/user-profile', title: 'Create assignment',  icon:'assignment_add', class: '' },
     { path: '/table-list', title: 'Assignment',  icon:'content_paste', class: '' },
     { path: '/exercise-page', title: 'Exercise Page',  icon:'description', class: '' },
-    { path: '/typography', title: 'Typography',  icon:'library_books', class: '' },
-    // { 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' },
+    { path: '/user-list', title: 'Users list',  icon:'unarchive', class: '' },
 ];
 
 @Component({

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

@@ -10,16 +10,13 @@ import { NotificationsComponent } from '../../notifications/notifications.compon
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
 import { ExercisePageComponent } from '../../exercise-page/exercise-page.component';
 import { ExerciseStudentComponent } from 'app/exercise-student/exercise-student.component';
+import { UserListComponent } from 'app/user-list/user-list.component';
 
 export const AdminLayoutRoutes: Routes = [
-    { path: 'dashboard',      component: DashboardComponent },
     { path: 'user-profile',   component: UserProfileComponent },
     { path: 'table-list',     component: TableListComponent },
-    { path: 'typography',     component: TypographyComponent },
     { path: 'icons',          component: IconsComponent },
-    { path: 'maps',           component: MapsComponent },
-    { path: 'notifications',  component: NotificationsComponent },
     { path: 'exercise-page',  component: ExercisePageComponent },
     { path: 'exercise-student',  component: ExerciseStudentComponent },
-    { path: 'upgrade',        component: UpgradeComponent },
+    { path: 'user-list',  component: UserListComponent },
 ];

AngularApp/src/app/model/UserRole.ts

+enum UserRole {
+    STUDENT        = 'STUDENT',
+    TEACHING_STAFF = 'TEACHING_STAFF',
+    ADMIN          = 'ADMIN'
+}
+
+
+export default UserRole;
\ No newline at end of file

AngularApp/src/app/model/enonce.ts

+import { Assignment } from "./assignment";
+
+export interface Enonce {
+    assignment : Assignment,
+    nbOfSuccess : Number,
+    nbExerciseCreated : Number
+}
\ No newline at end of file

AngularApp/src/app/model/user.ts

+import UserRole from "./UserRole";
+
+export interface User {
+     id: number;
+     mail: string;
+     role: UserRole;
+     deleted: boolean;
+     gitlabLastInfo: string;
+     gitlabUsername: string;
+     isTeachingStaff: boolean;
+     name: string;
+}
\ No newline at end of file

AngularApp/src/app/table-list/table-list.component.html

@@ -17,8 +17,12 @@
                                 </thead>
                                 <tbody>
                                    <tr *ngFor="let row of rows">
-                                    <td *ngFor="let h of headers">
-                                        <a ng-href="#/{{row['link']}}">{{row[h]}}</a>
+                                    <td>{{row.assignment.title}}</td>
+                                    <td>{{row.assignment.description}}</td>
+                                    <td>{{row.nbOfSuccess}}</td>
+                                    <td>{{row.nbExerciseCreated}}</td>
+                                    <td>
+                                        <button (click)="deleteEnonce(row.assignment.title)" class="btn btn-outline-danger">Delete</button>
                                     </td>
                                    </tr>
                                 </tbody>

AngularApp/src/app/table-list/table-list.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Enonce } from 'app/model/enonce';
 
 @Component({
   selector: 'app-table-list',
@@ -9,31 +10,33 @@ export class TableListComponent implements OnInit {
   
   constructor() { }
   
-  headers : string[] = ['Assignment', 'Description', 'Number of success', 'Exercises created'];
-  rows = [
+  headers : string[] = ['Assignment', 'Description', 'Number of success', 'Exercises created', 'Options'];
+  
+  rows : Enonce[] = [
     {
-      'Assignment' : 'TCP',
-      'Description' : 'Technique de compilation',
-      'Number of success' : '2',
-      'Exercises created' : '4',
-      'Link' : 'exercise-page'
+      assignment : {
+        title: 'TCP',
+        description: 'Technique de compilation',
+        language: 'Java'
       },
-    {
-      'Assignment' : 'Optimisation',
-      'Description' : 'Do some optimisation',
-      'Number of success' : '2',
-      'Exercises created' : '4',
-      'Link' : ''
+      nbOfSuccess : 2,
+      nbExerciseCreated : 10
     },
     {
-      'Assignment' : 'Advanced Programmation',
-      'Description' : 'Some programmation',
-      'Number of success' : '0',
-      'Exercises created' : '10',
-      'Link' : ''
+      assignment : {
+        title: 'Virtualisation',
+        description: 'Comprehension des VM',
+        language: 'C'
       },
-  ];
+      nbOfSuccess : 0,
+      nbExerciseCreated : 15
+    }
+  ]
   
+  deleteEnonce(title) {
+    this.rows = this.rows.filter((enonce) => enonce.assignment.title !== title);
+    console.log(this.rows);
+  }
   ngOnInit() {
   }
   

AngularApp/src/app/user-list/user-list.component.html

+<div class="main-content">
+     <div class="container-fluid">
+         <div class="row">
+             <div class="col-md-12">
+                 <div class="card">
+                     <div class="card-header card-header-danger">
+                         <h4 class="card-title ">Liste utilisateurs</h4>
+                     </div>
+                     <div class="card-body">
+                         <div class="table-responsive">
+                             <table class="table">
+                                 <thead class=" text-primary">
+                                    <th *ngFor="let h of headers">{{h}}</th>
+                                 </thead>
+                                 <tbody>
+                                    <tr *ngFor="let user of users">
+                                        <td>{{ user.gitlabUsername }}</td>
+                                        <td>
+                                            <mat-form-field>
+                                                <mat-select [(value)]="user.role">
+                                                    <mat-option *ngFor="let opt of options" value="{{opt}}">{{opt}}</mat-option>
+                                                </mat-select>
+                                            </mat-form-field>
+                                            <p>You selected: {{ user.role }}</p>
+                                        </td>
+                                        <td>
+                                            <button (click)="updUser(user.id)" class="btn btn-outline-info">Modify</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                             </table>
+                         </div>
+                     </div>
+                 </div>
+             </div>
+         </div>
+     </div>
+ </div>
+ 
\ No newline at end of file

AngularApp/src/app/user-list/user-list.component.spec.ts

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

AngularApp/src/app/user-list/user-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { User } from 'app/model/user';
+import { UserService } from '../../services/user.service';
+import UserRole from 'app/model/UserRole';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss']
+})
+export class UserListComponent implements OnInit {
+  users : User[] = [];
+  headers : string[] = ['Git Username', 'Role', 'Options'];
+  options : string[] = ['STUDENT', 'ADMIN', 'TEACHING_STAFF']
+  
+  constructor(private userService: UserService) { }
+  
+  ngOnInit(): void {
+    this.userService.getUsers().subscribe((u) => {
+      this.users = u;
+      console.log(u)
+    });
+  }
+  
+  // deleteEnonce(id) {
+  //   this.rows = this.rows.filter((enonce) => enonce.assignment.title !== title);
+  //   console.log(this.rows);
+  // }
+}

AngularApp/src/services/assignment.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AssignmentService } from './assignment.service';
+
+describe('AssignmentService', () => {
+  let service: AssignmentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AssignmentService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

AngularApp/src/services/assignment.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Assignment } from 'app/model/assignment';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AssignmentService {
+  private baseUrl = 'http://localhost:3000';
+
+  constructor(private http: HttpClient) {}
+  
+  getUsers(): Observable<Assignment[]> {
+    return this.http.get<Assignment[]>(`${this.baseUrl}/assignments`);
+  }
+}

AngularApp/src/services/user.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

AngularApp/src/services/user.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { User } from 'app/model/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  
+  private baseUrl = 'http://localhost:3000';
+  
+  constructor(private http: HttpClient) {}
+  
+  getUsers(): Observable<User[]> {
+    return this.http.get<User[]>(`${this.baseUrl}/users`);
+  }
+}