fileexplorer treeview in progress

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { DialogComponent } from './shared/system-component/dialog/dialog.compone
 import { CodeEditorComponent } from './user-apps/codeeditor/codeeditor.component';
 import { PropertiesComponent } from './shared/system-component/properties/properties.component'; 
 import { MarkDownViewerComponent } from './user-apps/markdownviewer/markdownviewer.component';
+import { FileTreeViewComponent } from './shared/system-component/filetreeview/filetreeview.component';
 
 import { SafeUrlPipe } from './shared/system-pipes/safe.resource.url.pipe';
 import { TruncatePipe } from './shared/system-pipes/string.shorten.pipe';
@@ -73,6 +74,7 @@ import { KeyPressCaptureDirective } from './system-apps/terminal/key.press.captu
     DialogComponent,
     CodeEditorComponent,
     MarkDownViewerComponent,
+    FileTreeViewComponent,
 
 
     HighlightDirective,

src/app/shared/system-component/filetreeview/filetreeview.component.css

@@ -0,0 +1,98 @@
+  /* Remove default bullets */
+  ul, #fileExplrTreeView {
+      list-style-type: none;
+  }
+
+  /* Remove margins and padding from the parent ul */
+  #fileExplrTreeView {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Style the caret/arrow */
+  .caret {
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+    color: #ccc;
+  }
+
+  /* Create the caret/arrow with a unicode, and style it */
+  .caret::before {
+    content: "\25B6";
+    color: #ccc;
+    display: inline-block;
+    margin-right: 6px;
+  }
+
+  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+  .caret-down::before {
+    transform: rotate(90deg);
+  }
+
+  /* Hide the nested list */
+  .nested {
+    display: none;
+  }
+
+  /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
+  .active {
+    display: block;
+  }
+
+  .tree-view-cntnr{
+    display: inline-flex;
+    width: 100%;
+  }
+
+  .fxtreeview-nested-p{
+    position: relative;
+    top: 10%;
+  }
+
+  .fxtreeview-head{
+    padding-left: 5px;
+  }
+
+  .fxtreeview-mid{
+    padding: 0 2px;
+  }
+
+  .fxtreeview-tail{
+    padding: 0 5px;
+    color: white;
+    text-align: left;
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  .fxtreeview-img{
+    height: 10px;
+    width: 10px;
+    image-rendering:optimizeQuality;
+    position: relative;
+  }
+
+  .fxtreeview-figure{
+    position: relative;
+    align-items: center;
+    display: inline-flex;
+    min-width: 10px;
+    top: 0;
+    left: 15%;
+  }
+
+  .fxtreeview-img1{
+    height: 19px;
+    width: 19px;
+    image-rendering:optimizeQuality;
+    position: relative;
+  }
+
+  .fxtreeview-figure1{
+    position: relative;
+    align-items: center;
+    display: inline-flex;
+    min-width: 19px;
+    top: 0;
+    left: 15%;
+  }

src/app/shared/system-component/filetreeview/filetreeview.component.html

@@ -0,0 +1,72 @@
+    <!--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> -->
+
+<ul id="fileExplrTreeView">
+    <li>
+
+        <!-- <span class="caret" id="fileExplrTreeView-{{pid}}" (click)="showChildren()">This PC</span> -->
+
+        <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">
+                            <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>
+
+        <!-- <ul class="nested">
+            <ng-container *ngFor="let node of treeData; let i = index">
+                <li> <span class="caret"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showChildren(i)">{{ node.name }}</span>
+                    <ng-container *ngIf="node.children && node.children.length">
+                        <ul class="nested">
+                            <ng-container *ngFor="let child of node.children; let j = index">
+                                <li> <span class="caret" id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showChildren(i,j)">{{ child.name }}</span>
+                                    <ng-container *ngIf="child.children && child.children.length">
+                                        <cos-filetreeview [treeData]="child.children"></cos-filetreeview>
+                                    </ng-container>
+                                </li>
+                            </ng-container>
+                        </ul>
+                    </ng-container>
+                </li>
+            </ng-container>
+        </ul> -->
+    </li>
+</ul>
+
+
+<!--
+<ul id="myUL">
+    <li><span class="caret">This PC</span>
+        <ul class="nested">
+        <li>Water</li>
+        <li>Coffee</li>
+        <li><span class="caret">Tea</span>
+            <ul class="nested">
+            <li>Black Tea</li>
+            <li>White Tea</li>
+            <li><span class="caret">Green Tea</span>
+                <ul class="nested">
+                <li>Sencha</li>
+                <li>Gyokuro</li>
+                <li>Matcha</li>
+                <li>Pi Lo Chun</li>
+                </ul>
+
+            </li>
+            </ul>
+        </li>
+        </ul>
+
+    </li>
+</ul>-->

src/app/shared/system-component/filetreeview/filetreeview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileTreeViewComponent } from './filetreeview.component';
+
+describe('FiletreeviewComponent', () => {
+  let component: FileTreeViewComponent;
+  let fixture: ComponentFixture<FileTreeViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileTreeViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileTreeViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/system-component/filetreeview/filetreeview.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FileTreeNode } from 'src/app/system-files/file.tree.node';
+
+@Component({
+  selector: 'cos-filetreeview',
+  templateUrl: './filetreeview.component.html',
+  styleUrl: './filetreeview.component.css'
+})
+export class FileTreeViewComponent implements OnInit {
+  @Input() treeData: FileTreeNode[] = [];
+  @Input() pid = 0;
+
+  chevronBtnStyle:Record<string, unknown> = {};
+
+
+  ngOnInit():void{
+
+    this.setcolorChevron();
+  }
+
+  showChildren(id?:number, id1?:number):void{
+
+    let ulId = ''
+
+    if(id === undefined && id1 === undefined )
+       ulId = `fileExplrTreeView-${this.pid}`;
+
+    if(id !== undefined && id1 === undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}`;
+
+    if(id !== undefined && id1 !== undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
+
+    console.log('passed id:', ulId);
+    const toggler =  document.getElementById(ulId) as HTMLElement;
+    if(toggler){
+      console.log('toggler:', toggler);
+      toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+      toggler.classList.toggle("caret-down");
+    }
+  }
+
+  showCurrentSelection():void{
+   1
+  }
+
+
+  setcolorChevron():void{
+    this.chevronBtnStyle ={
+       'fill': '#ccc'
+    }
+  }
+
+  colorChevron():void{
+    this.chevronBtnStyle ={
+      'fill': 'rgb(18, 107, 240)'
+    }
+  }
+
+  unColorChevron():void{
+    this.chevronBtnStyle ={
+      'fill': '#ccc'
+    }
+  }
+
+}

src/app/shared/system-service/file.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from "@angular/core";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 import { ShortCut } from "src/app/system-files/shortcut";
 import {extname, basename, resolve, dirname} from 'path';
 import { Constants } from "src/app/system-files/constants";
 import { FSModule } from "browserfs/dist/node/core/FS";
-import { FileEntry } from 'src/app/system-files/fileentry';
+import { FileEntry } from 'src/app/system-files/file.entry';
 import { FileMetaData } from "src/app/system-files/file.metadata";
 
 import { Subject } from "rxjs";

src/app/shared/system-service/menu.services.ts

@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { Subject } from "rxjs";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 import { Process } from "src/app/system-files/process";
 
 

src/app/shared/system-service/trigger.process.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { Subject } from "rxjs";
 import { RunningProcessService } from "./running.process.service";
 import { AppDirectory } from "src/app/system-files/app.directory";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 
 @Injectable({
     providedIn: 'root'

src/app/system-apps/audioplayer/audioplayer.component.ts

@@ -6,7 +6,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Constants } from "src/app/system-files/constants";
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';

src/app/system-apps/desktop/desktop.component.ts

@@ -8,7 +8,7 @@ import { BIRDS, GLOBE, HALO, RINGS, WAVE } from './vanta-object/vanta.interfaces
 import { IconsSizes, SortBys } from './desktop.enums';
 import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
 import { Colors } from './colorutil/colors';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { ScriptService } from 'src/app/shared/system-service/script.services';
 import { MenuService } from 'src/app/shared/system-service/menu.services';

src/app/system-apps/fileexplorer/fileexplorer.component.css

@@ -737,47 +737,6 @@ span.mid-search-entry{
 }
 
 
-/* Remove default bullets */
-ul, #myUL {
-  list-style-type: none;
-}
-
-/* Remove margins and padding from the parent ul */
-#myUL {
-  margin: 0;
-  padding: 0;
-}
-
-/* Style the caret/arrow */
-.caret {
-  cursor: pointer; 
-  user-select: none; /* Prevent text selection */
-  color: white;
-}
-
-/* Create the caret/arrow with a unicode, and style it */
-.caret::before {
-  content: "\25B6";
-  color: #ccc;
-  display: inline-block;
-  margin-right: 6px;
-}
-
-/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-.caret-down::before {
-  transform: rotate(90deg); 
-}
-
-/* Hide the nested list */
-.nested {
-  display: none;
-}
-
-/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
-.nav-active {
-  display: block;
-}
-
 /*****************************navigation pane view Ended*****************************/
 
 .file-content-container{