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

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/pages/user-assignment/user-assignment.component.html

@@ -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)"
+            [rowSelection]="userRowSelection" [initData]="initWithoutData"></app-user-table>
-            (dragover)="allowDropOnUnassigned($event)" (dragstart)="dragUnassigned($event)"
-            [draggable]="true" [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)"
+            [rowSelection]="userRowSelection" [initData]="initWithoutData"></app-user-table>
-            (dragstart)="dragAssigned($event)" [draggable]="true" [initData]="initWithoutData"></app-user-table>
         </mat-tab>
       </mat-tab-group>
-
     </div>
   </div>
 </div>

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/pages/user-assignment/user-assignment.component.ts

@@ -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 {
+    this.transferService.add(() => {
-    return (event: DragEvent) => {
+      if (this.isAssignment) {
-      this.dragging = target;
+        this.dropToUnassigned();
-      event.dataTransfer?.setData("text", target);
+        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")
+    for (var row of rows)
-  dragUnassigned = this.createAssignDragMethod("unassigned")
+      users.push(row.source);
     
-  allowDropOnAssigned(event: DragEvent) {
+    this.unselectUserTables()
-    if (this.dragging == "unassigned")
+    switch (this.target) {
-      event.preventDefault();
+      case Target.Module:
-  }
+        this.unassignedUsers.createModuleOfUsers(this.targetId, users)
-
+          .then(() => this.updateUserTables())
-  allowDropOnUnassigned(event: DragEvent) {
+        break;
-    if (this.dragging == "assigned")
+      case Target.Group:
-      event.preventDefault();
+        this.unassignedUsers.createGroupOfUsers(this.targetId, users)
-  }
+          .then(() => this.updateUserTables())
-
+        break;
-  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;
-      }
     }
   }
 
-  dropToUnassigned(event: DragEvent) {
+  dropToUnassigned() {
-    if (event.dataTransfer?.getData("text") == "assigned") {
+    var rows = this.assignedUsers.selectedRows;
-      var rows = this.assignedUsers.selectedRows;
-      var users: User[] = new Array<User>();
-      if (!rows)
-        return
 
-      for (var row of rows)
+    var users: User[] = new Array<User>();
-        users.push(row.source);
+    if (!rows)
+      return
 
-      this.unselectUserTables()
+    for (var row of rows)
-      switch (this.target) {
+      users.push(row.source);
-        case Target.Module:
+    this.unselectUserTables()
-          this.unassignedUsers.deleteModuleOfUsers(this.targetId, users)
+    switch (this.target) {
-            .then(() => this.updateUserTables())
+      case Target.Module:
-          break;
+        this.unassignedUsers.deleteModuleOfUsers(this.targetId, users)
-        case Target.Group:
+          .then(() => this.updateUserTables())
-          this.unassignedUsers.deleteGroupOfUsers(this.targetId, users)
+        break;
-            .then(() => this.updateUserTables())
+      case Target.Group:
-          break;
+        this.unassignedUsers.deleteGroupOfUsers(this.targetId, users)
-      }
+          .then(() => this.updateUserTables())
+        break;
     }
   }
 
@@ -176,8 +161,16 @@ 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()
     }
 
@@ -185,7 +178,7 @@ export class UserAssignmentComponent extends BasePageComponent implements OnInit
   }
 
   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()
     }