141 lines
3.7 KiB
HTML
141 lines
3.7 KiB
HTML
<section
|
|
[ngClass]="{
|
|
overlay: !overlayMobile,
|
|
'overlay-mobile': overlayMobile,
|
|
}"
|
|
*ngIf="overlayData !== '' && task != null"
|
|
>
|
|
<div class="header">
|
|
<div
|
|
class="category"
|
|
[style.background-color]="categoryColors.get(task.category)"
|
|
>
|
|
{{ task.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">{{ task.title }}</div>
|
|
<div class="description">
|
|
{{ task.description }}
|
|
</div>
|
|
<div class="date">
|
|
<p>{{ "addTask.date" | translate }}:</p>
|
|
{{ timeConverter(task.date) }}
|
|
</div>
|
|
<div class="priority">
|
|
<p>{{ "addTask.priority" | translate }}:</p>
|
|
{{ capitalizeFirstLetter(task.priority) }}
|
|
<div class="priority-bg priority-{{ task.priority }}"></div>
|
|
</div>
|
|
|
|
<div class="creator">
|
|
<p>{{ "addTask.creator" | translate }}:</p>
|
|
@for (user of task.userData; track user) { @if (task.creator === user.id)
|
|
{
|
|
<div class="users">
|
|
<div
|
|
class="circle"
|
|
[ngStyle]="{
|
|
'background-color': user.color
|
|
}"
|
|
>
|
|
<div class="initials">
|
|
{{ user.initials }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="name">
|
|
<p>
|
|
{{ user.firstName }}
|
|
</p>
|
|
<span> </span>
|
|
<p class="last-name">
|
|
{{ user.lastName }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} }
|
|
</div>
|
|
@if (task.assignees.length > 0) {
|
|
<div class="assigned">
|
|
<p>{{ "addTask.assigned" | translate }}:</p>
|
|
@for (assigned of task.assignees; track assigned) { @for (user of
|
|
task.userData; track user) { @if (assigned.userId === user.id) {
|
|
<div class="users">
|
|
<div
|
|
class="circle"
|
|
[ngStyle]="{
|
|
'background-color': user.color
|
|
}"
|
|
>
|
|
<div class="initials">
|
|
{{ user.initials }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="name">
|
|
<p>
|
|
{{ user.firstName }}
|
|
</p>
|
|
<span> </span>
|
|
<p class="last-name">
|
|
{{ user.lastName }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} } }
|
|
</div>
|
|
} @if (task.subtasks.length > 0) {
|
|
<div class="subtasks">
|
|
<p>{{ "addTask.subtask" | translate }}:</p>
|
|
@for (subtask of task.subtasks; track subtask; let i = $index) {
|
|
<div
|
|
class="single-subtask"
|
|
(click)="
|
|
toggleSubtaskStatus(overlayData, i, task.subtasksDone, subtask.done)
|
|
"
|
|
>
|
|
<img
|
|
[src]="
|
|
subtask.done
|
|
? './../../../../../assets/img/board/check-btn-checked.svg'
|
|
: './../../../../../assets/img/board/check-btn-unchecked.svg'
|
|
"
|
|
alt=""
|
|
/>
|
|
<p>{{ subtask.title }}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
@if(task.creator === currentUserId) {
|
|
<div class="btns">
|
|
<div class="btn btn-delete" (click)="deleteTask(overlayData)">
|
|
<img src="./../../../../../assets/img/contact/delete.svg" alt="" />
|
|
<p>{{ "addTask.delete" | translate }}</p>
|
|
</div>
|
|
<span>|</span>
|
|
<div class="btn btn-edit" (click)="editTask(overlayData)">
|
|
<img src="./../../../../../assets/img/contact/edit.svg" alt="" />
|
|
<p>{{ "addTask.edit" | translate }}</p>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="notice">
|
|
{{ "addTask.notice" | translate }}
|
|
</div>
|
|
}
|
|
</section>
|