Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update subtasks on firebase & design subtasks

Browse source
This commit is contained in:
Chneemann 2024-04-18 10:38:44 +02:00
parent 63e254342f
commit da56150d08
6 changed files with 163 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/app/services/firebase.service.ts
View file

@ -2,6 +2,7 @@ import { Injectable, OnDestroy, inject } from '@angular/core';
import {
Firestore,
addDoc,
arrayUnion,
collection,
deleteDoc,
doc,
@ -58,6 +59,14 @@ export class FirebaseService implements OnDestroy {
});
}
async updateSubTask(taskId: any, array: boolean[]) {
await updateDoc(doc(collection(this.firestore, 'tasks'), taskId), {
subtasksDone: array,
}).catch((err) => {
console.error(err);
});
}
async addNewTask(task: Task) {
await addDoc(collection(this.firestore, 'tasks'), task)
.catch((err) => {

110
src/app/shared/components/overlay/task-overlay/task-overlay.component.html
View file

@ -10,46 +10,76 @@
</div>
<app-btn-close (click)="sendMessage()"></app-btn-close>
</div>
<div class="headline">{{ getTask(overlayData)[0].title }}</div>
<div class="description">
{{ getTask(overlayData)[0].description }}
</div>
<div class="date">
<p>Due date:</p>
{{ timeConverter(getTask(overlayData)[0].date) }}
</div>
<div class="priority">
<p>Priority:</p>
{{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
<div class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"></div>
</div>
<div class="assigned">
<p>Assigned to:</p>
@for (user of getTask(overlayData)[0].assigned; track user; let index =
$index) {
<div class="content">
<div
class="circle"
[ngStyle]="{
'background-color': firebaseService.getUserDetails(user, 'color')
}"
>
<div class="initials">
{{ firebaseService.getUserDetails(user, "initials") }}
</div>
</div>
<div class="details">
<div class="name">
<p>
{{ firebaseService.getUserDetails(user, "firstName") }}
</p>
<span>,&nbsp;</span>
<p class="last-name">
{{ firebaseService.getUserDetails(user, "lastName") }}
</p>
</div>
</div>
<div class="content">
<div class="headline">{{ getTask(overlayData)[0].title }}</div>
<div class="description">
{{ getTask(overlayData)[0].description }}
</div>
<div class="date">
<p>Due date:</p>
{{ timeConverter(getTask(overlayData)[0].date) }}
</div>
<div class="priority">
<p>Priority:</p>
{{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
<div
class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"
></div>
</div>
<div class="assigned">
<p>Assigned to:</p>
@for (user of getTask(overlayData)[0].assigned; track user) {
<div class="users">
<div
class="circle"
[ngStyle]="{
'background-color': firebaseService.getUserDetails(user, 'color')
}"
>
<div class="initials">
{{ firebaseService.getUserDetails(user, "initials") }}
</div>
</div>
<div class="details">
<div class="name">
<p>
{{ firebaseService.getUserDetails(user, "firstName") }}
</p>
<span>,&nbsp;</span>
<p class="last-name">
{{ firebaseService.getUserDetails(user, "lastName") }}
</p>
</div>
</div>
</div>
}
</div>
<div class="subtasks">
<p>Subtasks:</p>
@for (subtask of getTask(overlayData)[0].subtasksTitle; track subtask; let
i = $index) {
<div
class="single-subtask"
(click)="
toggleSubtaskStatus(
overlayData,
i,
getTask(overlayData)[0].subtasksDone,
getSubTaskStatus(overlayData, i)
)
"
>
<img
[src]="
getSubTaskStatus(overlayData, i)
? './../../../../../assets/img/board/check-btn-checked.svg'
: './../../../../../assets/img/board/check-btn-unchecked.svg'
"
alt=""
/>
<p>{{ subtask }}</p>
</div>
}
</div>
}
</div>
</section>

66
src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
View file

@ -9,6 +9,7 @@ section {
.header {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
}
.category {
@ -23,10 +24,14 @@ section {
text-shadow: 1px 1px 2px var(--black);
}
.content {
height: calc(700px - 72px);
overflow-y: auto;
}
.headline {
font-size: 61px;
font-weight: 700;
margin-top: 32px;
}
.description {
@ -35,6 +40,8 @@ section {
margin-top: 32px;
}
// DATE
.date {
display: flex;
margin-top: 32px;
@ -49,6 +56,8 @@ section {
}
}
// PRIORITY
.priority {
display: flex;
align-items: center;
@ -98,7 +107,7 @@ section {
}
}
.content {
.users {
display: flex;
align-items: center;
padding: 12px;
@ -108,9 +117,9 @@ section {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
min-width: 35px;
height: 35px;
width: 42px;
min-width: 42px;
height: 42px;
border-radius: 100%;
border: 2px solid var(--white);
.initials {
@ -134,11 +143,54 @@ section {
align-items: center;
overflow: hidden;
white-space: nowrap;
font-size: 18px;
font-weight: 400;
p {
font-size: 20px;
font-weight: 400;
margin: 0;
}
}
.last-name {
overflow: hidden;
text-overflow: ellipsis;
}
// SUBTASKS
.subtasks {
margin-top: 32px;
overflow-y: auto;
p {
color: var(--very-dark-gray);
font-size: 20px;
font-weight: 400;
margin-bottom: 12px;
}
}
.single-subtask {
display: flex;
align-items: center;
width: fit-content;
margin-left: 14px;
padding: 6px 12px;
cursor: pointer;
p {
font-size: 20px;
font-weight: 400;
margin: 0 0 0 18px;
padding-right: 12px;
}
&:hover {
border-radius: 12px;
background-color: var(--light-gray);
img {
filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
brightness(92%) contrast(92%);
}
}
img {
width: 24px;
height: 24px;
}
}

18
src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
View file

@ -31,6 +31,24 @@ export class TaskOverlayComponent {
.filter((task) => task.id === taskId);
}
getSubTaskStatus(taskId: string, index: number) {
const subtask = this.firebaseService
.getAllTasks()
.filter((task) => task.id === taskId);
return subtask[0].subtasksDone[index];
}
toggleSubtaskStatus(
taskId: string,
index: number,
array: boolean[],
status: boolean
) {
status ? (array[index] = false) : (array[index] = true);
this.firebaseService.updateSubTask(taskId, array);
}
capitalizeFirstLetter(data: string) {
return data.charAt(0).toUpperCase() + data.slice(1);
}

4
src/assets/img/board/check-btn-checked.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.3882 11V17C20.3882 18.6569 19.045 20 17.3882 20H7.38818C5.73133 20 4.38818 18.6569 4.38818 17V7C4.38818 5.34315 5.73133 4 7.38818 4H15.3882" stroke="#2A3647" stroke-width="2" stroke-linecap="round"/>
<path d="M8.38818 12L12.3882 16L20.3882 4.5" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 444 B

3
src/assets/img/board/check-btn-unchecked.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4.38818" y="4" width="16" height="16" rx="3" stroke="#2A3647" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 193 B