Merge pull request #71 from Arquisoft/Issue#41

Issue#41

src/app/message/message.component.css

@@ -80,4 +80,25 @@
 
 .isOwnMessageContent{
     background-color: #E3F2FD;
+}
+
+.deleteBtn {
+    height: 1.4em;
+    width: 1.4em;
+    text-align: center;
+    background-color: red;
+    padding: 0.2em;
+    border-radius: 100%;
+    color: cornflowerblue;
+    line-height: 1.2em;
+}
+
+.deleteBtn:hover {
+    transition: 0.2s;
+    background-color: rgb(182, 42, 42);
+}
+
+.deleteBtn:active {
+    transition: 0.2s;
+    background-color: rgb(112, 12, 12);
 }

src/app/message/message.component.html

@@ -10,6 +10,9 @@
             [ngClass] = "{'isOwnTimestamp':isOwnMessage}">
             {{ timeStamp | date:'medium' }}
         </span>
+        <span class="deleteBtn fas fa-trash-alt" 
+          (click)="removeMessage()" 
+          *ngIf="isOwnMessage"></span> 
     </div>
     <div class="messageContent"
         [ngClass]="{'isOwnMessageContent':isOwnMessage}">

src/app/message/message.component.spec.ts

@@ -5,6 +5,7 @@ import { ChatService } from '../services/chat.service';
 import { ToastrModule } from 'ngx-toastr';
 import {By} from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ChatMessage } from '../models/chat-message.model';
 
 describe('MessageComponent', () => {
   let component: MessageComponent;
@@ -22,24 +23,24 @@ describe('MessageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(MessageComponent);
     component = fixture.componentInstance;
+    component.chatMessage = new ChatMessage("Test 1", "Test msg", new Date());
+    component.chatMessage.webId = "";
     fixture.detectChanges();
   });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should remove message (case a)', () => {
-    component.messageContent = '';
+  it('should not remove a message that is not yours', () => {
+    component.isOwnMessage = false;
     component.removeMessage();
     expect(By.css('#toastr-container'));
   });
 
-  it('should remove message (case b)', () => {
-    component.messageContent = 'a';
+  it('should remove message', () => {
     component.isOwnMessage = true;
     component.removeMessage();
-    expect(By.css('#toastr-container'));
-    expect(component.messageContent === '');
+    expect(!By.css('#toastr-container'));
   });
 });

src/app/message/message.component.ts

@@ -35,12 +35,11 @@ export class MessageComponent implements OnInit {
   }
 
   removeMessage() {
-    if (!this.messageContent) {
+    if (this.isOwnMessage === false) {
       this.toastr.error('Cannot remove this message');
-    } else if (this.isOwnMessage === true) {
-      this.toastr.error('Are you sure?');
-      // TODO pop-up 'are you sure'
-      this.messageContent = '';
+    } else {
+      this.chatService.removeMsg(this.chatMessage);
     }
   }
+
 }

src/app/models/chat-message.model.ts

@@ -6,7 +6,10 @@ export class ChatMessage {
         this.timeSent = date || new Date();
     }
 
+    webId: string;
+
     userName?: string;
     message?: string;
     timeSent?: Date;
+
 }

src/app/services/chat.service.ts

@@ -37,7 +37,7 @@ export class ChatService {
     this.isActive = new BehaviorSubject<boolean>(false);
     this.thisUser = new BehaviorSubject<User>(null);
     setInterval(async () => {
-      await this.loadMessages();
+      //await this.loadMessages();
     }, 15000);
   }
 
@@ -165,7 +165,9 @@ export class ChatService {
     const text = this.rdf.getValueFromSchema('text', url);
     const date = Date.parse(this.rdf.getValueFromSchema('dateSent', url));
     const name = await this.rdf.getFriendData(sender, 'fn');
-    return new ChatMessage(name, text, date);
+    let msg : ChatMessage = new ChatMessage(name, text, date);
+    msg.webId = message.value;
+    return msg;
   }
 
   // Message methods
@@ -284,6 +286,15 @@ export class ChatService {
     }
   }
 
+  removeMsg(msg : ChatMessage) {
+    console.log("Deleting " + msg.webId);
+    const url = msg.webId;
+    fileClient.deleteFile(url).then(success => {
+      console.log("Deleted");
+      this.loadMessages();
+    }, err => console.log(err) );
+  }
+
   /**
    * Removes the conversation (its folder structure in the application) with a user
    * given a path.