my-test123/app/components/work-item-new-detail/work-item-new-detail.component.html

A planner front-end for Fabric8.

<form class="f8-detail form-horizontal work-item-page" *ngIf="workItem">
  <fieldset>
    <div class="f8-detail__header" #detailHeader>
      <span
        class="pficon-close pull-right close"
        (click)="navigateBack()">
      </span>
      <div class="pull-left margin-right-15">
        <div class="dropdown pull-left" dropdown *ngIf="loggedIn">
          <button class="btn btn-default dropdown-toggle padding-h-10 width-100"
            id="wi-detail-state"
            type="button"
            dropdownToggle>
            <span class="pull-left margin-top-5"
              almIcon
              [iconType]="workItem.attributes['system.state']">
            </span>
            <span class="pull-left padding-h-10">
              {{workItem.attributes['system.state']}}
            </span>
            <span *ngIf="loggedIn" class="caret pull-right margin-top-7"></span>
          </button>
          <ul class="dropdown-ul dropdown-menu" role="menu" *dropdownMenu>
            <li class="dropdown-li" (click)="onChangeState(state)"
              *ngFor="let state of workItem.relationships?.baseType?.data?.attributes?.fields['system.state'].type.values;">
              <a>
                <span class='dropdown-icon' almIcon [iconType]="state"></span>
                <span class='dropdown-text'>{{state}}</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="pull-left margin-left-15 padding-v-3">
          <span *ngIf="loadingTypes"
            class="spinner spinner-sm spinner-inline">
          </span>
          <span
            *ngIf="!loadingTypes"
            class="{{workItem.relationships?.baseType?.data?.attributes?.icon}} fa-lg dib">
          </span>
          <span
            *ngIf="!loadingTypes"
            class="dib">
            {{workItem.relationships?.baseType?.data?.attributes?.name}}
          </span>
          <span class="dib">
            <strong>#{{workItem.attributes['system.number']}}</strong>
          </span>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-3 padding-0 margin-v-3">
        <strong>Created </strong>
        <span id="created_at"
          [innerHTML]="workItem.attributes['system.created_at'] ?
          (workItem.attributes['system.created_at'] | almMomentTime) : 'Creating now!'">
        </span>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 margin-top-15 padding-0">
        <div class="form-horizontal">
          <f8-inlineinput
            [disabled]="loggedIn ? false : true"
            [value]="workItem.attributes['system.title']"
            [onLineClickEdit]="true"
            [placeholder]="'Enter title'"
            (onSave)="saveTitle($event)">
          </f8-inlineinput>
        </div>
      </div>
    </div>
    <div class="f8-detail__detail width-100" #detailContent (window:resize)="onResize($event)">
      <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7
        f8-detail__detail-wrap padding-v-15">
        <div class="form-group">
          <!-- assignee -->
          <section class="f8-detail__assignee">
            <label class="pull-left padding-left-15 control-label">
              {{workItem.relationships?.baseType?.data?.attributes?.fields['system.assignees']?.label || 'Label'}}
            </label>
            <div class="f8-detail__content" #assignee>
              <span *ngIf="loadingAssignees"
                class="spinner spinner-sm spinner-inline">
              </span>
              <f8-assignee *ngIf="!loadingAssignees" [showFullName]="true"
                [assignees]="workItem.relationships?.assignees?.data ?
                  workItem.relationships?.assignees?.data : []">
              </f8-assignee>
              <div class="user-search"
                *ngIf="loggedIn">
                  <assignee-selector
                    [allUsers]="users"
                    [loggedInUser]="loggedInUser"
                    [selectedAssignees]="workItem.relationships?.assignees?.data ?
                    workItem.relationships?.assignees?.data : []"
                    (onOpenSelector)="onAssigneeSelectorOpen($event)"
                    (onCloseAssignee)="assignUser($event)">
                  </assignee-selector>
              </div>
            </div>
          </section>
        </div>
        <!-- Creator -->
        <div class="form-group">
          <section class="f8-detail__area">
            <label class="pull-left padding-left-15 control-label ">
              {{workItem.relationships?.baseType?.data?.attributes?.fields['system.creator']?.label || 'Label'}}
            </label>
            <div class="f8-detail__content">
              <span *ngIf="!workItem.relationships?.creator?.data"
                class="pficon pficon-user user-creator-icon" id="user_creator_icon">
              </span>
              <div class="user-avatar pull-left margin-right-10">
                <img *ngIf="workItem.relationships?.creator?.data"
                  placement="bottom"
                  tooltip="{{workItem.relationships.creator.data.attributes?.fullName}}"
                  src="{{workItem.relationships.creator.data.attributes?.imageURL + '&s=20'}}"
                  onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=20'"
                  id="WI_details_reporter_img" />
              </div>
              <div class="dib">
                <span id="WI_details_reporter_user">
                  {{workItem.relationships?.creator?.data | almUserName:'Creator not found'}}
                </span>
              </div>
            </div>
          </section>
        </div>
        <!-- area -->
        <div class="form-group">
          <section class="f8-detail__area">
            <label class="pull-left padding-left-15 control-label ">
              {{workItem.relationships?.baseType?.data?.attributes?.fields['system.area']?.label || 'Label'}}
            </label>
            <div class="f8-detail__content">
              <span *ngIf="loadingArea"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <typeahead-dropdown #areaSelectbox
                  *ngIf="!loadingArea"
                  id="area-dropdown" class="area-dropdown"
                  noValueLabel="None" [values]="areas" (onFocus)="focusArea()"
                  (onUpdate)="areaUpdated($event)">
                </typeahead-dropdown>
            </div>
          </section>
        </div>
        <!-- Iteration -->
        <div class="form-group">
          <section class="f8-detail__area">
            <label class="pull-left padding-left-15 control-label ">
              {{workItem.relationships?.baseType?.data?.attributes?.fields['system.iteration']?.label || 'Label'}}
            </label>
            <div class="f8-detail__content">
              <span *ngIf="loadingIteration"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <typeahead-dropdown
                  *ngIf="!loadingIteration"
                  id="iteration-dropdown" class="iteration-dropdown"
                  #iterationSelectbox noValueLabel="None" [values]="iterations"
                  (onFocus)="focusIteration()" (onUpdate)="iterationUpdated($event)">
                </typeahead-dropdown>
            </div>
          </section>
        </div>
        <!--Lables-->
        <div class="form-group">
          <section class="f8-detail__labels">
            <label class="pull-left padding-left-15 control-label ">
              {{workItem.relationships?.baseType?.data?.attributes?.fields['system.labels']?.label || 'Label'}}
            </label>
            <div class="f8-detail__content">
              <span *ngIf="loadingLabels"
                class="spinner spinner-sm spinner-inline">
              </span>
              <f8-label *ngIf="!loadingLabels"
                [labels]='workItem.relationships?.labels?.data ?
                  workItem.relationships?.labels?.data : []'
                (onRemoveLabel)="removeLable($event)"
                [allowDelete]="true"
                (onLabelClick)="onLabelClick($event)">
              </f8-label>
              <div class="f8-detail__labels--selector" *ngIf="loggedIn">
                <label-selector
                  [allLabels]="labels"
                  [selectedLabels]="workItem.relationships?.labels?.data ?
                    workItem.relationships?.labels?.data : []"
                  (onOpenSelector)="onLabelSelectorOpen($event)"
                  (onCloseSelector)="updateLabels($event)">
                </label-selector>
              </div>
            </div>
          </section>
        </div>
        <!-- Description -->
        <div class="form-group">
          <section class="f8-detail__area">
            <label class="col-xs-4 col-sm-4 col-md-2 control-label">
              Description
            </label>
            <div class="f8-detail__content">
              <f8-markdown
                id="wi-detail-desc"
                [editAllow]="loggedIn"
                [rawText]="workItem.attributes['system.description']"
                [renderedText]="workItem.attributes['system.description.rendered']"
                (onSaveClick)="descUpdate($event)"
                (showPreview)="showPreview($event)">
              </f8-markdown>
            </div>
          </section>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5
       f8-detail__detail-wrap f8-detail__detail-wrap--right">
        <alm-work-item-link
          *ngIf="this.workItem.id"
          [workItem]="workItem"
          [loggedIn]="loggedIn">
        </alm-work-item-link>
        <alm-work-item-comment
          *ngIf="this.workItem.id"
          [comments]="comments"
          [loadingComments]="loadingComments"
          [loggedIn]="loggedIn"
          [loggedInUser]="loggedInUser"
          (create)="createComment($event)"
          (update)="updateComment($event)"
          (delete)="deleteComment($event)">
        </alm-work-item-comment>
      </div>
    </div>
  </fieldset>
</form>
<osio-modal></osio-modal>