message-engine-hiring-team

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

@@ -7,7 +7,7 @@ import { DeviceDetectorModule } from 'ngx-device-detector';
 import { DndModule } from 'ngx-drag-drop';
 import {
     ConfirmationService,
-    DragDropModule,
+    DragDropModule, FileUploadModule,
     InputMaskModule,
     MultiSelectModule,
     OrderListModule
@@ -45,7 +45,8 @@ import { OneITModule } from './oneit/oneit.module';
         DragDropModule,
         OrderListModule,
         MultiSelectModule,
-        DndModule
+        DndModule,
+        FileUploadModule
     ],
     declarations: [
         AppComponent,

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

@@ -122,7 +122,7 @@ export const routes: Routes = [
                 canActivate: [AuthGuard]
             },
             {
-                path: 'message-engine/:jobId',
+                path: 'message-engine',
                 component: MessageEngineApplicantViewComponent
             }
         ]

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

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { MessageTemplateModel } from "./models/message-template.model";
+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';
@@ -14,7 +16,8 @@ export class AppService {
     constructor(
         private enumService: EnumService,
         private searchService: SearchService,
-        private utilsService: UtilsService
+        private utilsService: UtilsService,
+        private apiService: ApiService
     ) {
 
     }
@@ -53,4 +56,20 @@ 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

@@ -7,7 +7,7 @@
             <div class="search-bar">
                 <div class="header-select" *ngIf="companyUser">
                     <select2 [data]="hiringTeams" [value]="selectedTeamID" (valueChanged)="selectedTeamChanged($event)"
-                        [options]="select2Options">
+                             [options]="select2Options">
                     </select2>
                 </div>
             </div>
@@ -28,7 +28,7 @@
                 <div class="user-profile-dropdown" dropdown *ngIf="userMenu">
                     <a class="user-name" dropdownToggle href="javascript:void(0)">
                         {{ userMenu.label }}
-                        <img src="assets/images/arrow.svg" />
+                        <img src="assets/images/arrow.svg"/>
                     </a>
                     <ul class="profile-dropdown dropdown-menu" *dropdownMenu>
                         <span class="arrow-up"></span>
@@ -43,8 +43,9 @@
                     </ul>
                 </div>
                 <div class="create-job-btn">
-                    <a *ngIf="selectedTeamID && companyUser"  [ngClass]="{'disabled': createJobDisabled}" href="javascript:void(0)"
-                        (click)="createJobClicked()">
+                    <a *ngIf="selectedTeamID && companyUser" [ngClass]="{'disabled': createJobDisabled}"
+                       href="javascript:void(0)"
+                       (click)="createJobClicked()">
                         Create Job
                     </a>
                 </div>
@@ -55,21 +56,26 @@
 <ng-template #reachedCapModal>
     <div class="modal-body main-welcome-popup">
         <h2>Your account reached monthly cap!</h2>
-        <p *ngIf="isStandardUser">Your account has reached the monthly cap for number of jobs, contact your Administrator to have the Cap increased.</p>
+        <p *ngIf="isStandardUser">Your account has reached the monthly cap for number of jobs, contact your
+            Administrator to have the Cap increased.</p>
         <ng-container *ngIf="!isStandardUser">
-            <p>Your account has reached the monthly cap for number of jobs. Please make a request by contacting us to make changes.</p>
+            <p>Your account has reached the monthly cap for number of jobs. Please make a request by contacting us to
+                make changes.</p>
             <div class="create-y-f-job">
                 <a href=" https://www.matchd.com/support/" target="_blank">Make a Request</a>
             </div>
         </ng-container>
-    </div>          
+    </div>
 </ng-template>
 <ng-template #trialNotAllowedModal>
     <div class="modal-body main-welcome-popup">
         <h2>Your account is on trial!</h2>
-        <p *ngIf="isStandardUser">Only one Job can be created during the Trial. Please contact your Administrator to set up billing.</p>
+        <p *ngIf="isStandardUser">Only one Job can be created during the Trial. Please contact your Administrator to set
+            up billing.</p>
         <ng-container *ngIf="!isStandardUser">
-            <p>Only one Job can be created during the Trial. {{ !selectedTeam || !selectedTeam.CardID ? "Enter Billing Method and" : "" }} Select Plan to enable creation of additional jobs.</p>
+            <p>Only one Job can be created during the
+                Trial. {{ !selectedTeam || !selectedTeam.CardID ? "Enter Billing Method and" : "" }} Select Plan to
+                enable creation of additional jobs.</p>
             <div class="create-y-f-job">
                 <a [routerLink]="['admin/iframe-page', redirectURL]">{{ !selectedTeam || !selectedTeam.CardID ? "Billing" : "Payment Plan" }}</a>
             </div>
@@ -97,5 +103,11 @@
         <router-outlet (activate)="onRouteUpdate()"></router-outlet>
     </div>
 </div>
+<p-dialog #messageEngine [(visible)]="showChat" header="" [modal]="true" [responsive]="true"
+          class="message-engine" [style]="{width: '300px', height: '500px'}">
+    <app-message-engine-applicant-view *ngIf="showChat" [embedded]="true"
+                                       (minimize)="showChat = false"></app-message-engine-applicant-view>
+</p-dialog>
+<div *ngIf="showBubble" class="chat-icon" (click)="showChat = !showChat"></div>
 <p-progressSpinner animationDuration="1s" *ngIf="showLoader"></p-progressSpinner>
-<app-feedback></app-feedback>
+<app-feedback></app-feedback>
\ No newline at end of file

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

@@ -24,7 +24,7 @@
                                 <label for="MessageTemplate{{messageTemplate.ObjectID}}">Message Template</label>
                                 <input [(ngModel)]="messageTemplate.TemplateName"
                                        name="MessageTemplate{{messageTemplate.ObjectID}}" tabindex="1"
-                                       autofocus
+                                       autofocus required
                                        fieldLabel="Message Template" type="text" [disabled]="showLoader"
                                        class="form-control" id="MessageTemplate{{messageTemplate.ObjectID}}">
                             </div>
@@ -44,7 +44,7 @@
                                        name="Subject{{messageTemplate.ObjectID}}"
                                        fieldLabel="Subject" placeholder="Subject" type="text"
                                        class="form-control" tabindex="2"
-                                       [disabled]="showLoader">
+                                       [disabled]="showLoader" required>
                             </div>
                             <div class="col-md-6" *ngIf="subjectPlaceholderOptions.length">
                                 <label>Placeholder for Subject</label>

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

@@ -341,7 +341,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
             attribsByName: 'Autocomplete'
         };
 
-        if(this.isGlobalHT) {
+        if (this.isGlobalHT) {
             this.subscriptions.push(
                 combineLatest(
                     this.editWorkflowTemplateService.getMessageTemplates([], sharedMsgParams)

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

@@ -2,6 +2,33 @@ a {
     color: rgb(3, 160, 231);
 }
 
+::ng-deep {
+    .ui-fileupload-buttonbar {
+        padding: 0 !important;
+
+        .ui-button {
+            width: 100% !important;
+            background-color: #667281 !important;
+        }
+    }
+
+    .ui-fileupload-row {
+        div:nth-child(n+3) {
+            display: none;
+        }
+    }
+
+    .ui-button-text {
+        padding: 0 !important;
+        margin-top: 1px;
+    }
+}
+
+.attachments {
+    display: flex;
+    flex-direction: column;
+}
+
 .message-block {
     background-color: white;
     border-radius: 20px;
@@ -41,6 +68,11 @@ a {
     }
 }
 
+.messages-wrapper {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
 
 * {
     transition: all .15s;
@@ -51,12 +83,27 @@ a {
     margin-top: 25px;
 }
 
+.buttons-wrapper {
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-between;
+
+    :last-child {
+        width: 60%;
+        min-height: 45px;
+        display: inline-block;
+        cursor: pointer;
+        border-radius: 100px;
+    }
+}
+
 .sendBtn {
     letter-spacing: 1px;
     color: #fff;
     overflow: visible;
     position: relative;
-    width: 100%;
+    width: 33%;
     cursor: pointer;
     border-radius: 100px;
     background-color: #667281;
@@ -64,7 +111,6 @@ a {
     min-height: 45px;
     text-transform: uppercase;
     border-color: #667281;
-    padding-right: 35px;
 
     p {
         color: #fff;
@@ -83,8 +129,8 @@ a {
 
     svg {
         position: absolute;
-        top: 4px;
-        right: 10px;
+        top: 0;
+        right: 30%;
         height: 30px;
         width: auto;
         transition: transform .15s;
@@ -95,51 +141,21 @@ a {
     }
 }
 
-@keyframes flyaway {
-    0% {
-        transform: rotate(10deg);
-        top: 13px;
-        right: 25px;
-        height: 30px;
-    }
-    5% {
-        transform: rotate(10deg);
-        top: 13px;
-        right: 0px;
-        height: 30px;
-    }
-    20% {
-        transform: rotate(-20deg);
-        top: 13px;
-        right: -130px;
-        height: 45px;
-    }
-    40% {
-        transform: rotate(10deg);
-        top: -40px;
-        right: -280px;
-        opacity: 1;
-    }
-    100% {
-        transform: rotate(60deg);
-        top: -200px;
-        right: -1000px;
-        height: 0;
-        opacity: 0;
-    }
-}
+.main-tab-template {
+    position: relative;
 
-@keyframes bounce-in {
-    0% {
-        padding-right: 30px;
-    }
-    40% {
-        padding-right: 6px;
-    }
-    50% {
-        padding-left: 30px;
-    }
-    100% {
-        padding-left: 6px;
+    .minimize {
+        position: absolute;
+        right: 10px;
+        transform: rotate(-90deg);
+        cursor: pointer;
+        height: 20px;
+        width: 20px;
+        line-height: normal;
+
+        img {
+            height: 10px;
+            width: 10px;
+        }
     }
 }

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

-export class EngineApplicantView {
-    ObjectID: string;
-    ObjectClass = 'EngineApplicantView';
-    ComposeSection: string;
-}

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

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { SaveService } from "../../oneit/services/save.service";
 
 import { SearchService } from '../../oneit/services/search.service';
 import { UtilsService } from '../../oneit/services/utils.service';
@@ -8,7 +9,8 @@ import { UtilsService } from '../../oneit/services/utils.service';
 export class MessageEngineApplicantViewService {
     constructor(
         private searchService: SearchService,
-        private utilsService: UtilsService
+        private utilsService: UtilsService,
+        private saveService: SaveService
     ) {
     }
 

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

@@ -29,7 +29,7 @@ export class SelectTwoComponent {
     }
 
     @Input() set value(value) {
-        this._value = value.ObjectID || value.Value;
+        this._value = value.ObjectID ? value.ObjectID : value.Value;
     }
 
     @ViewChild('mySelect') mySelect: Select2Component;

frontend/angular/src/app/constants.ts

@@ -37,5 +37,8 @@ export const ASSOCS = {
     JOB: 'Job',
     CANDIDATE: 'Candidate',
     USER: 'User',
-    MESSAGE: 'Message'
+    MESSAGES: 'Messages',
+    HIRING_TEAM: 'HiringTeam',
+    SENT_BY: 'SentBy',
+    ATTACHMENTS: 'Attachments'
 };

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

@@ -4,6 +4,6 @@ import { MessageModel } from './message.model';
 export class ChatAttachmentModel {
     ObjectID: string;
     ObjectClass = CLASSES.CHAT_ATTACHMENT;
-    File: string;
+    File: {};
     Message: MessageModel;
 }

frontend/angular/src/app/models/hiring-team.model.ts

 export class HiringTeamModel {
+    ObjectID: string;
     HiringTeamName: string;
 }

frontend/angular/src/app/models/job-application.model.ts

@@ -33,5 +33,5 @@ export class JobApplicationModel {
     Notes: Array<string>;
     ScheduledEmails: Array<string>;
     SentEmails: Array<string>;
-    Messages: Array<string>;
+    Messages: Array<MessageModel>;
 }

frontend/angular/src/app/models/job.model.ts

 import { CLASSES } from '../constants';
+import { HiringTeamModel } from './hiring-team.model';
 
 export class JobModel {
     ObjectID: string;
@@ -54,7 +55,7 @@ export class JobModel {
     Client: string;
     JobOwner: string;
     CreatedBy: string;
-    HiringTeam: string;
+    HiringTeam: HiringTeamModel;
     Occupation: string;
     ShortenedURL: string;
     AssessmentTemplate: string;

frontend/angular/src/app/models/message.model.ts

 import { CLASSES } from '../constants';
 import { ChatAttachmentModel } from './chat-attachment.model';
+import { HiringTeamModel } from './hiring-team.model';
 import { JobApplicationModel } from './job-application.model';
 import { SentViaEnum } from './sent-via.enum';
+import { UserModel } from './user.model';
 import { WorkflowMessageModel } from './workflow-message.model';
 
 export class MessageModel {
@@ -10,8 +12,9 @@ export class MessageModel {
     SentVia: SentViaEnum;
     MessageContent: string;
     IsRead: boolean;
-    SentBy: string;
+    SentBy: UserModel | HiringTeamModel | string;
     WorkFlowMessage: WorkflowMessageModel;
     JobApplication: JobApplicationModel;
-    Attachments: ChatAttachmentModel;
+    Attachments: Array<ChatAttachmentModel>;
+    ObjectCreatedStr: string;
 }

frontend/angular/src/app/models/user.model.ts

@@ -9,6 +9,7 @@ export class UserModel {
     PasswordExpiryDate: string;
     FirstName: string;
     LastName: string;
+    Name: string;
     UserDescription: string;
     Email: string;
     SupportUser: string;

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

@@ -272,16 +272,28 @@
     width: 100% !important;
 }
 
-.ui-dialog {
-    &.ui-dialog-draggable {
-        left: 130px !important;
-        right: 130px !important;
-        overflow-y: scroll;
-        height: 80% !important;
+.edit-message-template {
+    .ui-dialog {
+        .ui-dialog-titlebar {
+            display: none;
+        }
+
+        .ui-dialog-content {
+            padding: 0 !important;
+        }
+    }
+
+    .ui-dialog {
+        &.ui-dialog-draggable {
+            left: 130px !important;
+            right: 130px !important;
+            overflow-y: scroll;
+            height: 80% !important;
+        }
     }
 }
 
-.edit-message-template {
+.message-engine {
     .ui-dialog {
         .ui-dialog-titlebar {
             display: none;
@@ -291,8 +303,36 @@
             padding: 0 !important;
         }
     }
+
+    .ui-dialog {
+        &.ui-dialog-draggable {
+            left: auto !important;
+            right: 10px !important;
+            height: 85% !important;
+            bottom: 0 !important;
+            overflow-y: scroll;
+            top: auto !important;
+            min-width: 600px;
+            width: 55%;
+        }
+    }
+
+    ::-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;
 }
@@ -416,3 +456,40 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
 .ui-button.ui-button-icon-only {
     margin: 1px;
 }
+
+.chat-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 100px;
+    position: fixed;
+    bottom: 10px;
+    right: 20px;
+    background-image: url("assets/images/chat-icon.jpg");
+    background-repeat: round;
+    cursor: pointer;
+}
+
+app-message-engine-applicant-view {
+
+    ::-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);
+    }
+}
+
+.pad-5 {
+    padding: 5px;
+}
+
+.h-45 {
+    height: 45px !important;
+}