Merge pull request #54 from matthieu-crouzet/fix/collapse-all

fix: collapse all folders

Author: RawZ06

projects/ngx-monaco-tree-test/src/app/app.component.ts

@@ -146,9 +146,9 @@ export class AppComponent {
     path: string,
     localTree: MonacoTreeElement[]
   ) {
-    const spited = path.split('/');
+    const splitted = path.split('/');
     if (!filename) return;
-    if (spited.length === 1) {
+    if (splitted.length === 1) {
       const file = localTree.find((el) => el.name == path);
       if (!file) return;
       else if (file.content === undefined) {
@@ -163,9 +163,9 @@ export class AppComponent {
         });
       }
     } else {
-      const file = localTree.find((el) => el.name == spited[0]);
+      const file = localTree.find((el) => el.name == splitted[0]);
       if (!file || !file.content) return;
-      this.create(type, filename, spited.slice(1).join('/'), file?.content);
+      this.create(type, filename, splitted.slice(1).join('/'), file?.content);
     }
   }
 

projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, viewChildren} from '@angular/core';
 import { extensions } from '../../utils/extension-icon';
 import { files } from '../../utils/file-icon';
 import { folders } from '../../utils/folder-icon';
@@ -43,6 +43,8 @@ export class MonacoTreeFileComponent implements OnChanges {
 	@Output() contextMenuClick = new EventEmitter<ContextMenuAction>();
   @Output() dragDropFile = new EventEmitter<DragAndDropEvent>();
 
+  private children = viewChildren(MonacoTreeFileComponent);
+
 	open = false;
 	position: [number, number]|undefined = undefined;
 
@@ -154,6 +156,11 @@ export class MonacoTreeFileComponent implements OnChanges {
 		this.contextMenuClick.emit([event[0], this.name + '/' + event[1]]);
 	}
 
+  collapseAll() {
+    this.children().forEach((child) => child.collapseAll());
+    this.open = false;
+  }
+
 	@HostListener('document:contextmenu', ['$event'])
 	clickOut(event: MouseEvent) {
 		if(!this.eRef.nativeElement.contains(event.target)) {

projects/ngx-monaco-tree/src/lib/ngx-monaco-tree.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, viewChildren } from '@angular/core';
 import { MonacoTreeElement } from './ngx-monaco-tree.type';
 import {ContextMenuAction, DragAndDropEvent} from "./monaco-tree-file/monaco-tree-file.type";
 import {MonacoTreeFileComponent} from "./monaco-tree-file/monaco-tree-file.component";
@@ -32,6 +32,8 @@ export class NgxMonacoTreeComponent {
 
   @Input() currentFile: string|null = null;
 
+  private children = viewChildren(MonacoTreeFileComponent);
+
 	handleClickFile(path: string) {
 		this.clickFile.emit(path);
     this.currentFile = path;
@@ -54,7 +56,6 @@ export class NgxMonacoTreeComponent {
   }
 
   handleCollapseAll() {
-    const tree = JSON.parse(JSON.stringify(this.tree));
-    this.tree = tree;
+    this.children().forEach((child) => child.collapseAll());
   }
 }