From a4d8269f3915943a1988d92244562ef99b9ef3d8 Mon Sep 17 00:00:00 2001
From: chinonso098 <chinonsoakolam@outlook.com>
Date: Sun, 15 Sep 2024 15:36:58 -0400
Subject: [PATCH] more bugs to fix

---
 .../filetreeview/filetreeview.component.html  | 39 ++++++-----
 .../filetreeview/filetreeview.component.ts    | 68 +++++++++++--------
 2 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
index c698742..ca7ec89 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.html
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -5,23 +5,26 @@
 
 <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="span fxtreeview-head"> 
-                <figure class="fxtreeview-figure">  
-                    <div class="fxtreeview-img" >
-                        <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
-                            height="10" width="10" 
-                            viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}">
-                            <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"/>
-                        </svg>
-                    </div>
-                </figure>
+
+        <ng-container *ngIf="showRoot">
+            <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection('/')">
+                <div class="span fxtreeview-head"> 
+                    <figure class="fxtreeview-figure">  
+                        <div class="fxtreeview-img" >
+                            <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
+                                height="10" width="10" 
+                                viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}">
+                                <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"/>
+                            </svg>
+                        </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>
-            <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>
+        </ng-container>
 
-        <ul class="ul-file-tree-view nested">
+        <ul class="ul-file-tree-view ">
             <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(node.path)">
@@ -43,14 +46,14 @@
                     </div>
 
                     <ng-container *ngIf="node.children && node.children.length">
-                        <ul class="ul-file-tree-view nested">
+                        <ul class="ul-file-tree-view">
                             <ng-container *ngFor="let child of node.children; let j = index">
                                 <li class="li-file-tree-view"> 
                                     <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" >
-                                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGreatGrandChildren(i, j)" (mouseenter)="colorChevron(i,j)" (mouseleave)="unColorChevron(i,j)" [style]="chevronBtnStyle"
+                                                    <svg xmlns="http://www.w3.org/2000/svg" (click)="showGreatGrandChildren(child.path, i, j)" (mouseenter)="colorChevron(i,j)" (mouseleave)="unColorChevron(i,j)" [style]="chevronBtnStyle"
                                                         height="10" width="10" 
                                                         viewBox="0 0 512 512"  id="fileExplrTreeView-img-{{pid}}-{{i}}-{{j}}">
                                                         <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"/>
@@ -63,7 +66,7 @@
                                     </div>
 
                                     <ng-container *ngIf="child.children && child.children.length">
-                                        <cos-filetreeview [treeData]="child.children"></cos-filetreeview>
+                                        <cos-filetreeview [treeData]="child.children" [showRoot]="false"></cos-filetreeview>
                                     </ng-container>
                                 </li>
                             </ng-container>
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
index 68866f3..d6f7d06 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.ts
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -9,6 +9,7 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 export class FileTreeViewComponent implements OnInit {
   @Input() treeData: FileTreeNode[] = [];
   @Input() pid = 0;
+  @Input() showRoot = true;
   @Output() updateFileTreeData = new EventEmitter<string>();
 
   chevronBtnStyle:Record<string, unknown> = {};
@@ -97,33 +98,11 @@ export class FileTreeViewComponent implements OnInit {
     }
   }
 
-  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, path?:string):void{
+  showGreatGrandChildren( path:string, id:number, id1:number):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}`;
+    const ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
+    const imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
 
     console.log('passed id:', ulId);
     console.log('passed imgId:', imgId);
@@ -133,7 +112,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");
@@ -141,18 +120,51 @@ export class FileTreeViewComponent implements OnInit {
       //toggler.classList.toggle("caret-down");
 
       if(imgDiv){
-        this.expandedViews.push(`SGGC-${this.pid}-${id}`);
+        this.expandedViews.push(`SGGC-${this.pid}-${id}-${id1}`);
         console.log('imgDiv:', imgDiv);
         imgDiv.style.transform = 'rotate(90deg)';
         imgDiv.style.position = 'relative';
       }
 
       //pass event to the parent
-      //this.getDataEvent.emit(path);
+      this.updateFileTreeData.emit(path);
+
+      setTimeout(()=>{ this.showExpandedViews();}, 2000);
     }
   }
 
+  showGreatGrandChildren_B(id:number, id1:number):void{
+
+    const ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
+    const imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
 
+    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{
+        const id = Number(arr[2]);
+        const id1 = Number(arr[3]);
+        this.showGreatGrandChildren_B(id, id1);
+      }
+    }
+  }
 
   showCurrentSelection(path:string):void{
    1