From c6860586df8951e7fe2cb5b6754580fc2362cfd3 Mon Sep 17 00:00:00 2001
From: Edouard DUPIN <yui.heero@gmail.com>
Date: Wed, 17 Apr 2024 23:20:20 +0200
Subject: [PATCH] [DEV] update umload progress

---
 src/component/popin/popin.html                | 10 ++--
 src/component/popin/popin.ts                  |  8 +--
 .../upload-progress/upload-progress.html      | 36 +++++++------
 src/popin/upload-progress/upload-progress.ts  | 51 +++++++++++--------
 4 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/src/component/popin/popin.html b/src/component/popin/popin.html
index 4778632..b5c31e1 100644
--- a/src/component/popin/popin.html
+++ b/src/component/popin/popin.html
@@ -3,7 +3,7 @@
 		<div class="element {{popSize}}">
 			<div class="header">
 				<label class="unselectable">{{popTitle}}</label>
-				@if(closeTopRight === true) {
+				@if(closeTopRight) {
 					<div class="close">
 						<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
 							<label class="unselectable"><i class="material-icons">close</i></label>
@@ -15,28 +15,28 @@
 				<ng-content></ng-content>
 			</div>
 			<div class="footer">
-				@if(validateTitle !== null) {
+				@if(validateTitle) {
 					<div class="action">
 						<button class="button color-shadow-black" (click)="onValidate()" type="submit">
 							<label class="unselectable"><i class="material-icons">done</i> {{validateTitle}}</label>
 						</button>
 					</div>
 				}
-				@if(saveTitle != null) {
+				@if(saveTitle) {
 					<div class="action">
 						<button class="button color-shadow-black" (click)="onSave()" type="submit">
 							<label class="unselectable"><i class="material-icons">save_alt</i> {{saveTitle}}</label>
 						</button>
 					</div>
 				}
-				@if(otherTitle != null) {
+				@if(otherTitle) {
 					<div class="action">
 						<button class="button color-shadow-black" (click)="onOther()" type="submit">
 							<label class="unselectable"><i class="material-icons">star</i> {{otherTitle}}</label>
 						</button>
 					</div>
 				}
-				@if(closeTitle != null) {
+				@if(closeTitle) {
 					<div class="action">
 						<button class="button color-shadow-black" (click)="onClose()" type="submit">
 							<label class="unselectable"><i class="material-icons">close</i> {{closeTitle}}</label>
diff --git a/src/component/popin/popin.ts b/src/component/popin/popin.ts
index 71cb49c..5445cb6 100644
--- a/src/component/popin/popin.ts
+++ b/src/component/popin/popin.ts
@@ -21,10 +21,10 @@ export class PopInComponent implements OnInit, OnDestroy {
 	@Input() popSize: string = 'medium';
 
 	@Output() callback: EventEmitter<any> = new EventEmitter();
-	@Input() closeTitle: any = null;
-	@Input() validateTitle: any = null;
-	@Input() saveTitle: any = null;
-	@Input() otherTitle: any = null;
+	@Input() closeTitle?: string;
+	@Input() validateTitle?: string;
+	@Input() saveTitle?: string;
+	@Input() otherTitle?: string;
 
 	public displayPopIn: boolean = false;
 
diff --git a/src/popin/upload-progress/upload-progress.html b/src/popin/upload-progress/upload-progress.html
index ad873f1..b4c2ef1 100644
--- a/src/popin/upload-progress/upload-progress.html
+++ b/src/popin/upload-progress/upload-progress.html
@@ -10,35 +10,33 @@
 		<p class="expand">
 			<label class="unselectable"><b>{{mediaTitle}}</b></label>
 		</p>
-		@if(progress != 100) {
+		@if(error) {
+			<div>
+				<label class="unselectable"><b>Get an error From the server:</b></label
+				><br />
+				<label class="unselectable">{{error}}</label>
+			</div>
+		}
+		@else if(progress != 100) {
 			<div class="progress-back">
-				<div class="progress-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
+				<div class="progress-bar" style="width:{{progress??0}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
 			</div>
 			<div>
 				<label class="unselectable">Upload:</label><label style="text-align: right">{{uploadDisplay}}</label><br />
 				<label class="unselectable">Size:</label><label style="text-align: right">{{sizeDisplay}}</label>
 			</div>
 		}
-		@else if (error == null && result == null) {
+		@else if(result) {
+			<div>
+				<label class="unselectable"><b>Upload finished:</b></label
+				><br />
+				<label class="unselectable">{{result}}</label>
+			</div>
+		}
+		@else {
 			<div>
 				<label class="unselectable">Upload done ... waiting server answer</label>
 			</div>
 		}
-		@else {
-			@if(error != null) {
-				<div>
-					<label class="unselectable"><b>Get an error From the server:</b></label
-					><br />
-					<label class="unselectable">{{error}}</label>
-				</div>
-			}
-			@if(result != null) {
-				<div>
-					<label class="unselectable"><b>Upload finished:</b></label
-					><br />
-					<label class="unselectable">{{result}}</label>
-				</div>
-			}
-		}
 	</app-popin>
 </div>
diff --git a/src/popin/upload-progress/upload-progress.ts b/src/popin/upload-progress/upload-progress.ts
index e587e76..f58bf04 100644
--- a/src/popin/upload-progress/upload-progress.ts
+++ b/src/popin/upload-progress/upload-progress.ts
@@ -4,9 +4,28 @@
  * @license PROPRIETARY (see license file)
  */
 
-import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { PopInService } from '../../service';
+import { isNullOrUndefined } from '../../utils';
+
+
+export class UploadProgress {
+	labelMediaTitle: string = '';
+	mediaSendSize: number = 0;
+	mediaSize: number = 99999999999999;
+	result?: string;
+	error?: string;
+	clear() {
+		this.labelMediaTitle = '';
+		this.mediaSendSize = 0;
+		this.mediaSize = 99999999999999;
+		this.result = undefined;
+		this.error = undefined;
+	}
+}
+
+
 
 @Component({
 	selector: 'upload-progress',
@@ -19,6 +38,7 @@ export class PopInUploadProgress implements OnInit {
 	@Input() mediaSize: number = 999999999999;
 	@Input() result?: string;
 	@Input() error?: string;
+	@Output() abort: EventEmitter<void> = new EventEmitter();
 	public closeButtonTitle?: string = 'Abort';
 	public otherButtonTitle?: string;
 	public validateButtonTitle?: string;
@@ -29,8 +49,14 @@ export class PopInUploadProgress implements OnInit {
 	OnDestroy() { }
 	ngOnInit() { }
 	eventPopUp(_event: string): void {
-		console.log(`GET event: ${_event}`);
-		this.popInService.close('popin-upload-progress');
+		if (_event == "close") {
+			if (this.abort) {
+				this.abort.emit();
+			}
+		} else {
+			console.log(`GET event: ${_event}`);
+			this.popInService.close('popin-upload-progress');
+		}
 	}
 	updateNeedSend(): void { }
 
@@ -80,11 +106,11 @@ export class PopInUploadProgress implements OnInit {
 		this.progress = Math.trunc((this.mediaUploaded * 100) / this.mediaSize);
 		this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
 		this.sizeDisplay = this.convertInHuman(this.mediaSize);
-		if (this.error === null && this.result === null) {
+		if (isNullOrUndefined(this.error) && isNullOrUndefined(this.result)) {
 			this.closeButtonTitle = 'Abort';
 			this.otherButtonTitle = undefined;
 			this.validateButtonTitle = undefined;
-		} else if (this.result === null) {
+		} else if (isNullOrUndefined(this.result)) {
 			this.closeButtonTitle = undefined;
 			this.otherButtonTitle = 'Close';
 			this.validateButtonTitle = undefined;
@@ -95,18 +121,3 @@ export class PopInUploadProgress implements OnInit {
 		}
 	}
 }
-
-export class UploadProgress {
-	labelMediaTitle: string = '';
-	mediaSendSize: number = 0;
-	mediaSize: number = 99999999999999;
-	result?: string;
-	error?: string;
-	clear() {
-		this.labelMediaTitle = '';
-		this.mediaSendSize = 0;
-		this.mediaSize = 99999999999999;
-		this.result = undefined;
-		this.error = undefined;
-	}
-}