Skip to content

P
PERFORMA_REPLICA
Commit d70d9155 by Ali Arshad
Options

Added drag-drop.

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