10094028922

Committed 25 Jul 2024 12:23PM CUT coverage: 91.534% (-0.01%) from 91.548%

Build # 10094028922

Build Type

Pull #14587

github

Committed by

web-flow

Commit Message

Merge 721edf892 into 1f753a2f9

Pull Request Pull Request #14587: chore(demos): fix type errors, add missing functionality in dock manager

Run Details

12765 of 14977 branches covered (85.23%)

26024 of 28431 relevant lines covered (91.53%)

32318.97 hits per line

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

89.33

/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts

import { Directive, Input, OnDestroy, ElementRef, Renderer2, NgZone } from '@angular/core';
import { DropPosition, IgxColumnMovingService } from './moving.service';
import { Subject, interval, animationFrameScheduler } from 'rxjs';
import { IgxColumnMovingDragDirective } from './moving.drag.directive';
import { takeUntil } from 'rxjs/operators';
import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive';
import { IgxForOfDirective, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
import { ColumnType } from '../common/grid.interface';
// import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';


@Directive({
    selector: '[igxColumnMovingDrop]',
    standalone: true
})
export class IgxColumnMovingDropDirective extends IgxDropDirective implements OnDestroy {

    @Input('igxColumnMovingDrop')
    public override set data(val: ColumnType | IgxForOfDirective<ColumnType, ColumnType[]>) {
        if (val instanceof IgxGridForOfDirective) {
            this._displayContainer = val;
        } else {
            this._column = val as ColumnType;
        }

    }

    public get column() {
        return this._column;
    }

    public get isDropTarget(): boolean {
        return this.column && this.column.grid.moving &&
            ((!this.column.pinned && this.cms.column?.disablePinning) || !this.cms.column?.disablePinning);
    }

    public get horizontalScroll() {
        if (this._displayContainer) {
            return this._displayContainer;
        }
    }

    public get nativeElement() {
        return this.ref.nativeElement;
    }

    private _dropPos: DropPosition;
    private _dropIndicator = null;
    private _lastDropIndicator = null;
    private _column: ColumnType;
    private _displayContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;
    private _dragLeave = new Subject<boolean>();
    private _dropIndicatorClass = 'igx-grid-th__drop-indicator--active';

    constructor(
        private ref: ElementRef<HTMLElement>,
        private renderer: Renderer2,
        private _: NgZone,
        private cms: IgxColumnMovingService
    ) {
        super(ref, renderer, _);
    }

    public override ngOnDestroy() {
        this._dragLeave.next(true);
        this._dragLeave.complete();
        super.ngOnDestroy();
    }

    public override onDragOver(event) {
        const drag = event.detail.owner;
        if (!(drag instanceof IgxColumnMovingDragDirective)) {
            return;
        }

        if (this.isDropTarget &&
            this.cms.column !== this.column &&
            this.cms.column.level === this.column.level &&
            this.cms.column.parent === this.column.parent) {

            if (this._lastDropIndicator) {
                this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass);
            }

            const clientRect = this.nativeElement.getBoundingClientRect();
            const pos = clientRect.left + clientRect.width / 2;

            const parent = this.nativeElement.parentElement;
            if (event.detail.pageX < pos) {
                this._dropPos = DropPosition.BeforeDropTarget;
                this._lastDropIndicator = this._dropIndicator = parent.firstElementChild;
            } else {
                this._dropPos = DropPosition.AfterDropTarget;
                this._lastDropIndicator = this._dropIndicator = parent.lastElementChild;
            }

            if (this.cms.icon.innerText !== 'block') {
                this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass);
            }
        }
    }

    public override onDragEnter(event) {
        const drag = event.detail.owner;
        if (!(drag instanceof IgxColumnMovingDragDirective)) {
            return;
        }

        if (this.column && this.cms.column.grid.id !== this.column.grid.id) {
            this.cms.icon.innerText = 'block';
            return;
        }

        if (this.isDropTarget &&
            this.cms.column !== this.column &&
            this.cms.column.level === this.column.level &&
            this.cms.column.parent === this.column.parent) {

            if (!this.column.pinned || (this.column.pinned && this.cms.column.pinned)) {
                this.cms.icon.innerText = 'swap_horiz';
            }

            this.cms.icon.innerText = 'save_alt';
        } else {
            this.cms.icon.innerText = 'block';
        }

        if (this.horizontalScroll) {
            this.cms.icon.innerText = event.target.id === 'right' ? 'arrow_forward' : 'arrow_back';

            interval(0, animationFrameScheduler).pipe(takeUntil(this._dragLeave)).subscribe(() => {
                if (event.target.id === 'right') {
                    this.horizontalScroll.scrollPosition += 10;
                } else {
                    this.horizontalScroll.scrollPosition -= 10;
                }
            });
        }
    }

    public override onDragLeave(event) {
        const drag = event.detail.owner;
        if (!(drag instanceof IgxColumnMovingDragDirective)) {
            return;
        }

        this.cms.icon.innerText = 'block';

        if (this._dropIndicator) {
            this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass);
        }

        if (this.horizontalScroll) {
            this._dragLeave.next(true);
        }
    }

    public override onDragDrop(event) {
        event.preventDefault();
        const drag = event.detail.owner;
        if (this.cms.cancelDrop || !(drag instanceof IgxColumnMovingDragDirective)) {
            this.cms.cancelDrop = false;
            return;
        }

        if (this.column && (this.cms.column.grid.id !== this.column.grid.id)) {
            return;
        }

        if (this.horizontalScroll) {
            this._dragLeave.next(true);
        }

        if (this.isDropTarget) {
            this.column.grid.moveColumn(this.cms.column, this.column, this._dropPos);

            this.cms.column = null;
            this.column.grid.cdr.detectChanges();
        }
    }
}

1	import { Directive, Input, OnDestroy, ElementRef, Renderer2, NgZone } from '@angular/core';
2	import { DropPosition, IgxColumnMovingService } from './moving.service';
3	import { Subject, interval, animationFrameScheduler } from 'rxjs';
4	import { IgxColumnMovingDragDirective } from './moving.drag.directive';
5	import { takeUntil } from 'rxjs/operators';
6	import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive';
7	import { IgxForOfDirective, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
8	import { ColumnType } from '../common/grid.interface';
9	// import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
10
11
12	@Directive({
13	selector: '[igxColumnMovingDrop]',
14	standalone: true
15	})
16	export class IgxColumnMovingDropDirective extends IgxDropDirective implements OnDestroy {	2✔
17
18	@Input('igxColumnMovingDrop')
19	public override set data(val: ColumnType \| IgxForOfDirective<ColumnType, ColumnType[]>) {
20	if (val instanceof IgxGridForOfDirective) {	29,511✔
21	this._displayContainer = val;	212✔
22	} else {
23	this._column = val as ColumnType;	29,299✔
24	}
25
26	}
27
28	public get column() {
29	return this._column;	1,095✔
30	}
31
32	public get isDropTarget(): boolean {
33	return this.column && this.column.grid.moving &&	153✔
34	((!this.column.pinned && this.cms.column?.disablePinning) \|\| !this.cms.column?.disablePinning);
35	}
36
37	public get horizontalScroll() {
38	if (this._displayContainer) {	248✔
39	return this._displayContainer;	104✔
40	}
41	}
42
43	public get nativeElement() {
44	return this.ref.nativeElement;	78✔
45	}
46
47	private _dropPos: DropPosition;
48	private _dropIndicator = null;	27,552✔
49	private _lastDropIndicator = null;	27,552✔
50	private _column: ColumnType;
51	private _displayContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;
52	private _dragLeave = new Subject<boolean>();	27,552✔
53	private _dropIndicatorClass = 'igx-grid-th__drop-indicator--active';	27,552✔
54
55	constructor(
56	private ref: ElementRef<HTMLElement>,	27,552✔
57	private renderer: Renderer2,	27,552✔
58	private _: NgZone,	27,552✔
59	private cms: IgxColumnMovingService	27,552✔
60	) {
61	super(ref, renderer, _);	27,552✔
62	}
63
64	public override ngOnDestroy() {
65	this._dragLeave.next(true);	27,439✔
66	this._dragLeave.complete();	27,439✔
67	super.ngOnDestroy();	27,439✔
68	}
69
70	public override onDragOver(event) {
71	const drag = event.detail.owner;	54✔
72	if (!(drag instanceof IgxColumnMovingDragDirective)) {	54✔
73	return;	1✔
74	}
75
76	if (this.isDropTarget &&	53✔
77	this.cms.column !== this.column &&
78	this.cms.column.level === this.column.level &&
79	this.cms.column.parent === this.column.parent) {
80
81	if (this._lastDropIndicator) {	39!
82	this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass);	×
83	}
84
85	const clientRect = this.nativeElement.getBoundingClientRect();	39✔
86	const pos = clientRect.left + clientRect.width / 2;	39✔
87
88	const parent = this.nativeElement.parentElement;	39✔
89	if (event.detail.pageX < pos) {	39✔
90	this._dropPos = DropPosition.BeforeDropTarget;	17✔
91	this._lastDropIndicator = this._dropIndicator = parent.firstElementChild;	17✔
92	} else {
93	this._dropPos = DropPosition.AfterDropTarget;	22✔
94	this._lastDropIndicator = this._dropIndicator = parent.lastElementChild;	22✔
95	}
96
97	if (this.cms.icon.innerText !== 'block') {	39✔
98	this.renderer.addClass(this._dropIndicator, this._dropIndicatorClass);	39✔
99	}
100	}
101	}
102
103	public override onDragEnter(event) {
104	const drag = event.detail.owner;	54✔
105	if (!(drag instanceof IgxColumnMovingDragDirective)) {	54✔
106	return;	1✔
107	}
108
109	if (this.column && this.cms.column.grid.id !== this.column.grid.id) {	53!
110	this.cms.icon.innerText = 'block';	×
111	return;	×
112	}
113
114	if (this.isDropTarget &&	53✔
115	this.cms.column !== this.column &&
116	this.cms.column.level === this.column.level &&
117	this.cms.column.parent === this.column.parent) {
118
119	if (!this.column.pinned \|\| (this.column.pinned && this.cms.column.pinned)) {	39✔
120	this.cms.icon.innerText = 'swap_horiz';	36✔
121	}
122
123	this.cms.icon.innerText = 'save_alt';	39✔
124	} else {
125	this.cms.icon.innerText = 'block';	14✔
126	}
127
128	if (this.horizontalScroll) {	53✔
129	this.cms.icon.innerText = event.target.id === 'right' ? 'arrow_forward' : 'arrow_back';	3!
130
131	interval(0, animationFrameScheduler).pipe(takeUntil(this._dragLeave)).subscribe(() => {	3✔
132	if (event.target.id === 'right') {	98!
133	this.horizontalScroll.scrollPosition += 10;	×
134	} else {
135	this.horizontalScroll.scrollPosition -= 10;	98✔
136	}
137	});
138	}
139	}
140
141	public override onDragLeave(event) {
142	const drag = event.detail.owner;	51✔
143	if (!(drag instanceof IgxColumnMovingDragDirective)) {	51✔
144	return;	1✔
145	}
146
147	this.cms.icon.innerText = 'block';	50✔
148
149	if (this._dropIndicator) {	50✔
150	this.renderer.removeClass(this._dropIndicator, this._dropIndicatorClass);	36✔
151	}
152
153	if (this.horizontalScroll) {	50✔
154	this._dragLeave.next(true);	3✔
155	}
156	}
157
158	public override onDragDrop(event) {
159	event.preventDefault();	47✔
160	const drag = event.detail.owner;	47✔
161	if (this.cms.cancelDrop \|\| !(drag instanceof IgxColumnMovingDragDirective)) {	47!
162	this.cms.cancelDrop = false;	×
163	return;	×
164	}
165
166	if (this.column && (this.cms.column.grid.id !== this.column.grid.id)) {	47!
167	return;	×
168	}
169
170	if (this.horizontalScroll) {	47!
171	this._dragLeave.next(true);	×
172	}
173
174	if (this.isDropTarget) {	47✔
175	this.column.grid.moveColumn(this.cms.column, this.column, this._dropPos);	46✔
176
177	this.cms.column = null;	46✔
178	this.column.grid.cdr.detectChanges();	46✔
179	}
180	}
181	}

IgniteUI / igniteui-angular / 10094028922

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