Below is my frontend code for angular. It was working correctly but it has a problem after I deployed it to production. I would be great full for any kind of help suggestions. I have no idea where it comes from, how it generated. This is a template from the html component.
<div >
<div >
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" #tree>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="20">
<div [id]="node.level '' node.id" >
<a mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' node.nodeName"
(click)="viewNode(node, 1)"
>
<mat-icon >
folder
</mat-icon>
<span>{{node.nodeName}}</span>
</a>
</div>
</mat-tree-node>
</mat-tree>
<!-- <mat-tree [dataSource]="dataSource2" [treeControl]="treeControl" #tree2>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="20">
<div [id]="node.level '' node.id" >
<a mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' node.nodeName"
(click)="viewNode(node, 2)"
>
<mat-icon >
folder
</mat-icon>
<span>{{node.nodeName}}</span>
</a>
</div>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="dataSource3" [treeControl]="treeControl" #tree4>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="20">
<div [id]="node.level '' node.id" >
<a mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' node.nodeName"
(click)="viewNode(node, 3)"
>
<mat-icon >
folder
</mat-icon>
<span>{{node.nodeName}}</span>
</a>
</div>
</mat-tree-node>
</mat-tree> -->
</div>
</div>
CodePudding user response：
fund-setting.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-fund-setting',
templateUrl: './fund-setting.component.html',
styleUrls: ['./fund-setting.component.scss']
})
export class FundSettingComponent implements OnInit {
users: any[] = [];
constructor(
private http: HttpClient
) { }
ngOnInit(): void {
this.loadUsersWithSetting();
}
loadUsersWithSetting() {
this.http.get(`${environment.server}/funds/users`).subscribe(
(res: any) => {
this.users = res;
}
);
}
updateSetting() {
this.http.post(`${environment.server}/funds/users`, this.users).subscribe(
res => {
console.log(res);
}
);
}
}
css.align-center {
text-align: center;
}
fund setting html<div>
<div >
<a (click)="updateSetting()">
Update
</a>
</div>
<table >
<thead>
<tr>
<td>I.D.</td>
<td>Name</td>
<td >Document</td>
<td >Capital/All</td>
<td >Consent</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.id }}</td>
<td>{{ user.userName }}</td>
<td >
<input type="checkbox" [(ngModel)]="user.displayDocument"/>
</td>
<td >
<input type="checkbox" [(ngModel)]="user.displayCapital"/>
</td>
<td >
<input type="checkbox" [(ngModel)]="user.displayConsent"/>
</td>
</tr>
</tbody>
</table>
</div>CodePudding user response：
folder tree component
import { SelectionModel } from '@angular/cdk/collections';
import { FlatTreeControl, NestedTreeControl } from '@angular/cdk/tree';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatTreeFlatDataSource, MatTreeFlattener, MatTreeNestedDataSource } from '@angular/material/tree';
import { DownloadService } from '../download.service';
import { FileServiceService, TreeNode, TreeNodeFlatNode } from '../file-service.service';
import {v4 as uuidv4} from 'uuid';
@Component({
selector: 'app-folder-tree',
templateUrl: './folder-tree.component.html',
styleUrls: ['./folder-tree.component.scss']
})
export class FolderTreeComponent implements OnInit {
private _transformer = (node: any, level: number) => {
return {
expandable: node.children?.length > 0,
children: JSON.parse(JSON.stringify(node.children??[])),
attachments: node.attachments,
nodeName: node.nodeName,
level: level,
id: uuidv4()
};
}
treeControl = new FlatTreeControl<any>(
node => node.level,
node => node.expandable
);
treeFlatner = new MatTreeFlattener(
this._transformer,
node => node.level,
node => node.expandable,
node => node.children,
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlatner);
@ViewChild('tree', {static: true}) tree: any;
selectedNode: any = {};
constructor(
private fileService: FileServiceService,
private dialog: MatDialog,
private downloadService: DownloadService
) {
//this.dataSource.data = [TREE_DATA];
this.fileService.file_tree_observable$.subscribe((res: any) => {
// updating tree data
if(res) {
let data = res;
console.log("Tree data", data);
this.dataSource.data = data;
console.log("Tree control", this.treeControl.dataNodes);
if(this.tree) {
console.log('tree', this.tree);
this.tree.treeControl.expand(this.treeControl.dataNodes[0]);
}
}
});
this.fileService.selected_leaf_observable.subscribe(res => {
if(res && !Array.isArray(res) && res.nodeName) {
//let node = this.treeControl.dataNodes.find(dn => (dn.nodeName === res.nodeName && dn.level === res.level));
let node = this.treeControl.dataNodes.find(dn => dn.id === res.id);
console.log("Node", node);
this.treeControl.collapseAll();
this.expandParents(node);
if(this.tree) {
this.tree.treeControl.expand(node);
}
//this.changeBgForSelectedNode(node);
}
});
// this.fileService.selected_leaf_observable.subscribe(res => {
// console.log("Response ", res);
// if(res){
// // find node
// // let node = this.treeControl.dataNodes.find(dn => dn.nodeName === res.nodeName);
// // console.log(this.treeControl.dataNodes);
// // this.tree.treeControl.expand(this.treeControl.dataNodes[0]);
// // console.log("Expanding nodes", node);
// // this.expandParents(node);
// // this.tree.treeControl.expand(node);
// }
// });
}
hasChild = (_: number, node: any) => node.expandable;
viewNode(node: any, treeId: number) {
this.fileService.updateSelectedFolderView(node.children, treeId);
this.fileService.updateSelectedAttachmentView(node.attachments);
this.fileService.updateNode(node);
this.downloadService.clear();
}
ngOnInit(): void {
}
onSelect(event: any) {
console.log("Evt ",event);
}
changeBgForSelectedNode(node: any) {
let selectedElem = document.getElementById(node.level '' node.id);
if(selectedElem) {
selectedElem.style.backgroundColor = 'lightblue';
}
}
expandParents(node: any) {
const parent = this.getParent(node);
this.treeControl.expand(parent);
if (parent && parent.level > 0) {
this.expandParents(parent);
}
}
getParent(node: any) {
const { treeControl } = this;
const currentLevel = treeControl.getLevel(node);
if (currentLevel < 1) {
return null;
}
const startIndex = treeControl.dataNodes.indexOf(node) - 1;
for (let i = startIndex; i >= 0; i--) {
const currentNode = treeControl.dataNodes[i];
if (treeControl.getLevel(currentNode) < currentLevel) {
return currentNode;
}
}
}
}
folder tree html<div >
<div >
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" #tree>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="20">
<div [id]="node.level '' node.id" >
<a mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' node.nodeName"
(click)="viewNode(node, 1)"
>
<mat-icon >
folder
</mat-icon>
<span>{{node.nodeName}}</span>
</a>
</div>
</mat-tree-node>
</mat-tree>
</div>
</div>
CodePudding user response：
tree controller.ts
@PostMapping("{fundId}")
public ResponseEntity<List<FileTree>> addOrUpdateTree(
@PathVariable Long fundId,
@RequestBody List<String> treeRequested
) {
// first find if tree exist
var tree = fileTreeRepository.findTreeByFundId(fundId);
if(tree == null)
throw new IllegalArgumentException("Invalid fund id, please create fund first");
for (int i = 0; i < tree.size(); i ) {
tree.get(i).setTree(treeRequested.get(i));
}
var savedTree = fileTreeRepository.saveAll(tree);
return ResponseEntity.ok(savedTree);
}
fund controller.java
@PostMapping
public ResponseEntity createFund(@RequestBody Fund fund) {
if(!StringUtils.hasText(fund.getFundName())) {
throw new IllegalArgumentException("fundname can not be null");
}
var result = fundRepository.save(fund);
// create empty tree
String tree1 = "{\"nodeName\":\"Document\",\"children\":[],\"attachments\":[]}";
String tree2 = "{\"nodeName\":\"Capital/All\",\"children\":[],\"attachments\":[]}";
String tree3 = "{\"nodeName\":\"Consent\",\"children\":[],\"attachments\":[]}";
FileTree documentTree = FileTree.builder().fund(result).tree(tree1).build();
FileTree capitalTree = FileTree.builder().fund(result).tree(tree2).build();
FileTree consentTree = FileTree.builder().fund(result).tree(tree3).build();
repository.saveAll(Arrays.asList(documentTree, capitalTree, consentTree));
return ResponseEntity.ok(result);
}