327 lines
9.8 KiB
HTML
327 lines
9.8 KiB
HTML
<section
|
|
[ngStyle]="{ 'background-color': overlayData !== '' ? 'var(--white)' : '' }"
|
|
>
|
|
<div
|
|
class="headline"
|
|
[ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
|
|
>
|
|
<div class="title">Add Task</div>
|
|
</div>
|
|
|
|
<form
|
|
(ngSubmit)="onSubmit(taskForm, overlayData)"
|
|
(keydown.enter)="handleEnterKey($event)"
|
|
#taskForm="ngForm"
|
|
onsubmit="return false"
|
|
>
|
|
<div
|
|
class="content"
|
|
[ngClass]="{
|
|
'edit-task-overlay-content': !overlayMobile && overlayData !== '',
|
|
'edit-task-overlay-content-mobile': overlayMobile && overlayData !== '' && overlayType === 'addTaskOverlay',
|
|
}"
|
|
>
|
|
<div class="left-side">
|
|
<div class="title">
|
|
<p>Title<span class="red-dot">*</span></p>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
name="title"
|
|
#title="ngModel"
|
|
(input)="saveTaskData()"
|
|
placeholder="{{
|
|
taskData.title ? taskData.title : 'Enter a title'
|
|
}}"
|
|
[(ngModel)]="taskData.title"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!title.valid && title.touched) {
|
|
<p>You must enter a title.</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>Description<span class="red-dot">*</span></p>
|
|
<textarea
|
|
id="description"
|
|
rows="5"
|
|
name="description"
|
|
#description="ngModel"
|
|
minlength="10"
|
|
(input)="saveTaskData()"
|
|
placeholder="{{
|
|
taskData.description
|
|
? taskData.description
|
|
: 'Enter a description'
|
|
}}"
|
|
[(ngModel)]="taskData.description"
|
|
autocomplete="off"
|
|
required
|
|
></textarea>
|
|
<div class="error-msg">
|
|
@if (!description.valid && description.touched) {
|
|
<p>You must enter a description. (min. 10 letters)</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="assigned">
|
|
<p>Assigned to</p>
|
|
<input
|
|
#searchField
|
|
id="search-assigned"
|
|
class="search-assigned"
|
|
name="search"
|
|
placeholder="Search..."
|
|
type="text"
|
|
[(ngModel)]="searchValue"
|
|
(input)="searchTask()"
|
|
autocomplete="off"
|
|
(click)="toggleAssignedMenu()"
|
|
/>
|
|
@if (isAssignedOpen) {
|
|
<app-assigned
|
|
[filteredUsers]="filteredUsers"
|
|
[searchInput]="searchInput"
|
|
(assignedChange)="receiveAssigned($event)"
|
|
>
|
|
></app-assigned
|
|
>
|
|
<img class="close" src="./../../../assets/img/close.svg" alt="" />
|
|
} @else {
|
|
<img
|
|
class="open"
|
|
src="./../../../assets/img/add-task/arrow-down.svg"
|
|
alt=""
|
|
/>
|
|
}
|
|
</div>
|
|
<div class="assigned-badget">
|
|
@for (user of taskData.assigned; track user ) {
|
|
<div
|
|
class="circle"
|
|
(mousemove)="openDialog(user, $event)"
|
|
(mouseleave)="closeDialog()"
|
|
[ngStyle]="{
|
|
'background-color': firebaseService.getUserDetails(user, 'color')
|
|
}"
|
|
>
|
|
<div class="initials">
|
|
{{ firebaseService.getUserDetails(user, "initials") }}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
@if (AssignedDialogId != '') {
|
|
<div class="dialog" [style.left.px]="dialogX" [style.top.px]="dialogY">
|
|
<p>
|
|
{{ firebaseService.getUserDetails(AssignedDialogId, "firstName") }},
|
|
{{ firebaseService.getUserDetails(AssignedDialogId, "lastName") }}
|
|
</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="middle-spacer"><div class="line"></div></div>
|
|
<div class="right-side">
|
|
<div
|
|
class="date"
|
|
[ngStyle]="{
|
|
'margin-top': overlayMobile ? '28px' : ''
|
|
}"
|
|
>
|
|
<p>Due date<span class="red-dot">*</span></p>
|
|
<input
|
|
type="date"
|
|
id="date"
|
|
name="date"
|
|
#date="ngModel"
|
|
(input)="checkDateInput()"
|
|
placeholder="{{ taskData.date }}"
|
|
[(ngModel)]="taskData.date"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!date.valid && date.touched) {
|
|
<p>You must enter a date.</p>
|
|
} @if (dateInPast && date.valid) {
|
|
<p>The date must be in the future</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="priority">
|
|
<p>Prio</p>
|
|
<div class="btns">
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
[ngClass]="{
|
|
'btn-active': taskData.priority == 'urgent'
|
|
}"
|
|
[ngStyle]="{
|
|
'background-color':
|
|
taskData.priority == 'urgent' ? 'red' : 'white'
|
|
}"
|
|
(click)="tooglePriority('urgent')"
|
|
>
|
|
<div class="btn-text">
|
|
<span>Urgent</span>
|
|
<img src="./../../../assets/img/urgent.svg" alt="" />
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
[ngClass]="{
|
|
'btn-active': taskData.priority == 'medium'
|
|
}"
|
|
[ngStyle]="{
|
|
'background-color':
|
|
taskData.priority == 'medium' ? 'orange' : 'white'
|
|
}"
|
|
(click)="tooglePriority('medium')"
|
|
>
|
|
<div class="btn-text">
|
|
<span>Medium</span>
|
|
<img src="./../../../assets/img/medium.svg" alt="" />
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn"
|
|
[ngClass]="{
|
|
'btn-active': taskData.priority == 'low'
|
|
}"
|
|
[ngStyle]="{
|
|
'background-color':
|
|
taskData.priority == 'low' ? 'green' : 'white'
|
|
}"
|
|
(click)="tooglePriority('low')"
|
|
>
|
|
<div class="btn-text">
|
|
<span>Low</span>
|
|
<img src="./../../../assets/img/low.svg" alt="" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="category">
|
|
<p>Category<span class="red-dot">*</span></p>
|
|
<select
|
|
id="category"
|
|
name="category"
|
|
#category="ngModel"
|
|
(change)="saveTaskData()"
|
|
[(ngModel)]="taskData.category"
|
|
required
|
|
>
|
|
<option value="" disabled [selected]="!taskData.category">
|
|
Select task category
|
|
</option>
|
|
<option value="User Story">User Story</option>
|
|
<option value="Technical Task">Technical Task</option>
|
|
</select>
|
|
<div class="error-msg">
|
|
@if (!category.valid && category.touched) {
|
|
<p>You must select a category</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="subtask">
|
|
<p>Subtasks</p>
|
|
<input
|
|
type="text"
|
|
id="subtask"
|
|
name="subtask"
|
|
#subtask="ngModel"
|
|
placeholder="Add new subtask"
|
|
[(ngModel)]="subtaskValue"
|
|
autocomplete="off"
|
|
/>
|
|
@if (subtaskValue) {
|
|
<div class="subtask-btns">
|
|
<img
|
|
src="./../../../assets/img/close.svg"
|
|
alt=""
|
|
(click)="subtask.reset()"
|
|
/>
|
|
<span class="line"></span>
|
|
<img
|
|
src="./../../../assets/img/check.svg"
|
|
alt=""
|
|
(click)="addSubtask(subtask.value); subtask.reset()"
|
|
/>
|
|
</div>
|
|
} @else {
|
|
<img class="add" src="./../../../assets/img/add.svg" alt="" />
|
|
} @if (taskData.subtasksTitle) {
|
|
<div class="subtasks">
|
|
@for (task of taskData.subtasksTitle.reverse(); track task) {
|
|
<div class="single-subtask">
|
|
<p>- {{ task }}</p>
|
|
<img
|
|
src="./../../../assets/img/close.svg"
|
|
alt=""
|
|
(click)="deleteSubtask(task)"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="form-buttons"
|
|
[ngStyle]="{
|
|
'background-color': overlayMobile ? 'var(--very-light-gray)' : ''
|
|
}"
|
|
>
|
|
<app-form-btn
|
|
[class]="'btn-clear'"
|
|
[type]="'button'"
|
|
[value]="'Clear'"
|
|
[img]="'close'"
|
|
[ngStyle]="{
|
|
display:
|
|
overlayData !== '' || overlayType === 'addTaskOverlay'
|
|
? 'none'
|
|
: 'block'
|
|
}"
|
|
(click)="removeTaskData()"
|
|
></app-form-btn>
|
|
<app-form-btn
|
|
[class]="'btn-delete'"
|
|
[type]="'button'"
|
|
[value]="'Delete'"
|
|
[ngStyle]="{
|
|
display:
|
|
overlayData !== '' && overlayType !== 'addTaskOverlay'
|
|
? 'block'
|
|
: 'none'
|
|
}"
|
|
></app-form-btn>
|
|
<app-form-btn
|
|
[class]="'btn-submit'"
|
|
[type]="'submit'"
|
|
[img]="'check'"
|
|
[imgFilter]="'none'"
|
|
[value]="overlayData.toString() !== '' ? 'Update Task' : 'Create Task'"
|
|
[disabled]="
|
|
title.invalid ||
|
|
!taskData.title ||
|
|
description.invalid ||
|
|
!taskData.description ||
|
|
date.invalid ||
|
|
!taskData.date ||
|
|
dateInPast ||
|
|
!taskData.priority ||
|
|
category.invalid ||
|
|
!taskData.category
|
|
"
|
|
></app-form-btn>
|
|
</div>
|
|
</form>
|
|
</section>
|