Drag and Drop using Angular and dotNet core

Question

I have created one page using Angular + Dotnet core 3.1 to manage tasks for different users. I have used drag and drop functionality for that. I have two task lists 1) Unassigned Task 2) Assigned task. I can able to drag and drop tasks from the assigned task list to the unassigned task list and it is working fine. But if I drag a task that is previously not assigned to any user and drop it to assign to the user then it will be removed from the unassigned list but not showing in the user assigned list.

Below is my code for this:

assign-task.component.html

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)">
          <div *ngFor="let item of arrAssignedTaskList">
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box" cdkDrag>{{item.sTaskName}}</div>
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

assign-task.component.ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

export interface UserList {
  iUserId: number;
  sUserName: string;
}

export interface TaskList {
  iTaskId: number;
  sTaskName: string;
}

export interface AssignedTaskList {
  iTaskId: number;
  sTaskName: string;
  iUserId: number;
}

@Component({
  selector: 'app-assign-task-component',
  templateUrl: './assign-task.component.html',
  styleUrls: ['./assign-task.css'],
})
export class AssignTaskComponent {
  arrUserList: UserList[] = [
    { iUserId: 1, sUserName: 'User1' },
    { iUserId: 2, sUserName: 'User2' },
    { iUserId: 3, sUserName: 'User3' },
    { iUserId: 4, sUserName: 'User4' }
  ];

  arrUnAssignTaskList: TaskList[] = [
    { iTaskId: 2, sTaskName: 'Task2' },
    { iTaskId: 4, sTaskName: 'Task4' },
    { iTaskId: 6, sTaskName: 'Task6' },
    { iTaskId: 8, sTaskName: 'Task8' },
    { iTaskId: 9, sTaskName: 'Task9' }
  ];

  arrAssignedTaskList: AssignedTaskList[] = [
    { iTaskId: 1, sTaskName: 'Task1', iUserId: 1 },
    { iTaskId: 3, sTaskName: 'Task3', iUserId: 1 },
    { iTaskId: 5, sTaskName: 'Task5', iUserId: 3 },
    { iTaskId: 7, sTaskName: 'Task7', iUserId: 4 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    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);
    }
  }
}

package.json

{
  "name": "userTask",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run userTask:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.12",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "~8.2.14",
    "@angular/forms": "8.2.12",
    "@angular/material": "~8.2.3",
    "@angular/platform-browser": "8.2.12",
    "@angular/platform-browser-dynamic": "8.2.12",
    "@angular/platform-server": "8.2.12",
    "@angular/router": "8.2.12",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^3.3.3",
    "jquery": "3.4.1",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "save": "^2.4.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "^8.3.26",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.12",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "3.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

Below is the page layout/design

Example/Issue: If I drag and drop "Task 8"(or any unassigned task) and tried to assign it to "User1" then it will be removed from the Unassigned Task list but it will not be showing under the "User1" task list

Is there anything which I missing in my code? Or is there any configuration/step I missed?

Thanks

question from:https://stackoverflow.com/questions/65626898/drag-and-drop-using-angular-and-dotnet-core

Answer 1

After spending many days I have got the expected output by applying the following changes in my code:

assign-task.component.html

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)" id="cdk-drop-list-{{user.iUserId}}"><!-- Added dynamic id -->
          <div *ngFor="let item of arrAssignedTaskList" cdkDrag><!-- Added cdkDrag -->
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box>{{item.sTaskName}}</div><!-- Removed cdkDrag -->
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

assign-task.component.ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

export interface UserList {
  iUserId: number;
  sUserName: string;
}

export interface TaskList {
  iTaskId: number;
  sTaskName: string;
  iUserId: number; //Added
}

export interface AssignedTaskList {
  iTaskId: number;
  sTaskName: string;
  iUserId: number;
}

@Component({
  selector: 'app-assign-task-component',
  templateUrl: './assign-task.component.html',
  styleUrls: ['./assign-task.css'],
})
export class AssignTaskComponent {
  arrUserList: UserList[] = [
    { iUserId: 1, sUserName: 'User1' },
    { iUserId: 2, sUserName: 'User2' },
    { iUserId: 3, sUserName: 'User3' },
    { iUserId: 4, sUserName: 'User4' }
  ];

  /* Set zero for user id - unassinged task */
  arrUnAssignTaskList: TaskList[] = [
    { iTaskId: 2, sTaskName: 'Task2', iUserId: 0 },
    { iTaskId: 4, sTaskName: 'Task4', iUserId: 0 },
    { iTaskId: 6, sTaskName: 'Task6', iUserId: 0 },
    { iTaskId: 8, sTaskName: 'Task8', iUserId: 0 },
    { iTaskId: 9, sTaskName: 'Task9', iUserId: 0 }
  ];

  arrAssignedTaskList: AssignedTaskList[] = [
    { iTaskId: 1, sTaskName: 'Task1', iUserId: 1 },
    { iTaskId: 3, sTaskName: 'Task3', iUserId: 2 },
    { iTaskId: 5, sTaskName: 'Task5', iUserId: 3 },
    { iTaskId: 7, sTaskName: 'Task7', iUserId: 4 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
/* ======================Added below code====================== */
      /* Checked if task drag and moved to Unassign list */
      if (event.container.id === 'cdk-drop-list-0') {
        this.arrUnAssignTaskList[event.currentIndex].iUserId = 0;
      }
      /* Checked if task drag and moved to Assign list */
      else if (event.previousContainer.id === 'cdk-drop-list-0') {
        if (this.arrAssignedTaskList[event.currentIndex] === undefined) {
          var arrEmployeeID = event.container.id.split("-");
          this.arrUnAssignTaskList[event.previousIndex].iUserId = Number(arrEmployeeID[3]);
        }
        else {
          this.arrUnAssignTaskList[event.previousIndex].iUserId = this.arrAssignedTaskList[event.currentIndex].iUserId;
        }
      }
      else {
        /* Task drag and moved to within Assign list */
        this.arrAssignedTaskList[event.previousIndex].iUserId = this.arrAssignedTaskList[event.currentIndex].iUserId;
      }
/* ============================================================ */
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

I have added the full code of both files and added the comments in it where the code is changed.

Thanks to everybody for your help and support. May it will help someone.