Skip to content

Commit

Permalink
more bugs to fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 15, 2024
1 parent 8f085cd commit a4d8269
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 46 deletions.
39 changes: 21 additions & 18 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,23 +5,26 @@

<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="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}}">
<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>

<ng-container *ngIf="showRoot">
<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" id="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"/>
</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>
<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>
</ng-container>

<ul class="ul-file-tree-view nested">
<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)">
Expand All @@ -43,14 +46,14 @@
</div>

<ng-container *ngIf="node.children && node.children.length">
<ul class="ul-file-tree-view nested">
<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)">
<div class="span fxtreeview-head">
<figure class="fxtreeview-figure">
<div class="fxtreeview-img" >
<svg xmlns="http://www.w3.org/2000/svg" (click)="showGreatGrandChildren(i, j)" (mouseenter)="colorChevron(i,j)" (mouseleave)="unColorChevron(i,j)" [style]="chevronBtnStyle"
<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}}">
<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 @@ -63,7 +66,7 @@
</div>

<ng-container *ngIf="child.children && child.children.length">
<cos-filetreeview [treeData]="child.children"></cos-filetreeview>
<cos-filetreeview [treeData]="child.children" [showRoot]="false"></cos-filetreeview>
</ng-container>
</li>
</ng-container>
Expand Down
68 changes: 40 additions & 28 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,6 +9,7 @@ import { FileTreeNode } from 'src/app/system-files/file.tree.node';
export class FileTreeViewComponent implements OnInit {
@Input() treeData: FileTreeNode[] = [];
@Input() pid = 0;
@Input() showRoot = true;
@Output() updateFileTreeData = new EventEmitter<string>();

chevronBtnStyle:Record<string, unknown> = {};
Expand Down Expand Up @@ -97,33 +98,11 @@ export class FileTreeViewComponent implements OnInit {
}
}

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, path?:string):void{
showGreatGrandChildren( path:string, id:number, id1:number):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}`;
const ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${id}-${id1}`;

console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
Expand All @@ -133,26 +112,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(`SGGC-${this.pid}-${id}`);
this.expandedViews.push(`SGGC-${this.pid}-${id}-${id1}`);
console.log('imgDiv:', imgDiv);
imgDiv.style.transform = 'rotate(90deg)';
imgDiv.style.position = 'relative';
}

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

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

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

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

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{
const id = Number(arr[2]);
const id1 = Number(arr[3]);
this.showGreatGrandChildren_B(id, id1);
}
}
}

showCurrentSelection(path:string):void{
1
Expand Down

0 comments on commit a4d8269

Please sign in to comment.