SmartIT_Extensions/BMC/smart-it-full/views/ticket/problem-details.html

208 lines
14 KiB
HTML

<div loading-spinner if="state.dataIsLoading" centered="true" overlay="true"></div>
<!-- TODO: extract this block to directive -->
<div class="ticket__not-found" ng-if="!state.dataIsLoading && !basicData.id">
<h3>{{'problem.details.notFound' | i18n}}</h3>
</div>
<div class="ticket-details" ng-class="{'ticket__header-edit': editHeader}" ng-if="!state.dataIsLoading && basicData.id"
aria-label="{{'common.labels.problem' | i18n}} {{'ticket.region.details' | i18n}}" role="region">
<div class="ticket__header ticket__header_problem clearfix">
<!--Ticket header section-->
<editable-content-section id="ticket-header" class="custom-edit-button" hide-edit-button="editDisabledFor('ticket-header')"
edit-mode-allowed="basicData.accessMappings.summaryEditAllowed" aria-label="{{'ticket.region.header' | i18n}}"
edit-button-label = "'header'" role="region" tabindex="0">
<div ng-if="!editMode" class="ticket__management clearfix" ng-class="{'highlight-section':!basicData.summary}">
<!-- TODO: extract common blocks to directive -->
<div class="ticket__basic-info">
<div ng-if="!basicData.summary" class="ticket__required-field">
<i class="icon-exclamation_triangle"></i> {{'ticket.notification.draft.missingTitle' | i18n}}
</div>
<div class="ticket__summary" ng-if="isFullVersion" title="{{basicData.summary}}">{{basicData.summary}}</div>
<div class="ticket__summary" ng-if="!isFullVersion" title="{{basicData.summary}}"><a class="ticket__summary" href="#/problem/{{basicData.id}}">{{basicData.summary}}</a></div>
<div class="pull-left">
<div class="ticket__icon">
<span ng-class="basicData.brokerVendorName ? 'icon-problem-brokered' : 'icon-problem'"></span>
</div>
<div class="ticket__information">
<div class="ticket__name" ng-if="isFullVersion">{{'problem.detail.summary.orderId.label' | i18n:(basicData.displayId || '')}}</div>
<div class="ticket__name" ng-if="!isFullVersion">{{basicData.displayId || ''}}</div>
<a class="ticket__name-link" aria-label="{{'search.preview.viewFullProblem' | i18n}}" ng-if="!isFullVersion" href="#/problem/{{basicData.id}}">{{'search.preview.viewFullProblem' | i18n}}</a>
<div ticket-priority-display priority-value="{{basicData.priority | lowercase}}">
{{ basicData.priority | localizeLabel: 'priority':'problem' }}
</div>
<div class="ticket__lastupdated">{{'ticket.list.lastUpdated' | i18n : (basicData.modifiedDate | humanizedAbsoluteDateFormat)}}</div>
</div>
</div>
<!--TODO: extract control bar items to separate directives-->
<div class="ticket-controls" ng-if="isFullVersion">
<div class="profile-action-bar__item edit-ticket-header-button" ng-if="basicData.accessMappings.summaryEditAllowed || basicData.accessMappings.priorityEditAllowed"
title="{{'controls.action.edit' | i18n}}" aria-label="{{'common.aria.label.edit.header' | i18n}}" role="link" tabindex="0"
ng-click="handleExternalEditClick()" ng-enter="handleExternalEditClick()">
<i class="icon-pencil"></i>
</div>
<div class="profile-action-bar__item dropdown" ng-if="!isDraft">
<i class="icon-share dropdown-toggle" title="{{'controls.action.share' | i18n}}" aria-label="{{'controls.action.share' | i18n}}"
role="link" tabindex="0"></i>
<ul class="profile-action-bar__item-menu dropdown-menu">
<li>
<div class="dropdown-item" ng-click="ticketActions.share()" tabindex="0" role="menuitem">
{{'action.ticket.email' | i18n: ('common.labels.' + basicData.type | i18n) }}
</div>
</li>
<li ng-if='chatModel.connected'>
<a class="dropdown-item profile-action-bar__item-menu_start-chat" tabindex="0" role="menuitem">
{{'chat.startFromTicket.headerMenu' | i18n: ('common.labels.' + basicData.type | i18n) }}
</a>
</li>
</ul>
</div>
<div class="profile-action-bar__item" ng-if="!isDraft" role="link" tabindex="0" ng-click="toggleFollowingFlag()" ng-enter="toggleFollowingFlag()"
title="{{(basicData.following? 'controls.action.unfollow' : 'controls.action.follow') | i18n}}"
aria-label="{{(basicData.following? 'controls.action.unfollow' : 'controls.action.follow') | i18n}}">
<i class="{{basicData.following? 'icon-star' : 'icon-star_o'}}"></i>
</div>
<div title="{{'controls.action.print' | i18n}}" class="profile-action-bar__item"
aria-label="{{'controls.action.print' | i18n}}" role="link" tabindex="0"
ng-click="ticketActions.showPrintDialog($event)" ng-enter="ticketActions.showPrintDialog($event)">
<i class="{{'icon-printer'}}"></i>
</div>
<div class="profile-action-bar__item" ng-if="!isDraft" role="link" tabindex="0" ng-click="refreshTicket()" ng-enter="refreshTicket()"
title="{{'common.labels.refresh' | i18n}}"
aria-label="{{'common.labels.refresh' | i18n}}">
<i class="icon-refresh"></i>
</div>
<launch-actions-dropdown ng-if="!isDraft" class="profile-action-bar__item profile-action-bar__item_text" context="basicData"></launch-actions-dropdown>
</div>
</div>
</div>
<form name="forms.editProblemHeaderSection">
<edit-header ticket="basicData" metadata="metadata" ng-show="editMode" update="ticketActions.editHeader(data)"></edit-header>
</form>
</editable-content-section>
<div class="ticket__status-section" aria-label="{{'ticket.region.status' | i18n}}" role="region" tabindex="0">
<!-- TODO: extract common blocks to directive -->
<div class="ticket__status-selector" ng-click="!basicData.accessMappings.statusEditAllowed || ticketActions.editStatus($event)"
ng-enter="!basicData.accessMappings.statusEditAllowed || ticketActions.editStatus($event)" role="link" tabindex="0"
aria-label="{{'ticket.region.status' | i18n}} {{ basicData.status.value | localizeLabel: 'status':'problem' }}">
<div class="dropdown-toggle ticket__status-value">
{{ basicData.status.value | localizeLabel: 'status':'problem' }}
<i class="icon-angle_down ticket__status-icon"></i>
</div>
</div>
<div class="ticket-status-section__sla-box clearfix" ng-if="!isDraft">
<div class="sla-progress-bar__wrapper">
<sla-progress-bar ticket="basicData" class="sla-progress-bar" ng-if="basicData.SLA.slaProgressBarValid"></sla-progress-bar>
</div>
<sla-reach-time sla="basicData.SLA"></sla-reach-time>
</div>
</div>
</div>
<div class="ticket__body ticket__body_problem">
<editable-content-section id="ticket-record-summary" hide-edit-button="editDisabledFor('ticket-record-summary')" ticket="basicData"
edit-mode-allowed="basicData.accessMappings.detailsEditAllowed" aria-label="{{'ticket.region.details' | i18n}}"
edit-button-label = "'details'" role="region" tabindex="0">
<form name="forms.editProblemDetailsSection">
<problem-details-editor ticket="basicData" metadata="metadata" class="editable-content-section-block" form="forms.editProblemDetailsSection" update-is-handled-by-parent="true"></problem-details-editor>
</form>
</editable-content-section>
<div class="ticket__assignment" aria-label="{{'ticket.region.assignment' | i18n}}" role="region" tabindex="0" ng-class="{'disable-edit': editDisabledFor('ticket-assignment')}">
<div class="editable-content-section__controls" ng-if="isFullVersion">
<div class="editable-content-section__edit-button" ng-if="basicData.accessMappings.detailsEditAllowed || basicData.accessMappings.coordinatorEditAllowed" ng-click="ticketActions.assign($event)" ng-enter="ticketActions.assign($event)" aria-label="{{'common.aria.label.edit.assignment' | i18n}}"
role="link" tabindex="0">
<i class="icon icon-pencil icon-edit_sml"></i> {{'controls.action.edit' | i18n}}
</div>
</div>
<div class="row">
<div class="ticket__assignee col-sm-6">
<div class="col-sm-1">
<img ng-if="basicData.coordinator.loginId" alt="{{basicData.coordinator.fullName}}" class="ticket-assignee__thumbnail " user-availability="basicData.coordinator" imgplaceholder="user"
thumbnail-img="{{'data:' + basicData.coordinator.thumbnailMime + ';base64,' + basicData.coordinator.thumbnail}}" />
<span ng-if="!basicData.coordinator.loginId" class="ticket-assignee__none icon-question_circle"></span>
</div>
<div class="ticket-assignee__details">
<div class="ticket__label-small">{{'problem.details.coordinator' | i18n }}</div>
<span ng-if="!basicData.coordinator.loginId" class="ticket__field-value">{{'common.label.noneYet' | i18n }}</span>
<span ng-if="basicData.coordinator.loginId" class="ticket__field-value">
<a aria-label="{{'problem.details.coordinator' | i18n}} {{basicData.coordinator.fullName}}"
href="#/person/{{basicData.coordinator.id | escape}}">{{basicData.coordinator.fullName}}</a>
</span>
<div class="ticket__label-small">{{'common.labels.coordinatorGroup' | i18n}}</div>
<span class="ticket__field-value">{{ basicData.coordinatorGroup.name || ('common.label.noneYet' | i18n ) }}</span>
<div class="ticket-assignee__action" ng-if="(isDraft || basicData.accessMappings.coordinatorSelfAssignmentAllowed) && availableForAssignment && basicData.coordinator.id !== loggedInUserId"
ng-click="ticketActions.assignToMe($event, 'problemcoordinator')" ng-enter="ticketActions.assignToMe($event, 'problemcoordinator')">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
</div>
<div class="ticket__assignee col-sm-6">
<div class="col-sm-1">
<img ng-if="basicData.assignee.loginId" alt="{{basicData.assignee.fullName}}" class="ticket-assignee__thumbnail " user-availability="basicData.assignee" imgplaceholder="user"
thumbnail-img="{{'data:' + basicData.assignee.thumbnailMime + ';base64,' + basicData.assignee.thumbnail}}" />
<span ng-if="!basicData.assignee.loginId" class="ticket-assignee__none icon-question_circle"></span>
</div>
<div class="ticket-assignee__details">
<div class="ticket__label-small">{{'common.labels.assignedTo' | i18n }}</div>
<span ng-if="!basicData.assignee.loginId" class="ticket__field-value">{{'common.label.noneYet' | i18n }}</span>
<span ng-if="basicData.assignee.loginId" class="ticket__field-value">
<a aria-label="{{'common.labels.assignedTo' | i18n}} {{basicData.assignee.fullName}}"
href="#/person/{{basicData.assignee.id | escape}}">{{basicData.assignee.fullName}}</a>
</span>
<div class="ticket__label-small">{{'common.labels.supportGroup' | i18n}}</div>
<span class="ticket__field-value">{{ basicData.supportGroup.name || ('common.label.noneYet' | i18n ) }}</span>
<div class="ticket-assignee__action" ng-if="(isDraft || basicData.accessMappings.assigneeSelfAssignmentAllowed) && availableForAssignment && basicData.assignee.id !== loggedInUserId"
ng-click="ticketActions.assignToMe($event, 'ticketassignee')" ng-enter="ticketActions.assignToMe($event, 'ticketassignee')">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
</div>
<div class="ticket__custom-field-assignment" ng-if="hasCustomFields('problemScreen.Assignment')">
<custom-field-area ticket="basicData" panel-id="problemScreen.Assignment"
update-is-handled-by-parent="true" class="editable-content-section-block"></custom-field-area>
</div>
</div>
</div>
<!-- Additinal info section -->
<editable-content-section id="ticket-additional-info" class="top-border" hide-edit-button="editDisabledFor('ticket-additional-info')"
edit-mode-allowed="basicData.accessMappings.detailsEditAllowed" aria-label="{{'customArea.header.additionalInfo' | i18n}}"
edit-button-label = "'additionalInfo'" role="region" tabindex="0" ticket="basicData"
ng-if="hasCustomFields('problemScreen.Additional Info')">
<form name="forms.editProblemAdditionalInfoSection">
<custom-field-area panel-id="problemScreen.Additional Info" ticket="basicData" class="editable-content-section-block"></custom-field-area>
</form>
</editable-content-section>
<mcsm-details ticket="basicData"></mcsm-details>
<!-- Linked Items -->
<div ng-if="isFullVersion" class="profile__relation" aria-label="{{'ticket.region.relationship' | i18n}}" role="region" tabindex="0">
<tabset justified="true" class="tabset_short-relative-tabs">
<tab heading="{{'common.label.tasks' | i18n}} ({{relationCounters.tasks}})">
<ticket-tasks ticket="basicData" relation-counters="relationCounters"></ticket-tasks>
</tab>
<tab heading="{{'common.tabs.linkedItems' | i18n}} ({{relationCounters.linkedItems}})">
<related-item-list dependency="ticket-to-all" context="basicData" is-draft="isDraft" relation-counters="relationCounters"></related-item-list>
</tab>
</tabset>
</div>
</div>
</div>