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:
Developer 02 2024-08-08 09:59:55 +02:00
parent 7eabbd4b99
commit 321a4c83bb
2 changed files with 60 additions and 71 deletions

View File

@ -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>

View File

@ -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;
}
}