Skip to content

Commit

Permalink
file tree view still in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 15, 2024
1 parent 239ba47 commit 8f085cd
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 48 deletions.
20 changes: 10 additions & 10 deletions src/app/shared/system-component/filetreeview/filetreeview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<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="tree-view-cntnr" id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection('/')">
<div class="span fxtreeview-head">
<figure class="fxtreeview-figure">
<div class="fxtreeview-img" >
Expand All @@ -17,18 +17,18 @@
</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 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="ul-file-tree-view nested">
<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()">
<div class="tree-view-cntnr" *ngIf="node.isFolder" id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showCurrentSelection(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(i)" (mouseenter)="colorChevron(i)" (mouseleave)="unColorChevron(i)" [style]="chevronBtnStyle"
<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}}">
<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"/>
Expand All @@ -38,15 +38,15 @@
</div>
<div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]=" node.name.toLowerCase() === 'downloads' ? 'osdrive/icons/downloads1.png' :
node.name.toLowerCase() === 'music'? 'osdrive/icons/music.png':
node.name.toLowerCase() === 'icons'? 'osdrive/icons/folder.ico' :'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/> </figure> </div>
<div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{node.name}}</p></div>
node.name.toLowerCase() === 'icons'? 'osdrive/icons/folder.ico' :'osdrive/icons/'+ node.name.toLowerCase() + '.ico'"/></figure></div>
<div class="span fxtreeview-tail"><p class="fxtreeview-nested-p">{{node.name}}</p></div>
</div>

<ng-container *ngIf="node.children && node.children.length">
<ul class="ul-file-tree-view nested">
<ng-container *ngFor="let child of node.children; let j = index">
<li class="li-file-tree-view">
<div class="tree-view-cntnr" *ngIf="node.isFolder" id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showCurrentSelection()">
<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" >
Expand All @@ -58,8 +58,8 @@
</div>
</figure>
</div>
<div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/empty_folder.ico'"/> </figure> </div>
<div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> {{child.name}}</p></div>
<div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/empty_folder.ico'"/></figure></div>
<div class="span fxtreeview-tail"><p class="fxtreeview-nested-p"> {{child.name}}</p></div>
</div>

<ng-container *ngIf="child.children && child.children.length">
Expand Down
74 changes: 44 additions & 30 deletions src/app/shared/system-component/filetreeview/filetreeview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,20 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
export class FileTreeViewComponent implements OnInit {
@Input() treeData: FileTreeNode[] = [];
@Input() pid = 0;
@Output() getDataEvent = new EventEmitter<string>();
@Output() updateFileTreeData = new EventEmitter<string>();

chevronBtnStyle:Record<string, unknown> = {};
expandedViews:string[]= [];

constructor( ){
//
}


ngOnInit():void{

this.setcolorChevron();
}

showChildren(name?:string):void{

let ulId = ''; let imgId = ''

ulId = `fileExplrTreeView-${this.pid}`;
Expand All @@ -46,28 +44,12 @@ export class FileTreeViewComponent implements OnInit {
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
}

//pass event to the parent
//this.getDataEvent.emit(name);
}
}

showGrandChildren(id?:number, id1?:number, name?:string):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}`;

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

Expand All @@ -76,26 +58,59 @@ 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");
//toggler.classList.remove("active");
//toggler.classList.toggle("caret-down");

if(imgDiv){

this.expandedViews.push(`SGC-${this.pid}-${id}`);
console.log('imgDiv:', imgDiv);
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
}

//pass event to the parent
//this.getDataEvent.emit(name);
this.updateFileTreeData.emit(path);

setTimeout(()=>{ this.showExpandedViews();}, 2000);
}
}

showGrandChildren_B(id:number):void{
const ulId = `fileExplrTreeView-${this.pid}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${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';
}

}
}

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, name?:string):void{
showGreatGrandChildren(id?:number, id1?:number, path?:string):void{

let ulId = ''; let imgId = ''

Expand Down Expand Up @@ -126,19 +141,20 @@ export class FileTreeViewComponent implements OnInit {
//toggler.classList.toggle("caret-down");

if(imgDiv){
this.expandedViews.push(`SGGC-${this.pid}-${id}`);
console.log('imgDiv:', imgDiv);
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
}

//pass event to the parent
//this.getDataEvent.emit(name);
//this.getDataEvent.emit(path);
}
}



showCurrentSelection():void{
showCurrentSelection(path:string):void{
1
}

Expand All @@ -165,7 +181,6 @@ export class FileTreeViewComponent implements OnInit {
const imgDiv = document.getElementById(imgId) as HTMLElement;

if(imgDiv){
console.log('unColorChevron-imgDiv:', imgDiv);
imgDiv.style.fill = 'rgb(18, 107, 240)';
}
}
Expand All @@ -186,7 +201,6 @@ export class FileTreeViewComponent implements OnInit {
const imgDiv = document.getElementById(imgId) as HTMLElement;

if(imgDiv){
console.log('unColorChevron-imgDiv:', imgDiv);
imgDiv.style.fill = '#ccc';
}
}
Expand Down
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" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"></cos-filetreeview>
<cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId" (updateFileTreeData)="updateFileTreeAsync($event)"></cos-filetreeview>
</div>
<div class="file-content-container" #fileExplorerContentContainer>
<!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->
Expand Down
29 changes: 22 additions & 7 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -685,14 +685,18 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}

private async loadFileTreeAsync():Promise<void>{

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

// this.directory, will not be correct for all cases. Make sure to check
for(const dirEntry of directoryEntries){
const isFile = await this._fileService.checkIfDirectory(this.directory + dirEntry);
const ftn:FileTreeNode = {
name : dirEntry,
path : `${this.directory}${dirEntry}`,
isFolder: isFile,
children: []
}
Expand All @@ -702,25 +706,35 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}
}

private async updateFileTreeAsync(path:string):Promise<void>{
async updateFileTreeAsync(path:string):Promise<void>{

console.log('updateFileTreeAsync called', path);

//const tmpFileTreeNode:FileTreeNode = [];
const tmpFileTreeNode:FileTreeNode[] = [];
this._fileService.resetDirectoryFiles();
const directoryEntries = await this._fileService.getEntriesFromDirectoryAsync(this.directory + path);
const directoryEntries = await this._fileService.getEntriesFromDirectoryAsync(path);

// this.directory, will not be correct for all cases. Make sure to check
for(const dirEntry of directoryEntries){

const isFile = await this._fileService.checkIfDirectory(this.directory + + dirEntry);
const isFile = await this._fileService.checkIfDirectory(`${path}/${dirEntry}`);
const ftn:FileTreeNode = {
name : dirEntry,
path: `${path}/${dirEntry}`,
isFolder: isFile,
children: []
}

console.log('update-ftn:', ftn);
tmpFileTreeNode.push(ftn);
}

const res = this.addChildrenToNode(this.fileTreeNode, path, tmpFileTreeNode);
console.log('updatedTreeData:', res);
this.fileTreeNode = res;
}

public addChildrenToNode(treeData: FileTreeNode[], nodeName: string, newChildren: FileTreeNode[] ): FileTreeNode[] {
private addChildrenToNode(treeData: FileTreeNode[], nodePath: string, newChildren: FileTreeNode[] ): FileTreeNode[] {

// Create a new array for the updated treeData
const updatedTreeData: FileTreeNode[] = [];
Expand All @@ -729,20 +743,21 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
const node = treeData[i];
const updatedNode: FileTreeNode = {
name: node.name,
path: node.path,
isFolder: node.isFolder,
children: node.children || []
};

// If the current node matches the nodeName, add the new children
if (node.name === nodeName) {
if (node.path === nodePath) {
for(const child of newChildren){
updatedNode.children.push(child)
}
}

// If the node has children, recursively call this function on the children
if (node.children) {
updatedNode.children = this.addChildrenToNode(node.children, nodeName, newChildren);
updatedNode.children = this.addChildrenToNode(node.children, nodePath, newChildren);
}

// Add the updated node to the new treeData array
Expand Down
1 change: 1 addition & 0 deletions src/app/system-files/file.tree.node.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export interface FileTreeNode{
name: string;
path:string;
isFolder:boolean;
children: FileTreeNode[];
}

0 comments on commit 8f085cd

Please sign in to comment.