IN-1 Implement a Kanban Board with Drag and Drop Functionality

angular.json

@@ -62,7 +62,6 @@
             "development": {
               "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "19.2.13",
     "@angular/router": "19.2.13",
     "rxjs": "7.8.2",
+    "uuid": "10.0.0",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
@@ -38,6 +39,7 @@
     "@angular-eslint/eslint-plugin-template": "19.4.0",
     "@angular-eslint/schematics": "19.4.0",
     "@angular-eslint/template-parser": "19.4.0",
+    "@types/uuid": "10.0.0",
     "@babel/core": "7.27.1",
     "@babel/preset-env": "7.27.2",
     "@babel/preset-typescript": "7.27.1",

src/app/app.component.scss

@@ -34,6 +34,8 @@ header {
         a {
           color: inherit;
           text-decoration: none;
+          display: block;
+          width: 100%;
         }
       }
     }

src/app/app.config.ts

@@ -3,6 +3,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
+import { MatIconModule } from '@angular/material/icon';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
@@ -11,10 +12,13 @@ import {
   VERSION as MAT_VERSION,
   MatNativeDateModule,
 } from '@angular/material/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatCardModule } from '@angular/material/card';
 
 console.info('Angular CDK version', CDK_VERSION.full);
 console.info('Angular Material version', MAT_VERSION.full);
@@ -25,13 +29,19 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     importProvidersFrom(
       BrowserModule,
+      DragDropModule,
+      FormsModule,
+      ReactiveFormsModule,
+      MatCardModule,
       MatSidenavModule,
       MatToolbarModule,
       MatButtonModule,
+      MatDialogModule,
       MatNativeDateModule,
-      FormsModule,
       MatFormFieldModule,
       MatSelectModule,
+      MatInputModule,
+      MatIconModule,
       MatInputModule
     ),
     provideAnimations(),

src/app/components/kanban/components/todo-list/todo-list.component.html

@@ -0,0 +1,6 @@
+<h2>{{ title }}</h2>
+
+<app-todos-wrapper
+  [identifier]="identifier"
+  [todos]="todos"
+  (updatedList)="updateList($event)"></app-todos-wrapper>

src/app/components/kanban/components/todo-list/todo-list.component.scss

@@ -0,0 +1,4 @@
+:host {
+  height: 100%;
+  flex: 1;
+}

src/app/components/kanban/components/todo-list/todo-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TodoListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/kanban/components/todo-list/todo-list.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TodostWrapperComponent } from '../todos-wrapper/todos-wrapper.component';
+import { Todo } from '../../model/todo';
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  imports: [TodostWrapperComponent],
+  templateUrl: './todo-list.component.html',
+  styleUrl: './todo-list.component.scss',
+})
+export class TodoListComponent {
+  @Input() title!: string;
+  @Input() identifier!: string;
+  @Input() todos!: Todo[];
+
+  @Output() updatedList = new EventEmitter<Todo[]>();
+
+  updateList(event: Todo[]): void {
+    this.updatedList.emit(event);
+  }
+}

src/app/components/kanban/components/todo/todo.component.html

@@ -0,0 +1,9 @@
+<mat-card class="todo" appearance="outlined" cdkDrag>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>{{ todo.title }}</mat-card-title>
+      <mat-card-subtitle>{{ todo.createAt | date: 'long' }}</mat-card-subtitle>
+    </mat-card-title-group>
+  </mat-card-header>
+  <mat-card-content> >{{ todo.description }} </mat-card-content>
+</mat-card>

src/app/components/kanban/components/todo/todo.component.scss

@@ -0,0 +1,26 @@
+.todo {
+  width: 100%;
+  height: 150px;
+  border: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: move;
+  display: flex;
+  // justify-content: center;
+  // align-items: center;
+  // text-align: center;
+  background: #fff;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  &:active {
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+}

src/app/components/kanban/components/todo/todo.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoComponent } from './todo.component';
+
+describe('TodoComponent', () => {
+  let component: TodoComponent;
+  let fixture: ComponentFixture<TodoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TodoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TodoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it.skip('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/kanban/components/todo/todo.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Todo } from '../../model/todo';
+import { MatCardModule } from '@angular/material/card';
+import { DatePipe } from '@angular/common';
+import { CdkDrag } from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'app-todo',
+  standalone: true,
+  imports: [CdkDrag, DatePipe, MatCardModule],
+  templateUrl: './todo.component.html',
+  styleUrl: './todo.component.scss',
+})
+export class TodoComponent {
+  @Input() todo!: Todo;
+}

src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.html

@@ -0,0 +1,9 @@
+<div
+  class="todo-container"
+  cdkDropList
+  [cdkDropListData]="todos"
+  (cdkDropListDropped)="drop($event)">
+  @for (todo of todos; track todo) {
+    <app-todo [todo]="todo"></app-todo>
+  }
+</div>

src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  height: 90%;
+  background-color: beige;
+  border-radius: 1em;
+  .todo-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+}

src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodostWrapperComponent } from './todos-wrapper.component';
+
+describe('TodoListWrapperComponent', () => {
+  let component: TodostWrapperComponent;
+  let fixture: ComponentFixture<TodostWrapperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TodostWrapperComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TodostWrapperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TodoComponent } from '../todo/todo.component';
+import { Todo } from '../../model/todo';
+import {
+  CdkDragDrop,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'app-todos-wrapper',
+  standalone: true,
+  imports: [CdkDropList, TodoComponent],
+  templateUrl: './todos-wrapper.component.html',
+  styleUrl: './todos-wrapper.component.scss',
+})
+export class TodostWrapperComponent {
+  @Input() identifier!: string;
+  @Input() todos!: Todo[];
+
+  @Output() updatedList = new EventEmitter<Todo[]>();
+
+  drop(event: CdkDragDrop<Todo[]>) {
+    moveItemInArray(this.todos, event.previousIndex, event.currentIndex);
+    this.updatedList.emit(this.todos);
+  }
+}

src/app/components/kanban/form/todo-form.component.html

@@ -0,0 +1,27 @@
+<h2 mat-dialog-title>Crear una tarefa</h2>
+<mat-dialog-content>
+  <form [formGroup]="form" class="task-form">
+    <mat-form-field class="title">
+      <mat-label>Título</mat-label>
+      <input matInput placeholder="Título da tarea" formControlName="title" />
+    </mat-form-field>
+
+    <mat-form-field class="description">
+      <mat-label>Descrición da tarefa</mat-label>
+      <textarea
+        matInput
+        placeholder="Descrición da tarefa"
+        formControlName="description"></textarea>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button color="warn" mat-flat-button mat-dialog-close>Pechar</button>
+  <button
+    [disabled]="!form.valid"
+    color="primary"
+    mat-flat-button
+    (click)="saveData()">
+    Aceptar
+  </button>
+</mat-dialog-actions>

src/app/components/kanban/form/todo-form.component.scss

@@ -0,0 +1,14 @@
+.task-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.title,
+.description {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  justify-content: end;
+}