srumboard_frontend/src/app/components/forms/task/task-form.component.html

<!--Popup form to create and modify a task-->

<div class="card" style="width: 100%;">
  <div class="container">
    <div class="card-body">
      <div style="text-align: right;">
        <i class="fa fa-times fa-2x" (click)="onClose()"></i>
      </div>
      <div class="row">
        <div class="col-8" style="text-align: left;">
          <h4 *ngIf="editing" class="card-title">Task bearbeiten</h4>
          <h4 *ngIf="!editing" class="card-title">Neuen Task anlegen</h4>
          <div ngbDropdown class="dropdown card-text">
            <span
              ngbDropdownToggle
              class="dropdown"
              id="dropdownMenuUserstory"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Gehört zu Story:
              {{ getUserstoryTitleById(task.userstoryId) || "Keine" }}
              <i class="fa fa-caret-down"></i>
            </span>
            <div
              ngbDropdownMenu
              class="dropdown-menu"
              aria-labelledby="dropdownMenuUserstory"
            >
              <option
                ngbDropdownItem
                *ngFor="let userstory of userstories"
                (click)="task.userstoryId = userstory.id"
                >{{ userstory.title }}</option
              >
            </div>
          </div>
        </div>
        <div class="col-4"></div>
      </div>
      <form (ngSubmit)="onSubmit()">
        <div class="row">
          <div class="col-8">
            <div class="form-group">
              <label for="Title">Titel</label>
              <input
                type="text"
                class="form-control"
                id="Title"
                required
                name="title"
                [(ngModel)]="task.title"
                id="titleField"
              />
            </div>
            <div class="form-group">
              <label for="Inhalt">What to do?</label>
              <textarea
                type="text"
                class="form-control"
                id="Story"
                required
                name="story"
                rows="5"
                [(ngModel)]="task.content"
              ></textarea>
            </div>
          </div>
          <div class="col-4">
            <div ngbDropdown class="dropdown">
              <button
                ngbDropdownToggle
                class="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenu2"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Prio: {{ task.priority }}
              </button>
              <div
                ngbDropdownMenu
                class="dropdown-menu"
                aria-labelledby="dropdownMenu2"
              >
                <option
                  ngbDropdownItem
                  *ngFor="let p of getAllPriorities()"
                  (click)="task.priority = p"
                >
                  {{ p }}</option
                >
              </div>
            </div>
            <div class="form-group">
              <div ngbDropdown class="dropdown" [autoClose]="false">
                <button
                  ngbDropdownToggle
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenu3"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Status: {{ getStatusTitleById(task.statusId) }}
                </button>
                <div
                  ngbDropdownMenu
                  class="dropdown-menu"
                  aria-labelledby="dropdownMenu2"
                >
                  <div class="card-text" for="Inhalt">Status wählen</div>
                  <option
                    disable-auto-close
                    ngbDropdownItem
                    *ngFor="let status of allStatus"
                    (click)="task.statusId = status.id"
                    >{{ status.title }}</option
                  >

                  <div class="dropdown-divider"></div>
                  <div class="card-text" for="Inhalt">Neuer Status</div>
                  <input
                    #statusname
                    type="text"
                    id="statusname"
                    class="dropdown-item"
                    (change)="status.title = statusname.value"
                    placeholder="New Title..."
                    style="background-color: rgba(211, 211, 211, 0.342);"
                  />
                  <button
                    disable-auto-close
                    ngbDropdownItem
                    class="dropdown-item"
                    type="button"
                    (click)="createTaskStatus(status)"
                  >
                    Status anlegen
                  </button>
                  <button
                    disable-auto-close
                    ngbDropdownItem
                    class="dropdown-item"
                    type="button"
                    (click)="deleteStatus(task.statusId)"
                  >
                    Status löschen
                  </button>
                </div>
              </div>
              <div class="dropdown-menu">
                <select
                  class="form-control custom-select mr-sm-2"
                  id="status"
                  required
                  name="status"
                  [(ngModel)]="task.statusId"
                >
                  <option
                    *ngFor="let status of allStatus"
                    [value]="status.id"
                    >{{ status.title }}</option
                  >
                </select>
              </div>
            </div>
            <div class="form-group">
              <div ngbDropdown class="dropdown" [autoClose]="false">
                <button
                  ngbDropdownToggle
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenu4"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Bearbeiter: {{ getAuthorNameById(task.assignedToId) }}
                </button>
                <div
                  ngbDropdownMenu
                  class="dropdown-menu"
                  aria-labelledby="dropdownMenu2"
                >
                  <div class="card-text" for="Inhalt">User wählen</div>
                  <option
                    disable-auto-close
                    ngbDropdownItem
                    *ngFor="let user of allUser"
                    (click)="task.assignedToId = user.id"
                    >{{ user.name }}</option
                  >
                  <div class="dropdown-divider"></div>
                  <div class="card-text" for="Inhalt">Neuer User</div>
                  <input
                    #username
                    type="text"
                    id="username"
                    class="dropdown-item"
                    (change)="user.name = username.value"
                    placeholder="New Username..."
                    style="background-color: rgba(211, 211, 211, 0.342);"
                  />
                  <button
                    disable-auto-close
                    ngbDropdownItem
                    class="dropdown-item"
                    type="button"
                    (click)="createUser(user)"
                  >
                  User anlegen
                  </button>
                  <button
                    disable-auto-close
                    ngbDropdownItem
                    class="dropdown-item"
                    type="button"
                    (click)="deleteUser(task.assignedToId)"
                  >
                  User löschen
                  </button>
                </div>
              </div>
              <div class="dropdown-menu">
                <select
                  class="form-control custom-select mr-sm-2"
                  id="assignedto"
                  required
                  name="assignedto"
                  [(ngModel)]="task.assignedToId"
                >
                  <option *ngFor="let user of allUser" [value]="user.id">{{
                    user.name
                  }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <button
              (click)="onClose()"
              type="dismiss"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Abbrechen
            </button>
            <button *ngIf="editing" type="submit" class="btn btn-primary">Speichern</button>
            <button *ngIf="!editing" type="submit" class="btn btn-primary">Erstellen</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>