add new functionality

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng  serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

client/src/app/chat/chat.component.css

@@ -52,3 +52,25 @@
     float: right;
     margin-top: 18px;
 }
+
+.mat-cursor{
+cursor: pointer;
+}
+.list-horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
+.chat-reply {
+  padding-top: 20px;
+  width: 80%;
+  background-color: cornflowerblue;
+}
+.chat-reply-content{
+  display: grid;
+  grid-template-columns: 10fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-template-areas:". .";
+}
+

client/src/app/chat/chat.component.html

@@ -4,23 +4,64 @@
 <div class="chat-container">
   <mat-card class="main-card">
     <mat-list class="chat-list">
-      <mat-list-item *ngFor="let message of messages" [ngClass]="[(message.action === undefined && message.from.id === user.id)? 'chat-list-item': '']">
+      <mat-list-item *ngFor="let message of messages;let i=index  "
+                     [ngClass]="[(message.action === undefined && message.from.id === user.id)? 'chat-list-item': '']">
         <img mat-list-avatar *ngIf="message.action === undefined" [src]="message.from.avatar">
         <h4 mat-line *ngIf="message.action === undefined">
           <b>{{message.from.name}}</b>
         </h4>
+        <p mat-line *ngIf="message.reply !== undefined">
+          <b> <i>{{this.getReplyMessage(message.alterId)}}</i> </b>
+          <br>
+        </p>
         <p mat-line *ngIf="message.action === undefined">
           <span> {{message.content}} </span>
         </p>
+
+        <mat-action-list class="list-horizontal">
+
+
+          <mat-icon *ngIf="message.action === undefined && message.from.id === user.id" mat-list-item class="mat-cursor"
+                    (click)="this.onEdit(i,message.id)"
+          >edit
+          </mat-icon>
+
+          <mat-icon mat-list-item *ngIf="message.action === undefined && message.from.id === user.id" class="mat-cursor"
+                    (click)="this.onDelete(message.id)"
+          >delete
+          </mat-icon>
+
+          <mat-icon mat-list-item *ngIf="message.action === undefined && message.from.id !== user.id" class="mat-cursor"
+                    (click)="this.onReply(message.id, message.content)"
+          >reply
+          </mat-icon>
+
+        </mat-action-list>
+
+
         <p mat-line *ngIf="message.action === action.JOINED" class="chat-notification">
           <span translate> <b>{{message.from.name}}</b> joined to the conversation. </span>
         </p>
         <p mat-line *ngIf="message.action === action.RENAME" class="chat-notification">
-          <span translate> <b>{{message.content.previousUsername}}</b> is now <b>{{message.content.username}}</b> </span>
+          <span
+            translate> <b>{{message.content.previousUsername}}</b> is now <b>{{message.content.username}}</b> </span>
         </p>
+
       </mat-list-item>
     </mat-list>
+
+
+
     <div class="chat-footer-container">
+      <mat-card *ngIf="replyId" class="chat-reply">
+        <mat-card-content  class="chat-reply-content">
+         <p> {{this.replyContent}}</p>
+          <mat-icon  class="mat-cursor"
+                    (click)="this.replyId=0"
+          >close
+          </mat-icon>
+        </mat-card-content>
+      </mat-card>
       <mat-icon>message</mat-icon>
       <mat-form-field class="chat-input">
         <input matInput
@@ -36,8 +77,10 @@ <h4 mat-line *ngIf="message.action === undefined">
       <mat-icon>language</mat-icon>
     </button>
     <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="switchLanguage('en')"><img alt="flag" src="../../../assets/flags/en.png"> English</button>
-      <button mat-menu-item (click)="switchLanguage('pt')"><img alt="flag" src="../../../assets/flags/pt.png"> Português</button>
+      <button mat-menu-item (click)="switchLanguage('en')"><img alt="flag" src="../../../assets/flags/en.png"> English
+      </button>
+      <button mat-menu-item (click)="switchLanguage('pt')"><img alt="flag" src="../../../assets/flags/pt.png"> Português
+      </button>
     </mat-menu>
   </mat-card>
 </div>

client/src/app/chat/chat.component.ts

@@ -1,19 +1,19 @@
-import { Component, OnInit, ViewChildren, ViewChild, AfterViewInit, QueryList, ElementRef } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatList, MatListItem } from '@angular/material/list';
+import {AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatList, MatListItem} from '@angular/material/list';
 
-import { Action } from './shared/model/action';
-import { Event } from './shared/model/event';
-import { Message } from './shared/model/message';
-import { User } from './shared/model/user';
-import { SocketService } from './shared/services/socket.service';
-import { DialogUserComponent } from './dialog-user/dialog-user.component';
-import { DialogUserType } from './dialog-user/dialog-user-type';
-import { TranslateService } from '@ngx-translate/core';
-import { StoreUserService } from './shared/services/store-user.service';
+import {Action} from './shared/model/action';
+import {Event} from './shared/model/event';
+import {Message} from './shared/model/message';
+import {User} from './shared/model/user';
+import {SocketService} from './shared/services/socket.service';
+import {DialogUserComponent} from './dialog-user/dialog-user.component';
+import {DialogUserType} from './dialog-user/dialog-user-type';
+import {TranslateService} from '@ngx-translate/core';
+import {StoreUserService} from './shared/services/store-user.service';
 
 
-const AVATAR_URL = 'https://api.adorable.io/avatars/285';
+const AVATAR_URL = 'https://ui-avatars.com/api/?name=';
 
 @Component({
   selector: 'app-chat',
@@ -23,6 +23,9 @@ const AVATAR_URL = 'https://api.adorable.io/avatars/285';
 export class ChatComponent implements OnInit, AfterViewInit {
   action = Action;
   user: User;
+  alterId: number;
+  replyId: number;
+  replyContent: string;
   messages: Message[] = [];
   messageContent: string;
   ioConnection: any;
@@ -38,15 +41,17 @@ export class ChatComponent implements OnInit, AfterViewInit {
   };
 
   // getting a reference to the overall list, which is the parent container of the list items
-  @ViewChild(MatList, { read: ElementRef, static: true }) matList: ElementRef;
+  @ViewChild(MatList, {read: ElementRef, static: true}) matList: ElementRef;
 
   // getting a reference to the items/messages within the list
-  @ViewChildren(MatListItem, { read: ElementRef }) matListItems: QueryList<MatListItem>;
+  @ViewChildren(MatListItem, {read: ElementRef}) matListItems: QueryList<MatListItem>;
 
   constructor(private socketService: SocketService,
-    private storedUser: StoreUserService,
-    public dialog: MatDialog, private translate: TranslateService) {
+              private storedUser: StoreUserService,
+              public dialog: MatDialog, private translate: TranslateService) {
     translate.setDefaultLang('en');
+    this.alterId = 0;
+    this.replyId = 0;
   }
 
   ngOnInit(): void {
@@ -75,9 +80,10 @@ export class ChatComponent implements OnInit, AfterViewInit {
 
   private initModel(): void {
     const randomId = this.getRandomId();
+
     this.user = {
       id: randomId,
-      avatar: `${AVATAR_URL}/${randomId}.png`
+      avatar: AVATAR_URL + randomId
     };
   }
 
@@ -86,7 +92,20 @@ export class ChatComponent implements OnInit, AfterViewInit {
 
     this.ioConnection = this.socketService.onMessage()
       .subscribe((message: Message) => {
-        this.messages.push(message);
+        if (message?.action === Action.DELETE) {
+          const index = this.messages.findIndex(item => item.id === message.alterId);
+          this.messages.splice(index, 1);
+        } else if (message?.action === Action.EDIT) {
+          // tslint:disable-next-line:prefer-for-of
+          for (let i = 0; i < this.messages.length; i++) {
+            if (this.messages[i].id === message.alterId) {
+              this.messages[i].content = message.alterContent;
+            }
+          }
+        } else {
+          this.messages.push(message);
+        }
+
       });
 
 
@@ -141,11 +160,31 @@ export class ChatComponent implements OnInit, AfterViewInit {
     if (!message) {
       return;
     }
-
-    this.socketService.send({
-      from: this.user,
-      content: message
-    });
+    if (this.alterId) {
+      this.socketService.send({
+        id: this.user.id + Date.now(),
+        from: this.user,
+        action: Action.EDIT,
+        alterId: this.alterId,
+        alterContent: message
+      });
+      this.alterId = 0;
+    } else if (this.replyId) {
+      this.socketService.send({
+        id: +(this.user.id.toString() + Date.now().toString()),
+        from: this.user,
+        alterId: this.replyId,
+        content: message,
+        reply: true
+      });
+      this.replyId = 0;
+    } else {
+      this.socketService.send({
+        id: +(this.user.id.toString() + Date.now().toString()),
+        from: this.user,
+        content: message,
+      });
+    }
     this.messageContent = null;
   }
 
@@ -174,4 +213,35 @@ export class ChatComponent implements OnInit, AfterViewInit {
     this.translate.use(language);
   }
 
+
+  onEdit(index: number, id: number) {
+    this.messageContent = this.messages[index].content;
+    this.alterId = id;
+  }
+
+  onDelete(id: number) {
+
+    const message: Message = {
+      from: this.user,
+      action: Action.DELETE,
+      alterId: id
+    };
+    this.socketService.send(message);
+  }
+
+  onReply(id: number, content: string) {
+    this.replyId = id;
+    this.replyContent = content;
+  }
+
+  getReplyMessage(id: number): string {
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < this.messages.length; i++) {
+      if (this.messages[i].id === id) {
+        return this.messages[i].content;
+      }
+
+    }
+    return '';
+  }
 }

client/src/app/chat/shared/model/action.ts

@@ -1,5 +1,7 @@
 export enum Action {
     JOINED,
     LEFT,
-    RENAME
+    RENAME,
+    DELETE,
+    EDIT,
 }

client/src/app/chat/shared/model/message.ts

@@ -2,7 +2,11 @@ import {User} from './user';
 import {Action} from './action';
 
 export interface Message {
-    from?: User;
-    content?: any;
-    action?: Action;
+  id?: number;
+  from?: User;
+  alterId?: number;
+  alterContent?: string;
+  reply?: boolean;
+  content?: any;
+  action?: Action;
 }

client/src/app/chat/shared/services/socket.service.ts

@@ -6,7 +6,7 @@ import { Event } from '../model/event';
 
 import * as socketIo from 'socket.io-client';
 
-const SERVER_URL = 'http://localhost:8080';
+const SERVER_URL = 'http://localhost:8000';
 
 @Injectable()
 export class SocketService {