add assigned to task

src/app/components/add-task/add-task.component.ts

@@ -17,7 +17,7 @@ export class AddTaskComponent {
 
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
-  isAssignedOpen: boolean = false;
+  isAssignedOpen: boolean = true;
 
   taskData = {
     title: '',
@@ -25,12 +25,15 @@ export class AddTaskComponent {
     date: this.currentDate,
     priority: 'medium',
     category: '',
+    assigned: [],
   };
 
   ngOnInit() {
     const storedTaskData = localStorage.getItem('taskData');
     if (storedTaskData) {
       this.taskData = JSON.parse(storedTaskData);
+    } else {
+      this.saveTaskData();
     }
   }
 
@@ -77,6 +80,7 @@ export class AddTaskComponent {
     this.taskData.description = '';
     this.taskData.date = this.currentDate;
     this.taskData.category = '';
+    this.taskData.assigned = [];
   }
 
   onSubmit(ngForm: NgForm) {

src/app/components/add-task/assigned/assigned.component.html

@@ -1 +1,41 @@
-<section><p>assigned works!</p></section>
+<section>
+  @for (user of loadAllUserWithoutGuest(); track user; let index = $index) {
+  <div
+    class="content"
+    (click)="addAssignedToTask(user.id)"
+    [ngClass]="{ selected: assigned.includes(user.id) }"
+  >
+    <div
+      class="circle"
+      [ngStyle]="{
+        'background-color': firebaseService.getUserDetails(user.id, 'color')
+      }"
+    >
+      <div class="initials">
+        {{ firebaseService.getUserDetails(user.id, "initials") }}
+      </div>
+    </div>
+    <div class="details">
+      <div class="name">
+        <p>
+          {{ firebaseService.getUserDetails(user.id, "firstName") }}
+        </p>
+        <span>,&nbsp;</span>
+        <p class="last-name">
+          {{ firebaseService.getUserDetails(user.id, "lastName") }}
+        </p>
+      </div>
+    </div>
+    <div class="checkbox">
+      @if (assigned.includes(user.id)) {
+      <img
+        src="./../../../../assets/img/add-task/checkbox-checked.svg"
+        alt=""
+      />
+      } @else {
+      <img src="./../../../../assets/img/add-task/checkbox-empty.svg" alt="" />
+      }
+    </div>
+  </div>
+  }
+</section>

src/app/components/add-task/assigned/assigned.component.scss

@@ -12,3 +12,72 @@ section {
   background-color: var(--white);
   overflow: auto;
 }
+
+.content {
+  display: flex;
+  align-items: center;
+  padding: 12px 18px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--light-gray);
+  }
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 35px;
+  min-width: 35px;
+  height: 35px;
+  border-radius: 100%;
+  border: 2px solid var(--white);
+  .initials {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}
+
+.details {
+  margin-left: 24px;
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.last-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkbox {
+  img {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.selected {
+  background-color: var(--dark-blue);
+  color: var(--white);
+  img {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
+      hue-rotate(346deg) brightness(99%) contrast(103%);
+  }
+  &:hover {
+    background-color: var(--very-dark-blue);
+  }
+}

src/app/components/add-task/assigned/assigned.component.ts

@@ -1,12 +1,53 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { FirebaseService } from '../../../services/firebase.service';
+import { CommonModule } from '@angular/common';
+import { User } from '../../../interfaces/user.interface';
 
 @Component({
   selector: 'app-assigned',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './assigned.component.html',
-  styleUrl: './assigned.component.scss'
+  styleUrl: './assigned.component.scss',
 })
 export class AssignedComponent {
+  assigned: string[] = [];
 
+  constructor(public firebaseService: FirebaseService) {
+    this.loadTaskAssigedData();
+  }
+
+  addAssignedToTask(userId: string) {
+    if (!this.assigned.includes(userId)) {
+      this.assigned.push(userId);
+    } else {
+      this.assigned.splice(this.assigned.indexOf(userId), 1);
+    }
+    this.saveTaskData();
+  }
+
+  saveTaskData() {
+    let taskDataString = localStorage.getItem('taskData');
+    if (taskDataString !== null) {
+      let taskData = JSON.parse(taskDataString);
+      taskData.assigned = this.assigned;
+      localStorage.setItem('taskData', JSON.stringify(taskData));
+    }
+  }
+
+  loadTaskAssigedData() {
+    const taskDataString = localStorage.getItem('taskData');
+    if (taskDataString !== null) {
+      const taskData = JSON.parse(taskDataString);
+      if (taskData.hasOwnProperty('assigned')) {
+        this.assigned = taskData.assigned;
+      }
+    }
+  }
+
+  loadAllUserWithoutGuest(): User[] {
+    return this.firebaseService
+      .getAllUsers()
+      .filter((user) => user.initials !== 'G');
+  }
 }

src/assets/img/add-task/checkbox-checked.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 8.96582V14.9658C17 16.6227 15.6569 17.9658 14 17.9658H4C2.34315 17.9658 1 16.6227 1 14.9658V4.96582C1 3.30897 2.34315 1.96582 4 1.96582H12" stroke="#2A3647" stroke-width="2" stroke-linecap="round"/>
+<path d="M5 9.96582L9 13.9658L17 2.46582" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/add-task/checkbox-empty.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1.96582" width="16" height="16" rx="3" stroke="#2A3647" stroke-width="2"/>
+</svg>