add report revocation to web frontend [#153]

zekroTJA · Aug 10, 2020 · bf15297 · bf15297
1 parent 6c14f01
commit bf15297
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 7 deletions.
diff --git a/web/src/app/api/api.service.ts b/web/src/app/api/api.service.ts
@@ -90,8 +90,8 @@ export class APIService {
     memberID: string
   ) => `${this.rcGuildMemberReports(guildID, memberID)}/count`;
 
-  private readonly rcReports = (reportID: string) =>
-    `${this.rcAPI('reports')}/${reportID}`;
+  private readonly rcReports = (reportID: string, rc: string = '') =>
+    `${this.rcAPI('reports')}/${reportID}${rc ? '/' + rc : ''}`;
 
   private readonly rcGuildSettings = (guildID: string) =>
     `${this.rcGuilds(guildID)}/settings`;
@@ -294,6 +294,12 @@ export class APIService {
     );
   }
 
+  public postReportRevoke(reportID: string, reason: string): Observable<any> {
+    return this.http
+      .post(this.rcReports(reportID, 'revoke'), { reason }, this.defopts())
+      .pipe(catchError(this.errorCatcher));
+  }
+
   public getGuildSettings(guildID: string): Observable<GuildSettings> {
     return this.http
       .get<GuildSettings>(this.rcGuildSettings(guildID), this.defopts())

diff --git a/web/src/app/components/report/report.component.html b/web/src/app/components/report/report.component.html
@@ -45,7 +45,11 @@ <h4 class="mt-4">Attachment</h4>
             </ng-template>
         </div>
 
-        <p class="footer">Case-ID: {{ report.id }}&nbsp;&nbsp;|&nbsp;&nbsp;Created {{ dateFormat(report.created, 'yyyy.mm.dd - HH:MM:ss Z') }}</p>
+        <p class="footer">
+            Case-ID: {{ report.id }}&nbsp;&nbsp;|&nbsp;&nbsp;
+            Created {{ dateFormat(report.created, 'yyyy.mm.dd - HH:MM:ss Z') }}&nbsp;&nbsp;|&nbsp;&nbsp;
+            <a (click)="revoke.emit()">Revoke Report</a>
+        </p>
     </div>
 
 </div>
diff --git a/web/src/app/components/report/report.component.sass b/web/src/app/components/report/report.component.sass
@@ -9,6 +9,10 @@ p
 h4
     margin-bottom: 10px !important
 
+a
+    color: $c-blurple !important
+    text-decoration: underline !important
+
 .report-container
     background-color: $c-nqblack
     border-radius: $border-rad

diff --git a/web/src/app/components/report/report.component.ts b/web/src/app/components/report/report.component.ts
@@ -1,6 +1,6 @@
 /** @format */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { Report, Member } from 'src/app/api/api.models';
 import { APIService } from 'src/app/api/api.service';
 import dateFormat from 'dateformat';
@@ -17,6 +17,8 @@ export class ReportComponent implements OnInit {
   @Input() public victim: Member;
   @Input() public executor: Member;
 
+  @Output() public revoke = new EventEmitter<any>();
+
   public dateFormat = dateFormat;
 
   constructor(private api: APIService) {}

diff --git a/web/src/app/routes/guild/guild.component.html b/web/src/app/routes/guild/guild.component.html
@@ -1,4 +1,18 @@
 <div>
+    <ng-template #modalRevoke let-modal>
+        <div class="modal-header">
+            <h4 class="modal-title">REVOKE</h4>
+        </div>
+        <div class="modal-body">            
+            <h5 class="mb-2">REASON</h5>
+            <textarea #revReason rows="5" class="rep-reason" placeholder="Report description should be as detailed as possible."></textarea>
+        </div>
+        <div class="modal-footer">
+            <button (click)="modal.close(revReason.value)" class="bg-orange">REVOKE</button>
+            <button (click)="modal.close()" ngbAutofocus>CANCEL</button>
+        </div>
+    </ng-template>
+
     <app-spinner *ngIf="!guild" id="spinner-load-guild" [started]="true"></app-spinner>
 
     <div *ngIf="guild" class="guild-container">
@@ -104,7 +118,11 @@ <h4 class="mx-3">MOD LOG</h4>
         </div>
         <div *ngIf="modlogToggle">
             <i *ngIf="!reports || !reports.length">Mod log is empty.</i>
-            <app-report *ngFor="let rep of reports" [report]="rep"></app-report>
+            <app-report 
+                *ngFor="let rep of reports" 
+                [report]="rep"
+                (revoke)="revokeReport(rep)"
+            ></app-report>
             <div class="d-flex">
                 <app-spinner-button 
                     *ngIf="reportsTotalCount > MAX_SHOWN_MODLOG && 

diff --git a/web/src/app/routes/guild/guild.component.sass b/web/src/app/routes/guild/guild.component.sass
@@ -201,6 +201,13 @@
             margin-right: 0
 
 
+.rep-reason
+    width: 100%
+    height: 100px
+    background-color: rgba(0, 0, 0, .4)
+    color: white
+
+
 @media only screen and (max-width: 700px)
     #user-info
         height: fit-content

diff --git a/web/src/app/routes/guild/guild.component.ts b/web/src/app/routes/guild/guild.component.ts
@@ -1,6 +1,6 @@
 /** @format */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
 import { APIService } from 'src/app/api/api.service';
 import { SpinnerService } from 'src/app/components/spinner/spinner.service';
 import { ActivatedRoute } from '@angular/router';
@@ -18,6 +18,7 @@ import {
 import { ToastService } from 'src/app/components/toast/toast.service';
 import { toHexClr, topRole } from '../../utils/utils';
 import dateFormat from 'dateformat';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 interface Perms {
   id: string;
@@ -31,6 +32,8 @@ interface Perms {
   styleUrls: ['./guild.component.sass'],
 })
 export class GuildComponent {
+  @ViewChild('modalRevoke') private modalRevoke: TemplateRef<any>;
+
   public readonly MAX_SHOWN_USERS = 200;
   public readonly MAX_SHOWN_MODLOG = 20;
   public readonly MAX_LOAD_USERS = 1000;
@@ -68,6 +71,7 @@ export class GuildComponent {
   public dateFormat = dateFormat;
 
   constructor(
+    public modal: NgbModal,
     private api: APIService,
     private route: ActivatedRoute,
     private toasts: ToastService
@@ -351,4 +355,29 @@ export class GuildComponent {
 
     return v.name.toLowerCase().includes(inpt.toLowerCase());
   }
+
+  public revokeReport(report: Report) {
+    this.modal
+      .open(this.modalRevoke, { windowClass: 'dark-modal' })
+      .result.then((res) => {
+        if (res) {
+          this.api.postReportRevoke(report.id, res).subscribe((revRes) => {
+            if (revRes) {
+              const i = this.reports.indexOf(report);
+              if (i >= 0) {
+                this.reports.splice(i, 1);
+              }
+              this.toasts.push(
+                'Report revoked.',
+                'Revoked',
+                'success',
+                5000,
+                true
+              );
+            }
+          });
+        }
+      })
+      .catch(() => {});
+  }
 }
diff --git a/web/src/app/routes/member/member.component.html b/web/src/app/routes/member/member.component.html
@@ -59,6 +59,20 @@ <h5 class="mt-3 mb-2">ATTACHMENT</h5>
         </div>
     </ng-template>
 
+    <ng-template #modalRevoke let-modal>
+        <div class="modal-header">
+            <h4 class="modal-title">REVOKE</h4>
+        </div>
+        <div class="modal-body">            
+            <h5 class="mb-2">REASON</h5>
+            <textarea rows="5" class="rep-reason" [(ngModel)]="repModalReason" placeholder="Report description should be as detailed as possible."></textarea>
+        </div>
+        <div class="modal-footer">
+            <button (click)="modal.close(true)" class="bg-orange">REVOKE</button>
+            <button (click)="modal.close()" ngbAutofocus>CANCEL</button>
+        </div>
+    </ng-template>
+
     <!-- ------------------------------------------------------- -->
 
     <app-spinner *ngIf="!member && !guild" id="spinner-load-member" [started]="true"></app-spinner>
@@ -157,7 +171,12 @@ <h4>Reports</h4>
         <app-spinner *ngIf="!reports" id="spinner-load-reports" [started]="true"></app-spinner>
         <div>
             <i *ngIf="reports?.length === 0">{{ member.user.username }} has a white vest! 👌</i>
-            <app-report *ngFor="let rep of reports" [report]="rep" [victim]="member"></app-report>
+            <app-report 
+                *ngFor="let rep of reports" 
+                [report]="rep" 
+                [victim]="member"
+                (revoke)="revokeReport(rep)"
+            ></app-report>
         </div>
 
     </div>

diff --git a/web/src/app/routes/member/member.component.ts b/web/src/app/routes/member/member.component.ts
@@ -36,6 +36,7 @@ export class MemberRouteComponent {
   @ViewChild('modalReport') private modalReport: TemplateRef<any>;
   @ViewChild('modalKick') private modalKick: TemplateRef<any>;
   @ViewChild('modalBan') private modalBan: TemplateRef<any>;
+  @ViewChild('modalRevoke') private modalRevoke: TemplateRef<any>;
 
   public repModalType = 3;
   public repModalReason = '';
@@ -189,6 +190,33 @@ export class MemberRouteComponent {
       .catch(() => this.clearReportModalModels());
   }
 
+  public revokeReport(report: Report) {
+    this.openModal(this.modalRevoke)
+      .then((res) => {
+        if (res && this.checkReason()) {
+          this.api
+            .postReportRevoke(report.id, this.repModalReason)
+            .subscribe((revRes) => {
+              if (revRes) {
+                const i = this.reports.indexOf(report);
+                if (i >= 0) {
+                  this.reports.splice(i, 1);
+                }
+                this.toasts.push(
+                  'Report revoked.',
+                  'Revoked',
+                  'success',
+                  5000,
+                  true
+                );
+              }
+            });
+        }
+        this.clearReportModalModels();
+      })
+      .catch(() => this.clearReportModalModels());
+  }
+
   private openModal(modal: TemplateRef<any>): Promise<any> {
     return this.modal.open(modal, { windowClass: 'dark-modal' }).result;
   }