added empty task component

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

@@ -32,13 +32,10 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="todo" class="details">
-          @if(getTask('todo').length > 0) {
+          @for(task of getTask('todo'); track task) {
-          <app-task
+          <app-task [task]="task"></app-task>
-            *ngFor="let task of getTask('todo')"
+          } @empty {
-            [task]="task"
+          <app-task-empty>No tasks</app-task-empty>
-          ></app-task>
-          } @else {
-          <div class="empty-task">No tasks</div>
           }
         </div>
       </div>
@@ -52,13 +49,10 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="inprogress" class="details">
-          @if(getTask('inprogress').length > 0) {
+          @for(task of getTask('inprogress'); track task) {
-          <app-task
+          <app-task [task]="task"></app-task>
-            *ngFor="let task of getTask('inprogress')"
+          } @empty {
-            [task]="task"
+          <app-task-empty>No tasks</app-task-empty>
-          ></app-task>
-          } @else {
-          <div class="empty-task">No tasks</div>
           }
         </div>
       </div>
@@ -72,13 +66,10 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="awaitfeedback" class="details">
-          @if(getTask('awaitfeedback').length > 0) {
+          @for(task of getTask('awaitfeedback'); track task) {
-          <app-task
+          <app-task [task]="task"></app-task>
-            *ngFor="let task of getTask('awaitfeedback')"
+          } @empty {
-            [task]="task"
+          <app-task-empty>No tasks</app-task-empty>
-          ></app-task>
-          } @else {
-          <div class="empty-task">No tasks</div>
           }
         </div>
       </div>
@@ -92,13 +83,10 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="done" class="details">
-          @if(getTask('done').length > 0) {
+          @for(task of getTask('done'); track task) {
-          <app-task
+          <app-task [task]="task"></app-task>
-            *ngFor="let task of getTask('done')"
+          } @empty {
-            [task]="task"
+          <app-task-empty>No tasks</app-task-empty>
-          ></app-task>
-          } @else {
-          <div class="empty-task">No tasks</div>
           }
         </div>
       </div>

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

@@ -122,25 +122,6 @@ section {
   }
 }
 
-/*------------- EMPTY TASK -------------*/
-
-.empty-task {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 243px;
-  height: 48px;
-  border-radius: 10px;
-  border: 1px dashed var(--gray);
-  background-color: var(--very-light-gray2);
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--gray);
-  margin: 15.5px 0;
-}
-
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 1100px) {
@@ -213,7 +194,7 @@ section {
     padding-right: 0;
   }
 
-  .empty-task {
+  app-task-empty {
     width: 100%;
     max-width: 100%;
   }

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

@@ -5,11 +5,12 @@ import { Task } from '../../interfaces/task.interface';
 import { TaskService } from '../../services/task.service';
 import { TaskComponent } from './task/task.component';
 import { EMPTY, isEmpty } from 'rxjs';
+import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
 
 @Component({
   selector: 'app-board',
   standalone: true,
-  imports: [CommonModule, TaskComponent],
+  imports: [CommonModule, TaskComponent, TaskEmptyComponent],
   templateUrl: './board.component.html',
   styleUrl: './board.component.scss',
 })

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

@@ -0,0 +1 @@
+<div class="empty">No tasks</div>

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

@@ -0,0 +1,23 @@
+.empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 243px;
+  height: 48px;
+  border-radius: 10px;
+  border: 1px dashed var(--gray);
+  background-color: var(--very-light-gray2);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray);
+  margin: 15.5px 0;
+}
+
+@media screen and (max-width: 635px) {
+  .empty {
+    width: 100%;
+    max-width: 100%;
+  }
+}

src/app/components/board/task/task-empty/task-empty.component.spec.ts

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-empty',
+  standalone: true,
+  imports: [],
+  templateUrl: './task-empty.component.html',
+  styleUrl: './task-empty.component.scss'
+})
+export class TaskEmptyComponent {
+
+}

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

@@ -1,4 +1,4 @@
-<section *ngIf="task.id">
+<section>
   <div
     class="content"
     draggable="true"
@@ -29,10 +29,9 @@
     }
     <div class="footer">
       <div class="footer-badge">
-        @if (task.assigned.length > 0) { @for (assigned of task.assigned; track
+        @for (assigned of task.assigned; track assigned) {
-        assigned) {
         <span class="footer-badged">{{ userBadged(assigned) }}</span>
-        } }
+        }
       </div>
       <div class="footer-priority prio-{{ task.priority }}"></div>
     </div>