Skip to content

Commit

Permalink
filetreeview wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 18, 2024
1 parent ca8b9fc commit 3c0844f
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 38 deletions.
23 changes: 11 additions & 12 deletions src/app/shared/system-component/filetreeview/filetreeview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@
</svg> -->

<ul class="ul-file-tree-view" id="fileExplrTreeView">
<li class="li-file-tree-view0">

<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)">
<ng-container *ngIf="showRoot">
<div class="tree-view-cntnr" id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection('/')">
<div class="tree-view-cntnr" id="fileExplrTreeView-{{pid}}-{{level}}" (click)="navigateToSelectedPath('This-PC','This-PC')">
<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}}">
viewBox="0 0 512 512" id="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"/>
</svg>
</div>
Expand All @@ -26,20 +25,20 @@

<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)">
<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)">
<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="fileExplrTreeView-img-{{pid}}-{{i}}">
viewBox="0 0 512 512" id="fileExplrTreeView-img-{{pid}}-{{level}}-{{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"/>
</svg>
</div>
</figure>
</div>
<div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name === '3D-Objects' && node.path === '/Users/3D-Objects' ? 'osdrive/Cheetah/System/Imageres/3d_objects_folder_small.png' :
<div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name === '3D-Objects' && node.path === '/Users/3D-Objects' ? 'osdrive/Cheetah/System/Imageres/3d-objects_folder_small.png' :
node.name === 'Desktop' && node.path === '/Users/Desktop' ? 'osdrive/Cheetah/System/Imageres/desktop_folder_small.png' :
node.name === 'Documents' && node.path === '/Users/Documents' ? 'osdrive/Cheetah/System/Imageres/documents_folder_small.png' :
node.name === 'Downloads' && node.path === '/Users/Downloads' ? 'osdrive/Cheetah/System/Imageres/downloads_folder_small.png' :
Expand All @@ -54,14 +53,14 @@
<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">
<div class="tree-view-cntnr" *ngIf="child.isFolder" id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showCurrentSelection(child.path)">
<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)">
<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="fileExplrTreeView-img-{{pid}}-{{i}}-{{j}}">
viewBox="0 0 512 512" id="fileExplrTreeView-img-{{pid}}-{{level}}-{{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"/>
</svg>
</div>
Expand All @@ -72,7 +71,7 @@
</div>

<ng-container *ngIf="child.children && child.children.length">
<cos-filetreeview [treeData]="child.children" [showRoot]="false"></cos-filetreeview>
<cos-filetreeview [level]="this.nextLevel" [pid]="this.processId" [showRoot]="false" [treeData]="child.children"></cos-filetreeview>
</ng-container>
</li>
</ng-container>
Expand Down
105 changes: 84 additions & 21 deletions src/app/shared/system-component/filetreeview/filetreeview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,42 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
styleUrl: './filetreeview.component.css'
})
export class FileTreeViewComponent implements OnInit, OnChanges {
@Input() treeData: FileTreeNode[] = [];
@Input() pid = 0;
@Input() level = 0;
@Input() showRoot = true;
@Input() isHoverActive = false;
@Input() treeData: FileTreeNode[] = [];
@Output() updateFileTreeData = new EventEmitter<string>();
@Output() navigateToPath = new EventEmitter<string[]>();

chevronBtnStyle:Record<string, unknown> = {};
expandedViews:string[]= [];
selectedElementId = 0;
processId = 0;
nextLevel = 0;

constructor( ){
//
1
}

ngOnInit():void{
this.setcolorChevron(this.isHoverActive);
}


ngOnChanges():void{
//console.log('FILETREE onCHANGES:',this.isHoverActive);
console.log('fileTreeViewPid:', this.pid);
console.log('fileTreeViewLvl:', this.level);
this.processId = this.pid;
this.nextLevel = this.level + 1;
this.setcolorChevron(this.isHoverActive);
}

showChildren(name?:string):void{
let ulId = ''; let imgId = ''

ulId = `fileExplrTreeView-${this.pid}`;
imgId = `fileExplrTreeView-img-${this.pid}`;
ulId = `fileExplrTreeView-${this.pid}-${this.level}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}`;

console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
Expand All @@ -58,8 +64,8 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

showGrandChildren(path:string, id:number,):void{
const ulId = `fileExplrTreeView-${this.pid}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;
console.log('passed id:', ulId);
console.log('passed imgId:', imgId);

Expand All @@ -77,7 +83,7 @@ export class FileTreeViewComponent implements OnInit, OnChanges {

if(imgDiv){

this.expandedViews.push(`SGC-${this.pid}-${id}`);
this.expandedViews.push(`SGC-${this.pid}-${this.level}-${id}`);
console.log('imgDiv:', imgDiv);
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
Expand All @@ -91,8 +97,8 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

showGrandChildren_B(id:number):void{
const ulId = `fileExplrTreeView-${this.pid}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;

const toggler = document.getElementById(ulId) as HTMLElement;
const imgDiv = document.getElementById(imgId) as HTMLElement;
Expand All @@ -110,8 +116,8 @@ export class FileTreeViewComponent implements OnInit, OnChanges {

showGreatGrandChildren( path:string, id:number, id1:number):void{

const ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}-${id1}`;

console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
Expand All @@ -129,7 +135,7 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
//toggler.classList.toggle("caret-down");

if(imgDiv){
this.expandedViews.push(`SGGC-${this.pid}-${id}-${id1}`);
this.expandedViews.push(`SGGC-${this.pid}-${this.level}-${id}-${id1}`);
console.log('imgDiv:', imgDiv);
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
Expand All @@ -144,8 +150,8 @@ export class FileTreeViewComponent implements OnInit, OnChanges {

showGreatGrandChildren_B(id:number, id1:number):void{

const ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}-${id1}`;

const toggler = document.getElementById(ulId) as HTMLElement;
const imgDiv = document.getElementById(imgId) as HTMLElement;
Expand Down Expand Up @@ -198,14 +204,14 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
let imgId = ''

if(id === undefined && id1 === undefined ){
imgId = `fileExplrTreeView-img-${this.pid}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}`;
}

if(id !== undefined && id1 === undefined )
imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;

if(id !== undefined && id1 !== undefined )
imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}-${id1}`;

const imgDiv = document.getElementById(imgId) as HTMLElement;

Expand All @@ -218,14 +224,14 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
let imgId = ''

if(id === undefined && id1 === undefined ){
imgId = `fileExplrTreeView-img-${this.pid}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}`;
}

if(id !== undefined && id1 === undefined )
imgId = `fileExplrTreeView-img-${this.pid}-${id}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;

if(id !== undefined && id1 !== undefined )
imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}-${id1}`;

const imgDiv = document.getElementById(imgId) as HTMLElement;

Expand All @@ -234,4 +240,61 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}
}

onBtnClick(elmntId:string):void{
//this.setBtnStyle(id, true);
}

onMouseEnter(elmntId:string):void{
console.log('onMouseEnter-elmntId:',elmntId);
//this.setBtnStyle(id, 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);
// }
}

setBtnStyle(id:number, 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';

// if(this.selectedElementId == id){

// 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 && 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;
if(btnElement){
btnElement.style.backgroundColor = 'transparent';
btnElement.style.border = 'none'
}
}

}
2 changes: 1 addition & 1 deletion src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@
<div class="fileexp-content-container">
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="showExpandTreeIconBtn()" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [treeData]="fileTreeNode" [pid] ="processId" [isHoverActive]="showExpandTreeIcon" (updateFileTreeData)="updateFileTreeAsync($event)" (navigateToPath)="navigateToFolder($event)" ></cos-filetreeview>
<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" -->
Expand Down
5 changes: 2 additions & 3 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
hasWindow = true;



constructor(processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService,
fileManagerService:FileManagerService, formBuilder: FormBuilder, stateManagmentService:StateManagmentService, sessionManagmentService:SessionManagmentService,
menuService:MenuService ) {
Expand Down Expand Up @@ -708,14 +707,14 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

private async loadFileTreeAsync():Promise<void>{

console.log('loadFileTreeAsync callled');
console.log('loadFileTreeAsync called');
const directory = '/Users/';
this.fileTreeNode = [];
this._fileService.resetDirectoryFiles();
const directoryEntries = await this._fileService.getEntriesFromDirectoryAsync(directory);

const osDrive:FileTreeNode = {
name : 'OSDisk (C:)', path : '/', isFolder: true, children: []
name : 'OSDisk (C:)', path : '/', isFolder: true, children:[]
}

// this.directory, will not be correct for all cases. Make sure to check
Expand Down
Loading

0 comments on commit 3c0844f

Please sign in to comment.