8d961702-053e-4113-8434-f4e68a69a093

Build # 8d961702-053e-4113-8434-f4e68a69a093

Build Type

push

circleci

Committed by zhangwen

Commit Message

feat(gantt): support fixed expand icon assign column(#INFR-6568)

Run Details

329 of 519 branches covered (63.39%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

1227 of 1438 relevant lines covered (85.33%)

994.84 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.0

/packages/gantt/src/components/table/gantt-table.component.ts

import {
    Component,
    HostBinding,
    TemplateRef,
    QueryList,
    Input,
    ViewChild,
    ElementRef,
    OnChanges,
    SimpleChanges,
    Inject,
    Output,
    EventEmitter
} from '@angular/core';
import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent } from '../../class';
import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
// import { defaultColumnWidth, minColumnWidth } from '../../gantt.component';
import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
import { coerceCssPixelValue } from '@angular/cdk/coercion';
import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../gantt-abstract';
import { GanttUpper, GANTT_UPPER_TOKEN } from '../../gantt-upper';
import { setStyleWithVendorPrefix } from '../../utils/set-style-with-vendor-prefix';

export const defaultColumnWidth = 100;
export const minColumnWidth = 80;

interface DragFixedConfig {
    target: HTMLElement;
    originWidth: number;
    movedWidth: number;
    minWidth: number;
}
@Component({
    selector: 'gantt-table',
    templateUrl: './gantt-table.component.html'
})
export class GanttTableComponent implements OnChanges {
    public columnList: QueryList<NgxGanttTableColumnComponent>;

    public dragStartLeft: number;

    public hasShowExpandIcon = false;

    @Input() groups: GanttGroupInternal[];

    @Input() items: GanttItemInternal[];

    @Input()
    set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
        this.hasShowExpandIcon = false;
        columns.forEach((column) => {
            if (!column.columnWidth) {
                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
            }
            if (column.showExpandIcon) {
                this.hasShowExpandIcon = true;
            }
        });
        this.columnList = columns;
    }

    @Input() groupTemplate: TemplateRef<any>;

    @Input() emptyTemplate: TemplateRef<any>;

    @Input() rowBeforeTemplate: TemplateRef<any>;

    @Input() rowAfterTemplate: TemplateRef<any>;

    @Output() itemClick = new EventEmitter<GanttSelectedEvent>();

    @ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;

    @HostBinding('class.gantt-table') ganttTableClass = true;

    @HostBinding('class.gantt-table-empty') ganttTableEmptyClass = false;

    constructor(
        @Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent,
        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
        private elementRef: ElementRef
    ) {}

    ngOnChanges(changes: SimpleChanges) {
        if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {
            this.ganttTableEmptyClass = true;
        } else {
            this.ganttTableEmptyClass = false;
        }
    }

    private dragFixed(config: DragFixedConfig) {
        if (config.movedWidth < config.minWidth) {
            setStyleWithVendorPrefix({
                element: config.target,
                style: 'transform',
                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
            });
        }
    }

    expandGroup(group: GanttGroupInternal) {
        this.gantt.expandGroup(group);
    }

    expandChildren(event: MouseEvent, item: GanttItemInternal) {
        event.stopPropagation();
        this.gantt.expandChildren(item);
    }

    dragStarted(event: CdkDragStart) {
        const target = event.source.element.nativeElement;
        this.dragStartLeft = target.getBoundingClientRect().left;
    }

    dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;

        let originWidth: number;
        let movedWidth: number;
        let minWidth: number;
        if (column) {
            originWidth = parseInt(column.columnWidth, 10);
            movedWidth = originWidth + (left - this.dragStartLeft);
            minWidth = minColumnWidth;
        } else {
            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
            movedWidth = originWidth + (left - this.dragStartLeft);
            minWidth = minColumnWidth * this.columnList.length;
        }

        this.dragFixed({
            target,
            originWidth,
            movedWidth,
            minWidth
        });

        this.showAuxiliaryLine(event);
    }

    columnDragEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;
        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
        const columnWidth = Math.max(width || 0, minColumnWidth);
        column.columnWidth = coerceCssPixelValue(columnWidth);
        if (this.gantt.table) {
            this.gantt.table.columnChanges.emit({ columns: this.columnList });
        }

        this.hideAuxiliaryLine();
        event.source.reset();
    }

    tableDragEnded(event: CdkDragEnd) {
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;
        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
        const dragWidth = left - this.dragStartLeft;
        this.columnList.forEach((column) => {
            const lastColumnWidth = parseInt(column.columnWidth, 10);
            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
            column.columnWidth = coerceCssPixelValue(columnWidth);
        });

        if (this.gantt.table) {
            this.gantt.table.columnChanges.emit({ columns: this.columnList });
        }

        this.hideAuxiliaryLine();
        event.source.reset();
    }

    private showAuxiliaryLine(event: CdkDragMove) {
        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
        this.draglineElementRef.nativeElement.style.left = `${(event.event as any).clientX - tableRect.left}px`;
        this.draglineElementRef.nativeElement.style.display = 'block';
    }

    private hideAuxiliaryLine() {
        this.draglineElementRef.nativeElement.style.display = 'none';
    }

    trackBy(index: number, item: GanttGroupInternal | GanttItemInternal) {
        return item.id || index;
    }
}

1	import {
2	Component,
3	HostBinding,
4	TemplateRef,
5	QueryList,
6	Input,
7	ViewChild,
8	ElementRef,	1✔
9	OnChanges,	1✔
10	SimpleChanges,	1✔
11	Inject,
12	Output,	52✔
13	EventEmitter	52✔
14	} from '@angular/core';	63!
15	import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent } from '../../class';	×
16	import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
17	// import { defaultColumnWidth, minColumnWidth } from '../../gantt.component';	63✔
18	import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';	11✔
19	import { coerceCssPixelValue } from '@angular/cdk/coercion';
20	import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../gantt-abstract';
21	import { GanttUpper, GANTT_UPPER_TOKEN } from '../../gantt-upper';	52✔
22	import { setStyleWithVendorPrefix } from '../../utils/set-style-with-vendor-prefix';
23
24	export const defaultColumnWidth = 100;	52✔
25	export const minColumnWidth = 80;	52✔
26		52✔
27	interface DragFixedConfig {	52✔
28	target: HTMLElement;	52✔
29	originWidth: number;	52✔
30	movedWidth: number;	52✔
31	minWidth: number;
32	}
33	@Component({	56✔
34	selector: 'gantt-table',	1✔
35	templateUrl: './gantt-table.component.html'
36	})
37	export class GanttTableComponent implements OnChanges {	55✔
38	public columnList: QueryList<NgxGanttTableColumnComponent>;
39
40	public dragStartLeft: number;
41		2!
42	public hasShowExpandIcon = false;	×
43
44	@Input() groups: GanttGroupInternal[];
45
46	@Input() items: GanttItemInternal[];
47
48	@Input()
49	set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
50	this.hasShowExpandIcon = false;	3✔
51	columns.forEach((column) => {
52	if (!column.columnWidth) {
53	column.columnWidth = coerceCssPixelValue(defaultColumnWidth);	5✔
54	}	5✔
55	if (column.showExpandIcon) {
56	this.hasShowExpandIcon = true;
57	}	2✔
58	});	2✔
59	this.columnList = columns;
60	}
61		2✔
62	@Input() groupTemplate: TemplateRef<any>;	2✔
63
64	@Input() emptyTemplate: TemplateRef<any>;
65
66	@Input() rowBeforeTemplate: TemplateRef<any>;	2✔
67		1✔
68	@Input() rowAfterTemplate: TemplateRef<any>;	1✔
69		1✔
70	@Output() itemClick = new EventEmitter<GanttSelectedEvent>();
71
72	@ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;	1✔
73		1✔
74	@HostBinding('class.gantt-table') ganttTableClass = true;	1✔
75
76	@HostBinding('class.gantt-table-empty') ganttTableEmptyClass = false;	2✔
77
78	constructor(
79	@Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent,
80	@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
81	private elementRef: ElementRef
82	) {}	2✔
83
84	ngOnChanges(changes: SimpleChanges) {
85	if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {	1✔
86	this.ganttTableEmptyClass = true;	1✔
87	} else {	1✔
88	this.ganttTableEmptyClass = false;	1!
89	}	1✔
90	}	1!
91		1✔
92	private dragFixed(config: DragFixedConfig) {
93	if (config.movedWidth < config.minWidth) {	1✔
94	setStyleWithVendorPrefix({	1✔
95	element: config.target,
96	style: 'transform',
97	value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`	1✔
98	});	1✔
99	}	1✔
100	}	1✔
101		1✔
102	expandGroup(group: GanttGroupInternal) {	2✔
103	this.gantt.expandGroup(group);	2✔
104	}	2!
105		2✔
106	expandChildren(event: MouseEvent, item: GanttItemInternal) {
107	event.stopPropagation();	1!
108	this.gantt.expandChildren(item);	1✔
109	}
110		1✔
111	dragStarted(event: CdkDragStart) {	1✔
112	const target = event.source.element.nativeElement;
113	this.dragStartLeft = target.getBoundingClientRect().left;
114	}	2✔
115		2✔
116	dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {	2✔
117	const target = event.source.element.nativeElement;
118	const left = target.getBoundingClientRect().left;
119		2✔
120	let originWidth: number;
121	let movedWidth: number;
122	let minWidth: number;	2,276!
123	if (column) {
124	originWidth = parseInt(column.columnWidth, 10);	1✔
125	movedWidth = originWidth + (left - this.dragStartLeft);
126	minWidth = minColumnWidth;
127	} else {
128	originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
129	movedWidth = originWidth + (left - this.dragStartLeft);	1✔
130	minWidth = minColumnWidth * this.columnList.length;
131	}
132
133	this.dragFixed({
134	target,
135	originWidth,
136	movedWidth,
137	minWidth
138	});
139
140	this.showAuxiliaryLine(event);
141	}
142
143	columnDragEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {	1✔
144	const target = event.source.element.nativeElement;
145	const left = target.getBoundingClientRect().left;
146	const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
147	const columnWidth = Math.max(width \|\| 0, minColumnWidth);
148	column.columnWidth = coerceCssPixelValue(columnWidth);
149	if (this.gantt.table) {
150	this.gantt.table.columnChanges.emit({ columns: this.columnList });
151	}
152
153	this.hideAuxiliaryLine();
154	event.source.reset();
155	}
156
157	tableDragEnded(event: CdkDragEnd) {
158	const target = event.source.element.nativeElement;
159	const left = target.getBoundingClientRect().left;
160	const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
161	const dragWidth = left - this.dragStartLeft;
162	this.columnList.forEach((column) => {
163	const lastColumnWidth = parseInt(column.columnWidth, 10);
164	const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
165	const columnWidth = Math.max(lastColumnWidth + distributeWidth \|\| 0, minColumnWidth);
166	column.columnWidth = coerceCssPixelValue(columnWidth);
167	});
168
169	if (this.gantt.table) {
170	this.gantt.table.columnChanges.emit({ columns: this.columnList });
171	}
172
173	this.hideAuxiliaryLine();
174	event.source.reset();
175	}
176
177	private showAuxiliaryLine(event: CdkDragMove) {
178	const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
179	this.draglineElementRef.nativeElement.style.left = `${(event.event as any).clientX - tableRect.left}px`;
180	this.draglineElementRef.nativeElement.style.display = 'block';
181	}
182
183	private hideAuxiliaryLine() {
184	this.draglineElementRef.nativeElement.style.display = 'none';
185	}
186
187	trackBy(index: number, item: GanttGroupInternal \| GanttItemInternal) {
188	return item.id \|\| index;
189	}
190	}

worktile / ngx-gantt / 8d961702-053e-4113-8434-f4e68a69a093

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous