join/src/app/components/add-task/add-task.component.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)"
    #taskForm="ngForm"
    onsubmit="return false"
  >
    <div
      class="content"
      [ngClass]="{ 'edit-task-overlay-content': overlayData !== '' }"
    >
      <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">
          <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/add-task/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">
      <input
        class="btn-clear"
        type="button"
        value="Clear"
        (click)="removeTaskData()"
        [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
      />
      <input
        class="btn-delete"
        type="button"
        value="Delete"
        (click)="deleteTaskData(overlayData)"
        [ngStyle]="{ display: overlayData !== '' ? 'block' : 'none' }"
      />
      <input
        class="btn-submit"
        type="submit"
        value="{{ overlayData !== '' ? 'Update Task' : 'Create Task' }}"
        [disabled]="
          title.invalid ||
          !taskData.title ||
          description.invalid ||
          !taskData.description ||
          date.invalid ||
          !taskData.date ||
          dateInPast ||
          !taskData.priority ||
          category.invalid ||
          !taskData.category
        "
      />
    </div>
  </form>
</section>