Add reports

src/app/components/core/header/header.component.html

@@ -117,6 +117,11 @@
                         <mat-icon>build</mat-icon>
                         <span>Preferences</span>
                     </button>
+                    <mat-divider *ngIf="isAdministrator() || isModerator()"></mat-divider>
+                    <button *ngIf="isAdministrator() || isModerator()" mat-menu-item [routerLink]="['/reports']" aria-label="Reports">
+                        <mat-icon>feedback</mat-icon>
+                        <span>Reports</span>
+                    </button>
                     <button *ngIf="isAdministrator()" mat-menu-item [routerLink]="['/settings']" aria-label="Settings">
                         <mat-icon>settings</mat-icon>
                         <span>Settings</span>

src/app/components/core/header/header.component.ts

@@ -60,6 +60,10 @@ export class HeaderComponent extends Responsive {
         return this.authorizationService.hasRole(Role.Administrator);
     }
 
+    isModerator(): boolean {
+        return this.authorizationService.hasRole(Role.Moderator);
+    }
+
     isRegistrationByInvitationsOpened(): boolean {
         return this.instanceService.instance?.registrationOpened === false && this.instanceService.instance?.registrationByInvitationsOpened === true;
     }

src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, In
 import { MatDialog } from '@angular/material/dialog';
 import { fadeInAnimation } from 'src/app/animations/fade-in.animation';
 import { MuteAccountDialog } from 'src/app/dialogs/mute-account-dialog/mute-account.dialog';
+import { ReportData } from 'src/app/dialogs/report-dialog/report-data';
 import { ReportDialog } from 'src/app/dialogs/report-dialog/report.dialog';
 import { Relationship } from 'src/app/models/relationship';
 import { User } from 'src/app/models/user';
@@ -48,10 +49,10 @@ export class FollowButtonsSectionComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.recalculateRelationship();
-
         this.signedInUser = this.authorizationService.getUser();
         this.isProfileOwner = this.signedInUser?.id === this.user?.id;
+
+        this.recalculateRelationship();
     }
 
     onOriginalProfile(): void {
@@ -103,7 +104,7 @@ export class FollowButtonsSectionComponent implements OnInit {
     async onReportDialog(): Promise<void> {
         const dialogRef = this.dialog.open(ReportDialog, {
             width: '500px',
-            data: this.user
+            data: new ReportData(this.user, undefined)
         });
 
         dialogRef.afterClosed().subscribe(async (result) => {
@@ -268,12 +269,8 @@ export class FollowButtonsSectionComponent implements OnInit {
             return false;
         }
 
-        if ((this.relationship?.requestedBy ?? false) === false) {
-            return false;
-        }
-
         const isMuted = this.relationship?.mutedStatuses ||  this.relationship?.mutedReblogs || this.relationship?.mutedNotifications;
-        return isMuted === false ?? true;
+        return isMuted === null || isMuted === false;
     }
 
     private shouldShowUnnuteButton(): boolean {
@@ -285,12 +282,8 @@ export class FollowButtonsSectionComponent implements OnInit {
             return false;
         }
 
-        if ((this.relationship?.requestedBy ?? false) === false) {
-            return false;
-        }
-
         const isMuted = this.relationship?.mutedStatuses ||  this.relationship?.mutedReblogs || this.relationship?.mutedNotifications;
-        return isMuted === true ?? false;
+        return isMuted === true;
     }
 
     private shouldShowReportButton(): boolean {
@@ -310,8 +303,8 @@ export class FollowButtonsSectionComponent implements OnInit {
         this.showUnfollowButton = this.shouldShowUnfollowButton();
         this.showApproveFollowButton = this.shouldShowApproveFollowButton();
         this.showOpenOriginalProfileButton = this.shouldShowOpenOriginalProfileButton();
-        this.showUnmuteButton = this.shouldShowMuteButton();
-        this.showMuteButton = this.shouldShowUnnuteButton();
+        this.showMuteButton = this.shouldShowMuteButton();
+        this.showUnmuteButton = this.shouldShowUnnuteButton();
         this.showReportButton = this.shouldShowReportButton();
     }
 }

src/app/dialogs/dialogs.module.ts

@@ -12,14 +12,16 @@ import { ChangePasswordDialog } from './change-password-dialog/change-password.d
 import { ChangeEmailDialog } from './change-email-dialog/change-email.dialog';
 import { MuteAccountDialog } from './mute-account-dialog/mute-account.dialog';
 import { ReportDialog } from './report-dialog/report.dialog';
+import { ReportDetailsDialog } from './report-details-dialog/report-details.dialog';
 
 @NgModule({
     declarations: [
         ChangePasswordDialog,
         ChangeEmailDialog,
         DeleteAccountDialog,
         MuteAccountDialog,
-        ReportDialog
+        ReportDialog,
+        ReportDetailsDialog
     ],
     imports: [
         BrowserModule,
@@ -36,7 +38,8 @@ import { ReportDialog } from './report-dialog/report.dialog';
         ChangeEmailDialog,
         DeleteAccountDialog,
         MuteAccountDialog,
-        ReportDialog
+        ReportDialog,
+        ReportDetailsDialog
     ]
 })
 export class DialogsModule { }

src/app/dialogs/report-details-dialog/report-details.dialog.html

@@ -0,0 +1,33 @@
+<div mat-dialog-title>Report</div>
+<div mat-dialog-content>
+
+    <div class="flex-col gap-0 margin-top-5">
+        <mat-form-field appearance="outline" class="width-100 padding-top-10">
+            <mat-label>Comment</mat-label>
+            <textarea matInput name="comment" cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="4"
+                cdkAutosizeMaxRows="10" placeholder="Comment" #commentModel="ngModel" [(ngModel)]="comment"
+                aria-label="Comment" disabled></textarea>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+            <mat-label>Category</mat-label>
+            <mat-select [(value)]="category" disabled>
+                <mat-option *ngFor="let item of categories" [value]="item">{{ item }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+            <mat-label>Server rules</mat-label>
+            <mat-select [(value)]="ruleIds" multiple disabled>
+                <mat-option *ngFor="let rule of rules" [value]="rule.id">{{ rule.text }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <mat-checkbox *ngIf="data?.user?.isLocal === false" name="forward" color="primary" [disableRipple]="true" [(ngModel)]="forward" disabled>
+            Should the report be forwarded to the remote admin?
+        </mat-checkbox>
+    </div>
+</div>
+<div mat-dialog-actions>
+    <button mat-button type="button" (click)="onNoClick()">Close</button>
+</div>

src/app/dialogs/report-details-dialog/report-details.dialog.ts

@@ -0,0 +1,48 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Rule } from 'src/app/models/rule';
+import { Report } from 'src/app/models/report';
+import { InstanceService } from 'src/app/services/http/instance.service';
+
+@Component({
+    selector: 'report-details',
+    templateUrl: 'report-details.dialog.html'
+})
+export class ReportDetailsDialog implements OnInit {
+    comment = '';
+    forward = false;
+    category = '';
+    ruleIds: number[] = [];
+
+    categories = [
+        "Abusive",
+        "Copyright",
+        "Impersonation",
+        "Scam",
+        "Sensitive",
+        "Spam",
+        "Terrorism",
+        "Underage",
+        "Violence"
+    ];
+
+    rules: Rule[] = []
+
+    constructor(
+        private instanceService: InstanceService,
+        public dialogRef: MatDialogRef<ReportDetailsDialog>,
+        @Inject(MAT_DIALOG_DATA) public data?: Report) {
+    }
+
+    ngOnInit(): void {
+        this.rules = this.instanceService.instance?.rules ?? [];
+        this.comment = this.data?.comment ?? '';
+        this.forward = this.data?.forward ?? false;
+        this.category = this.data?.category ?? '';
+        this.ruleIds = this.data?.ruleIds?.map(x => +x) ?? [];
+    }
+
+    onNoClick(): void {
+        this.dialogRef.close();
+    }
+}

src/app/dialogs/report-dialog/report-data.ts

@@ -0,0 +1,12 @@
+import { Status } from "src/app/models/status";
+import { User } from "src/app/models/user";
+
+export class ReportData {
+    public user?: User;
+    public status?: Status;
+
+    constructor(user?: User, status?: Status) {
+        this.user = user;
+        this.status = status;
+    }
+}

src/app/dialogs/report-dialog/report.dialog.html

@@ -20,12 +20,12 @@
 
             <mat-form-field appearance="outline">
                 <mat-label>Server rules</mat-label>
-                <mat-select multiple>
+                <mat-select multiple [(value)]="ruleIds">
                     <mat-option *ngFor="let rule of rules" [value]="rule.id">{{ rule.text }}</mat-option>
                 </mat-select>
             </mat-form-field>
 
-            <mat-checkbox *ngIf="data?.isLocal === false" name="forward" color="primary" [disableRipple]="true" [(ngModel)]="forward">
+            <mat-checkbox *ngIf="data?.user?.isLocal === false" name="forward" color="primary" [disableRipple]="true" [(ngModel)]="forward">
                 Should the report be forwarded to the remote admin?
             </mat-checkbox>
         </div>

src/app/dialogs/report-dialog/report.dialog.ts

@@ -2,8 +2,8 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ReportRequest } from 'src/app/models/report-request';
 import { Rule } from 'src/app/models/rule';
-import { User } from 'src/app/models/user';
 import { InstanceService } from 'src/app/services/http/instance.service';
+import { ReportData } from './report-data';
 
 @Component({
     selector: 'report',
@@ -32,7 +32,7 @@ export class ReportDialog implements OnInit {
     constructor(
         private instanceService: InstanceService,
         public dialogRef: MatDialogRef<ReportDialog>,
-        @Inject(MAT_DIALOG_DATA) public data?: User) {
+        @Inject(MAT_DIALOG_DATA) public data?: ReportData) {
     }
 
     ngOnInit(): void {
@@ -45,7 +45,8 @@ export class ReportDialog implements OnInit {
 
     async onSubmit(): Promise<void> {
         const reportRequest = new ReportRequest();
-        reportRequest.reportedUserId = this.data?.id;
+        reportRequest.reportedUserId = this.data?.user?.id;
+        reportRequest.statusId = this.data?.status?.id;
         reportRequest.category = this.category;
         reportRequest.comment = this.comment;
         reportRequest.forward = this.forward;

src/app/models/event-type.ts

@@ -103,5 +103,7 @@ export enum EventType {
     InvitationDelete = 'invitationDelete',
 
     ReportsCreate = 'reportsCreate',
-    ReportsList = 'reportsList'
+    ReportsList = 'reportsList',
+    ReportsClose = 'reportsClose',
+    ReportsRestore = 'reportsRestore'
 }

src/app/models/paginable-result.ts

@@ -0,0 +1,6 @@
+export class PaginableResult<T>  {
+    public page = 0;
+    public size = 0;
+    public total = 0;
+    public data: T[] = [];
+}

src/app/models/report.ts

@@ -0,0 +1,15 @@
+import { Status } from "./status";
+import { User } from "./user";
+
+export class Report {
+    public id: string = '';
+    public user?: User;
+    public reportedUser?: User;
+    public status?: Status;
+    public comment?: string;
+    public forward = false;
+    public category?: string;
+    public ruleIds?: number[];
+    public considerationDate?: Date;
+    public considerationUser?: User;
+}

src/app/pages/invitations/invitations.page.html

@@ -40,7 +40,7 @@ <h1>
                 <ng-container matColumnDef="actions">
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let element" class="text-right">
-                        <button *ngIf="!element.invited" type="button" mat-raised-button color="accent" aria-label="Generate invitation" (click)="delete(element.id)">Delete</button>
+                        <button *ngIf="!element.invited" type="button" mat-raised-button color="accent" aria-label="Delete invitation" (click)="delete(element.id)">Delete</button>
                     </td>
                 </ng-container>
 

src/app/pages/pages-routing.module.ts

@@ -27,6 +27,7 @@ import { TrendingPage } from './trending/trending.page';
 import { EditorsPage } from './editors/editors.page';
 import { CategoriesPage } from './categories/categories.page';
 import { PreferencesPage } from './preferences/preferences.page';
+import { ReportsPage } from './reports/reports.page';
 
 const routes: Routes = [
     { path: 'login', component: LoginPage, canActivate: [ loggedOutGuard ] },
@@ -50,6 +51,7 @@ const routes: Routes = [
     { path: 'editors', component: EditorsPage, canActivate: [ authorizationGuard ] },
     { path: 'categories', component: CategoriesPage, canActivate: [ authorizationGuard ] },
     { path: 'preferences', component: PreferencesPage, canActivate: [ authorizationGuard ] },
+    { path: 'reports', component: ReportsPage, canActivate: [ authorizationGuard ] },
     { path: ':userName', component: ProfilePage, children: [
         { path: 'following', component: ProfilePage },
         { path: 'followers', component: ProfilePage }

src/app/pages/pages.module.ts

@@ -28,6 +28,7 @@ import { TrendingPage } from './trending/trending.page';
 import { EditorsPage } from './editors/editors.page';
 import { CategoriesPage } from './categories/categories.page';
 import { PreferencesPage } from './preferences/preferences.page';
+import { ReportsPage } from './reports/reports.page';
 
 @NgModule({
     imports: [
@@ -59,7 +60,8 @@ import { PreferencesPage } from './preferences/preferences.page';
         TrendingPage,
         EditorsPage,
         CategoriesPage,
-        PreferencesPage
+        PreferencesPage,
+        ReportsPage
     ],
     exports: [
         ComponentsModule,
@@ -86,7 +88,8 @@ import { PreferencesPage } from './preferences/preferences.page';
         TrendingPage,
         EditorsPage,
         CategoriesPage,
-        PreferencesPage
+        PreferencesPage,
+        ReportsPage
     ]
 })
 export class PagesModule { }