111 lines
3 KiB
HTML
111 lines
3 KiB
HTML
<section
|
|
[ngClass]="{
|
|
overlay: !overlayMobile,
|
|
'overlay-mobile': overlayMobile,
|
|
}"
|
|
*ngIf="overlayData !== '' && getTaskData(overlayData).length > 0"
|
|
>
|
|
<div class="header">
|
|
<div
|
|
class="category"
|
|
[style.background-color]="
|
|
categoryColors.get(getTaskData(overlayData)[0].category)
|
|
"
|
|
>
|
|
{{ getTaskData(overlayData)[0].category }}
|
|
</div>
|
|
@if (overlayMobile) {
|
|
<app-btn-back></app-btn-back>
|
|
} @else {
|
|
<app-btn-close (click)="closeDialog()"></app-btn-close>
|
|
}
|
|
</div>
|
|
<div
|
|
[ngClass]="{
|
|
content: !overlayMobile,
|
|
'content-mobile': overlayMobile,
|
|
}"
|
|
>
|
|
<div class="headline">{{ getTaskData(overlayData)[0].title }}</div>
|
|
<div class="description">
|
|
{{ getTaskData(overlayData)[0].description }}
|
|
</div>
|
|
<div class="date">
|
|
<p>Due date:</p>
|
|
{{ timeConverter(getTaskData(overlayData)[0].date) }}
|
|
</div>
|
|
<div class="priority">
|
|
<p>Priority:</p>
|
|
{{ capitalizeFirstLetter(getTaskData(overlayData)[0].priority) }}
|
|
<div
|
|
class="priority-bg prio-{{ getTaskData(overlayData)[0].priority }}"
|
|
></div>
|
|
</div>
|
|
<div class="assigned">
|
|
<p>Assigned to:</p>
|
|
@for (user of getTaskData(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>, </span>
|
|
<p class="last-name">
|
|
{{ firebaseService.getUserDetails(user, "lastName") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="subtasks">
|
|
<p>Subtasks:</p>
|
|
@for (subtask of getTaskData(overlayData)[0].subtasksTitle; track subtask;
|
|
let i = $index) {
|
|
<div
|
|
class="single-subtask"
|
|
(click)="
|
|
toggleSubtaskStatus(
|
|
overlayData,
|
|
i,
|
|
getTaskData(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>
|
|
<div class="btns">
|
|
<div class="btn btn-delete" (click)="deleteTask(overlayData)">
|
|
<img src="./../../../../../assets/img/contact/delete.svg" alt="" />
|
|
<p>Delete</p>
|
|
</div>
|
|
<span>|</span>
|
|
<div class="btn btn-edit" (click)="editTask(overlayData)">
|
|
<img src="./../../../../../assets/img/contact/edit.svg" alt="" />
|
|
<p>Edit</p>
|
|
</div>
|
|
</div>
|
|
</section>
|