You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/05/18 14:42:00 UTC
[incubator-dlab] branch develop updated: [DLAB-1784]: Added
possibility to cancel file uploading (#758)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/develop by this push:
new 86bd0e9 [DLAB-1784]: Added possibility to cancel file uploading (#758)
86bd0e9 is described below
commit 86bd0e9f9fd07829077234f1a2a15619b7c4b978
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Mon May 18 17:41:52 2020 +0300
[DLAB-1784]: Added possibility to cancel file uploading (#758)
[DLAB-1784]: Added possibility to cancel file uploading
---
.../bucket-browser/bucket-browser.component.html | 27 +++-----
.../bucket-browser/bucket-browser.component.scss | 4 +-
.../bucket-browser/bucket-browser.component.ts | 15 +++--
.../bucket-confirmation-dialog.component.html | 73 ++++++++++++++--------
.../bucket-confirmation-dialog.component.scss | 9 +++
.../bucket-browser/bucket-data.service.ts | 3 -
.../folder-tree/folder-tree.component.html | 21 +++----
.../folder-tree/folder-tree.component.ts | 71 +--------------------
8 files changed, 88 insertions(+), 135 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index d8317fb..9093eba 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -96,21 +96,15 @@
</button>
</div>
<p class="path"><span>Bucket path:</span>
- <span class="url ellipsis">
- <span *ngFor="let folder of this.objectPath">
- <span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0"> <i class="material-icons">
- chevron_right
- </i> </span>
- <span class="url-folder" (click)="folderTreeComponent.showItem(folder);">{{folder.item}}</span>
- </span>
- </span></p>
-
-<!-- <div class="navigation-line">-->
-<!-- <div class="filter-files">-->
-<!-- <input _ngcontent-yns-c13="" [(ngModel)]="searchValue" (keyup)=filterObjects($event) class="form-control filter-field" placeholder="Filter by name" type="text">-->
-<!-- </div>-->
-<!-- </div>-->
-
+ <span class="url ellipsis">
+ <span *ngFor="let folder of this.objectPath">
+ <span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0"> <i class="material-icons">
+ chevron_right
+ </i> </span>
+ <span class="url-folder" (click)="folderTreeComponent.showItem(folder);">{{folder.item}}</span>
+ </span>
+ </span>
+ </p>
<div class="bucket-wrapper" [ngClass]="{'added-upload': addedFiles.length}" id="scrolling">
<div class="backet-selection" [ngClass]="{'opened': isSelectionOpened}">
<div class="button-wrapper">
@@ -171,9 +165,6 @@
</div>
<div class="size size-folder">-</div>
<div class="date" *ngIf="!file.isDownloading">-</div>
-<!-- <div class="progress-wrapper">-->
-<!-- <div class="progres" *ngIf="file.isSelected"><div class="bar"></div></div>-->
-<!-- </div>-->
</div>
<div class="folder-item-wrapper" (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
<div class="name name-file">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index 393f2a2..fcaea993 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -551,9 +551,9 @@ input[type='file'] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- font-weight: 600;
+ font-weight: 500;
color: #455c74;
- font-size: 14px;
+ font-size: 13px;
background: #f6fafe;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index 2fce5e4..2b12dec 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -191,8 +191,15 @@ export class BucketBrowserComponent implements OnInit {
}
public deleteAddedFile(file) {
- console.log(file);
- file.request.unsubscribe();
+ if ( file.subscr ) {
+ this.dialog.open(BucketConfirmationDialogComponent, {data: {items: file, type: 'cancel-uploading'} , width: '550px'})
+ .afterClosed().subscribe((res) => {
+ res && file.subscr.unsubscribe();
+ if (!res) {
+ return;
+ }
+ });
+ }
this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
}
@@ -214,20 +221,18 @@ export class BucketBrowserComponent implements OnInit {
const uploading = this.addedFiles.filter(v => v.status === 'uploading');
if (waitUploading.length && uploading.length < 10) {
file.status = 'uploading';
- file.request.subscribe((event: any) => {
+ file.subscr = file.request.subscribe((event: any) => {
if (event.type === HttpEventType.UploadProgress) {
file.progress = Math.round(99 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.bucketDataService.refreshBucketdata(this.bucketName, this.data.endpoint);
file.status = 'uploaded';
delete file.request;
- console.log(file);
this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
}
}, error => {
file.status = 'failed';
delete file.request;
- console.log(file);
this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
}
);
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
index c40fba8..495b76c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
@@ -18,47 +18,57 @@
-->
<div id="dialog-box" class="confirmation-dialog">
+
<header class="dialog-header">
<h4 class="modal-title">
<span *ngIf="data.type === 'delete'">Delete</span>
<span *ngIf="data.type === 'upload-dublicat'">Resolve conflicts</span>
+ <span *ngIf="data.type === 'cancel-uploading'">Cancel</span>
</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
+
<div class="dialog-content">
<div class="content-box">
<div *ngIf="data.type === 'delete'">
- <mat-list class="resources">
- <mat-list-item class="list-header">
+ <mat-list class="resources">
- <div class="object">Object</div>
- <div class="size">Size</div>
- </mat-list-item>
- <div class="scrolling-content delete-list" id="scrolling">
- <mat-list-item *ngFor="let object of data.items" class="delete-item">
- <div class="object">
- <span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
- <span *ngIf="!object['children']"><i class="material-icons folder-icon file-icon" >description</i></span>
- <div class="ellipsis"
- matTooltip="{{object['item']}}"
- matTooltipPosition="above"
- matTooltipShowDelay="1000"
- [matTooltipClass]="'bucket-item-tooltip'">{{object['item']}}</div>
- </div>
- <div class="size">{{object['children'] ? '-' : object['object'].size}}</div>
+ <mat-list-item class="list-header">
+ <div class="object">Object</div>
+ <div class="size">Size</div>
</mat-list-item>
+
+ <div class="scrolling-content delete-list" id="scrolling">
+
+ <mat-list-item *ngFor="let object of data.items" class="delete-item">
+ <div class="object">
+ <span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
+ <span *ngIf="!object['children']"><i class="material-icons folder-icon file-icon" >description</i></span>
+ <div class="ellipsis"
+ matTooltip="{{object['item']}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'bucket-item-tooltip'">{{object['item']}}</div>
+ </div>
+ <div class="size">{{object['children'] ? '-' : object['object'].size}}</div>
+ </mat-list-item>
+
+ </div>
+ </mat-list>
+
+ <div mat-dialog-content class="bottom-message" *ngIf="data.type === 'delete'">
+ <span class="confirm-message" *ngIf="isFolders">All affected objects will be deleted.</span>
+ <span class="confirm-message" *ngIf="!isFolders"><span *ngIf="data.items.length > 1">These objects</span><span *ngIf="data.items.length === 1">This object</span> will be deleted.</span>
+ </div>
+
+ <div class="text-center m-top-20">
+ <p class="strong">Do you want to proceed?</p>
</div>
- </mat-list>
- <div mat-dialog-content class="bottom-message" *ngIf="data.type === 'delete'">
- <span class="confirm-message" *ngIf="isFolders">All affected objects will be deleted.</span>
- <span class="confirm-message" *ngIf="!isFolders"><span *ngIf="data.items.length > 1">These objects</span><span *ngIf="data.items.length === 1">This object</span> will be deleted.</span>
- </div>
- <div class="text-center m-top-20">
- <p class="strong">Do you want to proceed?</p>
- </div>
</div>
+
<div *ngIf="data.type === 'upload-dublicat'">
- <p><span
+ <p>
+ <span
class="strong upload-item-name ellipsis"
matTooltip="{{data.items}}"
matTooltipPosition="above"
@@ -80,7 +90,15 @@
<span class="repeat-message" (click)="toggleActionForAll();$event.stopPropagation()">Repeat for all remaining conflicts</span>
</div>
</div>
- <div class="text-center m-top-20" *ngIf="data.type === 'delete'">
+
+ <div *ngIf="data.type === 'cancel-uploading'">
+ <p class="upload-message"><span>Cancel uploading file </span> <span class="strong ellipsis upload-item-name">{{data.items.name}}.</span></p>
+ <div class="text-center m-top-20">
+ <p class="strong">Do you want to proceed?</p>
+ </div>
+ </div>
+
+ <div class="text-center m-top-20" *ngIf="data.type === 'delete' || data.type === 'cancel-uploading'">
<button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">No</button>
<button mat-raised-button type="button" class="butt butt-success action" (click)="dialogRef.close(true)">Yes</button>
</div>
@@ -89,6 +107,7 @@
<button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
<button mat-raised-button type="button" class="butt butt-success action" (click)="submitResolving()">Continue</button>
</div>
+
</div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
index a64bc54..e705884 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
@@ -160,3 +160,12 @@
}
}
}
+.upload-message{
+ display: flex;
+ .upload-item-name{
+ max-width: 340px;
+ display: block;
+ padding-left: 4px;
+ }
+}
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index eb0edb8..9cbabec 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -26,8 +26,6 @@ const array = [{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder11/',
{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '3.jpg', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '2.jpg', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '1test', 'size': '112 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57 [...]
{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.jpg', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test1', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22: [...]
-// const array = [];
-
@Injectable()
export class BucketDataService {
public _bucketData = new BehaviorSubject<any>(null);
@@ -115,7 +113,6 @@ export class BucketDataService {
}
public processFolderArray = (acc, curr) => {
- // const files = curr.object.split('/').filter(x => x.length > 0);
const files = curr.object.split('/');
this.processFiles(files, acc, curr);
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
index 715d2d1..b67d4b3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
@@ -1,13 +1,14 @@
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
- <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent="17" [ngStyle]="{'display': 'none'}">
- <button mat-icon-button disabled></button>
- <!-- <mat-checkbox class="checklist-leaf-node"-->
- <!-- [checked]="checklistSelection.isSelected(node)"-->
- <!-- (change)="todoLeafItemSelectionToggle(node)"></mat-checkbox>-->
- {{node.item}}
-
-</mat-tree-node>
+ <mat-tree-node
+ *matTreeNodeDef="let node"
+ matTreeNodeToggle matTreeNodePadding
+ matTreeNodePaddingIndent="17"
+ [ngStyle]="{'display': 'none'}"
+ >
+ <button mat-icon-button disabled></button>
+ {{node.item}}
+ </mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="17" class="input-node">
<form class="add-folder-form" id="folder-form">
@@ -44,9 +45,6 @@
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
-<!-- <mat-checkbox [checked]="descendantsAllSelected(node)"-->
-<!-- [indeterminate]="descendantsPartiallySelected(node)"-->
-<!-- (change)="todoItemSelectionToggle(node)"></mat-checkbox>-->
<div
(click)="showItem(node)"
class="folder-item-line"
@@ -63,6 +61,5 @@
{{node.item}}
</span>
</div>
-<!-- <button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>-->
</mat-tree-node>
</mat-tree>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index 5ef672b..f207661 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -1,5 +1,4 @@
-import {Component, OnInit, AfterViewInit, Output, EventEmitter, OnDestroy, Input} from '@angular/core';
-import {SelectionModel} from '@angular/cdk/collections';
+import {Component, Output, EventEmitter, OnDestroy, Input} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BucketBrowserService, TodoItemFlatNode, TodoItemNode} from '../../../core/services/bucket-browser.service';
@@ -9,7 +8,7 @@ import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/form
import {ErrorStateMatcher} from '@angular/material/core';
import {PATTERNS} from '../../../core/util';
import {ToastrService} from 'ngx-toastr';
-import {HttpEventType, HttpResponse} from '@angular/common/http';
+import {HttpResponse} from '@angular/common/http';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -24,7 +23,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
styleUrls: ['./folder-tree.component.scss']
})
-export class FolderTreeComponent implements OnInit, OnDestroy {
+export class FolderTreeComponent implements OnDestroy {
@Output() showFolderContent: EventEmitter<any> = new EventEmitter();
@Output() disableAll: EventEmitter<any> = new EventEmitter();
@@ -42,7 +41,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
public treeControl: FlatTreeControl<TodoItemFlatNode>;
private treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
public dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
- private checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
private folderCreationParent;
constructor(
@@ -97,10 +95,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
return flatNode;
}
-
- ngOnInit() {
- }
-
ngOnDestroy() {
this.bucketDataService._bucketData.next([]);
this.subscriptions.unsubscribe();
@@ -159,63 +153,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
}
}
- private descendantsAllSelected(node: TodoItemFlatNode): boolean {
-
- const descendants = this.treeControl.getDescendants(node);
- const descAllSelected = descendants.every(child =>
- this.checklistSelection.isSelected(child)
- );
- return descAllSelected;
- }
-
- private descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
-
- const descendants = this.treeControl.getDescendants(node);
- const result = descendants.some(child => this.checklistSelection.isSelected(child));
- return result && !this.descendantsAllSelected(node);
- }
-
- private todoItemSelectionToggle(node: TodoItemFlatNode): void {
- this.checklistSelection.toggle(node);
- const descendants = this.treeControl.getDescendants(node);
- this.checklistSelection.isSelected(node)
-? this.checklistSelection.select(...descendants)
- : this.checklistSelection.deselect(...descendants);
-
- // Force update for the parent
- descendants.every(child =>
- this.checklistSelection.isSelected(child)
-);
- this.checkAllParentsSelection(node);
-}
-
- private todoLeafItemSelectionToggle(node: TodoItemFlatNode): void {
- this.checklistSelection.toggle(node);
- this.checkAllParentsSelection(node);
- }
-
- private checkAllParentsSelection(node: TodoItemFlatNode): void {
- let parent: TodoItemFlatNode | null = this.getParentNode(node);
- while (parent) {
- this.checkRootNodeSelection(parent);
- parent = this.getParentNode(parent);
- }
- }
-
-
- private checkRootNodeSelection(node: TodoItemFlatNode): void {
- const nodeSelected = this.checklistSelection.isSelected(node);
- const descendants = this.treeControl.getDescendants(node);
- const descAllSelected = descendants.every(child =>
- this.checklistSelection.isSelected(child)
- );
- if (nodeSelected && !descAllSelected) {
- this.checklistSelection.deselect(node);
- } else if (!nodeSelected && descAllSelected) {
- this.checklistSelection.select(node);
- }
- }
-
private getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
const currentLevel = this.getLevel(node);
if (currentLevel < 1) {
@@ -272,8 +209,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
this.bucketDataService.refreshBucketdata(bucket, this.endpoint);
this.toastr.success('Folder successfully created!', 'Success!');
this.resetForm();
- this.folderFormControl.updateValueAndValidity();
- this.folderFormControl.markAsPristine();
this.folderCreating = false;
this.folderCreationParent = null;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org