Add post reporting function

src/app/components/feed/postlist/postlist.component.html

@@ -4,13 +4,20 @@
       <img class="profile-picture" [src]="post.author.profilePicture" />
     </div>
     <div id="button-box">
-      <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="post.deletable">
+      <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="loggedIn">
         <mat-icon>more_vert</mat-icon>
       </button>
       <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="deletePost(post)">
+        <button *ngIf="post.deletable" mat-menu-item (click)="deletePost(post)">
           <span>delete post</span>
         </button>
+        <button mat-menu-item [matMenuTriggerFor]="reportMenu">report</button>
+      </mat-menu>
+      <mat-menu #reportMenu="matMenu">
+        <button *ngFor="let reason of reportReasons" mat-menu-item [matTooltip]="reason.description"
+          matTooltipShowDelay="200" (click)="reportPost(reason, post)">
+          {{reason.name}}
+        </button>
       </mat-menu>
     </div>
     <mat-card-title>
@@ -22,7 +29,8 @@
     </mat-card-subtitle>
   </mat-card-header>
   <mat-card-content>
-    <mat-spinner *ngIf="post.mediaLoading && post.mediaType === 'IMAGE'" style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
+    <mat-spinner *ngIf="post.mediaLoading && post.mediaType === 'IMAGE'" style="margin:0 auto; margin-top: 2em;"
+      diameter="50"></mat-spinner>
     <div class="postMedia">
       <div [hidden]="post.mediaLoading">
         <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl" (load)="onLoad(this.post)" alt="post image" />
@@ -41,13 +49,17 @@
     </div>
     <div class="postVoteButtons">
       <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
-        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon>
-        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
+        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">
+          thumb_up</mat-icon>
+        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up
+        </mat-icon>
       </button>
       <div class="voteCount">{{post.upvotes}}</div>
       <button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
-        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon>
-        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
+        <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">
+          thumb_down</mat-icon>
+        <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down
+        </mat-icon>
       </button>
       <div class="voteCount">{{post.downvotes}}</div>
     </div>

src/app/components/feed/postlist/postlist.component.ts

@@ -2,6 +2,9 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import { Post } from 'src/app/models/post';
 import { FeedService } from 'src/app/services/feed/feed.service';
 import { Router } from '@angular/router';
+import { DatasharingService } from 'src/app/services/datasharing.service';
+import { ActivityService } from 'src/app/services/activity/activity.service';
+import { ReportReason } from 'src/app/models/reportReason';
 
 @Component({
   selector: 'feed-postlist',
@@ -13,11 +16,23 @@ export class PostlistComponent implements OnInit {
   @Input() childPostList: Post[];
   @Output() voteEvent = new EventEmitter<boolean>();
   selectedPost: Post;
+  loggedIn = false;
+  reportReasons: ReportReason[] = new Array();
 
-  constructor(private feedService: FeedService, private router: Router) {
+  constructor(private feedService: FeedService,
+    private data: DatasharingService,
+    private router: Router,
+    private activityService: ActivityService) {
   }
 
   ngOnInit() {
+    this.data.currentUser.subscribe(user => {
+      this.loggedIn = user.loggedIn;
+    });
+    this.activityService.getReportReasons();
+    this.activityService.reportReasonList.subscribe(response => {
+      this.reportReasons = response;
+    });
   }
 
   voteUp(pPost: Post) {
@@ -49,6 +64,10 @@ export class PostlistComponent implements OnInit {
     });
   }
 
+  reportPost(reason: ReportReason, post: Post) {
+    this.feedService.reportPost(reason.id, post.id).subscribe();
+  }
+
   onLoad(post: Post) {
     post.mediaLoading = false;
   }

src/app/components/group/group.component.html

@@ -134,7 +134,7 @@
                 </div>
                 <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
                 <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
-                <mat-card-subtitle *ngIf="user.isGroupAdmin" class="pointer" (click)="showUserProfile(user)">[admin]
+                <mat-card-subtitle hidden class="pointer" (click)="showUserProfile(user)">[admin]
                 </mat-card-subtitle>
                 <div id="icon-box" *ngIf="isCreator">
                   <button mat-icon-button [matMenuTriggerFor]="menu">

src/app/models/reportReason.ts

@@ -0,0 +1,11 @@
+export class ReportReason {
+  id: number;
+  name: string;
+  description: string;
+
+  constructor(id: number, name: string, describtion: string) {
+    this.id = id;
+    this.name = name;
+    this.description = describtion;
+  }
+}

src/app/services/activity/activity.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { Activity, Activitylist } from 'src/app/models/activity';
 import { Level, LevelList } from 'src/app/models/levellist';
+import { ReportReason } from 'src/app/models/reportReason';
 import { environment } from 'src/environments/environment';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { BaseService } from '../base.service';
@@ -14,6 +15,7 @@ export class ActivityService extends BaseService {
 
   public activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
   public levelList = new BehaviorSubject<LevelList>(new LevelList());
+  public reportReasonList = new BehaviorSubject<ReportReason[]>(new Array());
 
   constructor(http: HttpClient) {
     super(http);
@@ -37,6 +39,15 @@ export class ActivityService extends BaseService {
     return body;
   }
 
+  private static buildGetReportReasonsBody(): any {
+    const body = {
+      query: `query{getReportReasons {
+        id name description
+      }}`, variables: {}
+    };
+    return body;
+  }
+
   changeUserInfo(pActivitylist: Activitylist) {
     this.activitylist.next(pActivitylist);
   }
@@ -63,6 +74,17 @@ export class ActivityService extends BaseService {
     }
   }
 
+  public getReportReasons() {
+    if (this.reportReasonList.getValue().length < 1) {
+      this.http.post(environment.graphQLUrl, ActivityService.buildGetReportReasonsBody(), { headers: this.headers })
+        .pipe(this.retryRated())
+        .subscribe(result => {
+          // push onto subject
+          this.reportReasonList.next(this.renderReportReasons(result));
+        });
+    }
+  }
+
   public renderActivity(response: any): Activitylist {
     const activitylist = new Activitylist();
     for (const activity of response.data.getActivities) {
@@ -86,5 +108,16 @@ export class ActivityService extends BaseService {
     }
     return levelList;
   }
+
+  public renderReportReasons(response: any): ReportReason[] {
+    const reportReasons: ReportReason[] = new Array();
+    for (const reason of response.data.getReportReasons) {
+      reportReasons.push(new ReportReason(
+        reason.id,
+        reason.name,
+        reason.description));
+    }
+    return reportReasons;
+  }
 }
 

src/app/services/feed/feed.service.ts

@@ -71,6 +71,12 @@ const downvotePostGqlQuery = `mutation($postId: ID!) {
   }
 }`;
 
+const reportPostGqlQuery = `mutation($reasonId: ID!, $postId: ID!) {
+  reportPost(postId: $postId, reasonId: $reasonId) {
+    id
+  }
+}`;
+
 const getPostsGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){
   getPosts (first: $first, offset: $offset, sort: $sort) {
     id,
@@ -300,6 +306,22 @@ export class FeedService extends BaseService {
     return this.postGraphql(body);
   }
 
+  /**
+   * reports a post
+   * @param postId
+   * @param reasonId
+   */
+  public reportPost(reasonId: number, postId: number): any {
+    const body = {
+      query: reportPostGqlQuery, variables: {
+        postId,
+        reasonId
+      }
+    };
+
+    return this.postGraphql(body);
+  }
+
   /**
    * Deletes a post
    * @param pPostID

src/app/services/group/group.service.ts

@@ -95,6 +95,9 @@ export class GroupService extends BaseService {
         groupId
       }
     };
+    const group = this.group.getValue();
+    group.admins = [];
+    this.group.next(group);
     return this.postGraphql(body, null, 0)
       .pipe(tap(response => {
         const group = this.group.getValue();