edit-workflow-template 85%

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

@@ -4,7 +4,7 @@ import { Select2Module } from 'ng2-select2';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { DeviceDetectorModule } from 'ngx-device-detector';
-import { ConfirmationService } from 'primeng/primeng';
+import { ConfirmationService, DragDropModule, InputMaskModule, OrderListModule } from 'primeng/primeng';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
 import { AppService } from './app.service';
@@ -31,7 +31,10 @@ import { OneITModule } from './oneit/oneit.module';
         DeviceDetectorModule.forRoot(),
         Select2Module,
         ModalModule.forRoot(),
-        BsDropdownModule.forRoot()
+        BsDropdownModule.forRoot(),
+        InputMaskModule,
+        DragDropModule,
+        OrderListModule
     ],
     declarations: [
         AppComponent,

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

@@ -26,8 +26,9 @@ export class AppService {
         return this.enumService.getEnumsWithNULLOptionLabel('PlaceholderOptions', 'Select variable');
     }
 
-    getTypes(serviceName: string): Observable<Array<any>> {
-        return this.enumService.getEnums(serviceName, true);
+    getTypes(serviceName: string, includeNull = false, blankLabel = null): Observable<Array<any>> {
+        return includeNull ? this.enumService.getEnumsWithNULLOptionLabel(serviceName, blankLabel) :
+            this.enumService.getEnums(serviceName, true);
     }
 
     getSearchListing(serviceName: string, queryType: string, queryParams, assocs, searchName): Observable<Array<any>> {

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

@@ -2,7 +2,7 @@
     <app-error-message></app-error-message>
     <form #form="ngForm">
         <div class="ui-g ui-fluid">
-            <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Message Template</div>
+            <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Workflow Template</div>
         </div>
         <div class="ui-g form-group">
             <div class="ui-g-12 ui-md-12">
@@ -100,21 +100,19 @@
                 </div>
                 <div class="ui-g form-group">
                     <div class="ui-g-12 ui-md-12">
-                        <div class="ui-g form-group">
-                            <div class="ui-g-12 ui-md-3 ui-fluid">
-                                <p-button label="Cancel" [disabled]="showLoader"
-                                          routerLink="/admin/list-message-templates"></p-button>
-                            </div>
-                            <div class="ui-g-12 ui-md-3 ui-fluid">
-                                <p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader"
-                                          (onClick)="saveMessageTemplate()">
-                                </p-button>
-                            </div>
-                            <div class="ui-g-12 ui-md-3 ui-fluid">
-                                <p-button *ngIf="showSaveCopyBtn()" label="Save As a Copy" [disabled]="showLoader"
-                                          (onClick)="saveMessageTemplate(true)">
-                                </p-button>
-                            </div>
+                        <div class="text-center form-group">
+                            <button type="button" value="Cancel" class="btn btn-primary largeBtn greyBtn"
+                                    routerLink="/admin/list-message-templates">Cancel
+                            </button>
+                            <button *ngIf="showSaveBtn()" type="button" value="Save" class="btn btn-primary largeBtn"
+                                    (click)="saveMessageTemplate()" [disabled]="showLoader">
+                                Save
+                            </button>
+                            <button *ngIf="showSaveCopyBtn()" type="button" value="Save As a Copy"
+                                    class="btn btn-primary largeBtn"
+                                    (click)="saveMessageTemplate(true)" [disabled]="showLoader">
+                                Save As a Copy
+                            </button>
                         </div>
                     </div>
                 </div>

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

@@ -400,4 +400,6 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     createdExists(): boolean {
         return Object.keys(this.createdObjs).length > 0;
     }
+
+// tslint:disable-next-line:max-file-line-count
 }

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

+p-dropdown {
+    ::ng-deep {
+
+        .ui-dropdown {
+            width: 100% !important;
+        }
+
+        .dropdown-text {
+            top: 0;
+            font-size: 14px;
+            margin-top: 4px;
+            position: absolute;
+            left: 30px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 180px;
+        }
+    }
+}
+
+p-inputMask {
+    ::ng-deep {
+        input {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+::ng-deep {
+    .ui-orderlist-controls {
+        display: none !important;
+    }
+
+    .ui-orderlist-list-container {
+        width: 100%;
+        border: 0;
+
+        .ui-orderlist-caption {
+            border: 0;
+        }
+
+        .ui-orderlist-list {
+            border: 0;
+            height: auto;
+
+            .ui-orderlist-item {
+                cursor: auto;
+                min-height: 50px;
+
+                &:hover {
+                    background-color: transparent !important;
+                }
+            }
+        }
+    }
+
+}
+
+.drag-block {
+    cursor: pointer;
+}

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

 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { ConfirmationService } from 'primeng/api';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 import { Subscription } from 'rxjs/Subscription';
 import { AppService } from '../../app.service';
+import { SERVICES } from '../../constants';
+import { MessageTemplateModel } from '../../models/messageTemplate.model';
 import { ResponseActionEnum } from '../../models/responseAction.enum';
 import { StageTypeEnum } from '../../models/stageType.enum';
 import { StepTypeEnum } from '../../models/stepType.enum';
+import { WorkflowMessageModel } from '../../models/workflowMessage.model';
+import { WorkflowStageModel } from '../../models/workflowStage.model';
+import { WorkflowStepModel } from '../../models/workflowStep.model';
 import { WorkflowTemplateModel } from '../../models/workflowTemplate.model';
 import { SaveService } from '../../oneit/services/save.service';
 import { UtilsService } from '../../oneit/services/utils.service';
+import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
 import { BaseComponent } from '../base/base.component';
-import { WorkflowTemplate } from './edit-workflow-template.model';
 import { EditWorkflowTemplateService } from './edit-workflow-template.service';
 
 @Component({
     selector: 'app-edit-workflow-template',
-    templateUrl: './edit-workflow-template.component.html'
+    templateUrl: './edit-workflow-template.component.html',
+    styleUrls: ['./edit-workflow-template.component.scss']
 })
 export class EditWorkflowTemplateComponent extends BaseComponent implements OnInit {
 
     subscriptions: Array<Subscription> = [];
     @ViewChild('form') form: NgForm;
-    createdObjs = {};
-    updatedObjs = {};
-    deletedObjs = {};
+    createdObjs;
+    updatedObjs;
+    deletedObjs;
 
     workflow = new WorkflowTemplateModel();
+    preStages: Array<WorkflowStageModel> = [];
+    genericStages: Array<WorkflowStageModel> = [];
+    postStages: Array<WorkflowStageModel> = [];
     stageTypes: Array<StageTypeEnum>;
+    stepTypeOptions: Array<StepTypeEnum>;
     stepTypes: Array<StepTypeEnum>;
     responseActions: Array<ResponseActionEnum>;
+    messageTemplates: Array<MessageTemplateModel> = [];
     editField: any = {};
     showLoader = false;
     editMode = false;
-
-    workflowTemplate = new WorkflowTemplate();
-    s: Array<any> = [];
-    messagetemplates: Array<any> = [];
-    messagetemplate_withdraws: Array<any> = [];
-    Automatically_progress_to_next_stages = [];
-    Use_messagings = [];
+    displayNewMessageTemplate = false;
 
     constructor(
         private router: Router,
@@ -46,7 +53,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         private utilsService: UtilsService,
         private saveService: SaveService,
         private appService: AppService,
-        private editWorkflowTemplateService: EditWorkflowTemplateService
+        private editWorkflowTemplateService: EditWorkflowTemplateService,
+        private adminPortalLayoutService: AdminPortalLayoutService,
+        private confirmationService: ConfirmationService
     ) {
         super(utilsService);
     }
@@ -55,28 +64,65 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         this.createdObjs = {};
         this.updatedObjs = {};
         this.deletedObjs = {};
-        this.utilsService.resetCounter();
         this.showLoader = true;
 
+        this.utilsService.resetCounter();
+
+        this.startComponent();
+        this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+            .subscribe(
+                () => {
+                    this.startComponent();
+                }
+            ));
+    }
+
+    startComponent(): void {
+
+        if (!this.adminPortalLayoutService.userData || this.alreadyExists()) {
+            return;
+        }
+
         this.subscriptions.push(this.activatedRoute.params
             .subscribe(
                 (params: Params) => {
-                    this.showLoader = true;
-                    this.getStageTypes();
-                    this.getStepTypes();
-                    this.getResponseActions();
+                    this.subscriptions.push(
+                        combineLatest(
+                            this.appService.getTypes('StageTypes'),
+                            this.appService.getTypes('StepTypes', true, 'Add Step'),
+                            this.appService.getTypes('ResponseActions')
+                        )
+                            .subscribe(response => {
+
+                                if (this.alreadyExists()) {
+                                    return;
+                                }
+
+                                this.stageTypes = response[0];
+                                this.stepTypeOptions = response[1];
+
+                                if (!this.adminPortalLayoutService.getHiringTeamID().HasDiversity) {
+                                    this.stepTypeOptions = this.stepTypeOptions.filter(type => type.Value !== 'DIVERSITY');
+                                }
+
+                                this.responseActions = response[2];
                                 if (params.id && params.id !== '0') {
                                     this.editMode = true;
                                     this.getWorkflowTemplateByID(params.id);
                                 } else {
+                                    this.editMode = false;
                                     this.utilsService.createObject(this.workflow, this.createdObjs);
                                     this.setDefaults();
+                                    this.addDefaultStages();
+                                    this.stepTypes = [...this.stepTypeOptions];
                                     this.showLogs();
                                     this.showLoader = false;
                                 }
+                            })
+                    );
                 }
             ));
-        this.gets();
+        this.getMessageTemplates();
     }
 
     setDefaults(): void {
@@ -86,56 +132,157 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         this.workflow.ThankYouHeaderText = 'Thank You for your application to:';
         this.workflow.ThankYouSecondaryText = 'We will get in touch with you soon';
         this.workflow.ApplicationButtonText = 'Submit';
+        this.workflow.JobOutlineButtonText = 'Continue';
         this.workflow.CaptureCV = true;
+        this.workflow.CaptureCL = true;
+        this.workflow.HiringTeam = this.adminPortalLayoutService.getHiringTeamID().ObjectID;
     }
 
-    getStageTypes(): void {
-        this.subscriptions.push(
-            this.appService.getTypes('StageTypes')
-                .subscribe((types: Array<StageTypeEnum>) => {
-                    this.stageTypes = types;
-                })
-        );
+    addDefaultStages(): void {
+        this.workflow.WorkFlowStages = [];
+        let topIndex = 1;
+        this.stageTypes.forEach(stage => {
+            const index = (!stage.IsPostStage && !stage.IsPreStage) ? topIndex++ : -1;
+            const stageObject = new WorkflowStageModel(`${stage.Description} Stage`, false, stage, index,
+                false, this.workflow.ObjectID);
+            this.utilsService.addMultiRefObject(stageObject, this.workflow, 'WorkFlowStages', this.createdObjs);
+        });
+        this.reOrderStages(this.filterStages(true, true, true));
     }
 
-    getStepTypes(): void {
-        this.subscriptions.push(
-            this.appService.getTypes('StepTypes')
-                .subscribe((types: Array<StepTypeEnum>) => {
-                    this.stepTypes = types;
-                })
-        );
+    reOrderStages(callback): void {
+        this.showLoader = true;
+        this.workflow.WorkFlowStages
+            .sort((a, b) => a.SortOrder < b.SortOrder ? -1 : a.SortOrder > b.SortOrder ? 1 : 0);
+        if (callback) {
+            callback();
+        }
+        this.showLoader = false;
     }
 
-    getResponseActions(): void {
-        this.subscriptions.push(
-            this.appService.getTypes('ResponseActions')
-                .subscribe((types: Array<ResponseActionEnum>) => {
-                    this.responseActions = types;
-                })
-        );
+    isGeneric(stage: WorkflowStageModel): boolean {
+        return !stage.StageType.IsPostStage && !stage.StageType.IsPreStage;
+    }
+
+    filterStages(pre = false, generic = false, post = false): void {
+        if (pre) {
+            this.preStages = this.filteredStages(true, false);
+        }
+        if (generic) {
+            this.genericStages = this.filteredStages(false, false)
+                .sort((a, b) => a.SortOrder > b.SortOrder ? -1 : a.SortOrder < b.SortOrder ? 1 : 0);
+        }
+        if (post) {
+            this.postStages = this.filteredStages(false, true);
+        }
+    }
+
+    showSaveBtn(): boolean {
+        return this.workflow && this.workflow.ObjectID ?
+            (this.workflow.HiringTeam === this.adminPortalLayoutService.getHiringTeamID().ObjectID ||
+                !this.editMode) : false;
+    }
+
+    showSaveCopyBtn(): boolean {
+        return this.workflow && this.workflow.ObjectID ?
+            (!!this.workflow.HiringTeam) : false;
+    }
+
+    getStageHeader(stage: WorkflowStageModel): string {
+        return `${stage.Name} (${stage.Steps ? stage.Steps.length : 0})`;
     }
 
     showLabel(id: string): boolean {
         return (this.editField[id] === undefined || this.editField[id] === false);
     }
 
+    showStageLabel(id: string, stage: WorkflowStageModel): boolean {
+        if (stage.StageType.IsPreStage || stage.StageType.IsPostStage) {
+            return true;
+        } else {
+            return this.showLabel(id);
+        }
+    }
+
+    showStageInput(id: string, stage: WorkflowStageModel): boolean {
+        if (stage.StageType.IsPreStage || stage.StageType.IsPostStage) {
+            return false;
+        } else {
+            return this.showInput(id);
+        }
+    }
+
+    showDelayInput(id: string, message: WorkflowMessageModel): boolean {
+        if (!message.Delay || message.Delay === '') {
+            return true;
+        } else {
+            return this.editField ? (this.editField[id] ? this.editField[id] : true) : true;
+        }
+    }
+
+    showDelayLabel(id: string, message: WorkflowMessageModel): boolean {
+        if (!message.Delay || message.Delay === '') {
+            return false;
+        } else {
+            return this.editField ? (this.editField[id] ? this.editField[id] : false) : false;
+        }
+    }
+
+    filteredStages(isPreStage: boolean, isPostStage: boolean): Array<WorkflowStageModel> {
+        return this.workflow && this.workflow.WorkFlowStages ? (
+            (!isPreStage && !isPostStage) ?
+                this.workflow.WorkFlowStages.filter(stage => !stage.StageType.IsPreStage && !stage.StageType.IsPostStage)
+                : isPreStage ?
+                this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPreStage) :
+                isPostStage ?
+                    this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPostStage) : []) : [];
+    }
+
+    emailResponseSelected(): boolean {
+        return this.workflow.ApplicationResponseAction &&
+            this.workflow.ApplicationResponseAction.Value === 'EMAIL_RESPONSE';
+    }
+
     showInput(id: string): boolean {
         return this.editField && !!this.editField[id];
     }
 
-    toggleInput(event, fieldName, save = true): void {
+    toggleInput(event, fieldName): void {
         this.utilsService.clearErrorMessages();
         if (event.type === 'blur') {
             if (!this.form.controls[fieldName].invalid) {
                 this.editField[fieldName] = false;
-                if (save) {
-                    // save call to be sent
+            } else {
+                this.utilsService.showAllErrorMessages();
+            }
+        } else {
+            this.editField[fieldName] = true;
+            setTimeout(() => {
+                try {
+                    document.getElementById(`${fieldName}Id`)
+                        .focus();
+                    document.getElementById(`${fieldName}Id`)
+                        .getElementsByTagName('input')[0]
+                        .focus();
+                } catch (e) {
+                    // ignore this.
+                }
+            }, 0);
+        }
     }
+
+    toggleStageInput(event, fieldName, stage: WorkflowStageModel): void {
+        this.utilsService.clearErrorMessages();
+        if (event.type === 'blur') {
+            if (!this.form.controls[fieldName].invalid) {
+                this.editField[fieldName] = false;
             } else {
                 this.utilsService.showAllErrorMessages();
             }
         } else {
+            if (stage.StageType.IsPreStage || stage.StageType.IsPostStage) {
+                return;
+            }
             this.editField[fieldName] = true;
             setTimeout(() => {
                 try {
@@ -151,11 +298,59 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         }
     }
 
-    gets(): void {
-        this.subscriptions.push(this.editWorkflowTemplateService.getDummy456s([])
+    toggleDelayInput(event, fieldName, message: WorkflowMessageModel): void {
+        this.utilsService.clearErrorMessages();
+        if (event.type === 'blur') {
+
+            if (!message.Delay || message.Delay === '') {
+                return;
+            }
+
+            if (!this.form.controls[fieldName].invalid) {
+                this.editField[fieldName] = false;
+            } else {
+                this.utilsService.showAllErrorMessages();
+            }
+        } else {
+            this.editField[fieldName] = true;
+            setTimeout(() => {
+                try {
+                    document.getElementById(`${fieldName}Id`)
+                        .focus();
+                    document.getElementById(`${fieldName}Id`)
+                        .getElementsByTagName('input')[0]
+                        .focus();
+                } catch (e) {
+                    // ignore this.
+                }
+            }, 0);
+        }
+    }
+
+    getMessageTemplates(): void {
+        const sharedMsgParams = {
+            OnlyGlobalTemplate: true,
+            attribsByName: 'Autocomplete'
+        };
+        const myMsgParams = {
+            OnlyGlobalTemplate: false,
+            attribsByName: 'Autocomplete'
+        };
+
+        this.subscriptions.push(
+            combineLatest(
+                this.editWorkflowTemplateService.getMessageTemplates([], myMsgParams),
+                this.editWorkflowTemplateService.getMessageTemplates([], sharedMsgParams)
+            )
                 .subscribe(
-                data => {
-                    this.s = data;
+                    (response: [Array<MessageTemplateModel>, Array<MessageTemplateModel>]) => {
+                        const myTemplates = response[0].filter(message => message.HiringTeam ===
+                            this.adminPortalLayoutService.getHiringTeamID().ObjectID);
+                        this.messageTemplates = [...myTemplates, ...response[1]];
+                        const newTemplate = new MessageTemplateModel();
+                        newTemplate.TemplateName = 'New Template';
+                        newTemplate.id = '0';
+                        this.messageTemplates.push(newTemplate);
                     },
                     error => {
                         this.utilsService.handleError(error);
@@ -164,54 +359,146 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         );
     }
 
-    autoCompleteMessagetemplate(event): void {
-        this.subscriptions.push(this.editWorkflowTemplateService.getmessagetemplatesForAutocomplete(event.query, [])
-            .subscribe(
-                data => {
-                    for (const obj of data) {
-                        // If you need to display anything complex in autocomplete label, put that code here
-                        // e.g. obj.Name = obj.FirstName + ' ' + obj.LastName. So that you can use "Name" attribute in HTML
+    showMessageTemplateDialog($event): void {
+        const template = $event.value;
+        if (template.id && template.id === '0') {
+            this.displayNewMessageTemplate = true;
         }
-                    this.messagetemplates = data;
-                },
-                error => {
-                    this.utilsService.handleError(error);
     }
-            )
-        );
+
+    availableStepTypes(): Array<StepTypeEnum> {
+        const availableStepTypes = this.stepTypeOptions;
+        if (this.workflow.WorkFlowStages) {
+            this.workflow.WorkFlowStages.forEach(stage => {
+                if (stage.Steps) {
+                    stage.Steps.forEach(step => {
+                        if (availableStepTypes.indexOf(step.StepType) > -1) {
+                            availableStepTypes.slice(availableStepTypes.indexOf(step.StepType), 0);
+                        }
+                    });
+                }
+            });
         }
 
-    autoCompleteMessagetemplate_withdraw(event): void {
-        this.subscriptions.push(this.editWorkflowTemplateService.getmessagetemplate_withdrawsForAutocomplete(event.query, [])
-            .subscribe(
-                data => {
-                    for (const obj of data) {
-                        // sd
+        return availableStepTypes;
     }
-                    this.messagetemplate_withdraws = data;
-                },
-                error => {
-                    this.utilsService.handleError(error);
+
+    stageMessagesCount(stage: WorkflowStageModel): string {
+        return `Message Schedule (${stage.WorkFlowMessages.length})`;
     }
-            )
-        );
+
+    addStep($event, stage: WorkflowStageModel): void {
+
+        if (!$event.data[0] && $event.data[0].Value !== null) {
+            return;
         }
 
-    getWorkflowTemplateByID(id): void {
+        const selectedStepType = this.stepTypeOptions.find(step => step.Value === $event.data[0].Value);
+        const step = new WorkflowStepModel(stage.Steps.length + 1, selectedStepType, stage.ObjectID);
+        this.utilsService.addMultiRefObject(step, stage, 'Steps', this.createdObjs);
+
+        this.removeStepType(selectedStepType);
+    }
+
+    removeStep(step: WorkflowStepModel, stage: WorkflowStageModel): void {
+        const stepType = step.StepType;
+        this.utilsService.removeMultiRefObject(step, stage, 'Steps', this.createdObjs, this.updatedObjs, this.deletedObjs);
+        this.reAssignStepOrders(stage);
+        this.addStepType(stepType);
+    }
+
+    removeStepType(step: StepTypeEnum): void {
+        this.stepTypes.splice(this.stepTypes.findIndex(elem => elem.Value === step.Value), 1);
+        this.resetSelect('stepTypes');
+    }
+
+    addStepType(step: StepTypeEnum): void {
+        this.stepTypes.push(step);
+        this.resetSelect('stepTypes');
+    }
+
+    reAssignStepOrders(stage: WorkflowStageModel): void {
+        stage.Steps.map((step, index) => step.SortOrder = index + 1);
+    }
+
+    addMessage(stage: WorkflowStageModel): void {
+        const message = new WorkflowMessageModel(stage.ObjectID);
+        this.utilsService.addMultiRefObject(message, stage, 'WorkFlowMessages', this.createdObjs);
+    }
+
+    removeMessage(message: WorkflowMessageModel, stage: WorkflowStageModel): void {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'fa fa-trash',
+            key: 'RemoveRow',
+            accept: () => {
+                this.utilsService.removeMultiRefObject(message, stage, 'WorkFlowMessages', this.createdObjs,
+                    this.updatedObjs, this.deletedObjs);
+            }
+        });
+    }
+
+    addStage(): void {
+        const stageType = this.stageTypes.find(type => !type.IsPreStage && !type.IsPostStage);
+        const stage = new WorkflowStageModel(`${stageType.Description} Stage`, false, stageType, this.getStageOrder(),
+            false, this.workflow.ObjectID);
+        this.utilsService.addMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs);
+        this.filterStages(false, true, false);
+    }
+
+    removeStage(stage: WorkflowStageModel): void {
+        this.confirmationService.confirm({
+            message: 'Are you sure you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'fa fa-trash',
+            key: 'RemoveRow',
+            accept: () => {
+                if (this.isGeneric(stage)) {
+                    const decrement = this.workflow.WorkFlowStages.filter(stg => this.isGeneric(stg))
+                        .length - stage.SortOrder;
+                    if (decrement > 0) {
+                        this.workflow.WorkFlowStages.map(stg => {
+                            if (this.isGeneric(stg) && stg.SortOrder > decrement) {
+                                stg.SortOrder = stg.SortOrder - decrement;
+                            }
+                        });
+                    }
+                    this.reOrderStages(this.filterStages(false, true, false));
+                }
+                this.utilsService.removeMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs,
+                    this.updatedObjs, this.deletedObjs);
+            }
+        });
+    }
+
+    getStageOrder(): number {
+        return this.workflow && this.workflow.WorkFlowStages ? (
+            this.workflow.WorkFlowStages.filter(stage => this.isGeneric(stage))
+                .length + 1
+        ) : 0;
+    }
 
+    resetSelect(key: string): void {
+        const temp = this[key];
+        this[key] = [];
+        setTimeout(() => (this[key] = temp), 0);
+    }
+
+    getWorkflowTemplateByID(id): void {
         this.showLoader = true;
         this.createdObjs = {};
         this.updatedObjs = {};
         this.deletedObjs = {};
+
         this.utilsService.resetCounter();
         this.utilsService.clearErrorMessages();
 
         this.subscriptions.push(this.editWorkflowTemplateService.getWorkflowTemplateByID(id, [])
             .subscribe(
                 data => {
-                    this.workflowTemplate = data;
-                    this.updatedObjs[this.workflowTemplate.ObjectID] = this.workflowTemplate;
-
+                    this.workflow = data;
+                    this.updatedObjs[this.workflow.ObjectID] = this.workflow;
                     this.showLoader = false;
                 },
                 error => {
@@ -222,29 +509,30 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
         );
     }
 
-    saveWorkflowTemplate(reload: boolean): void {
+    getMessageClass(message: MessageTemplateModel): string {
+        return message.TemplateType ? `ui-icon-${message.TemplateType.Value.toLowerCase()}` :
+            'ui-icon-sms';
+    }
+
+    saveWorkflowTemplate(saveCopy = false, testing = true): void {
         this.utilsService.clearErrorMessages();
+        const service = `svc/${saveCopy ? SERVICES.SAVE_MESSAGE_AS_COPY : SERVICES.SAVE}`;
+
+        if (testing) {
+            this.showLogs();
+
+            return;
+        }
 
         if (this.form.invalid) {
             this.utilsService.showAllErrorMessages();
         } else {
             this.showLoader = true;
-            this.subscriptions.push(this.saveService.saveObjectsWithDefaultSvc(this.createdObjs, this.updatedObjs, this.deletedObjs)
+            this.subscriptions.push(this.saveService.saveObjects(service, this.createdObjs, this.updatedObjs, this.deletedObjs)
                 .subscribe(
-                    data => {
+                    () => {
                         this.utilsService.handleSuccess();
-                        if (reload) {
-                            let idToNavigate = this.workflowTemplate.ObjectID;
-                            if (data.created[idToNavigate]) {
-                                idToNavigate = data.created[idToNavigate];
-                                this.router.navigate(['/edit-workflow-template', idToNavigate]);
-
-                                return;
-                            }
-                            this.getWorkflowTemplateByID(idToNavigate);
-                        } else {
-                            this.router.navigate(['']);
-                        }
+                        this.router.navigate(['/admin/list-workflow-templates']);
                     },
                     error => {
                         this.showLoader = false;
@@ -256,6 +544,12 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
     }
 
     showLogs(): void {
-        console.log(this.workflow);
+        console.log(this.workflow.WorkFlowStages);
     }
+
+    alreadyExists(): boolean {
+        return Object.keys(this.createdObjs).length > 0 || Object.keys(this.updatedObjs).length > 0;
+    }
+
+// tslint:disable-next-line:max-file-line-count
 }

frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.model.ts

-export class WorkflowTemplate {
-    ObjectID: string;
-    ButtonText: string;
-    HeaderText: string;
-    CaptureCV: boolean;
-    MandatoryCV: boolean;
-    CaptureCoverLetter: boolean;
-    Mandatorycoverletter: boolean;
-    HeaderTextforThankYoupage: string;
-    SecondaryText: string;
-    Automaticallyprogresstonextstage: boolean;
-    Hrs1: string;
-    BusinessHrsOnly: boolean;
-    Messagetemplate: any;
-    Hrswithdraw: string;
-    Variationwithdraw: string;
-    Messagetemplate_withdraw: any;
-    Usemessaging: boolean;
-    Dummy457: string;
-    messagetemplate_withdraw: string;
-    messagetemplate: string;
-    Dummy461: string;
-}

frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.service.ts

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { SERVICES } from "../../constants";
+import { MessageTemplateModel } from "../../models/messageTemplate.model";
 import { SearchService } from '../../oneit/services/search.service';
 import { UtilsService } from '../../oneit/services/utils.service';
 
@@ -12,11 +14,10 @@ export class EditWorkflowTemplateService {
     ) {
     }
 
-    getDummy456s(assocs): Observable<any> {
-        return this.searchService.getObjects('MessageTemplates', 'All', {}, assocs, null, null, null, null)
+    getMessageTemplates(assocs, queryParam): Observable<Array<MessageTemplateModel>> {
+        return this.searchService.getObjects(SERVICES.MESSAGE_TEMPLATES, 'All', queryParam, assocs, 'Autocomplete', null, null, null)
             .map(
-                data =>
-                    this.utilsService.convertResponseToObjects(data, assocs)
+                data => this.utilsService.convertResponseToObjects(data, assocs)
             );
     }
 

frontend/angular/src/app/components/error-message/error-message.component.ts

@@ -24,7 +24,7 @@ export class ErrorMessageComponent implements OnInit {
         this.subscriptions.push(
             this.msgsService.errorMsgsUpdated.subscribe(
                 data => {
-                    console.log(data);
+                    // console.log(data);
                     this.errorMsgs = data;
                 }
             )

frontend/angular/src/app/components/list-message-template/list-message-template.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 import { Subscription } from 'rxjs/Subscription';
 import { AppService } from '../../app.service';
 import { SEARCH, SERVICES } from '../../constants';
@@ -7,6 +8,7 @@ import { MessageTemplateModel } from '../../models/messageTemplate.model';
 import { SorterModel } from '../../models/sorterModel';
 import { SearchService } from '../../oneit/services/search.service';
 import { UtilsService } from '../../oneit/services/utils.service';
+import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
 import { BaseComponent } from '../base/base.component';
 
 @Component({
@@ -20,13 +22,15 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
     sharedTemplates: Array<MessageTemplateModel> = [];
     sortOptions: Array<SorterModel>;
     showLoader = false;
+    processing = false;
 
     constructor(
         private router: Router,
         private activatedRoute: ActivatedRoute,
         private utilsService: UtilsService,
         private searchService: SearchService,
-        private appService: AppService
+        private appService: AppService,
+        private adminPortalLayoutService: AdminPortalLayoutService
     ) {
         super(utilsService);
     }
@@ -37,6 +41,24 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
             new SorterModel('Alphabetical (Z-A)', false)
         ];
         this.showLoader = true;
+        this.processing = true;
+
+        this.startComponent();
+        this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+            .subscribe(
+                () => {
+                    this.startComponent();
+                }
+            ));
+    }
+
+    startComponent(): void {
+
+        if (!this.processing) {
+            return;
+        }
+
+        this.processing = false;
         const sharedMsgParams = {
             OnlyGlobalTemplate: true
         };
@@ -45,33 +67,21 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
         };
 
         this.subscriptions.push(
-            this.appService.getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', myMsgParams, [], SEARCH.MESSAGE_TEMPLATE)
-                .subscribe(
-                    messages => {
-                        this.myTemplates = messages;
-                        this.sortSpecificTemplate('myTemplates');
-                    },
-                    error => {
-                        this.showLoader = false;
-                        this.utilsService.handleError(error);
-                    }
+            combineLatest(
+                this.appService.getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', myMsgParams, [], SEARCH.MESSAGE_TEMPLATE),
+                this.appService.getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', sharedMsgParams, [], SEARCH.MESSAGE_TEMPLATE)
             )
-        );
-        this.subscriptions.push(
-            this.appService
-                .getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', sharedMsgParams, [], SEARCH.MESSAGE_TEMPLATE)
                 .subscribe(
-                    messages => {
-                        this.sharedTemplates = messages;
+                    (response: [Array<MessageTemplateModel>, Array<MessageTemplateModel>]) => {
+                        this.myTemplates = response[0].filter(message => message.HiringTeam ===
+                            this.adminPortalLayoutService.getHiringTeamID().ObjectID);
+                        this.sharedTemplates = response[1];
+                        this.sortSpecificTemplate('myTemplates');
                         this.sortSpecificTemplate('sharedTemplates');
-                    },
-                    error => {
                         this.showLoader = false;
-                        this.utilsService.handleError(error);
                     }
                 )
         );
-        setTimeout(() => (this.showLoader = false), 0);
     }
 
     sortSpecificTemplate(arrayName: string): void {

frontend/angular/src/app/components/list-work-flows/list-work-flows.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 import { Subscription } from 'rxjs/Subscription';
 import { AppService } from '../../app.service';
 import { SEARCH, SERVICES } from '../../constants';
 import { SorterModel } from '../../models/sorterModel';
 import { WorkflowTemplateModel } from '../../models/workflowTemplate.model';
 import { UtilsService } from '../../oneit/services/utils.service';
+import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
 import { BaseComponent } from '../base/base.component';
 
 @Component({
@@ -19,11 +21,13 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
     sharedTemplates: Array<WorkflowTemplateModel> = [];
     sortOptions: Array<SorterModel>;
     showLoader = false;
+    processing = false;
 
     constructor(
         private router: Router,
         private utilsService: UtilsService,
-        private appService: AppService
+        private appService: AppService,
+        private adminPortalLayoutService: AdminPortalLayoutService
     ) {
         super(utilsService);
     }
@@ -33,31 +37,48 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
             new SorterModel('Alphabetical (A-Z)', true),
             new SorterModel('Alphabetical (Z-A)', false)
         ];
+        this.showLoader = true;
+        this.processing = true;
+
+        this.startComponent();
+        this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+            .subscribe(
+                () => {
+                    this.startComponent();
+                }
+            ));
+    }
+
+    startComponent(): void {
+
+        if (!this.processing) {
+            return;
+        }
+
+        this.processing = false;
         const sharedParams = {
             OnlyGlobalTemplates: true
         };
         const myParams = {
             OnlyGlobalTemplates: false
         };
+
         this.subscriptions.push(
-            this.appService.getSearchListing(SERVICES.WORKFLOW_TEMPLATES, 'All', myParams, [], SEARCH.WORKFLOW_TEMPLATE)
-                .subscribe(
-                    messages => {
-                        this.myTemplates = messages;
-                        this.sortSpecificTemplate('myTemplates');
-                    },
-                    error => {
-                        this.showLoader = false;
-                        this.utilsService.handleError(error);
-                    }
-                )
-        );
-        this.subscriptions.push(
+            combineLatest(
+                this.appService.getSearchListing(SERVICES.WORKFLOW_TEMPLATES, 'All', myParams, [], SEARCH.WORKFLOW_TEMPLATE),
                 this.appService.getSearchListing(SERVICES.WORKFLOW_TEMPLATES, 'All', sharedParams, [], SEARCH.WORKFLOW_TEMPLATE)
+            )
                 .subscribe(
-                    messages => {
-                        this.sharedTemplates = messages;
+                    (response: [Array<WorkflowTemplateModel>, Array<WorkflowTemplateModel>]) => {
+                        this.myTemplates = response[0].filter(wf => wf.HiringTeam ===
+                            this.adminPortalLayoutService.getHiringTeamID().ObjectID);
+                        this.sortSpecificTemplate('myTemplates');
+                        this.sharedTemplates = response[1];
                         this.sortSpecificTemplate('sharedTemplates');
+                        const val = this.myTemplates.map(m => m.ObjectID)
+                            .join(',');
+                        console.log(val);
+                        this.showLoader = false;
                     },
                     error => {
                         this.showLoader = false;
@@ -65,7 +86,6 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
                     }
                 )
         );
-        setTimeout(() => (this.showLoader = false), 0);
     }
 
     sortSpecificTemplate(arrayName: string): void {

frontend/angular/src/app/constants.ts

@@ -4,7 +4,10 @@ export const CLASSES = {
     APPLICATION_STATUS: 'performa.orm.types.ApplicationStatus',
     HIRING_TEAM: 'performa.orm.HiringTeam',
     PLACEHOLDER_OPTIONS: 'performa.orm.types.PlaceholderOptions',
-    WORKFLOW_TEMPLATE: 'performa.orm.WorkFlowTemplate'
+    WORKFLOW_TEMPLATE: 'performa.orm.WorkFlowTemplate',
+    WORKFLOW_MESSAGE: 'performa.orm.WorkFlowMessage',
+    WORKFLOW_STAGE: 'performa.orm.WorkFlowStage',
+    WORKFLOW_STEP: 'performa.orm.WorkFlowStep'
 };
 
 export const SERVICES = {

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

+import { CLASSES } from '../constants';
+import { MessageTemplateModel } from './messageTemplate.model';
+
+export class WorkflowMessageModel {
+    ObjectID: string;
+    ObjectClass = CLASSES.WORKFLOW_MESSAGE;
+    Delay: string;
+    Variance: string;
+    BusinessHoursOnly: boolean;
+    IsWithdrawalMessage: boolean;
+    ApplicantSources: any;
+    MessageTemplate: MessageTemplateModel | string;
+    WorkFlowStage: string;
+
+    constructor(wfStageID: string) {
+        this.WorkFlowStage = wfStageID;
+    }
+}

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

+import { CLASSES } from '../constants';
+import { StageTypeEnum } from './stageType.enum';
+import { WorkflowMessageModel } from './workflowMessage.model';
+import { WorkflowStepModel } from './workflowStep.model';
+
+export class WorkflowStageModel {
+    ObjectID: string;
+    ObjectClass = CLASSES.WORKFLOW_STAGE;
+    Name: string;
+    UseMessaging: boolean;
+    StageType: StageTypeEnum;
+    SortOrder: number;
+    AutoProgress: boolean;
+    WorkFlowTemplate: string; // ID of WorkflowTemplateModel
+    WorkFlowMessages: Array<WorkflowMessageModel>;
+    Steps: Array<WorkflowStepModel>;
+
+    constructor(name: string, useMsg: boolean, stage: StageTypeEnum, order: number, autoProgress: boolean,
+                templateID: string) {
+        this.Name = name;
+        this.UseMessaging = useMsg;
+        this.StageType = stage;
+        this.SortOrder = order;
+        this.AutoProgress = autoProgress;
+        this.WorkFlowTemplate = templateID;
+        this.Steps = [];
+        this.WorkFlowMessages = [];
+    }
+}

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

+import { CLASSES } from '../constants';
+import { StepTypeEnum } from './stepType.enum';
+
+export class WorkflowStepModel {
+    ObjectID: string;
+    ObjectClass = CLASSES.WORKFLOW_STEP;
+    SortOrder: number;
+    StepType: StepTypeEnum;
+    WorkFlowStage: string; // ID of WorkflowStageModel
+
+    constructor(order: number, step: StepTypeEnum, stageID: string) {
+        this.SortOrder = order;
+        this.StepType = step;
+        this.WorkFlowStage = stageID;
+    }
+}

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

 import { CLASSES } from '../constants';
 import { HiringTeamModel } from './hiringTeam.model';
 import { ResponseActionEnum } from './responseAction.enum';
+import { WorkflowMessageModel } from './workflowMessage.model';
+import { WorkflowStageModel } from './workflowStage.model';
 
 export class WorkflowTemplateModel {
     ObjectID: string;
@@ -19,8 +21,7 @@ export class WorkflowTemplateModel {
     JobOutlineButtonText: string;
     RelatedToJob: boolean;
     IsSystemGenerated: boolean;
-    WithdrawalMessage: string;
     HiringTeam: HiringTeamModel | string;
-    WorkFlowStages: Array<string>;
+    WorkFlowStages: Array<WorkflowStageModel>;
     Jobs: Array<string>;
 }

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

@@ -10,6 +10,33 @@
     white-space: nowrap;
 }
 
+::ng-deep {
+    .ui-inputswitch {
+        height: 18px;
+        width: 36px !important;
+        overflow: visible;
+        background-color: #9e9e9e;
+        border-color: #9e9e9e;
+        -moz-border-radius: 8px;
+        -webkit-border-radius: 8px;
+        border-radius: 8px;
+    }
+
+    .ui-inputswitch-slider {
+        &:before {
+            border-radius: 50%;
+            position: absolute;
+            content: "";
+            height: 15px;
+            width: 15px;
+            left: 1px;
+            bottom: 0;
+            background-color: white;
+            transition: .4s;
+        }
+    }
+}
+
 .w-80 {
     width: 80% !important;
 }