Code Review Changes.

frontend/angular/src/app/app.module.ts

-import { DatePipe } from "@angular/common";
+import { DatePipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Select2Module } from 'ng2-select2';
@@ -28,8 +28,8 @@ import { ListWorkFlowsComponent } from './components/admin-portal/list-work-flow
 import { ApplicantPortalLayoutComponent } from './components/applicant-portal/applicant-portal-layout/applicant-portal-layout.component';
 import { ApplicantPortalLayoutService } from './components/applicant-portal/applicant-portal-layout/applicant-portal-layout.service';
 import { ErrorMessageComponent } from './components/error-message/error-message.component';
-import { MessageEngineApplicantViewComponent } from './components/message-engine-applicant-view/message-engine-applicant-view.component';
-import { MessageEngineApplicantViewService } from './components/message-engine-applicant-view/message-engine-applicant-view.service';
+import { MessageEngineComponent } from './components/message-engine/message-engine.component';
+import { MessageEngineService } from './components/message-engine/message-engine.service';
 import { SelectTwoComponent } from './components/select-2/select-2.component';
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
 import { OneITModule } from './oneit/oneit.module';
@@ -62,7 +62,7 @@ import { OneITModule } from './oneit/oneit.module';
         SelectTwoComponent,
         ErrorMessageComponent,
         ApplicantPortalLayoutComponent,
-        MessageEngineApplicantViewComponent
+        MessageEngineComponent
     ],
     providers: [
         FormBuilder,
@@ -71,7 +71,7 @@ import { OneITModule } from './oneit/oneit.module';
         ApplicantPortalLayoutService,
         AppService,
         EditWorkflowTemplateService,
-        MessageEngineApplicantViewService,
+        MessageEngineService,
         DatePipe
     ],
     bootstrap: [AppComponent]

frontend/angular/src/app/app.routing.ts

@@ -7,7 +7,7 @@ import { EditWorkflowTemplateComponent } from './components/admin-portal/edit-wo
 import { ListMessageTemplateComponent } from './components/admin-portal/list-message-template/list-message-template.component';
 import { ListWorkFlowsComponent } from './components/admin-portal/list-work-flows/list-work-flows.component';
 import { ApplicantPortalLayoutComponent } from './components/applicant-portal/applicant-portal-layout/applicant-portal-layout.component';
-import { MessageEngineApplicantViewComponent } from './components/message-engine-applicant-view/message-engine-applicant-view.component';
+import { MessageEngineComponent } from './components/message-engine/message-engine.component';
 import { AccessDeniedComponent } from './oneit/components/access-denied/access-denied.component';
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
 import { HomeComponent } from './oneit/components/home/home.component';
@@ -120,10 +120,6 @@ export const routes: Routes = [
                 path: 'edit-workflow-template/:id',
                 component: EditWorkflowTemplateComponent,
                 canActivate: [AuthGuard]
-            },
-            {
-                path: 'message-engine',
-                component: MessageEngineApplicantViewComponent
             }
         ]
     },
@@ -142,7 +138,7 @@ export const routes: Routes = [
             },
             {
                 path: 'message-engine',
-                component: MessageEngineApplicantViewComponent
+                component: MessageEngineComponent
             }
         ]
     }

frontend/angular/src/app/app.service.ts

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { environment } from '../environments/environment';
 import { MessageTemplateModel } from './models/message-template.model';
 import { PlaceholderOptionsEnum } from './models/placeholder-options.enum';
 import { TemplateTypeEnum } from './models/template-type.enum';
-import { ApiService } from './oneit/services/api.service';
 import { EnumService } from './oneit/services/enum.service';
 import { SearchService } from './oneit/services/search.service';
 import { UtilsService } from './oneit/services/utils.service';
@@ -16,8 +14,7 @@ export class AppService {
     constructor(
         private enumService: EnumService,
         private searchService: SearchService,
-        private utilsService: UtilsService,
-        private apiService: ApiService
+        private utilsService: UtilsService
     ) {
 
     }
@@ -56,20 +53,4 @@ export class AppService {
                 }
             );
     }
-
-    processObjects(serviceName: string, dataParams): Observable<any> {
-        const params: any = {
-            environment: environment.envName,    // Fetch this from environment e.g. environment.envName
-            ...dataParams
-        };
-
-        return this.apiService.post(`svc/${serviceName}`, params)
-            .map(
-                data => {
-                    if (this.utilsService.isSuccessfulResponse(data)) {
-                        return data;
-                    }
-                }
-            );
-    }
 }

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.html

@@ -105,8 +105,8 @@
 </div>
 <p-dialog #messageEngine [(visible)]="showChat" header="" [modal]="true" [responsive]="true" [resizable]="false"
           class="message-engine" [style]="{width: '300px', height: '500px'}">
-    <app-message-engine-applicant-view *ngIf="showChat" [embedded]="true" [jobId]="jobId"
-                                       (minimize)="showChat = false"></app-message-engine-applicant-view>
+    <app-message-engine *ngIf="showChat" [embedded]="true" [jobApplicationID]="jobApplicationID"
+                        (minimize)="showChat = false"></app-message-engine>
 </p-dialog>
 <div *ngIf="showBubble" class="chat-icon" (click)="showChat = !showChat"></div>
 <p-progressSpinner animationDuration="1s" *ngIf="showLoader"></p-progressSpinner>

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.scss

+.message-engine {
+    ::ng-deep {
+        .ui-dialog {
+            .ui-dialog-titlebar {
+                display: none;
+            }
+
+            .ui-dialog-content {
+                padding: 0 !important;
+            }
+        }
+
+        .ui-dialog {
+            &.ui-dialog-draggable {
+                left: auto !important;
+                right: 10px !important;
+                height: 600px !important;
+                bottom: 0 !important;
+                top: auto !important;
+                width: 690px !important;
+            }
+        }
+
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 200px rgba(183, 183, 183, 0.2);
+            border-radius: 6px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            -webkit-box-shadow: inset 0 0 200px rgba(100, 100, 100, 0.42);
+        }
+    }
+}

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.ts

@@ -15,7 +15,8 @@ import { AdminPortalLayoutService } from './admin-portal-layout.service';
 
 @Component({
     selector: 'app-admin-portal-layout',
-    templateUrl: './admin-portal-layout.component.html'
+    templateUrl: './admin-portal-layout.component.html',
+    styleUrls: ['./admin-portal-layout.component.scss']
 })
 export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
 
@@ -42,7 +43,7 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
     };
     showChat = false;
     showBubble = false;
-    jobId: string;
+    jobApplicationID: string;
 
     constructor(
         private deviceService: DeviceDetectorService,
@@ -67,7 +68,7 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
                 }
 
                 if (message.name === 'HiringTeamChat' && message.message === null) {
-                    this.jobId = null;
+                    this.jobApplicationID = null;
                     this.showBubble = false;
 
                     return;
@@ -78,7 +79,7 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
                 }
 
                 const msg = JSON.parse(message.message);
-                this.jobId = msg.JobApplicationID;
+                this.jobApplicationID = msg.JobApplicationID;
                 // Show Chat bubble if message service allows
                 this.showBubble = true;
             }

frontend/angular/src/app/components/admin-portal/edit-message-template/edit-message-template.component.scss

+.message-template-form {
+    label {
+        font-family: 'Usual-Regular' !important;
+    }
+
+    textarea {
+        width: 100%;
+        max-width: 100%;
+        padding: 10px;
+        border: solid 1px #dbdbdf;
+    }
+}

frontend/angular/src/app/components/admin-portal/edit-message-template/edit-message-template.component.ts

@@ -16,7 +16,8 @@ import { BaseComponent } from '../base/base.component';
 
 @Component({
     selector: 'app-edit-message-template',
-    templateUrl: './edit-message-template.component.html'
+    templateUrl: './edit-message-template.component.html',
+    styleUrls: ['./edit-message-template.component.scss']
 })
 export class EditMessageTemplateComponent extends BaseComponent implements OnInit {
 
@@ -105,7 +106,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                                  */
                                 if (this.templateCreationFromWorkflow()) {
 
-                                    if(!this.isGlobalHT) {
+                                    if (!this.isGlobalHT) {
                                         this.messageTemplate.HiringTeam = this.adminPortalLayoutService.getHiringTeamID().ObjectID;
                                     }
 
@@ -156,15 +157,15 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
      */
     showSaveBtn(): boolean {
 
-        if(this.templateCreationFromWorkflow()) {
+        if (this.templateCreationFromWorkflow()) {
             return true;
         }
-        
-        if(this.templateUpdateFromWorkflow()) {
+
+        if (this.templateUpdateFromWorkflow()) {
             return false;
         }
 
-        if(this.isGlobalHT) {
+        if (this.isGlobalHT) {
             return true;
         }
 
@@ -176,7 +177,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
     showSaveIntoAllTemplates(): boolean {
 
-        if(this.isGlobalHT && this.templateUpdateFromWorkflow()) {
+        if (this.isGlobalHT && this.templateUpdateFromWorkflow()) {
             return true;
         }
 
@@ -190,10 +191,10 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     showSaveCopyBtn(): boolean {
-        if(this.isGlobalHT && this.templateUpdateFromWorkflow()) {
+        if (this.isGlobalHT && this.templateUpdateFromWorkflow()) {
             return true;
         }
-        
+
         if (!this.isGlobalHT && this.messageTemplate && this.messageTemplate.ObjectID) {
             return this.messageTemplate.HiringTeam === null;
         }

frontend/angular/src/app/components/admin-portal/edit-workflow-template/edit-workflow-template.component.scss

+.editable {
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+        color: #03a0e7;
+    }
+}
+
 p-dropdown {
     ::ng-deep {
 
@@ -69,7 +78,10 @@ p-inputMask {
 }
 
 .templateName {
-    font-size: 24px;
+    label, input {
+        font-size: 24px;
+        text-align: center;
+    }
 }
 
 .interactive {
@@ -105,6 +117,38 @@ label {
     background: #fff;
 }
 
+.edit-message-template {
+    ::ng-deep {
+        .ui-dialog {
+            .ui-dialog-titlebar {
+                display: none;
+            }
+
+            .ui-dialog-content {
+                padding: 0 !important;
+
+                .message-template-form {
+                    padding-top: 0 !important;
+                    padding-bottom: 0 !important;
+                }
+
+                .main-tab-template {
+                    height: 50px;
+                }
+            }
+        }
+
+        .ui-dialog {
+            &.ui-dialog-draggable {
+                left: 130px !important;
+                right: 130px !important;
+                overflow-y: scroll;
+                height: 92% !important;
+            }
+        }
+    }
+}
+
 .disable-drop {
     pointer-events: none;
 }
@@ -113,3 +157,25 @@ label {
     display: flex;
     margin-top: 43px;
 }
+
+.separator {
+    width: 98%;
+    background: #4E5258;
+    display: flex;
+    height: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 20px;
+}
+
+.h-60 {
+    height: 60px;
+}
+
+.mb-10 {
+    margin-bottom: 10px;
+}
+
+.text-right {
+    text-align: right !important;
+}

frontend/angular/src/app/components/applicant-portal/applicant-portal-layout/applicant-portal-layout.component.ts

@@ -17,7 +17,7 @@ export class ApplicantPortalLayoutComponent implements OnInit, OnDestroy {
     showLoader: boolean;
     subscriptions: Array<Subscription> = [];
     successMsgs: Array<Message> = [];
-    jobId: string;
+    jobApplicationID: string;
     year = new Date().getFullYear();
 
     constructor(
@@ -44,7 +44,7 @@ export class ApplicantPortalLayoutComponent implements OnInit, OnDestroy {
             .subscribe(
                 (params: Params) => {
                     if (params.job) {
-                        this.jobId = params.job;
+                        this.jobApplicationID = params.job;
                     }
                     this.loadData();
                 }
@@ -63,7 +63,7 @@ export class ApplicantPortalLayoutComponent implements OnInit, OnDestroy {
         this.userService.reloadUserDetails();
         this.msgsService.clearErrorMessages();
 
-        this.applicantPortalLayoutService.reloadApplicantUserDetails(this.jobId);
+        this.applicantPortalLayoutService.reloadApplicantUserDetails(this.jobApplicationID);
     }
 
     subscribeToUserData(): void {

frontend/angular/src/app/components/applicant-portal/applicant-portal-layout/applicant-portal-layout.service.ts

@@ -9,7 +9,7 @@ export class ApplicantPortalLayoutService {
 
     userDataUpdated = new Subject<any>();
     userData: any;
-    jobId: string;
+    jobApplicationID: string;
 
     constructor(
         private apiService: ApiService,
@@ -18,18 +18,18 @@ export class ApplicantPortalLayoutService {
 
     }
 
-    reloadApplicantUserDetails(job): void {
-        if (job) {
+    reloadApplicantUserDetails(jobApplicationID): void {
+        if (jobApplicationID) {
             const params = {
                 environment: environment.envName,
-                JobApplication: job
+                JobApplication: jobApplicationID
             };
 
             this.apiService.post('svc/ApplicantUserDetails', params)
                 .subscribe(
                     data => {
                         if (this.utilsService.isSuccessfulResponse(data)) {
-                            this.jobId = job;
+                            this.jobApplicationID = jobApplicationID;
                             this.userData = data;
                             this.userDataUpdated.next(data);
                         }

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

 <div class="{{embedded ? 'openedFromWorkflow' : 'dashboard-content-area second-part' }}">
-    <form #form="ngForm" *ngIf="jobId && loggedInId">
+    <form #form="ngForm" *ngIf="jobApplicationID && loggedInId">
         <div class="ui-g ui-fluid">
             <div class="ui-g-12 ui-md-12">
                 <div *ngIf="embedded" class="main-tab-template pl-1 h-45">
@@ -27,31 +27,15 @@
                                         <label>{{message.SentBy.Name[0]}}</label>
                                     </div>
                                     <div class="ui-g-12 ui-md-11">
-                                        <div class="break-word" [innerHTML]="message.MessageContent"></div>
-                                        <div class="attachments">
-                                            <a *ngFor="let attachment of message.Attachments"
-                                               href="{{apiUrl+attachment.File.URI}}"
-                                               target="_blank">{{attachment.File.Name}}</a>
-                                        </div>
-                                        <div class="message-footer">
-                                            <div>via {{message.SentVia.Description}}</div>
-                                            <div>{{message.ObjectCreated | oneitdate : 'dd/MM/yyyy HH:mm'}}</div>
-                                        </div>
+                                        <ng-container
+                                            *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                     </div>
                                 </div>
                                 <div class="ui-g-offset-2 ui-g-10 message-block"
                                      *ngIf="message.SentBy.ObjectID === loggedInId">
                                     <div class="ui-g-10 ui-md-11">
-                                        <div class="break-word" [innerHTML]="message.MessageContent"></div>
-                                        <div class="attachments">
-                                            <a *ngFor="let attachment of message.Attachments"
-                                               href="{{apiUrl+attachment.File.URI}}"
-                                               target="_blank">{{attachment.File.Name}}</a>
-                                        </div>
-                                        <div class="message-footer">
-                                            <div>via {{message.SentVia.Description}}</div>
-                                            <div>{{message.ObjectCreated | oneitdate : 'dd/MM/yyyy HH:mm'}}</div>
-                                        </div>
+                                        <ng-container
+                                            *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                     </div>
                                     <div class="ui-g-12 ui-md-1 name owner {{embedded ? 'pad-5' : '' }}">
                                         <label>{{message.SentBy.Name[0]}}</label>
@@ -119,7 +103,7 @@
         <div id="showPlainText"></div>
         <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
     </form>
-    <div class="ui-g ui-fluid" *ngIf="!jobId || !loggedInId">
+    <div class="ui-g ui-fluid" *ngIf="!jobApplicationID || !loggedInId">
         <div class="ui-g-12 ui-md-12">
             <div class="main-tab-template pl-1 {{embedded ? 'h-45' : '' }}">
                 <div class="chief-officer mb-0">
@@ -135,3 +119,16 @@
         </div>
     </div>
 </div>
+
+<ng-template let-message="message" #messageDisplay>
+    <div class="break-word" [innerHTML]="message.MessageContent"></div>
+    <div class="attachments">
+        <a *ngFor="let attachment of message.Attachments"
+           href="{{apiUrl+attachment.File.URI}}"
+           target="_blank">{{attachment.File.Name}}</a>
+    </div>
+    <div class="message-footer">
+        <div>via {{message.SentVia.Description}}</div>
+        <div>{{message.ObjectCreated | oneitdate : 'dd/MM/yyyy HH:mm'}}</div>
+    </div>
+</ng-template>

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

@@ -246,3 +246,27 @@ a {
         }
     }
 }
+
+.h-45 {
+    height: 45px !important;
+}
+
+.pad-5 {
+    padding: 5px;
+}
+
+::ng-deep {
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 200px rgba(183, 183, 183, 0.2);
+        border-radius: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        -webkit-box-shadow: inset 0 0 200px rgba(100, 100, 100, 0.42);
+    }
+}

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

@@ -18,17 +18,17 @@ import { UtilsService } from '../../oneit/services/utils.service';
 import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
 import { BaseComponent } from '../admin-portal/base/base.component';
 import { ApplicantPortalLayoutService } from '../applicant-portal/applicant-portal-layout/applicant-portal-layout.service';
-import { MessageEngineApplicantViewService } from './message-engine-applicant-view.service';
+import { MessageEngineService } from './message-engine.service';
 
 @Component({
-    selector: 'app-message-engine-applicant-view',
-    templateUrl: './message-engine-applicant-view.component.html',
-    styleUrls: ['./message-engine-applicant-view.component.scss']
+    selector: 'app-message-engine',
+    templateUrl: './message-engine.component.html',
+    styleUrls: ['./message-engine.component.scss']
 })
-export class MessageEngineApplicantViewComponent extends BaseComponent implements OnInit {
+export class MessageEngineComponent extends BaseComponent implements OnInit {
 
     @Input() embedded = false;
-    @Input() jobId = null;
+    @Input() jobApplicationID = null;
     // tslint:disable-next-line:prefer-output-readonly
     @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
     @ViewChild('message') messageEditor: Editor;
@@ -54,7 +54,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
         private utilsService: UtilsService,
         private saveService: SaveService,
         private appService: AppService,
-        private messageEngineApplicantViewService: MessageEngineApplicantViewService,
+        private messageEngineService: MessageEngineService,
         private adminPortalLayoutService: AdminPortalLayoutService,
         private applicantPortalLayoutService: ApplicantPortalLayoutService
     ) {
@@ -69,7 +69,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
 
     ngOnInit(): void {
 
-        this.getSetViaOptions();
+        this.getSentViaOptions();
         // For Hiring Team or Applicant
         const service = this.embedded ? this.adminPortalLayoutService : this.applicantPortalLayoutService;
         if (service.userData) {
@@ -82,14 +82,15 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
         }
     }
 
-    getSetViaOptions(): void {
+    getSentViaOptions(): void {
         this.subscriptions.push(
             this.appService.getTypes('SentVia')
                 .subscribe((data: Array<SentViaEnum>) => {
                     this.sentViaEnum = data;
                     this.sentViaMenuItems = this.sentViaEnum.map(elem =>
                         ({
-                            label: elem.Description, command: () => this.Message.SentVia = elem
+                            label: elem.Description,
+                            command: () => this.Message.SentVia = elem
                         }));
 
                 })
@@ -101,19 +102,19 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
             this.loggedInId = service.userData.CompanyUser.User;
             // jobId should come from @Input (Admin Portal)
         } else {
-            this.jobId = service.jobId;
+            this.jobApplicationID = service.jobApplicationID;
             this.loggedInId = service.userData.UserID;
         }
 
-        if (this.jobId) {
-            this.getEngineApplicantViewByID();
+        if (this.jobApplicationID) {
+            this.getJobApplicationByID();
         } else {
             // Should never come to this block
             console.error('JobId not found.');
         }
     }
 
-    getEngineApplicantViewByID(): void {
+    getJobApplicationByID(): void {
         this.showLoader = true;
         this.createdObjs = {};
 
@@ -121,7 +122,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
             [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('.')];
 
-        this.subscriptions.push(this.messageEngineApplicantViewService.getEngineApplicantViewByID(this.jobId, assocs)
+        this.subscriptions.push(this.messageEngineService.getEngineApplicantViewByID(this.jobApplicationID, assocs)
             .subscribe(
                 data => {
                     this.jobApplication = data;
@@ -158,7 +159,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
                 JobApplication: this.jobApplication.ObjectID
             }
         };
-        this.appService.processObjects('MarkAsRead', params)
+        this.utilsService.processObjects('MarkAsRead', params)
             .subscribe(
                 () => this.showLoader = false,
                 err => {
@@ -182,7 +183,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
             .subscribe(
                 () => {
                     this.showLoader = false;
-                    this.getEngineApplicantViewByID();
+                    this.getJobApplicationByID();
                 },
                 error => {
                     this.showLoader = false;
@@ -199,14 +200,12 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
      */
     onUpload(event: any): void {
         const chatAttachment = new ChatAttachmentModel();
-        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,
             Index: this.Message.Attachments.length
         };
-        chatAttachment.Message = this.Message;
-        this.Message.Attachments.push(chatAttachment);
+        this.utilsService.addMultiRefObject(chatAttachment, this.Message, 'Attachments', this.createdObjs);
     }
 
     removeAttachment(file): void {

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

@@ -5,7 +5,7 @@ import { SearchService } from '../../oneit/services/search.service';
 import { UtilsService } from '../../oneit/services/utils.service';
 
 @Injectable()
-export class MessageEngineApplicantViewService {
+export class MessageEngineService {
     constructor(
         private searchService: SearchService,
         private utilsService: UtilsService

frontend/angular/src/app/components/select-2/select-2.component.scss

@@ -7,3 +7,18 @@
         }
     }
 }
+
+.w-100 {
+    width: 100% !important;
+}
+
+.normalDropDown {
+    ::ng-deep {
+        .select2-container {
+            .select2-selection .select2-selection__rendered {
+                background: none;
+                padding-left: 10px;
+            }
+        }
+    }
+}

frontend/angular/src/assets/css/custom.scss

@@ -29,15 +29,6 @@
     width: 100% !important;
 }
 
-.editable {
-    transition: all 0.3s ease;
-    cursor: pointer;
-
-    &:hover {
-        color: #03a0e7;
-    }
-}
-
 ::ng-deep {
     .ui-inputswitch {
         height: 18px;
@@ -65,46 +56,6 @@
     }
 }
 
-.w-80 {
-    width: 80% !important;
-}
-
-.pt-0 {
-    padding-top: 0 !important;
-}
-
-.mb-0 {
-    margin-bottom: 0 !important;
-}
-
-.mt-3 {
-    margin-top: 3em;
-}
-
-.pl-1 {
-    padding-left: 1em;
-}
-
-.mr-0 {
-    margin-right: 0 !important;
-}
-
-.ml-0 {
-    margin-left: 0;
-}
-
-.w-100 {
-    width: 100% !important;
-}
-
-.no-border {
-    border: 0 !important;
-}
-
-.h-60 {
-    height: 60px;
-}
-
 /* Panel Styling */
 
 .messaging {
@@ -252,17 +203,6 @@
     z-index: 100000;
 }
 
-.normalDropDown {
-
-    .select2-container {
-
-        .select2-selection .select2-selection__rendered {
-            background: none;
-            padding-left: 10px;
-        }
-    }
-}
-
 .h-80 {
     height: 80px;
 }
@@ -272,74 +212,6 @@
     width: 100% !important;
 }
 
-.edit-message-template {
-    .ui-dialog {
-        .ui-dialog-titlebar {
-            display: none;
-        }
-
-        .ui-dialog-content {
-            padding: 0 !important;
-
-            .message-template-form {
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
-            }
-
-            .main-tab-template {
-                height: 50px;
-            }
-        }
-    }
-
-    .ui-dialog {
-        &.ui-dialog-draggable {
-            left: 130px !important;
-            right: 130px !important;
-            overflow-y: scroll;
-            height: 92% !important;
-        }
-    }
-}
-
-.message-engine {
-    .ui-dialog {
-        .ui-dialog-titlebar {
-            display: none;
-        }
-
-        .ui-dialog-content {
-            padding: 0 !important;
-        }
-    }
-
-    .ui-dialog {
-        &.ui-dialog-draggable {
-            left: auto !important;
-            right: 10px !important;
-            height: 600px !important;
-            bottom: 0 !important;
-            top: auto !important;
-            width: 690px !important;
-        }
-    }
-
-    ::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 200px rgba(183, 183, 183, 0.2);
-        border-radius: 6px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        border-radius: 6px;
-        -webkit-box-shadow: inset 0 0 200px rgba(100, 100, 100, 0.42);
-    }
-}
-
-
 .editor {
     min-height: 150px !important;
 }
@@ -377,50 +249,11 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
     background-color: #667281;
 }
 
-.text-right {
-    text-align: right !important;
-}
-
-.mb-10 {
-    margin-bottom: 10px;
-}
-
-.pb-0 {
-    padding-bottom: 0 !important;
-}
-
 .form {
     background-color: white;
     padding: 65px 10.5%;
 }
 
-.message-template-form {
-    label {
-        font-family: 'Usual-Regular' !important;
-    }
-
-    textarea {
-        width: 100%;
-        max-width: 100%;
-        padding: 10px;
-        border: solid 1px #dbdbdf;
-    }
-}
-
-.separator {
-    width: 98%;
-    background: #4E5258;
-    display: flex;
-    height: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    border-radius: 20px;
-}
-
-.bg-white {
-    background-color: white;
-}
-
 .ui-inputtext {
     background-image: linear-gradient(to bottom, rgba(3, 160, 231, 0.5), rgba(3, 160, 231, 0.5)), linear-gradient(to bottom, #bdbdbd, #bdbdbd) !important;
 
@@ -480,31 +313,34 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
     cursor: pointer;
 }
 
-app-message-engine-applicant-view {
+/**
+ *** HELPER CLASSES ***
+ */
 
-    ::-webkit-scrollbar {
-        width: 8px;
-    }
+.w-80 {
+    width: 80% !important;
+}
 
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 200px rgba(183, 183, 183, 0.2);
-        border-radius: 6px;
-    }
+.pt-0 {
+    padding-top: 0 !important;
+}
 
-    ::-webkit-scrollbar-thumb {
-        border-radius: 6px;
-        -webkit-box-shadow: inset 0 0 200px rgba(100, 100, 100, 0.42);
-    }
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+.pl-1 {
+    padding-left: 1em;
 }
 
-.pad-5 {
-    padding: 5px;
+.mr-0 {
+    margin-right: 0 !important;
 }
 
-.h-45 {
-    height: 45px !important;
+.ml-0 {
+    margin-left: 0;
 }
 
-.error-block {
-    border: 1px solid red !important;
+.no-border {
+    border: 0 !important;
 }