join/src/app/components/add-task/add-task.component.html

<section
  [ngStyle]="{
    'background-color':
      !overlayMobile && overlayData !== '' ? 'var(--white)' : ''
  }"
>
  <div
    class="headline"
    [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
  >
    <div class="title">{{ "addTask.headline" | translate }}</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>{{ "addTask.title" | translate }}<span class="red-dot">*</span></p>
          <input
            type="text"
            id="title"
            name="title"
            #title="ngModel"
            (input)="saveTaskData()"
            placeholder="{{
              taskData.title
                ? taskData.title
                : ('addTask.titleFormField' | translate)
            }}"
            [(ngModel)]="taskData.title"
            autocomplete="off"
            required
          />
          <div class="error-msg">
            @if (!title.valid && title.touched) {
            <p>{{ "addTask.titleError" | translate }}</p>
            }
          </div>
        </div>
        <div class="description">
          <p>
            {{ "addTask.description" | translate
            }}<span class="red-dot">*</span>
          </p>
          <textarea
            id="description"
            rows="5"
            name="description"
            #description="ngModel"
            minlength="10"
            (input)="saveTaskData()"
            placeholder="{{
              taskData.description
                ? taskData.description
                : ('addTask.descriptionFormField' | translate)
            }}"
            [(ngModel)]="taskData.description"
            autocomplete="off"
            required
          ></textarea>
          <div class="error-msg">
            @if (!description.valid && description.touched) {
            <p>{{ "addTask.descriptionError" | translate }}</p>
            }
          </div>
        </div>
        <div class="assigned">
          <p>{{ "addTask.assigned" | translate }}</p>
          <input
            #searchField
            id="search-assigned"
            class="search-assigned"
            name="search"
            placeholder="{{ 'addTask.assignedFormField' | translate }}"
            type="text"
            [(ngModel)]="searchValue"
            (input)="searchTask(taskData.creator)"
            autocomplete="off"
            (click)="toggleAssignedMenu()"
          />
          @if (isAssignedOpen) {
          <app-assigned
            [filteredUsers]="filteredUsers"
            [taskCreator]="taskData.creator"
            [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-badge">
          @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>{{ "addTask.date" | translate }}<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>{{ "addTask.dateError0" | translate }}</p>
            } @if (dateInPast && date.valid) {
            <p>{{ "addTask.dateError1" | translate }}</p>
            }
          </div>
        </div>
        <div class="priority">
          <p>{{ "addTask.priority" | translate }}</p>
          <div class="btns">
            <button
              type="button"
              class="btn"
              [ngClass]="{
                'btn-active': taskData.priority == 'urgent'
              }"
              [ngStyle]="{
                'background-color':
                  taskData.priority == 'urgent' ? 'red' : 'white'
              }"
              (click)="togglePriority('urgent')"
            >
              <div class="btn-text">
                <span>{{ "addTask.urgent" | translate }}</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)="togglePriority('medium')"
            >
              <div class="btn-text">
                <span>{{ "addTask.medium" | translate }}</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)="togglePriority('low')"
            >
              <div class="btn-text">
                <span>{{ "addTask.low" | translate }}</span>
                <img src="./../../../assets/img/low.svg" alt="" />
              </div>
            </button>
          </div>
        </div>
        <div class="category">
          <p>
            {{ "addTask.category" | translate }}<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">
              {{ "addTask.categorySelection" | translate }}
            </option>
            <option value="User Story">User Story</option>
            <option value="Technical Task">Technical Task</option>
          </select>
          <img
            class="open"
            src="./../../../assets/img/add-task/arrow-down.svg"
            alt=""
          />
          <div class="error-msg">
            @if (!category.valid && category.touched) {
            <p>{{ "addTask.categoryError" | translate }}</p>
            }
          </div>
        </div>
        <div class="subtask">
          <p>{{ "addTask.subtask" | translate }}</p>
          <input
            type="text"
            id="subtask"
            name="subtask"
            #subtask="ngModel"
            placeholder="{{ 'addTask.subtaskFormField' | translate }}"
            [(ngModel)]="subtaskValue"
            (input)="updateSubtaskValue()"
            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]="'addTask.clear' | translate"
        [img]="'close'"
        [ngStyle]="{
          display:
            (overlayType === '' ||
              overlayType === 'addTaskOverlay' ||
              overlayType === 'newTaskOverlay') &&
            !overlayMobile
              ? 'block'
              : 'none'
        }"
        (click)="removeTaskData(taskForm)"
      ></app-form-btn>
      <app-form-btn
        [class]="'btn-delete'"
        [type]="'button'"
        [value]="'addTask.delete' | translate"
        [ngStyle]="{
          display:
            overlayData !== '' &&
            overlayType !== 'addTaskOverlay' &&
            overlayType !== 'newTaskOverlay'
              ? 'block'
              : 'none'
        }"
        (click)="deleteTask(overlayData)"
      ></app-form-btn>
      <app-form-btn
        [class]="'btn-submit'"
        [type]="'submit'"
        [img]="'check'"
        [imgFilter]="'none'"
        [value]="
          ['', 'none', 'todo', 'inprogress', 'awaitfeedback', 'done'].includes(
            overlayData.toString()
          )
            ? ('addTask.create' | translate)
            : ('addTask.update' | translate)
        "
        [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>