359 lines
20 KiB
HTML
359 lines
20 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>{{'incident.details.notFound' | i18n:(basicData.id)}}</h3>
|
|
</div>
|
|
|
|
<div class="ticket-details" ng-class="{ 'ticket__header-edit': editHeader}" ng-if="!state.dataIsLoading && basicData.id"
|
|
aria-label="{{'common.labels.incident' | i18n}} {{'ticket.region.details' | i18n}}" role="region">
|
|
<div class="ticket__header 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.detailsEditAllowed" 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="#/incident/{{basicData.id}}">{{basicData.summary}}</a></div>
|
|
|
|
<div class="pull-left">
|
|
<div class="ticket__icon">
|
|
<span ng-class="{'icon-file_text_arrows':basicData.brokerVendorName, 'icon-file_text_o':!basicData.brokerVendorName}"></span>
|
|
</div>
|
|
|
|
<div class="ticket__information">
|
|
<div class="ticket__name" ng-if="isFullVersion">{{'incident.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.viewFullIncident' | i18n}}" ng-if="!isFullVersion" href="#/incident/{{basicData.id}}">{{'search.preview.viewFullIncident' | i18n}}</a>
|
|
|
|
<div ticket-priority-display priority-value="{{basicData.priority}}">
|
|
{{ basicData.priority | localizeLabel: 'priority':'incident' }}
|
|
</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.detailsEditAllowed"
|
|
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}}" 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>
|
|
<div ng-class="{'profile-action-bar__item': true, 'profile-action-bar__item_text' : !userModel.isAccessibleUser}"
|
|
ng-if="!isDraft && (basicData.status.value == 'Cancelled' || basicData.status.value == 'Closed') && !basicData.reopenedDate && basicData.accessMappings.reopenActionAllowed">
|
|
<button type="button" title="{{'action.incident.reopen.tooltip' | i18n}}" ng-click="ticketActions.confirmAction('reopen')" class="btn_link font-size-l">
|
|
{{'controls.action.reopen' | i18n}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form name="forms.editIncidentHeaderSection">
|
|
<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':'incident' }}">
|
|
<div class="dropdown-toggle ticket__status-value">
|
|
{{ basicData.status.value | localizeLabel: 'status':'incident' }}
|
|
<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">
|
|
|
|
<!--Customer card section -->
|
|
<editable-content-section id="ticket-customer-card" ticket="basicData" class="no-border" hide-edit-button="editDisabledFor('ticket-customer-card')"
|
|
edit-mode-allowed="basicData.accessMappings.requestedforEditAllowed" aria-label="{{'ticket.region.customer' | i18n}}" edit-button-label = "'customerCard'" role="region" tabindex="0">
|
|
|
|
<div ng-if="!editMode" class="ticket__customer-card">
|
|
<person-info-card context="basicData" person-type="customer" person="basicData.customer" class="ticket__owner no-border" profile-type="incident"
|
|
label="basicData.contact.firstName? 'personInfoCard.person.caption.contactInfo' : ''"></person-info-card>
|
|
|
|
<div ng-show="basicData.contact.firstName" class="ticket__contact">
|
|
|
|
<div class="ticket__contact-header" tabindex="0">
|
|
<!-- TODO: replace with entity-profile-link -->
|
|
<a class="person-summary__full-name_link" href="#/person/{{basicData.contact.loginId | escape}}">{{basicData.contact.firstName}} {{basicData.contact.lastName}} </a>
|
|
<span> {{'ticket.contact.madeRequest'| i18n}}</span>
|
|
<span ng-click="isContactCollapsed = !isContactCollapsed" ng-enter="isContactCollapsed = !isContactCollapsed" ng-class="{'icon-triangle_down':isContactCollapsed, 'icon-triangle_up':!isContactCollapsed}"
|
|
aria-label="{{'person.details.contactInfo' | i18n}}" role="link" tabindex="0"></span>
|
|
</div>
|
|
|
|
<person-info-card context="basicData" person-type="contact" collapse="isContactCollapsed" profile-type="incident" person="basicData.contact"
|
|
label=" 'personInfoCard.person.caption.contact'" ng-if="basicData.contact.firstName"></person-info-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ticket-customer-card__editable-content">
|
|
<form name="forms.editIncidentCustomerCardSection">
|
|
<edit-customer-card ticket="basicData"
|
|
ng-show="editMode"
|
|
metadata="metadata"
|
|
update="ticketActions.editCustomerCard(data)"
|
|
class="editable-content-section-block">
|
|
</edit-customer-card>
|
|
<custom-field-area ticket="basicData"
|
|
panel-id="incidentDetailsScreen.Customer Card"
|
|
class="editable-content-section-block"
|
|
update-is-handled-by-parent="true">
|
|
</custom-field-area>
|
|
</form>
|
|
</div>
|
|
|
|
</editable-content-section>
|
|
|
|
<!--Record summary section-->
|
|
<!-- TODO: extract common blocks to directive -->
|
|
<editable-content-section id="ticket-record-summary" class="top-border" 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">
|
|
<div class="ticket__record-details-section col-md-8">
|
|
|
|
<div class="clearfix" ng-if="!editMode">
|
|
|
|
<div class="ticket-category-section__impacted-service col-sm-6">
|
|
<div class="ticket__label-small">{{'ticket.detail.affectedService' | i18n}}</div>
|
|
<a class="ticket-impacted-service__title" ng-if="basicData.impactedService.name"
|
|
href="#/asset/{{basicData.impactedService.reconciliationId | escape}}/{{basicData.impactedService.classId}}">
|
|
{{basicData.impactedService.name}}
|
|
</a>
|
|
<span ng-if="!basicData.impactedService.name" class="ticket__field-value">{{'common.label.na' | i18n}}</span>
|
|
</div>
|
|
|
|
<div class="ticket-category-section__impacted-asset col-sm-6">
|
|
<div class="ticket__label-small">{{'ticket.detail.affectedAsset' | i18n}}</div>
|
|
<a class="ticket-impacted-asset__title" ng-if="basicData.causalCI.name"
|
|
href="#/asset/{{basicData.causalCI.reconciliationId | escape}}/{{basicData.causalCI.classId}}">
|
|
{{basicData.causalCI.name}}
|
|
</a>
|
|
<span ng-if="!basicData.causalCI.name" class="ticket__field-value">{{'common.label.na' | i18n}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix" ng-if="!editMode || !basicData.accessMappings.incidentTypeEditAllowed">
|
|
<div class="ticket-category-section__service-type col-sm-6">
|
|
<div class="ticket__label-small">{{'create.incident.incidentType' | i18n}}</div>
|
|
<span class="ticket__field-value" ng-if="basicData.serviceType">
|
|
{{basicData.serviceType | localizeLabel: 'serviceType':'incident' }}
|
|
</span>
|
|
<span ng-if="!basicData.serviceType" class="ticket__field-value">{{'common.label.na' | i18n}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form name="forms.editIncidentRecordSummarySection">
|
|
<edit-affected-assets ticket="basicData" meta-data="metadata" is-draft="isDraft" ng-show="editMode"
|
|
class="editable-content-section-block" update-is-handled-by-parent="true">
|
|
</edit-affected-assets>
|
|
|
|
<edit-service-type ticket="basicData" meta-data="metadata" is-draft="isDraft" clear-categories="clearCategories(selectedServiceType)" is-categories-empty="isCategoriesEmpty" ng-show="editMode && basicData.accessMappings.incidentTypeEditAllowed"
|
|
class="editable-content-section-block" update-is-handled-by-parent="true">
|
|
</edit-service-type>
|
|
|
|
<edit-summary ticket="basicData" context="isDraft ? 'draft' : 'detail'" attachment="true"
|
|
class="editable-content-section-block" update-is-handled-by-parent="false">
|
|
</edit-summary>
|
|
|
|
<div ng-if="basicData.resolution">
|
|
<div class="ticket__label-small">{{'ticket.resolutionNote' | i18n}}</div>
|
|
<text-area-expand ticket="basicData" edit-mode="editMode ? true: false" field-name="'resolution'"
|
|
class="editable-content-section-block"
|
|
context="basicData.isDraft ? 'draft' : 'detail'">
|
|
</text-area-expand>
|
|
</div>
|
|
|
|
<custom-field-area ticket="basicData" panel-id="incidentDetailsScreen.Record Summary"
|
|
update-is-handled-by-parent="true" class="editable-content-section-block" stacked="true">
|
|
</custom-field-area>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="ticket__category-section col-md-4">
|
|
<form name="forms.editIncidentCategorizationSection">
|
|
<categories-section tooltip-position="left" context="basicData" class="editable-content-section-block"
|
|
update-is-handled-by-parent="true" is-categories-empty="isCategoriesEmpty"></categories-section>
|
|
|
|
<custom-field-area ticket="basicData" panel-id="incidentDetailsScreen.Categorization"
|
|
update-is-handled-by-parent="true" class="editable-content-section-block" stacked="true"></custom-field-area>
|
|
</form>
|
|
</div>
|
|
|
|
</editable-content-section>
|
|
|
|
<!-- Vendor Ticket information section -->
|
|
<div class="ticket__vendor-info-section" ng-if="basicData.brokerVendorName"
|
|
aria-label="{{'ticket.region.vendor.ticket.info' | i18n}}" role="region" tabindex="0">
|
|
<accordion close-others="true">
|
|
<div accordion-group
|
|
class="panel-default"
|
|
is-open="isOpen"
|
|
ng-repeat="vendorInfo in basicData.vendorInfo">
|
|
<accordion-heading>
|
|
<i ng-class="{'icon-angle_right': !isOpen, 'icon-angle_down': isOpen}"></i>
|
|
{{'ticket.vendor.label.details' | i18n : basicData.brokerVendorName }}
|
|
</accordion-heading>
|
|
<div class="ticket__vendor-info-section-details col-sm-12">
|
|
<div class="ticket__label-small">{{'ticket.vendor.label.id' | i18n}}</div>
|
|
<div class="ticket__field-value">
|
|
{{ vendorInfo.id }}
|
|
</div>
|
|
</div>
|
|
<div class="ticket__vendor-info-section-details col-sm-12">
|
|
<div class="col-sm-6 ticket__vendor-info-section-col">
|
|
<div class="ticket__label-small">{{'ticket.vendor.label.lastUpdate' | i18n}}</div>
|
|
<div class="ticket__field-value">
|
|
{{ vendorInfo.updated ? ((vendorInfo.updated | date:'mediumDate') + ' ' + (vendorInfo.updated | date:'shortTime')) : ('common.label.none' | i18n) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 ticket__vendor-info-section-col">
|
|
<div class="ticket__label-small">{{'ticket.vendor.label.status' | i18n}}</div>
|
|
<div class="ticket__field-value">
|
|
{{ vendorInfo.status }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ticket__vendor-info-section-details col-sm-12">
|
|
<div class="ticket__label-small">{{'ticket.vendor.label.title' | i18n}}</div>
|
|
<div class="ticket__field-value">
|
|
{{ vendorInfo.title }}
|
|
</div>
|
|
</div>
|
|
<div class="ticket__vendor-info-section-details col-sm-12">
|
|
<div class="ticket__label-small">{{'ticket.vendor.label.description' | i18n}}</div>
|
|
<div class="ticket__field-value">
|
|
{{ vendorInfo.description }}
|
|
</div>
|
|
</div>
|
|
<div class="ticket__vendor-info-section-details col-sm-12">
|
|
<div class="ticket__vendor-info-section-custom-col col-sm-4"
|
|
ng-repeat="property in vendorInfo.properties">
|
|
<div class="ticket__label-small">{{property.name}}</div>
|
|
<div class="ticket__field-value" ng-if="property.type === 'text'">
|
|
{{ property.value }}
|
|
</div>
|
|
<div class="ticket__field-value" ng-if="property.type === 'date'">
|
|
{{ property.value ? ((property.value | date:'mediumDate') + ' ' + (property.value | date:'shortTime')) : ('common.label.none' | i18n) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</accordion>
|
|
</div>
|
|
|
|
<!-- Assignment section -->
|
|
<!-- TODO: extract common blocks to directive -->
|
|
<div class="ticket__assignment" aria-label="{{'ticket.region.assignment' | i18n}}" role="region" tabindex="0"
|
|
ng-class="{'disable-edit': editDisabledFor('ticket-assignment'), 'highlight-section': editIncidentAssignmentSection.$invalid && !editMode}">
|
|
<div class="editable-content-section__controls">
|
|
<div class="editable-content-section__edit-button" ng-if="basicData.accessMappings.detailsEditAllowed" 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="ticket__assignee">
|
|
<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 class="ticket-assignee__info">
|
|
<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.assignee' | i18n}} {{basicData.assignee.fullName}}"
|
|
href="#/person/{{basicData.assignee.loginId | escape}}">{{basicData.assignee.fullName}}</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="ticket-assignee__support-group">
|
|
<div class="ticket__label-small">{{'common.labels.supportGroup' | i18n}}</div>
|
|
<span class="ticket__field-value">{{ basicData.supportGroup.name || ('common.label.noneYet' | i18n ) }}</span>
|
|
</div>
|
|
|
|
<div class="ticket-incident-assignee__action" ng-if="(isDraft || basicData.accessMappings.assigneeSelfAssignmentAllowed) && 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}} {{'common.aria.labels.assignToMeAsAssignee' | i18n}}" href="">
|
|
{{'common.labels.assignToMe' | i18n }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form name="forms.editIncidentAssignmentSection">
|
|
<custom-field-area panel-id="incidentDetailsScreen.Assignment" ticket="basicData"></custom-field-area>
|
|
</form>
|
|
</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"
|
|
ng-if="hasCustomFields('incidentDetailsScreen.Additional Info')" ticket="basicData">
|
|
<form name="forms.editIncidentAdditionalInfoSection">
|
|
<custom-field-area panel-id="incidentDetailsScreen.Additional Info" ticket="basicData" class="editable-content-section-block"></custom-field-area>
|
|
</form>
|
|
</editable-content-section>
|
|
|
|
<!-- Tasks & 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 id="linkedResourcesTab_{{basicData.id}}" heading="{{'common.tabs.linkedItems' | i18n}} ({{relationCounters.linkedItems}})"> <!--//remove id-->
|
|
<related-item-list dependency="ticket-to-all" context="basicData" is-draft="isDraft" relation-counters="relationCounters"></related-item-list>
|
|
</tab>
|
|
</tabset>
|
|
</div>
|
|
</div>
|
|
</div> |