From 3e4704af0dc959a16d9639af12ec7c13172a2ba4 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Mon, 23 Mar 2020 16:19:37 +0100
Subject: [PATCH] working on upload functionality

---
 package.json                                  |  2 +-
 .../parameter-select.component.html           |  2 +-
 .../file-value-input.component.html           |  6 ++++
 .../file-value-input.component.scss           |  0
 .../file-value-input.component.spec.ts        | 25 ++++++++++++++
 .../file-value-input.component.ts             | 33 +++++++++++++++++++
 .../parameter-value-input.component.html      |  1 +
 src/app/process-page/process-page.module.ts   |  4 +--
 src/app/shared/uploader/uploader.component.ts |  3 ++
 yarn.lock                                     | 10 +++---
 10 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts

diff --git a/package.json b/package.json
index 0f3fa03c1e..34bb976b9e 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "moment-range": "^4.0.2",
     "morgan": "^1.9.1",
     "ng-mocks": "^8.1.0",
-    "ng2-file-upload": "1.2.1",
+    "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.2",
     "ngx-bootstrap": "^5.3.2",
     "ngx-infinite-scroll": "6.0.1",
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
index d530996569..63aa5afaf9 100644
--- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
@@ -1,4 +1,4 @@
-<div class="form-row">
+<div class="form-row mb-2">
         <select required id="process-parameters"
                 class="form-control col"
                 name="script"
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
new file mode 100644
index 0000000000..cb211e607b
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -0,0 +1,6 @@
+<ds-uploader dropMsg="process.parameter.file-upload"
+              dropOverDocumentMsg="process.parameter.file-upload"
+              [enableDragOverDocument]="true"
+              [uploadFilesOptions]="uploadFilesOptions"
+              (onCompleteItem)="onCompleteItem()"
+              (onUploadError)="onUploadError()"></ds-uploader>
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
new file mode 100644
index 0000000000..b7de5e5a23
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileValueInputComponent } from './file-value-input.component';
+
+describe('FileValueInputComponent', () => {
+  let component: FileValueInputComponent;
+  let fixture: ComponentFixture<FileValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FileValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
new file mode 100644
index 0000000000..d0fa9793d3
--- /dev/null
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { FileUploaderOptions } from 'ng2-file-upload';
+import { UploaderOptions } from '../../../../../shared/uploader/uploader-options.model';
+
+@Component({
+  selector: 'ds-file-value-input',
+  templateUrl: './file-value-input.component.html',
+  styleUrls: ['./file-value-input.component.scss']
+})
+export class FileValueInputComponent implements OnInit {
+  uploadFilesOptions: FileUploaderOptions;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.uploadFilesOptions = new UploaderOptions();
+    this.uploadFilesOptions.autoUpload = false;
+    this.uploadFilesOptions.url = 'bladibla';
+    this.uploadFilesOptions.authToken = 'bladibla';
+    this.uploadFilesOptions.disableMultipart = true;
+    this.uploadFilesOptions.formatDataFunctionIsAsync = false;
+    this.uploadFilesOptions.formatDataFunction((t) => console.log(t));
+  }
+
+  onCompleteItem() {
+
+  }
+
+  onUploadError() {
+
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
index c76976fc33..22d60c8f7f 100644
--- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
+++ b/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -1,3 +1,4 @@
 <div [ngSwitch]="parameter?.type">
   <ds-string-value-input *ngSwitchCase="parameterTypes.STRING"></ds-string-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE"></ds-file-value-input>
 </div>
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 6b2d88d71d..a20a111f9b 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/src/app/process-page/process-page.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { ProcessPageRoutingModule } from './process-page-routing.module';
-import { ProcessDataService } from '../core/data/processes/process-data.service';
-import { ScriptDataService } from '../core/data/processes/script-data.service';
 import { NewProcessComponent } from './new/new-process.component';
 import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
 import { ScriptHelpComponent } from './new/script-help/script-help.component';
@@ -10,6 +8,7 @@ import { ParameterSelectComponent } from './new/process-parameters/parameter-sel
 import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
 import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
 import { ParameterValueInputComponent } from './new/process-parameters/parameter-value-input/parameter-value-input.component';
+import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
 
 @NgModule({
   imports: [
@@ -24,6 +23,7 @@ import { ParameterValueInputComponent } from './new/process-parameters/parameter
     ProcessParametersComponent,
     StringValueInputComponent,
     ParameterValueInputComponent,
+    FileValueInputComponent,
   ],
   entryComponents: []
 })
diff --git a/src/app/shared/uploader/uploader.component.ts b/src/app/shared/uploader/uploader.component.ts
index 935d196d08..26b094a584 100644
--- a/src/app/shared/uploader/uploader.component.ts
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -113,12 +113,15 @@ export class UploaderComponent {
   ngAfterViewInit() {
     // Maybe to remove: needed to avoid CORS issue with our temp upload server
     this.uploader.onAfterAddingFile = ((item) => {
+      console.log(item);
+
       item.withCredentials = false;
     });
     if (isUndefined(this.onBeforeUpload)) {
       this.onBeforeUpload = () => {return};
     }
     this.uploader.onBeforeUploadItem = (item) => {
+
       if (item.url !== this.uploader.options.url) {
         item.url = this.uploader.options.url;
       }
diff --git a/yarn.lock b/yarn.lock
index 7035bb60c4..4df0bac826 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8646,10 +8646,12 @@ ng-mocks@^8.1.0:
   resolved "https://registry.yarnpkg.com/ng-mocks/-/ng-mocks-8.1.0.tgz#d00a5e53ae53587f35c68147826590fab71a1658"
   integrity sha512-/314nyU6UrONCUKfvFRuJPLpNBxqocwJmQBlPy4he5Vueu6gObXjy+KLUlbbENuA7zTeBjp//RA6w/Fa1yQ4Fw==
 
-ng2-file-upload@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.2.1.tgz#5563c5dfd6f43fbfbe815c206e343464a0a6a197"
-  integrity sha1-VWPF39b0P7++gVwgbjQ0ZKCmoZc=
+ng2-file-upload@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.4.0.tgz#8dea28d573234c52af474ad2a4001b335271e5c4"
+  integrity sha512-3J/KPU/tyh/ad6TFeUbrxX+SihUj0iOEt2Zsg4EX7mB3GFiQscXOfcUOxCkBtPWWWaqt3azrYbVGzsYa3/7NzQ==
+  dependencies:
+    tslib "^1.9.0"
 
 ng2-nouislider@^1.8.2:
   version "1.8.2"