From 595cb07313a0779f3afb57af592ddf83e5c73360 Mon Sep 17 00:00:00 2001
From: chinonso098 <chinonsoakolam@outlook.com>
Date: Mon, 23 Sep 2024 14:16:10 -0400
Subject: [PATCH] working on nesting in tree view

---
 .../filetreeview/filetreeview.component.css   |  11 ++
 .../filetreeview/filetreeview.component.html  |  34 ++--
 .../filetreeview/filetreeview.component.ts    | 167 +++++++++++-------
 3 files changed, 133 insertions(+), 79 deletions(-)

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.css b/src/app/shared/system-component/filetreeview/filetreeview.component.css
index 12e121f..284c4e0 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.css
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.css
@@ -30,11 +30,22 @@
     display: block;
   }
 
+
+  .root-caret-active{
+    position: 'relative';
+    transform: rotate(0deg);
+  }
+
   .caret-active {
     position: 'relative';
     transform: rotate(90deg);
   }
 
+  .root-caret-nested{
+    position: 'relative';
+    transform: rotate(270deg);
+  }
+
   .caret-nested {
     position: 'relative';
     transform: rotate(0);
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
index 2860da2..76bbf22 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.html
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -1,4 +1,6 @@
-    <!--down-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+    <!--down-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
+        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+    </svg>
     right-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
         <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> -->
@@ -14,7 +16,7 @@
                             <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren('qa-fileExplrTreeView')" (mouseenter)="colorChevron(negTen,negTen)" (mouseleave)="unColorChevron(negTen,negTen)" [style]="chevronBtnStyle"
                                 height="10" width="10" 
                                 viewBox="0 0 512 512"  id="qa-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"/>
+                                <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
                             </svg>
                         </div>
                     </figure>
@@ -23,7 +25,7 @@
                 <div class="fxtreeview-tail"><p class="fxtreeview-nested-p"> {{quickAccess}}</p></div>
             </div>
 
-            <ul class="ul-file-tree-view nested" id="qa-ul-{{pid}}">
+            <ul class="ul-file-tree-view" id="qa-ul-{{pid}}">
                 <ng-container *ngFor="let node of quickAccessData; let i = index">
                     <li class="li-file-tree-view" id="qa-li-{{pid}}-{{i}}"> 
                         <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="qa-fileExplrTreeView-{{pid}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)" 
@@ -38,8 +40,7 @@
                                                                                                                                 node.name === 'Games' && node.path === '/Users/Games' ? 'osdrive/Cheetah/System/Imageres/games_folder_small.png' :
                                                                                                                                 node.name === 'Music' && node.path === '/Users/Music' ? 'osdrive/Cheetah/System/Imageres/music_folder_small.png' : 
                                                                                                                                 node.name === 'Pictures' && node.path === '/Users/Pictures'? 'osdrive/Cheetah/System/Imageres/pictures_folder_small.png':
-                                                                                                                                node.name === 'Videos' && node.path === '/Users/Videos' ? 'osdrive/Cheetah/System/Imageres/videos_folder_small.png':
-                                                                                                                                node.name === 'OSDisk (C:)' && node.path === '/' ? 'osdrive/Cheetah/System/Imageres/os_disk.png': 'osdrive/Cheetah/System/Imageres/folder_folder_small.png'"/></figure></div>
+                                                                                                                                node.name === 'Videos' && node.path === '/Users/Videos' ? 'osdrive/Cheetah/System/Imageres/videos_folder_small.png': 'osdrive/Cheetah/System/Imageres/folder_folder_small.png'"/></figure></div>
                             <div class="fxtreeview-tail"><p class="fxtreeview-nested-p">{{node.name}}</p></div>
                         </div>
                     </li>
@@ -53,8 +54,6 @@
 
 
 
-
-
 <ul class="ul-file-tree-view" id="tp-fileExplrTreeView">
     <li class="li-file-tree-view0" id="li-{{pid}}-{{level}}">
         <ng-container *ngIf="showRoot">
@@ -66,27 +65,29 @@
                             <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren('tp-fileExplrTreeView')" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
                                 height="10" width="10" 
                                 viewBox="0 0 512 512"  id="tp-fileExplrTreeView-img-{{pid}}-{{level}}">
-                                <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"/>
+                                <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
                             </svg>
                         </div>
                     </figure>
                 </div>
                 <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/Cheetah/System/Imageres/this_pc.png'"/></figure></div>
-                <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p"> This PC</p></div>
+                <div class="span fxtreeview-tail"><p class="fxtreeview-nested-p">{{thisPC}}</p></div>
             </div>
         </ng-container>
 
-        <ul class="ul-file-tree-view nested" id="ul-{{pid}}-{{level}}">
+        <ul class="ul-file-tree-view" id="ul-{{pid}}-{{level}}">
             <ng-container *ngFor="let node of treeData; let i = index">
                 <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}"> 
-                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="tp-fileExplrTreeView-{{pid}}-{{level}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)" 
+                                                                            <!--here is the id-->
+                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="tp-fileExplrTreeView-{{pid}}-{{level}}-{{i}}"  
+                        (click)="navigateToSelectedPath(node.name, node.path)" 
                         (click)="onBtnClick('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseenter)="onMouseEnter('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseleave)="onMouseLeave('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i)">
                         <div class="span fxtreeview-head"> 
                             <figure class="fxtreeview-figure">  
                                 <div class="fxtreeview-img" >
                                     <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="tp-fileExplrTreeView-img-{{pid}}-{{level}}-{{i}}">
+                                        viewBox="0 0 512 512"  id="tp-fileExplrTreeView-img-{{pid}}-{{level}}-{{i}}"> <!--here is the id-->
                                         <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>
@@ -105,17 +106,20 @@
                     </div>
 
                     <ng-container *ngIf="node.children && node.children.length">
-                        <ul class="ul-file-tree-view nested">
+                        <ul class="ul-file-tree-view" id="ul-{{pid}}-{{level}}-{{i}}">
+                            
                             <ng-container *ngFor="let child of node.children; let j = index">
                                 <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}-{{j}}"> 
-                                    <div class="tree-view-cntnr" *ngIf="child.isFolder"  id="tp-fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="navigateToSelectedPath(child.name, child.path)"
+                                                                                                                <!--here is the id1-->
+                                    <div class="tree-view-cntnr" *ngIf="child.isFolder"  id="tp-fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" 
+                                         (click)="navigateToSelectedPath(child.name, child.path)"
                                         (click)="onBtnClick('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseenter)="onMouseEnter('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseleave)="onMouseLeave('tp-fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)">
                                         <div class="span fxtreeview-head"> 
                                             <figure class="fxtreeview-figure">  
                                                 <div class="fxtreeview-img" >
                                                     <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="tp-fileExplrTreeView-img-{{pid}}-{{level}}-{{i}}-{{j}}">
+                                                        viewBox="0 0 512 512"  id="tp-fileExplrTreeView-img-{{pid}}-{{level}}-{{i}}-{{j}}"> <!--here is the id1-->
                                                         <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>
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
index 40f81b9..6e0a998 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.ts
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -1,3 +1,5 @@
+//Option A
+
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 import { FileService } from '../../system-service/file.service';
@@ -40,22 +42,26 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
   }
 
   genStaticData():FileTreeNode[]{
-    const ftn:FileTreeNode = {name:'Documents', path:'/Users/Documents', isFolder:true, children:[]}
-    const ftn1:FileTreeNode = {name:'Pictures', path:'/Users/Pictures', isFolder:true, children:[]}
-    const ftn2:FileTreeNode = {name:'Videos', path:'/Users/Videos', isFolder:true, children:[]}
+    const ftn:FileTreeNode = {name:'Pictures', path:'/Users/Pictures', isFolder:true, children:[]}
+    const ftn1:FileTreeNode = {name:'Videos', path:'/Users/Videos', isFolder:true, children:[]}
+    const ftn2:FileTreeNode = {name:'PDFs', path:'/Users/Documents/PDFs', isFolder:true, children:[]}
 
     return [ftn, ftn1, ftn2];
   }
+
   ngOnChanges():void{
-    //console.log('FILETREE onCHANGES:',this.isHoverActive);
-    console.log('isHoverActive:', this.isHoverActive);
-    console.log('fileTreeViewPid:', this.pid);
-    console.log('fileTreeViewLvl:', this.level);
+    //console.log('FILETREE onCHANGES:',this.isHoverActive);//TBD
+    // console.log('isHoverActive:', this.isHoverActive); //TBD
+    // console.log('fileTreeViewPid:', this.pid); //TBD
+    // console.log('fileTreeViewLvl:', this.level); //TBD
     this.processId = this.pid;
     this.nextLevel = this.level + 1;
 
-    if(!this.isClicked)
-      this.setcolorChevron(this.isHoverActive);
+    // if(!this.isClicked)
+     this.setcolorChevron(this.isHoverActive);
+    // else if(this.isClicked && !this.isHoverActive){
+    //   this.setcolorChevron(this.isHoverActive);
+    // }
   }
 
   hasClass(el:HTMLElement, className:string) {
@@ -78,20 +84,22 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
     const imgDiv =  document.getElementById(imgId) as HTMLElement;
 
     if(toggler && imgDiv){
-
       const hasNestedClass = this.hasClass(toggler,'nested');
       const hasActiveClass = this.hasClass(toggler,'active');
 
-      if(hasActiveClass && !hasNestedClass){
+      if(!hasActiveClass && !hasNestedClass){
+        toggler.classList.add('nested');
+        imgDiv.classList.add('root-caret-nested');
+      }else if(hasActiveClass && !hasNestedClass){
         toggler.classList.remove('active');
-        imgDiv.classList.remove('caret-active');
+        imgDiv.classList.remove('root-caret-active');
         toggler.classList.add('nested');
-        imgDiv.classList.add('caret-nested');
+        imgDiv.classList.add('root-caret-nested');
       }else{
         toggler.classList.remove('nested');
-        imgDiv.classList.remove('caret-nested');
+        imgDiv.classList.remove('root-caret-nested');
         toggler.classList.add('active');
-        imgDiv.classList.add('caret-active');
+        imgDiv.classList.add('root-caret-active');
       }
     }
   }
@@ -99,53 +107,77 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
   showGrandChildren(path:string, id:number,):void{
     const ulId = `tp-fileExplrTreeView-${this.pid}-${this.level}-${id}`;
     const imgId = `tp-fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;
+    const cntntId =`ul-${this.pid}-${this.level}-${id}`;
+
     console.log('SGC--passed id:', ulId);
     console.log('SGC--passed imgId:', imgId);
 
     const toggler =  document.getElementById(ulId) as HTMLElement;
     const imgDiv =  document.getElementById(imgId) as HTMLElement;
+    const cntntUl =  document.getElementById(cntntId) as HTMLElement;
 
-    if(toggler){
+
+    if(toggler  && imgDiv){
       console.log('SGC--toggler:', toggler);
-     // toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
-    
 
-      //toggler.classList.remove("nested");
-      //toggler.classList.remove("active");
-      //toggler.classList.toggle("caret-down");
+      const hasNestedClass = this.hasClass(toggler,'nested');
+      const hasActiveClass = this.hasClass(toggler,'active');
+
+      if(!hasActiveClass && !hasNestedClass){
+        toggler.classList.add('active');
+        imgDiv.classList.add('caret-active');
+      }else if(hasActiveClass && !hasNestedClass){
+        toggler.classList.remove('active');
+        imgDiv.classList.remove('caret-active');
+        toggler.classList.add('nested');
+        imgDiv.classList.add('caret-nested');
 
-      if(imgDiv){
+        if(cntntUl){
+          cntntUl.classList.remove('active');
+          cntntUl.classList.add('nested');
+        }
+      }else{
+        toggler.classList.remove('nested');
+        imgDiv.classList.remove('caret-nested');
+        toggler.classList.add('active');
+        imgDiv.classList.add('caret-active');
 
-        this.expandedViews.push(`SGC-${this.pid}-${this.level}-${id}`);
-        console.log('imgDiv:', imgDiv);
-        imgDiv.style.transform = 'rotate(90deg)';
-        imgDiv.style.position = 'relative';
+        if(cntntUl){
+          cntntUl.classList.remove('nested');
+          toggler.classList.add('active');
+        }
       }
 
-      //pass event to the parent
-      //this.updateFileTreeData.emit(path);
-      const uid = `${this.name}-${this.pid}`;
-      this._fileService.addEventOriginator(uid);
-      this._fileService.fetchDirectoryDataNotify.next(path);
+      if(!this.expandedViews.includes(`SGC-${this.pid}-${this.level}-${id}`)){
+        this.expandedViews.push(`SGC-${this.pid}-${this.level}-${id}`);
 
-      setTimeout(()=>{ this.showExpandedViews();}, 2000);
+        //pass event to the parent
+        const uid = `${this.name}-${this.pid}`;
+        this._fileService.addEventOriginator(uid);
+        this._fileService.fetchDirectoryDataNotify.next(path);
+        setTimeout(()=>{ this.showExpandedViews();}, 100);
+      }
     }
   }
 
   showGrandChildren_B(id:number):void{
+
+    console.log('SGC--treeData:', this.treeData);
+
+
     const ulId = `tp-fileExplrTreeView-${this.pid}-${this.level}-${id}`;
     const imgId = `tp-fileExplrTreeView-img-${this.pid}-${this.level}-${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';
-      }
+    console.log('SGC_B toggler:', toggler);
+    console.log('SGC_B imgDiv:', imgDiv);
+
 
+    if(toggler && imgDiv){
+      toggler.classList.add('active');
+      imgDiv.classList.add('caret-active');
     }
   }
 
@@ -160,30 +192,38 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
     const toggler =  document.getElementById(ulId) as HTMLElement;
     const imgDiv =  document.getElementById(imgId) as HTMLElement;
 
-    if(toggler){
+    if(toggler  && imgDiv){
       console.log('SGGC--toggler:', toggler);
-      //toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
-    
 
-      //toggler.classList.remove("nested");
-      //toggler.classList.remove("active");
-      //toggler.classList.toggle("caret-down");
+      const hasNestedClass = this.hasClass(toggler,'nested');
+      const hasActiveClass = this.hasClass(toggler,'active');
 
-      if(imgDiv){
-        this.expandedViews.push(`SGGC-${this.pid}-${this.level}-${id}-${id1}`);
-        console.log('imgDiv:', imgDiv);
-        imgDiv.style.transform = 'rotate(90deg)';
-        imgDiv.style.position = 'relative';
+      if(!hasActiveClass && !hasNestedClass){
+        toggler.classList.add('active');
+        imgDiv.classList.add('caret-active');
+      }else if(hasActiveClass && !hasNestedClass){
+        toggler.classList.remove('active');
+        imgDiv.classList.remove('caret-active');
+        toggler.classList.add('nested');
+        imgDiv.classList.add('caret-nested');
+      }else{
+        toggler.classList.remove('nested');
+        imgDiv.classList.remove('caret-nested');
+        toggler.classList.add('active');
+        imgDiv.classList.add('caret-active');
       }
 
-      //pass event to the parent
-      //this.updateFileTreeData.emit(path);
-      const uid = `${this.name}-${this.pid}`;
-      this._fileService.addEventOriginator(uid);
-      this._fileService.fetchDirectoryDataNotify.next(path);
+      if(!this.expandedViews.includes(`SGGC-${this.pid}-${this.level}-${id}-${id1}`)){
+        this.expandedViews.push(`SGGC-${this.pid}-${this.level}-${id}-${id1}`);
 
-      setTimeout(()=>{ this.showExpandedViews();}, 2000);
+        //pass event to the parent
+        const uid = `${this.name}-${this.pid}`;
+        this._fileService.addEventOriginator(uid);
+        this._fileService.fetchDirectoryDataNotify.next(path);
+        setTimeout(()=>{ this.showExpandedViews();}, 100);
+      }
     }
+    
   }
 
   showGreatGrandChildren_B(id:number, id1:number):void{
@@ -194,13 +234,12 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
     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';
-      }
+    console.log('SGGC_B toggler:', toggler);
+    console.log('SGGC_B imgDiv:', imgDiv);
 
+    if(toggler && imgDiv){
+      toggler.classList.add('active');
+      imgDiv.classList.add('caret-active');
     }
   }
 
@@ -209,11 +248,11 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
       const arr = el.split('-');
       console.log('arr:', arr);
       if(arr[0] == 'SGC'){
-        const id = Number(arr[2]);
+        const id = Number(arr[3]);
         this.showGrandChildren_B(id);
       }else{
-        const id = Number(arr[2]);
-        const id1 = Number(arr[3]);
+        const id = Number(arr[3]);
+        const id1 = Number(arr[4]);
         this.showGreatGrandChildren_B(id, id1);
       }
     }