Refaktorierung der Benutzerzuweisungskomponente: Vereinfachung der Drag-and-Drop-Logik
- Entfernte Drag-and-Drop-Event-Handler aus der HTML-Vorlage - Vereinfachte Drag-and-Drop-Logik in der Komponentenklasse - Hinzufügen von transferService zur Verwaltung von Benutzerzuweisungen und -zuweisungen - Gewährleistung einer nahtlosen Aktualisierung der Benutzertabellen nach der Datenübertragung - Verbesserung der Code-Lesbarkeit und Wartbarkeit - Behebung von Problemen mit der Synchronisation der Zeilenauswahl zwischen zugewiesenen und nicht zugewiesenen Benutzertabellen
This commit is contained in:
parent
7eabbd4b99
commit
321a4c83bb
@ -17,9 +17,7 @@
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Nicht zugeordnete Benutzer">
|
||||
<app-user-table #unassignedUsers class="body-content" [onSelectedRows]="unassignedUsersOnSelectedRows"
|
||||
[rowSelection]="userRowSelection" (drop)="dropToUnassigned($event)"
|
||||
(dragover)="allowDropOnUnassigned($event)" (dragstart)="dragUnassigned($event)"
|
||||
[draggable]="true" [initData]="initWithoutData"></app-user-table>
|
||||
[rowSelection]="userRowSelection" [initData]="initWithoutData"></app-user-table>
|
||||
<!-- <mt-table></mt-table> -->
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
@ -29,11 +27,9 @@
|
||||
<mat-tab-group>
|
||||
<mat-tab label="{{userInLabel}}">
|
||||
<app-user-table #assignedUsers class="body-content" [onSelectedRows]="assignedUsersOnSelectedRows"
|
||||
[rowSelection]="userRowSelection" (drop)="dropToAssigned($event)" (dragover)="allowDropOnAssigned($event)"
|
||||
(dragstart)="dragAssigned($event)" [draggable]="true" [initData]="initWithoutData"></app-user-table>
|
||||
[rowSelection]="userRowSelection" [initData]="initWithoutData"></app-user-table>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,81 +54,66 @@ export class UserAssignmentComponent extends BasePageComponent implements OnInit
|
||||
this.refreshService.add(() => {
|
||||
this.modules.fetchData();
|
||||
this.groups.fetchData();
|
||||
if(this.anySelected)
|
||||
if (this.anySelected)
|
||||
this.updateUserTables();
|
||||
});
|
||||
}
|
||||
|
||||
createAssignDragMethod(target: string): (event: DragEvent) => void {
|
||||
return (event: DragEvent) => {
|
||||
this.dragging = target;
|
||||
event.dataTransfer?.setData("text", target);
|
||||
}
|
||||
this.transferService.add(() => {
|
||||
if (this.isAssignment) {
|
||||
this.dropToUnassigned();
|
||||
this.refreshService.executeAll();
|
||||
}
|
||||
else if (this.isUnassignment) {
|
||||
this.dropToAssigned();
|
||||
this.refreshService.executeAll();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
target: Target = Target.Module;
|
||||
targetId = 0;
|
||||
|
||||
dragging: string = "";
|
||||
dropToAssigned() {
|
||||
var rows = this.unassignedUsers.selectedRows;
|
||||
var users: User[] = new Array<User>();
|
||||
if (!rows)
|
||||
return
|
||||
|
||||
dragAssigned = this.createAssignDragMethod("assigned")
|
||||
dragUnassigned = this.createAssignDragMethod("unassigned")
|
||||
|
||||
allowDropOnAssigned(event: DragEvent) {
|
||||
if (this.dragging == "unassigned")
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
allowDropOnUnassigned(event: DragEvent) {
|
||||
if (this.dragging == "assigned")
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
dropToAssigned(event: DragEvent) {
|
||||
if (event.dataTransfer?.getData("text") == "unassigned") {
|
||||
var rows = this.unassignedUsers.selectedRows;
|
||||
var users: User[] = new Array<User>();
|
||||
if (!rows)
|
||||
return
|
||||
|
||||
for (var row of rows)
|
||||
users.push(row.source);
|
||||
|
||||
this.unselectUserTables()
|
||||
switch (this.target) {
|
||||
case Target.Module:
|
||||
this.unassignedUsers.createModuleOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
case Target.Group:
|
||||
this.unassignedUsers.createGroupOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
}
|
||||
for (var row of rows)
|
||||
users.push(row.source);
|
||||
|
||||
this.unselectUserTables()
|
||||
switch (this.target) {
|
||||
case Target.Module:
|
||||
this.unassignedUsers.createModuleOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
case Target.Group:
|
||||
this.unassignedUsers.createGroupOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
dropToUnassigned(event: DragEvent) {
|
||||
if (event.dataTransfer?.getData("text") == "assigned") {
|
||||
var rows = this.assignedUsers.selectedRows;
|
||||
var users: User[] = new Array<User>();
|
||||
if (!rows)
|
||||
return
|
||||
dropToUnassigned() {
|
||||
var rows = this.assignedUsers.selectedRows;
|
||||
|
||||
for (var row of rows)
|
||||
users.push(row.source);
|
||||
var users: User[] = new Array<User>();
|
||||
if (!rows)
|
||||
return
|
||||
|
||||
this.unselectUserTables()
|
||||
switch (this.target) {
|
||||
case Target.Module:
|
||||
this.unassignedUsers.deleteModuleOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
case Target.Group:
|
||||
this.unassignedUsers.deleteGroupOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
}
|
||||
for (var row of rows)
|
||||
users.push(row.source);
|
||||
this.unselectUserTables()
|
||||
switch (this.target) {
|
||||
case Target.Module:
|
||||
this.unassignedUsers.deleteModuleOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
case Target.Group:
|
||||
this.unassignedUsers.deleteGroupOfUsers(this.targetId, users)
|
||||
.then(() => this.updateUserTables())
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,19 +161,27 @@ export class UserAssignmentComponent extends BasePageComponent implements OnInit
|
||||
private sUnassgnCount = 0;
|
||||
private sAssgnCount = 0;
|
||||
|
||||
private get isAssignment() {
|
||||
return this.sAssgnCount > 0;
|
||||
}
|
||||
|
||||
private get isUnassignment() {
|
||||
return this.sUnassgnCount > 0;
|
||||
}
|
||||
|
||||
unassignedUsersOnSelectedRows = (rows: GuiSelectedRow[]) => {
|
||||
if(rows.length > this.sUnassgnCount && this.unassignedUsers.selectedRows.length > 0){
|
||||
if (rows.length > this.sUnassgnCount && this.unassignedUsers.selectedRows.length > 0) {
|
||||
this.assignedUsers.safelyUnselectAll()
|
||||
}
|
||||
|
||||
|
||||
this.sUnassgnCount = rows.length;
|
||||
}
|
||||
|
||||
assignedUsersOnSelectedRows = (rows: GuiSelectedRow[]) => {
|
||||
if(rows.length > this.sAssgnCount && this.assignedUsers.selectedRows.length > 0){
|
||||
if (rows.length > this.sAssgnCount && this.assignedUsers.selectedRows.length > 0) {
|
||||
this.unassignedUsers.safelyUnselectAll()
|
||||
}
|
||||
|
||||
|
||||
this.sAssgnCount = rows.length;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user