bstlboard-front/src/app/ui/comment/comment.ui.ts

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { AuthService } from '../../services/auth.service';
import { VoteService } from '../../services/vote.service';
import { FlagService } from '../../services/flag.service';
import { CommentService } from '../../services/comment.service';
import { ModerationService } from '../../services/moderarion.service';
import { ConfirmDialog } from '../../ui/confirm/confirm.component';
import { UiComments } from '../comments/comments.ui';

@Component({
  selector: 'ui-comment',
  templateUrl: './comment.ui.html',
  styleUrls: ['./comment.ui.scss']
})
export class UiComment implements OnInit {

  settings: any;
  author: boolean = false;
  moderator: boolean = false;
  @Input() comment: any;
  @Input() index: number;
  @Input() change: Function;
  @Input() ignore: string[] = [];
  @Input() subcomments: boolean = false;
  @Input() parentLink: boolean = false;
  @Input() actions: boolean = true;
  @ViewChild('subcomments') comments: UiComments;
  form: FormGroup;
  working: boolean = false;

  constructor(
    private authService: AuthService,
    private commentService: CommentService,
    private voteService: VoteService,
    private flagService: FlagService,
    private formBuilder: FormBuilder,
    private moderationService: ModerationService,
    public dialog: MatDialog) { }

  ngOnInit(): void {
    this.authService.auth.subscribe({
      next: (auth: any) => {
        if (auth && auth.authorities) {
          this.author = auth.username == this.comment.author;
          for (let role of auth.authorities) {
            if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
              this.moderator = true;
            }
          }
        }
      }
    })

    this.form = this.formBuilder.group({
      text: ['', Validators.required],
    });

    this.form.get('text').setValue(this.comment.text);
  }

  voteUp() {
    this.voteService.voteCommentUp(this.comment.id).subscribe({
      next: () => {
        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
          next: (data) => {
            this.comment = data;
          }
        })
      }
    });
  }

  voteDown() {
    this.voteService.voteCommentDown(this.comment.id).subscribe({
      next: () => {
        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
          next: (data) => {
            this.comment = data;
          }
        })
      }
    });
  }

  unvote() {
    this.voteService.unvoteComment(this.comment.id).subscribe({
      next: (

      ) => {
        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
          next: (data) => {
            this.comment = data;
          }
        })
      }
    });
  }

  flag() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmFlag',
        'args': [this.comment.text, this.comment.author]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.flagService.flagComment(this.comment.id).subscribe({
            next: () => {
              this.comment.metadata.flag = false;
              this.comment.metadata.unflag = true;
            }
          });
        }
      }
    });
  }

  unflag() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmUnflag',
        'args': [this.comment.text, this.comment.author]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.flagService.unflagComment(this.comment.id).subscribe({
            next: () => {
              this.comment.metadata.flag = true;
              this.comment.metadata.unflag = false;
            }
          });
        }
      }
    });
  }

  replyCallback(comment): void {
    if (this.subcomments) {
      this.comments.addComment(comment);
    }
    this.comment.metadata.reply = false;
    this.comment.metadata.comments = (this.comment.metadata.comments || 0) + 1;
  }

  canEdit(): boolean {
    const canEdit = this.author && (new Date(this.comment.created).getTime() > new Date().getTime());

    if (this.comment.metadata && this.comment.metadata.edit && !canEdit) {
      this.comment.metadata.edit = false;
    }

    return canEdit;
  }

  edit(): void {
    this.comment.metadata.edit = true;
    this.form.get('text').enable();
  }

  hasError(controlName: string): boolean {
    return this.form.controls[controlName].errors != null;
  }

  update(): void {

    if (this.working) {
      return;
    }

    if (this.canEdit()) {
      this.working = true;
      this.comment.text = this.form.get('text').value;
      this.form.get('text').disable();
      this.commentService.update(this.comment).subscribe({
        next: (data) => {
          this.comment = data;
          this.comment.metadata.edit = false;
          this.working = false;
        },
        error: () => {
          this.working = false;
        }
      })
    }
  }

  deleteComment() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmDelete',
        'args': [this.comment.text, this.comment.author]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.commentService.delete(this.comment.id).subscribe({
            next: () => {
              this.change && this.change()
            }
          })
        }
      }
    });
  }

  modDeleteComment() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.comment.confirmDelete',
        'args': [this.comment.text, this.comment.author]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.moderationService.deleteComment(this.comment.id).subscribe({
            next: () => {
              this.change && this.change()
            }
          })
        }
      }
    });
  }

  modUnflagComment() {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.comment.confirmUnflag',
        'args': [this.comment.text, this.comment.author]
      }
    })

    dialogRef.afterClosed().subscribe({
      next: (result) => {
        if (result) {
          this.moderationService.unflagComment(this.comment.id).subscribe({
            next: () => {
              this.change && this.change();
            }
          })
        }
      }
    });
  }
}