feat: extract kanban into components

src/app/app.module.ts

@@ -11,9 +11,11 @@ import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 import { ErrorModule } from './error/error.module';
+import { DemoBoardComponent } from './home/demo-board/demo-board.component';
+import { KanbanModule } from './kanban/kanban.module';
 
 @NgModule({
-  declarations: [AppComponent, HomeComponent],
+  declarations: [AppComponent, HomeComponent, DemoBoardComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -22,7 +24,8 @@ import { ErrorModule } from './error/error.module';
     ErrorModule,
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFirestoreModule,
-    AngularFireAuthModule
+    AngularFireAuthModule,
+    KanbanModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/demo-board/demo-board.component.html

@@ -0,0 +1 @@
+<p>It works</p>

src/app/home/demo-board/demo-board.component.scss

@@ -0,0 +1 @@
+/* Empty */

src/app/home/demo-board/demo-board.component.ts

@@ -0,0 +1,51 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, OnInit } from '@angular/core';
+import { Board } from 'src/app/kanban/model/board.model';
+
+@Component({
+  selector: 'app-demo-board',
+  templateUrl: './demo-board.component.html',
+  styleUrls: ['./demo-board.component.scss']
+})
+export class DemoBoardComponent {
+  boards: Board[] = [
+    {
+      id: '0',
+      title: 'Todo',
+      priority: 0,
+      tasks: [
+        {
+          description: 'Plan my next awesome project',
+          label: 'yellow'
+        },
+        { description: 'Reschedule my meeting', label: 'blue' }
+      ]
+    },
+    {
+      id: '1',
+      title: 'In progress',
+      priority: 1,
+      tasks: [
+        {
+          description: 'Plan my next awesome project',
+          label: 'yellow'
+        },
+        { description: 'Reschedule my meeting', label: 'blue' }
+      ]
+    },
+    {
+      id: '2',
+      title: 'Done',
+      priority: 2,
+      tasks: [
+        {
+          description: 'Plan my next awesome project',
+          label: 'yellow'
+        },
+        { description: 'Reschedule my meeting', label: 'blue' }
+      ]
+    }
+  ];
+
+  constructor() {}
+}

src/app/kanban/board-list/board-list.component.html

@@ -10,7 +10,10 @@
     *ngFor="let board of boards"
     [board]="board"
     (boardExitedEvent)="saveExitedBoard($event)"
+    (boardDeletedEvent)="boardDelete($event)"
     (taskDroppedEvent)="taskDrop($event)"
+    (taskUpdatedEvent)="taskUpdate($event)"
+    (taskDeletedEvent)="taskDelete($event)"
   >
     <mat-icon cdkDragHandle class="handle">drag_indicator</mat-icon>
   </app-board>

src/app/kanban/board-list/board-list.component.scss

@@ -23,15 +23,11 @@
   }
 }
 
-.outer-card.cdk-drag-placeholder {
+.cdk-drag-placeholder {
   opacity: 0.2;
   width: 350px;
   border: 5px dashed gray;
-  margin: 0 10px;
-}
-
-.inner-card.cdk-drag-placeholder {
-  opacity: 0.5;
+  margin: 0 12px;
 }
 
 .cdk-drag-animating {
@@ -52,44 +48,3 @@
   padding: 32px;
   height: 350px;
 }
-
-.outer-card {
-  margin: 10px;
-  min-width: 300px;
-  max-width: 300px;
-  padding: 10px;
-  background: whitesmoke;
-}
-
-.inner-card {
-  margin: 5px 0;
-  cursor: pointer;
-}
-
-.blue {
-  background: #71deff;
-  color: black;
-}
-
-.green {
-  background: #36e9b6;
-  color: black;
-}
-
-.yellow {
-  background: #ffcf44;
-  color: black;
-}
-
-.purple {
-  background: #b15cff;
-}
-
-.red {
-  background: #e74a4a;
-}
-
-.gray {
-  background: gray;
-  text-decoration: line-through;
-}

src/app/kanban/board-list/board-list.component.ts

@@ -3,41 +3,58 @@ import {
   moveItemInArray,
   transferArrayItem
 } from '@angular/cdk/drag-drop';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Board } from '../model/board.model';
 import { BoardService } from '../board.service';
 import { MatDialog } from '@angular/material/dialog';
 import { BoardDialogComponent } from '../dialogs/board-dialog.component';
+import { Task } from '../model/task.model';
 
 @Component({
   selector: 'app-board-list',
   templateUrl: './board-list.component.html',
   styleUrls: ['./board-list.component.scss']
 })
-export class BoardListComponent implements OnInit, OnDestroy {
-  boards: Board[] = [];
+export class BoardListComponent {
+  @Output()
+  boardDroppedEvent = new EventEmitter<Board[]>();
+
+  @Output()
+  boardCreatedEvent = new EventEmitter<{ title: string; priority: number }>();
+
+  @Output()
+  boardDeletedEvent = new EventEmitter<string>();
+
+  @Output()
+  taskDroppedEvent = new EventEmitter<
+    Array<{
+      boardId: string;
+      tasks: Task[];
+    }>
+  >();
+
+  @Output()
+  taskUpdatedEvent = new EventEmitter<{
+    boardId: string;
+    tasks: Task[];
+  }>();
+
+  @Output()
+  taskDeletedEvent = new EventEmitter<{ boardId: string; task: Task }>();
+
+  @Input()
+  boards?: Board[];
+
   previousBoard: Board = {};
   dropped = true;
   subscription?: Subscription;
 
   constructor(public boardService: BoardService, public dialog: MatDialog) {}
 
-  ngOnInit() {
-    this.subscription = this.boardService
-      .getUserBoards()
-      .subscribe((boards) => {
-        this.boards = boards;
-      });
-  }
-
-  ngOnDestroy() {
-    this.subscription?.unsubscribe();
-  }
-
   boardDrop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.boards, event.previousIndex, event.currentIndex);
-    this.boardService.sortBoards(this.boards);
+    moveItemInArray(this.boards!, event.previousIndex, event.currentIndex);
+    this.boardDroppedEvent.emit(this.boards);
   }
 
   openBoardDialog(): void {
@@ -48,9 +65,10 @@ export class BoardListComponent implements OnInit, OnDestroy {
 
     dialogRef.afterClosed().subscribe((result) => {
       if (result) {
-        this.boardService.createBoard({
+        this.boards?.push({ title: result, priority: this.boards?.length! });
+        this.boardCreatedEvent.emit({
           title: result,
-          priority: this.boards.length
+          priority: this.boards?.length!
         });
       }
     });
@@ -76,20 +94,36 @@ export class BoardListComponent implements OnInit, OnDestroy {
         event.previousIndex,
         event.currentIndex
       );
-      this.boardService.updateTasks(currentBoard.id!, currentBoard.tasks!);
+      this.taskDroppedEvent.emit([
+        { boardId: currentBoard.id!, tasks: currentBoard.tasks! }
+      ]);
     } else {
       transferArrayItem(
         this.previousBoard.tasks!,
         currentBoard.tasks!,
         event.previousIndex,
         event.currentIndex
       );
-      this.boardService.updateTasks(
-        this.previousBoard.id!,
-        this.previousBoard.tasks!
-      );
-      this.boardService.updateTasks(currentBoard.id!, currentBoard.tasks!);
+      this.taskDroppedEvent.emit([
+        { boardId: currentBoard.id!, tasks: currentBoard.tasks! },
+        { boardId: this.previousBoard.id!, tasks: this.previousBoard.tasks! }
+      ]);
     }
     this.dropped = true;
   }
+
+  taskUpdate({ boardId, tasks }: { boardId: string; tasks: Task[] }) {
+    this.taskUpdatedEvent.emit({ boardId: boardId, tasks: tasks });
+  }
+
+  boardDelete(boardId: string) {
+    this.boards?.forEach((board, idx) => {
+      if (board.id === boardId) this.boards?.splice(idx, 1);
+    });
+    this.boardDeletedEvent.emit(boardId);
+  }
+
+  taskDelete({ boardId, task }: { boardId: string; task: Task }) {
+    this.taskDeletedEvent.emit({ boardId: boardId, task: task });
+  }
 }

src/app/kanban/board/board.component.scss

@@ -1,35 +1,3 @@
-.boards {
-  width: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: row;
-  overflow-x: scroll;
-
-  &::-webkit-scrollbar {
-    height: 4px;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #f5f5f5;
-    border: 2px solid #555;
-  }
-
-  .handle {
-    position: relative;
-    top: 5px;
-    left: 0;
-    cursor: move;
-  }
-}
-
-.outer-card.cdk-drag-placeholder {
-  opacity: 0.2;
-  width: 350px;
-  border: 5px dashed gray;
-  margin: 0 10px;
-}
-
 .inner-card.cdk-drag-placeholder {
   opacity: 0.5;
 }
@@ -42,17 +10,6 @@
   transition: transform 300ms ease;
 }
 
-.board-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 5px gray dashed;
-  width: 300px;
-  padding: 32px;
-  height: 350px;
-}
-
 .outer-card {
   margin: 10px;
   min-width: 300px;