160 lines
10 KiB
HTML
160 lines
10 KiB
HTML
<div ux-id="timeline-item" class="feed-item clearfix" aria-labelledby="feedContent_{{item.id}}" role="heading" tabindex="0">
|
|
|
|
<div loading-spinner if="item.detailsLoading" centered="true" overlay="true"></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 ng-if="(item.isSystemUpdate() || item.isOutage() || item.isBroadcast()) && !(item.isOwnerChange() || item.isServiceHealthStatusActivity())" ng-class="item.iconFunction()"></i>
|
|
<img alt="{{::item.author.getFullName()}}" ng-if="(item.isOwnerChange() || item.isComment() && !item.isFlag() && !item.isNeedsAttentionFlag() && !item.isNeedsAttentionUnFlag()) && !item.isSystemGenerated" thumbnail-img="{{::item.author.thumbnail}}" imgplaceholder="user" class="feed-item__avatar" />
|
|
<img alt="{{::item.author.firstName}}" ng-if="(item.isOwnerChange() || item.isComment()) && item.isSystemGenerated" src="styles/img/system-avatar.png" class="feed-item__avatar" />
|
|
<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.isNeedsAttentionUnFlag() && !item.isSystemGenerated" >
|
|
<i class="icon-flag_o flaged_feed"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div ux-id="timeline-item-content" id="feedContent_{{::item.id}}" class="timeline-item__main-content">
|
|
|
|
<div ux-id="timeline-item-header" class="feed-item__header" ng-if="showContext()">
|
|
<a class="feed_item__details-link" entity-profile-link="item.relatedObject">{{::item.relatedObject.title}}</a>
|
|
</div>
|
|
<div ng-if="item.relatedObject.showHeader && showContext()" class="feed-item__header">
|
|
{{item.relatedObject.isAsset() ? item.relatedObject.title : item.relatedObject.displayId}}
|
|
</div>
|
|
|
|
<div ng-if="item.isComment()">
|
|
|
|
<div ux-id="timeline-item-headline" class="timeline-item__headline" ng-if="!item.isSystemGenerated && !item.isEmail() && !item.isFlag() && !item.isNeedsAttentionFlag() && !item.isNeedsAttentionUnFlag()">
|
|
<a ng-if="!item.author.id" tooltip-placement="right" tooltip="{{ 'feed.author.tip' | i18n}}" aria-label="{{ 'feed.author.tip' | i18n}}">{{::item.author.firstName}}</a>
|
|
<a ng-if="item.author.id" entity-profile-link="item.author">{{::item.author.getFullName()}}</a>
|
|
<span ng-if="!item.isSharedWithVendor()" class="timeline-item__action-description">{{ 'timeline.action.commented' | i18n}}</span>
|
|
<span ng-if="item.isSharedWithVendor()" class="timeline-item__action-description">
|
|
{{'timeline.action.sharedWithVendor' | i18n : item.note.brokerVendorName }}
|
|
</span>
|
|
<div ng-if="item.isSharedWithVendor() && item.note.vendorTicketId"
|
|
ng-bind-html="item.note.vendorTicketId | mention:true"
|
|
class="timeline-item__action-description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item__headline" ng-if="item.isSystemGenerated && !item.isEmail() && !item.isFlag() && !item.isNeedsAttentionFlag() && !item.isNeedsAttentionUnFlag()">
|
|
<span class="timeline-item__action-description">{{ 'feed.system.comment' | i18n}}</span>
|
|
</div>
|
|
|
|
<div class="timeline-item__headline" ng-if="item.isEmail() || item.isFlag() || item.isNeedsAttentionFlag() || item.isNeedsAttentionUnFlag()">
|
|
<feed-item-event-message-renderer event="item.event" related-object="item.relatedObject" class="feed-item__title" parent-context="parentContext" is-app-enabled="true">
|
|
</feed-item-event-message-renderer>
|
|
</div>
|
|
|
|
<div class="timeline-item__message">
|
|
<!--item.message.length - 2000 is based on mention filter if condition-->
|
|
<span ng-class="{'timeline-pre_wrap': (item.message && item.message.length >= 2000)}" ng-bind-html="item.expanded ? (item.message | mention) : ((item.message | mention) | characters : 140)"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<feed-item-event-message-renderer ng-if="item.isSystemUpdate() || item.isOutage()" event="item.event" related-object="item.relatedObject"
|
|
class="feed-item__title" parent-context="parentContext" is-app-enabled="true"></feed-item-event-message-renderer>
|
|
|
|
<div ux-id="timeline-item-outage" ng-if="item.isOutage()">
|
|
<div class="timeline-item__message font-weight-bold">{{::item.title}}</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="timeline-item-vendor" ng-if="item.isVendorComment()" class="timeline-item__message">
|
|
<span ng-class="{'timeline-pre_wrap': (item.message && item.message.length >= 2000)}" ng-bind-html="item.expanded ? (item.message | mention) : ((item.message | mention) | characters : 140)"></span>
|
|
</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="{{'timeline-item-comment-attach_'+$index}}" ng-repeat="attachment in item.attachments" class="timeline-item-attachments__attachment" ng-init="attachment.attachmentReference['workNoteId'] = item.note.workNoteGuid">
|
|
<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, returnAsBlob: false, isMyITComment: item.isMyITComment()})"
|
|
ng-enter="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment, returnAsBlob: false, isMyITComment: item.isMyITComment()})"
|
|
tabindex="0"></div>
|
|
|
|
<img class="timeline-item-attachment__thumbnail"
|
|
ng-if="attachment.thumbnail"
|
|
ng-click="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment, returnAsBlob: false, isMyITComment: item.isMyITComment()})"
|
|
ng-enter="handleAttachmentClick({type: item.relatedObject.type, attachment: attachment, returnAsBlob: false, isMyITComment: item.isMyITComment()})"
|
|
thumbnail-img="{{::attachment.thumbnail}}" imgplaceholder="attachment" alt="{{::attachment.name}}" tabindex="0"/>
|
|
|
|
<div class="timeline-item-attachment__title">{{::attachment.name}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="feed-item__date-time">{{::item.createDate | humanizedAbsoluteDateFormat}}</span>
|
|
|
|
<span ng-if="item.isMyITComment()">
|
|
<span class="icon-circle feed-item__separator"></span>
|
|
<a class="feed-item__myIT-link" href="{{::item.note.myItLink}}" aria-label="{{'feed.system.myIt.comment' | i18n}}">{{ 'feed.system.myIt.comment' | i18n}}</a>
|
|
<span ng-if="item.note.commentCount > 0" class="icon-comments feed-item__count-icon"></span>
|
|
<span ng-if="item.note.commentCount > 0" class="feed-item__count-value">{{::item.note.commentCount}}</span>
|
|
</span>
|
|
|
|
<!-- Response to flag Section-->
|
|
<response-item-renderer item="item"></response-item-renderer>
|
|
|
|
<div ux-id="timeline-item-flag" ng-if="item.isFlag() && isActivityForKA()" feed-comment-thread=""
|
|
savenote="saveNote({noteData : noteData})" type="type" timeline-item="item" is-unflag-edit-allowed="isUnflagEditAllowed">
|
|
<div ng-if="!state.noteFormIsActive" class="timeline-widget__add-note">
|
|
<input ux-id="flag-note" type="text" title="{{'timeline.note.respondFlag.placeholder' | i18n}}" class="timeline-widget__add-note-input" placeholder="{{'timeline.note.respondFlag.placeholder' | i18n}}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feed-item__public"
|
|
tabindex="0"
|
|
ng-if="item.isComment()"
|
|
tooltip-placement="left"
|
|
tooltip="{{(item.note.viewAccessType ? 'feed.tooltip.private' : 'feed.tooltip.public') | i18n}}"
|
|
aria-label="{{(item.note.viewAccessType ? 'feed.tooltip.private' : 'feed.tooltip.public') | i18n}}">
|
|
<i class="{{item.note.viewAccessType ? 'icon-user' : 'icon-users_o'}}"></i>
|
|
</div>
|
|
|
|
<div class="timeline-item__secondary-content" ng-if="item.expanded">
|
|
|
|
<!-- Comments section -->
|
|
<div ng-repeat="comment in item.comments | orderBy : 'createDate'" class="timeline-item__comment">
|
|
<img class="timeline-item__icon_thumbnail" thumbnail-img="{{::comment.author.thumbnail}}" imgplaceholder="user"
|
|
ng-if="item.isComment()"/>
|
|
|
|
<div class="timeline-item__main-content">
|
|
<img class="timeline-item__icon_thumbnail" thumbnail-img="{{::comment.author.thumbnail}}" imgplaceholder="user" ng-if="item.isComment()" />
|
|
|
|
<div class="timeline-item__headline">
|
|
<span class="timeline-item__author">{{comment.createdByMe ? ('timeline.author.you' | i18n) : comment.title}} </span>
|
|
<span class="timeline-item__action-description">{{ 'timeline.action.replied' | i18n}}</span>
|
|
</div>
|
|
<div class="timeline-item__message">
|
|
"{{::comment.message}}"
|
|
</div>
|
|
|
|
<!-- Attachments section -->
|
|
<!-- TODO: extract this to common renderer -->
|
|
<div ng-if="comment.hasAttachments()" class="timeline-item-attachments">
|
|
<div ng-repeat="attachment in comment.attachments" class="timeline-item-attachments__attachment">
|
|
<!--<a target="_blank" href="{{attachment.downloadUrl}}" download="{{attachment.name}}">-->
|
|
<img class="timeline-item-attachment__thumbnail" thumbnail-img="{{::attachment.thumbnail}}"
|
|
imgplaceholder="attachment" alt="{{::attachment.name}}"/>
|
|
|
|
<div class="timeline-item-attachment__title" ng-cloak="">{{::attachment.name}}</div>
|
|
<!--</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|