Skip to content

P
PERFORMA_REPLICA
Commit d70d9155 by Ali Arshad
Options

Added drag-drop.

parent 1587f3a0
Showing with 186 additions and 72 deletions
frontend/angular/package-lock.json
...@@ -7414,6 +7414,14 @@ ...@@ -7414,6 +7414,14 @@
"tslib": "^1.9.0" "tslib": "^1.9.0"
} }
}, },
"ngx-drag-drop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ngx-drag-drop/-/ngx-drag-drop-2.0.0.tgz",
"integrity": "sha512-t+4/eiC8zaXKqU1ruNfFEfGs1GpMNwpffD0baopvZFKjQHCb5rhNqFilJ54wO4T0OwGp4/RnsVhlcxe1mX6UJg==",
"requires": {
"tslib": "^1.9.0"
}
},
"no-case": { "no-case": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
......
frontend/angular/package.json
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
"ng2-select2": "^1.0.0-beta.16", "ng2-select2": "^1.0.0-beta.16",
"ngx-bootstrap": "2.0.5", "ngx-bootstrap": "2.0.5",
"ngx-device-detector": "^1.3.16", "ngx-device-detector": "^1.3.16",
"ngx-drag-drop": "^2.0.0",
"primeicons": "^1.0.0-beta.10", "primeicons": "^1.0.0-beta.10",
"primeng": "6.1.5", "primeng": "6.1.5",
"quill": "^1.3.5", "quill": "^1.3.5",
......
frontend/angular/src/app/app.module.ts
...@@ -28,6 +28,7 @@ import { ListWorkFlowsComponent } from './components/list-work-flows/list-work-f ...@@ -28,6 +28,7 @@ import { ListWorkFlowsComponent } from './components/list-work-flows/list-work-f
import { SelectTwoComponent } from './components/select-2/select-2.component'; import { SelectTwoComponent } from './components/select-2/select-2.component';
import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component'; import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
import { OneITModule } from './oneit/oneit.module'; import { OneITModule } from './oneit/oneit.module';
import { DndModule } from "ngx-drag-drop";
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -40,7 +41,8 @@ import { OneITModule } from './oneit/oneit.module'; ...@@ -40,7 +41,8 @@ import { OneITModule } from './oneit/oneit.module';
InputMaskModule, InputMaskModule,
DragDropModule, DragDropModule,
OrderListModule, OrderListModule,
MultiSelectModule MultiSelectModule,
DndModule
], ],
declarations: [ declarations: [
AppComponent, AppComponent,
......
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.html
...@@ -173,22 +173,32 @@ ...@@ -173,22 +173,32 @@
</app-select-2> </app-select-2>
</div> </div>
</div> </div>
<p-orderList (onReorder)="reAssignStepOrders(stage)" [value]="stage.Steps" <div *ngIf="stage.Steps.length===0">
dragdrop="true" header="Steps"> No steps added...
<ng-template let-step pTemplate="item"> </div>
<div class="drag-block">
<div class="col-md-4"> <div (dndDrop)="onDrop($event, stage.Steps, stage.ObjectID)"
<h4>{{step.StepType.Description}}</h4> [class.disable-drop]="draggingId!=null && draggingId !== stage.ObjectID" dndDropzone>
</div> <div [hidden]="draggingId !== stage.ObjectID" dndPlaceholderRef style="background: #CCCCCC; border: 1px dashed #000; width: 50%; height: 53px"></div>
<div class="col-md-2"> <div *ngFor="let step of stage.Steps" class="ui-g">
<button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close" label=" " <div (dndEnd)="onDragEnd($event)"
pButton (dndStart)="onDragStart(step, stage.Steps, stage.ObjectID)"
type="button"></button> [dndDraggable]="step"
class="ui-g-6"
dndEffectAllowed="copy">
<div class="ui-g">
<div class="col-md-8">
<h4>{{step.StepType.Description}}</h4>
</div>
<div class="col-md-4">
<button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close"
pButton
type="button"></button>
</div>
</div> </div>
<div class="col-md-6"></div>
</div> </div>
</ng-template> </div>
</p-orderList> </div>
<hr/> <hr/>
</div> </div>
<!-- End steps section --> <!-- End steps section -->
...@@ -214,7 +224,7 @@ ...@@ -214,7 +224,7 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="stage.UseMessaging"
header="{{stageMessagesCount(stage)}}"> 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">
...@@ -328,10 +338,20 @@ ...@@ -328,10 +338,20 @@
</button> </button>
</div> </div>
</div> </div>
<div class="ui-g ui-fluid"> <div (dndDrop)="onDrop($event, genericStages, 000)"
<div class="ui-g-12 ui-md-12"> class="ui-g ui-fluid" dndDropzone>
<p-panel *ngFor="let stage of genericStages" [toggleable]="true" <div [hidden]="draggingId !== 000" dndPlaceholderRef style="background: #CCCCCC; border: 1px dashed #000; width: 100%; height: 53px"></div>
toggler="header"> <div (dndEnd)="onDragEnd($event)"
(dndStart)="onDragStart(stage, genericStages, 000)"
*ngFor="let stage of genericStages"
[dndDraggable]="stage"
class="ui-g-12 ui-md-12"
dndEffectAllowed="copy"
toggler="header"
>
<p-panel [toggleable]="true" #panel>
<p-header> <p-header>
<span (click)="toggleInput($event, 'StageName'+stage.SortOrder, true)" *ngIf="showLabel('StageName'+stage.SortOrder)" <span (click)="toggleInput($event, 'StageName'+stage.SortOrder, true)" *ngIf="showLabel('StageName'+stage.SortOrder)"
class="ui-panel-title"> class="ui-panel-title">
...@@ -345,10 +365,13 @@ ...@@ -345,10 +365,13 @@
name="StageName{{stage.SortOrder}}" name="StageName{{stage.SortOrder}}"
pInputText required/> pInputText required/>
</p-header> </p-header>
<div class="ui-g form-group"> <div class="ui-g form-group" *ngIf="!panel.collapsed">
<!-- Start steps section --> <!-- Start steps section -->
<div *ngIf="!stage.StageType.IsPostStage" 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="col-md-6">
<h3>Steps</h3>
</div>
<div *ngIf="stepTypes && stepTypes.length" class="col-md-offset-8 col-md-4"> <div *ngIf="stepTypes && stepTypes.length" class="col-md-offset-8 col-md-4">
<app-select-2 (valChange)="addStep($event, stage)" [data]="stepTypes" <app-select-2 (valChange)="addStep($event, stage)" [data]="stepTypes"
[value]="0" [value]="0"
...@@ -356,22 +379,31 @@ ...@@ -356,22 +379,31 @@
</app-select-2> </app-select-2>
</div> </div>
</div> </div>
<p-orderList (onReorder)="reAssignStepOrders(stage)" [value]="stage.Steps" <div *ngIf="stage.Steps.length===0">
dragdrop="true" header="Steps"> No steps added...
<ng-template let-step pTemplate="item"> </div>
<div class="drag-block"> <div (dndDrop)="onDrop($event, stage.Steps, stage.ObjectID)"
<div class="col-md-4"> [class.disable-drop]="draggingId!=null && draggingId !== stage.ObjectID" dndDropzone>
<h4>{{step.StepType.Description}}</h4> <div [hidden]="draggingId !== stage.ObjectID" dndPlaceholderRef style="background: #CCCCCC; border: 1px dashed #000; width: 50%; height: 53px"></div>
</div> <div *ngFor="let step of stage.Steps" class="ui-g">
<div class="col-md-2"> <div (dndEnd)="onDragEnd($event)"
<button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close" label=" " (dndStart)="onDragStart(step, stage.Steps, stage.ObjectID)"
pButton [dndDraggable]="step"
type="button"></button> class="ui-g-6"
dndEffectAllowed="copy">
<div class="ui-g">
<div class="col-md-8">
<h4>{{step.StepType.Description}}</h4>
</div>
<div class="col-md-4">
<button (click)="removeStep(step, stage)" [disabled]="showLoader" icon="ui-icon-close"
pButton
type="button"></button>
</div>
</div> </div>
<div class="col-md-6"></div>
</div> </div>
</ng-template> </div>
</p-orderList> </div>
<hr/> <hr/>
</div> </div>
<!-- End steps section --> <!-- End steps section -->
...@@ -397,7 +429,7 @@ ...@@ -397,7 +429,7 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="stage.UseMessaging"
header="{{stageMessagesCount(stage)}}"> 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">
...@@ -473,11 +505,11 @@ ...@@ -473,11 +505,11 @@
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings" label=" " <button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings"
pButton pButton
type="button"></button> type="button"></button>
<button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader" <button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader"
icon="ui-icon-close" label=" " icon="ui-icon-close"
pButton pButton
type="button"></button> type="button"></button>
</div> </div>
...@@ -533,7 +565,7 @@ ...@@ -533,7 +565,7 @@
</p-inputSwitch> </p-inputSwitch>
</div> </div>
</div> </div>
<p-panel [collapsed]="!stage.UseMessaging" [toggleable]="true" <p-panel [collapsed]="!stage.UseMessaging" [toggleable]="stage.UseMessaging"
header="{{stageMessagesCount(stage)}}"> 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">
...@@ -571,7 +603,7 @@ ...@@ -571,7 +603,7 @@
<label for="Variance{{message.ObjectID}}">+/-</label> <label for="Variance{{message.ObjectID}}">+/-</label>
<input [(ngModel)]="message.Variance" <input [(ngModel)]="message.Variance"
[disabled]="showLoader" [disabled]="showLoader"
class="form-control" [id]="'Variance'+message.ObjectID" [id]="'Variance'+message.ObjectID" class="form-control"
name="Variance{{message.ObjectID}}" type="text"> name="Variance{{message.ObjectID}}" type="text">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
...@@ -604,11 +636,10 @@ ...@@ -604,11 +636,10 @@
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings" label=" " <button (click)="configureMessageTemplate(message)" [disabled]="showLoader" icon="ui-icon-settings"
pButton pButton
type="button"></button> type="button"></button>
<button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader" icon="ui-icon-close" <button (click)="removeMessage(message, stage)" *ngIf="!message.IsWithdrawalMessage" [disabled]="showLoader" icon="ui-icon-close"
label=" "
pButton pButton
type="button"></button> type="button"></button>
</div> </div>
......
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.scss
...@@ -101,3 +101,7 @@ label { ...@@ -101,3 +101,7 @@ label {
top: -8px; top: -8px;
background: #fff; background: #fff;
} }
.disable-drop {
pointer-events: none;
}
frontend/angular/src/app/components/edit-workflow-template/edit-workflow-template.component.ts
...@@ -21,6 +21,7 @@ import { UtilsService } from '../../oneit/services/utils.service'; ...@@ -21,6 +21,7 @@ import { UtilsService } from '../../oneit/services/utils.service';
import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service'; import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
import { BaseComponent } from '../base/base.component'; import { BaseComponent } from '../base/base.component';
import { EditWorkflowTemplateService } from './edit-workflow-template.service'; import { EditWorkflowTemplateService } from './edit-workflow-template.service';
import { DndDropEvent } from "ngx-drag-drop";
@Component({ @Component({
selector: 'app-edit-workflow-template', selector: 'app-edit-workflow-template',
...@@ -186,9 +187,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -186,9 +187,9 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
filteredStages(isPreStage: boolean, isPostStage: boolean): Array<WorkflowStageModel> { filteredStages(isPreStage: boolean, isPostStage: boolean): Array<WorkflowStageModel> {
if(isPreStage){ if (isPreStage) {
return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPreStage) return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPreStage)
} else if(isPostStage){ } else if (isPostStage) {
return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPostStage) return this.workflow.WorkFlowStages.filter(stage => stage.StageType.IsPostStage)
} else { } else {
return this.workflow.WorkFlowStages.filter(stage => !stage.StageType.IsPreStage && !stage.StageType.IsPostStage) return this.workflow.WorkFlowStages.filter(stage => !stage.StageType.IsPreStage && !stage.StageType.IsPostStage)
...@@ -346,12 +347,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -346,12 +347,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
addStep($event, stage: WorkflowStageModel): void { addStep($event, stage: WorkflowStageModel): void {
const selectedStepType = this.stepTypeOptions.find(step => step.Value === $event.Value);
if (!$event.data[0] && $event.data[0].Value !== null) {
return;
}
const selectedStepType = this.stepTypeOptions.find(step => step.Value === $event.data[0].Value);
const step = new WorkflowStepModel(stage.Steps.length + 1, selectedStepType, stage.ObjectID); const step = new WorkflowStepModel(stage.Steps.length + 1, selectedStepType, stage.ObjectID);
this.utilsService.addMultiRefObject(step, stage, 'Steps', this.createdObjs); this.utilsService.addMultiRefObject(step, stage, 'Steps', this.createdObjs);
...@@ -439,9 +435,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -439,9 +435,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
resetSelect(key: string): void { resetSelect(key: string): void {
const temp = this[key]; this[key] = [...this[key]];
this[key] = [];
setTimeout(() => (this[key] = temp), 0);
} }
getWorkflowTemplateByID(id): void { getWorkflowTemplateByID(id): void {
...@@ -454,7 +448,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -454,7 +448,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
this.utilsService.clearErrorMessages(); this.utilsService.clearErrorMessages();
const assoc = [ASSOCS.WORKFLOW_STAGE, [ASSOCS.WORKFLOW_STAGE, ASSOCS.WORKFLOW_MESSAGE].join('.'), const assoc = [ASSOCS.WORKFLOW_STAGE, [ASSOCS.WORKFLOW_STAGE, ASSOCS.WORKFLOW_MESSAGE].join('.'),
[ASSOCS.WORKFLOW_STAGE, ASSOCS.WORKFLOW_MESSAGE, ASSOCS.WORKFLOW_STEP].join('.')]; [ASSOCS.WORKFLOW_STAGE, ASSOCS.WORKFLOW_STEP].join('.')];
this.subscriptions.push(this.editWorkflowTemplateService.getWorkflowTemplateByID(id, assoc) this.subscriptions.push(this.editWorkflowTemplateService.getWorkflowTemplateByID(id, assoc)
.subscribe( .subscribe(
...@@ -466,15 +460,23 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -466,15 +460,23 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
this.workflow.WorkFlowStages.forEach(stage => { this.workflow.WorkFlowStages.forEach(stage => {
this.updatedObjs[stage.ObjectID] = stage this.updatedObjs[stage.ObjectID] = stage
stage.Steps = stage.Steps || []; stage.Steps = stage.Steps || [];
stage.WorkFlowMessages = stage.WorkFlowMessages || []; stage.WorkFlowMessages = stage.WorkFlowMessages || [];
stage.WorkFlowMessages.forEach(msg => {
this.generateDelayString(msg)
});
stage.Steps.forEach(step => {
this.removeStepType(step.StepType);
})
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.WorkFlowMessages); this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.WorkFlowMessages);
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.Steps); this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, stage.Steps);
}); });
this.reOrderStages(); this.reOrderStages();
this.showLoader = false; this.showLoader = false;
}, },
...@@ -514,5 +516,48 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn ...@@ -514,5 +516,48 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
} }
} }
onDragStart(item, list, listId): void {
this.draggingItem = list.find(listItem => listItem.ObjectID === item.ObjectID);
this.draggingId = listId;
}
draggingItem: any = null;
draggingId = null;
onDragEnd(event): void {
setTimeout(() => {
this.draggingItem = null;
this.draggingId = null;
});
}
onDrop(event: DndDropEvent, list?: any[], draggingId?: any): void {
if (draggingId !== this.draggingId) {
return;
}
let index = event.index;
if (typeof index === "undefined") {
index = list.length;
}
if (this.draggingItem) {
const oldIndex = list.findIndex(item => item.ObjectID === this.draggingItem.ObjectID);
if (oldIndex < index) {
index -= 1;
}
list.splice(oldIndex, 1);
list.splice(index, 0, this.draggingItem);
}
list.forEach((item, index) => {
item.SortOrder = index;
})
}
// tslint:disable-next-line:max-file-line-count // tslint:disable-next-line:max-file-line-count
} }
frontend/angular/src/app/components/select-2/select-2.component.html
<div class="header-select custom-dropdown w-100"> <div class="header-select custom-dropdown w-100">
<select2 #mySelect [data]="data" [value]="value" (valueChanged)="valChange.emit($event);" <select2 #mySelect [data]="_items" [value]="_value" (valueChanged)="valueChanged($event)"
[options]="options"> [options]="options">
</select2> </select2>
</div> </div>
frontend/angular/src/app/components/select-2/select-2.component.ts
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Select2Component } from "ng2-select2"; import { Select2Component, Select2OptionData } from "ng2-select2";
@Component({ @Component({
selector: 'app-select-2', selector: 'app-select-2',
...@@ -7,9 +7,33 @@ import { Select2Component } from "ng2-select2"; ...@@ -7,9 +7,33 @@ import { Select2Component } from "ng2-select2";
styleUrls: ['./select-2.component.scss'] styleUrls: ['./select-2.component.scss']
}) })
export class SelectTwoComponent { export class SelectTwoComponent {
@Input() data: Array<any>; _items: Array<Select2OptionData>;
_originalItems: Array<any> = [];
_value: Select2OptionData;
ignoreChange = false;
@Input() fieldLabel: string; @Input() fieldLabel: string;
@Input() value: any;
@Input() set data(items) {
this._originalItems = items;
this.ignoreChange = true;
this._items = items.map((elem, index) => {
const item = {
id: elem.ObjectID ? elem.ObjectID : index,
text: elem[this.fieldLabel]
};
return item;
});
setTimeout(() => {
this.ignoreChange = false;
})
}
@Input() set value(value) {
this._value = value.id || value.ObjectID || 0;
}
@ViewChild('mySelect') mySelect: Select2Component; @ViewChild('mySelect') mySelect: Select2Component;
options: {}; options: {};
// tslint:disable-next-line:prefer-output-readonly // tslint:disable-next-line:prefer-output-readonly
...@@ -21,20 +45,19 @@ export class SelectTwoComponent { ...@@ -21,20 +45,19 @@ export class SelectTwoComponent {
ngOnInit(): void { ngOnInit(): void {
this.options = {minimumResultsForSearch: Infinity}; this.options = {minimumResultsForSearch: Infinity};
}
if (!this.data) { valueChanged(event) {
if (this.ignoreChange) {
return; return;
} }
try {
const item = this._originalItems.find(items => items[this.fieldLabel] === event.data[0].text);
if (item) {
this.valChange.emit(item);
}
} catch (e) {
this.value = this.value ? (this.value.id ? this.value.id : }
(this.value.ObjectID ? this.value.ObjectID : 0)) : 0;
this.data.map((elem, index) => {
elem.id = elem.ObjectID ? elem.ObjectID : index;
elem.text = elem[this.fieldLabel];
return elem;
});
} }
} }
frontend/angular/src/app/constants.ts
...@@ -25,5 +25,5 @@ export const SEARCH = { ...@@ -25,5 +25,5 @@ export const SEARCH = {
export const ASSOCS = { export const ASSOCS = {
WORKFLOW_STAGE: 'WorkFlowStages', WORKFLOW_STAGE: 'WorkFlowStages',
WORKFLOW_MESSAGE: 'WorkFlowMessages', WORKFLOW_MESSAGE: 'WorkFlowMessages',
WORKFLOW_STEP: 'WorkFlowSteps' WORKFLOW_STEP: 'Steps'
}; };
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