Merge branch 'upload-files' into 'develop'

upload files

See merge request !22

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { FindingTabulatorComponent } from './finding-tabulator/finding-tabulator
 import {LoginComponent} from './login/login.component';
 import {LogoutComponent} from './logout/logout.component';
 import { HistoryTrackingComponent } from './history-tracking/history-tracking.component';
+import { UploadFilesComponent } from './upload-files/upload-files.component';
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'logout', component: LogoutComponent },
@@ -27,6 +28,7 @@ const routes: Routes = [
   },
 
   { path: 'documents', component: DocumentsComponent},
+  { path: 'uploadFiles', component: UploadFilesComponent},
 
    { path: 'first_1', component: SrdomainLevelComponent},
    { path: 'second_2', component: SrdomainLevelComponent},

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { HistoryTrackingComponent } from './history-tracking/history-tracking.co
 import {MatProgressSpinnerModule, MatProgressBarModule} from '@angular/material'
 import {OAuthModule} from "angular-oauth2-oidc";
 import { environment } from '../environments/environment';
+import { UploadFilesComponent } from './upload-files/upload-files.component';
 
 @NgModule({
   declarations: [
@@ -42,7 +43,8 @@ import { environment } from '../environments/environment';
     SrdomaintemplateTabulatorComponent,
     SrdomainLevelComponent,
     LogoutComponent,
-    HistoryTrackingComponent
+    HistoryTrackingComponent,
+    UploadFilesComponent
 
  ],
   imports: [

src/app/menu/menu.component.html

@@ -22,6 +22,7 @@
         </div>
         <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
             <ul class="navbar-nav ml-auto">
+                <li><a *ngIf="loginService.getIsLogged()" routerLink="/uploadFiles" class="navbar-brand">Upload Annotations</a></li>
                 <li><a *ngIf="!loginService.getIsLogged()" routerLink="/login" class="navbar-brand">LogIn</a></li>
                 <li><span *ngIf="loginService.getIsLogged()" class="navbar-brand">Welcome {{loginService.getUsername()}}</span></li>
                 <li><a *ngIf="loginService.getIsLogged()" routerLink="/logout" class="navbar-brand">LogOut</a></li>

src/app/upload-files.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { UploadFilesService } from './upload-files.service';
+
+describe('UploadFilesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UploadFilesService = TestBed.get(UploadFilesService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/upload-files.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from './../environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class UploadFilesService {
+  private baseUrl = environment.apiUrl;
+  constructor(private http: HttpClient) { }
+  upload(files: FileList, allow_duplicates: Boolean): Observable<HttpEvent<any>> {
+    const formData: FormData = new FormData();
+    formData.append("allow_duplicates", String(allow_duplicates));
+    for (var i = 0; i < files.length; i++) { 
+      formData.append("files", files[i]);
+    }
+    const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
+      reportProgress: true,
+      responseType: 'json'
+    });
+    return this.http.request(req);
+  }
+
+  getFiles(): Observable<any> {
+    return this.http.get(`${this.baseUrl}/files`);
+  }
+}

src/app/upload-files/upload-files.component.html

+<div style="text-align:center">
+  <h1>
+    <app-header></app-header>
+   <app-menu></app-menu>
+  </h1>
+</div> 
+<div class="w3-container">
+  <div *ngFor="let progressInfo of progressInfos" class="mb-2">
+    <span>{{ progressInfo.fileName }}</span>
+    <div class="progress">
+      <div
+        class="progress-bar progress-bar-info progress-bar-striped"
+        role="progressbar"
+        attr.aria-valuenow="{{ progressInfo.value }}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [ngStyle]="{ width: progressInfo.value + '%' }"
+      >
+        {{ progressInfo.value }}%
+      </div>
+    </div>
+  </div>
+  <div class="w3-container">
+  
+    
+      <div class="form-check">
+        <input type="file" multiple (change)="selectFiles($event)" />
+        <input type="checkbox" class="form-check-input" [(ngModel)]="allow_duplicates"/>  
+        <label class="form-check-label"  title="You should select this option if you want to compare different pipelines executions. 
+You will have repeated documents with the same name, you can difference them throught the process date.">Allowing duplicates</label>
+      </div>
+      <label class="btn btn-default">
+        <button
+        class="btn btn-success"
+        [disabled]="!selectedFiles"
+        (click)="uploadFiles()"
+      >
+        Upload
+      </button>
+  </label>
+  
+</div>
+  <!-- <div class="alert alert-light" role="alert">{{ message_response }}</div> -->
+  <div *ngIf="message_response.length>0" class="card">
+    <div class="card-header">Messages:</div>
+    <ul
+      class="list-group list-group-flush"
+      *ngFor="let m of message_response "
+    >
+      <li class="list-group-item">
+        {{ m }}
+      </li>
+    </ul>
+  </div> 
+  
+</div>
\ No newline at end of file

src/app/upload-files/upload-files.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+
+import { UploadFilesService } from 'src/app/upload-files.service';
+import { HttpEventType, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-upload-files',
+  templateUrl: './upload-files.component.html',
+  styleUrls: ['./upload-files.component.css']
+})
+export class UploadFilesComponent implements OnInit {
+  selectedFiles: FileList;
+  progressInfos = [];
+  message = '';
+  message_response = [];
+  allow_duplicates : boolean = false;
+  fileInfos: Observable<any>;
+  constructor(private uploadService: UploadFilesService) { }
+  
+
+  ngOnInit() {
+    this.fileInfos = this.uploadService.getFiles();
+  }
+
+
+  selectFiles(event) {
+    this.progressInfos = [];
+    this.selectedFiles = event.target.files;
+  }
+
+  uploadFiles() {
+    this.message = '';
+    this.uploadService.upload(this.selectedFiles, this.allow_duplicates).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          //this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
+        } else if (event instanceof HttpResponse) {
+          this.message_response = event.body;
+          //this.fileInfos = this.uploadService.getFiles();
+        }
+      },
+      err => {
+        //this.progressInfos[idx].value = 0;
+        this.message_response = err.error;
+         ;
+      });
+  }
+  
+  
+    
+  upload(idx, file) {
+    this.progressInfos[idx] = { value: 0, fileName: file.name };
+    this.uploadService.upload(file,false).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
+        } else if (event instanceof HttpResponse) {
+          this.fileInfos = this.uploadService.getFiles();
+        }
+      },
+      err => {
+        this.progressInfos[idx].value = 0;
+        this.message = 'Could not upload the file:' + file.name;
+      });
+  }
+  
+  
+  
+
+}