ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

Browse Source
This commit is contained in:
khk 2019-11-26 10:57:18 +09:00
commit 456b35c845
5 changed files with 112 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
View File

@ -41,8 +41,11 @@
</mat-checkbox>
</dd>
</dl>
<div *ngIf="selectedDepartmentProcessing">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
<div style="height: 3px;">
<mat-progress-bar
*ngIf="selectedDepartmentProcessing"
mode="indeterminate"
></mat-progress-bar>
</div>
<div *ngIf="!isShowSearch" class="search-list">
<cdk-virtual-scroll-viewport

45
projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
View File

@ -20,18 +20,25 @@
matTreeNodePaddingIndent="20"
class="tree-no-child"
>
<div class="tree-node-closer-container">
<div class="tree-node-closer-top"></div>
<div
class="tree-node-closer-container"
*ngFor="let i of appendDivArray(node.level)"
>
<div
class="tree-node-closer-top"
[style.left.px]="20 - 20 * i"
[attr.last-node]="isLastNode(node, i) ? '' : null"
[attr.sub-node]="0 < i ? '' : null"
></div>
<div
class="tree-node-closer-bottom"
[attr.last-node]="isLastNode(node) ? '' : null"
[style.left.px]="20 - 20 * i"
[attr.last-node]="isLastNode(node, i) ? '' : null"
[attr.sub-node]="0 < i ? '' : null"
></div>
</div>
<li
(click)="onClickNode(node)"
matRipple
[attr.sub-node]="isParentLastNode(node) ? '' : null"
>
<li (click)="onClickNode(node)" matRipple>
<div class="tree-node-body">{{ node.name }}</div>
</li>
</mat-tree-node>
@ -42,19 +49,25 @@
matTreeNodePaddingIndent="20"
class="tree-has-child"
>
<div *ngIf="0 !== node.level" class="tree-node-closer-container">
<div class="tree-node-closer-top"></div>
<div
class="tree-node-closer-container"
*ngFor="let i of appendDivArray(node.level)"
>
<div
class="tree-node-closer-top"
[style.left.px]="20 - 20 * i"
[attr.last-node]="isLastNode(node, i) ? '' : null"
[attr.sub-node]="0 < i ? '' : null"
></div>
<div
class="tree-node-closer-bottom"
[style.left.px]="20 - 20 * i"
[attr.expanded]="treeControl.isExpanded(node) ? '' : null"
[attr.last-node]="isLastNode(node) ? '' : null"
[attr.last-node]="isLastNode(node, i) ? '' : null"
[attr.sub-node]="0 < i ? '' : null"
></div>
</div>
<li
(click)="onClickNode(node)"
matRipple
[attr.sub-node]="isParentLastNode(node) ? '' : null"
>
<li (click)="onClickNode(node)" matRipple>
<div class="tree-node-body">
<span class="horizontal-line"></span>
<button

22
projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
View File

@ -13,7 +13,7 @@
border: 1px dotted grey;
border-width: 0 0 1px 1px;
top: -40px;
left: 20px;
// left: 20px;
}
.tree-node-closer-bottom {
width: 15px;
@ -22,7 +22,14 @@
border: 1px dotted grey;
border-width: 0 0 1px 1px;
top: 0px;
left: 20px;
// left: 20px;
}
.tree-node-closer-top[sub-node] {
border-width: 0 0 0 1px;
}
.tree-node-closer-top[sub-node][last-node] {
border-width: 0 0 0 0;
}
.tree-node-closer-bottom[expanded] {
@ -31,6 +38,12 @@
.tree-node-closer-bottom[last-node] {
border-width: 0 0 1px 0px;
}
.tree-node-closer-bottom[sub-node] {
border-width: 0 0 0 1px;
}
.tree-node-closer-bottom[sub-node][last-node] {
border-width: 0 0 0 0;
}
}
li {
@ -39,11 +52,6 @@
list-style-type: none;
}
// li[sub-node] {
// border: 1px dotted grey;
// border-width: 0 0 0 1px;
// }
// li:last-child {
// border-left: 1px solid white;
// margin-left: -41px;

83
projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
View File

@ -19,6 +19,8 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { trigger, transition, style, animate } from '@angular/animations';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { Subscription } from 'rxjs';
interface OrganizationNode {
deptInfo: DeptInfo;
@ -110,10 +112,15 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild('orgranizationTree', { static: false })
orgranizationTree: MatTree<OrganizationNode>;
@ViewChild(PerfectScrollbarDirective, { static: false })
psDirectiveRef?: PerfectScrollbarDirective;
treeControl: FlatTreeControl<FlatNode>;
treeFlattener: MatTreeFlattener<OrganizationNode, FlatNode>;
dataSource: VirtualScrollTreeFlatDataSource<OrganizationNode, FlatNode>;
treeControlExpansionChangeSubscription: Subscription;
constructor(
private changeDetectorRef: ChangeDetectorRef,
private logger: NGXLogger
@ -141,10 +148,19 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
>(this.treeControl, this.treeFlattener);
}
ngOnInit() {}
ngOnInit() {
this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
() => {
this.psDirectiveRef.update();
}
);
}
ngOnDestroy(): void {
this.logger.debug('-----------------------TreeComponent ngOnDestroy');
if (!!this.treeControlExpansionChangeSubscription) {
this.treeControlExpansionChangeSubscription.unsubscribe();
}
}
ngAfterViewInit(): void {
@ -153,51 +169,70 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
hasChild = (_: number, node: FlatNode) => node.expandable;
isLastNode(node: FlatNode): boolean {
const i = this.findNodeIndex(node);
isLastNode(node: FlatNode, depth: number): boolean {
const i = this.findNodeIndex(node, depth);
if (-1 === i) {
return false;
}
if (i === this.dataSource.expandedDataSubject.value.length - 1) {
return true;
}
if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
const n = this.dataSource.expandedDataSubject.value[i];
for (
let idx = i + 1;
idx < this.dataSource.expandedDataSubject.value.length;
idx++
) {
const element = this.dataSource.expandedDataSubject.value[idx];
if (n.level === element.level) {
return false;
}
if (n.level > element.level) {
return true;
}
return false;
}
return true;
}
isParentLastNode(node: FlatNode): boolean {
const pi = this.findParentNodeIndex(node);
if (-1 === pi) {
return false;
appendDivArray(level: number): number[] {
if (0 === level) {
return [];
}
return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
return Array.from({ length: level }, (_, i: number) => i);
}
onClickNode(node: OrganizationNode) {
this.selected.emit(node.deptInfo);
}
private findNodeIndex(node: FlatNode): number {
return this.dataSource.expandedDataSubject.value.findIndex(n => {
private findNodeIndex(node: FlatNode, depth: number): number {
if (!node) {
return -1;
}
const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
return node.deptInfo.seq === n.deptInfo.seq;
});
if (0 === depth) {
return i;
}
return this.findNodeIndex(this.findParentNode(i), depth - 1);
}
private findParentNodeIndex(node: FlatNode): number {
const i = this.findNodeIndex(node);
if (-1 === i) {
return -1;
}
private findParentNode(index: number): FlatNode {
const node = this.dataSource.expandedDataSubject.value[index];
for (let idx = i - 1; idx >= 0; idx--) {
if (
this.dataSource.expandedDataSubject.value[idx].level ===
node.level - 1
) {
return idx;
for (let idx = index - 1; idx >= 0; idx--) {
const n = this.dataSource.expandedDataSubject.value[idx];
if (n.level === node.level - 1) {
return n;
}
}
return -1;
return undefined;
}
}

2
projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
View File

@ -71,7 +71,7 @@ export class SplashScreenService {
.build([
style({ opacity: '1' }),
animate(
'400ms ease',
'700ms ease',
style({
opacity: '0',
display: 'none',