my-test123/app/components/work-item-quick-add/work-item-quick-add.component.html

A planner front-end for Fabric8.

<!-- Table Inline Quick Add -->
<div class="col-xs-12 col-sm-12 col-md-12 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">
    <b class="pull-left padding-right-15">
      {{wilistview === 'wi-table-view' ? 'Add Child Work Item' : 'Add Work Item'}}
    </b>
    <!-- type dropdown -->
    <div class="pull-left">
      <div class="dropdown-kebab-pf" dropdown>
        <button class="btn btn-default dropdown-toggle padding-v-0"
          type="button"
          dropdownToggle>
          <i class="fa dib"
            [ngClass]="selectedType ?
            selectedType.attributes.icon :
            '' ">
          </i>
          &nbsp;
          {{selectedType?selectedType.attributes.name:''}}
          <span class="fa fa-angle-down"></span>
        </button>
        <ul class="dropdown-menu"
          role="menu"
          aria-labelledby="dropdownKebab"
          *dropdownMenu>
          <li *ngFor="let type of allowedWITs"
              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>
  </div>
  <div class="f8-quickadd__wiblk-btn pull-right">
    <button class="btn btn-primary f8-quickadd__wiblk-btn-add margin-right-15"
      id="quickadd-save"
      #quickAddSubmit
      [ngClass]="{'': validTitle,'disabled':!validTitle}"
      (click)="save($event)">
      Add
    </button>
    <button class="btn btn-primary f8-quickadd__wiblk-btn-add margin-right-15"
      #quickAddSubmit
      [ngClass]="{'': validTitle,'disabled':!validTitle}"
      (click)="save($event, true)">
      Add and Open
    </button>
  </div>
  <div class="f8-quickadd__wiblk-story">
    <div [ngClass]="wilistview === 'wi-table-view' ?
      'col-xs-12 col-sm-12 col-md-12'
      : 'col-xs-12 col-sm-12 col-md-12'"
      class="f8-quickadd__wiblk-storyinput">
      <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>
</div>
<!-- Table Inline Quick Add Ends -->

<!-- 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 availableTypes"
            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>