SmartIT_Extensions/BMC/smart-it-full/views/problem/create-problem.html

588 lines
25 KiB
HTML

<div class="create-problem clearfix">
<div class="create-form-wrapper">
<div loading-spinner class="create-ticket__loading-spinner" if="state.dataIsLoading" centered="true" overlay="true"></div>
<div class="clearfix">
<form name="createProblemForm" novalidate>
<div class="create-ticket__header">
<h3 class="create-ticket__header-title">{{ 'create.problem.header' | i18n }}</h3>
<span>{{ 'create.problem.sub.header' | i18n }}</span>
</div>
<div class="create-ticket__full-width-section">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="create-ticket__section col-sm-12">
<label class="label_control-wrap">
<span class="label__text_required"
potentially-required-field
field-name="summary"
entity="problem">
{{ 'create.problem.title' | i18n }}
</span>
<div class="create-ticket__item">
<input type="text"
prevent-click-event
potentially-required-field
field-name="summary"
entity="problem"
title="{{ 'create.problem.title' | i18n }}"
class="custom-input"
name="summary"
ng-model="problem.summary"
maxlength="100"
placeholder="{{ 'create.problem.summary.placeholder' | i18n }}"
auto-focus required>
</div>
</label>
<character-limit-message field="problem.summary" limit="100"></character-limit-message>
</div>
</div>
<div class="create-ticket__section clearfix row" ng-show="!state.initialLoading">
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text_required"
potentially-required-field
field-name="impact"
entity="problem">
{{'create.ticket.impact' | i18n }}
</span>
<div class="create-ticket__item">
<selection selection-items="problemMetadata.impacts"
selected-item="problem.selectedImpact"
selection-callback="updatePriority(item)"
title-text="{{'create.ticket.impact' | i18n | uppercase}}"
label="label"
value="label"
field-name="impact"
entity="problem"
aria-required="true"
update-selected-item="true">
</selection>
</div>
</label>
</div>
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text_required"
potentially-required-field
field-name="urgency"
entity="problem">
{{ 'create.ticket.urgency' | i18n }}
</span>
<div class="create-ticket__item">
<selection selection-items="problemMetadata.urgencies"
selected-item="problem.selectedUrgency"
selection-callback="updatePriority()"
title-text="{{'create.ticket.urgency' | i18n | uppercase}}"
label="label"
value="label"
field-name="urgency"
entity="problem"
aria-required="true"
update-selected-item="true">
</selection>
</div>
</label>
</div>
</div>
<div class="create-ticket__section row" ng-show="!state.initialLoading">
<div class="col-sm-6">
<span class="label__text">{{ 'create.ticket.calculated.priority' | i18n }}</span>
<div class="div">
<span ng-if="!problem.company.name">{{ 'common.label.noneYet' | i18n }}</span>
<span ng-if="problem.company.name" ticket-priority-display priority-value="{{problem.calculatedPriority.name | lowercase}}">{{problem.calculatedPriority.label}}</span>
</div>
</div>
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">
{{'ticket.detail.company' | i18n }}
</span>
<div>
<selection selection-items="selections.companies"
selected-item="company"
title-text="{{'ticket.detail.company' | i18n}}"
label="name"
value="name"
selection-callback="updateCompany(item)"
aria-required="true"
update-selected-item="true"
selection-filter="true"
selection-filter-placeholder-text="assignBlade.searchCompany"
show-chunking-tooltip="true"
typeahead-mode="state.tooManyCompanies"
typeahead-details="company as company.name for company in getList($viewValue)"
typeahead-get-list="getCompaniesByName(name)"
show-clear=true>
</selection>
</div>
</label>
</div>
</div>
<div class="create-ticket__section clearfix row" ng-show="!state.initialLoading">
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text_required"
potentially-required-field
field-name="status.value"
entity="problem">
{{ 'create.problem.status' | i18n }}
</span>
<div class="create-ticket__item">
<selection selection-items="problemMetadata.statuses"
selected-item="problem.selectedStatus"
selection-callback="updateStatusReason()"
title-text="{{'create.problem.status' | i18n | uppercase}}"
label="label"
value="label"
field-name="status.value"
entity="problem"
aria-required="true"
update-selected-item="true"
disabled-selection="!problem.accessMappings.statusEditAllowed">
</selection>
</div>
</label>
</div>
<div class="col-sm-6" ng-if="problem.selectedStatus.statusReasons.length">
<label class="label_control-wrap">
<span class="{{ isFieldRequired('statusReason') ? 'label__text_required' : 'label__text'}}">
{{ 'create.problem.status-reason' | i18n }}
</span>
<div class="create-ticket__item">
<selection selection-items="problem.selectedStatus.statusReasons"
selected-item="problem.selectedStatusReason"
title-text="{{'create.problem.status-reason' | i18n | uppercase}}"
label="label"
value="label"
required="isFieldRequired('statusReason')"
aria-required="isFieldRequired('statusReason')"
first-item-empty="!isFieldRequired('statusReason')"
update-selected-item="true">
</selection>
</div>
</label>
</div>
</div>
<div class="create-ticket__section" ng-if="problem.selectedStatus.name && needResolutionNote()" ng-show="!state.initialLoading">
<div class="create-ticket__item">
<label class="label_control-wrap">
<span class="label__text_required">
{{'ticket.resolutionNote' | i18n}}
</span>
<textarea title="{{'ticket.resolutionNote' | i18n}}" class="textarea full-width"
name="resolution" ng-model="problem.resolution" rows="3" placeholder="{{'ticket.placeholder.statusResolution' | i18n}}" required></textarea>
</label>
</div>
<!--TODO: move label logic to a derective-->
<div class="create-ticket__item">
<categories-editor ng-if="problem.categorizations" entity="problem" categories="problem.categorizations" company="problem.location.companyName"></categories-editor>
</div>
</div>
</div>
<div class="col-sm-6" ng-show="!state.initialLoading">
<div class="create-ticket__section">
<div class="create-ticket__item">
<edit-summary label="{{'create.problem.description' | i18n}}" ticket="problem" context="'create'"
textplaceholder="'create.ticket.description.placeholder' | i18n" attachment="true" show-attachment-icon="true">
</edit-summary>
</div>
</div>
</div>
</div>
</div>
<div class="create-ticket__full-width-section" ng-show="!state.initialLoading">
<div class="row">
<div class="create-ticket__section col-sm-12">
<label class="label_control-wrap" for="foundation-selector__site">
<span class="label__text"
potentially-required-field
field-name="location.region"
entity="problem">
{{'ticket.detail.problemLocation' | i18n }}
</span>
</label>
<foundation-selector type="site" inline="true" multiple="false" options="siteOptions" use-chunking="false"
typeahead-mode="true" selected-foundations="problem.location"></foundation-selector>
</div>
<div class="col-sm-3">
<label class="label_control-wrap">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">
{{'ticket.detail.investigationDriver' | i18n }}
</span>
<selection selection-items="problemMetadata.investigationDrivers"
selected-item="problem.investigationDriver"
title-text="{{'ticket.detail.investigationDriver' | i18n}}"
label="label"
value="name"
aria-required="true"
update-selected-item="true"
required="true">
</selection>
</label>
</div>
</div>
</div>
<div class="create-ticket__full-width-section" ng-show="!state.initialLoading">
<div class="row">
<div class="col-sm-6">
<div class="create-ticket__section row">
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text"
potentially-required-field
field-name="impactedService.name"
entity="problem">
{{ 'create.ticket.affected.business.services' | i18n }}
</span>
<div class="create-ticket__service-item">
<input type="text"
potentially-required-field
field-name="impactedService.name"
entity="problem"
title="{{ 'create.ticket.affected.business.services' | i18n }}"
name="service"
ng-model="problem.selectedService"
role="combobox"
typeahead-wait-ms="500"
typeahead-min-length="3"
typeahead-template-url="views/create/custom-add-asset-dropdown.html"
typeahead="asset as asset.name for asset in getList('service', $viewValue)"
placeholder="{{ 'create.ticket.affected.business.services.placeholder' | i18n }}"
class="custom-input"
ng-blur="onInputFocusBlur()"
uib-tooltip="{{'search.category.exceedsChunkSize' | i18n}}"
tooltip-is-open="isTooltipOpenService"
tooltip-enable="exceedsChunkSizeService"
tooltip-trigger="'none'"
tooltip-placement="auto">
<i class="icon-cross item-input__delete-btn" tabindex=0 role="link"
title="{{'common.button.clear' | i18n}} {{ 'create.ticket.affected.business.services' | i18n }}" ng-if="problem.selectedService"
focus-input-on-clear ng-click="clearSelectedService()" ng-enter="clearSelectedService()">
</i>
</div>
</label>
</div>
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text"
potentially-required-field
field-name="causalCI.name"
entity="problem">
{{ 'create.ticket.affected.asset' | i18n }}
</span>
<div class="create-ticket__service-item">
<input type="text"
potentially-required-field
field-name="causalCI.name"
entity="problem"
title="{{ 'create.ticket.affected.asset' | i18n }}"
name="asset"
ng-model="problem.selectedAsset"
role="combobox"
typeahead-wait-ms="500"
typeahead-min-length="3"
typeahead-template-url="views/create/custom-add-asset-dropdown.html"
typeahead="asset as asset.name for asset in getList('asset', $viewValue)"
placeholder="{{ 'create.ticket.affected.asset.placeholder' | i18n }}"
class="custom-input"
ng-blur="onInputFocusBlur()"
uib-tooltip="{{'search.category.exceedsChunkSize' | i18n}}"
tooltip-is-open="isTooltipOpenAsset"
tooltip-enable="exceedsChunkSizeAsset"
tooltip-trigger="'none'"
tooltip-placement="top">
<i class="icon-cross item-input__delete-btn" tabindex=0 role="link"
title="{{'common.button.clear' | i18n}} {{ 'create.ticket.affected.asset' | i18n }}" ng-if="problem.selectedAsset"
focus-input-on-clear ng-click="clearSelectedAsset()" ng-enter="clearSelectedAsset()">
</i>
</div>
</label>
</div>
</div>
<div class="create-ticket__section row">
<div class="col-sm-6">
<label class="label_control-wrap">
<span class="label__text"
potentially-required-field
field-name="rootCause"
entity="ke">
{{'ticket.detail.rootCause' | i18n}}
</span>
<selection selection-items="selections.rootCause"
selected-item="problem.rootCause"
title-text="{{'ticket.detail.rootCause' | i18n}}"
label="name"
value="name"
field-name="rootCause"
entity="ticket"
show-clear="true"
update-selected-item="true">
</selection>
</label>
</div>
<div class="custom-field__date_time_container col-sm-6">
<label>
<span id="targetDate" class="label__text"
ng-class="isFieldRequired('targetDate') ? 'required__label': ''"
data-required="{{'common.label.required.bracketed' | i18n}}" >
{{'create.ticket.target.date' | i18n}}
</span>
<div class="col-sm-12">
<div class="custom-field__date col-sm-6">
<input type="text"
class="form-control"
name="targetDate"
title="{{'common.label.date' | i18n}}"
aria-labelledby="targetDate"
datepicker-popup="mediumDate"
ng-model="problem.targetDate"
min-date="currentDate"
init-date="currentDate"
is-open="problem.targetDatePicker.open"
show-button-bar="false"
ng-click="problem.targetDatePicker.open = true"
ng-enter="problem.targetDatePicker.open = true"
datepicker-options="datePickerOptions"
ng-required="isFieldRequired('targetDate')" />
<i class="icon-calendar custom-field__date-icon"></i>
</div>
<div class="custom-field__time col-sm-6">
<div class="dropdown timepicker">
<div class="dropdown-toggle">
<input class="form-control custom-field__time-input" type="text" value="{{ problem.targetDate | date: 'shortTime' }}"
title="{{'common.label.time' | i18n}}" aria-labelledby="targetDate" readonly="readonly" />
<i class="icon-clock_o custom-field__time-icon"></i>
</div>
<div class="dropdown-menu" prevent-click-event ng-if="problem.targetDate">
<timepicker ng-model="problem.targetDate"
show-meridian="showMeridian"
default-hours="12"
default-minutes="0">
</timepicker>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="create-ticket__section">
<div class="create-ticket__item">
<label class="label_control-wrap">
<span class="label__text"
id="workaround-label"
potentially-required-field
entity="ke"
field-name="workaround">
{{('ticket.detail.workaround' | i18n)}}
</span>
<textarea type="text"
class="textarea full-width"
placeholder="{{ 'create.problem.workaround.placeholder' | i18n }}"
potentially-required-field
entity="ke"
field-name="workaround"
aria-labelledby="workaround-label"
ng-model="problem.workaround">
</textarea>
</label>
</div>
</div>
<div class="create-ticket__item">
<label class="label_control-wrap">
<span class="label__text"
id="resolution-label"
potentially-required-field
entity="ke"
field-name="resolution">
{{('ticket.detail.resolution' | i18n)}}
</span>
<textarea type="text"
class="textarea full-width"
placeholder="{{ 'create.problem.resolution.placeholder' | i18n }}"
potentially-required-field
entity="ke"
field-name="resolution"
aria-labelledby="resolution-label"
ng-model="problem.resolution">
</textarea>
</label>
</div>
</div>
<div class="col-sm-6">
<div class="create-ticket__section">
<categories-editor ng-if="problem.allCategories" entity="problem" categories="problem.allCategories" allow-location-company-edit="false"></categories-editor>
</div>
</div>
</div>
</div>
<div class="create-ticket__full-width-section" ng-show="!state.initialLoading">
<div loading-spinner if="state.assigneeLoading" overlay="true" inline="true"></div>
<div class="row create-ticket__section">
<div class="create-ticket__assignment col-sm-5">
<div ng-show="problem.coordinatorAutoAssign">
<div class="ticket__label-small" ng-class="{'required__label': isFieldRequired('coordinator')}" data-required="{{'common.label.required.bracketed' | i18n}}">
{{ 'problem.details.coordinator' | i18n }}
</div>
<div class="auto-assign__text">
{{ 'create.ticket.auto.assign' | i18n }}
</div>
<div class="ticket-assignee__action" ng-click="assignToMe($event, 'problemcoordinator')" ng-enter="assignToMe($event, 'problemcoordinator')"
ng-if="availableForAssignment">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
<div ng-show="!problem.coordinatorAutoAssign">
<div class="col-sm-1">
<img ng-if="problem.coordinator.loginId" alt="{{problem.coordinator.fullName}}" class="ticket-assignee__thumbnail " user-availability="problem.coordinator" imgplaceholder="user"
thumbnail-img="{{'data:' + problem.coordinator.thumbnailMime + ';base64,' + problem.coordinator.thumbnail}}" />
<span ng-if="!problem.coordinator.loginId" class="ticket-assignee__none icon-question_circle"></span>
</div>
<div class="ticket-assignee__details">
<div class="ticket__label-small" ng-class="{'required__label': isFieldRequired('coordinator')}" data-required="{{'common.label.required.bracketed' | i18n}}">{{'problem.details.coordinator' | i18n }}</div>
<span ng-if="!problem.coordinator.loginId" class="ticket__field-value">{{'common.label.noneYet' | i18n }}</span>
<span ng-if="problem.coordinator.loginId" class="ticket__field-value">
<a aria-label="{{'problem.details.coordinator' | i18n}} {{problem.coordinator.fullName}}"
href="#/person/{{problem.coordinator.id | escape}}">{{problem.coordinator.fullName}}</a>
</span>
<div class="ticket__label-small">{{'common.labels.coordinatorGroup' | i18n}}</div>
<span class="ticket__field-value">{{ problem.coordinatorGroup.name || ('common.label.noneYet' | i18n ) }}</span>
<div class="ticket-assignee__action" ng-click="assignToMe($event, 'problemcoordinator')" ng-enter="assignToMe($event, 'problemcoordinator')"
ng-if="availableForAssignment && problem.coordinator.id !== loggedInUserId">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
</div>
</div>
<div class="create-ticket__assignment col-sm-5">
<div ng-show="problem.autoAssign">
<div class="ticket__label-small" ng-class="{'required__label': isFieldRequired('assignee')}" data-required="{{'common.label.required.bracketed' | i18n}}">
{{ 'create.ticket.assignee' | i18n }}
</div>
<div class="auto-assign__text">
{{ 'create.ticket.auto.assign' | i18n }}
</div>
<div class="ticket-assignee__action" ng-click="assignToMe($event, 'ticketassignee')" ng-enter="assignToMe($event, 'ticketassignee')"
ng-if="availableForAssignment">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
<div ng-show="!problem.autoAssign">
<div class="col-sm-1">
<img ng-if="problem.assignee.loginId" alt="{{problem.assignee.fullName}}" class="ticket-assignee__thumbnail " user-availability="problem.assignee" imgplaceholder="user"
thumbnail-img="{{'data:' + problem.assignee.thumbnailMime + ';base64,' + problem.assignee.thumbnail}}" />
<span ng-if="!problem.assignee.loginId" class="ticket-assignee__none icon-question_circle"></span>
</div>
<div class="ticket-assignee__details">
<div class="ticket__label-small" ng-class="{'required__label': isFieldRequired('assignee')}" data-required="{{'common.label.required.bracketed' | i18n}}">{{'common.labels.assignedTo' | i18n }}</div>
<span ng-if="!problem.assignee.loginId" class="ticket__field-value">{{'common.label.noneYet' | i18n }}</span>
<span ng-if="problem.assignee.loginId" class="ticket__field-value">
<a aria-label="{{'change.detail.changeCoordinator' | i18n}} {{problem.assignee.fullName}}"
href="#/person/{{problem.assignee.id | escape}}">{{problem.assignee.fullName}}</a>
</span>
<div class="ticket__label-small">{{'common.labels.supportGroup' | i18n}}</div>
<span class="ticket__field-value">{{ problem.supportGroup.name || ('common.label.noneYet' | i18n ) }}</span>
<div class="ticket-assignee__action" ng-click="assignToMe($event, 'ticketassignee')" ng-enter="assignToMe($event, 'ticketassignee')"
ng-if="availableForAssignment && problem.assignee.id !== loggedInUserId">
<i class="icon-user_plus"></i>
<a aria-label="{{'common.labels.assignToMe' | i18n}}" href="">
{{'common.labels.assignToMe' | i18n }}
</a>
</div>
</div>
</div>
</div>
<button type="button" class="btn_primary ticket-template__assignment-btn" ng-click="assign($event)">{{ 'create.ticket.assignment' | i18n }}</button>
</div>
</div>
<div class="create-ticket__full-width-section" ng-show="!state.initialLoading">
<div class="create-ticket__section">
<div class="label__text">{{'ticket.detail.impactedAreas' | i18n}}</div>
<div class="row">
<div class="col-sm-9" ng-show="problem.impactedAreas && problem.impactedAreas.length > 0">
<impacted-areas ticket="problem" removable="true"></impacted-areas>
</div>
<div class="col-sm-10">
<impacted-areas-editor ticket="problem"></impacted-areas-editor>
</div>
<div class="col-sm-12" ng-if="basicsCustomFields.length">
<custom-field-container ticket="problem" fields="basicsCustomFields"></custom-field-container>
</div>
</div>
</div>
</div>
<!--TODO: move label logic to a directive-->
<div class="create-ticket__full-width-section" ng-if="customFields.length">
<div class="row">
<div class="col-sm-12">
<custom-field-container ticket="problem" fields="customFields"></custom-field-container>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="create-ticket__action-panel">
<span class="create-ticket__form_invalid" ng-if="createProblemForm.$invalid">
<i class="icon-exclamation_triangle"></i>
<span ng-if="createProblemForm.$error.required.length">{{createProblemForm.$error.required.length}} {{ 'create.ticket.more.required.fields' | i18n }}</span>
<span ng-if="formContainsInvalidFields(createProblemForm)">{{ 'create.ticket.invalid.fields' | i18n }}</span>
</span>
<span class="font-size-m" ng-if="createProblemForm.$valid">
<i class="icon-check"></i>
{{ 'create.ticket.all.required.fields.complete' | i18n }}
</span>
<div class="pull-right">
<button type="button" class="btn_primary create-ticket__action-btn" ng-disabled="createProblemForm.$invalid || state.dataIsLoading" ng-click="createProblem()">
{{ 'common.button.saveTicket' | i18n }}
</button>
<button type="button" class="btn_secondary action-panel__cancel-btn" ng-disabled="state.dataIsLoading" ng-click="cancel()">
{{ 'common.button.cancel' | i18n }}
</button>
</div>
</div>
</div>