added dragging

src/app/components/board/board.component.html

@@ -33,8 +33,8 @@
     <div id="content-headline">
       <div
         class="content-column"
-        ondragover="allowDrop(event)"
-        ondrop="drop('todo')"
+        (dragover)="dragDropService.allowDrop($event)"
+        (drop)="dragDropService.drop($event, 'todo')"
       >
         <div class="content-headline">
           <span>To do</span
@@ -44,13 +44,17 @@
             onclick="openAddTaskPage('todo')"
           />
         </div>
-        <div id="content-todo"><app-task></app-task></div>
+        <div id="content-todo" *ngFor="let task of tasks; index as i">
+          <app-task *ngIf="task.status === 'todo'" [index]="i"></app-task>
+          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+            empthy
+          </ng-template>
+        </div>
       </div>
-
       <div
         class="content-column"
-        ondragover="allowDrop(event)"
-        ondrop="drop('inprogress')"
+        (dragover)="dragDropService.allowDrop($event)"
+        (drop)="dragDropService.drop($event, 'inprogress')"
       >
         <div class="content-headline">
           <span>In progress</span
@@ -60,13 +64,18 @@
             onclick="openAddTaskPage('inprogress')"
           />
         </div>
-        <div id="content-inprogress"><app-task></app-task></div>
+        <div id="content-inprogress" *ngFor="let task of tasks; index as i">
+          <app-task *ngIf="task.status === 'inprogress'" [index]="i"></app-task>
+          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+            empthy
+          </ng-template>
+        </div>
       </div>
 
       <div
         class="content-column"
-        ondragover="allowDrop(event)"
-        ondrop="drop('awaitfeedback')"
+        (dragover)="dragDropService.allowDrop($event)"
+        (drop)="dragDropService.drop($event, 'awaitfeedback')"
       >
         <div class="content-headline">
           <span>Await feedback</span
@@ -76,13 +85,21 @@
             onclick="openAddTaskPage('awaitfeedback')"
           />
         </div>
-        <div id="content-awaitfeedback"><app-task></app-task></div>
+        <div id="content-awaitfeedback" *ngFor="let task of tasks; index as i">
+          <app-task
+            *ngIf="task.status === 'awaitfeedback'"
+            [index]="i"
+          ></app-task>
+          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+            empthy
+          </ng-template>
+        </div>
       </div>
 
       <div
         class="content-column"
-        ondragover="allowDrop(event)"
-        ondrop="drop('done')"
+        (dragover)="dragDropService.allowDrop($event)"
+        (drop)="dragDropService.drop($event, 'done')"
       >
         <div class="content-headline">
           <span>Done</span
@@ -92,7 +109,12 @@
             onclick="openAddTaskPage('done')"
           />
         </div>
-        <div id="content-done"><app-task></app-task></div>
+        <div id="content-done" *ngFor="let task of tasks; index as i">
+          <app-task *ngIf="task.status === 'done'" [index]="i"></app-task>
+          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+            empthy
+          </ng-template>
+        </div>
       </div>
     </div>
     <div id="content-tasks"></div>

src/app/components/board/board.component.ts

@@ -1,11 +1,34 @@
 import { Component } from '@angular/core';
 import { TaskComponent } from './task/task.component';
+import { DragDropService } from '../../services/drag-drop.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-board',
   standalone: true,
-  imports: [TaskComponent],
+  imports: [TaskComponent, CommonModule],
   templateUrl: './board.component.html',
   styleUrl: './board.component.scss',
 })
-export class BoardComponent {}
+export class BoardComponent {
+  tasks = [
+    {
+      id: '1',
+      category: 'HTML',
+      status: 'todo',
+    },
+    {
+      id: '2',
+      category: 'CSS',
+      status: 'done',
+    },
+  ];
+
+  constructor(public dragDropService: DragDropService) {
+    this.dragDropService.itemDropped.subscribe(({ index, status }) => {
+      if (index >= 0 && index < this.tasks.length) {
+        this.tasks[index].status = status;
+      }
+    });
+  }
+}

src/app/components/board/task/task.component.html

@@ -2,9 +2,8 @@
   <div
     class="content"
     draggable="true"
-    ondragstart="startDragging(
-    tasks[id].id
-  )"
+    *ngIf="index !== undefined"
+    (dragstart)="dragDropService.startDragging($event, index)"
   >
     <div
       class="category"
@@ -16,7 +15,7 @@
     <div class="description">description</div>
     checkSubtasks(tasks[id].id)
     <div class="footer">
-      <div id="footer-badge">checkAssignetContacts(tasks[id].id)</div>
+      <div class="footer-badge"></div>
       <div class="footer-priority"></div>
     </div>
   </div>

src/app/components/board/task/task.component.scss

@@ -30,8 +30,8 @@ section {
   border-radius: 24px;
   background-color: var(--white);
   box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
   margin-bottom: 16px;
+  cursor: pointer;
   &:hover {
     box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
   }

src/app/components/board/task/task.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { DragDropService } from '../../../services/drag-drop.service';
 
 @Component({
   selector: 'app-task',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './task.component.html',
   styleUrl: './task.component.scss',
 })
-export class TaskComponent {}
+export class TaskComponent {
+  @Input() index: number | undefined;
+
+  constructor(public dragDropService: DragDropService) {}
+}

src/app/services/drag-drop.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, EventEmitter } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DragDropService {
+  itemDropped = new EventEmitter<{ index: number; status: string }>();
+
+  constructor() {}
+
+  startDragging(event: DragEvent, index: number) {
+    event.dataTransfer?.setData('text/plain', index.toString());
+  }
+
+  allowDrop(event: DragEvent) {
+    event.preventDefault();
+  }
+
+  drop(event: DragEvent, status: string) {
+    event.preventDefault();
+    const dataTransfer = event.dataTransfer;
+    if (dataTransfer) {
+      const index = +dataTransfer.getData('text/plain');
+      if (!isNaN(index)) {
+        this.itemDropped.emit({ index, status });
+      }
+    }
+  }
+}