From 8f085cd1ca20b2b4e3d4e6dc6d084191237510e9 Mon Sep 17 00:00:00 2001
From: chinonso098 <chinonsoakolam@outlook.com>
Date: Sun, 15 Sep 2024 13:49:28 -0400
Subject: [PATCH] file tree view still in progress

---
 .../filetreeview/filetreeview.component.html  | 20 ++---
 .../filetreeview/filetreeview.component.ts    | 74 +++++++++++--------
 .../fileexplorer/fileexplorer.component.html  |  2 +-
 .../fileexplorer/fileexplorer.component.ts    | 29 ++++++--
 src/app/system-files/file.tree.node.ts        |  1 +
 5 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
index 34484cd..c698742 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.html
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -5,7 +5,7 @@
 
 <ul class="ul-file-tree-view" id="fileExplrTreeView">
     <li class="li-file-tree-view0">
-        <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection()">
+        <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection('/')">
             <div class="span fxtreeview-head"> 
                 <figure class="fxtreeview-figure">  
                     <div class="fxtreeview-img" >
@@ -17,18 +17,18 @@
                     </div>
                 </figure>
             </div>
-            <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/this_pc_94.png'"/> </figure> </div>
-            <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> This PC</p></div>
+            <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/this_pc_94.png'"/></figure></div>
+            <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p"> This PC</p></div>
         </div>
 
         <ul class="ul-file-tree-view nested">
             <ng-container *ngFor="let node of treeData; let i = index">
                 <li class="li-file-tree-view"> 
-                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showCurrentSelection()">
+                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showCurrentSelection(node.path)">
                         <div class="span fxtreeview-head"> 
                             <figure class="fxtreeview-figure">  
                                 <div class="fxtreeview-img" >
-                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGrandChildren(i)" (mouseenter)="colorChevron(i)" (mouseleave)="unColorChevron(i)" [style]="chevronBtnStyle"
+                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGrandChildren(node.path, i)" (mouseenter)="colorChevron(i)" (mouseleave)="unColorChevron(i)" [style]="chevronBtnStyle"
                                         height="10" width="10" 
                                         viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}-{{i}}">
                                         <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
@@ -38,15 +38,15 @@
                         </div>
                         <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name.toLowerCase() === 'downloads' ? 'osdrive/icons/downloads1.png' :  
                                                                                                                                  node.name.toLowerCase() === 'music'? 'osdrive/icons/music.png': 
-                                                                                                                                 node.name.toLowerCase() === 'icons'? 'osdrive/icons/folder.ico' :'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/> </figure> </div>
-                        <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{node.name}}</p></div>
+                                                                                                                                 node.name.toLowerCase() === 'icons'? 'osdrive/icons/folder.ico' :'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/></figure></div>
+                        <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p">{{node.name}}</p></div>
                     </div>
 
                     <ng-container *ngIf="node.children && node.children.length">
                         <ul class="ul-file-tree-view nested">
                             <ng-container *ngFor="let child of node.children; let j = index">
                                 <li class="li-file-tree-view"> 
-                                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showCurrentSelection()">
+                                    <div class="tree-view-cntnr" *ngIf="child.isFolder"  id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showCurrentSelection(child.path)">
                                         <div class="span fxtreeview-head"> 
                                             <figure class="fxtreeview-figure">  
                                                 <div class="fxtreeview-img" >
@@ -58,8 +58,8 @@
                                                 </div>
                                             </figure>
                                         </div>
-                                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/empty_folder.ico'"/> </figure> </div>
-                                        <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{child.name}}</p></div>
+                                        <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/empty_folder.ico'"/></figure></div>
+                                        <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p"> {{child.name}}</p></div>
                                     </div>
 
                                     <ng-container *ngIf="child.children && child.children.length">
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
index 3d95108..68866f3 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.ts
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -9,22 +9,20 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 export class FileTreeViewComponent implements OnInit {
   @Input() treeData: FileTreeNode[] = [];
   @Input() pid = 0;
-  @Output() getDataEvent = new EventEmitter<string>();
+  @Output() updateFileTreeData = new EventEmitter<string>();
 
   chevronBtnStyle:Record<string, unknown> = {};
+  expandedViews:string[]= [];
 
   constructor( ){
     //
   }
 
-
   ngOnInit():void{
-
     this.setcolorChevron();
   }
 
   showChildren(name?:string):void{
-
     let ulId = '';   let imgId = ''
 
     ulId = `fileExplrTreeView-${this.pid}`;
@@ -46,28 +44,12 @@ export class FileTreeViewComponent implements OnInit {
         imgDiv.style.transform = 'rotate(90deg)';
         imgDiv.style.position = 'relative';
       }
-
-      //pass event to the parent
-      //this.getDataEvent.emit(name);
     }
   }
 
-  showGrandChildren(id?:number, id1?:number, name?:string):void{
-
-    let ulId = '';   let imgId = ''
-
-    if(id === undefined && id1 === undefined ){
-      ulId = `fileExplrTreeView-${this.pid}`;
-      imgId = `fileExplrTreeView-img-${this.pid}`;
-    }
-
-
-    if(id !== undefined && id1 === undefined )
-      ulId = `fileExplrTreeView-${this.pid}-${id}`;
-
-    if(id !== undefined && id1 !== undefined )
-      ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
-
+  showGrandChildren(path:string, id:number,):void{
+    const ulId = `fileExplrTreeView-${this.pid}-${id}`;
+    const imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
     console.log('passed id:', ulId);
     console.log('passed imgId:', imgId);
 
@@ -76,7 +58,7 @@ export class FileTreeViewComponent implements OnInit {
 
     if(toggler){
       console.log('toggler:', toggler);
-      toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+     // toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
     
 
       //toggler.classList.remove("nested");
@@ -84,18 +66,51 @@ export class FileTreeViewComponent implements OnInit {
       //toggler.classList.toggle("caret-down");
 
       if(imgDiv){
+
+        this.expandedViews.push(`SGC-${this.pid}-${id}`);
         console.log('imgDiv:', imgDiv);
         imgDiv.style.transform = 'rotate(90deg)';
         imgDiv.style.position = 'relative';
       }
 
       //pass event to the parent
-      //this.getDataEvent.emit(name);
+      this.updateFileTreeData.emit(path);
+
+      setTimeout(()=>{ this.showExpandedViews();}, 2000);
+    }
+  }
+
+  showGrandChildren_B(id:number):void{
+    const ulId = `fileExplrTreeView-${this.pid}-${id}`;
+    const imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
+
+    const toggler =  document.getElementById(ulId) as HTMLElement;
+    const imgDiv =  document.getElementById(imgId) as HTMLElement;
+
+    if(toggler){
+      if(imgDiv){
+        console.log('imgDiv:', imgDiv);
+        imgDiv.style.transform = 'rotate(90deg)';
+        imgDiv.style.position = 'relative';
+      }
+
     }
   }
 
+  showExpandedViews():void{
+    for(const el of this.expandedViews){
+      const arr = el.split('-');
+      console.log('arr:', arr);
+      if(arr[0] == 'SGC'){
+        const id = Number(arr[2]);
+        this.showGrandChildren_B(id);
+      }else{
+        1
+      }
+    }
+  }
 
-  showGreatGrandChildren(id?:number, id1?:number, name?:string):void{
+  showGreatGrandChildren(id?:number, id1?:number, path?:string):void{
 
     let ulId = '';   let imgId = ''
 
@@ -126,19 +141,20 @@ export class FileTreeViewComponent implements OnInit {
       //toggler.classList.toggle("caret-down");
 
       if(imgDiv){
+        this.expandedViews.push(`SGGC-${this.pid}-${id}`);
         console.log('imgDiv:', imgDiv);
         imgDiv.style.transform = 'rotate(90deg)';
         imgDiv.style.position = 'relative';
       }
 
       //pass event to the parent
-      //this.getDataEvent.emit(name);
+      //this.getDataEvent.emit(path);
     }
   }
 
 
 
-  showCurrentSelection():void{
+  showCurrentSelection(path:string):void{
    1
   }
 
@@ -165,7 +181,6 @@ export class FileTreeViewComponent implements OnInit {
     const imgDiv =  document.getElementById(imgId) as HTMLElement;
 
     if(imgDiv){
-      console.log('unColorChevron-imgDiv:', imgDiv);
       imgDiv.style.fill = 'rgb(18, 107, 240)';
     }
   }
@@ -186,7 +201,6 @@ export class FileTreeViewComponent implements OnInit {
     const imgDiv =  document.getElementById(imgId) as HTMLElement;
 
     if(imgDiv){
-      console.log('unColorChevron-imgDiv:', imgDiv);
       imgDiv.style.fill = '#ccc';
     }
   }
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
index ef82d00..babf03b 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.html
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -227,7 +227,7 @@
             <div class="fileexp-content-container">
                 <div class="navigation-content-container"  #navExplorerContainer>
                     <div style="height: 10px; width: 100%;"></div>
-                    <cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"></cos-filetreeview>
+                    <cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"  (updateFileTreeData)="updateFileTreeAsync($event)"></cos-filetreeview>
                 </div>
                 <div class="file-content-container" #fileExplorerContentContainer>
                 <!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
index 92e9be1..064b78f 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.ts
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -685,14 +685,18 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   }
 
   private async loadFileTreeAsync():Promise<void>{
+
+    console.log('loadFileTreeAsync callled');
     this.fileTreeNode = [];
     this._fileService.resetDirectoryFiles();
     const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(this.directory);
 
+   // this.directory, will not be correct for all cases. Make sure to check
     for(const dirEntry of directoryEntries){
       const isFile =  await this._fileService.checkIfDirectory(this.directory + dirEntry);
       const ftn:FileTreeNode = {
         name : dirEntry,
+        path : `${this.directory}${dirEntry}`,
         isFolder: isFile,
         children: []
       }
@@ -702,25 +706,35 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
     }
   }
 
-  private async updateFileTreeAsync(path:string):Promise<void>{
+  async updateFileTreeAsync(path:string):Promise<void>{
+
+    console.log('updateFileTreeAsync called', path);
 
-    //const tmpFileTreeNode:FileTreeNode = [];
+    const tmpFileTreeNode:FileTreeNode[] = [];
     this._fileService.resetDirectoryFiles();
-    const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(this.directory + path);
+    const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(path);
 
+    // this.directory, will not be correct for all cases. Make sure to check
     for(const dirEntry of directoryEntries){
 
-      const isFile =  await this._fileService.checkIfDirectory(this.directory + + dirEntry);
+      const isFile =  await this._fileService.checkIfDirectory(`${path}/${dirEntry}`);
       const ftn:FileTreeNode = {
         name : dirEntry,
+        path: `${path}/${dirEntry}`,
         isFolder: isFile,
         children: []
       }
 
+      console.log('update-ftn:', ftn);
+      tmpFileTreeNode.push(ftn);
     }
+
+    const res =  this.addChildrenToNode(this.fileTreeNode, path, tmpFileTreeNode);
+    console.log('updatedTreeData:', res);
+    this.fileTreeNode = res;
   }
 
-  public addChildrenToNode(treeData: FileTreeNode[],  nodeName: string, newChildren: FileTreeNode[] ): FileTreeNode[] {
+  private addChildrenToNode(treeData: FileTreeNode[], nodePath: string, newChildren: FileTreeNode[] ): FileTreeNode[] {
 
     // Create a new array for the updated treeData
     const updatedTreeData: FileTreeNode[] = [];
@@ -729,12 +743,13 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
       const node = treeData[i];
       const updatedNode: FileTreeNode = {
         name: node.name,
+        path: node.path,
         isFolder: node.isFolder,
         children: node.children || []
       };
 
       // If the current node matches the nodeName, add the new children
-      if (node.name === nodeName) {
+      if (node.path === nodePath) {
         for(const child of newChildren){
           updatedNode.children.push(child)
         }
@@ -742,7 +757,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
 
       // If the node has children, recursively call this function on the children
       if (node.children) {
-        updatedNode.children = this.addChildrenToNode(node.children, nodeName, newChildren);
+        updatedNode.children = this.addChildrenToNode(node.children, nodePath, newChildren);
       }
 
       // Add the updated node to the new treeData array
diff --git a/src/app/system-files/file.tree.node.ts b/src/app/system-files/file.tree.node.ts
index 6439117..e654024 100644
--- a/src/app/system-files/file.tree.node.ts
+++ b/src/app/system-files/file.tree.node.ts
@@ -1,5 +1,6 @@
 export interface FileTreeNode{
     name: string;
+    path:string;
     isFolder:boolean;
     children: FileTreeNode[];
 }
\ No newline at end of file