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 <di1...@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-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org