diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts index 314a350..8ccf1fd 100644 --- a/src/app/components/add-task/add-task.component.ts +++ b/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) { diff --git a/src/app/components/add-task/assigned/assigned.component.html b/src/app/components/add-task/assigned/assigned.component.html index b17d6de..fd5ffad 100644 --- a/src/app/components/add-task/assigned/assigned.component.html +++ b/src/app/components/add-task/assigned/assigned.component.html @@ -1 +1,41 @@ -

assigned works!

+
+ @for (user of loadAllUserWithoutGuest(); track user; let index = $index) { +
+
+
+ {{ firebaseService.getUserDetails(user.id, "initials") }} +
+
+
+
+

+ {{ firebaseService.getUserDetails(user.id, "firstName") }} +

+ ,  +

+ {{ firebaseService.getUserDetails(user.id, "lastName") }} +

+
+
+
+ @if (assigned.includes(user.id)) { + + } @else { + + } +
+
+ } +
diff --git a/src/app/components/add-task/assigned/assigned.component.scss b/src/app/components/add-task/assigned/assigned.component.scss index 400a6d4..4f41787 100644 --- a/src/app/components/add-task/assigned/assigned.component.scss +++ b/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); + } +} diff --git a/src/app/components/add-task/assigned/assigned.component.ts b/src/app/components/add-task/assigned/assigned.component.ts index d2f31b9..9ae31ab 100644 --- a/src/app/components/add-task/assigned/assigned.component.ts +++ b/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'); + } } diff --git a/src/assets/img/add-task/checkbox-checked.svg b/src/assets/img/add-task/checkbox-checked.svg new file mode 100644 index 0000000..8ae5128 --- /dev/null +++ b/src/assets/img/add-task/checkbox-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/add-task/checkbox-empty.svg b/src/assets/img/add-task/checkbox-empty.svg new file mode 100644 index 0000000..73f2cf1 --- /dev/null +++ b/src/assets/img/add-task/checkbox-empty.svg @@ -0,0 +1,3 @@ + + +