148 lines
10 KiB
HTML
148 lines
10 KiB
HTML
<div ux-id="feed-item" class="feed-item">
|
|
|
|
<div class="feed-item__sla-bar" ng-if="item.isSlaChange() || item.isBroadcastPriorityHigh"></div>
|
|
|
|
<!-- Icon section -->
|
|
<div ng-class="{'feed-item__service-health-image' : item.isServiceHealthStatusActivity(), 'feed-item__system-image' : item.isSystemUpdate() || item.isOutage() || item.isBroadcast(), 'feed-item__user-image' : item.isComment() || item.isOwnerChange()}">
|
|
<i ux-id="ticket-icon" ng-if="(item.isSystemUpdate() || item.isOutage() || item.isBroadcast()) && !(item.isOwnerChange() || item.isServiceHealthStatusActivity())" ng-class="item.iconFunction()"></i>
|
|
<img ux-id="user-profile-avatar" alt="{{::item.author.getFullName()}}" ng-if="(item.isOwnerChange() || item.isComment() && !item.isFlag() && !item.isUnFlag() && !item.isNeedsAttentionFlag() && !item.isNeedsAttentionUnFlag()) && !item.isSystemGenerated" thumbnail-img="{{::item.author.thumbnail}}" imgplaceholder="user" class="feed-item__avatar"></img>
|
|
<img ux-id="service-request-system-icon" alt="{{::item.author.firstName}}" ng-if="(item.isOwnerChange() || item.isComment()) && item.isSystemGenerated" src="styles/img/system-avatar.png" class="feed-item__avatar"></img>
|
|
<img alt="Service Health Status" ng-if="item.isServiceHealthStatusActivity()" src="styles/img/ServiceHealthStatus_Icon.png" class="feed-item__service-health" />
|
|
<div ux-id="ka-flag-icon" ng-if="(item.isFlag() || item.isNeedsAttentionFlag())&& !item.isSystemGenerated">
|
|
<i class="icon-flag flaged_feed" ng-class="{ 'icon-needs-attention': item.isNeedsAttentionFlag() }"></i>
|
|
</div>
|
|
<div ux-id="ka-unflag-icon" ng-if="(item.isUnFlag() || item.isNeedsAttentionUnFlag()) && !item.isSystemGenerated">
|
|
<i class="icon-flag_o flaged_feed"></i>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- right action icon -->
|
|
<div class="pull-right feed-item__unpin"
|
|
ng-if="(item.isOutage() || item.isBroadcast() || item.isSlaChange() || item.isFlag() || item.isNeedsAttentionFlag() || item.isNeedsAttentionUnFlag()) && item.priority !== 0"
|
|
ng-click="handleUnpinClick(item)"
|
|
ng-enter="handleUnpinClick(item)"
|
|
tooltip-placement="left"
|
|
tooltip="{{ 'controls.action.unpin' | i18n}}"
|
|
aria-label="{{ 'controls.action.unpin' | i18n}}"
|
|
tabindex="0">
|
|
<i class="icon-pin_circle"></i>
|
|
</div>
|
|
<!-- Content section -->
|
|
<div class="feed-item__content">
|
|
<div ux-id="feed-item-header" class="feed-item__header">
|
|
|
|
<div class="feed_item__details-link" ng-if="item.isBroadcast() || item.isOutage()">{{item.title}}</div>
|
|
<div class="feed_item__details-link" ng-if="!item.isAppEnabled">{{item.relatedObject.title}}</div>
|
|
<a class="feed_item__details-link" ng-if="item.isAppEnabled && item.relatedObject.type !== 'knowledge'" entity-profile-link="item.relatedObject">{{::item.relatedObject.title}}</a>
|
|
<a class="feed_item__details-link feed_item__details-link-knowledge" ng-if="item.isAppEnabled && item.relatedObject.type === 'knowledge'" title="{{item.relatedObject.title}}" entity-profile-link="item.relatedObject">
|
|
<span data-ellipsis data-ellipsis-separator="" data-ellipsis-separator-reg="titleRegExp" data-ng-bind="item.relatedObject.title | limitTo: 350" class="feed_item__details-knowledge-title"></span>
|
|
</a>
|
|
</div>
|
|
<div ux-id="feed-item-header-id" ng-if="item.relatedObject.showHeader" class="feed-item__header">
|
|
{{item.relatedObject.isAsset() ? item.relatedObject.title : item.relatedObject.displayId}}
|
|
</div>
|
|
|
|
<div ux-id="feed-item-body" class="feed-item__body">
|
|
<div class="feed-item__title">
|
|
<feed-item-event-message-renderer ux-id="feed-item-system-update" ng-if="item.isSystemUpdate() || item.isOutage() || item.isEmail() || item.isFlag() || item.isNeedsAttentionFlag() || item.isNeedsAttentionUnFlag()" event="item.event" related-object="item.relatedObject" is-update-feed="true" is-app-enabled="item.isAppEnabled">
|
|
</feed-item-event-message-renderer>
|
|
|
|
<span ux-id="feed-item-comment-author" ng-if="item.isComment() && !item.isEmail() && !item.isFlag() && !item.isNeedsAttentionFlag() && !item.isNeedsAttentionUnFlag()">
|
|
<span ng-if="!item.isSystemGenerated && !item.isKnowledge()">
|
|
<a ng-if="item.author.id" entity-profile-link="item.author">{{::item.author.getFullName()}}</a>
|
|
<a ng-if="!item.author.id" tooltip-placement="right" tooltip="{{ 'feed.author.tip' | i18n}}" aria-label="{{ 'feed.author.tip' | i18n}}">{{::item.author.firstName}}</a>
|
|
<span ng-if="!item.isSharedWithVendor()">
|
|
<span ng-if="item.relatedObject.type === 'person'">{{'feed.newNoteFrom.person' | i18n}}</span>
|
|
<span ng-if="item.relatedObject.type !== 'person'">{{'feed.newNoteFrom' | i18n}}</span>
|
|
</span>
|
|
<span ng-if="item.isSharedWithVendor()">
|
|
{{'timeline.action.sharedWithVendor' | i18n : item.note.brokerVendorName }}
|
|
</span>
|
|
</span>
|
|
<span ng-if="!item.isSystemGenerated && item.isKnowledge()">
|
|
<a ng-if="item.author.id" entity-profile-link="item.author">{{::item.author.getFullName()}}</a>
|
|
<a ng-if="!item.author.id" tooltip-placement="right" tooltip="{{ 'feed.author.tip' | i18n}}" aria-label="{{ 'feed.author.tip' | i18n}}">{{::item.author.firstName}}</a>
|
|
{{'feed.newArticleComment' | i18n}}
|
|
</span>
|
|
<span ng-if="item.isSystemGenerated">{{'feed.system.comment' | i18n}}</span>
|
|
</span>
|
|
<div ng-if="item.isSharedWithVendor() && item.note.vendorTicketId"
|
|
ng-bind-html="item.note.vendorTicketId | mention:true">
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="item.isOutage()">
|
|
<div class="timeline-item__tagline" ng-if="item.startDate && item.endDate">{{'feed.tagLine.startEnd' | i18n: [item.startDate,item.endDate]}}</div>
|
|
<div class="timeline-item__tagline" ng-if="item.startDate && !item.endDate">{{'feed.tagLine.start' | i18n: item.startDate}}</div>
|
|
<div class="timeline-item__tagline" ng-if="!item.startDate && item.endDate">{{'feed.tagLine.end' | i18n: item.endDate}}</div>
|
|
</div>
|
|
|
|
<div ng-if="item.isBroadcast()">
|
|
<div ng-class="{'timeline-pre_wrap': (item.summary && item.summary.length >= 2000)}" class="timeline-item__message" ng-bind-html="item.expanded ? (item.summary | mention) : ((item.summary | mention) | characters : 140)"></div>
|
|
|
|
<button type="button" class="btn_link timeline-item-message__more-link" ng-if="(item.summary | mention) | isTextTruncated" ng-click="item.toggle()" aria-expanded="{{ item.expanded }}">
|
|
{{ (item.expanded ? 'timeline.message.showLess' :'timeline.message.showMore') | i18n}}
|
|
<i ng-class="{'icon-angle_up' : item.expanded, 'icon-angle_down': !item.expanded}"></i>
|
|
</button>
|
|
<!-- Attachments section -->
|
|
<div ng-show="item.hasAttachments()" class="timeline-item-attachments">
|
|
<div ng-repeat="attachment in item.attachments" class="timeline-item-attachments__attachment">
|
|
<div class="timeline-item-attachment__thumbnail timeline-item-attachment__icon"
|
|
ng-if="attachment.fileGenericIconClass"
|
|
ng-class="attachment.fileGenericIconClass"
|
|
ng-click="handleAttachmentClick({type: item.type, attachment: attachment})"
|
|
ng-enter="handleAttachmentClick({type: item.type, attachment: attachment})"
|
|
tabindex="0"></div>
|
|
|
|
<img class="timeline-item-attachment__thumbnail"
|
|
ng-if="attachment.thumbnail"
|
|
ng-click="handleAttachmentClick({type: item.type, attachment: attachment})"
|
|
ng-enter="handleAttachmentClick({type: item.type, attachment: attachment})"
|
|
thumbnail-img="{{::attachment.thumbnail}}" imgplaceholder="attachment" alt="{{::attachment.name}}"
|
|
tabindex="0">
|
|
</img>
|
|
|
|
<div class="timeline-item-attachment__title">{{::attachment.name}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item__tagline" ng-if="item.startDate && item.endDate">{{'feed.tagLine.startEnd' | i18n: [item.startDate,item.endDate]}}</div>
|
|
<div class="timeline-item__tagline" ng-if="item.startDate && !item.endDate">{{'feed.tagLine.start' | i18n: item.startDate}}</div>
|
|
<div class="timeline-item__tagline" ng-if="!item.startDate && item.endDate">{{'feed.tagLine.end' | i18n: item.endDate}}</div>
|
|
</div>
|
|
|
|
<div ux-id="feed-item-comment" ng-if="item.isComment() || item.isVendorComment()" class="feed-item__text">
|
|
<div ng-class="{'timeline-pre_wrap': (item.message && item.message.length >= 2000)}" ng-bind-html="safeHtml(item.expanded ? (item.message | mention) : ((item.message | mention) | characters : 140))"></div>
|
|
<button type="button" class="btn_link timeline-item-message__more-link" ng-if="(item.message | mention) | isTextTruncated" ng-click="item.toggle()" aria-expanded="{{ item.expanded }}">
|
|
{{ (item.expanded ? 'timeline.message.showLess' :'timeline.message.showMore') | i18n}}
|
|
<i ng-class="{'icon-angle_up' : item.expanded, 'icon-angle_down': !item.expanded}"></i>
|
|
</button>
|
|
<!-- Attachments section -->
|
|
<div ng-show="item.hasAttachments()" class="timeline-item-attachments">
|
|
<div ux-id="{{'feed-item-comment-attach_'+$index}}" ng-repeat="attachment in item.attachments" class="timeline-item-attachments__attachment">
|
|
<div class="timeline-item-attachment__thumbnail timeline-item-attachment__icon"
|
|
ng-if="attachment.fileGenericIconClass"
|
|
ng-class="attachment.fileGenericIconClass"
|
|
ng-click="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment})"
|
|
ng-enter="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment})"
|
|
tabindex="0"></div>
|
|
|
|
<img class="timeline-item-attachment__thumbnail"
|
|
ng-if="attachment.thumbnail"
|
|
ng-click="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment})"
|
|
ng-enter="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment})"
|
|
thumbnail-img="{{::attachment.thumbnail}}" imgplaceholder="attachment" alt="{{::attachment.name}}"
|
|
tabindex="0">
|
|
</img>
|
|
|
|
<div class="timeline-item-attachment__title">{{::attachment.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ux-id="feed-item-datetime" class="feed-item__date-time">{{::item.createDate | humanizedAbsoluteDateFormat}}</div>
|
|
</div>
|
|
|
|
<response-item-renderer item="item"></response-item-renderer>
|
|
</div>
|
|
</div> |