bug of group tree is fixed

This commit is contained in:
병준 박 2019-11-18 16:11:09 +09:00
parent 0d2a4a7db6
commit 7fa5fc76f3
3 changed files with 23 additions and 7 deletions

View File

@ -8,12 +8,12 @@
"start:main": "wait-on http-get://localhost:4200/ && npm run build:main:development && electron --nolazy --inspect-brk=9229 .", "start:main": "wait-on http-get://localhost:4200/ && npm run build:main:development && electron --nolazy --inspect-brk=9229 .",
"start:renderer": "cross-env UCAP_ENV_RUNTIME=ELECTRON ng serve -c renderer-development", "start:renderer": "cross-env UCAP_ENV_RUNTIME=ELECTRON ng serve -c renderer-development",
"start:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng serve -c browser-development -o", "start:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng serve -c browser-development -o",
"run": "electron .",
"build": "npm-run-all -p build:renderer build:main:production", "build": "npm-run-all -p build:renderer build:main:production",
"build:renderer": "cross-env NODE_ENV=production ng build -c renderer-development --base-href ./", "build:renderer": "cross-env NODE_ENV=production ng build -c renderer-development --base-href ./",
"build:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng build -c browser-development", "build:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng build -c browser-development",
"build:main:development": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts", "build:main:development": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts",
"build:main:production": "cross-env NODE_ENV=production TS_NODE_PROJECT='./config/tsconfig.webpack.json' NODE_OPTIONS='--max_old_space_size=4096' parallel-webpack --config=config/main.webpack.config.ts", "build:main:production": "cross-env NODE_ENV=production TS_NODE_PROJECT='./config/tsconfig.webpack.json' NODE_OPTIONS='--max_old_space_size=4096' parallel-webpack --config=config/main.webpack.config.ts",
"electron:local": "electron .",
"electron:windows": "electron-builder build --windows", "electron:windows": "electron-builder build --windows",
"electron:mac": "electron-builder build --mac", "electron:mac": "electron-builder build --mac",
"electron:linux": "electron-builder build --linux", "electron:linux": "electron-builder build --linux",

View File

@ -23,7 +23,7 @@
</mat-tree-node> </mat-tree-node>
<!-- This is the tree node template for expandable nodes --> <!-- This is the tree node template for expandable nodes -->
<mat-tree-node <mat-tree-node
*matTreeNodeDef="let node; when: hasChild" *matTreeNodeDef="let node; when: isHeader"
class="tree-node-frame" class="tree-node-frame"
style="height: 80px;" style="height: 80px;"
> >

View File

@ -8,7 +8,8 @@ import {
ContentChild, ContentChild,
TemplateRef, TemplateRef,
AfterViewInit, AfterViewInit,
ChangeDetectorRef ChangeDetectorRef,
OnDestroy
} from '@angular/core'; } from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui'; import { ucapAnimations } from '@ucap-webmessenger/ui';
@ -25,6 +26,8 @@ import { NGXLogger } from 'ngx-logger';
import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui'; import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
import { FlatTreeControl } from '@angular/cdk/tree'; import { FlatTreeControl } from '@angular/cdk/tree';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
enum NodeType { enum NodeType {
None = 'None', None = 'None',
@ -55,7 +58,8 @@ interface FlatNode {
styleUrls: ['./expansion-panel.component.scss'], styleUrls: ['./expansion-panel.component.scss'],
animations: ucapAnimations animations: ucapAnimations
}) })
export class ExpansionPanelComponent implements OnInit, AfterViewInit { export class ExpansionPanelComponent
implements OnInit, OnDestroy, AfterViewInit {
@Input() @Input()
set myProfileInfo(userInfo: UserInfo) { set myProfileInfo(userInfo: UserInfo) {
if (!userInfo) { if (!userInfo) {
@ -156,6 +160,8 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
@ViewChild('cvsvGroup', { static: false }) @ViewChild('cvsvGroup', { static: false })
cvsvGroup: CdkVirtualScrollViewport; cvsvGroup: CdkVirtualScrollViewport;
private readonly destroySubject = new Subject();
NodeType = NodeType; NodeType = NodeType;
profileNodes: GroupNode[] = []; profileNodes: GroupNode[] = [];
@ -185,7 +191,7 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
countOfChildren: countOfChildren:
!!node.children && node.children.length > 0 !!node.children && node.children.length > 0
? node.children.length ? node.children.length
: undefined, : 0,
userInfo: node.userInfo, userInfo: node.userInfo,
groupDetail: node.groupDetail groupDetail: node.groupDetail
}; };
@ -201,13 +207,23 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
); );
} }
ngOnInit() {} ngOnInit() {
fromEvent(window, 'resize')
.pipe(debounceTime(10), takeUntil(this.destroySubject))
.subscribe(() => this.cvsvGroup.checkViewportSize());
}
ngOnDestroy(): void {
this.destroySubject.next();
this.destroySubject.complete();
}
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup; this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup;
} }
hasChild = (_: number, node: FlatNode) => node.expandable; // hasChild = (_: number, node: FlatNode) => node.expandable;
isHeader = (_: number, node: FlatNode) => 0 === node.level;
expandMore() { expandMore() {
this.groupAccordion.openAll(); this.groupAccordion.openAll();