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

A planner front-end for Fabric8.

<div [@slideInOut]="panelState" class="f8-quick-preview">
  <div class="width-100" *ngIf="workItem" id="workItemDetail_Wrapper">
    <form *ngIf="active"
          #almWorkItemDetailForm="ngForm"
          class="form-horizontal"
          id="wi-detail-form">
      <fieldset>
        <div class="f8-quick-preview__header">
          <span
            class="pficon pficon-close pull-right f8-quick-preview--close"
            (click)="closePreview()">
          </span>
          <div class="form-group width-100 pull-left mobile-bar padding-h-10 padding-v-5 margin-0">
            <span *ngIf="workItem.id" class="detail-created-date pull-right">
              <b>Created</b>
              <span id="created_at"
                [innerHTML]="workItem.attributes['system.created_at'] ? (workItem.attributes['system.created_at'] | almMomentTime) : 'Creating now!'"></span>
            </span>
            <div class="dropdown-kebab-pf detail-type-dropdown">
              <span *ngIf="loadingTypes; else witTypeLoaded"
                class="spinner spinner-sm spinner-inline">
              </span>
              <ng-template #witTypeLoaded>
                <span
                  class="margin-right-5 {{workItem.relationships?.baseType?.data?.attributes?.icon}} fa-lg"
                  id="wi-type-icon" title="{{workItem.relationships?.baseType?.data?.attributes?.name}}"></span>
                {{workItem.relationships?.baseType?.data?.attributes?.name}}
              </ng-template>
              <h3 *ngIf="workItem.id" class="detail-id" id="wi-detail-id">{{workItem.attributes['system.number']}}</h3>
              <span *ngIf="saving" class="saving-title">
                <span class="spinner spinner-sm spinner-inline"></span>
                Saving Work Item...
              </span>
              <span *ngIf="savingError" class="saving-title">
                <span class="pficon-error-circle-o"></span>
                  {{ errorMessage }}
              </span>
            </div>
          </div>
          <div class="form-group width-100 pull-left padding-h-10 padding-v-5 margin-0">
            <div class="width-100 pull-left">
              <div
                class="card-pf-time-frame-filter pull-left dropdown"
                *ngIf="loggedIn"
                dropdown>
                <button dropdownToggle
                  class="btn btn-default width-100 dropdown-toggle padding-h-10"
                  id="wi-detail-state"
                  type="button">
                  <span class='dropdown-icon pull-left margin-top-5'
                    almIcon
                    [iconType]="workItem.attributes['system.state']">
                  </span>
                  <span class='dropdown-text pull-left padding-h-10'>
                    {{workItem.attributes['system.state']}}
                  </span>
                  <span *ngIf="loggedIn" class="caret pull-right margin-top-7"></span>
                </button>
                <ul id="wi-status-dropdown" class="dropdown-menu-right 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>
              <a class="pull-right">
                <span class="dib margin-right-3">
                  <a [routerLink]="[constructUrl(workItem)]" [queryParams]="queryParams">
                    View full details
                  </a>
                </span>
                <span class="fa fa-list-alt"></span>
              </a>
            </div>
            <div class="width-100 pull-left wi-detail-title-blk margin-top-15" id="title-click-div">
              <div id="wi-title-div">
                <f8-inlineinput
                  [disabled]="loggedIn ? false : true"
                  [value]="workItem.attributes['system.title']"
                  [onLineClickEdit]="true"
                  (onSave)="saveTitle($event)"
                  [placeholder]="'Enter title'">
                </f8-inlineinput>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
          <div class="width-100 pull-left padding-10 item-action-block">
            <!-- Assignee -->
            <div class="form-group">
              <div class="width-100 pull-left detail-assignee-wrap">
                <label class="control-label">
                  {{workItem.relationships?.baseType?.data?.attributes?.fields['system.assignees']?.label || 'Label'}}
                </label>
                <div class="detail-assignee-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 && !loadingAssignees">
                    <assignee-selector
                      id="assigneeSelector"
                      [allUsers]="users"
                      [loggedInUser]="loggedInUser"
                      [selectedAssignees]="workItem.relationships?.assignees?.data ?
                      workItem.relationships?.assignees?.data : []"
                      (onCloseAssignee)="assignUser($event)"
                      (onOpenAssignee)="activeSearchAssignee()">
                    </assignee-selector>
                  </div>
                </div>
              </div>
            </div>
            <!--Creator-->
            <div class="form-group">
              <div class="width-100 pull-left detail-creator-wrap">
                <label class="control-label">
                  {{workItem.relationships?.baseType?.data?.attributes?.fields['system.creator']?.label || 'Label'}}
                </label>
                <div class="detail-creator-content">
                  <span *ngIf="!workItem.relationships?.creator?.data"
                    class="pficon pficon-user user-creator-icon" id="user_creator_icon">
                  </span>
                  <div class="user-avatar margin-right-10 pull-left">
                    <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="pull-left">
                    <span id="WI_details_reporter_user">
                      {{workItem.relationships?.creator?.data | almUserName:'Creator not found'}}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- Areas -->
            <div class="form-group">
              <div class="width-100 pull-left detail-area-wrap">
                <label class="control-label" id="area_label">
                  {{workItem.relationships?.baseType?.data?.attributes?.fields['system.area']?.label || 'Label'}}
                </label>
                <div class="detail-area-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>
              </div>
            </div>

            <!--Iteration-->
            <div class="form-group">
              <div class="width-100 pull-left detail-iteration-wrap">
                <label class="control-label" id="iteration_label">
                  {{workItem.relationships?.baseType?.data?.attributes?.fields['system.iteration']?.label || 'Label'}}
                </label>
                <div class="detail-itr-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>
              </div>
            </div>
            <!--Labels-->
            <div class="form-group">
              <div class="width-100 pull-left detail-label-wrap">
                <label class="control-label">
                  {{workItem.relationships?.baseType?.data?.attributes?.fields['system.labels']?.label || 'Label'}}
                </label>
                <div class="detail-labels-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="label-selector-wrapper" *ngIf="loggedIn && !loadingLabels" >
                    <label-selector
                      id="labelSelector"
                      #labelSelector
                      [allLabels]="labels"
                      [selectedLabels]="workItem.relationships?.labels?.data ?
                        workItem.relationships?.labels?.data : []"
                      (onCloseSelector)="updateLabels($event)">
                    </label-selector>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="width-100 pull-left dynamic-fields-wrap">
            <!-- Extra fields Start -->
            <div *ngFor="let attributeDesc of dynamicFormDataArray" class="form-group">
              <alm-dynamic-field [attributeDesc]="attributeDesc" [form]="dynamicFormGroup" (onUpdate)="dynamicFieldUpdated($event)"></alm-dynamic-field>
            </div>
            <!-- Extra fields End -->
          </div>
          <div class="width-100 pull-left description-fields-wrap">
            <!-- Description Start -->
            <!-- <markdown-control id="wi-detail-desc" [markdownValue]="descText" (onUpdate)="descUpdate($event)"></markdown-control> -->
            <div class="form-group">
              <label class="control-label">
                Description
              </label>
              <div class="detail-desc-wrap">
                <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>
            </div>
            <!-- Description End -->
          </div>
          <div class="width-100 pull-left start-coding-wrap" *ngIf="loggedIn && workItem.relationships?.codebase?.links?.meta?.edit">
            <div class="form-group">
              <label class="control-label" id="coding_label">
                Code
              </label>
              <div class="form-control-static start-coding">
                <a class="btn btn-default"
                  id="start-coding-link"
                  target="_blank" href="{{workItem.relationships?.codebase?.links?.meta?.edit}}">
                  Start Coding
                </a>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
    <div *ngIf="workItem.id" class="work-item-section">
      <alm-work-item-link
        [workItem]="workItem"
        [loggedIn]="loggedIn">
      </alm-work-item-link>
      <alm-work-item-comment
        [comments]="comments"
        [loadingComments]="loadingComments"
        [loggedIn]="loggedIn"
        [loggedInUser]="loggedInUser"
        (create)="createComment($event)"
        (update)="updateComment($event)"
        (delete)="deleteComment($event)">
      </alm-work-item-comment>
    </div>
  </div>
</div>