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>