attachment-css

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.html

@@ -96,9 +96,17 @@
                                               id="File" url="{{apiUrl}}uploadFile" auto="true"
                                               (onUpload)="onUpload($event)" [disabled]="showLoader"
                                               chooseLabel="Browse" #uploader multiple="multiple">
+                                    <ng-template let-file pTemplate="file">
+                                        <div>Uploading...</div>
+                                    </ng-template>
                                     <ng-template pTemplate="content">
                                         <ul *ngIf="Message.Attachments.length">
-                                            <li *ngFor="let file of Message.Attachments">{{file.File.Name}}</li>
+                                            <li *ngFor="let file of Message.Attachments" class="attachment-content">
+                                                <div [title]="file.File.Name">Attachment {{file.File.Index + 1}} </div>
+                                                <a (click)="removeAttachment(file)">
+                                                    <span class="ui-icon-close" title="Remove"></span>
+                                                </a>
+                                            </li>
                                         </ul>
                                     </ng-template>
                                 </p-fileUpload>

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.scss

@@ -45,6 +45,32 @@ a {
     flex-direction: column;
 }
 
+.attachment-content {
+    display: flex;
+
+    div {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1 1 auto;
+        font-size: 12px;
+        margin-top: 2px;
+    }
+
+    a {
+        height: 17px;
+        width: 17px;
+        border: 1px solid red;
+        border-radius: 50%;
+        cursor: pointer;
+
+        span {
+            font-size: 15px;
+            color: red;
+        }
+    }
+}
+
 .message-block {
     background-color: white;
     border-radius: 20px;

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.ts

@@ -119,7 +119,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
 
         const assocs =
             [ASSOCS.JOB, [ASSOCS.JOB, ASSOCS.HIRING_TEAM].join('.'), ASSOCS.MESSAGES, [ASSOCS.MESSAGES, ASSOCS.SENT_BY].join('.'),
-             [ASSOCS.MESSAGES, ASSOCS.ATTACHMENTS].join('.'), [ASSOCS.CANDIDATE, ASSOCS.USER].join('.')];
+                [ASSOCS.MESSAGES, ASSOCS.ATTACHMENTS].join('.'), [ASSOCS.CANDIDATE, ASSOCS.USER].join('.')];
 
         this.subscriptions.push(this.messageEngineApplicantViewService.getEngineApplicantViewByID(this.jobId, assocs)
             .subscribe(
@@ -203,12 +203,18 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
         this.utilsService.createObject(chatAttachment, this.createdObjs);
         chatAttachment.File = {
             FileToken: JSON.parse(event.xhr.response).files[0].token,
-            Name: JSON.parse(event.xhr.response).files[0].fileName
+            Name: JSON.parse(event.xhr.response).files[0].fileName,
+            Index: this.Message.Attachments.length
         };
         chatAttachment.Message = this.Message;
         this.Message.Attachments.push(chatAttachment);
     }
 
+    removeAttachment(file): void {
+        this.utilsService.removeMultiRefObject(file, this.Message, 'Attachments', this.createdObjs,
+            this.updatedObjs, this.deletedObjs);
+    }
+
     /**
      * It simply creates a new object and assigns the default values to it.
      */

frontend/angular/src/app/models/chat-attachment.model.ts

@@ -12,4 +12,5 @@ export class FileContent {
     URI?: string;
     Name: string;
     FileToken?: string;
+    Index: number
 }