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:38:30 UTC
[incubator-dlab] branch DLAB-1784 created (now 14b8994)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1784
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 14b8994 [DLAB-1784]: Added possibility to cancel file uploading
This branch includes the following new commits:
new 14b8994 [DLAB-1784]: Added possibility to cancel file uploading
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/01: [DLAB-1784]: Added possibility to cancel
file uploading
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1784
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 14b89943313641ef87bdc2b8342e6d83239a1831
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon May 18 17:38:02 2020 +0300
[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 | 2 -
.../folder-tree/folder-tree.component.html | 21 +++----
.../folder-tree/folder-tree.component.ts | 68 +-------------------
8 files changed, 87 insertions(+), 132 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..2e158fe 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);
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..cdd4f89 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
@@ -9,7 +9,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 +24,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 +42,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 +96,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
return flatNode;
}
-
- ngOnInit() {
- }
-
ngOnDestroy() {
this.bucketDataService._bucketData.next([]);
this.subscriptions.unsubscribe();
@@ -159,63 +154,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 +210,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