fix: update Angular 10

BREAK: montée version principale

pom.xml

@@ -58,6 +58,19 @@
 			<artifactId>spring-boot-configuration-processor</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<!-- API, java.xml.bind module -->
+		<dependency>
+			<groupId>jakarta.xml.bind</groupId>
+			<artifactId>jakarta.xml.bind-api</artifactId>
+			<version>2.3.2</version>
+		</dependency>
+
+		<!-- Runtime, com.sun.xml.bind module -->
+		<dependency>
+			<groupId>org.glassfish.jaxb</groupId>
+			<artifactId>jaxb-runtime</artifactId>
+			<version>2.3.2</version>
+		</dependency>
 	</dependencies>
 
 	<build>

src/angular/package.json

@@ -16,55 +16,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.13",
-    "@angular/common": "^9.1.13",
-    "@angular/compiler": "^9.1.13",
-    "@angular/core": "^9.1.13",
-    "@angular/forms": "^9.1.13",
-    "@angular/localize": "^9.1.13",
-    "@angular/platform-browser": "^9.1.13",
-    "@angular/platform-browser-dynamic": "^9.1.13",
-    "@angular/router": "^9.1.13",
-    "@fortawesome/angular-fontawesome": "^0.6.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
-    "@ngrx/data": "^9.2.1",
-    "@ngrx/effects": "^9.2.1",
-    "@ngrx/entity": "^9.2.1",
-    "@ngrx/store": "^9.2.1",
-    "@ngrx/store-devtools": "^9.2.1",
+    "@angular/animations": "^10.2.5",
+    "@angular/common": "^10.2.5",
+    "@angular/compiler": "^10.2.5",
+    "@angular/core": "^10.2.5",
+    "@angular/forms": "^10.2.5",
+    "@angular/localize": "^10.2.5",
+    "@angular/platform-browser": "^10.2.5",
+    "@angular/platform-browser-dynamic": "^10.2.5",
+    "@angular/router": "^10.2.5",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.4",
+    "@ngrx/data": "^10.1.2",
+    "@ngrx/effects": "^10.1.2",
+    "@ngrx/entity": "^10.1.2",
+    "@ngrx/store": "^10.1.2",
+    "@ngrx/store-devtools": "^10.1.2",
     "bootstrap": "^4.5.0",
     "core-js": "^2.6.11",
-    "ngx-spinner": "^9.0.2",
-    "ngx-toastr": "^12.1.0",
+    "ngx-spinner": "^10.0.1",
+    "ngx-toastr": "^13.2.1",
     "rxjs": "^6.5.4",
     "rxjs-compat": "^6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.15",
-    "@angular/cli": "~9.1.15",
-    "@angular/compiler-cli": "^9.1.13",
-    "@angular/language-service": "^9.1.13",
+    "@angular-devkit/build-angular": "~0.1002.4",
+    "@angular/cli": "~10.2.4",
+    "@angular/compiler-cli": "^10.2.5",
+    "@angular/language-service": "^10.2.5",
     "@ngrx/schematics": "^9.2.1",
     "@types/jasmine": "^2.8.7",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
-    "jasmine-core": "~2.8.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
     "json-server": "^0.15.1",
-    "karma": "~2.0.2",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^1.4.2",
-    "karma-jasmine": "^1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^5.3.2",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~4.1.0",
-    "tslint": "~5.9.1",
-    "worker-loader": "^1.1.1",
-    "typescript": "^3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "^4.0.8",
+    "worker-loader": "^1.1.1"
   }
 }

src/angular/src/app/dto/fileup.ts

@@ -0,0 +1,4 @@
+export interface Fileup {
+  nameFile: string;
+  urlFile: string;
+}

src/angular/src/app/files/files.component.html

@@ -8,6 +8,10 @@ <h6 class="mb-0 text-white lh-100">Admin</h6>
     </div>
   </div>
 
-  <app-upload></app-upload>
+  <div class="row">
+    <div class="col"><app-list></app-list></div>
+    <div class="col"><app-upload></app-upload></div>
+  </div>
+
 
 </main>

src/angular/src/app/files/files.module.ts

@@ -6,10 +6,11 @@ import { FilesComponent } from './files.component';
 import { UploadComponent } from './upload/upload.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ListComponent } from './list/list.component';
 
 
 @NgModule({
-  declarations: [FilesComponent, UploadComponent],
+  declarations: [FilesComponent, UploadComponent, ListComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule,

src/angular/src/app/files/list/list.component.html

@@ -0,0 +1,6 @@
+<ul class="list-group">
+  <li *ngFor="let file of files$ | async" class="list-group-item d-flex justify-content-between align-items-center">
+    {{file.nameFile}}
+    <span class="badge badge-primary badge-pill">14</span>
+  </li>
+</ul>

src/angular/src/app/files/list/list.component.spec.ts

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

src/angular/src/app/files/list/list.component.ts

@@ -0,0 +1,23 @@
+import {Component, OnInit} from '@angular/core';
+import {FilesService} from "../../services/files.service";
+import {Observable} from "rxjs";
+import {Fileup} from "../../dto/fileup";
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent implements OnInit {
+
+  files$: Observable<Fileup[]>;
+
+  constructor(
+    private filesService: FilesService
+  ) { }
+
+  ngOnInit(): void {
+    this.files$ = this.filesService.getFiles();
+  }
+
+}

src/angular/src/app/files/upload/upload.component.ts

@@ -30,7 +30,8 @@ export class UploadComponent implements OnInit {
 
   submitFile() {
     this.filesService.postFile(this.fileToUpload).subscribe((flag: any) => {
-      console.log(flag);
+      this.toastrservice.info(flag, 'Opération OK');
+      this.uploadForm.reset();
     }, (error) => {
       this.toastrservice.error(error.error, 'Error with file upload');
     });

src/angular/src/app/services/files.service.ts

@@ -1,18 +1,27 @@
 import { Injectable } from '@angular/core';
 import {HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import {Fileup} from "../dto/fileup";
 
 @Injectable({
   providedIn: 'root'
 })
 export class FilesService {
+
+  endpoint = '/upload/';
+
   constructor(private httpClient: HttpClient) {}
 
   postFile(fileToUpload: File): Observable<any> {
-    const endpoint = '/upload/';
+
     const formData: FormData = new FormData();
     formData.append('fileUpload', fileToUpload, fileToUpload.name);
 
-    return this.httpClient.post(endpoint, formData, { responseType: 'text' });
+    return this.httpClient.post(this.endpoint, formData, { responseType: 'text' });
   }
+
+  getFiles(): Observable<Fileup[]> {
+    return this.httpClient.get<Fileup[]>(this.endpoint);
+  }
+
 }

src/angular/src/app/services/utils.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import {
-  faCheck, faBurn, faCommentAlt, faEdit, faTrash,
-  faCheckSquare, faSquare, faUpload, faCalendar
+  faCheck, faTrash, faSquare, faUpload, faCalendar, faFire, faPencil, faCommentDots, faSquareCheck
 } from '@fortawesome/free-solid-svg-icons';
 
 @Injectable({
@@ -13,7 +12,7 @@ export class UtilsService {
 
   initIcons(): void {
     this.library.addIcons(
-      faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload, faCalendar
+      faCheck, faFire, faCommentDots, faPencil, faTrash, faSquareCheck, faSquare, faUpload, faCalendar
     );
   }
 }

src/angular/src/app/todo/todo.component.html

@@ -6,14 +6,14 @@ <h5>Add a Todo : </h5>
       <form (submit)="addTodo($event)">
         <div class="form-group">
           <label for="title">Todo title</label>
-          <app-fa-input [icon]="'burn'" class="form-control" (value)="onNewValue($event)">
+          <app-fa-input [icon]="'fire'" class="form-control" (value)="onNewValue($event)">
             <input appInputRef type="text" placeholder="Enter todo title" id="title" name="title" [(ngModel)]="todo.title" required aria-describedby="titleHelp">
           </app-fa-input>
           <small id="titleHelp" class="form-text text-muted">This is the sound of C.</small>
         </div>
         <div class="form-group">
           <label for="title">Todo description</label>
-          <app-fa-input [icon]="'comment-alt'" class="form-control" (value)="onNewValue($event)">
+          <app-fa-input [icon]="'comment-dots'" class="form-control" (value)="onNewValue($event)">
             <input appInputRef type="text" placeholder="Enter todo description" id="description" name="description" [(ngModel)]="todo.description"
               required aria-describedby="descriptionHelp">
           </app-fa-input>

src/angular/src/app/todo/todos/todos.component.html

@@ -36,13 +36,13 @@
 
         <div class="btn-group" role="group" aria-label="Actions">
           <button type="button" class="btn btn-outline-secondary" (click)="editTodo(todo.id)">
-            <fa-icon icon="edit"></fa-icon>
+            <fa-icon icon="pencil"></fa-icon>
           </button>
           <button type="button" class="btn btn-outline-secondary" (click)="deleteTodo(todo.id)">
             <fa-icon class="text-danger" icon="trash"></fa-icon>
           </button>
           <button type="button" class="btn btn-outline-secondary" (click)="updateTodo(todo)">
-            <fa-icon *ngIf="todo.active" class="text-info" icon="check-square"></fa-icon>
+            <fa-icon *ngIf="todo.active" class="text-info" icon="square-check"></fa-icon>
             <fa-icon *ngIf="!todo.active" class="text-secondary" icon="square"></fa-icon>
           </button>
         </div>

src/angular/src/app/todo/todos/todos.component.ts

@@ -32,8 +32,9 @@ export class TodosComponent implements OnInit {
   }
 
   updateTodo(todo: Todo) {
-    todo.active = !todo.active;
-    this.todosService.update(todo);
+    // can't mutate the object directly
+    // todo.active = !todo.active;
+    this.todosService.update({...todo, active: !todo.active});
   }
 
   ngOnInit() {

src/angular/tsconfig.json

@@ -2,7 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "downlevelIteration": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,

src/angular/tslint.json

@@ -48,8 +48,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [