fabric8-planner/app/components_ngrx/work-item-detail/work-item-detail.component.html

A planner front-end for Fabric8.

<div [class.f8-wi-container]="detailContext=='detail'">
  <div class="f8-detail form-horizontal work-item-page"
    id="wi-detail-form"
    *ngIf="workItem">
    <fieldset *ngIf="(workItem.typeObs | async) as type">
      <div class="f8-detail__header"
        #detailHeader>
        <span
          class="pficon-close pull-right close f8-detail--close"
          (click)="closeDetail()">
        </span>
        <div *ngIf="detailContext=='preview'">
          <div class="pull-left">
            <f8-delete-workitem *ngIf="context === 'query'"
              class="padding-right-5"
              (onDelete)="closeDetail()"
              [workItem]="workItem">
            </f8-delete-workitem>
            <b>#{{ workItem.number }}</b>
            <span class="detail-created-date created-by"
              *ngIf="workItem.id">
              created by
              <span id="preview_created_by"
                *ngIf="workItem?.creatorObs | async; let creator">
                {{ creator.name }}</span>
              <span id="preview_created_at"
                [innerHTML]="workItem.createdAt | almMomentTime"></span>
            </span>
            <a class="pull-right" style="padding-left: 120px"
              [routerLink]="context === 'list' ? ['detail', workItem.number] : ['../', 'detail', workItem.number]"
              [queryParams]="queryParams">
              View full details
              <span class="fa fa-list-alt"></span>
            </a>
          </div>
        </div>
        <div *ngIf="detailContext=='detail'">
          <f8-delete-workitem
            class="padding-right-5"
            (onDelete)="closeDetail()"
            [workItem]="workItem">
          </f8-delete-workitem>
          <b>#{{ workItem.number }}</b>
          <span class="detail-created-date created-by"
            *ngIf="workItem.id">
            created by
            <span id="preview_created_by"
              *ngIf="workItem?.creatorObs | async; let creator">
              {{ creator.name }}</span>
            <span id="preview_created_at"
              [innerHTML]="workItem.createdAt | almMomentTime"></span>
          </span>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 margin-top-15 padding-0">
          <div class="form-horizontal">
            <f8-inlineinput
              #inlineInput
              id="wi-title-div"
              [disabled]="!workItem?.editable"
              [value]="workItem.title"
              (onSave)="saveTitle($event)"
              [placeholder]="'Enter title'">
            </f8-inlineinput>
          </div>
        </div>
      </div>

      <div class="f8-detail__detail width-100" #detailContent>
        <div
          class="col-xs-12 col-sm-12 padding-v-15"
          [class.f8-detail__detail-wrap]="detailContext=='detail'"
          [class.col-md-7]="detailContext=='detail'"
          [class.col-lg-7]="detailContext=='detail'"
          [class.col-md-12]="detailContext=='preview'"
          [class.col-lg-12]="detailContext=='preview'">

          <!-- Work item type dropdown -->
          <div class="form-group">
            <section class="f8-detail__area">
              <label class="pull-left padding-left-15 control-label">
                Type
              </label>
              <div class="f8-detail__content">
                <span *ngIf="loadingTypes"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <common-selector
                  *ngIf="!loadingTypes"
                  class="type-dropdown"
                  [allowUpdate]="workItem?.editable"
                  [headerText]="'Update Type'"
                  [items]="workItemTypeSource | async"
                  [noValueLabel]="'None'"
                  [selectedItems]="selectedWorkItemTypes | async"
                  (onCloseSelector)="updateType($event)">
                </common-selector>
              </div>
            </section>
          </div>
          <!-- Work item type dropdown end -->

          <!-- work-item state dropdown -->
          <div class="form-group">
            <section class="f8-detail__area">
              <label class="pull-left padding-left-15 control-label">
                {{ type.fields['system.state']?.label || 'Label' }}
              </label>
              <div class="f8-detail__content">
                <span *ngIf="loadingStates"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <common-selector
                  *ngIf="!loadingStates"
                  class="state-dropdown"
                  [allowUpdate]="workItem?.editable"
                  [headerText]="'Update State'"
                  [items]="workItemStateSource | async"
                  [noValueLabel]="'None'"
                  [selectedItems]="selectedWorkItemStates | async"
                  (onCloseSelector)="onChangeState($event)">
                </common-selector>
              </div>
            </section>
          </div>
          <!-- work-item state dropdown end -->


          <div class="form-group">
            <!-- assignee -->
            <section class="f8-detail__assignee">
              <label class="pull-left padding-left-15 control-label">
                {{ type.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?.assigneesObs | async">
                </f8-assignee>
                <div class="user-search"
                  *ngIf="workItem?.editable">
                    <assignee-selector
                      [allUsers]="collaborators"
                      [selectedAssignees]="workItem?.assigneesObs | async"
                      [editAllow]="workItem?.editable"
                      [loggedInUser]="loggedInUser"
                      (onOpenSelector)="onAssigneeSelectorOpen($event)"
                      (onCloseAssignee)="assignUser($event)">
                    </assignee-selector>
                </div>
              </div>
            </section>
          </div>
          <!-- area -->
          <div class="form-group">
            <section class="f8-detail__area">
              <label class="pull-left padding-left-15 control-label">
                {{ type.fields['system.area']?.label || 'Label' }}
              </label>
              <div class="f8-detail__content">
                <span *ngIf="loadingArea"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <common-selector
                  *ngIf="!loadingArea"
                  class="area-dropdown"
                  [allowUpdate]="workItem?.editable"
                  [noValueLabel]="'None'"
                  [headerText]="'Update area'"
                  [items]="areaSource | async"
                  [selectedItems]="selectedAreas | async"
                  [itemTruncate]="-25"
                  [toggleTruncate]="1000"
                  (onCloseSelector)="areaUpdated($event)">
                </common-selector>
              </div>
            </section>
          </div>

          <!-- Iteration -->
          <div class="form-group">
            <section class="f8-detail__area">
              <label class="pull-left padding-left-15 control-label">
                {{ type.fields['system.iteration']?.label || 'Label' }}
              </label>
              <div class="f8-detail__content">
                <span *ngIf="loadingIteration"
                  class="spinner spinner-sm spinner-inline">
                </span>
                <common-selector
                  *ngIf="!loadingIteration"
                  class="iteration-dropdown"
                  [allowUpdate]="workItem?.editable"
                  [headerText]="'Update iteration'"
                  [items]="iterationSource | async"
                  [noValueLabel]="'None'"
                  [selectedItems]="selectedIterations | async"
                  [itemTruncate]="-25"
                  [toggleTruncate]="1000"
                  (onCloseSelector)="iterationUpdated($event)">
                </common-selector>
              </div>
            </section>
          </div>

          <!--Labels-->
          <div class="form-group">
            <section class="f8-detail__labels">
              <label class="pull-left padding-left-15 control-label ">
                {{ type.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?.labelsObs | async'
                  (onRemoveLabel)="removeLable($event)"
                  [allowDelete]="workItem?.editable"
                  [context]="detailContext">
                </f8-label>
                <div class="f8-detail__labels--selector"
                  *ngIf="loggedIn">
                  <label-selector
                    [allLabels]="labels"
                    [selectedLabels]="workItem?.labelsObs | async"
                    [allowUpdate]="workItem?.editable"
                    (onCloseSelector)="updateLabels($event)">
                  </label-selector>
                </div>
              </div>
            </section>
          </div>

          <!-- Description -->
          <div class="form-group">
            <section class="f8-detail__area">
              <label class="pull-left padding-left-15 control-label">
                Description
              </label>
              <div class="f8-detail__content">
                <f8-markdown
                  id="wi-desc-div"
                  [editAllow]="workItem?.editable"
                  [rawText]="workItem.descriptionRendered!==null ? workItem.description : workItem.description.content"
                  [renderedText]="(workItem.descriptionRendered!==null ? workItem.descriptionRendered : workItem.description.rendered) | safe: 'html'"
                  (onSaveClick)="descUpdate($event)"
                  (showPreview)="showPreview($event)"
                  (onClickOut)="$event ? descMarkdown.closeClick() : ''"
                  #descMarkdown>
                </f8-markdown>
              </div>
            </section>
          </div>

          <div class="dynamic-fields-wrap">
            <!-- Extra fields Start -->
            <div class="form-group margin-bottom-0"
              *ngFor="let field of dynamicKeyValueFields">
              <alm-dynamic-field
                class="db"
                [keyValueField]="field"
                [editAllow]="workItem?.editable"
                (onUpdate)="dynamicFieldUpdated($event)">
              </alm-dynamic-field>
            </div>
            <!-- Extra fields End -->
          </div>
        </div>

        <div class="col-xs-12 col-sm-12 padding-0"
          [class.f8-detail__detail-wrap--right]="detailContext=='detail'"
          [class.f8-detail__detail-wrap]="detailContext=='detail'"
          [class.col-md-5]="detailContext=='detail'"
          [class.col-lg-5]="detailContext=='detail'"
          [class.col-md-12]="detailContext=='preview'"
          [class.col-lg-12]="detailContext=='preview'">
          <work-item-link
            [context]="context"
            [detailContext]="detailContext"
            [workItem]="workItem"
            [loggedIn]="loggedIn"
            (onLinkClick)="setWorkItem($event.number)">
          </work-item-link>
          <work-item-comment-wrapper
            [workItem]="workItem"
            [loggedInUser]="loggedInUser"
            [loggedIn]="loggedIn">
          </work-item-comment-wrapper>
          <work-item-event-wrapper
            [workItem]="workItem">
          </work-item-event-wrapper>
        </div>
      </div>
    </fieldset>
  </div>
</div>

<osio-modal *ngIf="detailContext=='detail'"></osio-modal>