Merge pull request #48 from DivergentEuropeans/feature/add-create-dir…

…-right-click

Add deletion queue so that objects in deletion status can't get messed with from FE context

src/app/components/create-folder-modal/create-folder-modal.component.html

@@ -16,7 +16,7 @@ <h2 mat-dialog-title class="create-folder-content-body">Create a Directory</h2>
 <mat-dialog-content style="padding-top: 30px;">
   Directory name:
   <mat-form-field style="margin-left: 15px;">
-    <input #name name="name" [pattern]="folderPattern" matInput type="text"
+    <input id="create-directory-input" name="name" [pattern]="folderPattern" matInput type="text"
       [(ngModel)]="folderName">
     <button class="create-folder-clear-button" mat-button *ngIf="folderName" matSuffix mat-icon-button aria-label="Clear" (click)="folderName=''">
       <mat-icon class="create-folder-clear-icon">close</mat-icon>
@@ -27,7 +27,7 @@ <h2 mat-dialog-title class="create-folder-content-body">Create a Directory</h2>
 <mat-dialog-content>
   Path:
   <mat-form-field style="margin-left: 80px;">
-    <input [pattern]="empty" matInput type="text"
+    <input id="create-path-input" [pattern]="empty" matInput type="text"
       [(ngModel)]="folderPath">
     <button class="create-folder-clear-button" mat-button *ngIf="folderPath" matSuffix mat-icon-button aria-label="Clear" (click)="folderPath=''">
       <mat-icon class="create-folder-clear-icon">close</mat-icon>

src/app/components/create-folder-modal/create-folder-modal.component.ts

@@ -21,9 +21,8 @@ export class CreateFolderModal {
   private folderName = "";
   private folderPath = "";
   private folderPathObtainedFromNode = "";
-  private hasFolderBeenExpandedBefore = false;
   // Block unallowed characters and "." and ".." etc
-  private folderPattern = /(([^\x00-\x1F!"$'\(\)*,\/:;<>\?\[\\\]\{\|\}\x7F\s]+)$)/; 
+  public folderPattern = /(([^\x00-\x1F!"$'\(\)*,\/:;<>\?\[\\\]\{\|\}\x7F\s]+)$)/; 
   onCreate = new EventEmitter();
 
   constructor(
@@ -37,18 +36,20 @@ export class CreateFolderModal {
       this.folderPath = "";
     }
     this.folderPathObtainedFromNode = this.folderPath;
-    if (node.expanded) {
-      this.hasFolderBeenExpandedBefore = true;
-    }
   }
 
   createFolder() {
-    if (this.folderPath != this.folderPathObtainedFromNode || this.hasFolderBeenExpandedBefore == false) { 
+    let onCreateResponse = new Map();
+
+    onCreateResponse.set("pathAndName", this.folderPath + "/" + this.folderName);
+    if (this.folderPath != this.folderPathObtainedFromNode) { 
       //If the user changed the path obtained from the node or the node has never been opened...
-      this.onCreate.emit([this.folderPath + "/" + this.folderName, false]); //then we can't update the tree.
+      onCreateResponse.set("updateExistingTree", false); //then we can't update the tree.
     } else { //If the user kept the path obtained from the node...
-      this.onCreate.emit([this.folderPath + "/" + this.folderName, true]); //then we can add that new folder into the existing node.
+      onCreateResponse.set("updateExistingTree", true); //then we can add that new folder into the existing node.
     }
+
+    this.onCreate.emit(onCreateResponse); //then we can't update the tree.
   }
 
 }

src/app/components/filebrowseruss/filebrowseruss.component.ts

@@ -220,6 +220,10 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
   }
 
   showDeleteDialog(rightClickedFile: any) {
+    if (this.checkIfInDeletionQueueAndMessage(rightClickedFile.path, "This is already being deleted.") == true) {
+      return;
+    }
+
     const fileDeleteConfig = new MatDialogConfig();
     fileDeleteConfig.data = {
       event: rightClickedFile,
@@ -233,19 +237,27 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
   }
 
   showCreateFolderDialog(rightClickedFile: any) {
+    if (rightClickedFile.path) { // If this came from a node object
+      if (this.checkIfInDeletionQueueAndMessage(rightClickedFile.path, "Cannot create a directory inside a directory queued for deletion.") == true) {
+        return;
+      }  
+    } else { // Or if this is just a path
+      if (this.checkIfInDeletionQueueAndMessage(rightClickedFile, "Cannot create a directory inside a directory queued for deletion.") == true) {
+        return;
+      }
+    }
+
     const folderCreateConfig = new MatDialogConfig();
     folderCreateConfig.data = {
       event: rightClickedFile,
       width: '600px'
     }
 
     let fileDeleteRef = this.dialog.open(CreateFolderModal, folderCreateConfig);
-    const deleteFileOrFolder = fileDeleteRef.componentInstance.onCreate.subscribe(result => {
-      if (result[1] == true) { //If the user wishes to add a folder to a node...
-        this.createFolder(result[0], this.rightClickedFile, true);
-      } else {
-        this.createFolder(result[0], this.rightClickedFile, false);
-      }
+    const createFolder = fileDeleteRef.componentInstance.onCreate.subscribe(onCreateResponse => {
+      /* pathAndName - Path and name obtained from create folder prompt
+      updateExistingTree - Should the existing tree update or fetch a new one */
+      this.createFolder(onCreateResponse.get("pathAndName"), rightClickedFile, onCreateResponse.get("updateExistingTree"));
     });
   }
 
@@ -557,45 +569,42 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
       .subscribe(
         resp => {
           this.log.debug('Created: ' + pathAndName);
-          if (update) {
-            let someData = this.ussSrv.getFileMetadata(pathAndName);
-            someData.subscribe(
-              result => {
-                if (result) {
-                  let nodeToAdd = {
-                    id: node.children.length,
-                    label: this.getNameFromPathAndName(pathAndName),
-                    mode: result.mode,
-                    createdAt: result.createdAt,
-                    data: "Folder",
-                    directory: true,
-                    expandedIcon: "fa fa-folder-open",
-                    collapsedIcon: "fa fa-folder",
-                    name: this.getNameFromPathAndName(pathAndName),
-                    parent: node,
-                    path: pathAndName,
-                    size: result.size
-                  }
-                  node.children.push(nodeToAdd);
-                } else {
-                  let path = this.getPathFromPathAndName(pathAndName);
-                  if (path == this.path) { // If we are creating a folder at the top-most level
-                    this.displayTree(this.path, true); // addChild only works for children.
-                  } else {
-                    this.addChild(node);
-                  }
-                  this.newPath = pathAndName;
+          let path = this.getPathFromPathAndName(pathAndName);
+          let someData = this.ussSrv.getFileMetadata(pathAndName);
+          someData.subscribe(
+            result => {
+              // If the right-clicked 'node' is the correct, valid node
+              if ((node.expanded && node.children) && (node.path == path)) {
+                let nodeToAdd = {
+                  id: node.children.length,
+                  children: [],
+                  label: this.getNameFromPathAndName(pathAndName),
+                  mode: result.mode,
+                  createdAt: result.createdAt,
+                  data: "Folder",
+                  directory: true,
+                  expandedIcon: "fa fa-folder-open",
+                  collapsedIcon: "fa fa-folder",
+                  name: this.getNameFromPathAndName(pathAndName),
+                  parent: node,
+                  path: pathAndName,
+                  size: result.size
                 }
-              }); 
-          } else {
-            let path = this.getPathFromPathAndName(pathAndName);
-            if (path == this.path) { // If we are creating a folder at the top-most level
-              this.displayTree(this.path, true); // addChild only works for children.
-            } else {
-              this.addChild(node);
+                node.children.push(nodeToAdd); //Add node to right clicked node
+              }
+              // ..otherwise treat folder creation without any context.
+              else {
+                if (path == this.path) { // If we are creating a folder at the parent level
+                  this.displayTree(path, true);
+                } else if (update) { // If we want to update the tree
+                  this.addChild(node);
+                } else { // If we want a fresh fetch of the tree
+                  this.displayTree(pathAndName, false); // ...plop the Explorer into the newly created location.
+                }
+                this.newPath = pathAndName;
+              }
             }
-            this.newPath = pathAndName;
-          }
+          ); 
         },
         error => { 
           if (error.status == '500') { //Internal Server Error
@@ -654,7 +663,6 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
         this.removeChild(rightClickedFile);
         this.deletionQueue.delete(rightClickedFile.path);
         rightClickedFile.styleClass = "";
-
       },
       error => {
         if (error.status == '500') { //Internal Server Error
@@ -759,6 +767,15 @@ export class FileBrowserUSSComponent implements OnInit, OnDestroy {//IFileBrowse
       this.fileExplorerUSSInput.nativeElement.value="/";
     }
   }
+
+  checkIfInDeletionQueueAndMessage(pathAndName: string, message: string): boolean {
+    if (this.deletionQueue.has(pathAndName)) {
+      this.snackBar.open('Deletion in progress: ' + pathAndName + "' " + message, 
+            'Dismiss', { duration: 5000, panelClass: 'center' });
+      return true;
+    } 
+    return false;
+  }
 }
 
 

src/app/components/zlux-file-explorer/zlux-file-explorer.component.html

@@ -13,9 +13,7 @@
 <nav data-tabs class="fileexplorer-tabs" role="navigation">
   <div class="fileexplorer-tabs-trigger" tabindex="-1">
     <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
-    <!-- <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg> -->
+
   </div>
   <ul class="fileexplorer-tabs-list" role="tablist">
     <li *ngFor="let tab of tabs;" [ngClass]="tab.index == currentIndex ? 'fileexplorer-tab-selected' : 'fileexplorer-tab'" (click)="setIndex(tab.index)" id="tab-{{tab.index}}" role="presentation">

src/app/components/zlux-file-explorer/zlux-file-explorer.component.ts

@@ -118,6 +118,14 @@ export class ZluxFileExplorerComponent implements OnInit, OnDestroy {
     this.ussComponent.deleteFileOrFolder(pathAndName);
   }
 
+  createDirectory(pathAndName?: string) {
+    if (pathAndName) {
+      this.ussComponent.showCreateFolderDialog(pathAndName);
+    } else {
+      this.ussComponent.showCreateFolderDialog(this.ussComponent.getSelectedPath());
+    }
+  }
+
   hideExplorers() {
     if (this.ussComponent) {
       this.ussComponent.hideExplorer = true;