d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { CdkDrag, CdkDragDrop, CdkDropList, CdkDropListGroup, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import {
    Component,
    DoCheck,
    EventEmitter,
    HostBinding,
    Input,
    IterableChanges,
    IterableDiffer,
    IterableDiffers,
    OnInit,
    Output,
    TemplateRef,
    ViewEncapsulation
} from '@angular/core';

import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { ThyListComponent, ThyListItemComponent } from 'ngx-tethys/list';
import { ThyDragDropDirective } from 'ngx-tethys/shared';
import { InnerTransferDragEvent, ThyTransferDragEvent, ThyTransferItem, ThyTransferSelectEvent } from './transfer.interface';

/**
 * @private
 */
@Component({
    selector: 'thy-transfer-list',
    templateUrl: './transfer-list.component.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [
        NgIf,
        CdkDropListGroup,
        ThyListComponent,
        CdkDropList,
        ThyDragDropDirective,
        NgFor,
        ThyListItemComponent,
        CdkDrag,
        NgClass,
        NgTemplateOutlet
    ]
})
export class ThyTransferListComponent implements OnInit, DoCheck {
    public lockItems: ThyTransferItem[] = [];

    public unlockItems: ThyTransferItem[] = [];

    private _diff: IterableDiffer<ThyTransferItem>;

    private _lockDiff: IterableDiffer<ThyTransferItem>;

    private _unlockDiff: IterableDiffer<ThyTransferItem>;

    @Input() title: string;

    @Input() items: ThyTransferItem[];

    @Input() draggable: boolean;

    @Input() canLock: boolean;

    @Input() maxLock: number;

    @Input() max: number;

    @Input() disabled: boolean;

    @Input() template: TemplateRef<any>;

    @Input('renderContentRef') contentRef: TemplateRef<any>;

    @Output() draggableUpdate: EventEmitter<InnerTransferDragEvent> = new EventEmitter<InnerTransferDragEvent>();

    @Output() selectItem: EventEmitter<ThyTransferSelectEvent> = new EventEmitter<ThyTransferSelectEvent>();

    @Output() unselectItem: EventEmitter<ThyTransferSelectEvent> = new EventEmitter<ThyTransferSelectEvent>();

    @HostBinding('class') hostClass = 'thy-transfer-list';

    constructor(private differs: IterableDiffers) {}

    ngOnInit() {
        this._combineTransferData();
        if (this.canLock) {
            this._lockDiff = this.differs.find(this.lockItems).create();
            this._unlockDiff = this.differs.find(this.unlockItems).create();
        } else {
            this._unlockDiff = this.differs.find(this.unlockItems).create();
        }
        this._diff = this.differs.find(this.items).create();
    }

    private _combineTransferData() {
        this.lockItems = [];
        this.unlockItems = [];
        if (this.canLock) {
            (this.items || []).forEach(item => {
                if (item.isLock) {
                    this.lockItems.push(item);
                } else {
                    this.unlockItems.push(item);
                }
            });
        } else {
            this.unlockItems = this.items;
        }
    }

    private _afterChangeItems(changes: IterableChanges<ThyTransferItem>, items: ThyTransferItem[]) {
        // 数据发生变化时，更改order值
        changes.forEachAddedItem(record => {
            record.item.order = record.currentIndex;
        });
        changes.forEachRemovedItem(() => {
            items.forEach((item, index) => {
                item.order = index;
            });
        });
        changes.forEachMovedItem(() => {
            items.forEach((item, index) => {
                item.order = index;
            });
        });
    }

    ngDoCheck() {
        const changes = this._diff.diff(this.items);
        if (changes) {
            this._afterChangeItems(changes, this.items);
            this._combineTransferData();
        }
        if (this._lockDiff) {
            const lockChanges = this._lockDiff.diff(this.lockItems);
            if (lockChanges) {
                this._afterChangeItems(lockChanges, this.lockItems);
            }
        }
        const unlockChanges = this._unlockDiff.diff(this.unlockItems);
        if (unlockChanges) {
            this._afterChangeItems(unlockChanges, this.unlockItems);
        }
    }

    lockListEnterPredicate = () => {
        return this.lockItems.length < this.maxLock;
    };

    unlockListEnterPredicate = (event: CdkDrag<ThyTransferItem>) => {
        return !event.data.isFixed;
    };

    onSelectItem = (item: ThyTransferItem) => {
        this.selectItem.emit({ item });
    };

    onUnselectItem = (item: ThyTransferItem) => {
        this.unselectItem.emit({ item });
    };

    drop(event: CdkDragDrop<ThyTransferItem[]>) {
        if (event.previousContainer === event.container) {
            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            (event.previousContainer.data || []).forEach(item => {
                item.isLock = event.previousContainer.id === 'lock';
            });

            (event.container.data || []).forEach(item => {
                item.isLock = event.container.id === 'lock';
            });
        }
        const dragEvent: ThyTransferDragEvent = {
            model: event.item.data,
            models: event.container.data,
            oldIndex: event.previousIndex,
            newIndex: event.currentIndex
        };
        this.draggableUpdate.emit({
            dragEvent: dragEvent,
            listData: { lock: this.lockItems, unlock: this.unlockItems }
        });
    }
}

1	import { CdkDrag, CdkDragDrop, CdkDropList, CdkDropListGroup, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
2	import {
3	Component,
4	DoCheck,
5	EventEmitter,
6	HostBinding,
7	Input,
8	IterableChanges,
9	IterableDiffer,
10	IterableDiffers,
11	OnInit,	1✔
12	Output,
13	TemplateRef,	×
14	ViewEncapsulation	×
15	} from '@angular/core';	×
16		×
17	import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';	×
18	import { ThyListComponent, ThyListItemComponent } from 'ngx-tethys/list';	×
19	import { ThyDragDropDirective } from 'ngx-tethys/shared';	×
20	import { InnerTransferDragEvent, ThyTransferDragEvent, ThyTransferItem, ThyTransferSelectEvent } from './transfer.interface';	×
21		×
22	/**
23	* @private	×
24	*/	×
25	@Component({
26	selector: 'thy-transfer-list',	×
27	templateUrl: './transfer-list.component.html',	×
28	encapsulation: ViewEncapsulation.None,
29	standalone: true,	×
30	imports: [	×
31	NgIf,
32	CdkDropListGroup,
33	ThyListComponent,
34	CdkDropList,	×
35	ThyDragDropDirective,	×
36	NgFor,	×
37	ThyListItemComponent,	×
38	CdkDrag,
39	NgClass,
40	NgTemplateOutlet	×
41	]
42	})	×
43	export class ThyTransferListComponent implements OnInit, DoCheck {
44	public lockItems: ThyTransferItem[] = [];
45		×
46	public unlockItems: ThyTransferItem[] = [];	×
47		×
48	private _diff: IterableDiffer<ThyTransferItem>;	×
49		×
50	private _lockDiff: IterableDiffer<ThyTransferItem>;	×
51
52	private _unlockDiff: IterableDiffer<ThyTransferItem>;
53		×
54	@Input() title: string;
55
56	@Input() items: ThyTransferItem[];
57
58	@Input() draggable: boolean;	×
59
60	@Input() canLock: boolean;
61
62	@Input() maxLock: number;
63		×
64	@Input() max: number;	×
65
66	@Input() disabled: boolean;	×
67		×
68	@Input() template: TemplateRef<any>;	×
69
70	@Input('renderContentRef') contentRef: TemplateRef<any>;
71		×
72	@Output() draggableUpdate: EventEmitter<InnerTransferDragEvent> = new EventEmitter<InnerTransferDragEvent>();	×
73		×
74	@Output() selectItem: EventEmitter<ThyTransferSelectEvent> = new EventEmitter<ThyTransferSelectEvent>();
75
76	@Output() unselectItem: EventEmitter<ThyTransferSelectEvent> = new EventEmitter<ThyTransferSelectEvent>();
77
78	@HostBinding('class') hostClass = 'thy-transfer-list';	×
79		×
80	constructor(private differs: IterableDiffers) {}	×
81		×
82	ngOnInit() {
83	this._combineTransferData();	×
84	if (this.canLock) {	×
85	this._lockDiff = this.differs.find(this.lockItems).create();	×
86	this._unlockDiff = this.differs.find(this.unlockItems).create();	×
87	} else {
88	this._unlockDiff = this.differs.find(this.unlockItems).create();
89	}	×
90	this._diff = this.differs.find(this.items).create();	×
91	}	×
92
93	private _combineTransferData() {
94	this.lockItems = [];
95	this.unlockItems = [];	×
96	if (this.canLock) {	×
97	(this.items \|\| []).forEach(item => {
98	if (item.isLock) {
99	this.lockItems.push(item);	×
100	} else {	×
101	this.unlockItems.push(item);	×
102	}
103	});	×
104	} else {	×
105	this.unlockItems = this.items;
106	}
107	}	×
108
109	private _afterChangeItems(changes: IterableChanges<ThyTransferItem>, items: ThyTransferItem[]) {
110	// 数据发生变化时，更改order值
111	changes.forEachAddedItem(record => {
112	record.item.order = record.currentIndex;
113	});	×
114	changes.forEachRemovedItem(() => {
115	items.forEach((item, index) => {
116	item.order = index;
117	});
118	});	1✔
119	changes.forEachMovedItem(() => {
120	items.forEach((item, index) => {
121	item.order = index;	1✔
122	});
123	});
124	}
125
126	ngDoCheck() {
127	const changes = this._diff.diff(this.items);
128	if (changes) {
129	this._afterChangeItems(changes, this.items);
130	this._combineTransferData();
131	}
132	if (this._lockDiff) {
133	const lockChanges = this._lockDiff.diff(this.lockItems);
134	if (lockChanges) {
135	this._afterChangeItems(lockChanges, this.lockItems);
136	}
137	}	1✔
138	const unlockChanges = this._unlockDiff.diff(this.unlockItems);
139	if (unlockChanges) {
140	this._afterChangeItems(unlockChanges, this.unlockItems);
141	}
142	}
143
144	lockListEnterPredicate = () => {
145	return this.lockItems.length < this.maxLock;
146	};
147
148	unlockListEnterPredicate = (event: CdkDrag<ThyTransferItem>) => {
149	return !event.data.isFixed;
150	};
151
152	onSelectItem = (item: ThyTransferItem) => {
153	this.selectItem.emit({ item });
154	};
155
156	onUnselectItem = (item: ThyTransferItem) => {
157	this.unselectItem.emit({ item });
158	};
159
160	drop(event: CdkDragDrop<ThyTransferItem[]>) {
161	if (event.previousContainer === event.container) {
162	moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
163	} else {
164	transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
165	(event.previousContainer.data \|\| []).forEach(item => {
166	item.isLock = event.previousContainer.id === 'lock';
167	});
168
169	(event.container.data \|\| []).forEach(item => {
170	item.isLock = event.container.id === 'lock';
171	});
172	}
173	const dragEvent: ThyTransferDragEvent = {
174	model: event.item.data,
175	models: event.container.data,
176	oldIndex: event.previousIndex,
177	newIndex: event.currentIndex
178	};
179	this.draggableUpdate.emit({
180	dragEvent: dragEvent,
181	listData: { lock: this.lockItems, unlock: this.unlockItems }
182	});
183	}
184	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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