From 743a6b330fa7307c2aff2072d997f5ee5d38ef26 Mon Sep 17 00:00:00 2001
From: chinonso098 <chinonsoakolam@outlook.com>
Date: Wed, 18 Sep 2024 21:13:28 -0400
Subject: [PATCH] filetreeview wip

---
 .../filetreeview/filetreeview.component.css   |  2 +-
 .../filetreeview/filetreeview.component.html  | 15 +++--
 .../filetreeview/filetreeview.component.ts    | 64 +++++++++----------
 .../fileexplorer/fileexplorer.component.css   |  7 +-
 .../fileexplorer/fileexplorer.component.html  |  4 +-
 .../fileexplorer/fileexplorer.component.ts    | 26 ++++++--
 6 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.css b/src/app/shared/system-component/filetreeview/filetreeview.component.css
index dfb4305..47e9d8d 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.css
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.css
@@ -12,7 +12,7 @@
   
   .li-file-tree-view0{
     margin:0;
-    padding:0 0 0 0px; /* Each nested li will be padded incrementally */
+    padding:0 0 0 0; /* Each nested li will be padded incrementally */
   }
 
   .li-file-tree-view{
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
index 49655e9..24f3dd6 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.html
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -4,9 +4,10 @@
     </svg> -->
 
 <ul class="ul-file-tree-view" id="fileExplrTreeView">
-    <li class="li-file-tree-view0" id="li-{{pid}}-{{level}}" (click)="onBtnClick('li-'+pid+'-'+level)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level)">
+    <li class="li-file-tree-view0" id="li-{{pid}}-{{level}}">
         <ng-container *ngIf="showRoot">
-            <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}-{{level}}" (click)="navigateToSelectedPath('This-PC','This-PC')">
+            <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}-{{level}}" (click)="navigateToSelectedPath('This-PC','This-PC')" 
+                (click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level)">
                 <div class="span fxtreeview-head"> 
                     <figure class="fxtreeview-figure">  
                         <div class="fxtreeview-img" >
@@ -25,8 +26,9 @@
 
         <ul class="ul-file-tree-view ">
             <ng-container *ngFor="let node of treeData; let i = index">
-                <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}" (click)="onBtnClick('li-'+pid+'-'+level+'-'+i)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level+'-'+i)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level+'-'+i)"> 
-                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)">
+                <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}"> 
+                    <div class="tree-view-cntnr" *ngIf="node.isFolder"  id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}" (click)="navigateToSelectedPath(node.name, node.path)" 
+                        (click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level+'-'+i)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level+'-'+i)">
                         <div class="span fxtreeview-head"> 
                             <figure class="fxtreeview-figure">  
                                 <div class="fxtreeview-img" >
@@ -53,8 +55,9 @@
                     <ng-container *ngIf="node.children && node.children.length">
                         <ul class="ul-file-tree-view">
                             <ng-container *ngFor="let child of node.children; let j = index">
-                                <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="onBtnClick('li-'+pid+'-'+level+'-'+i+'-'+j)" (mouseenter)="onMouseEnter('li-'+pid+'-'+level+'-'+i+'-'+j)" (mouseleave)="onMouseLeave('li-'+pid+'-'+level+'-'+i+'-'+j)"> 
-                                    <div class="tree-view-cntnr" *ngIf="child.isFolder"  id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="navigateToSelectedPath(child.name, child.path)">
+                                <li class="li-file-tree-view" id="li-{{pid}}-{{level}}-{{i}}-{{j}}"> 
+                                    <div class="tree-view-cntnr" *ngIf="child.isFolder"  id="fileExplrTreeView-{{pid}}-{{level}}-{{i}}-{{j}}" (click)="navigateToSelectedPath(child.name, child.path)"
+                                        (click)="onBtnClick('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseenter)="onMouseEnter('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)" (mouseleave)="onMouseLeave('fileExplrTreeView-'+pid+'-'+level+'-'+i+'-'+j)">
                                         <div class="span fxtreeview-head"> 
                                             <figure class="fxtreeview-figure">  
                                                 <div class="fxtreeview-img" >
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
index 4b40a3d..83d3c2c 100644
--- a/src/app/shared/system-component/filetreeview/filetreeview.component.ts
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -17,7 +17,7 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
 
   chevronBtnStyle:Record<string, unknown> = {};
   expandedViews:string[]= [];
-  selectedElementId = 0;
+  selectedElementId = '';
   processId = 0;
   nextLevel = 0;
 
@@ -113,7 +113,6 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
     }
   }
 
-
   showGreatGrandChildren( path:string, id:number, id1:number):void{
 
     const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}-${id1}`;
@@ -241,56 +240,57 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
   }
 
   onBtnClick(elmntId:string):void{
+    this.selectedElementId = elmntId
     //this.setBtnStyle(id, true);
   }
 
   onMouseEnter(elmntId:string):void{
     console.log('onMouseEnter-elmntId:',elmntId);
-    //this.setBtnStyle(id, true);
+    this.setBtnStyle(elmntId, true);
   }
 
   onMouseLeave(elmntId:string):void{
     console.log('onMouseLeave-elmntId:',elmntId);
-    // if(id != this.selectedElementId){
-    //   this.removeBtnStyle(id);
-    // }
-    // else if((id == this.selectedElementId) && this.isIconInFocusDueToPriorAction){
-    //   this.setBtnStyle(id,false);
-    // }
+    if(elmntId != this.selectedElementId){
+      this.removeBtnStyle(elmntId);
+    }
+    else if((elmntId == this.selectedElementId)){
+      this.setBtnStyle(elmntId,false);
+    }
   }
 
-  setBtnStyle(id:number, isMouseHover:boolean):void{
+  setBtnStyle(elmntId:string, isMouseHover:boolean):void{
 
-    // const btnElement = document.getElementById(`btnElmnt-${this.processId}-${id}`) as HTMLElement;
-    // if(btnElement){
-    //   btnElement.style.backgroundColor = '#4c4c4c';
-    //   btnElement.style.border = '1px solid #3c3c3c';
+    const btnElement = document.getElementById(elmntId) as HTMLElement;
+    if(btnElement){
+      btnElement.style.backgroundColor = '#4c4c4c';
+      // btnElement.style.border = '1px solid #3c3c3c';
 
-    //   if(this.selectedElementId == id){
+      if(this.selectedElementId == elmntId){
 
-    //     if(isMouseHover && this.isIconInFocusDueToCurrentAction){
-    //       btnElement.style.backgroundColor ='#787474'
-    //     }
+        if(isMouseHover){
+          btnElement.style.backgroundColor ='#787474'
+        }
 
-    //     if(!isMouseHover && this.isIconInFocusDueToCurrentAction){
-    //       btnElement.style.backgroundColor ='#787474'
-    //     }
+        // if(!isMouseHover && this.isIconInFocusDueToCurrentAction){
+        //   btnElement.style.backgroundColor ='#787474'
+        // }
 
-    //     if(isMouseHover && this.isIconInFocusDueToPriorAction){
-    //       btnElement.style.backgroundColor = '#4c4c4c';
-    //     }
+        if(isMouseHover ){
+          btnElement.style.backgroundColor = '#4c4c4c';
+        }
 
-    //     if(!isMouseHover && this.isIconInFocusDueToPriorAction){
-    //       btnElement.style.backgroundColor = 'transparent';
-    //       btnElement.style.border = '0.5px solid white'
-    //     }
-    //   }
-    // }
+        // if(!isMouseHover && this.isIconInFocusDueToPriorAction){
+        //   btnElement.style.backgroundColor = 'transparent';
+        //   btnElement.style.border = '0.5px solid white'
+        // }
+      }
+    }
 
   }
 
-  removeBtnStyle(id:number):void{
-    const btnElement = document.getElementById(`btnElmnt-${this.processId}-${id}`) as HTMLElement;
+  removeBtnStyle(elmntId:string):void{
+    const btnElement = document.getElementById(elmntId) as HTMLElement;
     if(btnElement){
       btnElement.style.backgroundColor = 'transparent';
       btnElement.style.border = 'none'
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.css b/src/app/system-apps/fileexplorer/fileexplorer.component.css
index aa30837..6c8b340 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.css
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.css
@@ -731,9 +731,10 @@ span.mid-search-entry{
 /*****************************navigation pane view Started*****************************/
 
 .navigation-content-container{
-    min-width: 150px;
-     background-color: #191919;
-     /* background-color: whitef; */
+    min-width: 160px;
+    background-color: #191919;
+    overflow-y: auto;
+    height: 350px;
 }
 
 
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
index 6216d1c..93cc66d 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.html
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -225,13 +225,13 @@
         <div class="header-empty-line-container2"></div>
         <div class="fileexp-main-container" #fileExplorerMainContainer>
             <div class="fileexp-content-container">
-                <div class="navigation-content-container"  (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="showExpandTreeIconBtn()" #navExplorerContainer>
+                <div class="navigation-content-container"  (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="hideExpandTreeIconBtn()" #navExplorerContainer>
                     <div style="height: 10px; width: 100%;"></div>
                     <cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode"  (updateFileTreeData)="updateFileTreeAsync($event)"   (navigateToPath)="navigateToFolder($event)" ></cos-filetreeview>
                 </div>
                 <div class="file-content-container" #fileExplorerContentContainer>
+
                 <!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->
-    
                 <!-- ngDraggable  [inBounds]="true" zIndex="1" [preventDefaultEvent]="true"
                     (stopped)="onDragEnd($event)" (started)="onDragStart($event)" -->
                 
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
index b3425ba..fde42ca 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.ts
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -107,7 +107,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   prevPathEntries:string[] = [];
   nextPathEntries:string[] = [];
   recentPathEntries:string[] = [];
-  upPathEntries:string[] = ['/Desktop'];
+  upPathEntries:string[] = ['/Users/Desktop'];
   _directoryHops:string[] = ['This PC'];
   fileTreeHistory:string[] = [];
   SECONDS_DELAY:number[] = [100, 1500, 6000, 12000, 250];
@@ -652,7 +652,11 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   }
 
   showExpandTreeIconBtn():void{
-    this.showExpandTreeIcon = !this.showExpandTreeIcon;
+    this.showExpandTreeIcon = true;
+  }
+
+  hideExpandTreeIconBtn():void{
+    this.showExpandTreeIcon = false;
   }
   onDragOver(event:DragEvent):void{
     event.stopPropagation();
@@ -876,9 +880,13 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
     if(directory === `/Users/${fileName}`){
       this.navPathIcon = `osdrive/Cheetah/System/Imageres/${fileName.toLocaleLowerCase()}_folder_small.png`;
     }
-    else if((fileName === 'fileexplorer' && directory === '/') || fileName === '' && directory === '/'){
+    else if((fileName === 'OSDisk (C:)' && directory === '/')){
+      this.navPathIcon = 'osdrive/Cheetah/System/Imageres/os_disk.png';
+    }
+    else if((fileName === 'fileexplorer' && directory === '/') || (fileName === '' && directory === '/')){
       this.navPathIcon = 'osdrive/Cheetah/System/Imageres/this_pc.png';
-    }else{
+    }
+    else{
       this.navPathIcon = 'osdrive/Cheetah/System/Imageres/folder_folder_small.png';
     }
   }
@@ -1478,7 +1486,15 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   populateHopsList():void{
     const tmpArray = this.directory.split('/');
     tmpArray.shift();
-    this._directoryHops = tmpArray;
+    tmpArray.unshift('This PC');
+
+    if(this.directory.includes('/Users')){
+      this._directoryHops = tmpArray;
+    }else{
+      tmpArray[1] = 'OSDisk (C:)';
+      this._directoryHops = tmpArray;
+    }
+
     console.log('this._directoryHops:', this._directoryHops);
   }