Skip to content

P
PERFORMA_REPLICA
Commit 1587f3a0 by Ali Arshad
Options

Internal CR fixes.

parent c69ab081
Showing with 384 additions and 436 deletions
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.html
<div class="dashboard-content-area second-part"> <div class="dashboard-content-area second-part">
<app-error-message></app-error-message> <app-error-message></app-error-message>
<form #form="ngForm"> <form #form="ngForm" *ngIf="!showLoader">
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="page-title mb-0">{{editMode ? "Edit" : "Add"}} Workflow Template</div>
</div>
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="ui-g form-group"> <div class="ui-g ui-fluid">
<p-dialog header="Message Template" [(visible)]="displayNewMessageTemplate" #messageTemplateDialog> <div class="ui-g-12">
<app-edit-message-template *ngIf="displayNewMessageTemplate" <div class="page-title mb-0">
[objectID]="selectedTemplateID" <a [routerLink]="['/admin/list-workflow-templates']" class="arrow-btn-blue ml-0">
(closeModal)="closeDialog($event)"></app-edit-message-template> <img src="/assets/images/arrow-left-prev_blue.svg">
</a>
{{editMode ? "Edit" : "Add"}} Workflow Template
</div>
</div>
</div>
<div class="ui-g ui-fluid">
<p-dialog #messageTemplateDialog [(visible)]="displayNewMessageTemplate" header="Message Template">
<app-edit-message-template (closeModal)="closeDialog($event)"
*ngIf="displayNewMessageTemplate"
[objectID]="selectedTemplateID"></app-edit-message-template>
</p-dialog> </p-dialog>
<div class="ui-g-12 ui-g-offset-4 ui-md-4 h-60"> <div class="ui-g-12 ui-g-offset-3 ui-md-6 h-60 text-center templateName">
<label for="TemplateNameId" (click)="toggleInput($event, 'TemplateName')" <label (click)="toggleInput($event, 'TemplateName', true)" *ngIf="showLabel('TemplateName')"
*ngIf="showLabel('TemplateName')">{{workflow.TemplateName}}</label> for="TemplateNameId">{{workflow.TemplateName}}</label>
<input id="TemplateNameId" *ngIf="showInput('TemplateName')" <input (blur)="toggleInput($event, 'TemplateName', false)" *ngIf="!showLabel('TemplateName')"
[(ngModel)]="workflow.TemplateName" [disabled]="showLoader" [(ngModel)]="workflow.TemplateName" [disabled]="showLoader"
(blur)="toggleInput($event, 'TemplateName')" class="form-control" class="form-control" id="TemplateNameId"
name="TemplateName" required/> name="TemplateName" required/>
</div> </div>
</div> </div>
<!-- Start Pre stages --> <!-- Start Pre stages -->
<div class="ui-g form-group"> <div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<p-panel *ngFor="let stage of filteredStages(true, false)" toggler="header" <p-panel *ngFor="let stage of preStages" [toggleable]="true"
[toggleable]="true"> toggler="header">
<p-header> <p-header>
<span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.ObjectID, stage)" <span class="ui-panel-title">
(click)="toggleStageInput($event, 'StageName'+stage.ObjectID, stage)">
{{getStageHeader(stage)}} {{getStageHeader(stage)}}
</span> </span>
</p-header> </p-header>
<div class="form-group"> <div class="form-group ui-g">
<div class="work-belonging"> <div class="work-belonging ui-g-12 mb-0">
<span class="calcField">Landing Page</span> <span class="calcField">Landing Page</span>
</div> </div>
<div class="form-group row"> <div class="form-group ui-g-12">
<div class="col-md-8">
<label for="LandingButtonText">Button Text</label> <label for="LandingButtonText">Button Text</label>
<input name="LandingButtonText" type="text" class="form-control" <input [(ngModel)]="workflow.LandingButtonText" [disabled]="showLoader" class="form-control"
id="LandingButtonText"
[(ngModel)]="workflow.LandingButtonText" [disabled]="showLoader"
fieldLabel="Landing Button Text" fieldLabel="Landing Button Text"
tabindex="1" required> id="LandingButtonText" name="LandingButtonText"
required
tabindex="1" type="text">
</div> </div>
</div> <div class="work-belonging ui-g-12 mb-0">
<div class="work-belonging">
<span class="calcField">Verification Page</span> <span class="calcField">Verification Page</span>
</div> </div>
<div class="form-group row"> <div class="form-group ui-g-12">
<div class="col-md-12">
<label for="VerificationHeaderText">Header Text</label> <label for="VerificationHeaderText">Header Text</label>
<input name="VerificationHeaderText" type="text" class="form-control" <input [(ngModel)]="workflow.VerificationHeaderText" [disabled]="showLoader" class="form-control"
id="VerificationHeaderText" [disabled]="showLoader" fieldLabel="Verification Header Text" id="VerificationHeaderText"
[(ngModel)]="workflow.VerificationHeaderText" name="VerificationHeaderText"
fieldLabel="Verification Header Text" required
tabindex="2" required> tabindex="2" type="text">
</div>
</div> </div>
<div class="work-belonging"> <div class="work-belonging ui-g-12 mb-0">
<span class="calcField">Application</span> <span class="calcField">Application</span>
</div> </div>
<div class="criteria_section"> <div class="criteria_section ui-g-12">
<fieldset> <fieldset>
<legend> <legend>
<span class="calcField">Capture CV</span> <span class="calcField">Capture CV</span>
<p-inputSwitch [(ngModel)]="workflow.CaptureCV" name="CaptureCV" <p-inputSwitch [(ngModel)]="workflow.CaptureCV" [disabled]="showLoader"
[disabled]="showLoader"> name="CaptureCV">
</p-inputSwitch> </p-inputSwitch>
</legend> </legend>
<div *ngIf="workflow.CaptureCV" class="ui-g-12 ui-md-6"> <div *ngIf="workflow.CaptureCV" class="ui-g-12 ui-md-6">
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<label> Mandatory </label> <label> Mandatory</label>
</div> </div>
<div class="ui-g-12 ui-md-2"> <div class="ui-g-12 ui-md-2">
<p-inputSwitch [(ngModel)]="workflow.IsCVMandatory" <p-inputSwitch [(ngModel)]="workflow.IsCVMandatory"
...@@ -83,17 +85,17 @@ ...@@ -83,17 +85,17 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div class="criteria_section"> <div class="criteria_section ui-g-12">
<fieldset> <fieldset>
<legend> <legend>
<span class="calcField">Capture Cover Letter</span> <span class="calcField">Capture Cover Letter</span>
<p-inputSwitch [(ngModel)]="workflow.CaptureCL" name="CaptureCL" <p-inputSwitch [(ngModel)]="workflow.CaptureCL" [disabled]="showLoader"
[disabled]="showLoader"> name="CaptureCL">
</p-inputSwitch> </p-inputSwitch>
</legend> </legend>
<div *ngIf="workflow.CaptureCL" class="ui-g-12 ui-md-6"> <div *ngIf="workflow.CaptureCL" class="ui-g-12 ui-md-6">
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<label> Mandatory </label> <label> Mandatory</label>
</div> </div>
<div class="ui-g-12 ui-md-2"> <div class="ui-g-12 ui-md-2">
<p-inputSwitch [(ngModel)]="workflow.IsCLMandatory" <p-inputSwitch [(ngModel)]="workflow.IsCLMandatory"
...@@ -104,57 +106,57 @@ ...@@ -104,57 +106,57 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div class="form-group row"> <div class="form-group ui-g-12">
<div class="col-md-12">
<label for="VerificationHeaderText">Button Text</label> <label for="VerificationHeaderText">Button Text</label>
<input name="ApplicationButtonText" type="text" class="form-control" <input [(ngModel)]="workflow.ApplicationButtonText" [disabled]="showLoader" class="form-control"
[(ngModel)]="workflow.ApplicationButtonText"
[disabled]="showLoader"
fieldLabel="Application Button Text" fieldLabel="Application Button Text"
tabindex="7" required> name="ApplicationButtonText"
</div> required
</div> tabindex="7" type="text">
<div class="form-group row"> </div>
<div class="col-md-2"> <div class="form-group ui-g-12">
<label>Action</label> <div class="ui-g flex-center">
</div> <div class="ui-g-2">
<div class="col-md-10"> <label class="mb-0">Action</label>
<p-selectButton [options]="responseActions" </div>
[(ngModel)]="workflow.ApplicationResponseAction" <div class="ui-g-10">
optionLabel="Description" <p-selectButton [(ngModel)]="workflow.ApplicationResponseAction"
name="ApplicationResponseAction"> [options]="responseActions"
name="ApplicationResponseAction"
optionLabel="Description">
</p-selectButton> </p-selectButton>
</div> </div>
</div> </div>
<div class="form-group row" *ngIf="emailResponseSelected()"> </div>
<div class="col-md-6"> <div *ngIf="emailResponseSelected()" class="form-group ui-g-12">
<div class="ui-g">
<div class="ui-g-6">
<label for="ThankYouHeaderText">Header Text for Thank You page</label> <label for="ThankYouHeaderText">Header Text for Thank You page</label>
<input name="ThankYouHeaderText" [(ngModel)]="workflow.ThankYouHeaderText" <input [(ngModel)]="workflow.ThankYouHeaderText" [disabled]="showLoader"
id="ThankYouHeaderText" [disabled]="showLoader" class="form-control" fieldLabel="Header Text for Thank You page"
type="text" class="form-control" id="ThankYouHeaderText" name="ThankYouHeaderText"
fieldLabel="Header Text for Thank You page" required
tabindex="8" required> tabindex="8" type="text">
</div> </div>
<div class="col-md-6"> <div class="ui-g-6">
<label for="ThankYouSecondaryText">Secondary Text</label> <label for="ThankYouSecondaryText">Secondary Text</label>
<input name="ThankYouSecondaryText" id="ThankYouSecondaryText" <input [(ngModel)]="workflow.ThankYouSecondaryText" [disabled]="showLoader"
[(ngModel)]="workflow.ThankYouSecondaryText" [disabled]="showLoader" class="form-control" fieldLabel="Secondary Text"
fieldLabel="Secondary Text" type="text" class="form-control" id="ThankYouSecondaryText" name="ThankYouSecondaryText" tabindex="9"
tabindex="9"> type="text">
</div> </div>
</div> </div>
<div class="work-belonging"> </div>
<div class="work-belonging ui-g-12">
<span class="calcField">Job Outline Page</span> <span class="calcField">Job Outline Page</span>
</div> </div>
<div class="form-group row"> <div class="form-group ui-g-12">
<div class="col-md-12">
<label for="JobOutlineButtonText">Button Text</label> <label for="JobOutlineButtonText">Button Text</label>
<input name="JobOutlineButtonText" id="JobOutlineButtonText" <input [(ngModel)]="workflow.JobOutlineButtonText" [disabled]="showLoader"
[(ngModel)]="workflow.JobOutlineButtonText" class="form-control"
type="text" class="form-control" [disabled]="showLoader" fieldLabel="Job Outline Button Text" id="JobOutlineButtonText" name="JobOutlineButtonText"
fieldLabel="Job Outline Button Text" required
tabindex="10" required> tabindex="10" type="text">
</div>
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g form-group">
...@@ -164,24 +166,24 @@ ...@@ -164,24 +166,24 @@
<div class="col-md-6"> <div class="col-md-6">
<h3>Steps</h3> <h3>Steps</h3>
</div> </div>
<div class="col-md-offset-2 col-md-4" *ngIf="stepTypes && stepTypes.length"> <div *ngIf="stepTypes && stepTypes.length" class="col-md-offset-2 col-md-4">
<app-select-2 [data]="stepTypes" [value]="0" <app-select-2 (valChange)="addStep($event, stage)" [data]="stepTypes"
fieldLabel="Description" [value]="0"
(valChange)="addStep($event, stage)"> fieldLabel="Description">
</app-select-2> </app-select-2>
</div> </div>
</div> </div>
<p-orderList [value]="stage.Steps" header="Steps" <p-orderList (onReorder)="reAssignStepOrders(stage)" [value]="stage.Steps"
dragdrop="true" (onReorder)="reAssignStepOrders(stage)"> dragdrop="true" header="Steps">
<ng-template let-step pTemplate="item"> <ng-template let-step pTemplate="item">
<div class="drag-block"> <div class="drag-block">
<div class="col-md-4"> <div class="col-md-4">
<h4>{{step.StepType.Description}}</h4> <h4>{{step.StepType.Description}}</h4>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button type="button" pButton label=" " icon="ui-icon-close" <button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close" label=" "
[disabled]="showLoader" pButton
(click)="removeStep(step, stage)"></button> type="button"></button>
</div> </div>
<div class="col-md-6"></div> <div class="col-md-6"></div>
</div> </div>
...@@ -194,7 +196,7 @@ ...@@ -194,7 +196,7 @@
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Automatically progress to next stage </label> <label> Automatically progress to next stage</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
...@@ -204,7 +206,7 @@ ...@@ -204,7 +206,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Use messaging </label> <label> Use messaging</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
...@@ -212,71 +214,74 @@ ...@@ -212,71 +214,74 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true"
[collapsed]="!stage.UseMessaging"> header="{{stageMessagesCount(stage)}}">
<div class="form-group row"> <div class="form-group row">
<div class="col-md-offset-9 col-md-3"> <div class="col-md-offset-9 col-md-3">
<button class="btn btn-primary add-more-btn" tabindex="11" <button (click)="addMessage(stage)" *ngIf="stage.UseMessaging"
[disabled]="showLoader" [disabled]="showLoader"
(click)="addMessage(stage)" *ngIf="stage.UseMessaging">Add class="btn btn-primary add-more-btn" tabindex="11">Add
Message Message
</button> </button>
</div> </div>
</div> </div>
<!-- Display Pre Stage Messages here --> <!-- Display Pre Stage Messages here -->
<div class="form-group row" *ngFor="let message of stage.WorkFlowMessages"> <div *ngFor="let message of stage.WorkFlowMessages" class="form-group row">
<div class="col-lg-12 col-md-12" *ngIf="message.IsWithdrawalMessage"> <div *ngIf="message.IsWithdrawalMessage" class="col-lg-12 col-md-12">
<h3>Withdrawal Process</h3> <h3>Withdrawal Process</h3>
</div> </div>
<div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging"> <div *ngIf="stage.UseMessaging" class="col-lg-12 col-md-12 mb-10">
<div class="col-md-4"> <div class="col-md-4">
<p-multiSelect [options]="applicantSources" <label>&nbsp;</label>
name="applicantSources{{message.ObjectID}}" <p-multiSelect [(ngModel)]="message.ApplicantSources"
[(ngModel)]="message.ApplicantSources" [disabled]="showLoader"
[panelStyle]="{minWidth:'12em'}"
[filter]="false" [filter]="false"
optionLabel="Description" [options]="applicantSources"
[disabled]="showLoader"> [panelStyle]="{minWidth:'12em'}"
class="form-control"
name="applicantSources{{message.ObjectID}}"
optionLabel="Description">
</p-multiSelect> </p-multiSelect>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label>After</label> <label>After</label>
<p-inputMask name="Delay{{message.ObjectID}}" <p-inputMask (change)="generateDelayString(message)"
class="form-control" [disabled]="showLoader" (onBlur)="toggleInput($event, 'Delay'+message.ObjectID, false)" (onFocus)="toggleInput($event, 'Delay'+message.ObjectID, true)"
id="Delay{{message.ObjectID}}" *ngIf="!showLabel('Delay'+message.ObjectID) || !message.Delay"
[(ngModel)]="message.Delay" [(ngModel)]="message.Delay"
(onFocus)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)" [disabled]="showLoader"
(onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID, message)" [id]="'Delay'+message.ObjectID"
*ngIf="!showDelayLabel('Delay'+message.ObjectID, message)" class="form-control"
mask="9?9:99:99"> mask="9?9:99:99"
name="Delay{{message.ObjectID}}">
</p-inputMask> </p-inputMask>
<div *ngIf="showDelayLabel('Delay'+message.ObjectID, message)" <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
(click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"> *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
<label>{{message.DelayString}}</label> <label>{{message.DelayString}}</label>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="Variance{{message.ObjectID}}">+/-</label> <label for="Variance{{message.ObjectID}}">+/-</label>
<input name="Variance{{message.ObjectID}}" <input [(ngModel)]="message.Variance"
id="Variance{{message.ObjectID}}" [disabled]="showLoader"
[(ngModel)]="message.Variance" [disabled]="showLoader" class="form-control" id="Variance{{message.ObjectID}}"
type="text" class="form-control"> name="Variance{{message.ObjectID}}" type="text">
</div> </div>
</div> </div>
<div class="col-lg-12 col-md-12"> <div class="col-lg-12 col-md-12 flex-center">
<div class="col-md-4"> <div class="col-md-4">
<label>Business Hours only</label> <label class="mb-0">Business Hours only</label>
<p-checkbox name="BusinessHoursOnly{{message.ObjectID}}" <p-checkbox [(ngModel)]="message.BusinessHoursOnly"
[(ngModel)]="message.BusinessHoursOnly" binary="true"
binary="true"> name="BusinessHoursOnly{{message.ObjectID}}">
</p-checkbox> </p-checkbox>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label>Send</label> <label>Send</label>
<p-dropdown [options]="messageTemplates" filter="true" <p-dropdown [(ngModel)]="message.MessageTemplate" [options]="messageTemplates"
optionLabel="TemplateName" filter="true"
name="messageTemplate{{message.ObjectID}}" name="messageTemplate{{message.ObjectID}}"
[(ngModel)]="message.MessageTemplate"> optionLabel="TemplateName">
<ng-template let-message pTemplate="selectedItem"> <ng-template let-message pTemplate="selectedItem">
<i class="{{getMessageClass(message.value)}}"></i> <i class="{{getMessageClass(message.value)}}"></i>
<span class="dropdown-text">{{message.label}}</span> <span class="dropdown-text">{{message.label}}</span>
...@@ -292,13 +297,13 @@ ...@@ -292,13 +297,13 @@
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-2 text-center"> <div class="col-md-2 text-center">
<button type="button" pButton label=" " [disabled]="showLoader" <button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings"
icon="ui-icon-settings" pButton
(click)="configureMessageTemplate(message)"></button> type="button">
<button type="button" pButton label=" " [disabled]="showLoader" </button>
icon="ui-icon-close" <button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader" icon="ui-icon-close"
*ngIf="!message.IsWithdrawalMessage" pButton type="button">
(click)="removeMessage(message, stage)"></button> </button>
</div> </div>
</div> </div>
</div> </div>
...@@ -313,54 +318,55 @@ ...@@ -313,54 +318,55 @@
</div> </div>
</div> </div>
<!-- End Pre stages --> <!-- End Pre stages -->
<div class="row"> <div class="ui-g ui-fluid">
<div class="col-md-6 text-right"> <div class="ui-g-6 text-right">
<h3>Stages</h3> <h3>Stages</h3>
</div> </div>
<div class="col-md-3 col-md-offset-3"> <div class="ui-g-3 ui-g-offset-3">
<button class="btn btn-primary add-more-btn" tabindex="11" [disabled]="showLoader" <button (click)="addStage()" [disabled]="showLoader" class="btn btn-primary add-more-btn"
(click)="addStage()">Add Stage tabindex="11">Add Stage
</button> </button>
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<p-panel *ngFor="let stage of filteredStages(false, false)" toggler="header" <p-panel *ngFor="let stage of genericStages" [toggleable]="true"
[toggleable]="true"> toggler="header">
<p-header> <p-header>
<span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.SortOrder, stage)" <span (click)="toggleInput($event, 'StageName'+stage.SortOrder, true)" *ngIf="showLabel('StageName'+stage.SortOrder)"
(click)="toggleStageInput($event, 'StageName'+stage.SortOrder, stage)"> class="ui-panel-title">
{{getStageHeader(stage)}} {{getStageHeader(stage)}}
</span> </span>
<input id="StageName{{stage.SortOrder}}Id" <input (blur)="toggleInput($event, 'StageName'+stage.SortOrder, false)"
*ngIf="showStageInput('StageName'+stage.SortOrder, stage)" *ngIf="!showLabel('StageName'+stage.SortOrder)"
pInputText [disabled]="showLoader" [(ngModel)]="stage.Name" [disabled]="showLoader"
[(ngModel)]="stage.Name" class="form-control panel-header-input"
(blur)="toggleStageInput($event, 'StageName'+stage.SortOrder, stage)" id="StageName{{stage.SortOrder}}Id"
name="StageName{{stage.SortOrder}}" required/> name="StageName{{stage.SortOrder}}"
pInputText required/>
</p-header> </p-header>
<div class="ui-g form-group"> <div class="ui-g form-group">
<!-- Start steps section --> <!-- Start steps section -->
<div class="ui-g-12 ui-md-12" *ngIf="!stage.StageType.IsPostStage"> <div *ngIf="!stage.StageType.IsPostStage" class="ui-g-12 ui-md-12">
<div class="form-group row"> <div class="form-group row">
<div class="col-md-offset-8 col-md-4" *ngIf="stepTypes && stepTypes.length"> <div *ngIf="stepTypes && stepTypes.length" class="col-md-offset-8 col-md-4">
<app-select-2 [data]="stepTypes" [value]="0" <app-select-2 (valChange)="addStep($event, stage)" [data]="stepTypes"
fieldLabel="Description" [value]="0"
(valChange)="addStep($event, stage)"> fieldLabel="Description">
</app-select-2> </app-select-2>
</div> </div>
</div> </div>
<p-orderList [value]="stage.Steps" header="Steps" <p-orderList (onReorder)="reAssignStepOrders(stage)" [value]="stage.Steps"
dragdrop="true" (onReorder)="reAssignStepOrders(stage)"> dragdrop="true" header="Steps">
<ng-template let-step pTemplate="item"> <ng-template let-step pTemplate="item">
<div class="drag-block"> <div class="drag-block">
<div class="col-md-4"> <div class="col-md-4">
<h4>{{step.StepType.Description}}</h4> <h4>{{step.StepType.Description}}</h4>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button type="button" pButton label=" " [disabled]="showLoader" <button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close" label=" "
icon="ui-icon-close" pButton
(click)="removeStep(step, stage)"></button> type="button"></button>
</div> </div>
<div class="col-md-6"></div> <div class="col-md-6"></div>
</div> </div>
...@@ -373,7 +379,7 @@ ...@@ -373,7 +379,7 @@
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Automatically progress to next stage </label> <label> Automatically progress to next stage</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
...@@ -383,7 +389,7 @@ ...@@ -383,7 +389,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Use messaging </label> <label> Use messaging</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
...@@ -391,65 +397,66 @@ ...@@ -391,65 +397,66 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true"
[collapsed]="!stage.UseMessaging"> header="{{stageMessagesCount(stage)}}">
<div class="form-group row"> <div class="form-group row">
<div class="col-md-offset-9 col-md-3"> <div class="col-md-offset-9 col-md-3">
<button class="btn btn-primary add-more-btn" tabindex="11" <button (click)="addMessage(stage)" *ngIf="stage.UseMessaging"
[disabled]="showLoader" [disabled]="showLoader"
(click)="addMessage(stage)" *ngIf="stage.UseMessaging">Add class="btn btn-primary add-more-btn" tabindex="11">Add
Message Message
</button> </button>
</div> </div>
</div> </div>
<!-- Display Messages here --> <!-- Display Messages here -->
<div class="form-group row" <div *ngFor="let message of stage.WorkFlowMessages"
*ngFor="let message of stage.WorkFlowMessages"> class="form-group row">
<div class="col-lg-12 col-md-12" <div *ngIf="message.IsWithdrawalMessage"
*ngIf="message.IsWithdrawalMessage"> class="col-lg-12 col-md-12">
<h3>Withdrawal Process</h3> <h3>Withdrawal Process</h3>
</div> </div>
<div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging"> <div *ngIf="stage.UseMessaging" class="col-lg-12 col-md-12">
<div class="col-md-4"> <div class="col-md-4">
<label>After</label> <label>After</label>
<p-inputMask name="Delay{{message.ObjectID}}" <p-inputMask (change)="generateDelayString(message)"
class="form-control" [disabled]="showLoader" (onBlur)="toggleInput($event, 'Delay'+message.ObjectID, false)" (onFocus)="toggleInput($event, 'Delay'+message.ObjectID, true)"
id="Delay{{message.ObjectID}}" *ngIf="!showLabel('Delay'+message.ObjectID) || !message.Delay"
[(ngModel)]="message.Delay" [(ngModel)]="message.Delay"
(onFocus)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)" [disabled]="showLoader"
(onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID, message)" [id]="'Delay'+message.ObjectID"
*ngIf="!showDelayLabel('Delay'+message.ObjectID, message)" class="form-control"
mask="9?9:99:99"> mask="9?9:99:99"
name="Delay{{message.ObjectID}}">
</p-inputMask> </p-inputMask>
<div *ngIf="showDelayLabel('Delay'+message.ObjectID, message)" <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
(click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"> *ngIf="showLabel('Delay'+message.ObjectID) && message.Delay">
<label>{{message.DelayString}}</label> <label>{{message.DelayString}}</label>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="Variance{{message.ObjectID}}">+/-</label> <label for="Variance{{message.ObjectID}}">+/-</label>
<input name="Variance{{message.ObjectID}}" <input [(ngModel)]="message.Variance"
id="Variance{{message.ObjectID}}" [disabled]="showLoader"
[(ngModel)]="message.Variance" [disabled]="showLoader" [id]="'Variance'+message.ObjectID" class="form-control"
type="text" class="form-control"> name="Variance{{message.ObjectID}}" type="text">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label>Business Hours only</label> <label>Business Hours only</label>
<p-checkbox name="BusinessHoursOnly{{message.ObjectID}}" <p-checkbox [(ngModel)]="message.BusinessHoursOnly"
[(ngModel)]="message.BusinessHoursOnly" binary="true"
binary="true"> name="BusinessHoursOnly{{message.ObjectID}}">
</p-checkbox> </p-checkbox>
</div> </div>
</div> </div>
<div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging"> <div *ngIf="stage.UseMessaging" class="col-lg-12 col-md-12">
<div class="col-md-8"> <div class="col-md-8">
<label>Send</label> <label>Send</label>
<p-dropdown [options]="messageTemplates" filter="true" <p-dropdown (onChange)="showMessageTemplateDialog($event, message)" [(ngModel)]="message.MessageTemplate"
optionLabel="TemplateName" [autoDisplayFirst]="false"
[options]="messageTemplates"
filter="true"
name="messageTemplate{{message.ObjectID}}" name="messageTemplate{{message.ObjectID}}"
[(ngModel)]="message.MessageTemplate" optionLabel="TemplateName">
(onChange)="showMessageTemplateDialog($event, message)"
[autoDisplayFirst]="false">
<ng-template let-message pTemplate="selectedItem"> <ng-template let-message pTemplate="selectedItem">
<i class="{{getMessageClass(message.value)}}"></i> <i class="{{getMessageClass(message.value)}}"></i>
<span <span
...@@ -466,13 +473,13 @@ ...@@ -466,13 +473,13 @@
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<button type="button" pButton label=" " [disabled]="showLoader" <button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings" label=" "
icon="ui-icon-settings" pButton
(click)="configureMessageTemplate(message)"></button> type="button"></button>
<button type="button" pButton label=" " <button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader"
icon="ui-icon-close" [disabled]="showLoader" icon="ui-icon-close" label=" "
*ngIf="!message.IsWithdrawalMessage" pButton
(click)="removeMessage(message, stage)"></button> type="button"></button>
</div> </div>
</div> </div>
</div> </div>
...@@ -482,8 +489,8 @@ ...@@ -482,8 +489,8 @@
<hr/> <hr/>
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<button class="btn btn-primary add-more-btn" [disabled]="showLoader" <button (click)="removeStage(stage)" [disabled]="showLoader"
(click)="removeStage(stage)">Remove Stage class="btn btn-primary add-more-btn">Remove Stage
</button> </button>
</div> </div>
</div> </div>
...@@ -491,12 +498,15 @@ ...@@ -491,12 +498,15 @@
<!-- End messaging section --> <!-- End messaging section -->
</div> </div>
</p-panel> </p-panel>
</div>
<div class="ui-g-12 ui-md-12"></div>
</div>
<div class="ui-g ui-fluid">
<div class="ui-g-12">
<!-- Start Post Stages --> <!-- Start Post Stages -->
<p-panel *ngFor="let stage of filteredStages(false, true)" toggler="header" [toggleable]="true"> <p-panel *ngFor="let stage of postStages" [toggleable]="true" toggler="header">
<p-header> <p-header>
<span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.ObjectID, stage)" <span class="ui-panel-title">
(click)="toggleStageInput($event, 'StageName'+stage.ObjectID, stage)">
{{getStageHeader(stage)}} {{getStageHeader(stage)}}
</span> </span>
</p-header> </p-header>
...@@ -505,7 +515,7 @@ ...@@ -505,7 +515,7 @@
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Automatically progress to next stage </label> <label> Automatically progress to next stage</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
...@@ -515,7 +525,7 @@ ...@@ -515,7 +525,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12 ui-md-6">
<label> Use messaging </label> <label> Use messaging</label>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader" <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
...@@ -523,61 +533,62 @@ ...@@ -523,61 +533,62 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true"
[collapsed]="!stage.UseMessaging"> header="{{stageMessagesCount(stage)}}">
<div class="form-group row"> <div class="form-group row">
<div class="col-md-offset-9 col-md-3"> <div class="col-md-offset-9 col-md-3">
<button class="btn btn-primary add-more-btn" tabindex="11" <button (click)="addMessage(stage)" *ngIf="stage.UseMessaging"
[disabled]="showLoader" [disabled]="showLoader"
(click)="addMessage(stage)" *ngIf="stage.UseMessaging">Add class="btn btn-primary add-more-btn" tabindex="11">Add
Message Message
</button> </button>
</div> </div>
</div> </div>
<!-- Display Messages here --> <!-- Display Messages here -->
<div class="form-group row" *ngFor="let message of stage.WorkFlowMessages"> <div *ngFor="let message of stage.WorkFlowMessages" class="form-group row">
<div class="col-lg-12 col-md-12" *ngIf="message.IsWithdrawalMessage"> <div *ngIf="message.IsWithdrawalMessage" class="col-lg-12 col-md-12">
<h3>Withdrawal Process</h3> <h3>Withdrawal Process</h3>
</div> </div>
<div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging"> <div *ngIf="stage.UseMessaging" class="col-lg-12 col-md-12">
<div class="col-md-4"> <div class="col-md-4">
<label>After</label> <label>After</label>
<p-inputMask name="Delay{{message.ObjectID}}" <p-inputMask (change)="generateDelayString(message)"
class="form-control" [disabled]="showLoader" (onBlur)="toggleInput($event, 'Delay'+message.ObjectID, false)" (onFocus)="toggleInput($event, 'Delay'+message.ObjectID, true)"
id="Delay{{message.ObjectID}}" *ngIf="!showLabel('Delay'+message.ObjectID) || !message.Delay"
[(ngModel)]="message.Delay" [(ngModel)]="message.Delay"
(onFocus)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)" [disabled]="showLoader"
(onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID, message)" class="form-control"
*ngIf="!showDelayLabel('Delay'+message.ObjectID, message)" id="Delay{{message.ObjectID}}"
mask="9?9:99:99"> mask="9?9:99:99"
name="Delay{{message.ObjectID}}">
</p-inputMask> </p-inputMask>
<div *ngIf="showDelayLabel('Delay'+message.ObjectID, message)" <div (click)="toggleInput($event, 'Delay'+message.ObjectID, true)"
(click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"> *ngIf="showLabel('Delay'+message.ObjectID, message) && message.Delay">
<label>{{message.DelayString}}</label> <label>{{message.DelayString}}</label>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="Variance{{message.ObjectID}}">+/-</label> <label for="Variance{{message.ObjectID}}">+/-</label>
<input name="Variance{{message.ObjectID}}" <input [(ngModel)]="message.Variance"
id="Variance{{message.ObjectID}}" [disabled]="showLoader"
[(ngModel)]="message.Variance" [disabled]="showLoader" class="form-control" [id]="'Variance'+message.ObjectID"
type="text" class="form-control"> name="Variance{{message.ObjectID}}" type="text">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label>Business Hours only</label> <label>Business Hours only</label>
<p-checkbox name="BusinessHoursOnly{{message.ObjectID}}" <p-checkbox [(ngModel)]="message.BusinessHoursOnly"
[(ngModel)]="message.BusinessHoursOnly" binary="true"
binary="true"> name="BusinessHoursOnly{{message.ObjectID}}">
</p-checkbox> </p-checkbox>
</div> </div>
</div> </div>
<div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging"> <div *ngIf="stage.UseMessaging" class="col-lg-12 col-md-12">
<div class="col-md-8"> <div class="col-md-8">
<label>Send</label> <label>Send</label>
<p-dropdown [options]="messageTemplates" filter="true" <p-dropdown [(ngModel)]="message.MessageTemplate" [options]="messageTemplates"
optionLabel="TemplateName" filter="true"
name="messageTemplate{{message.ObjectID}}" name="messageTemplate{{message.ObjectID}}"
[(ngModel)]="message.MessageTemplate"> optionLabel="TemplateName">
<ng-template let-message pTemplate="selectedItem"> <ng-template let-message pTemplate="selectedItem">
<i class="{{getMessageClass(message.value)}}"></i> <i class="{{getMessageClass(message.value)}}"></i>
<span class="dropdown-text">{{message.label}}</span> <span class="dropdown-text">{{message.label}}</span>
...@@ -593,13 +604,13 @@ ...@@ -593,13 +604,13 @@
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<button type="button" pButton label=" " [disabled]="showLoader" <button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings" label=" "
icon="ui-icon-settings" pButton
(click)="configureMessageTemplate(message)"></button> type="button"></button>
<button type="button" pButton label=" " [disabled]="showLoader" <button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader" icon="ui-icon-close"
icon="ui-icon-close" label=" "
*ngIf="!message.IsWithdrawalMessage" pButton
(click)="removeMessage(message, stage)"></button> type="button"></button>
</div> </div>
</div> </div>
</div> </div>
...@@ -613,20 +624,20 @@ ...@@ -613,20 +624,20 @@
<!-- End Post Stages --> <!-- End Post Stages -->
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="text-center form-group"> <div class="text-center form-group">
<button type="button" value="Cancel" class="btn btn-primary largeBtn greyBtn" <button [disabled]="showLoader" class="btn btn-primary largeBtn greyBtn" routerLink="/admin/list-message-templates"
[disabled]="showLoader" type="button"
routerLink="/admin/list-message-templates">Cancel value="Cancel">Cancel
</button> </button>
<button *ngIf="showSaveBtn()" type="button" value="Save" class="btn btn-primary largeBtn" <button (click)="saveWorkflowTemplate()" *ngIf="showSaveBtn()" [disabled]="showLoader" class="btn btn-primary largeBtn"
(click)="saveWorkflowTemplate()" [disabled]="showLoader"> type="button" value="Save">
Save Save
</button> </button>
<button *ngIf="showSaveCopyBtn()" type="button" value="Save As a Copy" <button (click)="saveWorkflowTemplate(true)" *ngIf="showSaveCopyBtn()" [disabled]="showLoader"
class="btn btn-primary largeBtn" class="btn btn-primary largeBtn"
(click)="saveWorkflowTemplate(true)" [disabled]="showLoader"> type="button" value="Save As a Copy">
Save As a Copy Save As a Copy
</button> </button>
</div> </div>
...@@ -634,8 +645,8 @@ ...@@ -634,8 +645,8 @@
</div> </div>
</div> </div>
</div> </div>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form> </form>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</div> </div>
<p-confirmDialog header="Confirmation" key="RemoveRow" autoZIndex="false" baseZIndex="12000" <p-confirmDialog header="Confirmation" key="RemoveRow" autoZIndex="false" baseZIndex="12000"
icon="pi pi-exclamation-triangle" appendTo="body"> icon="pi pi-exclamation-triangle" appendTo="body">
......
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.scss
...@@ -67,3 +67,37 @@ p-inputMask { ...@@ -67,3 +67,37 @@ p-inputMask {
.drag-block { .drag-block {
cursor: pointer; cursor: pointer;
} }
.ml-0 {
margin-left: 0px;
}
.templateName {
font-size: 24px;
}
label {
font-family: "Usual-Regular";
font-weight: 300;
}
.calcField {
position: relative;
top: -5px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.panel-header-input {
width: 95%;
display: inline-block;
position: relative;
top: -8px;
background: #fff;
}
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.ts
...@@ -32,9 +32,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -32,9 +32,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
subscriptions: Array<Subscription> = []; subscriptions: Array<Subscription> = [];
@ViewChild('form') form: NgForm; @ViewChild('form') form: NgForm;
@ViewChild('messageTemplateDialog') messageTemplateDialog: Dialog; @ViewChild('messageTemplateDialog') messageTemplateDialog: Dialog;
createdObjs; createdObjs = {};
updatedObjs; updatedObjs = {};
deletedObjs; deletedObjs = {};
workflow = new WorkflowTemplateModel(); workflow = new WorkflowTemplateModel();
preStages: Array<WorkflowStageModel> = []; preStages: Array<WorkflowStageModel> = [];
...@@ -67,31 +67,26 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -67,31 +67,26 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
ngOnInit(): void { ngOnInit(): void {
this.createdObjs = {};
this.updatedObjs = {};
this.deletedObjs = {};
this.showLoader = true; this.showLoader = true;
if (this.adminPortalLayoutService.userData) {
this.utilsService.resetCounter(); this.initComponent();
} else {
this.startComponent();
this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
.subscribe( .first()
() => { .subscribe(() => {
this.startComponent(); this.initComponent();
}));
} }
));
} }
startComponent(): void { initComponent(): void {
if (!this.adminPortalLayoutService.userData || this.alreadyExists()) { this.subscriptions.push(this.activatedRoute.params
return; .subscribe((params: Params) => {
if (params.id && params.id !== '0') {
this.editMode = true;
} }
this.subscriptions.push(this.activatedRoute.params
.subscribe(
(params: Params) => {
this.subscriptions.push( this.subscriptions.push(
combineLatest( combineLatest(
this.appService.getTypes('StageTypes'), this.appService.getTypes('StageTypes'),
...@@ -101,10 +96,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -101,10 +96,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
) )
.subscribe(response => { .subscribe(response => {
if (this.alreadyExists()) {
return;
}
this.stageTypes = response[0]; this.stageTypes = response[0];
this.stepTypeOptions = response[1]; this.stepTypeOptions = response[1];
...@@ -116,21 +107,18 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -116,21 +107,18 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
this.applicantSources = response[3]; this.applicantSources = response[3];
if (params.id && params.id !== '0') { if (params.id && params.id !== '0') {
this.editMode = true;
this.getWorkflowTemplateByID(params.id); this.getWorkflowTemplateByID(params.id);
this.stepTypes = [...this.stepTypeOptions];
} else { } else {
this.editMode = false;
this.utilsService.createObject(this.workflow, this.createdObjs); this.utilsService.createObject(this.workflow, this.createdObjs);
this.setDefaults(); this.setDefaults();
this.addDefaultStages(); this.addDefaultStages();
this.stepTypes = [...this.stepTypeOptions]; this.stepTypes = [...this.stepTypeOptions];
this.showLoader = false; this.showLoader = false;
} }
}) })
); );
} }));
));
this.getMessageTemplates(); this.getMessageTemplates();
} }
...@@ -156,35 +144,27 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -156,35 +144,27 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
false, this.workflow.ObjectID); false, this.workflow.ObjectID);
this.utilsService.addMultiRefObject(stageObject, this.workflow, 'WorkFlowStages', this.createdObjs); this.utilsService.addMultiRefObject(stageObject, this.workflow, 'WorkFlowStages', this.createdObjs);
}); });
this.reOrderStages(this.filterStages(true, true, true)); this.reOrderStages();
} }
reOrderStages(callback): void { reOrderStages(): void {
this.showLoader = true;
this.workflow.WorkFlowStages this.workflow.WorkFlowStages
.sort((a, b) => a.SortOrder < b.SortOrder ? -1 : a.SortOrder > b.SortOrder ? 1 : 0); .sort((a, b) => a.SortOrder < b.SortOrder ? -1 : a.SortOrder > b.SortOrder ? 1 : 0);
if (callback) { this.filterStages();
callback();
}
this.showLoader = false;
} }
isGeneric(stage: WorkflowStageModel): boolean { isGeneric(stage: WorkflowStageModel): boolean {
return !stage.StageType.IsPostStage && !stage.StageType.IsPreStage; return !stage.StageType.IsPostStage && !stage.StageType.IsPreStage;
} }
filterStages(pre = false, generic = false, post = false): void { filterStages(): void {
if (pre) {
this.preStages = this.filteredStages(true, false); this.preStages = this.filteredStages(true, false);
}
if (generic) {
this.genericStages = this.filteredStages(false, false) this.genericStages = this.filteredStages(false, false)
.sort((a, b) => a.SortOrder > b.SortOrder ? -1 : a.SortOrder < b.SortOrder ? 1 : 0); .sort((a, b) => a.SortOrder > b.SortOrder ? -1 : a.SortOrder < b.SortOrder ? 1 : 0);
}
if (post) {
this.postStages = this.filteredStages(false, true); this.postStages = this.filteredStages(false, true);
} }
}
showSaveBtn(): boolean { showSaveBtn(): boolean {
return this.workflow && this.workflow.ObjectID ? return this.workflow && this.workflow.ObjectID ?
...@@ -198,55 +178,23 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -198,55 +178,23 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
getStageHeader(stage: WorkflowStageModel): string { getStageHeader(stage: WorkflowStageModel): string {
return `${stage.Name} (${stage.Steps ? stage.Steps.length : 0})`; return `${stage.Name} (${stage.WorkFlowMessages ? stage.WorkFlowMessages.length : 0})`;
} }
showLabel(id: string): boolean { showLabel(id: string): boolean {
return (this.editField[id] === undefined || this.editField[id] === false); return (this.editField[id] === undefined || this.editField[id] === false);
} }
showStageLabel(id: string, stage: WorkflowStageModel): boolean { filteredStages(isPreStage: boolean, isPostStage: boolean): Array<WorkflowStageModel> {
if (stage.StageType.IsPreStage || stage.StageType.IsPostStage) { if(isPreStage){
return true; return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPreStage)
} else { } else if(isPostStage){
return this.showLabel(id); return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPostStage)
}
}
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 { } else {
return this.editField ? !this.editField[id] : false; return this.workflow.WorkFlowStages.filter(stage => !stage.StageType.IsPreStage && !stage.StageType.IsPostStage)
} }
} }
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 { emailResponseSelected(): boolean {
return this.workflow.ApplicationResponseAction && return this.workflow.ApplicationResponseAction &&
this.workflow.ApplicationResponseAction.Value === 'EMAIL_RESPONSE'; this.workflow.ApplicationResponseAction.Value === 'EMAIL_RESPONSE';
...@@ -262,13 +210,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -262,13 +210,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
} }
showInput(id: string): boolean { toggleInput(event, fieldName, value): void {
return this.editField && !!this.editField[id];
}
toggleInput(event, fieldName): void {
this.utilsService.clearErrorMessages(); this.utilsService.clearErrorMessages();
if (event.type === 'blur') { if (value === false) {
if (!this.form.controls[fieldName].invalid) { if (!this.form.controls[fieldName].invalid) {
this.editField[fieldName] = false; this.editField[fieldName] = false;
} else { } else {
...@@ -290,63 +234,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -290,63 +234,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
} }
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 {
document.getElementById(`${fieldName}Id`)
.focus();
document.getElementById(`${fieldName}Id`)
.getElementsByTagName('input')[0]
.focus();
} catch (e) {
// ignore this.
}
}, 0);
}
}
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;
this.generateDelayString(message);
this.sortWorkFlowMessage();
} 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);
}
}
generateDelayString(message: WorkflowMessageModel): void { generateDelayString(message: WorkflowMessageModel): void {
const delay = message.Delay.replace(/_/g, '') const delay = message.Delay.replace(/_/g, '')
.split(':'); .split(':');
...@@ -365,6 +252,8 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -365,6 +252,8 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
message.DelayString = `${delay[0]}d: ${delay[1]}h: ${delay[2]}m`; message.DelayString = `${delay[0]}d: ${delay[1]}h: ${delay[2]}m`;
message.DelayMinutes = parseInt(delay[0], 10) * 24 * 60 + parseInt(delay[1], 10) * 60 + parseInt(delay[1], 10); message.DelayMinutes = parseInt(delay[0], 10) * 24 * 60 + parseInt(delay[1], 10) * 60 + parseInt(delay[1], 10);
} }
this.sortWorkFlowMessage();
} }
getMessageTemplates(callback = null): void { getMessageTemplates(callback = null): void {
...@@ -452,28 +341,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -452,28 +341,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
this.displayNewMessageTemplate = false; this.displayNewMessageTemplate = false;
} }
populateMessageTemplates(template: MessageTemplateModel): void {
this.messageTemplates.splice(this.messageTemplates.length - 1, 1);
this.messageTemplates.push(template);
}
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);
}
});
}
});
}
return availableStepTypes;
}
stageMessagesCount(stage: WorkflowStageModel): string { stageMessagesCount(stage: WorkflowStageModel): string {
return `Message Schedule (${(stage && stage.WorkFlowMessages) ? stage.WorkFlowMessages.length : 0})`; return `Message Schedule (${(stage && stage.WorkFlowMessages) ? stage.WorkFlowMessages.length : 0})`;
} }
...@@ -536,7 +403,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -536,7 +403,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
const stage = new WorkflowStageModel(`${stageType.Description} Stage`, false, stageType, this.getStageOrder(), const stage = new WorkflowStageModel(`${stageType.Description} Stage`, false, stageType, this.getStageOrder(),
false, this.workflow.ObjectID); false, this.workflow.ObjectID);
this.utilsService.addMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs); this.utilsService.addMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs);
this.filterStages(false, true, false); this.reOrderStages();
} }
removeStage(stage: WorkflowStageModel): void { removeStage(stage: WorkflowStageModel): void {
...@@ -556,7 +423,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -556,7 +423,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
}); });
} }
this.reOrderStages(this.filterStages(false, true, false)); this.reOrderStages();
} }
this.utilsService.removeMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs, this.utilsService.removeMultiRefObject(stage, this.workflow, 'WorkFlowStages', this.createdObjs,
this.updatedObjs, this.deletedObjs); this.updatedObjs, this.deletedObjs);
...@@ -595,15 +462,20 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -595,15 +462,20 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
this.workflow = data; this.workflow = data;
this.updatedObjs[this.workflow.ObjectID] = this.workflow; this.updatedObjs[this.workflow.ObjectID] = this.workflow;
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, this.workflow.WorkFlowStages); this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, this.workflow.WorkFlowStages);
this.workflow.WorkFlowStages = this.workflow.WorkFlowStages || [];
this.workflow.WorkFlowStages.forEach(stage => { this.workflow.WorkFlowStages.forEach(stage => {
if (stage.WorkFlowMessages) { this.updatedObjs[stage.ObjectID] = stage
stage.Steps = stage.Steps || [];
stage.WorkFlowMessages = stage.WorkFlowMessages || [];
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.WorkFlowMessages); this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.WorkFlowMessages);
}
if (stage.Steps) {
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.Steps); this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.Steps);
}
}); });
this.reOrderStages(this.filterStages(true, true, true));
this.reOrderStages();
this.showLoader = false; this.showLoader = false;
}, },
error => { error => {
...@@ -642,9 +514,5 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -642,9 +514,5 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
} }
alreadyExists(): boolean {
return Object.keys(this.createdObjs).length > 0 || Object.keys(this.updatedObjs).length > 0;
}
// tslint:disable-next-line:max-file-line-count // tslint:disable-next-line:max-file-line-count
} }
frontend/angular/src/assets/css/common.css
...@@ -11953,3 +11953,37 @@ label.select-all-jobs:after { ...@@ -11953,3 +11953,37 @@ label.select-all-jobs:after {
/* /*
End of Manage Customer End of Manage Customer
*/ */
body .ui-selectbutton .ui-button.ui-state-active {
background-color: #667281 !important;
}
body .ui-selectbutton .ui-button {
background-color: #fff !important;
}
.ui-selectbutton .ui-button span {
color: #000 !important;
}
.ui-selectbutton .ui-button.ui-state-active span{
color: #fff !important;
}
.mb-10 {
margin-bottom: 10px;
}
body .ui-button {
background-color: #667281;
}
body .ui-widget-header {
background-color: #667281;
border: 1px solid #667281;
}
body .ui-dropdown-panel .ui-dropdown-filter-container {
background-color: #667281;
}
frontend/angular/src/assets/css/custom.scss
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
} }
.ui-panel-content { .ui-panel-content {
background-color: #F5F7F8; background-color: white;
padding: 65px 10.5% !important; padding: 65px 10.5% !important;
} }
} }
...@@ -139,14 +139,15 @@ ...@@ -139,14 +139,15 @@
/* Overriding switch input styles */ /* Overriding switch input styles */
.ui-inputswitch-slider:before { .ui-inputswitch-slider:before {
height: 17px !important; height: 16px !important;
width: 17px !important; width: 18px !important;
left: 3px !important; left: 4px !important;
background: white; background: white;
top: 2px;
} }
.ui-inputswitch { .ui-inputswitch {
height: 22px !important; height: 20px !important;
width: 40px !important !important; width: 40px !important !important;
border-color: #667281 !important; border-color: #667281 !important;
background-color: #667281 !important; background-color: #667281 !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment