Opdracht 1 Dennis Wong

angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -99,12 +100,16 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -11,17 +11,19 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^16.1.1",
+    "@angular/cdk": "^16.1.1",
     "@angular/common": "^16.1.1",
     "@angular/compiler": "^16.1.1",
     "@angular/core": "^16.1.1",
     "@angular/forms": "^16.1.1",
+    "@angular/material": "^16.1.1",
     "@angular/platform-browser": "^16.1.1",
     "@angular/platform-browser-dynamic": "^16.1.1",
     "@angular/router": "^16.1.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.1.0",

src/app/app.component.html

@@ -1,39 +1,49 @@
-<h1>
-  User Import
-</h1>
+<h1>User Import</h1>
 
-<!-- Output the raw data for now -->
-<table width="100%">
-  <tr>
-    <th>
-      Naam
-    </th>
-    <th>
-      E-mail
-    </th>
-    <th>
-      Rol
-    </th>
-    <th>
-      Status
-    </th>
-  </tr>
-  <tr *ngFor="let dataRow of rawData">
-    <td>
-      {{dataRow.name}}
-    </td>
-    <td>
-      {{dataRow.email}}
-    </td>
-    <td>
-      {{dataRow.role}}
-    </td>
-    <td>
-      ...
-    </td>
-  </tr>
+<table mat-table [dataSource]="showData" class="mat-elevation-z8">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Naam</th>
+    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="email">
+    <th mat-header-cell *matHeaderCellDef>E-mail</th>
+    <td mat-cell *matCellDef="let element">{{ element.email }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="role">
+    <th mat-header-cell *matHeaderCellDef>Rol</th>
+    <td mat-cell *matCellDef="let element">{{ element.role }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="status">
+    <th mat-header-cell *matHeaderCellDef>Status</th>
+    <td mat-cell *matCellDef="let element">
+      <ng-container *ngIf="element.status === 'Goed'">
+        {{ element.status }}
+      </ng-container>
+      <ng-container *ngIf="element.status === 'Fout'"
+        ><button
+          color="warn"
+          mat-raised-button
+          (click)="corrigeerData(element)"
+        >
+          Corrigeer
+        </button></ng-container
+      >
+    </td></ng-container
+  >
+
+  <tr
+    mat-header-row
+    *matHeaderRowDef="['name', 'email', 'role', 'status']"
+  ></tr>
+  <tr
+    mat-row
+    *matRowDef="let row; columns: ['name', 'email', 'role', 'status']"
+  ></tr>
 </table>
 
-<button type="button" (click)="clickSubmit()">
-  Submit
-</button>
+<button mat-raised-button color="primary" (click)="clickSubmit()">
+  Indienen
+</button>

src/app/app.component.ts

@@ -1,38 +1,86 @@
 import { Component, OnInit } from '@angular/core';
 import { rawData } from './raw-data';
-import { MockApiService } from './mock-api.service';
+import { MockApiService, RoleTypeEnum } from './mock-api.service';
+import { EMPTY, catchError, switchMap, tap, throwError } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { HerstelformComponent } from './herstelform/herstel.form.component';
+
+export interface AdjustData {
+  name: string;
+  email: string;
+  role: string;
+  status?: string;
+  error?: string;
+}
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
-
-  rawData: {name: string, email: string, role: string}[];
+  adjustedData: AdjustData[];
+  showData: AdjustData[];
 
-  constructor(
-    private mockApi: MockApiService
-  ){}
+  constructor(private mockApi: MockApiService, public dialog: MatDialog) {}
 
-  ngOnInit(){
+  ngOnInit() {
     this.loadRawData();
   }
-
-  private loadRawData(){
-
-    // get the rawData from the provided file
-    this.rawData = rawData;
 
+  private loadRawData() {
+    this.adjustedData = rawData;
+    this.showData = [...this.adjustedData];
   }
 
-  clickSubmit(){
-
-    // this is probably not right
-    for(let dataRow of this.rawData){
-      this.mockApi.createUser(dataRow.name, dataRow.email).subscribe();
+  clickSubmit() {
+    for (let dataRow of this.adjustedData) {
+      this.mockApi
+        .createUser(dataRow.name, dataRow.email)
+        .pipe(
+          switchMap((user) =>
+            this.mockApi.createRole(user.id, dataRow.role as RoleTypeEnum)
+          ),
+          tap(() => (dataRow.status = 'Goed')),
+          switchMap((role) =>
+            role.roleType === RoleTypeEnum.student
+              ? this.mockApi.createPortfolio(role.userId)
+              : EMPTY
+          ),
+          catchError((error) => throwError(() => error))
+        )
+        .subscribe({
+          error: (e) => {
+            dataRow.status = 'Fout';
+            dataRow.error = e;
+          },
+          complete: () => {
+            this.adjustedData.splice(
+              this.adjustedData.findIndex((data) => data.status === 'Goed'),
+              1
+            );
+            this.showData = [...this.adjustedData];
+          },
+        });
     }
-
   }
 
+  corrigeerData(data: AdjustData): void {
+    const index = this.adjustedData.indexOf(data);
+    const dialogRef = this.dialog.open(HerstelformComponent, {
+      data: {
+        name: data.name,
+        email: data.email,
+        role: data.role,
+        error: data.error,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.adjustedData[index] = result;
+        this.showData = [...this.adjustedData];
+      }
+    });
+  }
 }

src/app/app.module.ts

@@ -2,15 +2,31 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDialogModule,
+} from '@angular/material/dialog';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { HerstelformComponent } from './herstelform/herstel.form.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent, HerstelformComponent],
   imports: [
-    BrowserModule
+    BrowserModule,
+    MatTableModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    BrowserAnimationsModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/herstelform/herstel.form.component.html

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title>{{data.error}}</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <mat-label>Naam</mat-label>
+    <input matInput [(ngModel)]="data.name" /> </mat-form-field
+  ><mat-form-field>
+    <mat-label>Email</mat-label>
+    <input matInput [(ngModel)]="data.email" /> </mat-form-field
+  ><mat-form-field>
+    <mat-label>Role</mat-label>
+    <input matInput [(ngModel)]="data.role" />
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Annuleer</button>
+  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
+</div>

src/app/herstelform/herstel.form.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { Herstel.formComponent } from './herstel.form.component';
+
+describe('Herstel.formComponent', () => {
+  let component: Herstel.formComponent;
+  let fixture: ComponentFixture<Herstel.formComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Herstel.formComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Herstel.formComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/herstelform/herstel.form.component.ts

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { AdjustData } from '../app.component';
+
+@Component({
+  selector: 'app-herstelform',
+  templateUrl: './herstel.form.component.html',
+  styleUrls: ['./herstel.form.component.css']
+})
+export class HerstelformComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<HerstelformComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AdjustData,
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/index.html

@@ -1,14 +1,26 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>UserImport</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <title>UserImport</title>
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+      <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
-  <app-root></app-root>
-</body>
+  <body class="mat-app-background mat-typography">
+    <app-root></app-root>
+  </body>
 </html>

src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }