client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

   1 <p-table
   2   [value]="abuses" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   3   [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id" [resizableColumns]="true"
   4   [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
   5   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   6   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
   7   [expandedRowKeys]="expandedRows"
   8 >
   9   <ng-template pTemplate="caption">
  10     <div class="caption">
  11       <div class="ms-auto">
  12         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
  13       </div>
  14     </div>
  15   </ng-template>
  16
  17   <ng-template pTemplate="header">
  18     <tr> <!-- header -->
  19       <th style="width: 40px;"></th>
  20       <th style="width: 150px;"></th>
  21       <th *ngIf="isAdminView()" style="width: 20%;" pResizableColumn i18n>Reporter</th>
  22       <th i18n>Video/Comment/Account</th>
  23       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
  24       <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
  25       <th i18n style="width: 80px;">Messages</th>
  26       <th i18n *ngIf="isAdminView()" style="width: 100px;">Internal note</th>
  27     </tr>
  28   </ng-template>
  29
  30   <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
  31     <tr>
  32       <td class="expand-cell" [pRowToggler]="abuse">
  33         <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
  34       </td>
  35
  36       <td class="action-cell">
  37         <my-action-dropdown
  38           [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
  39           i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
  40         ></my-action-dropdown>
  41       </td>
  42
  43       <td *ngIf="isAdminView()">
  44         <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
  45           <div class="chip two-lines">
  46             <my-actor-avatar [account]="abuse.reporterAccount" size="32"></my-actor-avatar>
  47             <div>
  48               {{ abuse.reporterAccount.displayName }}
  49               <span>{{ abuse.reporterAccount.nameWithHost }}</span>
  50             </div>
  51           </div>
  52         </a>
  53
  54         <span i18n *ngIf="!abuse.reporterAccount">
  55           Deleted account
  56         </span>
  57       </td>
  58
  59       <ng-container *ngIf="abuse.video">
  60
  61         <td *ngIf="!abuse.video.deleted">
  62           <my-video-cell [video]="abuse.video">
  63             <span image>
  64               <span
  65                 class="table-video-image-label" *ngIf="abuse.count > 1"
  66                 i18n-title title="This video has been reported multiple times."
  67               >
  68                 {{ abuse.nth }}/{{ abuse.count }}
  69               </span>
  70             </span>
  71
  72             <span name>
  73               <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
  74             </span>
  75           </my-video-cell>
  76         </td>
  77
  78         <td *ngIf="abuse.video.deleted" class="c-hand" [pRowToggler]="abuse">
  79           <div class="table-video" i18n-title title="Video was deleted">
  80             <div class="table-video-text">
  81               <div>
  82                 {{ abuse.video.name }}
  83                 <span class="glyphicon glyphicon-trash"></span>
  84               </div>
  85               <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
  86             </div>
  87           </div>
  88         </td>
  89       </ng-container>
  90
  91       <ng-container *ngIf="abuse.comment">
  92         <td>
  93           <a [href]="getCommentUrl(abuse)" [innerHTML]="abuse.truncatedCommentHtml" class="table-comment-link"
  94             [title]="abuse.comment.video.name" target="_blank" rel="noopener noreferrer"
  95           ></a>
  96
  97           <div class="comment-flagged-account" *ngIf="abuse.flaggedAccount">by {{ abuse.flaggedAccount.displayName }}</div>
  98         </td>
  99       </ng-container>
 100
 101       <ng-container *ngIf="!abuse.comment && !abuse.video">
 102         <td *ngIf="abuse.flaggedAccount">
 103           <a [href]="getAccountUrl(abuse)"  class="table-account-link" target="_blank" rel="noopener noreferrer">
 104             <span>{{ abuse.flaggedAccount.displayName }}</span>
 105
 106             <span class="account-flagged-handle">{{ abuse.flaggedAccount.nameWithHostForced }}</span>
 107           </a>
 108         </td>
 109
 110         <td i18n *ngIf="!abuse.flaggedAccount">
 111           Account deleted
 112         </td>
 113
 114       </ng-container>
 115
 116       <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 117
 118       <td class="c-hand abuse-states" [pRowToggler]="abuse">
 119         <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
 120         <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
 121       </td>
 122
 123       <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
 124         <ng-container *ngIf="isLocalAbuse(abuse)">
 125           {{ abuse.countMessages }}
 126
 127           <my-global-icon iconName="message-circle"></my-global-icon>
 128         </ng-container>
 129       </td>
 130
 131       <td *ngIf="isAdminView()" class="internal-note" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment">
 132         {{ abuse.moderationComment }}
 133       </td>
 134     </tr>
 135   </ng-template>
 136
 137   <ng-template pTemplate="rowexpansion" let-abuse>
 138       <tr>
 139         <td *ngIf="isAdminView()" class="expand-cell" colspan="8">
 140           <my-abuse-details [abuse]="abuse" [isAdminView]="true"></my-abuse-details>
 141         </td>
 142         <td *ngIf="!isAdminView()" class="expand-cell" colspan="6">
 143           <my-abuse-details [abuse]="abuse" [isAdminView]="false"></my-abuse-details>
 144         </td>
 145       </tr>
 146   </ng-template>
 147
 148   <ng-template pTemplate="emptymessage">
 149     <tr>
 150       <td colspan="6">
 151         <div class="no-results">
 152           <ng-container *ngIf="search" i18n>No abuses found matching current filters.</ng-container>
 153           <ng-container *ngIf="!search" i18n>No abuses found.</ng-container>
 154         </div>
 155       </td>
 156     </tr>
 157   </ng-template>
 158 </p-table>
 159
 160 <my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
 161 <my-abuse-message-modal #abuseMessagesModal [isAdminView]="isAdminView()" (countMessagesUpdated)="onCountMessagesUpdated($event)"></my-abuse-message-modal>