9792bb19-0018-4123-9d9f-ac5c8a285cd8

Build # 9792bb19-0018-4123-9d9f-ac5c8a285cd8

Build Type

push

circleci

Committed by GitHub

Commit Message

feat: upgrade ng to 15 (#305)

Run Details

327 of 517 branches covered (63.25%)

Branch coverage included in aggregate %.

1223 of 1434 relevant lines covered (85.29%)

968.5 hits per line

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

89.29

/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;

    @Input() groups: GanttGroupInternal[];

    @Input() items: GanttItemInternal[];

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

worktile / ngx-gantt / 9792bb19-0018-4123-9d9f-ac5c8a285cd8

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