diff options
Diffstat (limited to 'client/src/app/shared/shared-abuse-list')
5 files changed, 24 insertions, 14 deletions
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html index 17b3742d6..d90b93fff 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html | |||
@@ -42,6 +42,7 @@ | |||
42 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | 42 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> |
43 | <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th> | 43 | <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th> |
44 | <th i18n style="width: 80px;">Messages</th> | 44 | <th i18n style="width: 80px;">Messages</th> |
45 | <th i18n *ngIf="isAdminView()" style="width: 100px;">Internal note</th> | ||
45 | <th style="width: 150px;"></th> | 46 | <th style="width: 150px;"></th> |
46 | </tr> | 47 | </tr> |
47 | </ng-template> | 48 | </ng-template> |
@@ -144,13 +145,11 @@ | |||
144 | 145 | ||
145 | </ng-container> | 146 | </ng-container> |
146 | 147 | ||
147 | |||
148 | <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td> | 148 | <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td> |
149 | 149 | ||
150 | <td class="c-hand abuse-states" [pRowToggler]="abuse"> | 150 | <td class="c-hand abuse-states" [pRowToggler]="abuse"> |
151 | <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span> | 151 | <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span> |
152 | <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span> | 152 | <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span> |
153 | <span *ngIf="abuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment" class="glyphicon glyphicon-comment"></span> | ||
154 | </td> | 153 | </td> |
155 | 154 | ||
156 | <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)"> | 155 | <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)"> |
@@ -161,6 +160,10 @@ | |||
161 | </ng-container> | 160 | </ng-container> |
162 | </td> | 161 | </td> |
163 | 162 | ||
163 | <td *ngIf="isAdminView()" class="internal-note" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment"> | ||
164 | {{ abuse.moderationComment }} | ||
165 | </td> | ||
166 | |||
164 | <td class="action-cell"> | 167 | <td class="action-cell"> |
165 | <my-action-dropdown | 168 | <my-action-dropdown |
166 | [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body" | 169 | [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body" |
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts index 1d17c9ec9..21d2ea47d 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts | |||
@@ -278,7 +278,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV | |||
278 | isDisplayed: abuse => this.isLocalAbuse(abuse) | 278 | isDisplayed: abuse => this.isLocalAbuse(abuse) |
279 | }, | 279 | }, |
280 | { | 280 | { |
281 | label: this.i18n('Update note'), | 281 | label: this.i18n('Update internal note'), |
282 | handler: abuse => this.openModerationCommentModal(abuse), | 282 | handler: abuse => this.openModerationCommentModal(abuse), |
283 | isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment | 283 | isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment |
284 | }, | 284 | }, |
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html index cb965b71d..17e9ce4cf 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html | |||
@@ -9,7 +9,7 @@ | |||
9 | </div> | 9 | </div> |
10 | 10 | ||
11 | <div class="modal-body"> | 11 | <div class="modal-body"> |
12 | <div class="messages" #messagesBlock> | 12 | <div class="messages"> |
13 | <div | 13 | <div |
14 | *ngFor="let message of abuseMessages" | 14 | *ngFor="let message of abuseMessages" |
15 | class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }" | 15 | class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }" |
@@ -18,7 +18,7 @@ | |||
18 | <div class="author">{{ message.account.name }}</div> | 18 | <div class="author">{{ message.account.name }}</div> |
19 | 19 | ||
20 | <div class="bubble"> | 20 | <div class="bubble"> |
21 | <div class="content">{{ message.message }}</div> | 21 | <div class="content" [innerHTML]="message.messageHtml"></div> |
22 | <div class="date">{{ message.createdAt | date }}</div> | 22 | <div class="date">{{ message.createdAt | date }}</div> |
23 | </div> | 23 | </div> |
24 | </div> | 24 | </div> |
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss index 4dd025fc4..4163722dd 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss | |||
@@ -20,6 +20,7 @@ textarea { | |||
20 | display: flex; | 20 | display: flex; |
21 | flex-direction: column; | 21 | flex-direction: column; |
22 | overflow-y: scroll; | 22 | overflow-y: scroll; |
23 | max-height: 50vh; | ||
23 | } | 24 | } |
24 | 25 | ||
25 | .no-messages { | 26 | .no-messages { |
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts index 03f5ad735..6686d91f4 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
2 | import { AuthService, Notifier } from '@app/core' | 2 | import { AuthService, Notifier, HtmlRendererService } from '@app/core' |
3 | import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms' | 3 | import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms' |
4 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | 4 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' |
5 | import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' | 5 | import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' |
@@ -14,13 +14,12 @@ import { AbuseService } from '../shared-moderation' | |||
14 | }) | 14 | }) |
15 | export class AbuseMessageModalComponent extends FormReactive implements OnInit { | 15 | export class AbuseMessageModalComponent extends FormReactive implements OnInit { |
16 | @ViewChild('modal', { static: true }) modal: NgbModal | 16 | @ViewChild('modal', { static: true }) modal: NgbModal |
17 | @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef | ||
18 | 17 | ||
19 | @Input() isAdminView: boolean | 18 | @Input() isAdminView: boolean |
20 | 19 | ||
21 | @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>() | 20 | @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>() |
22 | 21 | ||
23 | abuseMessages: AbuseMessage[] = [] | 22 | abuseMessages: (AbuseMessage & { messageHtml: string })[] = [] |
24 | textareaMessage: string | 23 | textareaMessage: string |
25 | sendingMessage = false | 24 | sendingMessage = false |
26 | noResults = false | 25 | noResults = false |
@@ -33,6 +32,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit { | |||
33 | private abuseValidatorsService: AbuseValidatorsService, | 32 | private abuseValidatorsService: AbuseValidatorsService, |
34 | private modalService: NgbModal, | 33 | private modalService: NgbModal, |
35 | private i18n: I18n, | 34 | private i18n: I18n, |
35 | private htmlRenderer: HtmlRendererService, | ||
36 | private auth: AuthService, | 36 | private auth: AuthService, |
37 | private notifier: Notifier, | 37 | private notifier: Notifier, |
38 | private abuseService: AbuseService | 38 | private abuseService: AbuseService |
@@ -108,15 +108,21 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit { | |||
108 | private loadMessages () { | 108 | private loadMessages () { |
109 | this.abuseService.listAbuseMessages(this.abuse) | 109 | this.abuseService.listAbuseMessages(this.abuse) |
110 | .subscribe( | 110 | .subscribe( |
111 | res => { | 111 | async res => { |
112 | this.abuseMessages = res.data | 112 | this.abuseMessages = [] |
113 | |||
114 | for (const m of res.data) { | ||
115 | this.abuseMessages.push(Object.assign(m, { | ||
116 | messageHtml: await this.htmlRenderer.convertToBr(m.message) | ||
117 | })) | ||
118 | } | ||
119 | |||
113 | this.noResults = this.abuseMessages.length === 0 | 120 | this.noResults = this.abuseMessages.length === 0 |
114 | 121 | ||
115 | setTimeout(() => { | 122 | setTimeout(() => { |
116 | if (!this.messagesBlock) return | 123 | // Don't use ViewChild: it is not supported inside a ng-template |
117 | 124 | const messagesBlock = document.querySelector('.messages') | |
118 | const element = this.messagesBlock.nativeElement as HTMLElement | 125 | messagesBlock.scroll(0, messagesBlock.scrollHeight) |
119 | element.scrollIntoView({ block: 'end', inline: 'nearest' }) | ||
120 | }) | 126 | }) |
121 | }, | 127 | }, |
122 | 128 | ||