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/04/14 08:14:20 UTC
[incubator-dlab] 05/05: Bucket browser for video
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1551
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 470a2d7c9ebc8097aab8613a7010d873f2e81c68
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Apr 14 11:12:50 2020 +0300
Bucket browser for video
---
.../app/core/services/bucket-browser.service.ts | 99 ++++++++++------------
.../bucket-browser/bucket-browser.component.html | 54 +++++++-----
.../bucket-browser/bucket-browser.component.scss | 47 ++++++++--
.../bucket-browser/bucket-browser.component.ts | 89 +++++++++----------
.../folder-tree/folder-tree.component.html | 2 +-
.../folder-tree/folder-tree.component.scss | 1 +
.../folder-tree/folder-tree.component.ts | 58 ++-----------
.../detail-dialog/detail-dialog.component.html | 4 +-
.../detail-dialog/detail-dialog.component.scss | 1 +
.../detail-dialog/detail-dialog.component.ts | 11 ++-
.../src/app/resources/resources.component.html | 6 +-
11 files changed, 181 insertions(+), 191 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
index 36f4a05..fca1ba5 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/bucket-browser.service.ts
@@ -5,6 +5,7 @@ export class TodoItemNode {
children: TodoItemNode[];
item: string;
id: string;
+ size: number;
}
/** Flat to-do item node with expandable and level information */
@@ -17,50 +18,39 @@ export class TodoItemFlatNode {
/**
* The Json object for to-do list data.
*/
-const TREE_DATA = {
+let TREE_DATA = {};
+const local = {
'dlab-local-shared-bucket': {
- 'file1': null,
- 'file2': null,
- 'file3': null,
- FirsrFolder: {
- folder: {
- folder: ['2008.cvs.bz2', 'airports.csv', 'carriers.csv'],
- folder1: ['2008.cvs.bz2', 'airports.csv', 'carriers.csv', 'file1',
- 'file2',
- 'file3',
- 'file4',
- 'file5',
- 'file6', '2008.cvs.bz2', '2008.cvs.bz2', 'airports.csv', 'carriers.csv', 'file1',
- 'file2',
- 'file3',
- 'file4',
- 'file5',
- 'file6',
- '2008.cvs.bz2', 'airports.csv', 'carriers.csv', 'file1',
- 'file2',
- 'file3',
- 'file4',
- 'file5',
- 'file6', '2008.cvs.bz2', '2008.cvs.bz2', 'airports.csv', 'carriers.csv', 'file1',
- 'file2',
- 'file3',
- 'file4',
- 'file5',
- 'file6'],
- folder2: []
- },
- 'folder1': [],
- 'file2': null,
- 'file3': null,
- },
- SecondFolder: [
- 'file1',
- 'file2',
- 'file3'
- ]
+ // folder: {
+ // folder: {
+ // folder: ['2008.cvs.bz2', 'airports.csv', 'carriers.csv'],
+ // folder2: []
+ // },
+ // 'folder1': [],
+ // 'file2': {size: 123.32},
+ // 'file3': {size: 5.34},
+ // },
+ '2008.cvs.bz2': {size: 125.34},
+ 'airports.csv': {size: 33.12},
+ 'carriers.csv': {size: 46.13},
+ }
+};
+const projecta = {
+ 'dlab-projecta-local-bucket': {
+ // folder: {
+ // folder: {
+ // folder: ['2008.cvs.bz2', 'airports.csv', 'carriers.csv'],
+ // folder2: []
+ // },
+ // 'folder1': [],
+ // 'file2': {size: 123.32},
+ // 'file3': {size: 5.34},
+ // },
+ '2008.cvs.bz2': {size: 125.34},
+ 'airports.csv': {size: 33.12},
+ 'carriers.csv': {size: 46.13},
}
};
-
@Injectable({
providedIn: 'root'
@@ -75,11 +65,7 @@ export class BucketBrowserService {
}
initialize() {
- // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
- // file node as children.
const data = this.buildFileTree(TREE_DATA, 0);
- console.log(data);
- // Notify the change.
this.dataChange.next(data);
}
@@ -92,28 +78,33 @@ export class BucketBrowserService {
const value = obj[key];
const node = new TodoItemNode();
node.item = key;
- if (value != null) {
+ if (!value.size) {
if (typeof value === 'object') {
node.children = this.buildFileTree(value, level + 1);
} else {
node.item = value;
}
+ } else {
+ node.size = value.size;
}
return accumulator.concat(node);
}, []);
}
- /** Add an item to to-do list */
- insertItem(parent: TodoItemNode, name: string, isFile) {
+ insertItem(parent: TodoItemNode, name, isFile) {
if (parent.children) {
- parent.children.push(isFile ? {item: name} as TodoItemNode : {item: name, children: []} as TodoItemNode);
- this.dataChange.next(this.data);
+ if (isFile) {
+ parent.children.push(name as TodoItemNode);
+ } else {
+ parent.children.unshift({item: name, children: []} as TodoItemNode);
+ this.dataChange.next(this.data);
+ }
}
}
- updateItem(node: TodoItemNode, name: string) {
- node.item = name;
+ updateItem(node: TodoItemNode, file) {
+ node.item = file;
this.dataChange.next(this.data);
}
@@ -123,4 +114,8 @@ export class BucketBrowserService {
this.dataChange.next(this.data);
}
}
+
+ initBucket(bucketType) {
+ bucketType !== 'project' ? TREE_DATA = local : TREE_DATA = projecta;
+ }
}
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 2a84c86..79c272d 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
@@ -24,53 +24,65 @@
</header>
<div class="dialog-content tabs">
<div class="submit m-bott-10 m-top-10">
- <button mat-raised-button type="button" class="butt action"><input type="file" (change)="handleFileInput($event.target.files)">Add file</button>
+ <button mat-raised-button type="button" class="butt action"><input type="file" multiple (change)="handleFileInput($event.target.files)">Add file</button>
<button mat-raised-button type="button" class="butt action" (click)="folderTreeComponent.addNewItem(selectedFolder, '', false)">Create folder</button>
</div>
- <p class="path"><span class="strong">Bucket path:</span><i> {{path}}</i></p>
+ <p class="path"><span>Bucket path:</span><span class="url"> {{path}}</span></p>
<div class="backet-wrapper" id="scrolling">
<div class="navigation">
<dlab-folder-tree (showFolderContent)=onFolderClick($event)> </dlab-folder-tree>
</div>
<div class="directory">
- <ul class="folder-tree" *ngIf="!uploadPaths.length">
+ <ul class="folder-tree" *ngIf="!addedFiles.length">
<li *ngFor="let file of folderItems" class="folder-item" >
+
<div class="folder-item-wrapper" *ngIf="file.children" (click)="showItem(file)">
<div class="name name-folder"><i class="material-icons folder-icon" >folder</i><span>{{file.item}}</span></div>
- <div class="size">2.4kb</div>
- </div>
- <div class="folder-item-wrapper" *ngIf="!file.children">
- <div class="name name-file"> <mat-checkbox [(ngModel)]="file.isSelected"></mat-checkbox><span>{{file.item}}</span></div>
-<!-- [checked]="descendantsAllSelected(node)"-->
-<!-- [indeterminate]="descendantsPartiallySelected(node)"-->
-<!-- (change)="todoItemSelectionToggle(node)"-->
- <div class="size">2.4kb</div>
+ <div class="size"></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)" *ngIf="!file.children">
+ <div class="name name-file">
+ <span class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file);$event.stopPropagation()" >
+ <span class="checked-checkbox" *ngIf="file.isSelected"></span>
+ </span>
+ <span class="item-name">{{file.item}}</span>
+ </div>
+ <div class="size">{{file.size}}MB</div>
+ <div class="progress-wrapper">
+<!-- <div class="progres" *ngIf="file.isSelected"><div class="bar"></div></div>-->
+ </div>
+ </div>
+
</li>
</ul>
<ul class="folder-tree">
- <li *ngFor="let file of uploadPaths" class="folder-item">
- <div class="name">{{file}}</div>
- <div class="size">2.4kb</div>
- <div class="progress-wrapper">
- <div class="progres">
- <div class="bar" [ngClass]="{'full': isUploading}">
- </div>
+ <li *ngFor="let file of addedFiles" class="folder-item">
+ <div class="folder-item-wrapper">
+ <div class="name">{{file.item}}</div>
+ <div class="size">{{file.size}} MB</div>
+ <div class="progress-wrapper">
+<!-- <div class="progres">-->
+<!-- <div class="bar" [ngClass]="{'full': isUploading}">-->
+<!-- -->
+<!-- </div>-->
+
+<!-- </div>-->
+ <mat-progress-bar mode="indeterminate" *ngIf="isUploading"></mat-progress-bar>
</div>
+ <div (click)="deleteAddedFile(file)"><i class="material-icons close">close</i></div>
</div>
- <div (click)="deleteAddedFile(file)">X</div>
</li>
</ul>
</div>
</div>
<div class="text-center m-top-30 m-bott-30">
<button type="button" class="butt" mat-raised-button (click)="this.dialogRef.close()">Close</button>
- <button *ngIf="!this.uploadPaths.length" type="button" class="butt butt-success" mat-raised-button (click)="downloadItems()">Download</button>
- <button *ngIf="this.uploadPaths.length !== 0" type="button" class="butt butt-success" mat-raised-button (click)="uploadItems()">Upload</button>
+ <button *ngIf="!this.addedFiles.length" type="button" class="butt butt-success" mat-raised-button (click)="downloadItems()" [disabled]="!selected?.length">Download</button>
+ <button *ngIf="this.addedFiles.length !== 0" type="button" class="butt butt-success" mat-raised-button (click)="uploadItems()">Upload</button>
</div>
</div>
</div>
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 d20c10f..7f004b4 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
@@ -19,10 +19,11 @@
.bucket-browser {
.path{
- margin-bottom: 8px;
- padding-left: 20px;
+ margin: 0 4px 10px 4px;
+ padding: 4px 4px 4px 20px;
+ color: rgba(0,0,0,.87);
.url{
-
+ font-weight: 600;
}
}
bottom: 0;
@@ -97,7 +98,7 @@
}
&-file{
padding-left: 4px;
- span{
+ span.item-name{
padding-left: 14px;
}
}
@@ -125,7 +126,11 @@
}
}
}
-
+ .material-icons.close{
+ font-size: 15px;
+ margin: 0 10px;
+ cursor: pointer;
+ }
.action {
display: flex;
justify-content: space-around;
@@ -173,14 +178,42 @@
color: #00bcd4;
transition: .3s ease-in-out;
}
- .mat-checkbox .mat-ripple-element {
- background-color: #00bcd4 !important;
+ .empty-checkbox{
+ border-color: #00bcd4
+ }
+ .progress-wrapper{
+ .progres{
+ border-color: #00bcd4 !important;
+ }
}
}
}
}
}
+.empty-checkbox {
+ width: 16px;
+ height: 16px;
+ border-radius: 2px;
+ border: 2px solid lightgrey;
+ margin-top: 2px;
+ position: relative;
+ &.checked {
+ border-color: #35afd5;
+ background-color: #35afd5;
+ }
+ .checked-checkbox {
+ top: 0px;
+ left: 4px;
+ width: 5px;
+ height: 10px;
+ border-bottom: 2px solid white;
+ border-right: 2px solid white;
+ position: absolute;
+ transform: rotate(45deg);
+ }
+}
+
.folder-item-name{
span{
color: #000;
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 58454cb..203bd08 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
@@ -21,11 +21,10 @@ import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
-
-// import { AccountCredentials, MangeUngitModel } from './bucket-browser.model';
import { ManageUngitService } from '../../core/services';
-import {logger} from 'codelyzer/util/logger';
+
import {FolderTreeComponent} from './folder-tree/folder-tree.component';
+import {BucketBrowserService, TodoItemNode} from '../../core/services/bucket-browser.service';
@Component({
selector: 'dlab-bucket-browser',
@@ -34,35 +33,36 @@ import {FolderTreeComponent} from './folder-tree/folder-tree.component';
})
export class BucketBrowserComponent implements OnInit {
filenames: Array<any> = [];
- uploadPaths = [];
+ addedFiles = [];
folderItems = [];
path = '';
- selectedFolderItems = [];
- // @ViewChild('tabGroupGit', { static: false }) tabGroupGit;
+
@ViewChild(FolderTreeComponent, {static: true}) folderTreeComponent;
private selectedFolder: any;
private isUploading: boolean;
+ private selected: any[];
constructor(
+ @Inject(MAT_DIALOG_DATA) public data: 'string',
public toastr: ToastrService,
public dialog: MatDialog,
public dialogRef: MatDialogRef<BucketBrowserComponent>,
private manageUngitService: ManageUngitService,
private _fb: FormBuilder,
+ private bucketBrowserService: BucketBrowserService
) {
}
ngOnInit() {
-
+ this.bucketBrowserService.initBucket(this.data);
+ this.bucketBrowserService.initialize();
+ // console.log(this.data);
}
showItem(item) {
const flatItem = this.folderTreeComponent.nestedNodeMap.get(item);
- // this.folderTreeComponent.treeControl.isExpanded(flatItem) = ;
this.folderTreeComponent.showItem(flatItem);
- // console.log(item);
- // this.onFolderClick(item);
}
handleFileInput(files) {
@@ -71,40 +71,46 @@ export class BucketBrowserComponent implements OnInit {
// const path = file.webkitRelativePath.split('/');
// }
// }
- console.log(files);
- this.filenames = Object['values'](files).map(v => v.name);
- this.uploadPaths = [...this.uploadPaths, ...this.filenames];
+ this.filenames = Object['values'](files).map(v => ({item: v.name, 'size': (v.size / 1048576).toFixed(2)} as unknown as TodoItemNode));
+ this.addedFiles = [...this.addedFiles, ...this.filenames];
+ }
+
+ toggleSelectedFile(file) {
+ file.isSelected = !file.isSelected;
+ this.selected = this.folderItems.filter(item => item.isSelected);
}
filesPicked(files) {
- console.log(files);
- // this.uploadPaths = [];
+ // console.log(files);
+
Array.prototype.forEach.call(files, file => {
- this.uploadPaths.push(file.webkitRelativePath);
+ this.addedFiles.push(file.webkitRelativePath);
});
- console.log(this.uploadPaths);
+ // console.log(this.addedFiles);
}
onFolderClick(event) {
this.selectedFolder = event.element1;
this.folderItems = event.element ? event.element.children : event.children;
+ // this.folderItems = this.folderItems.sort((a, b) => (a.children > b.children) ? 1 : -1)
+ // console.log(this.folderItems);
this.path = event.path;
-
+ this.folderItems.forEach(item => item.isSelected = false);
}
private upload(tree, path) {
tree.files.forEach(file => {
- this.uploadPaths.push(path + file.name);
+ this.addedFiles.push(path + file.name);
});
tree.directories.forEach(directory => {
const newPath = path + directory.name + '/';
- this.uploadPaths.push(newPath);
+ this.addedFiles.push(newPath);
this.upload(directory, newPath);
});
}
deleteAddedFile(file) {
- this.uploadPaths.splice(this.uploadPaths.indexOf(file), 1);
+ this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
}
uploadItems() {
@@ -112,44 +118,25 @@ export class BucketBrowserComponent implements OnInit {
setTimeout(() => this.upLoading(), 5000);
}
- downloadItems(){
- this.isUploading = true;
+ downloadItems() {
+ setTimeout(() => this.downloadItemsAction(), 1000);
}
upLoading() {
- this.uploadPaths.forEach(v => {
+ this.addedFiles.forEach(v => {
this.folderTreeComponent.addNewItem(this.selectedFolder, v, true);
});
- this.uploadPaths = [];
+ this.toastr.success(this.addedFiles.length === 1 ? 'File successfully uploaded' : 'Files successfully uploaded', 'Success!');
+ this.addedFiles = [];
this.isUploading = false;
}
+
+ downloadItemsAction() {
+ this.folderItems.forEach(item => item.isSelected = false);
+ this.toastr.success(this.selected.length === 1 ? 'File downloading started' : 'Files downloading started', 'Success!');
+ this.selected = this.folderItems.filter(item => item.isSelected);
+ }
}
-// @Component({
-// selector: 'dialog-result-example-dialog',
-// template: `
-// <div class="dialog-header">
-// <h4 class="modal-title"><i class="material-icons">priority_high</i>Warning</h4>
-// <button type="button" class="close" (click)="dialogRef.close()">×</button>
-// </div>
-// <div mat-dialog-content class="content">
-// <p>Account <span class="strong">{{ data.hostname }}</span> will be decommissioned.</p>
-// <p class="m-top-20"><span class="strong">Do you want to proceed?</span></p>
-// </div>
-// <div class="text-center">
-// <button type="button" class="butt" mat-raised-button (click)="dialogRef.close()">No</button>
-// <button type="button" class="butt butt-success" mat-raised-button (click)="dialogRef.close(true)">Yes</button>
-// </div>
-// `,
-// styles: [`
-// .content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400 }
-// `]
-// })
-// export class ConfirmDeleteAccountDialog {
-// constructor(
-// public dialogRef: MatDialogRef<ConfirmDeleteAccountDialog>,
-// @Inject(MAT_DIALOG_DATA) public data: any
-// ) { }
-// }
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 0d1c480..b663e78 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
@@ -11,7 +11,7 @@
<button mat-icon-button disabled></button>
<mat-form-field>
<mat-label>New folder</mat-label>
- <input matInput #itemValue placeholder="Ex. Lettuce">
+ <input matInput #itemValue>
</mat-form-field>
<button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
</mat-tree-node>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
index ffbf47d..e9902af 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
@@ -27,6 +27,7 @@
.mat-tree-node{
cursor: pointer;
transition: .3s;
+ overflow: unset;
&:hover{
color: #00bcd4;
i{
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 7070c25..774a3c8 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
@@ -3,47 +3,27 @@ import {SelectionModel} from '@angular/cdk/collections';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BucketBrowserService, TodoItemFlatNode, TodoItemNode} from '../../../core/services/bucket-browser.service';
-import {Logger} from 'codelyzer/util/logger';
-class ChecklistDatabase {
-}
-/**
- * @title Tree with checkboxes
- */
-
@Component({
selector: 'dlab-folder-tree',
templateUrl: './folder-tree.component.html',
styleUrls: ['./folder-tree.component.scss']
})
-export class FolderTreeComponent implements AfterViewInit{
+export class FolderTreeComponent implements OnInit{
@Output() showFolderContent: EventEmitter<any> = new EventEmitter();
path = [];
selectedFolder: TodoItemFlatNode;
- /** Map from flat node to nested node. This helps us finding the nested node to be modified */
flatNodeMap = new Map<TodoItemFlatNode, TodoItemNode>();
-
- /** Map from nested node to flattened node. This helps us to keep the same object for selection */
nestedNodeMap = new Map<TodoItemNode, TodoItemFlatNode>();
-
- /** A selected parent node to be inserted */
selectedParent: TodoItemFlatNode | null = null;
-
- /** The new item's name */
newItemName = '';
- isOpened = {
-
- };
treeControl: FlatTreeControl<TodoItemFlatNode>;
-
treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
-
dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
- /** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
constructor(private bucketBrowserService: BucketBrowserService) {
@@ -55,14 +35,9 @@ export class FolderTreeComponent implements AfterViewInit{
bucketBrowserService.dataChange.subscribe(data => {
this.dataSource.data = data;
- console.log(this.dataSource);
});
}
- // ngAfterViewInit(): void {
- //
- // }
-
getLevel = (node: TodoItemFlatNode) => node.level;
isExpandable = (node: TodoItemFlatNode) => node.expandable;
@@ -73,9 +48,6 @@ export class FolderTreeComponent implements AfterViewInit{
hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
- /**
- * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
- */
transformer = (node: TodoItemNode, level: number) => {
const existingNode = this.nestedNodeMap.get(node);
const flatNode = existingNode && existingNode.item === node.item
@@ -87,18 +59,15 @@ export class FolderTreeComponent implements AfterViewInit{
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;
- }
+ };
- ngAfterViewInit() {
+ ngOnInit() {
const subject = this.dataSource._flattenedData;
- let firstSelected;
subject.subscribe((data) => {
- firstSelected = data[0];
- // this.selectedFolder = ;
this.treeControl.expand(data[0]);
+ this.showItem(data[0]);
});
- this.selectedFolder = firstSelected;
}
showItem(el) {
@@ -112,7 +81,6 @@ export class FolderTreeComponent implements AfterViewInit{
element1: el,
path: path.join('/')
};
- console.log(data);
this.showFolderContent.emit(data);
}
@@ -127,9 +95,6 @@ export class FolderTreeComponent implements AfterViewInit{
return this.path;
}
-
-
- /** Whether all the descendants of the node are selected. */
descendantsAllSelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const descAllSelected = descendants.every(child =>
@@ -138,14 +103,12 @@ export class FolderTreeComponent implements AfterViewInit{
return descAllSelected;
}
- /** Whether part of the descendants are selected */
descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const result = descendants.some(child => this.checklistSelection.isSelected(child));
return result && !this.descendantsAllSelected(node);
}
- /** Toggle the to-do item selection. Select/deselect all the descendants node */
todoItemSelectionToggle(node: TodoItemFlatNode): void {
this.checklistSelection.toggle(node);
const descendants = this.treeControl.getDescendants(node);
@@ -160,13 +123,11 @@ export class FolderTreeComponent implements AfterViewInit{
this.checkAllParentsSelection(node);
}
- /** Toggle a leaf to-do item selection. Check all the parents to see if they changed */
todoLeafItemSelectionToggle(node: TodoItemFlatNode): void {
this.checklistSelection.toggle(node);
this.checkAllParentsSelection(node);
}
- /* Checks all the parents when a leaf node is selected/unselected */
checkAllParentsSelection(node: TodoItemFlatNode): void {
let parent: TodoItemFlatNode | null = this.getParentNode(node);
while (parent) {
@@ -175,7 +136,6 @@ export class FolderTreeComponent implements AfterViewInit{
}
}
- /** Check root node checked state and change it accordingly */
checkRootNodeSelection(node: TodoItemFlatNode): void {
const nodeSelected = this.checklistSelection.isSelected(node);
const descendants = this.treeControl.getDescendants(node);
@@ -189,7 +149,6 @@ export class FolderTreeComponent implements AfterViewInit{
}
}
- /* Get the parent node of a node */
getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
const currentLevel = this.getLevel(node);
@@ -209,19 +168,14 @@ export class FolderTreeComponent implements AfterViewInit{
return null;
}
- /** Select the category so we can insert the new item. */
- addNewItem(node: TodoItemFlatNode, name, isFile) {
- console.log(node);
+ addNewItem(node: TodoItemFlatNode, file, isFile) {
const parentNode = this.flatNodeMap.get(node);
- this.bucketBrowserService.insertItem(parentNode!, name, isFile);
+ this.bucketBrowserService.insertItem(parentNode!, file, isFile);
this.treeControl.expand(node);
}
- /** Save the node to database */
saveNode(node: TodoItemFlatNode, itemValue: string) {
const nestedNode = this.flatNodeMap.get(node);
- console.log(nestedNode);
- console.log(itemValue);
this.bucketBrowserService.updateItem(nestedNode!, itemValue);
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index 4977b22..8900116 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -60,14 +60,14 @@
class="strong">{{ notebook.password }}</span></p>
<p class="m-top-30">{{ DICTIONARY[PROVIDER].personal_storage }}: </p>
- <div class="links_block">
+ <div class="links_block" (click)="bucketBrowser('project')">
<p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY[PROVIDER].account }}
<span class="bucket-info">{{ notebook.account_name}}</span></p>
<p *ngIf="notebook.bucket_name">{{ DICTIONARY[PROVIDER].container }} <span
class="bucket-info">{{ notebook.bucket_name }}</span></p>
</div>
<p>Shared endpoint bucket: </p>
- <div class="links_block">
+ <div class="links_block" (click)="bucketBrowser('endpoint')">
<p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}
<span class="bucket-info">{{ notebook.shared_account_name}}</span></p>
<p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
index 2849ce0..12be81b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
@@ -86,4 +86,5 @@
padding-left: 7px;
font-weight: 600;
color: $blue-grey-color;
+ cursor: pointer;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index db097f3..0d76b75 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -20,12 +20,13 @@
import { Component, ViewChild, OnInit, Inject } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
import { DateUtils, CheckUtils } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
import { DataengineConfigurationService } from '../../../core/services';
import { CLUSTER_CONFIGURATION } from '../../computational/computational-resource-create-dialog/cluster-configuration-templates';
+import {BucketBrowserComponent} from '../../bucket-browser/bucket-browser.component';
@Component({
selector: 'detail-dialog',
@@ -51,7 +52,8 @@ export class DetailDialogComponent implements OnInit {
private dataengineConfigurationService: DataengineConfigurationService,
private _fb: FormBuilder,
public dialogRef: MatDialogRef<DetailDialogComponent>,
- public toastr: ToastrService
+ public toastr: ToastrService,
+ private dialog: MatDialog,
) {
this.notebook = data;
}
@@ -120,4 +122,9 @@ export class DetailDialogComponent implements OnInit {
? (control.value && control.value !== null && CheckUtils.isJSON(control.value) ? null : { valid: false })
: null;
}
+
+ public bucketBrowser(type): void {
+ this.dialog.open(BucketBrowserComponent, { data: type, panelClass: 'modal-fullscreen' })
+ .afterClosed().subscribe();
+ }
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
index ab088b6..38e388e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
@@ -46,9 +46,9 @@
</div>
<div>
- <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser()">
- <i class="material-icons"></i>Bucket browser
- </button>
+<!-- <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser()">-->
+<!-- <i class="material-icons"></i>Bucket browser-->
+<!-- </button>-->
<button mat-raised-button class="butt butt-tool" (click)="manageUngit()">
<i class="material-icons"></i>Git credentials
</button>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org