fabric8-planner/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.html

A planner front-end for Fabric8.

<!-- Table Inline Quick Add -->
<div class="f8-quickadd__wiblk" #quickAddElement
  *ngIf="wilistview === 'wi-table-view' || wilistview === 'wi-table-view-top'"
  [ngClass]="{'f8-quick-add-inline' : wilistview === 'wi-table-view'}">
  <div class="pull-left">
    <strong class="pull-left padding-right-10 padding-v-3">
      {{ wilistview === 'wi-table-view' ? 'Add Child Work Item' : 'Add Work Item' }}
    </strong>
    <!-- type dropdown -->
    <div class="pull-left">
      <div class="dropdown" dropdown>
        <div class="infoArea">
          <button class="btn btn-default dropdown-toggle padding-h-10"
            type="button"
            dropdownToggle>
            <i class="fa dib"
              [ngClass]="selectedType ?
              selectedType.icon :
              '' ">
            </i>
            <span class="padding-h-5">
              {{ selectedType ? selectedType.name : '' }}
            </span>
            <span class="fa fa-angle-down"></span>
          </button>
          <infotip [infotipText]="selectedType.description"></infotip>
        </div>
        <ul class="dropdown-menu"
          role="menu"
          *dropdownMenu>
          <li *ngFor="let type of workItemTypes"
              role="menuitem"
              (click)="selectType($event, type)">
            <a class="dropdown-item" href="#">
              <i class="fa"
                [ngClass]="type.icon"></i>
                <span class="padding-h-3">{{ type.name }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="f8-quickadd__wiblk-btn pull-right">
    <button class="btn btn-primary f8-quickadd__wiblk-btn-add margin-right-5"
      id="quickadd-save"
      [disabled]="blockAdd || (addDisabled | async)"
      [ngClass]="{'': validTitle,'disabled':!validTitle}"
      (click)="save($event)">
      Add
    </button>
    <button class="btn btn-primary f8-quickadd__wiblk-btn-add"
      [disabled]="blockAdd || (addDisabled | async)"
      [ngClass]="{'': validTitle,'disabled':!validTitle}"
      (click)="save($event, true)">
      Add and Open
    </button>
  </div>
  <div class="f8-quickadd__wiblk-story">
    <div class="f8-quickadd__wiblk-storyinput padding-h-10">
      <input class="form-control col-xs-12 col-sm-12
        col-md-12 f8-quickadd-input"
        type="text"
        placeholder="Work Item Title"
        title="{{(addDisabled | async) ? 'Not a Collaborator' : 'Please add work-item title'}}"
        #quickAddTitle
        [disabled]="blockAdd || (addDisabled | async)"
        [(ngModel)]="workItem.attributes['system.title']"
        (keyup.enter)="save($event)"
        (keyup)="checkTitle()"  required/>
    </div>
  </div>
</div>
<!-- Table Inline Quick Add Ends -->

<!--Quick Add for Query Tab-->

<div class="f8-quickadd-query__wrapper" *ngIf="wilistview === 'wi-query-view'">
  <input
    type="text"
    placeholder=" Type your title...."
    #quickAddTitle
    [formControl]="workItemTitle"
    [disabled]="blockAdd"
    [(ngModel)]="workItem.attributes['system.title']"
    (keyup.enter)="save($event)"
    (keyup)="checkTitle()"  required/>
  <div class="dropdown f8-quickadd-query__dropdown" dropdown>
    <div class="infoArea dropdown">
      <button class="btn btn-default dropdown-toggle padding-h-10"
        type="button"
        dropdownToggle>
        <i class="fa dib"
          [ngClass]="selectedType ?
          selectedType.icon :
          '' ">
        </i>
        <span class="padding-h-5">
          {{ selectedType ? selectedType.name : '' }}
        </span>
        <span class="fa fa-angle-down"></span>
      </button>
    </div>
    <ul class="dropdown-menu"
      role="menu"
      *dropdownMenu>
      <li *ngFor="let type of workItemTypes"
          role="menuitem"
          (click)="selectType($event, type)">
        <div class="dropdown-item planner-dropdown-item pointer">
          <i class="fa"
            [ngClass]="type.icon"></i>
            <span class="padding-h-3">{{ type.name }}</span>
            <span class="item-desc margin-left-10">{{ type.description }}</span>
        </div>
      </li>
    </ul>
  </div>
  <button class="btn btn-primary f8-quickadd-query__create margin-right-5"
    id="quickadd-save"
    [disabled]="blockAdd"
    [ngClass]="{'': validTitle,'disabled':!validTitle}"
    (click)="save($event)">
    Create
  </button>
  <button class="btn btn-primary f8-quickadd-query__create-open"
    [disabled]="blockAdd"
    [ngClass]="{'': validTitle,'disabled':!validTitle}"
    (click)="save($event, true)">
    Create and Open
  </button>
</div>

<!-- Quick ADD Template for Board View -->
<!-- <div class="f8-quickadd-card card-pf f8-quickadd-container"
  *ngIf="wilistview === 'wi-card-view'" >
  <div class="col-xs-12 col-sm-12 col-md-12
    f8-quickadd-card__addwi"
    (click)="toggleQuickAdd()">
    <a class="f8-quickadd-card__addwi-savebtn">
      <i class='pficon-add-circle-o dib'></i>
    </a>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12 card-pf
    card-pf-view f8-quickadd-card__wiblk"
    *ngIf="showQuickAdd">
    <div class="row padding-bottom-10 margin-bottom-15">
      <button class="btn btn-link
        f8-quickadd-card__wiblk-btn-close"
        (click)="toggleQuickAdd()">
        <i class="pficon pficon-close"></i>
      </button>
    </div>
    <div class="row padding-top-10 margin-top-15">
      <div class="dropdown-kebab-pf pull-left" dropdown>
        <button class="btn btn-default dropdown-toggle padding-v-0"
          type="button"
          dropdownToggle>
          <i class="fa dib"
            [ngClass]="selectedType?selectedType.attributes.icon :
            '' ">
          </i>
          <span class="fa fa-angle-down"></span>
        </button>
        <ul class="dropdown-menu"
          role="menu"
          aria-labelledby="dropdownKebab"
          *dropdownMenu>
          <li *ngFor="let type of workItemTypes"
            role="menuitem"
            (click)="selectType($event, type)">
            <a class="dropdown-item" href="#">
              <i class="fa pull-left"
                [ngClass]="type.attributes.icon"></i>
                &nbsp;{{type.attributes.name}}
            </a>
          </li>
        </ul>
      </div>
      <div class="col-xs-10 col-sm-10 col-md-10">
        <input class="form-control col-xs-12 col-sm-12
          col-md-12 f8-quickadd-input"
          type="text"
          placeholder="Work Item Title"
          #quickAddTitle
          [(ngModel)]="workItem.attributes['system.title']"
          (keyup.enter)="save($event)"
          (keyup)="checkTitle()"
          required/>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 no-padding">
        <textarea
          class="form-control board-description pull-left f8-quickadd-desc"
          type="text"
          rows="1"
          placeholder="Work Item Description"
          #quickAddDesc
          [(ngModel)]="workItem.attributes['system.description']"
          (keydown.enter)="save($event)"
          (keyup.enter)="preventDef($event)"
          (keyup)="checkDesc()"
          [style.height]="descHeight"
          [style.resize]="descResize">
        </textarea>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-xs-offset-10 col-sm-offset-10 col-md-offset-10">
      <button class="btn btn-primary f8-quickadd-card__wiblk-btn-add"
        #quickAddSubmit
        [ngClass]="{'': validTitle,'disabled':!validTitle}"
        (click)="save($event)">
        <i class="fa fa-check"></i>
      </button>
    </div>
  </div>
</div> -->