my-test123
Version:
A planner front-end for Fabric8.
249 lines (247 loc) • 11 kB
HTML
<div [@slideInOut]="panelState" class="f8-quick-preview">
<div class="width-100" *ngIf="workItem" id="workItemDetail_Wrapper">
<form
#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.createdAt | almMomentTime"></span>
</span>
<div class="dropdown-kebab-pf detail-type-dropdown">
<span
class="margin-right-5 {{workItem.type.icon}} fa-lg"
id="wi-type-icon" title="{{workItem.type.name}}"></span>
{{workItem.type.name}}
<h3 *ngIf="workItem.id" class="detail-id" id="wi-detail-id">{{workItem.number}}</h3>
</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.state">
</span>
<span class='dropdown-text pull-left padding-h-10'>
{{workItem.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 workItemStates"
>
<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.title"
[innerHTML]="workItem.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.type.fields['system.assignees']?.label || 'Label'}}
</label>
<div class="detail-assignee-content" #assignee>
<f8-assignee [showFullName]="true"
[assignees]="workItem.assignees.length ?
workItem.assignees : []">
</f8-assignee>
<div class="user-search"
*ngIf="loggedIn">
<assignee-selector
id="assigneeSelector"
[allUsers]="collaborators"
[loggedInUser]="loggedInUser"
[selectedAssignees]="workItem.assignees.length ?
workItem.assignees : []"
(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.type.fields['system.creator']?.label || 'Label'}}
</label>
<div class="detail-creator-content">
<span *ngIf="!workItem.creator"
class="pficon pficon-user user-creator-icon" id="user_creator_icon">
</span>
<div class="user-avatar margin-right-10 pull-left">
<img *ngIf="workItem.creator"
placement="bottom"
tooltip="{{workItem.creator.fullName}}"
src="{{workItem.creator.avatar + '&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.creator.name}}
</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.type.fields['system.area']?.label || 'Label'}}
</label>
<div class="detail-area-content">
<typeahead-dropdown #areaSelectbox
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.type.fields['system.iteration']?.label || 'Label'}}
</label>
<div class="detail-itr-content">
<typeahead-dropdown
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.type.fields['system.labels']?.label || 'Label'}}
</label>
<div class="detail-labels-content">
<f8-label
[labels]="workItem.labels.length ?
workItem.labels : []"
(onRemoveLabel)="removeLable($event)"
[allowDelete]="true"
(onLabelClick)="onLabelClick($event)">
</f8-label>
<div class="label-selector-wrapper" *ngIf="loggedIn" >
<label-selector
id="labelSelector"
#labelSelector
[selectedLabels]="workItem.labels.length ?
workItem.labels : []"
(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.description"
[renderedText]="workItem.descriptionRendered"
(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> -->
<work-item-comment-wrapper
[workItem]="workItem"
[loggedIn]="loggedIn"
[loggedInUser]="loggedInUser">
</work-item-comment-wrapper>
</div>
</div>
</div>