Added drag-drop.

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.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;
         }
+        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 = {
 export const ASSOCS = {
     WORKFLOW_STAGE: 'WorkFlowStages',
     WORKFLOW_MESSAGE: 'WorkFlowMessages',
-    WORKFLOW_STEP: 'WorkFlowSteps'
+    WORKFLOW_STEP: 'Steps'
 };