From 7870bca5cd62f00376d1cd471a0e8df9109e22ed Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Sat, 12 Sep 2020 17:50:30 +0200 Subject: [PATCH 01/89] Added file-uploader-component (file drag and drop) --- .../file-uploader/drag-and-drop.directive.ts | 41 ++++++++++++++++++ .../file-uploader.component.html | 24 +++++++++++ .../file-uploader.component.scss | 33 ++++++++++++++ .../file-uploader/file-uploader.component.ts | 43 +++++++++++++++++++ src/app/modules/project/add/add.module.ts | 4 +- .../project/add/manual/manual.component.html | 19 ++++++-- src/app/modules/project/project.module.ts | 3 +- 7 files changed, 161 insertions(+), 6 deletions(-) create mode 100644 src/app/components/file-uploader/drag-and-drop.directive.ts create mode 100644 src/app/components/file-uploader/file-uploader.component.html create mode 100644 src/app/components/file-uploader/file-uploader.component.scss create mode 100644 src/app/components/file-uploader/file-uploader.component.ts diff --git a/src/app/components/file-uploader/drag-and-drop.directive.ts b/src/app/components/file-uploader/drag-and-drop.directive.ts new file mode 100644 index 00000000..54516d9c --- /dev/null +++ b/src/app/components/file-uploader/drag-and-drop.directive.ts @@ -0,0 +1,41 @@ +import { + Directive, + Output, + Input, + EventEmitter, + HostBinding, + HostListener +} from '@angular/core'; + +@Directive({ + selector: '[app-drag-and-drop]' +}) +export class DndDirective { + @HostBinding('class.fileover') fileOver: boolean; + @Output() fileDropped = new EventEmitter(); + + // Dragover listener + @HostListener('dragover', ['$event']) onDragOver(evt) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = true; + } + + // Dragleave listener + @HostListener('dragleave', ['$event']) public onDragLeave(evt) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + } + + // Drop listener + @HostListener('drop', ['$event']) public ondrop(evt) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + let files = evt.dataTransfer.files; + if (files.length > 0) { + this.fileDropped.emit(files); + } + } +} diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html new file mode 100644 index 00000000..920a0ab7 --- /dev/null +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -0,0 +1,24 @@ +
+ +

Drag and drop a file here

+

Or

+ +
+
+
+
+
+
+

+ {{ file?.name }} +

+
+ +
+ + + +
+
+
\ No newline at end of file diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss new file mode 100644 index 00000000..4bcb6741 --- /dev/null +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -0,0 +1,33 @@ +.container { + width: 100%; + height: 200px; + padding: 2rem; + text-align: center; + border: dashed 1px #979797; + position: relative; + margin: 0 auto 20px auto; + + input { + opacity: 0; + position: absolute; + z-index: 2; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + label { + color: white; + width: 183px; + height: 44px; + border-radius: 21.5px; + background-color: #e85b3f; + padding: 8px 16px; + } + + h3 { + font-size: 18px; + color: #38424c; + } +} diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts new file mode 100644 index 00000000..8983316e --- /dev/null +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { ReadVarExpr } from '@angular/compiler'; + +@Component({ + selector: 'app-file-uploader', + templateUrl: './file-uploader.component.html', + styleUrls: ['./file-uploader.component.scss'] +}) +export class FileUploaderComponent { + files: any[] = []; + // local URL of the image + url: string; + + /** + * on file drop handler + */ + onFileDropped($event) { + this.prepareFilesList($event); + } + + /** + * handle file from browsing + */ + fileBrowseHandler(files) { + this.prepareFilesList(files); + } + + /** + * Delete file from files list + * @param index (File index) + */ + deleteFile(index: number) { + this.files.splice(index, 1); + } + + prepareFilesList(files: Array) { + for (const item of files) { + item.progress = 0; + this.files.push(item); + } + } + +} diff --git a/src/app/modules/project/add/add.module.ts b/src/app/modules/project/add/add.module.ts index 4b303adf..d7e782dd 100644 --- a/src/app/modules/project/add/add.module.ts +++ b/src/app/modules/project/add/add.module.ts @@ -22,11 +22,13 @@ import { AddRoutingModule } from './add-routing.module'; import { ManualComponent } from './manual/manual.component'; import { SourceComponent } from './source/source.component'; import { QuillModule } from 'ngx-quill'; +import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component' @NgModule({ declarations: [ SourceComponent, - ManualComponent + ManualComponent, + FileUploaderComponent ], imports: [ CommonModule, diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index 81ce2aad..35289d92 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -34,7 +34,8 @@

Project name*

Project link*

- +
@@ -43,7 +44,8 @@

Project link*

Short description*

- +
@@ -66,6 +68,15 @@

Description*

+
+
+
+

Project icon

+ + +
+
+
@@ -113,7 +124,7 @@

Collaborators

{{collaborator?.fullName}}- {{collaborator?.role}}

@@ -128,4 +139,4 @@

Collaborators

- + \ No newline at end of file diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts index ff4ee6ab..84f2e1e3 100644 --- a/src/app/modules/project/project.module.ts +++ b/src/app/modules/project/project.module.ts @@ -39,7 +39,8 @@ import { QuillModule } from 'ngx-quill'; EmbedButtonComponent, EmbedComponent, ModalHighlightDeleteComponent, - ModalHighlightComponent], + ModalHighlightComponent + ], imports: [ CommonModule, FormsModule, From 6bdc17f33d130d7a74203fbfccbf0680459f0bf1 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 14 Sep 2020 10:57:56 +0200 Subject: [PATCH 02/89] Added parameters to make file-uploader reusable - accceptMultiple - acceptedTypes --- .../file-uploader/file-uploader.component.html | 9 ++++----- .../file-uploader/file-uploader.component.ts | 16 +++++++++++----- .../project/add/manual/manual.component.html | 2 +- .../project/add/manual/manual.component.ts | 5 +++++ 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 920a0ab7..9f19357d 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -1,5 +1,6 @@
- +

Drag and drop a file here

Or

@@ -9,16 +10,14 @@

Or

+

{{ file?.name }}

- - - + X
\ No newline at end of file diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 8983316e..a834a66c 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, EventEmitter, Output } from '@angular/core'; import { ReadVarExpr } from '@angular/compiler'; @Component({ @@ -7,7 +7,12 @@ import { ReadVarExpr } from '@angular/compiler'; styleUrls: ['./file-uploader.component.scss'] }) export class FileUploaderComponent { - files: any[] = []; + + @Input() acceptMultiple: boolean; + @Input() acceptedTypes: Array; + @Output() newFileEvent = new EventEmitter(); + + files: Array = []; // local URL of the image url: string; @@ -34,9 +39,10 @@ export class FileUploaderComponent { } prepareFilesList(files: Array) { - for (const item of files) { - item.progress = 0; - this.files.push(item); + for (const file of files) { + if (this.acceptedTypes.includes(file.type)) { + this.files.push(file) + } } } diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index 35289d92..a65be239 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -72,7 +72,7 @@

Description*

Project icon

- +
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index abb4b08b..6ef0bbc3 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -61,6 +61,11 @@ export class ManualComponent implements OnInit { */ public modulesConfigration = QuillUtils.getDefaultModulesConfiguration(); + /** + * Accepted fileTypes for file-picker + */ + acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + constructor( private router: Router, private formBuilder: FormBuilder, From 70077452d4fea7920894666ba96799633e3fa3c3 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 14 Sep 2020 14:17:32 +0200 Subject: [PATCH 03/89] Added service to upload the files --- .../file-uploader.component.html | 19 +++-- .../file-uploader.component.scss | 33 ++++++++ .../file-uploader/file-uploader.component.ts | 75 ++++++++++++++++++- src/app/config/api-config.ts | 4 +- src/app/models/domain/uploadFile.ts | 5 ++ src/app/services/file-uploader.service.ts | 22 ++++++ 6 files changed, 148 insertions(+), 10 deletions(-) create mode 100644 src/app/models/domain/uploadFile.ts create mode 100644 src/app/services/file-uploader.service.ts diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 9f19357d..74aabbdf 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -7,17 +7,20 @@

Or

-
-
-
- -

+
+ +

{{ file?.name }}

-
-
- X +
+ X +
+
+
{{file.progress}}% +
+
+

\ No newline at end of file diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index 4bcb6741..5d1b86f0 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -31,3 +31,36 @@ color: #38424c; } } + +.files-list { + div.single-file { + div.file-info { + display: flex; + align-content: space-between; + align-items: center; + + .file-icon { + width: 128px; + height: 128px; + background-position: center; + border-radius: 50%; + } + + .file-name { + vertical-align: center; + margin-left: 5%; + } + } + + .file-progress { + min-width: 100%; + background-color: #868686; + border-radius: 5%; + } + + .progress-bar { + background-color: #e85b3f; + transition: 0.5s all; + } + } +} diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index a834a66c..52213ee7 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,5 +1,10 @@ import { Component, Input, EventEmitter, Output } from '@angular/core'; import { ReadVarExpr } from '@angular/compiler'; +import { uploadFile } from 'src/app/models/domain/uploadFile'; +import { FileUploaderService } from 'src/app/services/file-uploader.service'; +import { catchError, map } from 'rxjs/operators'; +import { HttpErrorResponse, HttpEventType } from '@angular/common/http'; +import { of } from 'rxjs'; @Component({ selector: 'app-file-uploader', @@ -12,7 +17,9 @@ export class FileUploaderComponent { @Input() acceptedTypes: Array; @Output() newFileEvent = new EventEmitter(); - files: Array = []; + constructor(private uploadService: FileUploaderService) { } + + files: Array = []; // local URL of the image url: string; @@ -39,11 +46,77 @@ export class FileUploaderComponent { } prepareFilesList(files: Array) { + // If the user can only select 1 image we want to reset the array + if (!this.acceptMultiple) { + this.files = []; + } for (const file of files) { if (this.acceptedTypes.includes(file.type)) { + const fileReader: FileReader = new FileReader(); + fileReader.readAsDataURL(file) + + fileReader.onload = event => { + file.preview = event.target.result; + file.progress = 0; + } this.files.push(file) } + this.uploadFiles() + this.simulateFileUpload(0); } } + private uploadFiles() { + this.files.forEach(file => { + this.uploadFile(file); + }); + } + + /** + * Upload the file + */ + uploadFile(file) { + const formData = new FormData(); + formData.append('file', file); + file.inProgress = true; + this.uploadService.uploadFile(formData).pipe( + map(event => { + switch (event.type) { + case HttpEventType.UploadProgress: + file.progress = Math.round(event.loaded * 100 / event.total); + break; + case HttpEventType.Response: + return event; + } + }), + catchError((error: HttpErrorResponse) => { + file.inProgress = false; + return of(`${file.name} upload failed.`); + })).subscribe((event: any) => { + if (typeof (event) === 'object') { + console.log(event.body); + } + }); + } + + /** + * Simulate the upload process + */ + simulateFileUpload(index: number) { + setTimeout(() => { + if (index === this.files.length) { + return; + } else { + const progressInterval = setInterval(() => { + if (this.files[index].progress === 100) { + clearInterval(progressInterval); + this.simulateFileUpload(index + 1); + } else { + this.files[index].progress += 5; + } + }, 200); + } + }, 1000); + } + } diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts index faff60fa..a388bb7b 100644 --- a/src/app/config/api-config.ts +++ b/src/app/config/api-config.ts @@ -26,6 +26,7 @@ export interface ApiConfig { internalSearchRoute: string; externalSearchRoute: string; wizardRoute: string; + uploadFileRoute: string; } export const API_CONFIG: ApiConfig = { @@ -36,5 +37,6 @@ export const API_CONFIG: ApiConfig = { internalSearchRoute: 'search/internal', externalSearchRoute: 'search/external', embeddedProjectRoute: 'embed', - wizardRoute: 'wizard' + wizardRoute: 'wizard', + uploadFileRoute: 'upload', }; diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts new file mode 100644 index 00000000..0113c1d7 --- /dev/null +++ b/src/app/models/domain/uploadFile.ts @@ -0,0 +1,5 @@ +export interface uploadFile extends File { + preview: number, + progress: number, + inProgress: boolean +} \ No newline at end of file diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts new file mode 100644 index 00000000..4fff0178 --- /dev/null +++ b/src/app/services/file-uploader.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http'; +import { map } from 'rxjs/operators'; +import { Observable } from 'rxjs'; +import { API_CONFIG } from '../config/api-config'; + +@Injectable({ + providedIn: 'root' +}) +export class FileUploaderService { + protected readonly url = 'https://file.io/'; + + constructor( + private http: HttpClient) { } + + public uploadFile(formdata: FormData): Observable { + return this.http.post(this.url, formdata, { + reportProgress: true, + observe: 'events' + }) + } +} From 662004360cb029353796bc64946206faf6ec9f7b Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 14 Sep 2020 14:48:12 +0200 Subject: [PATCH 04/89] Added some rounded corners and implemented scss variables --- .../file-uploader.component.scss | 28 ++++++++++++++++--- .../file-uploader/file-uploader.component.ts | 22 --------------- .../project/add/manual/manual.component.scss | 5 ++++ 3 files changed, 29 insertions(+), 26 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index 5d1b86f0..37f3d65a 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -1,3 +1,5 @@ +@import "assets/styles/variables"; + .container { width: 100%; height: 200px; @@ -22,7 +24,7 @@ width: 183px; height: 44px; border-radius: 21.5px; - background-color: #e85b3f; + background-color: $accent-color-primary; padding: 8px 16px; } @@ -33,11 +35,24 @@ } .files-list { + background-color: $light-mode-component-color; + transition: 0.5s all; + padding: 15px; + border-radius: 6px; + + div.single-file:not(:last-child) { + border-bottom: 3px solid rgb(165, 165, 165); + border-radius: 2px; + } + div.single-file { + padding: 10px; + div.file-info { display: flex; align-content: space-between; align-items: center; + margin-bottom: 10px; .file-icon { width: 128px; @@ -49,18 +64,23 @@ .file-name { vertical-align: center; margin-left: 5%; + font-size: 2rem + } + + .delete { + font-size: 2rem; + margin: 0 20px 0 auto; } } .file-progress { min-width: 100%; - background-color: #868686; - border-radius: 5%; } .progress-bar { - background-color: #e85b3f; + background-color: $accent-color-primary; transition: 0.5s all; + border-radius: 25px; } } } diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 52213ee7..ac2a36a9 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -62,7 +62,6 @@ export class FileUploaderComponent { this.files.push(file) } this.uploadFiles() - this.simulateFileUpload(0); } } @@ -98,25 +97,4 @@ export class FileUploaderComponent { } }); } - - /** - * Simulate the upload process - */ - simulateFileUpload(index: number) { - setTimeout(() => { - if (index === this.files.length) { - return; - } else { - const progressInterval = setInterval(() => { - if (this.files[index].progress === 100) { - clearInterval(progressInterval); - this.simulateFileUpload(index + 1); - } else { - this.files[index].progress += 5; - } - }, 200); - } - }, 1000); - } - } diff --git a/src/app/modules/project/add/manual/manual.component.scss b/src/app/modules/project/add/manual/manual.component.scss index 9367fdbb..c2b7c0aa 100644 --- a/src/app/modules/project/add/manual/manual.component.scss +++ b/src/app/modules/project/add/manual/manual.component.scss @@ -19,6 +19,7 @@ @import "assets/styles/variables"; .project-form { + input, textarea { border: none; @@ -42,6 +43,10 @@ .form-footnote { margin-top: -15px; } + + .project-icon-picker { + margin-bottom: 25px; + } } .add-collaborator-col { From 047e4aa75b13072ccdba906d3c56668ceb24d354 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 11:55:43 +0200 Subject: [PATCH 05/89] Added file size to front and backend --- .../file-uploader/file-uploader.component.html | 5 ++++- .../file-uploader/file-uploader.component.scss | 5 +++++ .../file-uploader/file-uploader.component.ts | 14 ++++++++++++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 74aabbdf..65b0628c 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -1,6 +1,6 @@
+ [multiple]="acceptMultiple ? true : null" [accept]="acceptedTypes.join(',')" />

Drag and drop a file here

Or

@@ -12,6 +12,9 @@

Or

{{ file?.name }}

+

+ {{ file?.readableSize }} +

X diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index 37f3d65a..ab4eb39f 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -67,6 +67,11 @@ font-size: 2rem } + .file-size { + margin: 1rem 0 0 5px; + color: gray; + } + .delete { font-size: 2rem; margin: 0 20px 0 auto; diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index ac2a36a9..16863557 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -52,6 +52,7 @@ export class FileUploaderComponent { } for (const file of files) { if (this.acceptedTypes.includes(file.type)) { + this.formatBytes(file) const fileReader: FileReader = new FileReader(); fileReader.readAsDataURL(file) @@ -61,8 +62,17 @@ export class FileUploaderComponent { } this.files.push(file) } - this.uploadFiles() - } + private formatBytes(file: uploadFile, decimals = 2) { + let bytes: number = file.size; + if (bytes === 0) return '0 Bytes'; + + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + + const i = Math.floor(Math.log(bytes) / Math.log(k)); + + file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } private uploadFiles() { From 42109c46b2e4aa924eedc05427e9b937f630cda9 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 11:56:48 +0200 Subject: [PATCH 06/89] Added generatePreview function --- .../file-uploader/file-uploader.component.ts | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 16863557..9986e179 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -52,16 +52,24 @@ export class FileUploaderComponent { } for (const file of files) { if (this.acceptedTypes.includes(file.type)) { + this.generatePreview(file); this.formatBytes(file) - const fileReader: FileReader = new FileReader(); - fileReader.readAsDataURL(file) - - fileReader.onload = event => { - file.preview = event.target.result; - file.progress = 0; - } this.files.push(file) } + } + this.uploadFiles() + } + + private generatePreview(file: uploadFile) { + // We can use a FileReader to generate a base64 string based on the image + const fileReader: FileReader = new FileReader(); + // Convert the file to base64 + fileReader.readAsDataURL(file) + fileReader.onload = event => { + file.preview = event.target.result as string; + } + } + private formatBytes(file: uploadFile, decimals = 2) { let bytes: number = file.size; if (bytes === 0) return '0 Bytes'; From 40e040a5669b89497f062856b7a8c57545c4f88f Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 12:04:00 +0200 Subject: [PATCH 07/89] Added the fileUpload event so the form can receive the fil --- .../file-uploader/file-uploader.component.ts | 35 ++- src/app/models/domain/uploadFile.ts | 5 +- src/app/models/resources/project-add.ts | 1 + .../project/add/manual/manual.component.html | 283 +++++++++--------- .../project/add/manual/manual.component.ts | 12 + 5 files changed, 182 insertions(+), 154 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 9986e179..df3aba49 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -45,7 +45,7 @@ export class FileUploaderComponent { this.files.splice(index, 1); } - prepareFilesList(files: Array) { + prepareFilesList(files: Array) { // If the user can only select 1 image we want to reset the array if (!this.acceptMultiple) { this.files = []; @@ -93,26 +93,39 @@ export class FileUploaderComponent { * Upload the file */ uploadFile(file) { - const formData = new FormData(); - formData.append('file', file); - file.inProgress = true; - this.uploadService.uploadFile(formData).pipe( - map(event => { + const formData: FormData = this.buildFormData(file); + // Call the service to upload the file + this.uploadService.uploadFile(formData) + .pipe + (map(event => { switch (event.type) { case HttpEventType.UploadProgress: + // divide the (uploaded bytes * 100) by the total bytes to calculate the progess in percentage file.progress = Math.round(event.loaded * 100 / event.total); break; case HttpEventType.Response: return event; } }), - catchError((error: HttpErrorResponse) => { - file.inProgress = false; - return of(`${file.name} upload failed.`); - })).subscribe((event: any) => { + catchError((error: HttpErrorResponse) => { + // If the upload errors, notify the user + return of(`${file.name} upload failed.`); + }) + ) + .subscribe + ((event: any) => { if (typeof (event) === 'object') { - console.log(event.body); + // File uploaded successfully + console.log(event.body.data.fileName); + // Validate that the server sent back a valid filePath + if (this.validatePathFile(event.body.data.fileName)) { + // Fire an event that the parent can catch + this.fileUploaded.emit(event.body.data.fileName) + } } + } + ); + } }); } } diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 0113c1d7..7c452227 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,5 +1,6 @@ export interface uploadFile extends File { - preview: number, + preview: string, progress: number, - inProgress: boolean + inProgress: boolean, + readableSize: string } \ No newline at end of file diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts index 86f83386..90e69e6a 100644 --- a/src/app/models/resources/project-add.ts +++ b/src/app/models/resources/project-add.ts @@ -23,4 +23,5 @@ export interface ProjectAdd { shortDescription: string; description?: string; url: string; + icon: string; } diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index a65be239..4b702884 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -1,142 +1,143 @@ - - - -
-
-

Add new project

- - -
-
-
-

Project name*

- -
-
- -
-
-

Project link*

- -
-
-
- -
-
-
-

Short description*

- -
-
-
- -
-
-
-

Describe your project in one sentence or 170 characters.

-
-
-
- -
-
-
-

Description*

- - -
-
-
-
-
-
-

Project icon

- - -
-
-
- - -
-
-
-

Add project collaborators

-
- -
-
-

Collaborator full name

- -
-
- -
-
-

Collaborator role

- -
-
- -
- -
- -
-

e.g.: developer, designer, etc...

-
- -
-
-
-
- -
- -
-

Collaborators

-
- -
- - -

{{collaborator?.fullName}}- {{collaborator?.role}}

-
-
-
- -
-
- -
-
- -
+ + + +
+
+

Add new project

+
+ +
+
+
+

Project name*

+ +
+
+ +
+
+

Project link*

+ +
+
+
+ +
+
+
+

Short description*

+ +
+
+
+ +
+
+
+

Describe your project in one sentence or 170 characters.

+
+
+
+ +
+
+
+

Description*

+ + +
+
+
+
+
+
+

Project icon

+ + +
+
+
+
+ +
+
+
+

Add project collaborators

+
+ +
+
+

Collaborator full name

+ +
+
+ +
+
+

Collaborator role

+ +
+
+ +
+ +
+ +
+

e.g.: developer, designer, etc...

+
+ +
+
+
+
+ +
+ +
+

Collaborators

+
+ +
+ + +

{{collaborator?.fullName}}- {{collaborator?.role}}

+
+
+
+ +
+
+ +
+
+ +
\ No newline at end of file diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 6ef0bbc3..9669c6a3 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -123,6 +123,8 @@ export class ManualComponent implements OnInit { const newProject: ProjectAdd = this.newProjectForm.value; newProject.collaborators = this.collaborators; + // Only set the icon if a file has been uploaded + newProject.icon = this.iconFileName ? this.iconFileName : undefined; this.projectService .post(newProject) @@ -180,6 +182,16 @@ export class ManualComponent implements OnInit { this.collaborators.splice(index, 1); } + /** + * Method which triggers when a file is uploaded successfully by + * the app-file-uploader component + */ + private iconFileName: string; + public onFileUpload(fileName: string) { + console.log(`FILE UPLOADED: ${fileName}`) + // If the fileName is truthy + this.iconFileName = fileName ? fileName : undefined; + } /** * Method to fill a form with the values of a mapped project. */ From f0cb295fc7b5afb09be26f54d6304d68553a5f42 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 12:04:50 +0200 Subject: [PATCH 08/89] Added file validation on the server repsonse --- .../components/file-uploader/file-uploader.component.ts | 9 ++++++++- src/app/modules/project/add/manual/manual.component.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index df3aba49..e51ed2c8 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -126,6 +126,13 @@ export class FileUploaderComponent { } ); } - }); + validatePathFile(path: string): boolean { + // Format formats from I.E 'image/png' to 'png' + const acceptedTypesFormatted: Array = this.acceptedTypes.map(type => (type.split('/')[1])) + // Run a regex on the path to check if it has an allowed extension + let regex: RegExp = new RegExp(`([a-zA-Z0-9\s_\\.\-:])+\.(${acceptedTypesFormatted.join('|')})`); + // Return the result + return regex.test(path); + } } } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 9669c6a3..0b96145a 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -64,7 +64,7 @@ export class ManualComponent implements OnInit { /** * Accepted fileTypes for file-picker */ - acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; constructor( private router: Router, From d6a56bcd5aa6a78065e8c92b467940d0482ad5cc Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 12:05:31 +0200 Subject: [PATCH 09/89] Added buildFormData function --- src/app/components/file-uploader/file-uploader.component.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index e51ed2c8..d6c2e1aa 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -134,5 +134,10 @@ export class FileUploaderComponent { // Return the result return regex.test(path); } + buildFormData(file): FormData { + // Build a formdata object and add the fileData + const formData = new FormData(); + formData.append('file', file); + return formData; } } From dd16576a31f5fd8a3022e1bf813ed0dc6552efb9 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 15 Sep 2020 12:11:32 +0200 Subject: [PATCH 10/89] Some refactoring --- src/app/components/file-uploader/file-uploader.component.ts | 6 +++--- src/app/modules/project/add/manual/manual.component.ts | 2 ++ src/app/services/file-uploader.service.ts | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index d6c2e1aa..78087241 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -15,13 +15,11 @@ export class FileUploaderComponent { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; - @Output() newFileEvent = new EventEmitter(); + @Output() fileUploaded = new EventEmitter(); constructor(private uploadService: FileUploaderService) { } files: Array = []; - // local URL of the image - url: string; /** * on file drop handler @@ -126,6 +124,7 @@ export class FileUploaderComponent { } ); } + validatePathFile(path: string): boolean { // Format formats from I.E 'image/png' to 'png' const acceptedTypesFormatted: Array = this.acceptedTypes.map(type => (type.split('/')[1])) @@ -134,6 +133,7 @@ export class FileUploaderComponent { // Return the result return regex.test(path); } + buildFormData(file): FormData { // Build a formdata object and add the fileData const formData = new FormData(); diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 0b96145a..b054e0f5 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -192,6 +192,8 @@ export class ManualComponent implements OnInit { // If the fileName is truthy this.iconFileName = fileName ? fileName : undefined; } + + /** * Method to fill a form with the values of a mapped project. */ diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts index 4fff0178..00d1d495 100644 --- a/src/app/services/file-uploader.service.ts +++ b/src/app/services/file-uploader.service.ts @@ -8,7 +8,7 @@ import { API_CONFIG } from '../config/api-config'; providedIn: 'root' }) export class FileUploaderService { - protected readonly url = 'https://file.io/'; + protected readonly url = 'https://srv-store1.gofile.io/uploadFile'; constructor( private http: HttpClient) { } From 6df5976fb3ea8a216433fa21f41372177d18593f Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 17 Sep 2020 12:23:27 +0200 Subject: [PATCH 11/89] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22f4e13c..82cc15a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -70,6 +70,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Implemented permission validation for project edit / delete / highlight / embed buttons - [#213](https://github.com/DigitalExcellence/dex-frontend/issues/213) - Implemented WYSIWYG Editor for project description - [#216](https://github.com/DigitalExcellence/dex-frontend/issues/216) - Added pipe to strip html to fix the html showing in highlights - [#243](https://github.com/DigitalExcellence/dex-frontend/issues/243) +- Added functionality to upload an project icon when creating a project - [#266](https://github.com/DigitalExcellence/dex-frontend/issues/266) ### Changed From 1bb75a0211a5bed026228c863befec73d0fe4b7d Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 17 Sep 2020 12:24:44 +0200 Subject: [PATCH 12/89] Added the alt attribute to preview image --- src/app/components/file-uploader/file-uploader.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 65b0628c..73f26e90 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -8,7 +8,7 @@

Or

- + image-preview

{{ file?.name }}

From 1e44345b0940c3e23a37f996dc716ccbeeb742f1 Mon Sep 17 00:00:00 2001 From: walter Date: Fri, 18 Sep 2020 16:40:42 +0200 Subject: [PATCH 13/89] Updated behaviour to upload when the project/user gets saved instead of instantly --- .../file-uploader/file-uploader.component.ts | 35 +++++++------------ src/app/models/resources/project-add.ts | 2 +- src/app/models/resources/project-update.ts | 1 + .../project/add/manual/manual.component.ts | 15 +++++--- src/app/services/file-uploader.service.ts | 2 +- 5 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 78087241..e87cbcd3 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -55,7 +55,6 @@ export class FileUploaderComponent { this.files.push(file) } } - this.uploadFiles() } private generatePreview(file: uploadFile) { @@ -74,23 +73,28 @@ export class FileUploaderComponent { const k = 1024; const dm = decimals < 0 ? 0 : decimals; - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } - private uploadFiles() { + uploadFiles(cb) { + let files = []; this.files.forEach(file => { - this.uploadFile(file); + this.uploadFile(file, (file) => { + console.log(file) + files.push(file); + }); }); + cb(files); } /** * Upload the file */ - uploadFile(file) { + private uploadFile(file, cb) { const formData: FormData = this.buildFormData(file); // Call the service to upload the file this.uploadService.uploadFile(formData) @@ -114,30 +118,17 @@ export class FileUploaderComponent { ((event: any) => { if (typeof (event) === 'object') { // File uploaded successfully - console.log(event.body.data.fileName); - // Validate that the server sent back a valid filePath - if (this.validatePathFile(event.body.data.fileName)) { - // Fire an event that the parent can catch - this.fileUploaded.emit(event.body.data.fileName) + console.log(`DATA: ${event.body.data}`); + cb(event.body.data.fileName) } } - } ); } - validatePathFile(path: string): boolean { - // Format formats from I.E 'image/png' to 'png' - const acceptedTypesFormatted: Array = this.acceptedTypes.map(type => (type.split('/')[1])) - // Run a regex on the path to check if it has an allowed extension - let regex: RegExp = new RegExp(`([a-zA-Z0-9\s_\\.\-:])+\.(${acceptedTypesFormatted.join('|')})`); - // Return the result - return regex.test(path); - } - - buildFormData(file): FormData { + private buildFormData(file): FormData { // Build a formdata object and add the fileData const formData = new FormData(); - formData.append('file', file); + formData.append('File', file); return formData; } } diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts index 90e69e6a..edd3ef96 100644 --- a/src/app/models/resources/project-add.ts +++ b/src/app/models/resources/project-add.ts @@ -23,5 +23,5 @@ export interface ProjectAdd { shortDescription: string; description?: string; url: string; - icon: string; + fileId: string; } diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts index ca9bd09b..fb4ce312 100644 --- a/src/app/models/resources/project-update.ts +++ b/src/app/models/resources/project-update.ts @@ -24,5 +24,6 @@ export interface ProjectUpdate { name: string; shortDescription: string; description: string; + fileId: string, url: string; } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index b054e0f5..94af4b1c 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -17,7 +17,7 @@ import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertConfig } from 'src/app/models/internal/alert-config'; import { AlertService } from 'src/app/services/alert.service'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { finalize } from 'rxjs/operators'; @@ -27,6 +27,7 @@ import { ProjectService } from 'src/app/services/project.service'; import { MappedProject } from 'src/app/models/internal/mapped-project'; import { WizardService } from 'src/app/services/wizard.service'; import { QuillUtils } from 'src/app/utils/quill.utils'; +import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component'; // Import showdown for markdown to html conversion. import * as showdown from 'showdown'; @@ -37,9 +38,11 @@ import * as showdown from 'showdown'; @Component({ selector: 'app-manual', templateUrl: './manual.component.html', - styleUrls: ['./manual.component.scss'], + styleUrls: ['./manual.component.scss'] }) export class ManualComponent implements OnInit { + @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; + /** * Formgroup for entering project details. */ @@ -123,8 +126,10 @@ export class ManualComponent implements OnInit { const newProject: ProjectAdd = this.newProjectForm.value; newProject.collaborators = this.collaborators; - // Only set the icon if a file has been uploaded - newProject.icon = this.iconFileName ? this.iconFileName : undefined; + // Start uploading files + this.fileUploader.uploadFiles((files) => { + newProject.fileId = files[0].id; + }); this.projectService .post(newProject) @@ -183,7 +188,7 @@ export class ManualComponent implements OnInit { } /** - * Method which triggers when a file is uploaded successfully by + * Method which triggers when a file is uploaded successfully by * the app-file-uploader component */ private iconFileName: string; diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts index 00d1d495..1aeaf598 100644 --- a/src/app/services/file-uploader.service.ts +++ b/src/app/services/file-uploader.service.ts @@ -8,7 +8,7 @@ import { API_CONFIG } from '../config/api-config'; providedIn: 'root' }) export class FileUploaderService { - protected readonly url = 'https://srv-store1.gofile.io/uploadFile'; + protected readonly url: string = API_CONFIG.url + API_CONFIG.uploadFileRoute; constructor( private http: HttpClient) { } From 7b7092caed9bc29b0a6e01fc4ecae222c0c61bf0 Mon Sep 17 00:00:00 2001 From: walter Date: Fri, 18 Sep 2020 16:40:55 +0200 Subject: [PATCH 14/89] Updated url --- src/app/config/api-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/config/api-config.ts b/src/app/config/api-config.ts index a388bb7b..3611dd59 100644 --- a/src/app/config/api-config.ts +++ b/src/app/config/api-config.ts @@ -38,5 +38,5 @@ export const API_CONFIG: ApiConfig = { externalSearchRoute: 'search/external', embeddedProjectRoute: 'embed', wizardRoute: 'wizard', - uploadFileRoute: 'upload', + uploadFileRoute: 'file', }; From 6e3274516a62ed332c2fe584051796c34cb0e157 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 22 Sep 2020 16:52:31 +0200 Subject: [PATCH 15/89] Added error on illegal file types --- .../file-uploader/file-uploader.component.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index e87cbcd3..9aac9f72 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -4,7 +4,10 @@ import { uploadFile } from 'src/app/models/domain/uploadFile'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { catchError, map } from 'rxjs/operators'; import { HttpErrorResponse, HttpEventType } from '@angular/common/http'; -import { of } from 'rxjs'; +import { forkJoin, Observable, of } from 'rxjs'; +import { AlertConfig } from '../../models/internal/alert-config'; +import { AlertType } from '../../models/internal/alert-type'; +import { AlertService } from '../../services/alert.service'; @Component({ selector: 'app-file-uploader', @@ -54,6 +57,16 @@ export class FileUploaderComponent { this.formatBytes(file) this.files.push(file) } + else { + const alertConfig: AlertConfig = { + type: AlertType.danger, + preMessage: 'This file type is not allowed', + mainMessage: `File ${file.name} is of type that is not allowed please pick one of these ${this.acceptedTypes.join(', ')}`, + dismissible: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); + } } } From 14c5d8ceb32b2ea7be41598d23a693b29e6e384b Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 22 Sep 2020 17:12:06 +0200 Subject: [PATCH 16/89] Fixed issue that would not remove the item from the actual input. --- src/app/components/file-uploader/file-uploader.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 9aac9f72..965d4a2d 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -44,6 +44,7 @@ export class FileUploaderComponent { */ deleteFile(index: number) { this.files.splice(index, 1); + this.fileInput.nativeElement.value = ""; } prepareFilesList(files: Array) { From 2cacfacac9d0fa990ddc4a4c8fd958cc167883bc Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 10:12:15 +0200 Subject: [PATCH 17/89] Only show progress bar if there is progress, removed old events --- .../file-uploader/file-uploader.component.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 73f26e90..15214e9f 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -1,6 +1,6 @@ -
- +
+

Drag and drop a file here

Or

@@ -20,10 +20,10 @@

X

-
+
{{file.progress}}%
-
\ No newline at end of file +
From 91c4bc5b22117a7fc3f30de86a5a0f7599b4cee1 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 10:15:31 +0200 Subject: [PATCH 18/89] Changed uploadFiles to return a observable instead of array --- .../file-uploader/file-uploader.component.ts | 47 ++++++++++++------- src/app/models/domain/uploadFile.ts | 2 + .../project/add/manual/manual.component.html | 3 +- .../project/add/manual/manual.component.ts | 38 ++++++++++----- src/app/services/file-uploader.service.ts | 27 ++++++++--- 5 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 965d4a2d..227962ba 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,5 +1,4 @@ -import { Component, Input, EventEmitter, Output } from '@angular/core'; -import { ReadVarExpr } from '@angular/compiler'; +import { Component, Input, ViewChild, ElementRef } from '@angular/core'; import { uploadFile } from 'src/app/models/domain/uploadFile'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { catchError, map } from 'rxjs/operators'; @@ -18,24 +17,25 @@ export class FileUploaderComponent { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; - @Output() fileUploaded = new EventEmitter(); + @ViewChild('fileDropRef') fileInput: ElementRef; - constructor(private uploadService: FileUploaderService) { } + constructor(private uploadService: FileUploaderService, + private alertService: AlertService) { } files: Array = []; /** - * on file drop handler - */ - onFileDropped($event) { - this.prepareFilesList($event); + * on file drop handler + */ + onFileDropped(event) { + this.prepareFilesList(event); } /** * handle file from browsing */ fileBrowseHandler(files) { - this.prepareFilesList(files); + this.prepareFilesList(files.files); } /** @@ -94,15 +94,26 @@ export class FileUploaderComponent { file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } - uploadFiles(cb) { - let files = []; - this.files.forEach(file => { - this.uploadFile(file, (file) => { - console.log(file) - files.push(file); - }); - }); - cb(files); + uploadFiles(): Observable> { + const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) + .pipe(map(event => { + switch (event.type) { + case HttpEventType.UploadProgress: + // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage + console.log(event.loaded, event.total) + this.files.find(value => value.name === file.name).progress = Math.round(event.loaded * 100 / event.total); + console.log('progress', file.progress) + break; + case HttpEventType.Response: + return event.body; + }}), + catchError((err: HttpErrorResponse) => { + console.log(err) + return of('Failed to upload files'); + }) + ) + ); + return forkJoin(fileUploads) } /** diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 7c452227..3b671e86 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,4 +1,6 @@ export interface uploadFile extends File { + id: string, + path: string, preview: string, progress: number, inProgress: boolean, diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index 4b702884..35b71866 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -72,8 +72,7 @@

Description*

Project icon

- +
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 94af4b1c..6c467017 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -65,9 +65,10 @@ export class ManualComponent implements OnInit { public modulesConfigration = QuillUtils.getDefaultModulesConfiguration(); /** - * Accepted fileTypes for file-picker + * Configuration for file-picker */ public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + public acceptMultiple: Boolean = false; constructor( private router: Router, @@ -127,23 +128,36 @@ export class ManualComponent implements OnInit { const newProject: ProjectAdd = this.newProjectForm.value; newProject.collaborators = this.collaborators; // Start uploading files - this.fileUploader.uploadFiles((files) => { - newProject.fileId = files[0].id; - }); + this.fileUploader.uploadFiles().subscribe(uploadedFiles => { + if(uploadedFiles[0]) { + newProject.FileId = uploadedFiles[0].id + this.createProject(newProject) - this.projectService - .post(newProject) - .pipe(finalize(() => (this.submitEnabled = false))) - .subscribe(() => { + } else { const alertConfig: AlertConfig = { - type: AlertType.success, - mainMessage: 'Project was succesfully saved', + type: AlertType.danger, + mainMessage: 'Something went wrong saving your files, please try again', dismissible: true, timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); - this.router.navigate([`/project/overview`]); - }); + } + }); + } + private createProject(newProject):void { + this.projectService + .post(newProject) + .pipe(finalize(() => (this.submitEnabled = false))) + .subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + mainMessage: 'Project was succesfully saved', + dismissible: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); + this.router.navigate([`/project/overview`]); + }); } /** diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts index 1aeaf598..2e80fc89 100644 --- a/src/app/services/file-uploader.service.ts +++ b/src/app/services/file-uploader.service.ts @@ -1,8 +1,9 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http'; -import { map } from 'rxjs/operators'; -import { Observable } from 'rxjs'; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { catchError } from 'rxjs/operators'; +import { Observable, of } from 'rxjs'; import { API_CONFIG } from '../config/api-config'; +import { uploadFile } from '../models/domain/uploadFile'; @Injectable({ providedIn: 'root' @@ -13,10 +14,24 @@ export class FileUploaderService { constructor( private http: HttpClient) { } - public uploadFile(formdata: FormData): Observable { - return this.http.post(this.url, formdata, { + public uploadFile(file: uploadFile): Observable { + const formData: FormData = FileUploaderService.buildFormData(file); + return this.http.post(this.url, formData, { reportProgress: true, observe: 'events' - }) + }).pipe + ( + catchError((error: HttpErrorResponse) => { + // If the upload errors, notify the user + return of(`${file.name} upload failed.`); + }) + ) + } + + private static buildFormData(file): FormData { + // Build a formdata object and add the fileData + const formData = new FormData(); + formData.append('File', file); + return formData; } } From 80e8a2198f0ddb31621029849472b70aa7fe1955 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 10:19:28 +0200 Subject: [PATCH 19/89] Fixed typo Fixed typo --- .../file-uploader/file-uploader.component.ts | 58 +++---------------- .../project/add/manual/manual.component.ts | 2 +- 2 files changed, 10 insertions(+), 50 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 227962ba..6267322c 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -49,16 +49,15 @@ export class FileUploaderComponent { prepareFilesList(files: Array) { // If the user can only select 1 image we want to reset the array - if (!this.acceptMultiple) { + if ( !this.acceptMultiple) { this.files = []; } for (const file of files) { if (this.acceptedTypes.includes(file.type)) { this.generatePreview(file); - this.formatBytes(file) - this.files.push(file) - } - else { + this.formatBytes(file); + this.files.push(file); + } else { const alertConfig: AlertConfig = { type: AlertType.danger, preMessage: 'This file type is not allowed', @@ -75,15 +74,17 @@ export class FileUploaderComponent { // We can use a FileReader to generate a base64 string based on the image const fileReader: FileReader = new FileReader(); // Convert the file to base64 - fileReader.readAsDataURL(file) + fileReader.readAsDataURL(file); fileReader.onload = event => { file.preview = event.target.result as string; - } + }; } private formatBytes(file: uploadFile, decimals = 2) { let bytes: number = file.size; - if (bytes === 0) return '0 Bytes'; + if (bytes === 0) { + return '0 Bytes'; + } const k = 1024; const dm = decimals < 0 ? 0 : decimals; @@ -115,45 +116,4 @@ export class FileUploaderComponent { ); return forkJoin(fileUploads) } - - /** - * Upload the file - */ - private uploadFile(file, cb) { - const formData: FormData = this.buildFormData(file); - // Call the service to upload the file - this.uploadService.uploadFile(formData) - .pipe - (map(event => { - switch (event.type) { - case HttpEventType.UploadProgress: - // divide the (uploaded bytes * 100) by the total bytes to calculate the progess in percentage - file.progress = Math.round(event.loaded * 100 / event.total); - break; - case HttpEventType.Response: - return event; - } - }), - catchError((error: HttpErrorResponse) => { - // If the upload errors, notify the user - return of(`${file.name} upload failed.`); - }) - ) - .subscribe - ((event: any) => { - if (typeof (event) === 'object') { - // File uploaded successfully - console.log(`DATA: ${event.body.data}`); - cb(event.body.data.fileName) - } - } - ); - } - - private buildFormData(file): FormData { - // Build a formdata object and add the fileData - const formData = new FormData(); - formData.append('File', file); - return formData; - } } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 6c467017..763ba8a5 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -130,7 +130,7 @@ export class ManualComponent implements OnInit { // Start uploading files this.fileUploader.uploadFiles().subscribe(uploadedFiles => { if(uploadedFiles[0]) { - newProject.FileId = uploadedFiles[0].id + newProject.fileId = uploadedFiles[0].id this.createProject(newProject) } else { From 649a08eb12a35f158df93a68a1798b9bb838f4d2 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 12:02:33 +0200 Subject: [PATCH 20/89] Added the fileUploader to edit-project --- .../file-uploader/file-uploader.component.ts | 14 +++-- src/app/models/domain/project.ts | 1 + src/app/modules/project/add/add.module.ts | 9 ++-- .../project/add/manual/manual.component.html | 2 +- .../project/add/manual/manual.component.ts | 4 +- .../modules/project/edit/edit.component.html | 12 ++++- .../modules/project/edit/edit.component.ts | 51 ++++++++++++++----- src/app/modules/project/project.module.ts | 8 ++- 8 files changed, 72 insertions(+), 29 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 6267322c..5bea6a70 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -27,14 +27,14 @@ export class FileUploaderComponent { /** * on file drop handler */ - onFileDropped(event) { + private onFileDropped(event) { this.prepareFilesList(event); } /** * handle file from browsing */ - fileBrowseHandler(files) { + private fileBrowseHandler(files) { this.prepareFilesList(files.files); } @@ -42,12 +42,12 @@ export class FileUploaderComponent { * Delete file from files list * @param index (File index) */ - deleteFile(index: number) { + private deleteFile(index: number) { this.files.splice(index, 1); this.fileInput.nativeElement.value = ""; } - prepareFilesList(files: Array) { + private prepareFilesList(files: Array) { // If the user can only select 1 image we want to reset the array if ( !this.acceptMultiple) { this.files = []; @@ -95,7 +95,7 @@ export class FileUploaderComponent { file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } - uploadFiles(): Observable> { + public uploadFiles(): Observable> { const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) .pipe(map(event => { switch (event.type) { @@ -116,4 +116,8 @@ export class FileUploaderComponent { ); return forkJoin(fileUploads) } + + public setFiles(files:Array) { + this.files = files; + } } diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts index 77331a2b..ab2a7bc5 100644 --- a/src/app/models/domain/project.ts +++ b/src/app/models/domain/project.ts @@ -17,6 +17,7 @@ import { User } from './user'; import { Collaborator } from './collaborator'; +import { uploadFile } from './uploadFile'; export interface Project { id: number; diff --git a/src/app/modules/project/add/add.module.ts b/src/app/modules/project/add/add.module.ts index d7e782dd..e6f050da 100644 --- a/src/app/modules/project/add/add.module.ts +++ b/src/app/modules/project/add/add.module.ts @@ -22,19 +22,20 @@ import { AddRoutingModule } from './add-routing.module'; import { ManualComponent } from './manual/manual.component'; import { SourceComponent } from './source/source.component'; import { QuillModule } from 'ngx-quill'; -import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component' +import { FileUploaderComponent } from '../../../components/file-uploader/file-uploader.component'; +import { ProjectModule } from '../project.module'; @NgModule({ declarations: [ SourceComponent, - ManualComponent, - FileUploaderComponent + ManualComponent ], imports: [ CommonModule, AddRoutingModule, ReactiveFormsModule, - QuillModule + QuillModule, + ProjectModule ], }) export class AddModule { } diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index 35b71866..61c7dcb2 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -139,4 +139,4 @@

Collaborators

-
\ No newline at end of file +
diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 763ba8a5..92f36fd0 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -41,8 +41,6 @@ import * as showdown from 'showdown'; styleUrls: ['./manual.component.scss'] }) export class ManualComponent implements OnInit { - @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; - /** * Formgroup for entering project details. */ @@ -69,6 +67,7 @@ export class ManualComponent implements OnInit { */ public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; public acceptMultiple: Boolean = false; + @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; constructor( private router: Router, @@ -132,7 +131,6 @@ export class ManualComponent implements OnInit { if(uploadedFiles[0]) { newProject.fileId = uploadedFiles[0].id this.createProject(newProject) - } else { const alertConfig: AlertConfig = { type: AlertType.danger, diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html index e3b80fa9..736fb6ab 100644 --- a/src/app/modules/project/edit/edit.component.html +++ b/src/app/modules/project/edit/edit.component.html @@ -27,7 +27,6 @@

Edit project

-
@@ -72,6 +71,15 @@

Description*

+
+
+
+

Project icon

+ + +
+
+
@@ -143,4 +151,4 @@

Collaborators

- \ No newline at end of file + diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index e8eca987..4005084d 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -15,7 +15,7 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { finalize } from 'rxjs/operators'; @@ -27,6 +27,7 @@ import { AlertConfig } from 'src/app/models/internal/alert-config'; import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertService } from 'src/app/services/alert.service'; import { QuillUtils } from 'src/app/utils/quill.utils'; +import { FileUploaderComponent } from '../../../components/file-uploader/file-uploader.component'; /** * Component for editting adding a project. @@ -69,6 +70,13 @@ export class EditComponent implements OnInit { */ public projectLoading = true; + /** + * Configuration for file-picker + */ + public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + public acceptMultiple: Boolean = false; + @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; + constructor( private router: Router, private formBuilder: FormBuilder, @@ -130,23 +138,40 @@ export class EditComponent implements OnInit { const edittedProject: ProjectUpdate = this.editProjectForm.value; edittedProject.collaborators = this.collaborators; - this.projectService - .put(this.project.id, edittedProject) - .pipe( - finalize(() => { - this.submitEnabled = false; - }) - ) - .subscribe(() => { + this.fileUploader.uploadFiles().subscribe(uploadedFiles => { + if(uploadedFiles[0]) { + edittedProject.fileId = uploadedFiles[0].id + this.editProject(edittedProject); + } else { const alertConfig: AlertConfig = { - type: AlertType.success, - mainMessage: 'Project was succesfully updated', + type: AlertType.danger, + mainMessage: 'Something went wrong saving your files, please try again', dismissible: true, timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); - this.router.navigate([`/project/overview`]); - }); + } + }); + } + + private editProject(edittedProject) { + this.projectService + .put(this.project.id, edittedProject) + .pipe( + finalize(() => { + this.submitEnabled = false; + }) + ) + .subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + mainMessage: 'Project was succesfully updated', + dismissible: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); + this.router.navigate([`/project/overview`]); + }); } /** diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts index 84f2e1e3..852b3ab8 100644 --- a/src/app/modules/project/project.module.ts +++ b/src/app/modules/project/project.module.ts @@ -30,6 +30,8 @@ import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-hig import { ModalHighlightComponent } from 'src/app/modules/project/modal-highlight/modal-highlight.component'; import { SharedModule } from './../shared/shared.module'; import { QuillModule } from 'ngx-quill'; +import { ManualComponent } from './add/manual/manual.component'; +import { FileUploaderComponent } from '../../components/file-uploader/file-uploader.component'; @NgModule({ declarations: [ @@ -39,7 +41,8 @@ import { QuillModule } from 'ngx-quill'; EmbedButtonComponent, EmbedComponent, ModalHighlightDeleteComponent, - ModalHighlightComponent + ModalHighlightComponent, + FileUploaderComponent ], imports: [ CommonModule, @@ -52,5 +55,8 @@ import { QuillModule } from 'ngx-quill'; BsDropdownModule.forRoot(), QuillModule ], + exports: [ + FileUploaderComponent + ] }) export class ProjectModule { } From 64afd6582019f2c47b6ba58a83b5abfacdb7b310 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 15:52:05 +0200 Subject: [PATCH 21/89] Worked on displaying the current icon on the edit page. --- .../file-uploader.component.html | 2 +- .../file-uploader/file-uploader.component.ts | 23 ++++++++++++++----- src/app/models/domain/project.ts | 1 + .../modules/project/edit/edit.component.html | 2 +- .../modules/project/edit/edit.component.ts | 4 ++-- src/app/modules/project/project.module.ts | 4 +++- 6 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 15214e9f..0faa9ba5 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -8,7 +8,7 @@

Or

- image-preview + image-preview

{{ file?.name }}

diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 5bea6a70..556200ef 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild, ElementRef } from '@angular/core'; +import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core'; import { uploadFile } from 'src/app/models/domain/uploadFile'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { catchError, map } from 'rxjs/operators'; @@ -13,28 +13,37 @@ import { AlertService } from '../../services/alert.service'; templateUrl: './file-uploader.component.html', styleUrls: ['./file-uploader.component.scss'] }) -export class FileUploaderComponent { +export class FileUploaderComponent implements OnInit { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; + @Input() editFiles: Array; @ViewChild('fileDropRef') fileInput: ElementRef; constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } - files: Array = []; + ngOnInit() { + if(this.editFiles) { + this.editFiles.map(editFile => { + // Preview has to be changed when the infrastructure for showing the icons is in place. + this.files.push({...editFile, preview: "https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png"}) + }) + } + } + /** * on file drop handler */ - private onFileDropped(event) { + onFileDropped(event) { this.prepareFilesList(event); } /** * handle file from browsing */ - private fileBrowseHandler(files) { + fileBrowseHandler(files) { this.prepareFilesList(files.files); } @@ -42,7 +51,7 @@ export class FileUploaderComponent { * Delete file from files list * @param index (File index) */ - private deleteFile(index: number) { + deleteFile(index: number) { this.files.splice(index, 1); this.fileInput.nativeElement.value = ""; } @@ -118,6 +127,8 @@ export class FileUploaderComponent { } public setFiles(files:Array) { + console.log('setting files', files) this.files = files; + this.prepareFilesList(files); } } diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts index ab2a7bc5..d58b718e 100644 --- a/src/app/models/domain/project.ts +++ b/src/app/models/domain/project.ts @@ -29,4 +29,5 @@ export interface Project { updated: Date; uri?: string; collaborators?: Collaborator[]; + projectIcon: uploadFile; } diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html index 736fb6ab..ec533231 100644 --- a/src/app/modules/project/edit/edit.component.html +++ b/src/app/modules/project/edit/edit.component.html @@ -75,7 +75,7 @@

Description*

Project icon

- +
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 4005084d..20772643 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -15,7 +15,7 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, OnChanges, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { finalize } from 'rxjs/operators'; @@ -75,7 +75,7 @@ export class EditComponent implements OnInit { */ public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; public acceptMultiple: Boolean = false; - @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; + @ViewChild('fileUploader') fileUploader:FileUploaderComponent; constructor( private router: Router, diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts index 852b3ab8..f145f18f 100644 --- a/src/app/modules/project/project.module.ts +++ b/src/app/modules/project/project.module.ts @@ -32,6 +32,7 @@ import { SharedModule } from './../shared/shared.module'; import { QuillModule } from 'ngx-quill'; import { ManualComponent } from './add/manual/manual.component'; import { FileUploaderComponent } from '../../components/file-uploader/file-uploader.component'; +import { DndDirective } from '../../components/file-uploader/drag-and-drop.directive'; @NgModule({ declarations: [ @@ -42,7 +43,8 @@ import { FileUploaderComponent } from '../../components/file-uploader/file-uploa EmbedComponent, ModalHighlightDeleteComponent, ModalHighlightComponent, - FileUploaderComponent + FileUploaderComponent, + DndDirective ], imports: [ CommonModule, From c45118d1885e548c3f3990ab395c0b80c5ef7a65 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 16:28:09 +0200 Subject: [PATCH 22/89] Changed .map to .forEach (sonarCloud) --- src/app/components/file-uploader/file-uploader.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 556200ef..960c3074 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -26,7 +26,7 @@ export class FileUploaderComponent implements OnInit { ngOnInit() { if(this.editFiles) { - this.editFiles.map(editFile => { + this.editFiles.forEach(editFile => { // Preview has to be changed when the infrastructure for showing the icons is in place. this.files.push({...editFile, preview: "https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png"}) }) From 3578258e8a4666998b30a0a8cf0b95c6711ded32 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 16:56:49 +0200 Subject: [PATCH 23/89] Updated search-result to match project model --- src/app/models/resources/search-result.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts index c793781b..5b98b09c 100644 --- a/src/app/models/resources/search-result.ts +++ b/src/app/models/resources/search-result.ts @@ -16,10 +16,13 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt * */ +import { uploadFile } from '../domain/uploadFile'; + export interface SearchResultResource { id: number; name: string; shortDescription: string; created: Date; updated: Date; + projectIcon: uploadFile; } From 11dd485aa6cb8942e8a16a579d1eafb40459c68b Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 23 Sep 2020 17:15:57 +0200 Subject: [PATCH 24/89] Fixed linter errors --- .../file-uploader/drag-and-drop.directive.ts | 2 +- .../file-uploader/file-uploader.component.ts | 34 ++++++++----------- src/app/models/domain/project.ts | 4 +-- src/app/models/domain/uploadFile.ts | 16 ++++----- src/app/models/resources/project-update.ts | 2 +- src/app/models/resources/search-result.ts | 4 +-- .../project/add/manual/manual.component.ts | 23 ++++--------- .../modules/project/edit/edit.component.ts | 8 ++--- src/app/services/file-uploader.service.ts | 20 +++++------ 9 files changed, 49 insertions(+), 64 deletions(-) diff --git a/src/app/components/file-uploader/drag-and-drop.directive.ts b/src/app/components/file-uploader/drag-and-drop.directive.ts index 54516d9c..13332dc6 100644 --- a/src/app/components/file-uploader/drag-and-drop.directive.ts +++ b/src/app/components/file-uploader/drag-and-drop.directive.ts @@ -33,7 +33,7 @@ export class DndDirective { evt.preventDefault(); evt.stopPropagation(); this.fileOver = false; - let files = evt.dataTransfer.files; + const files = evt.dataTransfer.files; if (files.length > 0) { this.fileDropped.emit(files); } diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 960c3074..db9b929f 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core'; -import { uploadFile } from 'src/app/models/domain/uploadFile'; +import { UploadFile } from 'src/app/models/domain/uploadFile'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { catchError, map } from 'rxjs/operators'; import { HttpErrorResponse, HttpEventType } from '@angular/common/http'; @@ -17,19 +17,19 @@ export class FileUploaderComponent implements OnInit { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; - @Input() editFiles: Array; + @Input() editFiles: Array; @ViewChild('fileDropRef') fileInput: ElementRef; constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } - files: Array = []; + files: Array = []; ngOnInit() { - if(this.editFiles) { + if (this.editFiles) { this.editFiles.forEach(editFile => { // Preview has to be changed when the infrastructure for showing the icons is in place. - this.files.push({...editFile, preview: "https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png"}) - }) + this.files.push({...editFile, preview: 'https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png'}); + }); } } @@ -53,10 +53,10 @@ export class FileUploaderComponent implements OnInit { */ deleteFile(index: number) { this.files.splice(index, 1); - this.fileInput.nativeElement.value = ""; + this.fileInput.nativeElement.value = ''; } - private prepareFilesList(files: Array) { + private prepareFilesList(files: Array) { // If the user can only select 1 image we want to reset the array if ( !this.acceptMultiple) { this.files = []; @@ -79,7 +79,7 @@ export class FileUploaderComponent implements OnInit { } } - private generatePreview(file: uploadFile) { + private generatePreview(file: UploadFile) { // We can use a FileReader to generate a base64 string based on the image const fileReader: FileReader = new FileReader(); // Convert the file to base64 @@ -89,8 +89,8 @@ export class FileUploaderComponent implements OnInit { }; } - private formatBytes(file: uploadFile, decimals = 2) { - let bytes: number = file.size; + private formatBytes(file: UploadFile, decimals = 2) { + const bytes: number = file.size; if (bytes === 0) { return '0 Bytes'; } @@ -104,30 +104,26 @@ export class FileUploaderComponent implements OnInit { file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } - public uploadFiles(): Observable> { + public uploadFiles(): Observable> { const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) .pipe(map(event => { switch (event.type) { case HttpEventType.UploadProgress: // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage - console.log(event.loaded, event.total) this.files.find(value => value.name === file.name).progress = Math.round(event.loaded * 100 / event.total); - console.log('progress', file.progress) break; case HttpEventType.Response: return event.body; }}), - catchError((err: HttpErrorResponse) => { - console.log(err) + catchError(() => { return of('Failed to upload files'); }) ) ); - return forkJoin(fileUploads) + return forkJoin(fileUploads); } - public setFiles(files:Array) { - console.log('setting files', files) + public setFiles(files: Array) { this.files = files; this.prepareFilesList(files); } diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts index d58b718e..6a05cec1 100644 --- a/src/app/models/domain/project.ts +++ b/src/app/models/domain/project.ts @@ -17,7 +17,7 @@ import { User } from './user'; import { Collaborator } from './collaborator'; -import { uploadFile } from './uploadFile'; +import { UploadFile } from './uploadFile'; export interface Project { id: number; @@ -29,5 +29,5 @@ export interface Project { updated: Date; uri?: string; collaborators?: Collaborator[]; - projectIcon: uploadFile; + projectIcon: UploadFile; } diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 3b671e86..7ed48969 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,8 +1,8 @@ -export interface uploadFile extends File { - id: string, - path: string, - preview: string, - progress: number, - inProgress: boolean, - readableSize: string -} \ No newline at end of file +export interface UploadFile extends File { + id: string; + path: string; + preview: string; + progress: number; + inProgress: boolean; + readableSize: string; +} diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts index fb4ce312..6ba234c3 100644 --- a/src/app/models/resources/project-update.ts +++ b/src/app/models/resources/project-update.ts @@ -24,6 +24,6 @@ export interface ProjectUpdate { name: string; shortDescription: string; description: string; - fileId: string, + fileId: string; url: string; } diff --git a/src/app/models/resources/search-result.ts b/src/app/models/resources/search-result.ts index 5b98b09c..ae5b020b 100644 --- a/src/app/models/resources/search-result.ts +++ b/src/app/models/resources/search-result.ts @@ -16,7 +16,7 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt * */ -import { uploadFile } from '../domain/uploadFile'; +import { UploadFile } from '../domain/uploadFile'; export interface SearchResultResource { id: number; @@ -24,5 +24,5 @@ export interface SearchResultResource { shortDescription: string; created: Date; updated: Date; - projectIcon: uploadFile; + projectIcon: UploadFile; } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 92f36fd0..4128476e 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -65,9 +65,9 @@ export class ManualComponent implements OnInit { /** * Configuration for file-picker */ - public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + public acceptedTypes: Array = ['image/png', 'image/jpg', 'image/jpeg']; public acceptMultiple: Boolean = false; - @ViewChild(FileUploaderComponent) fileUploader:FileUploaderComponent; + @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; constructor( private router: Router, @@ -128,9 +128,9 @@ export class ManualComponent implements OnInit { newProject.collaborators = this.collaborators; // Start uploading files this.fileUploader.uploadFiles().subscribe(uploadedFiles => { - if(uploadedFiles[0]) { - newProject.fileId = uploadedFiles[0].id - this.createProject(newProject) + if (uploadedFiles[0]) { + newProject.fileId = uploadedFiles[0].id; + this.createProject(newProject); } else { const alertConfig: AlertConfig = { type: AlertType.danger, @@ -142,7 +142,7 @@ export class ManualComponent implements OnInit { } }); } - private createProject(newProject):void { + private createProject(newProject): void { this.projectService .post(newProject) .pipe(finalize(() => (this.submitEnabled = false))) @@ -199,17 +199,6 @@ export class ManualComponent implements OnInit { this.collaborators.splice(index, 1); } - /** - * Method which triggers when a file is uploaded successfully by - * the app-file-uploader component - */ - private iconFileName: string; - public onFileUpload(fileName: string) { - console.log(`FILE UPLOADED: ${fileName}`) - // If the fileName is truthy - this.iconFileName = fileName ? fileName : undefined; - } - /** * Method to fill a form with the values of a mapped project. diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 20772643..3006fe78 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -73,9 +73,9 @@ export class EditComponent implements OnInit { /** * Configuration for file-picker */ - public acceptedTypes: Array = ["image/png", "image/jpg", "image/jpeg"]; + public acceptedTypes: Array = ['image/png', 'image/jpg', 'image/jpeg']; public acceptMultiple: Boolean = false; - @ViewChild('fileUploader') fileUploader:FileUploaderComponent; + @ViewChild('fileUploader') fileUploader: FileUploaderComponent; constructor( private router: Router, @@ -139,8 +139,8 @@ export class EditComponent implements OnInit { edittedProject.collaborators = this.collaborators; this.fileUploader.uploadFiles().subscribe(uploadedFiles => { - if(uploadedFiles[0]) { - edittedProject.fileId = uploadedFiles[0].id + if (uploadedFiles[0]) { + edittedProject.fileId = uploadedFiles[0].id; this.editProject(edittedProject); } else { const alertConfig: AlertConfig = { diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts index 2e80fc89..835ae1de 100644 --- a/src/app/services/file-uploader.service.ts +++ b/src/app/services/file-uploader.service.ts @@ -3,7 +3,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { catchError } from 'rxjs/operators'; import { Observable, of } from 'rxjs'; import { API_CONFIG } from '../config/api-config'; -import { uploadFile } from '../models/domain/uploadFile'; +import { UploadFile } from '../models/domain/uploadFile'; @Injectable({ providedIn: 'root' @@ -14,7 +14,14 @@ export class FileUploaderService { constructor( private http: HttpClient) { } - public uploadFile(file: uploadFile): Observable { + private static buildFormData(file): FormData { + // Build a form data object and add the fileData + const formData = new FormData(); + formData.append('File', file); + return formData; + } + + public uploadFile(file: UploadFile): Observable { const formData: FormData = FileUploaderService.buildFormData(file); return this.http.post(this.url, formData, { reportProgress: true, @@ -25,13 +32,6 @@ export class FileUploaderService { // If the upload errors, notify the user return of(`${file.name} upload failed.`); }) - ) - } - - private static buildFormData(file): FormData { - // Build a formdata object and add the fileData - const formData = new FormData(); - formData.append('File', file); - return formData; + ); } } From 7a98d4bb6d408004add711fcb3763adffc30b6be Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 24 Sep 2020 14:42:50 +0200 Subject: [PATCH 25/89] Fixed issue with the fileUploader component not rendering on the edit page. --- .../file-uploader/file-uploader.component.ts | 78 +++++++++++-------- .../project/add/manual/manual.component.ts | 66 ++++++++-------- .../modules/project/edit/edit.component.html | 18 ++--- .../modules/project/edit/edit.component.ts | 42 +++++----- src/app/services/file-uploader.service.ts | 14 +--- 5 files changed, 115 insertions(+), 103 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index db9b929f..29c35c64 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,8 +1,8 @@ import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core'; import { UploadFile } from 'src/app/models/domain/uploadFile'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; -import { catchError, map } from 'rxjs/operators'; -import { HttpErrorResponse, HttpEventType } from '@angular/common/http'; +import { map } from 'rxjs/operators'; +import { HttpEventType } from '@angular/common/http'; import { forkJoin, Observable, of } from 'rxjs'; import { AlertConfig } from '../../models/internal/alert-config'; import { AlertType } from '../../models/internal/alert-type'; @@ -13,25 +13,16 @@ import { AlertService } from '../../services/alert.service'; templateUrl: './file-uploader.component.html', styleUrls: ['./file-uploader.component.scss'] }) -export class FileUploaderComponent implements OnInit { +export class FileUploaderComponent { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; - @Input() editFiles: Array; @ViewChild('fileDropRef') fileInput: ElementRef; constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } - files: Array = []; - - ngOnInit() { - if (this.editFiles) { - this.editFiles.forEach(editFile => { - // Preview has to be changed when the infrastructure for showing the icons is in place. - this.files.push({...editFile, preview: 'https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png'}); - }); - } - } + + files: Array = new Array(); /** * on file drop handler @@ -44,7 +35,9 @@ export class FileUploaderComponent implements OnInit { * handle file from browsing */ fileBrowseHandler(files) { - this.prepareFilesList(files.files); + if (files.files !== this.files) { + this.prepareFilesList(files.files); + } } /** @@ -75,6 +68,7 @@ export class FileUploaderComponent implements OnInit { timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); + this.deleteFile(this.files.indexOf(file)); } } } @@ -105,26 +99,42 @@ export class FileUploaderComponent implements OnInit { } public uploadFiles(): Observable> { - const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) - .pipe(map(event => { - switch (event.type) { - case HttpEventType.UploadProgress: - // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage - this.files.find(value => value.name === file.name).progress = Math.round(event.loaded * 100 / event.total); - break; - case HttpEventType.Response: - return event.body; - }}), - catchError(() => { - return of('Failed to upload files'); - }) - ) - ); - return forkJoin(fileUploads); + if (this.fileInput.nativeElement.value !== '') { + const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) + .pipe( + map(event => { + switch (event.type) { + case HttpEventType.UploadProgress: + // divide the (uploaded bytes * 100) by the total bytes to calculate the progress in percentage + this.files.find(value => value.name === file.name).progress = Math.round(event.loaded * 100 / event.total); + break; + case HttpEventType.Response: + return event.body; + default: + return; + }}) + ) + ); + return forkJoin(fileUploads); + } + // If no files were updated return original list + + // If there are any files left in the list + if (this.files.length) { + // Return the original list + return of(this.files); + } else { + // If there are no files in the list return undefined + return of(undefined); + } } - public setFiles(files: Array) { - this.files = files; - this.prepareFilesList(files); + public setFiles(editFiles: Array) { + editFiles.forEach(editFile => { + // Preview has to be changed when the infrastructure for showing the icons is in place. + this.files.push({ + ...editFile, + preview: 'https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png'}); + }); } } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 4128476e..92750b1c 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -38,7 +38,7 @@ import * as showdown from 'showdown'; @Component({ selector: 'app-manual', templateUrl: './manual.component.html', - styleUrls: ['./manual.component.scss'] + styleUrls: [ './manual.component.scss' ] }) export class ManualComponent implements OnInit { /** @@ -65,26 +65,26 @@ export class ManualComponent implements OnInit { /** * Configuration for file-picker */ - public acceptedTypes: Array = ['image/png', 'image/jpg', 'image/jpeg']; + public acceptedTypes: Array = [ 'image/png', 'image/jpg', 'image/jpeg' ]; public acceptMultiple: Boolean = false; @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; constructor( - private router: Router, - private formBuilder: FormBuilder, - private projectService: ProjectService, - private wizardService: WizardService, - private alertService: AlertService) { + private router: Router, + private formBuilder: FormBuilder, + private projectService: ProjectService, + private wizardService: WizardService, + private alertService: AlertService) { this.newProjectForm = this.formBuilder.group({ - name: [null, Validators.required], - uri: [null, Validators.required], - shortDescription: [null, Validators.required], - description: [null], + name: [ null, Validators.required ], + uri: [ null, Validators.required ], + shortDescription: [ null, Validators.required ], + description: [ null ], }); this.newCollaboratorForm = this.formBuilder.group({ - fullName: [null, Validators.required], - role: [null, Validators.required], + fullName: [ null, Validators.required ], + role: [ null, Validators.required ], }); } @@ -96,9 +96,9 @@ export class ManualComponent implements OnInit { if (project.description != null && project.description.length > 0) { const converter = new showdown.Converter( - { - literalMidWordUnderscores: true - } + { + literalMidWordUnderscores: true + } ); project.description = converter.makeHtml(project.description); } @@ -127,21 +127,25 @@ export class ManualComponent implements OnInit { const newProject: ProjectAdd = this.newProjectForm.value; newProject.collaborators = this.collaborators; // Start uploading files - this.fileUploader.uploadFiles().subscribe(uploadedFiles => { - if (uploadedFiles[0]) { - newProject.fileId = uploadedFiles[0].id; - this.createProject(newProject); - } else { - const alertConfig: AlertConfig = { - type: AlertType.danger, - mainMessage: 'Something went wrong saving your files, please try again', - dismissible: true, - timeout: this.alertService.defaultTimeout - }; - this.alertService.pushAlert(alertConfig); - } - }); + this.fileUploader.uploadFiles() + .subscribe(uploadedFiles => { + if (uploadedFiles) { + if (uploadedFiles[0]) { + // Project icon was set and uploaded + newProject.fileId = uploadedFiles[0].id; + this.createProject(newProject); + } + // Project icon was set but not uploaded successfully, the component will show the error + } else { + // There was no project icon + this.createProject(newProject); + } + + }); + + } + private createProject(newProject): void { this.projectService .post(newProject) @@ -154,7 +158,7 @@ export class ManualComponent implements OnInit { timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); - this.router.navigate([`/project/overview`]); + this.router.navigate([ `/project/overview` ]); }); } diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html index 7a359f34..dd27dd5a 100644 --- a/src/app/modules/project/edit/edit.component.html +++ b/src/app/modules/project/edit/edit.component.html @@ -21,11 +21,11 @@

Edit project

- +

Project is being loaded

 - - +
+
@@ -76,7 +76,7 @@

Description*

Project icon

- +
@@ -141,15 +141,15 @@

Collaborators

- - +
+

No project could be found with id: {{invalidId}}

- - +
+
-
\ No newline at end of file +
diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 3006fe78..a63aae53 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -15,10 +15,10 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { AfterViewInit, Component, OnChanges, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; -import { finalize } from 'rxjs/operators'; +import { catchError, finalize } from 'rxjs/operators'; import { CollaboratorAdd } from 'src/app/models/resources/collaborator-add'; import { ProjectService } from 'src/app/services/project.service'; import { Project } from 'src/app/models/domain/project'; @@ -30,14 +30,14 @@ import { QuillUtils } from 'src/app/utils/quill.utils'; import { FileUploaderComponent } from '../../../components/file-uploader/file-uploader.component'; /** - * Component for editting adding a project. + * Component for editing adding a project. */ @Component({ selector: 'app-edit', templateUrl: './edit.component.html', styleUrls: ['./edit.component.scss'], }) -export class EditComponent implements OnInit { +export class EditComponent implements OnInit { /** * Formgroup for entering project details. */ @@ -75,7 +75,7 @@ export class EditComponent implements OnInit { */ public acceptedTypes: Array = ['image/png', 'image/jpg', 'image/jpeg']; public acceptMultiple: Boolean = false; - @ViewChild('fileUploader') fileUploader: FileUploaderComponent; + @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; constructor( private router: Router, @@ -116,6 +116,7 @@ export class EditComponent implements OnInit { (result) => { this.project = result; this.collaborators = this.project.collaborators; + this.fileUploader.setFiles([this.project.projectIcon]); } ); } @@ -138,20 +139,23 @@ export class EditComponent implements OnInit { const edittedProject: ProjectUpdate = this.editProjectForm.value; edittedProject.collaborators = this.collaborators; - this.fileUploader.uploadFiles().subscribe(uploadedFiles => { - if (uploadedFiles[0]) { - edittedProject.fileId = uploadedFiles[0].id; - this.editProject(edittedProject); - } else { - const alertConfig: AlertConfig = { - type: AlertType.danger, - mainMessage: 'Something went wrong saving your files, please try again', - dismissible: true, - timeout: this.alertService.defaultTimeout - }; - this.alertService.pushAlert(alertConfig); - } - }); + this.fileUploader.uploadFiles() + .subscribe(uploadedFiles => { + if (uploadedFiles) { + if (uploadedFiles[0]) { + // Project icon was set and uploaded + edittedProject.fileId = uploadedFiles[0].id; + this.editProject(edittedProject); + } + // Project icon was set but not uploaded successfully, the component will show the error + } else { + // There was no project icon + if (this.project.projectIcon) { + // TODO: Remove the icon from the project if it is deleted + } + this.editProject(edittedProject); + } + }); } private editProject(edittedProject) { diff --git a/src/app/services/file-uploader.service.ts b/src/app/services/file-uploader.service.ts index 835ae1de..e462395d 100644 --- a/src/app/services/file-uploader.service.ts +++ b/src/app/services/file-uploader.service.ts @@ -1,9 +1,9 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; -import { catchError } from 'rxjs/operators'; -import { Observable, of } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; import { API_CONFIG } from '../config/api-config'; import { UploadFile } from '../models/domain/uploadFile'; +import { Error } from 'tslint/lib/error'; @Injectable({ providedIn: 'root' @@ -26,12 +26,6 @@ export class FileUploaderService { return this.http.post(this.url, formData, { reportProgress: true, observe: 'events' - }).pipe - ( - catchError((error: HttpErrorResponse) => { - // If the upload errors, notify the user - return of(`${file.name} upload failed.`); - }) - ); + }); } } From 32573b82be30c7703c18d8be1cbc9618879d935c Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 24 Sep 2020 14:58:43 +0200 Subject: [PATCH 26/89] Changed fileId to be 0 when there is no image --- src/app/models/domain/uploadFile.ts | 2 +- src/app/models/resources/project-add.ts | 2 +- src/app/models/resources/project-update.ts | 2 +- src/app/modules/project/add/manual/manual.component.ts | 1 + src/app/modules/project/edit/edit.component.ts | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 7ed48969..6fae1f7f 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,5 +1,5 @@ export interface UploadFile extends File { - id: string; + id: number; path: string; preview: string; progress: number; diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts index edd3ef96..2c2b42cf 100644 --- a/src/app/models/resources/project-add.ts +++ b/src/app/models/resources/project-add.ts @@ -23,5 +23,5 @@ export interface ProjectAdd { shortDescription: string; description?: string; url: string; - fileId: string; + fileId: number; } diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts index 6ba234c3..2f161946 100644 --- a/src/app/models/resources/project-update.ts +++ b/src/app/models/resources/project-update.ts @@ -24,6 +24,6 @@ export interface ProjectUpdate { name: string; shortDescription: string; description: string; - fileId: string; + fileId: number; url: string; } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 92750b1c..986ca0bd 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -138,6 +138,7 @@ export class ManualComponent implements OnInit { // Project icon was set but not uploaded successfully, the component will show the error } else { // There was no project icon + newProject.fileId = 0; this.createProject(newProject); } diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index a63aae53..09b2123c 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -151,7 +151,7 @@ export class EditComponent implements OnInit { } else { // There was no project icon if (this.project.projectIcon) { - // TODO: Remove the icon from the project if it is deleted + edittedProject.fileId = 0; } this.editProject(edittedProject); } From 808c623d82724e05c526113e07c5fcc12ec49916 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 5 Oct 2020 10:28:46 +0200 Subject: [PATCH 27/89] Added a check on the maximum file size. --- .../file-uploader/file-uploader.component.ts | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 29c35c64..316be9d8 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -19,6 +19,8 @@ export class FileUploaderComponent { @Input() acceptedTypes: Array; @ViewChild('fileDropRef') fileInput: ElementRef; + maxFileSize:number = 5242880; + constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } @@ -55,21 +57,34 @@ export class FileUploaderComponent { this.files = []; } for (const file of files) { - if (this.acceptedTypes.includes(file.type)) { - this.generatePreview(file); - this.formatBytes(file); - this.files.push(file); + if (file.size < this.maxFileSize) { + if (this.acceptedTypes.includes(file.type)) { + this.generatePreview(file); + this.formatBytes(file); + this.files.push(file); + } else { + const alertConfig: AlertConfig = { + type: AlertType.danger, + preMessage: 'This file type is not allowed', + mainMessage: `File ${file.name} is of type that is not allowed please pick one of these ${this.acceptedTypes.join(', ')}`, + dismissible: true, + timeout: this.alertService.defaultTimeout + }; + this.alertService.pushAlert(alertConfig); + this.deleteFile(this.files.indexOf(file)); + } } else { const alertConfig: AlertConfig = { type: AlertType.danger, - preMessage: 'This file type is not allowed', - mainMessage: `File ${file.name} is of type that is not allowed please pick one of these ${this.acceptedTypes.join(', ')}`, + preMessage: 'This file is too big', + mainMessage: `File ${file.name} is too big, the max size is 5mb`, dismissible: true, timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); this.deleteFile(this.files.indexOf(file)); } + } } @@ -99,7 +114,9 @@ export class FileUploaderComponent { } public uploadFiles(): Observable> { + // Check if any files were uploaded if (this.fileInput.nativeElement.value !== '') { + // Map all the files to an observable const fileUploads = this.files.map(file => this.uploadService.uploadFile(file) .pipe( map(event => { From 5f6cfb1f89715f4eb13ea12fccdf27a930814004 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 5 Oct 2020 10:30:58 +0200 Subject: [PATCH 28/89] Removed type from maxFileSize (linter wanted this) --- src/app/components/file-uploader/file-uploader.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 316be9d8..d079ce1e 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -19,7 +19,7 @@ export class FileUploaderComponent { @Input() acceptedTypes: Array; @ViewChild('fileDropRef') fileInput: ElementRef; - maxFileSize:number = 5242880; + maxFileSize = 5242880; constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } From b0e9ceced839a008bec66931b3d5267739d35db3 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 5 Oct 2020 10:39:35 +0200 Subject: [PATCH 29/89] Replaced the online placeholder with a local one from unDraw --- .../file-uploader/file-uploader.component.ts | 4 ++-- src/assets/images/project-icon-placeholder.png | Bin 0 -> 18804 bytes 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 src/assets/images/project-icon-placeholder.png diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index d079ce1e..9d77a03e 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -148,10 +148,10 @@ export class FileUploaderComponent { public setFiles(editFiles: Array) { editFiles.forEach(editFile => { - // Preview has to be changed when the infrastructure for showing the icons is in place. + // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. this.files.push({ ...editFile, - preview: 'https://www.laurenillumination.com/wp-content/uploads/woocommerce-placeholder.png'}); + preview: '/assets/images/project-icon-placeholder.png'}); }); } } diff --git a/src/assets/images/project-icon-placeholder.png b/src/assets/images/project-icon-placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..dc5caa7f9034f0f81af094e13eea5fafcfcae25c GIT binary patch literal 18804 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 J;Lanz{{?o45TXD8 literal 0 HcmV?d00001 From c13fef1c7368a5f2a9a211177f1e01031d35aff8 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Mon, 5 Oct 2020 10:50:47 +0200 Subject: [PATCH 30/89] Updated scss variables --- .../components/file-uploader/file-uploader.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index ab4eb39f..fb1e3556 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -24,7 +24,7 @@ width: 183px; height: 44px; border-radius: 21.5px; - background-color: $accent-color-primary; + background-color: $accent-color-red-primary; padding: 8px 16px; } @@ -35,7 +35,7 @@ } .files-list { - background-color: $light-mode-component-color; + background-color: $light-mode-grey-primary; transition: 0.5s all; padding: 15px; border-radius: 6px; @@ -83,7 +83,7 @@ } .progress-bar { - background-color: $accent-color-primary; + background-color: $accent-color-red-primary; transition: 0.5s all; border-radius: 25px; } From a553b0146efe3058d21a7558794cfd39f7725d26 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 6 Oct 2020 10:04:38 +0200 Subject: [PATCH 31/89] Changed relative imports to be absolute --- .../components/file-uploader/file-uploader.component.ts | 9 ++++++--- src/app/modules/project/edit/edit.component.ts | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 9d77a03e..5a6776e5 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -4,9 +4,12 @@ import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { map } from 'rxjs/operators'; import { HttpEventType } from '@angular/common/http'; import { forkJoin, Observable, of } from 'rxjs'; -import { AlertConfig } from '../../models/internal/alert-config'; -import { AlertType } from '../../models/internal/alert-type'; -import { AlertService } from '../../services/alert.service'; +import { map } from 'rxjs/operators'; +import { AlertConfig } from 'src/app/models/internal/alert-config'; +import { AlertType } from 'src/app/models/internal/alert-type'; +import { AlertService } from 'src/app/services/alert.service'; +import { FileUploaderService } from 'src/app/services/file-uploader.service'; +import { UploadFile } from 'src/app/models/domain/uploadFile'; @Component({ selector: 'app-file-uploader', diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 0d36f653..3dba2fe4 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -27,7 +27,7 @@ import { AlertConfig } from 'src/app/models/internal/alert-config'; import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertService } from 'src/app/services/alert.service'; import { QuillUtils } from 'src/app/utils/quill.utils'; -import { FileUploaderComponent } from '../../../components/file-uploader/file-uploader.component'; +import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component'; /** * Component for editing adding a project. From 324fcaa349808ddcde7ad67aa98ef6777a4249c4 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 6 Oct 2020 10:17:06 +0200 Subject: [PATCH 32/89] Added component summary --- src/app/components/file-uploader/file-uploader.component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 5a6776e5..fcbfc7d2 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -11,6 +11,9 @@ import { AlertService } from 'src/app/services/alert.service'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { UploadFile } from 'src/app/models/domain/uploadFile'; +/** + * Component that will function as a form to upload files of any type + */ @Component({ selector: 'app-file-uploader', templateUrl: './file-uploader.component.html', From ea4d7865d250a8017685b9988f5b97dcbc97b520 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 6 Oct 2020 10:22:34 +0200 Subject: [PATCH 33/89] Referenced issue number in todo --- src/app/components/file-uploader/file-uploader.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index fcbfc7d2..e0a61561 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -155,6 +155,7 @@ export class FileUploaderComponent { public setFiles(editFiles: Array) { editFiles.forEach(editFile => { // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. + // See https://github.com/DigitalExcellence/dex-frontend/issues/311 this.files.push({ ...editFile, preview: '/assets/images/project-icon-placeholder.png'}); From d5e0f5dc4a9fbeccdb1b3571caea33d6b06574fa Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 6 Oct 2020 10:42:07 +0200 Subject: [PATCH 34/89] Changed properties to be nullable --- src/app/models/domain/project.ts | 2 +- src/app/models/resources/project-add.ts | 2 +- src/app/models/resources/project-update.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/models/domain/project.ts b/src/app/models/domain/project.ts index 6a05cec1..fbf59da1 100644 --- a/src/app/models/domain/project.ts +++ b/src/app/models/domain/project.ts @@ -29,5 +29,5 @@ export interface Project { updated: Date; uri?: string; collaborators?: Collaborator[]; - projectIcon: UploadFile; + projectIcon?: UploadFile; } diff --git a/src/app/models/resources/project-add.ts b/src/app/models/resources/project-add.ts index 2c2b42cf..e025347b 100644 --- a/src/app/models/resources/project-add.ts +++ b/src/app/models/resources/project-add.ts @@ -23,5 +23,5 @@ export interface ProjectAdd { shortDescription: string; description?: string; url: string; - fileId: number; + fileId?: number; } diff --git a/src/app/models/resources/project-update.ts b/src/app/models/resources/project-update.ts index 2f161946..4fd6ff78 100644 --- a/src/app/models/resources/project-update.ts +++ b/src/app/models/resources/project-update.ts @@ -24,6 +24,6 @@ export interface ProjectUpdate { name: string; shortDescription: string; description: string; - fileId: number; url: string; + fileId?: number; } From a92b79602d430ef9bcbc290989b97f909b4c161e Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 6 Oct 2020 10:46:00 +0200 Subject: [PATCH 35/89] Removed default timeout properties --- .../file-uploader/file-uploader.component.ts | 5 ++--- .../modules/project/add/manual/manual.component.ts | 12 ++++-------- src/app/modules/project/edit/edit.component.ts | 9 +++------ 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index e0a61561..5acad189 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -83,9 +83,8 @@ export class FileUploaderComponent { const alertConfig: AlertConfig = { type: AlertType.danger, preMessage: 'This file is too big', - mainMessage: `File ${file.name} is too big, the max size is 5mb`, - dismissible: true, - timeout: this.alertService.defaultTimeout + mainMessage: `File ${file.name} is too big, the max size is 2mb`, + dismissible: true }; this.alertService.pushAlert(alertConfig); this.deleteFile(this.files.indexOf(file)); diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index e0aee624..81769407 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -123,8 +123,7 @@ export class ManualComponent implements OnInit { type: AlertType.danger, preMessage: 'The add project form is invalid', mainMessage: 'The project could not be saved, please fill all required fields', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; @@ -161,8 +160,7 @@ export class ManualComponent implements OnInit { const alertConfig: AlertConfig = { type: AlertType.success, mainMessage: 'Project was succesfully saved', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); this.router.navigate([ `/project/overview` ]); @@ -179,8 +177,7 @@ export class ManualComponent implements OnInit { type: AlertType.danger, preMessage: 'The add collaborator form is invalid', mainMessage: 'Collaborator could not be added', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; @@ -201,8 +198,7 @@ export class ManualComponent implements OnInit { const alertConfig: AlertConfig = { type: AlertType.danger, mainMessage: 'Collaborator could not be removed', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 3dba2fe4..56792722 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -129,8 +129,7 @@ export class EditComponent implements OnInit { type: AlertType.danger, preMessage: 'The edit project form is invalid', mainMessage: 'The project could not be updated, please fill all required fields', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; @@ -199,8 +198,7 @@ export class EditComponent implements OnInit { type: AlertType.danger, preMessage: 'The add collaborator form is invalid', mainMessage: 'Collaborator could not be added', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; @@ -221,8 +219,7 @@ export class EditComponent implements OnInit { const alertConfig: AlertConfig = { type: AlertType.danger, mainMessage: 'Collaborator could not be removed', - dismissible: true, - timeout: this.alertService.defaultTimeout + dismissible: true }; this.alertService.pushAlert(alertConfig); return; From efa84c98954f3d9f7c090e6f503cb8a4b4186cc5 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 7 Oct 2020 14:31:02 +0200 Subject: [PATCH 36/89] Updated dnd-box design --- .../file-uploader.component.html | 17 +++---- .../file-uploader.component.scss | 47 ++++++++++++++----- src/assets/images/file-dnd.svg | 3 ++ 3 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 src/assets/images/file-dnd.svg diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index 0faa9ba5..adac18f4 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -1,13 +1,18 @@ -
+
-

Drag and drop a file here

-

Or

- + file-dnd-icon +
+ image-preview

{{ file?.name }} @@ -15,10 +20,6 @@

{{ file?.readableSize }}

- -
- X -
{{file.progress}}% diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index fb1e3556..ebae0583 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -8,6 +8,11 @@ border: dashed 1px #979797; position: relative; margin: 0 auto 20px auto; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + color: $light-mode-grey-primary; input { opacity: 0; @@ -20,24 +25,29 @@ } label { - color: white; - width: 183px; - height: 44px; - border-radius: 21.5px; - background-color: $accent-color-red-primary; - padding: 8px 16px; + max-width: 80%; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + display: inline-block; + overflow: hidden; + font-size: 1.2rem; } - h3 { - font-size: 18px; - color: #38424c; + img { + width: 100%; + height: 80px; + margin-bottom: 20px; + } + + strong { + color: $accent-color-red-primary; } } .files-list { - background-color: $light-mode-grey-primary; + background-color: $light-mode-grey-quaternary; transition: 0.5s all; - padding: 15px; border-radius: 6px; div.single-file:not(:last-child) { @@ -46,7 +56,7 @@ } div.single-file { - padding: 10px; + padding: 0 10px; div.file-info { display: flex; @@ -64,7 +74,7 @@ .file-name { vertical-align: center; margin-left: 5%; - font-size: 2rem + font-size: 1rem } .file-size { @@ -76,6 +86,17 @@ font-size: 2rem; margin: 0 20px 0 auto; } + + button { + background: $accent-color-red-primary; + border-radius: 50px; + width: 50px; + height: 50px; + border: none; + font-size: 25px; + font-weight: 800; + margin-right: 1em; + } } .file-progress { diff --git a/src/assets/images/file-dnd.svg b/src/assets/images/file-dnd.svg new file mode 100644 index 00000000..6e74e455 --- /dev/null +++ b/src/assets/images/file-dnd.svg @@ -0,0 +1,3 @@ + + + From 697e209505bd7d45de2c004ade719ab0dcccc9eb Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 7 Oct 2020 14:32:04 +0200 Subject: [PATCH 37/89] Changed DragAndDropDirective to DndDirective --- .../{drag-and-drop.directive.ts => DndDirective.ts} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/app/components/file-uploader/{drag-and-drop.directive.ts => DndDirective.ts} (96%) diff --git a/src/app/components/file-uploader/drag-and-drop.directive.ts b/src/app/components/file-uploader/DndDirective.ts similarity index 96% rename from src/app/components/file-uploader/drag-and-drop.directive.ts rename to src/app/components/file-uploader/DndDirective.ts index 13332dc6..88f9ade8 100644 --- a/src/app/components/file-uploader/drag-and-drop.directive.ts +++ b/src/app/components/file-uploader/DndDirective.ts @@ -8,7 +8,7 @@ import { } from '@angular/core'; @Directive({ - selector: '[app-drag-and-drop]' + selector: '[app-DndDirective]' }) export class DndDirective { @HostBinding('class.fileover') fileOver: boolean; From 46300171c7c2cbf0afc22cc2293efb2ed050f75b Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 7 Oct 2020 14:32:28 +0200 Subject: [PATCH 38/89] Removed whitespace --- src/app/modules/project/edit/edit.component.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html index dd27dd5a..651c2fa2 100644 --- a/src/app/modules/project/edit/edit.component.html +++ b/src/app/modules/project/edit/edit.component.html @@ -146,10 +146,5 @@

Collaborators

No project could be found with id: {{invalidId}}

- - - - -
From 883d93eb6d6e7cac84b17fb082a275ee8ef5dbef Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 7 Oct 2020 14:33:55 +0200 Subject: [PATCH 39/89] Fixed variable & method order and removed relative paths --- .../file-uploader/file-uploader.component.ts | 4 +- .../project/add/manual/manual.component.html | 1 - .../modules/project/edit/edit.component.ts | 56 ++++++++++--------- src/app/modules/project/project.module.ts | 4 +- 4 files changed, 32 insertions(+), 33 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 5acad189..4d3a73dc 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,7 +1,4 @@ import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core'; -import { UploadFile } from 'src/app/models/domain/uploadFile'; -import { FileUploaderService } from 'src/app/services/file-uploader.service'; -import { map } from 'rxjs/operators'; import { HttpEventType } from '@angular/common/http'; import { forkJoin, Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -21,6 +18,7 @@ import { UploadFile } from 'src/app/models/domain/uploadFile'; }) export class FileUploaderComponent { + @ViewChild('fileDropRef') fileInput: ElementRef; @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; @ViewChild('fileDropRef') fileInput: ElementRef; diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index d9e6e70e..675528a2 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -135,6 +135,5 @@

Collaborators

project
- diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 56792722..004cd249 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -38,6 +38,13 @@ import { FileUploaderComponent } from 'src/app/components/file-uploader/file-upl styleUrls: ['./edit.component.scss'], }) export class EditComponent implements OnInit { + /** + * Configuration for file-picker + */ + @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; + public acceptedTypes = ['image/png', 'image/jpg', 'image/jpeg']; + public acceptMultiple = false; + /** * Formgroup for entering project details. */ @@ -70,13 +77,6 @@ export class EditComponent implements OnInit { */ public projectLoading = true; - /** - * Configuration for file-picker - */ - public acceptedTypes: Array = ['image/png', 'image/jpg', 'image/jpeg']; - public acceptMultiple: Boolean = false; - @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; - constructor( private router: Router, private formBuilder: FormBuilder, @@ -157,26 +157,6 @@ export class EditComponent implements OnInit { }); } - private editProject(edittedProject) { - this.projectService - .put(this.project.id, edittedProject) - .pipe( - finalize(() => { - this.submitEnabled = false; - }) - ) - .subscribe(() => { - const alertConfig: AlertConfig = { - type: AlertType.success, - mainMessage: 'Project was succesfully updated', - dismissible: true, - timeout: this.alertService.defaultTimeout - }; - this.alertService.pushAlert(alertConfig); - this.router.navigate([`project/details/${this.project.id}`]); - }); - } - /** * Method which triggers when the cancel button is pressed. * Redirects the user back to the project or the overview. @@ -226,4 +206,26 @@ export class EditComponent implements OnInit { } this.collaborators.splice(index, 1); } + + /** + * Method which will send the requests to the API to edit the project + */ + private editProject(edittedProject) { + this.projectService + .put(this.project.id, edittedProject) + .pipe( + finalize(() => { + this.submitEnabled = false; + }) + ) + .subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + mainMessage: 'Project was succesfully updated', + dismissible: true + }; + this.alertService.pushAlert(alertConfig); + this.router.navigate([`project/details/${this.project.id}`]); + }); + } } diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts index 081234bd..92dd4511 100644 --- a/src/app/modules/project/project.module.ts +++ b/src/app/modules/project/project.module.ts @@ -28,11 +28,11 @@ import { PaginationModule } from 'ngx-bootstrap/pagination'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component'; import { ModalHighlightComponent } from 'src/app/modules/project/modal-highlight/modal-highlight.component'; -import { SharedModule } from './../shared/shared.module'; +import { SharedModule } from 'src/app/modules/shared/shared.module'; import { QuillModule } from 'ngx-quill'; import { ManualComponent } from './add/manual/manual.component'; import { FileUploaderComponent } from '../../components/file-uploader/file-uploader.component'; -import { DndDirective } from '../../components/file-uploader/drag-and-drop.directive'; +import { DndDirective } from 'src/app/components/file-uploader/DndDirective'; import { Meta } from '@angular/platform-browser'; @NgModule({ From cc247b166f5ed73fe78dae648bd1aadf5dadafff Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 7 Oct 2020 14:35:15 +0200 Subject: [PATCH 40/89] Fixed variable accessors and order --- .../file-uploader/file-uploader.component.ts | 3 +- .../project/add/manual/manual.component.ts | 37 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 4d3a73dc..6857016f 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -21,9 +21,8 @@ export class FileUploaderComponent { @ViewChild('fileDropRef') fileInput: ElementRef; @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; - @ViewChild('fileDropRef') fileInput: ElementRef; - maxFileSize = 5242880; + private maxFileSize = 2097152; constructor(private uploadService: FileUploaderService, private alertService: AlertService) { } diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 81769407..6de1ca5d 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -66,8 +66,8 @@ export class ManualComponent implements OnInit { /** * Configuration for file-picker */ - public acceptedTypes: Array = [ 'image/png', 'image/jpg', 'image/jpeg' ]; - public acceptMultiple: Boolean = false; + public acceptedTypes = [ 'image/png', 'image/jpg', 'image/jpeg' ]; + public acceptMultiple = false; @ViewChild(FileUploaderComponent) fileUploader: FileUploaderComponent; constructor( @@ -146,24 +146,6 @@ export class ManualComponent implements OnInit { newProject.fileId = 0; this.createProject(newProject); } - - }); - - - } - - private createProject(newProject): void { - this.projectService - .post(newProject) - .pipe(finalize(() => (this.submitEnabled = false))) - .subscribe(() => { - const alertConfig: AlertConfig = { - type: AlertType.success, - mainMessage: 'Project was succesfully saved', - dismissible: true - }; - this.alertService.pushAlert(alertConfig); - this.router.navigate([ `/project/overview` ]); }); } @@ -207,6 +189,21 @@ export class ManualComponent implements OnInit { } + private createProject(newProject): void { + this.projectService + .post(newProject) + .pipe(finalize(() => (this.submitEnabled = false))) + .subscribe(() => { + const alertConfig: AlertConfig = { + type: AlertType.success, + mainMessage: 'Project was succesfully saved', + dismissible: true + }; + this.alertService.pushAlert(alertConfig); + this.router.navigate([ `/project/overview` ]); + }); + } + /** * Method to fill a form with the values of a mapped project. */ From 3ab39868f2734f2e46bf01f6d6b6fbbefd236527 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 8 Oct 2020 10:24:45 +0200 Subject: [PATCH 41/89] Fixed file-uploader styling. --- .../file-uploader/file-uploader.component.scss | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index ebae0583..c8223a6f 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -8,11 +8,7 @@ border: dashed 1px #979797; position: relative; margin: 0 auto 20px auto; - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - color: $light-mode-grey-primary; + input { opacity: 0; @@ -28,7 +24,6 @@ max-width: 80%; text-overflow: ellipsis; white-space: nowrap; - cursor: pointer; display: inline-block; overflow: hidden; font-size: 1.2rem; @@ -60,7 +55,6 @@ div.file-info { display: flex; - align-content: space-between; align-items: center; margin-bottom: 10px; @@ -72,14 +66,13 @@ } .file-name { - vertical-align: center; - margin-left: 5%; - font-size: 1rem + font-size: 1rem; + margin: 0 auto 0 5%; } .file-size { - margin: 1rem 0 0 5px; color: gray; + margin: 0 auto 0 auto; } .delete { From c618bcd94f4712b177b86a7af9e9c9c1129748c2 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 8 Oct 2020 10:25:06 +0200 Subject: [PATCH 42/89] Removed relative path from module --- src/app/modules/project/project.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/project/project.module.ts b/src/app/modules/project/project.module.ts index 92dd4511..5525c5ab 100644 --- a/src/app/modules/project/project.module.ts +++ b/src/app/modules/project/project.module.ts @@ -31,7 +31,7 @@ import { ModalHighlightComponent } from 'src/app/modules/project/modal-highlight import { SharedModule } from 'src/app/modules/shared/shared.module'; import { QuillModule } from 'ngx-quill'; import { ManualComponent } from './add/manual/manual.component'; -import { FileUploaderComponent } from '../../components/file-uploader/file-uploader.component'; +import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component'; import { DndDirective } from 'src/app/components/file-uploader/DndDirective'; import { Meta } from '@angular/platform-browser'; From 27f19653d284218bf55ac2de88c8f683a57b573a Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 8 Oct 2020 10:25:37 +0200 Subject: [PATCH 43/89] Fixed DndDirective name in html --- src/app/components/file-uploader/file-uploader.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.html b/src/app/components/file-uploader/file-uploader.component.html index adac18f4..84b1c2b6 100644 --- a/src/app/components/file-uploader/file-uploader.component.html +++ b/src/app/components/file-uploader/file-uploader.component.html @@ -1,4 +1,4 @@ -
+
file-dnd-icon From e7d0f24b04d62193e3b81d6071532ab3b8113920 Mon Sep 17 00:00:00 2001 From: Ruben Date: Thu, 15 Oct 2020 09:00:19 +0200 Subject: [PATCH 44/89] Initial version for showing icon on details page This is not the definitive version because solving the problem this way results in code repeatifing --- src/app/models/domain/uploadFile.ts | 1 + .../modules/project/details/details.component.html | 4 ++-- src/app/modules/project/details/details.component.ts | 12 +++++++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 6fae1f7f..8c6f1644 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,5 +1,6 @@ export interface UploadFile extends File { id: number; + name: string; path: string; preview: string; progress: number; diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html index 01e651c5..d694b47e 100644 --- a/src/app/modules/project/details/details.component.html +++ b/src/app/modules/project/details/details.component.html @@ -28,7 +28,7 @@
-
Code project
+
Code project

External Link

@@ -124,4 +124,4 @@

Project details

- \ No newline at end of file + diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 105a9a58..359d2c76 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -37,6 +37,7 @@ import { Highlight } from 'src/app/models/domain/hightlight'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; import { scopes } from 'src/app/models/domain/scopes'; import { SEOService } from 'src/app/services/seo.service'; +import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; /** * Overview of a single project @@ -80,7 +81,8 @@ export class DetailsComponent implements OnInit { private alertService: AlertService, private highlightByProjectIdService: HighlightByProjectIdService, private router: Router, - private seoService: SEOService + private seoService: SEOService, + private sanitizer: DomSanitizer ) { } ngOnInit(): void { @@ -253,6 +255,14 @@ export class DetailsComponent implements OnInit { }); } + public getIconUrl(): SafeUrl { + if (this.project.projectIcon === null) { + return 'assets/images/code.svg'; + } + + return this.sanitizer.bypassSecurityTrustUrl('https://localhost:5001/resources/' + this.project.projectIcon.path); + } + /** * Method to display the edit project button based on the current user and the project user. * If the user either has the ProjectWrite scope or is the creator of the project From 23e5e5ee0df7caafc99d6943b541590e11317540 Mon Sep 17 00:00:00 2001 From: Ruben Date: Thu, 15 Oct 2020 14:38:20 +0200 Subject: [PATCH 45/89] Updated icon styling --- src/app/modules/project/details/details.component.scss | 7 +++++-- src/app/modules/project/details/details.component.ts | 8 ++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss index a9cd53d6..9b99e986 100644 --- a/src/app/modules/project/details/details.component.scss +++ b/src/app/modules/project/details/details.component.scss @@ -24,11 +24,14 @@ border-radius: 50%; background-color: $accent-color-red-primary; margin-right: 10px; - max-width: 180px; + width: 180px; + height: 180px; + overflow: hidden; img { - height: auto; + height: 100%; width: 100%; + object-fit: cover; } } diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 359d2c76..d0e93f34 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -256,11 +256,11 @@ export class DetailsComponent implements OnInit { } public getIconUrl(): SafeUrl { - if (this.project.projectIcon === null) { - return 'assets/images/code.svg'; + if (this.project.projectIcon != null) { + return this.sanitizer.bypassSecurityTrustUrl('https://localhost:5001/resources/' + this.project.projectIcon.path); + } else { + return 'assets/images/code.svg'; } - - return this.sanitizer.bypassSecurityTrustUrl('https://localhost:5001/resources/' + this.project.projectIcon.path); } /** From 45af031196285ba0d76f4c3aa3558abde353c262 Mon Sep 17 00:00:00 2001 From: Ruben Date: Thu, 15 Oct 2020 15:13:53 +0200 Subject: [PATCH 46/89] Added and implemented resource config --- src/app/config/resource-config.ts | 9 +++++++++ .../modules/project/details/details.component.ts | 15 ++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 src/app/config/resource-config.ts diff --git a/src/app/config/resource-config.ts b/src/app/config/resource-config.ts new file mode 100644 index 00000000..8357bdde --- /dev/null +++ b/src/app/config/resource-config.ts @@ -0,0 +1,9 @@ +import { environment } from 'src/environments/environment'; + +export interface ResourceConfig { + url: string; +} + +export const RESOURCE_CONFIG: ResourceConfig = { + url: `${environment.apiUrl}/resources/` +} diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index d0e93f34..9fb7c2c0 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -38,6 +38,7 @@ import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-del import { scopes } from 'src/app/models/domain/scopes'; import { SEOService } from 'src/app/services/seo.service'; import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; +import { RESOURCE_CONFIG } from '../../../config/resource-config'; /** * Overview of a single project @@ -255,12 +256,16 @@ export class DetailsComponent implements OnInit { }); } + /** + * Method to get the url of the icon of the project. This urls can be the local + * image for a default or a specified icon stored on the server. + */ public getIconUrl(): SafeUrl { - if (this.project.projectIcon != null) { - return this.sanitizer.bypassSecurityTrustUrl('https://localhost:5001/resources/' + this.project.projectIcon.path); - } else { - return 'assets/images/code.svg'; - } + if (this.project.projectIcon != null) { + return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + this.project.projectIcon.path); + } else { + return 'assets/images/code.svg'; + } } /** From 59ab0fd8e166b997f9a0ee441323c67e9adb8e31 Mon Sep 17 00:00:00 2001 From: Ruben Date: Thu, 15 Oct 2020 21:12:54 +0200 Subject: [PATCH 47/89] Added basic visuality for overview page --- .../project/overview/overview.component.html | 2 +- .../project/overview/overview.component.scss | 85 ++++++++++--------- .../project/overview/overview.component.ts | 19 ++++- 3 files changed, 61 insertions(+), 45 deletions(-) diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html index a630aead..71813a1d 100644 --- a/src/app/modules/project/overview/overview.component.html +++ b/src/app/modules/project/overview/overview.component.html @@ -123,7 +123,7 @@

Filter

- project-image + project-image

{{ project.name }}

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss index bcd84997..0e3d8f93 100644 --- a/src/app/modules/project/overview/overview.component.scss +++ b/src/app/modules/project/overview/overview.component.scss @@ -22,7 +22,7 @@ margin-top: 20px; margin-left: 35%; } - + .pagination-footer::ng-deep .page-link { z-index: 1; color: $light-mode-black; @@ -32,22 +32,22 @@ display: flex; align-items: center; } - + .pagination-footer::ng-deep .page-item.active .page-link { border-color: $accent-color-red-primary; background-color: $accent-color-red-primary !important; color: #ffffff; } - + .paginationDropDown { width: 80px; } - + .search { display: flex; align-items: center; justify-content: center; - + input[type="search"] { margin-bottom: 10px; position: relative; @@ -61,17 +61,17 @@ box-shadow: $box-shadow; border-radius: 6px; font-family: lato, sans-serif; - + &::placeholder { color: $light-mode-grey-primary; } - + &:focus { border: none; outline: none; } } - + button { position: relative; right: 55px; @@ -81,41 +81,41 @@ border: none; width: 0; padding: 0; - + &:focus { outline: none; } - + img { width: 25px; } } } - + .projects-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 15px; - + tr { box-shadow: $box-shadow; cursor: pointer; - + td { background: $white; } - + td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } - + td:last-child { border-bottom-right-radius: 6px; border-top-right-radius: 6px; } - + td, span, h3, @@ -127,13 +127,13 @@ text-overflow: ellipsis; white-space: nowrap; } - + td.title { width: auto; display: flex; align-items: center; padding: 0 20px 0 0; - + .icon-placeholder { height: 55px; width: 55px; @@ -144,22 +144,23 @@ display: flex; align-items: center; justify-content: center; + overflow: hidden; } - + img { - height: 30px; - max-width: 30px; + height: 100%; + max-width: 100%; } } - + td.icon { width: 20%; - + svg { height: 18px; fill: $accent-color-red-primary; } - + img { height: 18px; margin: 13px; @@ -167,7 +168,7 @@ } } } - + .projects-filter-wrapper{ min-width: 250px; .projects-filter { @@ -179,17 +180,17 @@ h3 { margin: 0; } - + .option-select { margin-bottom: 10px; width: 100%; color: rgba($light-mode-black, 0.7) ; } - + form { input[type="checkbox"] { display: none; - + + label { color: $light-mode-grey-primary; vertical-align: middle; @@ -202,7 +203,7 @@ span{ margin-right: 4px; } - + &::before, &::after { content: ""; @@ -210,7 +211,7 @@ border-radius: 2px; position: absolute; } - + &::before { width: 15px; height: 15px; @@ -220,7 +221,7 @@ top: calc(50% - 15px / 2); } } - + &:checked { + label { &::after { @@ -234,7 +235,7 @@ } } } - + .icon { display: inline-flex; place-content: center; @@ -244,47 +245,47 @@ height: 15px; width: 15px; padding: 2px; - + img { height: auto; width: 100%; } } } - + select { padding: 4px; border-radius: 3px; border: 0px solid transparent; } - + select, option { outline: 0; } } } - + :host { ::ng-deep accordion-group { margin-top: 10px; - + .card-header { background: url("~src/assets/images/chevron-down-solid-orange.svg") no-repeat center right; padding: 0; border: none; background-size: 13px; - + button { padding: 0; color: $light-mode-grey-primary; font-size: 18px; } } - + .card { border: none; } - + .card-body { margin-top: 10px; background: $light-mode-grey-quaternary; @@ -293,7 +294,7 @@ } } } - + .pagination-footer{ @@ -323,4 +324,4 @@ .paginationDropDown { width: 80px; -} \ No newline at end of file +} diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index b77db89a..0ac61362 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -29,7 +29,8 @@ import { environment } from 'src/environments/environment'; import { SelectFormOption } from 'src/app/interfaces/select-form-option'; import { SearchResultsResource } from 'src/app/models/resources/search-results'; import { SEOService } from 'src/app/services/seo.service'; - +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { RESOURCE_CONFIG } from '../../../config/resource-config'; interface SortFormResult { type: string; @@ -150,7 +151,8 @@ export class OverviewComponent implements OnInit { private internalSearchService: InternalSearchService, private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute, - private seoService: SEOService + private seoService: SEOService, + private sanitizer: DomSanitizer ) { this.searchControl = new FormControl(''); @@ -281,6 +283,19 @@ export class OverviewComponent implements OnInit { this.onInternalQueryChange(); } + /** + * Method to get the url of the icon of the project. This urls can be the local + * image for a default or a specified icon stored on the server. + */ + public getIconUrl(id: number): SafeUrl { + let selectedProject: Project = this.projects.find(project => project.id == id); + if (selectedProject.projectIcon != null) { + return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); + } else { + return 'assets/images/code.svg'; + } + } + /** * Method to handle value changes of the sort form. * @param value the value of the form. From a8dbddb4287fe31f436625c0cc8b64a7cd78021e Mon Sep 17 00:00:00 2001 From: Max Korlaar Date: Fri, 16 Oct 2020 12:16:37 +0200 Subject: [PATCH 48/89] Rename hightlight.ts to highlight.ts (Fix typo), rename references as well --- src/app/models/domain/{hightlight.ts => highlight.ts} | 0 .../top-highlight-cards/top-highlight-cards.component.ts | 2 +- src/app/modules/project/details/details.component.ts | 2 +- .../modal-highlight-delete/modal-highlight-delete.component.ts | 2 +- src/app/services/highlight.service.ts | 2 +- src/app/services/highlightid.service.ts | 2 +- 6 files changed, 5 insertions(+), 5 deletions(-) rename src/app/models/domain/{hightlight.ts => highlight.ts} (100%) diff --git a/src/app/models/domain/hightlight.ts b/src/app/models/domain/highlight.ts similarity index 100% rename from src/app/models/domain/hightlight.ts rename to src/app/models/domain/highlight.ts diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index 68621b51..29c1c656 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -19,7 +19,7 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { finalize } from 'rxjs/internal/operators/finalize'; -import { Highlight } from 'src/app/models/domain/hightlight'; +import { Highlight } from 'src/app/models/domain/highlight'; import { HighlightService } from 'src/app/services/highlight.service'; @Component({ diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 105a9a58..6e12639a 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -33,7 +33,7 @@ import { User } from 'src/app/models/domain/user'; import { Observable, EMPTY } from 'rxjs'; import { HighlightByProjectIdService } from 'src/app/services/highlightid.service'; import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component'; -import { Highlight } from 'src/app/models/domain/hightlight'; +import { Highlight } from 'src/app/models/domain/highlight'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; import { scopes } from 'src/app/models/domain/scopes'; import { SEOService } from 'src/app/services/seo.service'; diff --git a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts index 5f226966..9d040690 100644 --- a/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts +++ b/src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component.ts @@ -19,7 +19,7 @@ import { AlertService } from './../../../services/alert.service'; import { Component, Output, EventEmitter, OnInit } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { Highlight } from 'src/app/models/domain/hightlight'; +import { Highlight } from 'src/app/models/domain/highlight'; import { HighlightService } from 'src/app/services/highlight.service'; import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertConfig } from 'src/app/models/internal/alert-config'; diff --git a/src/app/services/highlight.service.ts b/src/app/services/highlight.service.ts index cabb4032..f6c46330 100644 --- a/src/app/services/highlight.service.ts +++ b/src/app/services/highlight.service.ts @@ -18,7 +18,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { API_CONFIG } from '../config/api-config'; -import { Highlight } from '../models/domain/hightlight'; +import { Highlight } from '../models/domain/highlight'; import { HighlightAdd } from '../models/resources/highlight-add'; import { HighlightUpdate } from '../models/resources/highlight-update'; import { HttpBaseService } from './http-base.service'; diff --git a/src/app/services/highlightid.service.ts b/src/app/services/highlightid.service.ts index de797dcf..3ccfbda6 100644 --- a/src/app/services/highlightid.service.ts +++ b/src/app/services/highlightid.service.ts @@ -18,7 +18,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { API_CONFIG } from '../config/api-config'; -import { Highlight } from '../models/domain/hightlight'; +import { Highlight } from '../models/domain/highlight'; import { Observable } from 'rxjs'; @Injectable({ From 2d90d4ff8bfb1a680e1faf3043c3db478173fcdd Mon Sep 17 00:00:00 2001 From: Max Korlaar Date: Fri, 16 Oct 2020 13:48:41 +0200 Subject: [PATCH 49/89] Add status badges to README, add a list of links to quickly get started --- README.md | 64 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 37 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 3c2ee65f..1c30cf82 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,38 @@ # DeX-Frontend - -Angular Frontend for DeX platform - -What is Digital Excellence? -A lot of employees and students of FHICT create a lot of nice products. As a hobby, for their work or because of a school project. These can be software solutions, small scripts, research papers, thesis but possibly also project ideas and proposals for others to pick up. Unfortunately, most of them remain private and are not known by the majority of the population. The goal of the DeX-platform (short: DeX) is to make all this work more findable and thus improving collaboration. - -Commonly heard criticism is that “we already have GitLab for this”. This, however, is only one specific source. A content creator can choose to use a different platform for its project. DeX will search for all sources that are linked to the platform. Moreover, GitLab is mostly used in software development. Research papers, for instance, have a different source. We want to find all relevant information and thus search in all available sources, not only GitLab. -The benefits of using DeX will include, but probably not be limited to: - -VISIBILITY -Projects that are now only known by a small group of people will be more visible to the whole community. This increases the visibility of innovative solutions as well as their collaborators. - -COLLABORATE -People can easily find the collaborators of a project (proposal) and collaborate with them more easily. This creates a sort of open-source community in which all our collaborative ideas are shared. - -AGGREGATE -People have a better overview of their own work. This can be useful for instance when maintaining a portfolio or using examples in class, both as a teacher as well as a student. A student can show his or her previous work and maybe even demonstrate certain learning outcomes within that particular semester. - -SHOWCASE -Administrators can more easily find good examples of innovative solutions (showcases) that are built by the community. This can then, for instance, be used for promotional use. The interesting projects will be praised by the community and will be identified sooner and more easily. Such projects can then be put on the website of FHICT for instance. - -CENTRALIZE -It can be a central place where all project proposals can be gathered. Internships, minors, challenges for certain semesters such as Open Innovation all have their own format and system where employees and students need to work with. This can all potentially be grouped into one system. - -SUGGEST -DeX can suggest interesting projects for you as a person, based on interest such as techniques, a certain topic or based on the collaborators which (some of them) you follow and/or share the same interests. This way you will be informed and up-to-date with the latest news and trends. - +![Production Deployment](https://github.com/DigitalExcellence/dex-frontend/workflows/Production%20Deployment/badge.svg) ![Staging Deployment](https://github.com/DigitalExcellence/dex-frontend/workflows/Staging%20Deployment/badge.svg) ![Angular Workflow](https://github.com/DigitalExcellence/dex-frontend/workflows/Angular%20Workflow/badge.svg) [![GitHub issues](https://img.shields.io/github/issues/DigitalExcellence/dex-frontend?style=plastic)](https://github.com/DigitalExcellence/dex-frontend/issues) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=DigitalExcellence_dex-frontend&metric=alert_status)](https://sonarcloud.io/dashboard?id=DigitalExcellence_dex-frontend) [![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=DigitalExcellence_dex-frontend&metric=ncloc)](https://sonarcloud.io/dashboard?id=DigitalExcellence_dex-frontend) + + +This repository contains the Angular Frontend for [DeX platform](https://dex.software). + +## Quick links + +* [Check out the Wiki](https://github.com/DigitalExcellence/dex-frontend/wiki) +* [View all releases](https://github.com/DigitalExcellence/dex-frontend/releases) +* [Changelog](CHANGELOG.md) +* [Read the license (LGPL-3.0)](LICENSE.md) +* [Coding guidelines](https://github.com/DigitalExcellence/dex-frontend/wiki/Coding-Guidelines) + +## What is Digital Excellence? +A lot of employees and students of Fontys School of ICT (FHICT) create a lot of nice products. As a hobby, for their work or because of a school project. These can be software solutions, small scripts, research papers, thesis but possibly also project ideas and proposals for others to pick up. Unfortunately, most of them remain private and are not known by the majority of the population. The goal of the DeX-platform (short: DeX) is to make all this work more findable and thus improving collaboration. + +Commonly heard criticism is that “we already have GitLab for this”. This, however, is only one specific source. A content creator can choose to use a different platform for its project. DeX will search for all sources that are linked to the platform. Moreover, GitLab is mostly used in software development. Research papers, for instance, have a different source. We want to find all relevant information and thus search in all available sources, not only GitLab. +The benefits of using DeX will include, but probably not be limited to: + +#### VISIBILITY +Projects that are now only known by a small group of people will be more visible to the whole community. This increases the visibility of innovative solutions as well as their collaborators. + +#### COLLABORATE +People can easily find the collaborators of a project (proposal) and collaborate with them more easily. This creates a sort of open-source community in which all our collaborative ideas are shared. + +#### AGGREGATE +People have a better overview of their own work. This can be useful for instance when maintaining a portfolio or using examples in class, both as a teacher as well as a student. A student can show his or her previous work and maybe even demonstrate certain learning outcomes within that particular semester. + +#### SHOWCASE +Administrators can more easily find good examples of innovative solutions (showcases) that are built by the community. This can then, for instance, be used for promotional use. The interesting projects will be praised by the community and will be identified sooner and more easily. Such projects can then be put on the website of FHICT for instance. + +#### CENTRALIZE +It can be a central place where all project proposals can be gathered. Internships, minors, challenges for certain semesters such as Open Innovation all have their own format and system where employees and students need to work with. This can all potentially be grouped into one system. + +#### SUGGEST +DeX can suggest interesting projects for you as a person, based on interest such as techniques, a certain topic or based on the collaborators which (some of them) you follow and/or share the same interests. This way you will be informed and up-to-date with the latest news and trends. + From 90feff1cc22c8de02b32331ead399a20ca103183 Mon Sep 17 00:00:00 2001 From: Ruben Date: Fri, 16 Oct 2020 15:51:33 +0200 Subject: [PATCH 50/89] Added icon visibility on highlighted projects --- .../top-highlight-cards.component.html | 2 +- .../top-highlight-cards.component.scss | 5 ++++- .../top-highlight-cards.component.ts | 21 ++++++++++++++++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.html b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.html index 8370f14d..a7c06adf 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.html +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.html @@ -33,7 +33,7 @@

Highlighted projects

-
+

{{highlight.project.name}}

{{highlight.description | striphtml}}

diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss index f7cb6791..7bb54763 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss @@ -60,6 +60,7 @@ border-radius: 50%; background-color: $accent-color-red-primary; margin-right: 10px; + overflow: hidden; @include media-breakpoint-down(sm) { margin: auto; @@ -67,7 +68,9 @@ } img { - width: 28px; + width: 100%; + height: 100%; + object-fit: cover; } } diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index 68621b51..1e3691c2 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -17,10 +17,13 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { finalize } from 'rxjs/internal/operators/finalize'; import { Highlight } from 'src/app/models/domain/hightlight'; +import { Project } from 'src/app/models/domain/project'; import { HighlightService } from 'src/app/services/highlight.service'; +import { RESOURCE_CONFIG } from '../../../config/resource-config'; @Component({ selector: 'app-top-highlight-cards', @@ -37,7 +40,9 @@ export class TopHighlightCardsComponent implements OnInit { * Boolean to determine whether the component is loading the information from the api. */ public highlightsLoading = true; - constructor(private router: Router, private projectService: HighlightService) { } + constructor(private router: Router, + private projectService: HighlightService, + private sanitizer: DomSanitizer) { } ngOnInit(): void { this.projectService @@ -47,6 +52,7 @@ export class TopHighlightCardsComponent implements OnInit { this.highlights = this.generateSampleSizeOf(result, 3); }); } + private generateSampleSizeOf(population: string | any[], k: number) { /* Chooses k unique random elements from a population sequence or set. @@ -122,4 +128,17 @@ export class TopHighlightCardsComponent implements OnInit { this.router.navigate([`/project/details/${id}-${name}`]); } + /** + * Method to get the url of the icon of the project. This urls can be the local + * image for a default or a specified icon stored on the server. + */ + public getIconUrl(id: number): SafeUrl { + let selectedProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; + console.log(selectedProject); + if (selectedProject.projectIcon != null) { + return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); + } else { + return 'assets/images/code.svg'; + } + } } From 01f873d2cd18decfd77e1a2d5c6cfc80652edc4d Mon Sep 17 00:00:00 2001 From: Ruben Date: Fri, 16 Oct 2020 15:54:10 +0200 Subject: [PATCH 51/89] Remove console.log --- .../top-highlight-cards/top-highlight-cards.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index 1e3691c2..b883d734 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -134,7 +134,6 @@ export class TopHighlightCardsComponent implements OnInit { */ public getIconUrl(id: number): SafeUrl { let selectedProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; - console.log(selectedProject); if (selectedProject.projectIcon != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); } else { From 6e507cfa714675d285b805b8f3b4863d6fc180b9 Mon Sep 17 00:00:00 2001 From: Ruben Date: Fri, 16 Oct 2020 16:00:13 +0200 Subject: [PATCH 52/89] Removed redundant else-statement --- .../top-highlight-cards/top-highlight-cards.component.ts | 3 +-- src/app/modules/project/details/details.component.ts | 3 +-- src/app/modules/project/overview/overview.component.ts | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index b883d734..3c8688f3 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -136,8 +136,7 @@ export class TopHighlightCardsComponent implements OnInit { let selectedProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; if (selectedProject.projectIcon != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); - } else { - return 'assets/images/code.svg'; } + return 'assets/images/code.svg'; } } diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 9fb7c2c0..afe78834 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -263,9 +263,8 @@ export class DetailsComponent implements OnInit { public getIconUrl(): SafeUrl { if (this.project.projectIcon != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + this.project.projectIcon.path); - } else { - return 'assets/images/code.svg'; } + return 'assets/images/code.svg'; } /** diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index 0ac61362..c4c9817a 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -291,9 +291,8 @@ export class OverviewComponent implements OnInit { let selectedProject: Project = this.projects.find(project => project.id == id); if (selectedProject.projectIcon != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); - } else { - return 'assets/images/code.svg'; } + return 'assets/images/code.svg'; } /** From 541dc6cbd1fb898fefee7ff6d53a2046955966e7 Mon Sep 17 00:00:00 2001 From: Ruben Fricke <55654104+Ruby77@users.noreply.github.com> Date: Sat, 17 Oct 2020 12:59:04 +0200 Subject: [PATCH 53/89] Update CHANGELOG.md --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c1b4b9de..ead71b22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Display uploaded project icons - [#311](https://github.com/DigitalExcellence/dex-frontend/issues/311) + ### Deprecated ### Removed @@ -136,4 +138,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed the layout of project embed pages breaking on smaller viewports - [#223](https://github.com/DigitalExcellence/dex-frontend/issues/223) - Fixed issue where beta banner was not dismissible - [#239](#https://github.com/DigitalExcellence/dex-frontend/issues/239) - Fixed styling to match the designs, replaced images on home and sign in - [#233](https://github.com/DigitalExcellence/dex-frontend/issues/233) -- Fixed issue where invalid project id would trigger error - [#235](https://github.com/DigitalExcellence/dex-frontend/issues/235) \ No newline at end of file +- Fixed issue where invalid project id would trigger error - [#235](https://github.com/DigitalExcellence/dex-frontend/issues/235) From 9df6e4f629a63e9519617efe3beb4f9d23c02c11 Mon Sep 17 00:00:00 2001 From: Ruben Date: Sat, 17 Oct 2020 13:26:57 +0200 Subject: [PATCH 54/89] Added icon display on embedded project --- .../modules/project/embed/embed.component.html | 2 +- .../modules/project/embed/embed.component.scss | 7 +++++-- src/app/modules/project/embed/embed.component.ts | 15 ++++++++++++++- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/app/modules/project/embed/embed.component.html b/src/app/modules/project/embed/embed.component.html index 66eabf3b..3e1dd620 100644 --- a/src/app/modules/project/embed/embed.component.html +++ b/src/app/modules/project/embed/embed.component.html @@ -20,7 +20,7 @@
-
Code project
+
Code project

External Link

diff --git a/src/app/modules/project/embed/embed.component.scss b/src/app/modules/project/embed/embed.component.scss index 7f18d920..82a3c598 100644 --- a/src/app/modules/project/embed/embed.component.scss +++ b/src/app/modules/project/embed/embed.component.scss @@ -24,11 +24,14 @@ border-radius: 50%; background-color: $accent-color-red-primary; margin-right: 10px; - max-width: 180px; + width: 100px; + height: 100px; + overflow: hidden; img { - height: auto; + height: 100%; width: 100%; + object-fit: cover; } } diff --git a/src/app/modules/project/embed/embed.component.ts b/src/app/modules/project/embed/embed.component.ts index 0edded29..b42add15 100644 --- a/src/app/modules/project/embed/embed.component.ts +++ b/src/app/modules/project/embed/embed.component.ts @@ -18,6 +18,8 @@ import { EmbedService } from 'src/app/services/embed.service'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Project } from 'src/app/models/domain/project'; +import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; +import { RESOURCE_CONFIG } from '../../../config/resource-config'; /** * Overview of a single project @@ -36,7 +38,8 @@ export class EmbedComponent implements OnInit { constructor( private activedRoute: ActivatedRoute, - private embedService: EmbedService) { } + private embedService: EmbedService, + private sanitizer: DomSanitizer) { } ngOnInit(): void { const routeId = this.activedRoute.snapshot.paramMap.get('id'); @@ -54,6 +57,16 @@ export class EmbedComponent implements OnInit { this.project = result; } ); + } + /** + * Method to get the url of the icon of the project. This urls can be the local + * image for a default or a specified icon stored on the server. + */ + public getIconUrl(): SafeUrl { + if (this.project.projectIcon != null) { + return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + this.project.projectIcon.path); + } + return 'assets/images/code.svg'; } } From 739829a11b4caded161dce88150b81a5a8b74387 Mon Sep 17 00:00:00 2001 From: Ruben Date: Mon, 26 Oct 2020 09:53:41 +0100 Subject: [PATCH 55/89] Updated overview image styling --- src/app/modules/project/overview/overview.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss index 0e3d8f93..424f0619 100644 --- a/src/app/modules/project/overview/overview.component.scss +++ b/src/app/modules/project/overview/overview.component.scss @@ -150,6 +150,7 @@ img { height: 100%; max-width: 100%; + object-fit: cover; } } From 9c464831bc2bc41e38496fefce0924d54a942603 Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 27 Oct 2020 11:43:25 +0100 Subject: [PATCH 56/89] Converted relative path to absolute path for RESOURCE_CONFIG module --- .../top-highlight-cards/top-highlight-cards.component.ts | 2 +- src/app/modules/project/details/details.component.ts | 2 +- src/app/modules/project/embed/embed.component.ts | 2 +- src/app/modules/project/overview/overview.component.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index 3c8688f3..43f593f3 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -23,7 +23,7 @@ import { finalize } from 'rxjs/internal/operators/finalize'; import { Highlight } from 'src/app/models/domain/hightlight'; import { Project } from 'src/app/models/domain/project'; import { HighlightService } from 'src/app/services/highlight.service'; -import { RESOURCE_CONFIG } from '../../../config/resource-config'; +import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; @Component({ selector: 'app-top-highlight-cards', diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index afe78834..055e2a61 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -38,7 +38,7 @@ import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-del import { scopes } from 'src/app/models/domain/scopes'; import { SEOService } from 'src/app/services/seo.service'; import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from '../../../config/resource-config'; +import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; /** * Overview of a single project diff --git a/src/app/modules/project/embed/embed.component.ts b/src/app/modules/project/embed/embed.component.ts index b42add15..6afbf112 100644 --- a/src/app/modules/project/embed/embed.component.ts +++ b/src/app/modules/project/embed/embed.component.ts @@ -19,7 +19,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Project } from 'src/app/models/domain/project'; import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from '../../../config/resource-config'; +import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; /** * Overview of a single project diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index c4c9817a..9d6ffd64 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -30,7 +30,7 @@ import { SelectFormOption } from 'src/app/interfaces/select-form-option'; import { SearchResultsResource } from 'src/app/models/resources/search-results'; import { SEOService } from 'src/app/services/seo.service'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from '../../../config/resource-config'; +import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; interface SortFormResult { type: string; From 8ad56dba9c5db3fd85c445888c6ac26371b3366f Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 27 Oct 2020 21:25:40 +0100 Subject: [PATCH 57/89] Created file retriever service --- src/app/services/file-retriever.service.ts | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/app/services/file-retriever.service.ts diff --git a/src/app/services/file-retriever.service.ts b/src/app/services/file-retriever.service.ts new file mode 100644 index 00000000..78cde2b8 --- /dev/null +++ b/src/app/services/file-retriever.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; +import { UploadFile } from 'src/app/models/domain/uploadFile'; + +@Injectable({ + providedIn: 'root' + }) +export class FileRetrieverService { + + constructor( + private sanitizer: DomSanitizer + ){} + + /** + * Method to get the url of the icon of the project. This urls can be the local + * image for a default or a specified icon stored on the server. + * @param file retrieving the icon url of the specified file. + */ + public getIconUrl(file: UploadFile): SafeUrl { + if (file != null) { + return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + file.path); + } + return 'assets/images/code.svg'; + } +} From 61d6dd246c88339931eee7bc8f0d6eb7517ffb04 Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 27 Oct 2020 21:28:08 +0100 Subject: [PATCH 58/89] Implemented file retriever service --- .../top-highlight-cards.component.ts | 17 +++++++---------- .../project/details/details.component.ts | 15 ++++++--------- .../modules/project/embed/embed.component.ts | 17 +++++++---------- .../project/overview/overview.component.ts | 17 +++++++---------- 4 files changed, 27 insertions(+), 39 deletions(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index 43f593f3..de4271c1 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -17,13 +17,13 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { SafeUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { finalize } from 'rxjs/internal/operators/finalize'; import { Highlight } from 'src/app/models/domain/hightlight'; import { Project } from 'src/app/models/domain/project'; +import { FileRetrieverService } from 'src/app/services/file-retriever.service'; import { HighlightService } from 'src/app/services/highlight.service'; -import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; @Component({ selector: 'app-top-highlight-cards', @@ -42,7 +42,7 @@ export class TopHighlightCardsComponent implements OnInit { public highlightsLoading = true; constructor(private router: Router, private projectService: HighlightService, - private sanitizer: DomSanitizer) { } + private fileRetrieverService: FileRetrieverService) { } ngOnInit(): void { this.projectService @@ -129,14 +129,11 @@ export class TopHighlightCardsComponent implements OnInit { } /** - * Method to get the url of the icon of the project. This urls can be the local - * image for a default or a specified icon stored on the server. + * Method to get the url of the icon of the project. This is retrieved + * from the file retriever service */ public getIconUrl(id: number): SafeUrl { - let selectedProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; - if (selectedProject.projectIcon != null) { - return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); - } - return 'assets/images/code.svg'; + let foundProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; + return this.fileRetrieverService.getIconUrl(foundProject.projectIcon); } } diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 055e2a61..2d964d47 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -37,8 +37,8 @@ import { Highlight } from 'src/app/models/domain/hightlight'; import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; import { scopes } from 'src/app/models/domain/scopes'; import { SEOService } from 'src/app/services/seo.service'; -import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; +import { SafeUrl } from '@angular/platform-browser'; +import { FileRetrieverService } from 'src/app/services/file-retriever.service'; /** * Overview of a single project @@ -83,7 +83,7 @@ export class DetailsComponent implements OnInit { private highlightByProjectIdService: HighlightByProjectIdService, private router: Router, private seoService: SEOService, - private sanitizer: DomSanitizer + private fileRetrieverService: FileRetrieverService ) { } ngOnInit(): void { @@ -257,14 +257,11 @@ export class DetailsComponent implements OnInit { } /** - * Method to get the url of the icon of the project. This urls can be the local - * image for a default or a specified icon stored on the server. + * Method to get the url of the icon of the project. This is retrieved + * from the file retriever service. */ public getIconUrl(): SafeUrl { - if (this.project.projectIcon != null) { - return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + this.project.projectIcon.path); - } - return 'assets/images/code.svg'; + return this.fileRetrieverService.getIconUrl(this.project.projectIcon); } /** diff --git a/src/app/modules/project/embed/embed.component.ts b/src/app/modules/project/embed/embed.component.ts index 6afbf112..25ac5ee9 100644 --- a/src/app/modules/project/embed/embed.component.ts +++ b/src/app/modules/project/embed/embed.component.ts @@ -18,8 +18,8 @@ import { EmbedService } from 'src/app/services/embed.service'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Project } from 'src/app/models/domain/project'; -import { SafeUrl, DomSanitizer } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; +import { SafeUrl } from '@angular/platform-browser'; +import { FileRetrieverService } from 'src/app/services/file-retriever.service'; /** * Overview of a single project @@ -39,7 +39,7 @@ export class EmbedComponent implements OnInit { constructor( private activedRoute: ActivatedRoute, private embedService: EmbedService, - private sanitizer: DomSanitizer) { } + private fileRetrieverService: FileRetrieverService) { } ngOnInit(): void { const routeId = this.activedRoute.snapshot.paramMap.get('id'); @@ -59,14 +59,11 @@ export class EmbedComponent implements OnInit { ); } - /** - * Method to get the url of the icon of the project. This urls can be the local - * image for a default or a specified icon stored on the server. + /** + * Method to get the url of the icon of the project. This is retrieved + * from the RetrieveFileUtils */ public getIconUrl(): SafeUrl { - if (this.project.projectIcon != null) { - return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + this.project.projectIcon.path); - } - return 'assets/images/code.svg'; + return this.fileRetrieverService.getIconUrl(this.project.projectIcon); } } diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index 9d6ffd64..60e6453d 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -29,8 +29,8 @@ import { environment } from 'src/environments/environment'; import { SelectFormOption } from 'src/app/interfaces/select-form-option'; import { SearchResultsResource } from 'src/app/models/resources/search-results'; import { SEOService } from 'src/app/services/seo.service'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; +import { SafeUrl } from '@angular/platform-browser'; +import { FileRetrieverService } from 'src/app/services/file-retriever.service'; interface SortFormResult { type: string; @@ -152,7 +152,7 @@ export class OverviewComponent implements OnInit { private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute, private seoService: SEOService, - private sanitizer: DomSanitizer + private fileRetrieverService: FileRetrieverService ) { this.searchControl = new FormControl(''); @@ -284,15 +284,12 @@ export class OverviewComponent implements OnInit { } /** - * Method to get the url of the icon of the project. This urls can be the local - * image for a default or a specified icon stored on the server. + * Method to get the url of the icon of the project. This is retrieved + * from the file retriever service */ public getIconUrl(id: number): SafeUrl { - let selectedProject: Project = this.projects.find(project => project.id == id); - if (selectedProject.projectIcon != null) { - return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + selectedProject.projectIcon.path); - } - return 'assets/images/code.svg'; + let foundProject: Project = this.projects.find(project => project.id == id); + return this.fileRetrieverService.getIconUrl(foundProject.projectIcon); } /** From e5ec6ef8cbd610717dba0bae7b4e28aee281e9a8 Mon Sep 17 00:00:00 2001 From: Julia Date: Tue, 3 Nov 2020 20:52:04 +0100 Subject: [PATCH 59/89] added svg as background --- .../components/app-layout/app-layout.component.html | 8 ++++++++ .../components/app-layout/app-layout.component.scss | 11 +++++++++++ 2 files changed, 19 insertions(+) diff --git a/src/app/components/app-layout/app-layout.component.html b/src/app/components/app-layout/app-layout.component.html index a978e638..f786c4c4 100644 --- a/src/app/components/app-layout/app-layout.component.html +++ b/src/app/components/app-layout/app-layout.component.html @@ -78,5 +78,13 @@

+ + + + + +
diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss index c8629b49..50d249b5 100644 --- a/src/app/components/app-layout/app-layout.component.scss +++ b/src/app/components/app-layout/app-layout.component.scss @@ -245,6 +245,17 @@ } } +.background { + position: absolute; + top: 0; + z-index: -1; + opacity: .1; + + polygon{ + transform: rotate(15deg); + } +} + .content-container { padding: 24px; display: flex; From 7035947bf8948ff4611c1aebc1d8ec119b1635ae Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Tue, 3 Nov 2020 23:51:06 +0100 Subject: [PATCH 60/89] Removed console.logs --- .../file-uploader/file-uploader.component.ts | 12 +++++++----- src/app/modules/project/edit/edit.component.ts | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 6857016f..92295b5c 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -150,11 +150,13 @@ export class FileUploaderComponent { public setFiles(editFiles: Array) { editFiles.forEach(editFile => { - // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. - // See https://github.com/DigitalExcellence/dex-frontend/issues/311 - this.files.push({ - ...editFile, - preview: '/assets/images/project-icon-placeholder.png'}); + if(editFile) { + // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. + // See https://github.com/DigitalExcellence/dex-frontend/issues/311 + this.files.push({ + ...editFile, + preview: '/assets/images/project-icon-placeholder.png'}); + } }); } } diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index 004cd249..b676ee3b 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -116,6 +116,7 @@ export class EditComponent implements OnInit { (result) => { this.project = result; this.collaborators = this.project.collaborators; + console.log([this.project.projectIcon]) this.fileUploader.setFiles([this.project.projectIcon]); } ); From 384aa9bf430ab9082be6719892c60a46db5a4781 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 00:02:45 +0100 Subject: [PATCH 61/89] Fixed linter issues.. --- src/app/components/file-uploader/file-uploader.component.ts | 2 +- src/app/modules/project/edit/edit.component.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 92295b5c..82f96dbe 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -150,7 +150,7 @@ export class FileUploaderComponent { public setFiles(editFiles: Array) { editFiles.forEach(editFile => { - if(editFile) { + if (editFile) { // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. // See https://github.com/DigitalExcellence/dex-frontend/issues/311 this.files.push({ diff --git a/src/app/modules/project/edit/edit.component.ts b/src/app/modules/project/edit/edit.component.ts index b676ee3b..004cd249 100644 --- a/src/app/modules/project/edit/edit.component.ts +++ b/src/app/modules/project/edit/edit.component.ts @@ -116,7 +116,6 @@ export class EditComponent implements OnInit { (result) => { this.project = result; this.collaborators = this.project.collaborators; - console.log([this.project.projectIcon]) this.fileUploader.setFiles([this.project.projectIcon]); } ); From 2fb1c56c007f1f1a84c45a1aec9a71bf4d311cb8 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:18:22 +0100 Subject: [PATCH 62/89] Fixed typo --- .../top-highlight-cards/top-highlight-cards.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index de4271c1..a76e5179 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -20,7 +20,7 @@ import { Component, OnInit } from '@angular/core'; import { SafeUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { finalize } from 'rxjs/internal/operators/finalize'; -import { Highlight } from 'src/app/models/domain/hightlight'; +import { Highlight } from 'src/app/models/domain/highlight'; import { Project } from 'src/app/models/domain/project'; import { FileRetrieverService } from 'src/app/services/file-retriever.service'; import { HighlightService } from 'src/app/services/highlight.service'; From 3544dc74b13166d47f227726340fc334618dd57e Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:31:37 +0100 Subject: [PATCH 63/89] Updated changelog --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ead71b22..9ef1a895 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Added functionality to upload an project icon when creating a project - [#266](https://github.com/DigitalExcellence/dex-frontend/issues/266) + ### Changed - Display uploaded project icons - [#311](https://github.com/DigitalExcellence/dex-frontend/issues/311) @@ -28,13 +30,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Added basic SEO for better google discoverability - [#283](https://github.com/DigitalExcellence/dex-frontend/issues/283) -- Added functionality to upload an project icon when creating a project - [#266](https://github.com/DigitalExcellence/dex-frontend/issues/266) - Added dynamic updates of meta tags for better discoverability - [#286](https://github.com/DigitalExcellence/dex-frontend/issues/286) ### Changed - Changed all file line endings from CRLF to LF and added the .gitattributes to enforce it - [#163](https://github.com/DigitalExcellence/dex-backend/issues/163) -- Changed footer styling to be responsive on small screens - [#163](https://github.com/DigitalExcellence/dex-frontend/issues/163) +- Changed footer styling to be responsive on small screens - [#163](https://github.com/DigitalExcellence/dex-frontend/issues/163) - Changed header styling to be responsive on small screens - [#258](https://github.com/DigitalExcellence/dex-frontend/issues/258) - Highlight now shows highlight description instead of project description. - [#273](https://github.com/DigitalExcellence/dex-frontend/issues/273) - Changed images on the login and home page to new copyright-free images from unDraw - [#97](https://github.com/DigitalExcellence/dex-frontend/issues/97) From 26740babf425da022c759944bfc5de1ee2046a21 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:31:48 +0100 Subject: [PATCH 64/89] Fixed relative path --- src/app/modules/project/add/add.module.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/modules/project/add/add.module.ts b/src/app/modules/project/add/add.module.ts index e6f050da..597a441a 100644 --- a/src/app/modules/project/add/add.module.ts +++ b/src/app/modules/project/add/add.module.ts @@ -22,7 +22,6 @@ import { AddRoutingModule } from './add-routing.module'; import { ManualComponent } from './manual/manual.component'; import { SourceComponent } from './source/source.component'; import { QuillModule } from 'ngx-quill'; -import { FileUploaderComponent } from '../../../components/file-uploader/file-uploader.component'; import { ProjectModule } from '../project.module'; @NgModule({ From b3f21418632784096eef987ae3eddf2480bc0a5b Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:37:44 +0100 Subject: [PATCH 65/89] Added previews to project edit page --- .../file-uploader/file-uploader.component.ts | 13 +++++++------ src/app/models/domain/uploadFile.ts | 4 +++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 82f96dbe..bf7c686a 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -7,6 +7,7 @@ import { AlertType } from 'src/app/models/internal/alert-type'; import { AlertService } from 'src/app/services/alert.service'; import { FileUploaderService } from 'src/app/services/file-uploader.service'; import { UploadFile } from 'src/app/models/domain/uploadFile'; +import { FileRetrieverService } from 'src/app/services/file-retriever.service'; /** * Component that will function as a form to upload files of any type @@ -24,8 +25,10 @@ export class FileUploaderComponent { private maxFileSize = 2097152; + constructor(private uploadService: FileUploaderService, - private alertService: AlertService) { } + private alertService: AlertService, + private fileRetrieverService: FileRetrieverService) { } files: Array = new Array(); @@ -151,12 +154,10 @@ export class FileUploaderComponent { public setFiles(editFiles: Array) { editFiles.forEach(editFile => { if (editFile) { - // TODO: Preview has to be changed when the infrastructure for showing the icons is in place. - // See https://github.com/DigitalExcellence/dex-frontend/issues/311 this.files.push({ ...editFile, - preview: '/assets/images/project-icon-placeholder.png'}); - } - }); + preview: this.fileRetrieverService.getIconUrl(editFile) + }) + }}); } } diff --git a/src/app/models/domain/uploadFile.ts b/src/app/models/domain/uploadFile.ts index 8c6f1644..d01d4f7c 100644 --- a/src/app/models/domain/uploadFile.ts +++ b/src/app/models/domain/uploadFile.ts @@ -1,8 +1,10 @@ +import { SafeUrl } from '@angular/platform-browser'; + export interface UploadFile extends File { id: number; name: string; path: string; - preview: string; + preview: SafeUrl; progress: number; inProgress: boolean; readableSize: string; From 85f4e789801d57a7dbc1813c9747d1eecc023d84 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:43:44 +0100 Subject: [PATCH 66/89] Fixed linter issues --- .../components/file-uploader/file-uploader.component.ts | 4 ++-- src/app/config/resource-config.ts | 2 +- .../top-highlight-cards/top-highlight-cards.component.ts | 7 +++---- src/app/modules/project/overview/overview.component.ts | 9 ++++----- src/app/services/file-retriever.service.ts | 4 ++-- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index bf7c686a..6441f9b7 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core'; +import { Component, ElementRef, Input, ViewChild } from '@angular/core'; import { HttpEventType } from '@angular/common/http'; import { forkJoin, Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -157,7 +157,7 @@ export class FileUploaderComponent { this.files.push({ ...editFile, preview: this.fileRetrieverService.getIconUrl(editFile) - }) + }); }}); } } diff --git a/src/app/config/resource-config.ts b/src/app/config/resource-config.ts index 8357bdde..c2a963a0 100644 --- a/src/app/config/resource-config.ts +++ b/src/app/config/resource-config.ts @@ -6,4 +6,4 @@ export interface ResourceConfig { export const RESOURCE_CONFIG: ResourceConfig = { url: `${environment.apiUrl}/resources/` -} +}; diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts index a76e5179..9bfcd80f 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.ts @@ -15,7 +15,6 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { SafeUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; @@ -41,8 +40,8 @@ export class TopHighlightCardsComponent implements OnInit { */ public highlightsLoading = true; constructor(private router: Router, - private projectService: HighlightService, - private fileRetrieverService: FileRetrieverService) { } + private projectService: HighlightService, + private fileRetrieverService: FileRetrieverService) { } ngOnInit(): void { this.projectService @@ -133,7 +132,7 @@ export class TopHighlightCardsComponent implements OnInit { * from the file retriever service */ public getIconUrl(id: number): SafeUrl { - let foundProject: Project = this.highlights.find(highlight => highlight.projectId == id).project; + const foundProject: Project = this.highlights.find(highlight => highlight.projectId === id).project; return this.fileRetrieverService.getIconUrl(foundProject.projectIcon); } } diff --git a/src/app/modules/project/overview/overview.component.ts b/src/app/modules/project/overview/overview.component.ts index 60e6453d..bdeb7e28 100644 --- a/src/app/modules/project/overview/overview.component.ts +++ b/src/app/modules/project/overview/overview.component.ts @@ -15,16 +15,15 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ import { Component, OnInit } from '@angular/core'; -import { Router, ActivatedRoute } from '@angular/router'; -import { finalize, debounceTime } from 'rxjs/operators'; +import { ActivatedRoute, Router } from '@angular/router'; +import { debounceTime, finalize } from 'rxjs/operators'; import { Project } from 'src/app/models/domain/project'; -import { FormControl } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { InternalSearchService } from 'src/app/services/internal-search.service'; import { InternalSearchQuery } from 'src/app/models/resources/internal-search-query'; import { PaginationService } from 'src/app/services/pagination.service'; import { PageChangedEvent } from 'ngx-bootstrap/pagination'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; -import { FormBuilder, FormGroup } from '@angular/forms'; import { environment } from 'src/environments/environment'; import { SelectFormOption } from 'src/app/interfaces/select-form-option'; import { SearchResultsResource } from 'src/app/models/resources/search-results'; @@ -288,7 +287,7 @@ export class OverviewComponent implements OnInit { * from the file retriever service */ public getIconUrl(id: number): SafeUrl { - let foundProject: Project = this.projects.find(project => project.id == id); + const foundProject: Project = this.projects.find(project => project.id === id); return this.fileRetrieverService.getIconUrl(foundProject.projectIcon); } diff --git a/src/app/services/file-retriever.service.ts b/src/app/services/file-retriever.service.ts index 78cde2b8..39e48d2d 100644 --- a/src/app/services/file-retriever.service.ts +++ b/src/app/services/file-retriever.service.ts @@ -10,14 +10,14 @@ export class FileRetrieverService { constructor( private sanitizer: DomSanitizer - ){} + ) {} /** * Method to get the url of the icon of the project. This urls can be the local * image for a default or a specified icon stored on the server. * @param file retrieving the icon url of the specified file. */ - public getIconUrl(file: UploadFile): SafeUrl { + public getIconUrl(file: UploadFile): SafeUrl { if (file != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + file.path); } From b7d92b644852eb2bd51ed75960809e906773b084 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Wed, 4 Nov 2020 09:50:19 +0100 Subject: [PATCH 67/89] Fixed preview in file-uploader-component being squished --- src/app/components/file-uploader/file-uploader.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index c8223a6f..61d0f3f9 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -59,9 +59,9 @@ margin-bottom: 10px; .file-icon { - width: 128px; + max-width: 128px; height: 128px; - background-position: center; + object-fit: cover; border-radius: 50%; } From baf672b4d8e25871959b4d501d184cd5967f3e5e Mon Sep 17 00:00:00 2001 From: Davey Date: Wed, 4 Nov 2020 14:18:33 +0100 Subject: [PATCH 68/89] Background fixed fix made the background fixed and positioned a bit better, changed '%' to 'vw'. --- src/app/components/app-layout/app-layout.component.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss index 50d249b5..998490d8 100644 --- a/src/app/components/app-layout/app-layout.component.scss +++ b/src/app/components/app-layout/app-layout.component.scss @@ -246,10 +246,14 @@ } .background { - position: absolute; - top: 0; + position: fixed; + top: 0vw; + left: 0vw; z-index: -1; opacity: .1; + margin-top: -30vw; + height: 100vw; + width: 100vw; polygon{ transform: rotate(15deg); From c9a20ac926506f012ab292bc5e17097056a7c4a6 Mon Sep 17 00:00:00 2001 From: Julia Date: Wed, 4 Nov 2020 14:37:07 +0100 Subject: [PATCH 69/89] Tweaked design Added all transformations to the polygon. Tweaked sizing and rotation --- src/app/components/app-layout/app-layout.component.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss index 998490d8..355ca783 100644 --- a/src/app/components/app-layout/app-layout.component.scss +++ b/src/app/components/app-layout/app-layout.component.scss @@ -247,16 +247,15 @@ .background { position: fixed; - top: 0vw; - left: 0vw; + top: 0; + right: 0; z-index: -1; opacity: .1; - margin-top: -30vw; - height: 100vw; width: 100vw; + height: 100vh; polygon{ - transform: rotate(15deg); + transform: rotate(16deg) translate(-10vw, -25vh) scale(1.9); } } From f703bcb1aba205a5d5e3bababc2c04a5ba22cb76 Mon Sep 17 00:00:00 2001 From: Julia Date: Wed, 4 Nov 2020 14:39:47 +0100 Subject: [PATCH 70/89] final touch: opacity bit lower --- src/app/components/app-layout/app-layout.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/app-layout/app-layout.component.scss b/src/app/components/app-layout/app-layout.component.scss index 355ca783..7e5d8e25 100644 --- a/src/app/components/app-layout/app-layout.component.scss +++ b/src/app/components/app-layout/app-layout.component.scss @@ -250,7 +250,7 @@ top: 0; right: 0; z-index: -1; - opacity: .1; + opacity: .075; width: 100vw; height: 100vh; From ab035251c75fc6256bee0cc66347c39abaeb276e Mon Sep 17 00:00:00 2001 From: Julia Date: Wed, 4 Nov 2020 14:45:29 +0100 Subject: [PATCH 71/89] updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0acf50f..441d9b62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -97,6 +97,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Implemented permission validation for project edit / delete / highlight / embed buttons - [#213](https://github.com/DigitalExcellence/dex-frontend/issues/213) - Implemented WYSIWYG Editor for project description - [#216](https://github.com/DigitalExcellence/dex-frontend/issues/216) - Added pipe to strip html to fix the html showing in highlights - [#243](https://github.com/DigitalExcellence/dex-frontend/issues/243) +- Added an image to the background - [320](https://github.com/DigitalExcellence/dex-frontend/issues/320) ### Changed From 049392e35b010ec3759bfe7a00d8e8beb7862984 Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Wed, 4 Nov 2020 17:56:14 +0100 Subject: [PATCH 72/89] Fixed Changelog --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 441d9b62..7eab3e8d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Added an image to the background - [#320](https://github.com/DigitalExcellence/dex-frontend/issues/320) + ### Changed ### Deprecated @@ -31,7 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Changed all file line endings from CRLF to LF and added the .gitattributes to enforce it - [#163](https://github.com/DigitalExcellence/dex-backend/issues/163) -- Changed footer styling to be responsive on small screens - [#163](https://github.com/DigitalExcellence/dex-frontend/issues/163) +- Changed footer styling to be responsive on small screens - [#163](https://github.com/DigitalExcellence/dex-frontend/issues/163) - Changed header styling to be responsive on small screens - [#258](https://github.com/DigitalExcellence/dex-frontend/issues/258) - Highlight now shows highlight description instead of project description. - [#273](https://github.com/DigitalExcellence/dex-frontend/issues/273) - Changed images on the login and home page to new copyright-free images from unDraw - [#97](https://github.com/DigitalExcellence/dex-frontend/issues/97) @@ -97,7 +99,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Implemented permission validation for project edit / delete / highlight / embed buttons - [#213](https://github.com/DigitalExcellence/dex-frontend/issues/213) - Implemented WYSIWYG Editor for project description - [#216](https://github.com/DigitalExcellence/dex-frontend/issues/216) - Added pipe to strip html to fix the html showing in highlights - [#243](https://github.com/DigitalExcellence/dex-frontend/issues/243) -- Added an image to the background - [320](https://github.com/DigitalExcellence/dex-frontend/issues/320) ### Changed From a8bdc87262da8e9100a122f04819d8a0bc7ae4d6 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 11:47:54 +0100 Subject: [PATCH 73/89] Added grey scss variables --- src/app/components/file-uploader/file-uploader.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index 61d0f3f9..77bfc803 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -5,7 +5,7 @@ height: 200px; padding: 2rem; text-align: center; - border: dashed 1px #979797; + border: dashed 1px $light-mode-grey-primary; position: relative; margin: 0 auto 20px auto; @@ -46,7 +46,7 @@ border-radius: 6px; div.single-file:not(:last-child) { - border-bottom: 3px solid rgb(165, 165, 165); + border-bottom: 3px solid $light-mode-grey-primary; border-radius: 2px; } From ccb85d7276c9803dfde8a1a608eef1c7aa22bd00 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 11:55:01 +0100 Subject: [PATCH 74/89] Added JSDOC comments and return types + access modifiers --- .../file-uploader/file-uploader.component.ts | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 6441f9b7..4eb0097a 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -23,8 +23,15 @@ export class FileUploaderComponent { @Input() acceptMultiple: boolean; @Input() acceptedTypes: Array; + /** + * The maximum size of a file in bytes + */ private maxFileSize = 2097152; + /** + * The maximum size of a file in a readable format + */ + private maxFileSizeReadable: string = this.formatBytes(this.maxFileSize, 0); constructor(private uploadService: FileUploaderService, private alertService: AlertService, @@ -33,16 +40,16 @@ export class FileUploaderComponent { files: Array = new Array(); /** - * on file drop handler + * handle onFileDrop event */ - onFileDropped(event) { + public onFileDropped(event): void { this.prepareFilesList(event); } /** - * handle file from browsing + * handle file from the file explorer */ - fileBrowseHandler(files) { + private fileBrowseHandler(files): void { if (files.files !== this.files) { this.prepareFilesList(files.files); } @@ -50,14 +57,19 @@ export class FileUploaderComponent { /** * Delete file from files list - * @param index (File index) + * @param index The index of the file to delete */ - deleteFile(index: number) { + private deleteFile(index: number): void { this.files.splice(index, 1); this.fileInput.nativeElement.value = ''; } - private prepareFilesList(files: Array) { + + /** + * This will finalize the data from the uploadForm and do some filetype and -size checks. + * @param files The uploaded files from the uploadForm + */ + private prepareFilesList(files: Array): void { // If the user can only select 1 image we want to reset the array if ( !this.acceptMultiple) { this.files = []; @@ -93,6 +105,10 @@ export class FileUploaderComponent { } } + /** + * Converts the image to a base64 string + * @param file The file to convert + */ private generatePreview(file: UploadFile) { // We can use a FileReader to generate a base64 string based on the image const fileReader: FileReader = new FileReader(); @@ -118,6 +134,11 @@ export class FileUploaderComponent { file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } + + /** + * Send the selected files to the API and return the id's + * @return Observable> + */ public uploadFiles(): Observable> { // Check if any files were uploaded if (this.fileInput.nativeElement.value !== '') { @@ -137,6 +158,7 @@ export class FileUploaderComponent { }}) ) ); + // forkJoin the observables so they can be uploaded at the same time return forkJoin(fileUploads); } // If no files were updated return original list From 26b36fe992b1f9d317b90e887744ddf2c01dacf4 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 11:56:30 +0100 Subject: [PATCH 75/89] Added maxFileSize in error message when the file is too big --- .../file-uploader/file-uploader.component.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 4eb0097a..b9eec325 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -78,7 +78,7 @@ export class FileUploaderComponent { if (file.size < this.maxFileSize) { if (this.acceptedTypes.includes(file.type)) { this.generatePreview(file); - this.formatBytes(file); + file.readableSize = this.formatBytes(file.size); this.files.push(file); } else { const alertConfig: AlertConfig = { @@ -95,8 +95,9 @@ export class FileUploaderComponent { const alertConfig: AlertConfig = { type: AlertType.danger, preMessage: 'This file is too big', - mainMessage: `File ${file.name} is too big, the max size is 2mb`, - dismissible: true + mainMessage: `File ${file.name} is too big, the max size is ${this.maxFileSizeReadable}`, + dismissible: true, + timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); this.deleteFile(this.files.indexOf(file)); @@ -119,10 +120,14 @@ export class FileUploaderComponent { }; } - private formatBytes(file: UploadFile, decimals = 2) { - const bytes: number = file.size; + /** + * Converts the bytes to a user-readable format + * @param bytes The bytes to convert + * @param decimals The amount of decimals to display + */ + private formatBytes(bytes: number, decimals = 2): string { if (bytes === 0) { - return '0 Bytes'; + return '0 bytes'; } const k = 1024; @@ -131,7 +136,7 @@ export class FileUploaderComponent { const i = Math.floor(Math.log(bytes) / Math.log(k)); - file.readableSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } From 161d4cf7c968d1d967ae11442bf7cbcc9c9864a1 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 12:01:15 +0100 Subject: [PATCH 76/89] Fixed typo in comment --- src/app/services/alert.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/alert.service.ts b/src/app/services/alert.service.ts index ef121074..9791162d 100644 --- a/src/app/services/alert.service.ts +++ b/src/app/services/alert.service.ts @@ -49,7 +49,7 @@ export class AlertService { this.$activeAlerts.next(this.activeAlerts); - // Dismissable alerts with no timeout will not be automaticcaly removed. + // Dismissible alerts with no timeout will not be automatically removed. if (alertConfig.dismissible && (alertConfig.timeout == null || alertConfig.timeout <= 0)) { return; } From fa8387a52070a377eaf24ec80d1a968498591f9d Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 12:09:02 +0100 Subject: [PATCH 77/89] Changed placeholder image --- src/app/services/file-retriever.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/file-retriever.service.ts b/src/app/services/file-retriever.service.ts index 39e48d2d..57075c63 100644 --- a/src/app/services/file-retriever.service.ts +++ b/src/app/services/file-retriever.service.ts @@ -21,6 +21,6 @@ export class FileRetrieverService { if (file != null) { return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + file.path); } - return 'assets/images/code.svg'; + return 'assets/images/placeholder.svg'; } } From d2e3e97442236b562b386d25328a4c16a7fc3514 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 12:36:42 +0100 Subject: [PATCH 78/89] Generalized variable name for setFiles --- .../file-uploader/file-uploader.component.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index b9eec325..72ef3564 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -178,12 +178,17 @@ export class FileUploaderComponent { } } - public setFiles(editFiles: Array) { - editFiles.forEach(editFile => { - if (editFile) { + + /** + * Populates the fileList + * @param files files that have been uploaded + */ + public setFiles(uploadedFiles: Array): void { + uploadedFiles.forEach(uploadedFile => { + if (uploadedFile) { this.files.push({ - ...editFile, - preview: this.fileRetrieverService.getIconUrl(editFile) + ...uploadedFile, + preview: this.fileRetrieverService.getIconUrl(uploadedFile) }); }}); } From 78a06b2f480928d3a021506aeae9b7d6e3444d7e Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 12:37:47 +0100 Subject: [PATCH 79/89] Added footnote for recommended icon dimensions --- src/app/modules/project/add/manual/manual.component.html | 7 +++++++ src/app/modules/project/edit/edit.component.html | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/app/modules/project/add/manual/manual.component.html b/src/app/modules/project/add/manual/manual.component.html index 675528a2..eb7c26f4 100644 --- a/src/app/modules/project/add/manual/manual.component.html +++ b/src/app/modules/project/add/manual/manual.component.html @@ -75,6 +75,13 @@

Project icon

+
+
+
+

The recommended dimensions for an icon are atleast 512x512

+
+
+
diff --git a/src/app/modules/project/edit/edit.component.html b/src/app/modules/project/edit/edit.component.html index 651c2fa2..c88be0d6 100644 --- a/src/app/modules/project/edit/edit.component.html +++ b/src/app/modules/project/edit/edit.component.html @@ -81,6 +81,13 @@

Project icon

+
+
+
+

The recommended dimensions for an icon are atleast 512x512

+
+
+
From 38f09a754a431b62c5e30355a481510f20c41e41 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 12:38:38 +0100 Subject: [PATCH 80/89] Added back default timeout for the alert --- src/app/modules/project/add/manual/manual.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/modules/project/add/manual/manual.component.ts b/src/app/modules/project/add/manual/manual.component.ts index 6de1ca5d..a1efb578 100644 --- a/src/app/modules/project/add/manual/manual.component.ts +++ b/src/app/modules/project/add/manual/manual.component.ts @@ -28,7 +28,7 @@ import { MappedProject } from 'src/app/models/internal/mapped-project'; import { WizardService } from 'src/app/services/wizard.service'; import { QuillUtils } from 'src/app/utils/quill.utils'; import { FileUploaderComponent } from 'src/app/components/file-uploader/file-uploader.component'; -import { SEOService} from 'src/app/services/seo.service'; +import { SEOService } from 'src/app/services/seo.service'; // Import showdown for markdown to html conversion. import * as showdown from 'showdown'; @@ -123,7 +123,8 @@ export class ManualComponent implements OnInit { type: AlertType.danger, preMessage: 'The add project form is invalid', mainMessage: 'The project could not be saved, please fill all required fields', - dismissible: true + dismissible: true, + timeout: this.alertService.defaultTimeout }; this.alertService.pushAlert(alertConfig); return; From 043de77369ce561935b471b851d9d1350d82b125 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 15:17:37 +0100 Subject: [PATCH 81/89] Updated placeholder fill color --- src/assets/images/placeholder.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/images/placeholder.svg b/src/assets/images/placeholder.svg index bb4abd9f..7a450a21 100644 --- a/src/assets/images/placeholder.svg +++ b/src/assets/images/placeholder.svg @@ -1 +1 @@ - + From cb28a003a52d638fab0e0bc27b4c41074aba2174 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 15:18:42 +0100 Subject: [PATCH 82/89] Removed background-color from the project icons and did temporary styling --- .../components/file-uploader/file-uploader.component.ts | 4 ++-- src/app/modules/project/details/details.component.html | 2 +- src/app/modules/project/details/details.component.scss | 1 - src/app/modules/project/overview/overview.component.html | 2 +- src/app/modules/project/overview/overview.component.scss | 8 ++++---- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/app/components/file-uploader/file-uploader.component.ts b/src/app/components/file-uploader/file-uploader.component.ts index 72ef3564..3f1c075c 100644 --- a/src/app/components/file-uploader/file-uploader.component.ts +++ b/src/app/components/file-uploader/file-uploader.component.ts @@ -49,7 +49,7 @@ export class FileUploaderComponent { /** * handle file from the file explorer */ - private fileBrowseHandler(files): void { + public fileBrowseHandler(files): void { if (files.files !== this.files) { this.prepareFilesList(files.files); } @@ -59,7 +59,7 @@ export class FileUploaderComponent { * Delete file from files list * @param index The index of the file to delete */ - private deleteFile(index: number): void { + public deleteFile(index: number): void { this.files.splice(index, 1); this.fileInput.nativeElement.value = ''; } diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html index 1937bb7b..2e11ba5c 100644 --- a/src/app/modules/project/details/details.component.html +++ b/src/app/modules/project/details/details.component.html @@ -28,7 +28,7 @@
-
Code project
+
Code project

External Link

diff --git a/src/app/modules/project/details/details.component.scss b/src/app/modules/project/details/details.component.scss index 9b99e986..db99966e 100644 --- a/src/app/modules/project/details/details.component.scss +++ b/src/app/modules/project/details/details.component.scss @@ -21,7 +21,6 @@ .project-icon { display: flex; place-content: center; - border-radius: 50%; background-color: $accent-color-red-primary; margin-right: 10px; width: 180px; diff --git a/src/app/modules/project/overview/overview.component.html b/src/app/modules/project/overview/overview.component.html index 71813a1d..9ad65abc 100644 --- a/src/app/modules/project/overview/overview.component.html +++ b/src/app/modules/project/overview/overview.component.html @@ -123,7 +123,7 @@

Filter

- project-image + project-image

{{ project.name }}

diff --git a/src/app/modules/project/overview/overview.component.scss b/src/app/modules/project/overview/overview.component.scss index 424f0619..75b97f04 100644 --- a/src/app/modules/project/overview/overview.component.scss +++ b/src/app/modules/project/overview/overview.component.scss @@ -135,22 +135,22 @@ padding: 0 20px 0 0; .icon-placeholder { - height: 55px; - width: 55px; + height: 70px; + width: 70px; min-width: 55px; margin: 10px 20px; - border-radius: 30px; - background-color: $accent-color-red-primary; display: flex; align-items: center; justify-content: center; overflow: hidden; + text-align: center; } img { height: 100%; max-width: 100%; object-fit: cover; + margin: auto; } } From 4d1d239726fd0911e3a537627028334e3403f732 Mon Sep 17 00:00:00 2001 From: Spacinggolem Date: Thu, 5 Nov 2020 15:57:55 +0100 Subject: [PATCH 83/89] Changed icon preview to be square --- src/app/components/file-uploader/file-uploader.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/file-uploader/file-uploader.component.scss b/src/app/components/file-uploader/file-uploader.component.scss index 77bfc803..f622ee0b 100644 --- a/src/app/components/file-uploader/file-uploader.component.scss +++ b/src/app/components/file-uploader/file-uploader.component.scss @@ -62,7 +62,6 @@ max-width: 128px; height: 128px; object-fit: cover; - border-radius: 50%; } .file-name { From 0b6f5cdc293546c6c7b03743a3754d2662f81568 Mon Sep 17 00:00:00 2001 From: waltersajtos Date: Fri, 6 Nov 2020 10:48:04 +0100 Subject: [PATCH 84/89] Removed background color and border radius from the icon --- .../top-highlight-cards/top-highlight-cards.component.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss index 7bb54763..b4194424 100644 --- a/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss +++ b/src/app/modules/highlight/top-highlight-cards/top-highlight-cards.component.scss @@ -57,8 +57,6 @@ flex-shrink: 0; width: 40px; height: 40px; - border-radius: 50%; - background-color: $accent-color-red-primary; margin-right: 10px; overflow: hidden; From 9503bb9ac8eae1aa9f6ba8f2b2390a84622c4a0f Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Fri, 6 Nov 2020 12:23:32 +0100 Subject: [PATCH 85/89] Paths are case sensitive --- src/app/config/resource-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/config/resource-config.ts b/src/app/config/resource-config.ts index c2a963a0..a717870b 100644 --- a/src/app/config/resource-config.ts +++ b/src/app/config/resource-config.ts @@ -5,5 +5,5 @@ export interface ResourceConfig { } export const RESOURCE_CONFIG: ResourceConfig = { - url: `${environment.apiUrl}/resources/` + url: `${environment.apiUrl}/Resources/` }; From 16f458340029ebcdd9550b8ad6d17777242b9e98 Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Fri, 6 Nov 2020 12:53:01 +0100 Subject: [PATCH 86/89] Renamed Resource path to Uploads/Images/ --- src/app/config/resource-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/config/resource-config.ts b/src/app/config/resource-config.ts index a717870b..e4cc1d08 100644 --- a/src/app/config/resource-config.ts +++ b/src/app/config/resource-config.ts @@ -5,5 +5,5 @@ export interface ResourceConfig { } export const RESOURCE_CONFIG: ResourceConfig = { - url: `${environment.apiUrl}/Resources/` + url: `${environment.apiUrl}/Uploads/Images/` }; From da625f9eb98c84763a98db0bebf0a095ed220cfc Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Fri, 6 Nov 2020 14:31:15 +0100 Subject: [PATCH 87/89] Fix issue that resulted in unlimited amount of requests being executed On pages likes project overview/detail, it would request images indefinitely, leading to large amount of requests. This was due to the DomSanitizer bypassing the security check. I don't think the bypass was needed, instead use sanitization --- .../project/details/details.component.html | 4 +- .../project/details/details.component.ts | 49 +++++++++---------- src/app/services/file-retriever.service.ts | 10 ++-- 3 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html index 2e11ba5c..8e8383e4 100644 --- a/src/app/modules/project/details/details.component.html +++ b/src/app/modules/project/details/details.component.html @@ -28,7 +28,9 @@
-
Code project
+
+ Code project +

External Link

diff --git a/src/app/modules/project/details/details.component.ts b/src/app/modules/project/details/details.component.ts index 6ae5ae80..1ac57864 100644 --- a/src/app/modules/project/details/details.component.ts +++ b/src/app/modules/project/details/details.component.ts @@ -1,4 +1,3 @@ -import { finalize } from 'rxjs/operators'; /* * Digital Excellence Copyright (C) 2020 Brend Smits * @@ -15,30 +14,30 @@ import { finalize } from 'rxjs/operators'; * along with this program, in the LICENSE.md file in the root project directory. * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { environment } from 'src/environments/environment'; -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Project } from 'src/app/models/domain/project'; -import { ProjectService } from 'src/app/services/project.service'; -import { AuthService } from 'src/app/services/auth.service'; -import { HighlightService } from 'src/app/services/highlight.service'; -import { HighlightAdd } from 'src/app/models/resources/highlight-add'; -import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal'; -import { ModalHighlightComponent, HighlightFormResult } from 'src/app/modules/project/modal-highlight/modal-highlight.component'; -import { AlertConfig } from 'src/app/models/internal/alert-config'; -import { AlertType } from 'src/app/models/internal/alert-type'; -import { AlertService } from 'src/app/services/alert.service'; -import { switchMap } from 'rxjs/operators'; -import { User } from 'src/app/models/domain/user'; -import { Observable, EMPTY } from 'rxjs'; -import { HighlightByProjectIdService } from 'src/app/services/highlightid.service'; -import { ModalHighlightDeleteComponent } from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component'; -import { Highlight } from 'src/app/models/domain/highlight'; -import { ModalDeleteGenericComponent } from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; -import { scopes } from 'src/app/models/domain/scopes'; -import { SEOService } from 'src/app/services/seo.service'; -import { SafeUrl } from '@angular/platform-browser'; -import { FileRetrieverService } from 'src/app/services/file-retriever.service'; +import {Component, OnInit} from '@angular/core'; +import {SafeUrl} from '@angular/platform-browser'; +import {ActivatedRoute, Router} from '@angular/router'; +import {BsModalService, ModalOptions} from 'ngx-bootstrap/modal'; +import {EMPTY, Observable} from 'rxjs'; +import {finalize, switchMap} from 'rxjs/operators'; +import {ModalDeleteGenericComponent} from 'src/app/components/modals/modal-delete-generic/modal-delete-generic.component'; +import {Highlight} from 'src/app/models/domain/highlight'; +import {Project} from 'src/app/models/domain/project'; +import {scopes} from 'src/app/models/domain/scopes'; +import {User} from 'src/app/models/domain/user'; +import {AlertConfig} from 'src/app/models/internal/alert-config'; +import {AlertType} from 'src/app/models/internal/alert-type'; +import {HighlightAdd} from 'src/app/models/resources/highlight-add'; +import {ModalHighlightDeleteComponent} from 'src/app/modules/project/modal-highlight-delete/modal-highlight-delete.component'; +import {HighlightFormResult, ModalHighlightComponent} from 'src/app/modules/project/modal-highlight/modal-highlight.component'; +import {AlertService} from 'src/app/services/alert.service'; +import {AuthService} from 'src/app/services/auth.service'; +import {FileRetrieverService} from 'src/app/services/file-retriever.service'; +import {HighlightService} from 'src/app/services/highlight.service'; +import {HighlightByProjectIdService} from 'src/app/services/highlightid.service'; +import {ProjectService} from 'src/app/services/project.service'; +import {SEOService} from 'src/app/services/seo.service'; +import {environment} from 'src/environments/environment'; /** * Overview of a single project diff --git a/src/app/services/file-retriever.service.ts b/src/app/services/file-retriever.service.ts index 57075c63..d84ec8a7 100644 --- a/src/app/services/file-retriever.service.ts +++ b/src/app/services/file-retriever.service.ts @@ -1,7 +1,7 @@ -import { Injectable } from '@angular/core'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { RESOURCE_CONFIG } from 'src/app/config/resource-config'; -import { UploadFile } from 'src/app/models/domain/uploadFile'; +import {Injectable} from '@angular/core'; +import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; +import {RESOURCE_CONFIG} from 'src/app/config/resource-config'; +import {UploadFile} from 'src/app/models/domain/uploadFile'; @Injectable({ providedIn: 'root' @@ -19,7 +19,7 @@ export class FileRetrieverService { */ public getIconUrl(file: UploadFile): SafeUrl { if (file != null) { - return this.sanitizer.bypassSecurityTrustUrl(RESOURCE_CONFIG.url + file.path); + return this.sanitizer.sanitize(4, RESOURCE_CONFIG.url + file.path); } return 'assets/images/placeholder.svg'; } From 2ed2b68752813da7339bdfc035d07380986de58b Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Fri, 6 Nov 2020 14:44:23 +0100 Subject: [PATCH 88/89] Fix embeds not working due to the use of old route parameters --- .../project/details/details.component.html | 2 +- .../embed-button/embed-button.component.ts | 24 ++++++------------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/app/modules/project/details/details.component.html b/src/app/modules/project/details/details.component.html index 8e8383e4..78aeb51f 100644 --- a/src/app/modules/project/details/details.component.html +++ b/src/app/modules/project/details/details.component.html @@ -110,7 +110,7 @@

{{ project.name }}

- +
diff --git a/src/app/modules/project/embed-button/embed-button.component.ts b/src/app/modules/project/embed-button/embed-button.component.ts index 4f36e882..2f7442f5 100644 --- a/src/app/modules/project/embed-button/embed-button.component.ts +++ b/src/app/modules/project/embed-button/embed-button.component.ts @@ -15,11 +15,11 @@ * If not, see https://www.gnu.org/licenses/lgpl-3.0.txt */ -import { EmbedService } from 'src/app/services/embed.service'; -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { EmbeddedProject } from 'src/app/models/domain/embedded-project'; -import { environment } from 'src/environments/environment'; +import {Component, Input, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {EmbeddedProject} from 'src/app/models/domain/embedded-project'; +import {EmbedService} from 'src/app/services/embed.service'; +import {environment} from 'src/environments/environment'; @Component({ selector: 'app-embed-button', @@ -30,23 +30,13 @@ import { environment } from 'src/environments/environment'; * Button that generates an embedded project and creates an iframe example link */ export class EmbedButtonComponent implements OnInit { + @Input() private projectId: number; public embeddedProject: EmbeddedProject; public frontendUrl = environment.frontendUrl; - private projectId: number; constructor(private activedRoute: ActivatedRoute, private embedService: EmbedService) { } - ngOnInit(): void { - const routeId = this.activedRoute.snapshot.paramMap.get('id'); - if (!routeId) { - return; - } - const id = Number(routeId); - if (id < 1) { - return; - } - this.projectId = id; - } + ngOnInit(): void {} public onClickGenerateEmbed(): void { this.embedService.post({projectId: this.projectId}) From 94d7d2b10107dce92533219c9c46b849cb702be2 Mon Sep 17 00:00:00 2001 From: Brend Smits Date: Fri, 6 Nov 2020 15:22:02 +0100 Subject: [PATCH 89/89] Updated Changelog for release v0.8.0 --- CHANGELOG.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 46cc02f1..ad8efeaf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,13 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Added functionality to upload an project icon when creating a project - [#266](https://github.com/DigitalExcellence/dex-frontend/issues/266) -- Added an image to the background - [#320](https://github.com/DigitalExcellence/dex-frontend/issues/320) - ### Changed -- Display uploaded project icons - [#311](https://github.com/DigitalExcellence/dex-frontend/issues/311) - ### Deprecated ### Removed @@ -24,6 +19,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Security +## Release v.0.8.0-beta - 06-11-2020 + +### Added + +- Added functionality to upload an project icon when creating a project - [#266](https://github.com/DigitalExcellence/dex-frontend/issues/266) +- Added an image to the background - [#320](https://github.com/DigitalExcellence/dex-frontend/issues/320) + +### Changed + +- Display uploaded project icons - [#311](https://github.com/DigitalExcellence/dex-frontend/issues/311) + + + ## Release v.0.7.0-beta - 09-10-2020