@let sortedComments = _comments | caSortComments: sortDirection : isDarkmode; @let searchTerm = searchCommentFormControl.value; @let searchedComments = sortedComments | caHighlightComment: searchTerm : isDarkmode; @let searchContentCount = searchedComments?.length; @let hasSearchContent = !!searchContentCount; @if (isDarkmode) { @let isPopoverOpen = popover?.isOpen();
{{ commentCount }}
} @else { } @let tooltipBackground = isDarkmode ? eColor.LIGHT_GREY : eColor.BLACK; @let tooltipColor = isDarkmode ? eColor.DARK_GREY : eColor.WHITE;
@let isHiddenSort = (!isDarkmode && !_comments.length) || isModal; @if (!isHiddenSort) {
@let title = (isDarkmode ? eSharedString.COMMENT : eGeneralActions.SORT_BY ) | uppercase; @let resultTitle = searchContentCount + eStringPlaceholder.WHITESPACE + eSharedString.RESULTS | uppercase; {{ searchTerm && !isDarkmode ? resultTitle : title }} @if (isDarkmode) { {{ commentCount }} }
@if (_comments.length) { @let sortByColorClass = isDarkmode ? 'text-color-white' : 'text-color-black';
{{ eSharedString.DATE }} @let isDescending = sortDirection === eSharedString.DSC; @let animationStateSort = sortDirection === eSharedString.DSC ? eAnimationState.DEFAULT : eAnimationState.ROTATED; @let sortTooltipText = isDescending ? eSharedString.DESCENDING : eSharedString.ASCENDING;
}
@if (!isDarkmode) {
}
}
@if (isSearchDisplayed && _comments.length) {
@let searchPlaceholder = isDarkmode ? 'Find Title' : 'Find Comment'; @let iconColor = isDarkmode ? 'svg-fill-bw-9' : 'svg-fill-black-2';
}
@if (isDarkmode) {
New Comment
} @if (_comments.length) {
@if (hasSearchContent) { @for ( comment of searchedComments; let index = $index; track index ) { @let isCommentExpanded = comment?.id === commentExpanded?.id; @let isEditMode = comment?.id === commentAddOrEdit?.id; @let companyUser = comment?.companyUser; @let isCurrentUser = companyUser | caIsCurrentUser: _currentUser;
@let companyUserFullname = (companyUser?.fullName || companyUser?.name) ?? eStringPlaceholder.EMPTY; @let nameInitials = companyUserFullname | nameInitials;
{{ companyUserFullname }} @let youOrMe = isDarkmode ? '(Me)' : '(You)'; @let orange = isDarkmode ? 'text-color-orange-3' : 'text-color-orange-2'; @if ( isCurrentUser && !isEditMode ) { {{ youOrMe }} }
@if (isEditMode) { @if (comment?.isNew) { New Comment } @else { Edit Comment } } @else { {{ comment.createdAt | dateFromStringPipe : eDateTimeFormats.DATE_TIME }} @if (comment?.isEdited) { @let editedTextColor = isDarkmode ? 'text-color-blue-19' : 'text-color-blue-13'; • Edited } }
@if (isEditMode) { @let backgroundHover = isDarkmode ? 'background-hover-black' : 'background-hover-white'; @let iconFill = isDarkmode ? 'svg-fill-bw-9' : 'svg-fill-black-9'; @let actionClasses = [ 'background-grey', backgroundHover, iconFill, ];
} @else { @if (isCurrentUser) { @let iconHoverFill = isDarkmode ? 'svg-hover-bw-9' : 'svg-hover-black'; @let iconBackgroundHover = isDarkmode ? 'background-hover-grey-2' : 'background-hover-dark-2';
@let trashIconBackground = isDarkmode ? 'background-hover-grey-2' : 'background-hover-red-15'; @let trashIconHover = isDarkmode ? 'svg-hover-bw-9' : 'svg-hover-red-14';
} @if (isDarkmode) { @let animationStateArrow = isCommentExpanded ? eAnimationState.ROTATED : eAnimationState.DEFAULT; @let tooltipText = isCommentExpanded ? eGeneralActions.COLLAPSE : eGeneralActions.EXPAND;
} }
@let isExpanded = isCommentExpanded || !isDarkmode; @let commentHeight = isExpanded ? 'auto' : '18px'; @if (isEditMode) {
} @else {
}
} } @else { @if (isDarkmode) {
No Results
} }
} @else { @let emptyStateContainerClass = isDarkmode ? 'h-80 background-black' : 'h-160'; @let subtleIllustrationTextClass = isDarkmode ? 'text-size-20 text-color-bw6-2 ca-font-extra-bold' : 'text-size-28 text-color-bw-9 ca-font-bold text-uppercase'; @let emptyStateTextClass = isDarkmode ? 'text-size-20 text-color-bw6-2 ca-font-extra-bold' : 'text-size-28 text-color-bw-9'; @let emptyStateText = isDarkmode ? 'Empty State' : '(Empty State)';
Subtle Illustration
{{ emptyStateText }}
}