src/app/news/news-list-item.component.html
<mat-card>
<mat-card-header>
<img mat-card-avatar [src]="item.avatar" class="cursor-pointer" (click)="openMemberDialog(item.doc.user)">
<mat-card-title>
<a mat-card-title class="cursor-pointer" (click)="openMemberDialog(item.doc.user)">
{{item.doc.user.firstName ?
item.doc.user.firstName + ((' ' + item.doc.user.middleName) || '') + ' ' + item.doc.user.lastName :
item.doc.user.name}}
</a>
</mat-card-title>
<mat-card-subtitle>
<p class="primary-text-color" *ngIf="item.doc.createdOn !== planetCode"><ng-container i18n>Member of Planet</ng-container> {{item.doc.createdOn}}</p>
<ng-container i18n>posted on</ng-container> {{item.doc.time | date: 'medium' }}
<ng-container *ngIf="item.doc.updatedDate !== item.doc.time && item.doc.updatedDate"> | <ng-container i18n>edited on</ng-container> {{item.doc.updatedDate | date: 'medium'}}</ng-container>
<ng-container *ngIf="item.sharedDate"> | <ng-container i18n>shared on</ng-container> {{item.sharedDate | date: 'medium'}}</ng-container>
<mat-chip-list>
<mat-chip color="primary" selected class="planet-chip-label chip-no-style" *ngFor="let label of item.doc.labels">
<planet-label i18n-label [label]="label"></planet-label>
<mat-icon *ngIf="(item.doc.user.name === currentUser.name || currentUser.isUserAdmin ) && editable && !item.doc.chat" matChipRemove (click)="labelClick(label, 'remove')">clear</mat-icon>
</mat-chip>
<mat-chip class="planet-chip-label chip-no-style chat-chip" *ngIf="item.doc.chat">
<planet-label i18n-label [label]="'shared chat'"></planet-label>
</mat-chip>
</mat-chip-list>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div [ngClass]="{'show-less': showLess}" #content>
<planet-markdown class="img-wrap" [content]="item.doc.message"></planet-markdown>
<ng-container *ngIf="item.doc.chat">
<div class="chat-container">
<div *ngFor="let conversation of item.doc.news.conversations">
<p class="conversation-query" [planetChatOutput]="conversation.query"></p>
<p [ngClass]="{'conversation-error': conversation.error, 'conversation-response': !conversation.error}" [planetChatOutput]="conversation.response"></p>
</div>
</div>
</ng-container>
</div>
<span class="primary-text-color cursor-pointer" *ngIf="(showExpand || !showLess) && !item.latestMessage" (click)="showLess = !showLess" i18n>
{{ showLess ? 'Show More' : 'Show Less' }}
</span>
</mat-card-content>
<mat-card-actions class="display-flex">
<button mat-button *ngIf="editable || item.public === true" type="button" (click)="addReply(item.doc)" i18n>Reply</button>
<button mat-button type="button" *ngIf="replyObject[item.doc._id]?.length > 0 && showRepliesButton" (click)="showReplies(item)">
<ng-container i18n>Show Replies</ng-container> ({{replyObject[item.doc._id]?.length}})
</button>
<span class="toolbar-fill"></span>
<ng-container *ngIf="item.doc.user.name === currentUser.name || currentUser.isUserAdmin">
<button mat-icon-button type="button" (click)="editNews(item.doc)"><mat-icon>edit</mat-icon></button>
<button mat-icon-button type="button" (click)="openDeleteDialog(item.doc)"><mat-icon>delete</mat-icon></button>
<button mat-button i18n *ngIf="editable && !item.doc.chat" [matMenuTriggerFor]="labelMenu" [disabled]="labels.listed.length === 0">Add Label</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels.listed" (click)="labelClick(label, 'add')"><planet-label [label]="label"></planet-label></button>
</mat-menu>
<button mat-button *ngIf="showShare" (click)="shareStory(item.doc)" i18n>Share with {
shareTarget, select, community {Community} nation {Nation} center {Earth}
}</button>
</ng-container>
</mat-card-actions>
</mat-card>