list-message-templates

Documentation/Prototype-Matchd/src-gen/initial_code/angular/edit-message-template/edit-message-template.component.ts

@@ -115,7 +115,7 @@ export class EditMessageTemplateComponent implements OnInit, OnDestroy {
                             let idToNavigate = this.messageTemplate.ObjectID;
                             if (data["created"][idToNavigate]) {
                                 idToNavigate = data["created"][idToNavigate];
-                                this.router.navigate(["/edit-message-template", idToNavigate]);
+                                this.router.navigate(["/admin/edit-message-template", idToNavigate]);
                                 return;
                             }
                             this.getMessageTemplateByID(idToNavigate);

frontend/angular/.angular-cli.json

@@ -19,7 +19,8 @@
             "testTsconfig": "tsconfig.spec.json",
             "prefix": "app",
             "styles": [
-                "styles.scss"
+                "styles.scss",
+                "assets/css/custom.scss"
             ],
             "scripts": [
                 "../node_modules/jquery/dist/jquery.js",

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

 import { NgModule } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { Select2Module } from 'ng2-select2';
+import { Select2Component, Select2Module } from 'ng2-select2';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { DeviceDetectorModule } from 'ngx-device-detector';
@@ -17,10 +17,10 @@ import { EditWorkflowTemplateComponent } from './components/edit-workflow-templa
 import { EditWorkflowTemplateService } from './components/edit-workflow-template/edit-workflow-template.service';
 import { ListMessageTemplateComponent } from './components/list-message-template/list-message-template.component';
 import { ListWorkFlowsComponent } from './components/list-work-flows/list-work-flows.component';
+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';
 
-
 @NgModule({
     imports: [
         AppRoutingModule,
@@ -38,7 +38,8 @@ import { OneITModule } from './oneit/oneit.module';
         EditMessageTemplateComponent,
         ListMessageTemplateComponent,
         ListWorkFlowsComponent,
-        EditWorkflowTemplateComponent
+        EditWorkflowTemplateComponent,
+        SelectTwoComponent
     ],
     providers: [
         FormBuilder,

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

@@ -10,8 +10,6 @@ import { UtilsService } from './oneit/services/utils.service';
 
 export class AppService {
 
-    HiringTeam = 'ID:37952977';
-
     constructor(
         private enumService: EnumService,
         private searchService: SearchService,

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.service.ts

@@ -53,6 +53,6 @@ export class AdminPortalLayoutService {
     }
 
     getHiringTeamID() {
-        return this.userData ? this.userData.selectedTeam : null;
+        return this.userData ? this.userData.SelectedTeam : null;
     }
 }

frontend/angular/src/app/components/base/base.component.ts

@@ -6,14 +6,15 @@ export class BaseComponent implements OnDestroy {
 
     isLoading = false;
     subscriptions: Array<Subscription> = [];
+    hiringTeam: string;
 
     constructor(
-        protected utilService: UtilsService
+        protected baseUtilsService: UtilsService
     ) {
     }
 
     ngOnDestroy(): void {
-        this.utilService.unsubscribeSubscriptions(this.subscriptions);
+        this.baseUtilsService.unsubscribeSubscriptions(this.subscriptions);
     }
 
 }

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

@@ -9,11 +9,7 @@
         </div>
     </div>
     <div class="ui-g form-group">
-        <div class="ui-g-12 ui-md-3">
-            <img data-elementID="image_sidePanel" title="sidePanel"
-                 src="assets/images/SelectPanel_MessageFlow.png"/>
-        </div>
-        <div class="ui-g-12 ui-md-9">
+        <div class="ui-g-12 ui-md-12">
             <div class="ui-g form-group">
                 <div class="ui-g-12 ui-md-4 s-a-center">
                     <label>Message Template</label>
@@ -110,7 +106,7 @@
                     <div class="ui-g form-group">
                         <div class="ui-g-12 ui-md-3 ui-fluid">
                             <p-button label="Cancel" [disabled]="showLoader"
-                                      routerLink="/edit-message-template"></p-button>
+                                      routerLink="/admin/list-message-templates"></p-button>
                         </div>
                         <div class="ui-g-12 ui-md-3 ui-fluid">
                             <p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader"

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

@@ -11,6 +11,7 @@ import { PlaceholderOptionsEnum } from '../../models/placeholderOptions.enum';
 import { TemplateTypeEnum } from '../../models/templateType.enum';
 import { SaveService } from '../../oneit/services/save.service';
 import { UtilsService } from '../../oneit/services/utils.service';
+import { AdminPortalLayoutService } from '../admin-portal/admin-portal-layout/admin-portal-layout.service';
 import { BaseComponent } from '../base/base.component';
 import { EditMessageTemplateService } from './edit-message-template.service';
 
@@ -47,7 +48,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         private utilsService: UtilsService,
         private saveService: SaveService,
         private appService: AppService,
-        private editMessageTemplateService: EditMessageTemplateService
+        private editMessageTemplateService: EditMessageTemplateService,
+        private adminPortalLayoutService: AdminPortalLayoutService
     ) {
         super(utilsService);
     }
@@ -56,9 +58,22 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         this.createdObjs = {};
         this.updatedObjs = {};
         this.deletedObjs = {};
-        this.utilsService.resetCounter();
         this.showLoader = true;
+
+        this.utilsService.resetCounter();
         this.getPlaceholderOptions();
+        if (!this.adminPortalLayoutService.userData) {
+            this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+                .subscribe(
+                    () => {
+                        this.startComponent();
+                    }
+                ));
+        }
+        this.startComponent();
+    }
+
+    startComponent(): void {
         setTimeout(() => {
             this.subscriptions.push(this.appService.getMessageTemplateTypeEnum()
                 .subscribe(
@@ -67,19 +82,23 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                         this.subscriptions.push(this.activatedRoute.params
                             .subscribe(
                                 (params: Params) => {
+
                                     if (params.id && params.id !== '0') {
                                         this.editMode = true;
+
                                         this.getMessageTemplateByID(params.id);
                                     } else {
-                                        // TODO: Hardcoded for now
-                                        this.messageTemplate.HiringTeam = this.appService.HiringTeam;
+                                        this.messageTemplate.HiringTeam = this.adminPortalLayoutService.getHiringTeamID().ObjectID;
+
                                         if (this.messageTemplateTypes) {
                                             this.messageTemplate.TemplateType = this.messageTemplateTypes[0];
                                         }
+
                                         this.utilsService.createObject(this.messageTemplate, this.createdObjs);
                                         this.setInputListener();
                                         this.showLoader = false;
                                     }
+
                                 }
                             ));
                     },
@@ -93,7 +112,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
     showSaveBtn(): boolean {
         return this.messageTemplate && this.messageTemplate.ObjectID ?
-            (this.messageTemplate.HiringTeam === this.appService.HiringTeam) : false;
+            (this.messageTemplate.HiringTeam === this.adminPortalLayoutService.getHiringTeamID().ObjectID ||
+                !this.editMode) : false;
     }
 
     showSaveCopyBtn(): boolean {
@@ -118,8 +138,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                 }
 
             } else {
-
                 editElement = document.getElementById('messageContentTxtAreaId');
+
                 if (editElement) {
                     ['keyup', 'click'].forEach(event => {
                         editElement.addEventListener(event, () => {
@@ -134,6 +154,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     addAnchorText(show: boolean): void {
+
         if (show) {
             const delta = {
                 ops: [
@@ -146,6 +167,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         } else {
             this.linkText = '';
         }
+
     }
 
     addPlaceholderInMessageContent($event): void {
@@ -212,6 +234,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     getCursorPos(input): number {
+
         if ('selectionStart' in input && document.activeElement === input) {
             return input.selectionStart;
         }
@@ -220,11 +243,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     getMessageTemplateByID(id): void {
-
         this.showLoader = true;
         this.createdObjs = {};
         this.updatedObjs = {};
         this.deletedObjs = {};
+
         this.utilsService.resetCounter();
         this.utilsService.clearErrorMessages();
 
@@ -256,7 +279,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                 .subscribe(
                     () => {
                         this.utilsService.handleSuccess();
-                        this.router.navigate(['/list-message-templates']);
+                        this.router.navigate(['/admin/list-message-templates']);
                     },
                     error => {
                         this.showLoader = false;

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

@@ -53,7 +53,7 @@
                                     <div class="ui-g-12 ui-md-2">
                                         <label>Header Text</label>
                                     </div>
-                                    <div class="ui-g-12 ui-md-4 ui-fluid">
+                                    <div class="ui-g-12 ui-md-10 ui-fluid">
                                         <input [(ngModel)]="workflow.VerificationHeaderText"
                                                name="VerificationHeaderText"
                                                fieldLabel="Verification Header Text" type="text" pInputText
@@ -63,37 +63,45 @@
                                 <h4>Application</h4>
                                 <hr/>
                                 <div class="ui-g form-group">
-                                    <div class="ui-g-12 ui-md-2">
+                                    <div class="ui-g-12 ui-md-6">
+                                        <div class="ui-g-12 ui-md-4">
                                             <label> Capture CV </label>
                                         </div>
-                                    <div class="ui-g-12 ui-md-4">
+                                        <div class="ui-g-12 ui-md-2">
                                             <p-inputSwitch [(ngModel)]="workflow.CaptureCV" name="CaptureCV">
                                             </p-inputSwitch>
                                         </div>
-                                    <div class="ui-g-12 ui-md-2">
-                                        <label> Mandatory </label>
                                     </div>
+                                    <div *ngIf="workflow.CaptureCV" class="ui-g-12 ui-md-6">
                                         <div class="ui-g-12 ui-md-4">
+                                            <label> Mandatory </label>
+                                        </div>
+                                        <div class="ui-g-12 ui-md-2">
                                             <p-inputSwitch [(ngModel)]="workflow.IsCVMandatory" name="CaptureCV">
                                             </p-inputSwitch>
                                         </div>
                                     </div>
+                                </div>
                                 <div class="ui-g form-group">
-                                    <div class="ui-g-12 ui-md-2">
+                                    <div class="ui-g-12 ui-md-6">
+                                        <div class="ui-g-12 ui-md-4">
                                             <label>Capture Cover Letter</label>
                                         </div>
-                                    <div class="ui-g-12 ui-md-4">
+                                        <div class="ui-g-12 ui-md-2">
                                             <p-inputSwitch [(ngModel)]="workflow.CaptureCL" name="CaptureCV">
                                             </p-inputSwitch>
                                         </div>
-                                    <div class="ui-g-12 ui-md-2">
-                                        <label> Mandatory </label>
                                     </div>
+                                    <div *ngIf="workflow.CaptureCL" class="ui-g-12 ui-md-6">
                                         <div class="ui-g-12 ui-md-4">
+                                            <label> Mandatory </label>
+                                        </div>
+                                        <div class="ui-g-12 ui-md-2">
                                             <p-inputSwitch [(ngModel)]="workflow.IsCLMandatory" name="CaptureCV">
                                             </p-inputSwitch>
                                         </div>
                                     </div>
+                                </div>
                                 <div class="ui-g form-group">
                                     <div class="ui-g-12 ui-md-2">
                                         <label>Button Text</label>
@@ -116,37 +124,61 @@
                                         </p-dropdown>
                                     </div>
                                 </div>
+                                <div class="ui-g form-group">
+                                    <div class="ui-g-12 ui-md-6">
+                                        <div class="ui-g-12 ui-md-4">
+                                            <label>Header Text for Thank You page</label>
                                         </div>
+                                        <div class="ui-g-12 ui-md-8 ui-fluid">
+                                            <input [(ngModel)]="workflow.ThankYouHeaderText"
+                                                   name="ThankYouHeaderText"
+                                                   fieldLabel="Header Text for Thank You page" type="text" pInputText
+                                                   class="ui-inputtext"/>
                                         </div>
-                    </p-panel>
                                     </div>
+                                    <div class="ui-g-12 ui-md-6">
+                                        <div class="ui-g-12 ui-md-4">
+                                            <label>Secondary Text</label>
                                         </div>
-            <div class="ui-g form-group">
-                <div class="ui-g-12 ui-md-12">
-                    <div class="ui-g form-group">
-                        <div class="ui-g-12 ui-md-12">
-                            <div class="ui-g-12 card card-w-title">
+                                        <div class="ui-g-12 ui-md-8 ui-fluid">
+                                            <input [(ngModel)]="workflow.ThankYouSecondaryText"
+                                                   name="ThankYouSecondaryText"
+                                                   fieldLabel="Secondary Text" type="text"
+                                                   pInputText class="ui-inputtext"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <h4>Job Outline Page</h4>
+                                <hr/>
                                 <div class="ui-g form-group">
                                     <div class="ui-g-12 ui-md-2">
-                                        <label>Header Text for Thank You page</label>
+                                        <label>Button Text</label>
                                     </div>
                                     <div class="ui-g-12 ui-md-4 ui-fluid">
-                                        <input [(ngModel)]="workflowTemplate.HeaderTextforThankYoupage"
-                                               name="HeaderTextforThankYoupage{{workflowTemplate.ObjectID}}"
-                                               fieldLabel="Header Text for Thank You page" type="text" pInputText
-                                               class="ui-inputtext">
+                                        <input [(ngModel)]="workflow.JobOutlineButtonText"
+                                               name="JobOutlineButtonText"
+                                               fieldLabel="Job Outline Button Text" type="text" pInputText
+                                               class="ui-inputtext"/>
+                                    </div>
                                 </div>
+                                <div class="ui-g form-group">
                                     <div class="ui-g-12 ui-md-2">
-                                        <label>Secondary Text</label>
+                                        <h4>Steps</h4>
                                     </div>
                                     <div class="ui-g-12 ui-md-4 ui-fluid">
-                                        <input [(ngModel)]="workflowTemplate.SecondaryText"
-                                               name="SecondaryText{{workflowTemplate.ObjectID}}"
-                                               fieldLabel="Secondary Text" type="text"
-                                               pInputText class="ui-inputtext">
+
                                     </div>
                                 </div>
+                                <hr/>
+                            </div>
                         </div>
+                    </p-panel>
+                </div>
+            </div>
+            <div class="ui-g form-group">
+                <div class="ui-g-12 ui-md-12">
+                    <div class="ui-g form-group">
+                        <div class="ui-g-12 ui-md-12">
                             <div class="ui-g-12 card card-w-title">
                                 <h4>Job Outline Page</h4>
                                 <div class="ui-g form-group">

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

@@ -2,7 +2,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-
 import { AppService } from '../../app.service';
 import { ResponseActionEnum } from '../../models/responseAction.enum';
 import { StageTypeEnum } from '../../models/stageType.enum';
@@ -11,9 +10,8 @@ import { WorkflowTemplateModel } from '../../models/workflowTemplate.model';
 import { SaveService } from '../../oneit/services/save.service';
 import { UtilsService } from '../../oneit/services/utils.service';
 import { BaseComponent } from '../base/base.component';
-import { EditWorkflowTemplateService } from './edit-workflow-template.service';
-
 import { WorkflowTemplate } from './edit-workflow-template.model';
+import { EditWorkflowTemplateService } from './edit-workflow-template.service';
 
 @Component({
     selector: 'app-edit-workflow-template',
@@ -39,10 +37,6 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
     s: Array<any> = [];
     messagetemplates: Array<any> = [];
     messagetemplate_withdraws: Array<any> = [];
-    Capture_CVs = [];
-    Mandatory_CVs = [];
-    Capture_Cover_Letters = [];
-    Mandatory_cover_letters = [];
     Automatically_progress_to_next_stages = [];
     Use_messagings = [];
 
@@ -77,6 +71,7 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
                     } else {
                         this.utilsService.createObject(this.workflow, this.createdObjs);
                         this.setDefaults();
+                        this.showLogs();
                         this.showLoader = false;
                     }
                 }
@@ -259,4 +254,8 @@ export class EditWorkflowTemplateComponent extends BaseComponent implements OnIn
             );
         }
     }
+
+    showLogs(): void {
+        console.log(this.workflow);
+    }
 }

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

 <form #form="ngForm">
-    <div class="ui-g ui-fluid">
-        <div class="ui-g-12 nopad">
-            <p-toolbar>
-                <div class="ui-toolbar-group-left">
-                    Messages
-                </div>
-                <div class="ui-toolbar-group-right actionBtn">
-                    <button pButton type="button" routerLink="/edit-message-template" label="Add Message Template"
-                            icon="ui-icon-"></button>
-                </div>
-            </p-toolbar>
-        </div>
-    </div>
-    <div class="ui-g form-group">
-        <div class="ui-g-12 ui-md-3">
-            <img data-elementID="image_sidePanel" title="sidePanel"
-                 src="assets/images/SelectPanel_MessageFlow.png"/>
-        </div>
-        <div class="ui-g-12 ui-md-9">
-            <div class="ui-g-offset-3 pull-right">
-                <label>Sort By</label>
-                <p-dropdown [options]="sortOptions" name="sort" [(ngModel)]="sortSelected"
-                            (onClick)="sortMessageTemplates()"
-                            (onShow)="setDefaultSorter()"
-                            (onHide)="allowSort = false"
-                            optionLabel="description">
-                </p-dropdown>
-            </div>
-            <h1>My Templates</h1>
+    <div class="ui-g ui-fluid mt-80">
+        <div class="ui-g-12">
+            <div class="ui-g-2 listing-title">Messages</div>
+            <div class="ui-g-3 pull-right">
+                <a routerLink="/admin/edit-message-template" class="add-more-btn">Add Message Template</a>
+            </div>
+        </div>
+        <div class="ui-g-12 pt-0 pb-0">
+            <div class="ui-g-4 pull-right">
+                <div class="ui-g-4"><label class="order-label">Sort By</label></div>
+                <div class="ui-g-8">
+                    <app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description"
+                                  (valChange)="sortMessageTemplates($event)">
+                    </app-select-2>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="ui-g form-group pt-0">
+        <div class="ui-g-12 ui-md-12 pt-0">
+            <h3>My Templates</h3>
             <hr/>
             <div *ngFor="let message of myTemplates" class="messageTemplate">
                 <div class="messageRow">
@@ -46,7 +38,7 @@
                     </div>
                 </div>
             </div>
-            <h1>Shared Templates</h1>
+            <h3>Shared Templates</h3>
             <hr/>
             <div *ngFor="let message of sharedTemplates" class="messageTemplate">
                 <div class="messageRow">

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

@@ -14,6 +14,8 @@
         .templateName {
             width: 95%;
             align-self: center;
+            text-overflow: ellipsis;
+            word-break: break-all;
 
             span {
                 cursor: pointer;

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

@@ -21,7 +21,6 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
     sharedTemplates: Array<MessageTemplateModel> = [];
     sortOptions: Array<SorterModel>;
     sortSelected: SorterModel;
-    allowSort: boolean;
     showLoader = false;
 
     constructor(
@@ -39,7 +38,6 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
             new SorterModel('Alphabetical (A-Z)', true),
             new SorterModel('Alphabetical (Z-A)', false)
         ];
-        // this.sortSelected = new SorterModel('Alphabetical (A-Z)', true);
         this.showLoader = true;
         const sharedMsgParams = {
             OnlyGlobalTemplate: true
@@ -47,25 +45,27 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
         const myMsgParams = {
             OnlyGlobalTemplate: false
         };
+
         this.subscriptions.push(
             this.appService.getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', myMsgParams, [], SEARCH.MESSAGE_TEMPLATE)
                 .subscribe(
                     messages => {
                         this.myTemplates = messages;
+                        this.sortSpecificTemplate('myTemplates');
                     },
                     error => {
                         this.showLoader = false;
                         this.utilsService.handleError(error);
                     }
                 )
-        )
-        ;
+        );
         this.subscriptions.push(
             this.appService
                 .getSearchListing(SERVICES.MESSAGE_TEMPLATES, 'All', sharedMsgParams, [], SEARCH.MESSAGE_TEMPLATE)
                 .subscribe(
                     messages => {
                         this.sharedTemplates = messages;
+                        this.sortSpecificTemplate('sharedTemplates');
                     },
                     error => {
                         this.showLoader = false;
@@ -76,31 +76,26 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
         setTimeout(() => (this.showLoader = false), 0);
     }
 
-    sortMessageTemplates(): void {
+    sortSpecificTemplate(arrayName: string): void {
+        this[arrayName] = this.utilsService.sort(this[arrayName],
+            ['TemplateName'], [this.sortOptions[0].ascending ? 1 : -1], false);
+    }
 
-        if (this.allowSort) {
+    sortMessageTemplates($event): void {
+        if (!$event.data[0]) {
+            return;
+        }
+        const sort = $event.data[0];
         this.showLoader = true;
         this.myTemplates = this.utilsService.sort(this.myTemplates,
-                ['TemplateName'], [this.sortSelected.ascending ? 1 : -1], false);
+            ['TemplateName'], [sort.ascending ? 1 : -1], false);
         this.sharedTemplates = this.utilsService.sort(this.sharedTemplates,
-                ['TemplateName'], [this.sortSelected.ascending ? 1 : -1], false);
-            this.allowSort = false;
+            ['TemplateName'], [sort.ascending ? 1 : -1], false);
         this.showLoader = false;
-        }
 
     }
 
-    setDefaultSorter(): void {
-
-        if (!this.sortSelected) {
-            this.sortSelected = new SorterModel('Alphabetical (A-Z)', true);
-        }
-
-        this.allowSort = true;
-    }
-
     onRowSelect(data: MessageTemplateModel): void {
-        this.showLoader = true;
-        this.router.navigate(['/edit-message-template', data.ObjectID]);
+        this.router.navigate(['/admin/edit-message-template', data.ObjectID]);
     }
 }

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

 <form #form="ngForm">
-    <div class="ui-g ui-fluid">
-        <div class="ui-g-12 nopad">
-            <p-toolbar>
-                <div class="ui-toolbar-group-left">
-                    Workflows
+    <div class="ui-g ui-fluid mt-80">
+        <div class="ui-g-12">
+            <div class="ui-g-2 listing-title">Workflows</div>
+            <div class="ui-g-3 pull-right">
+                <a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a>
             </div>
-                <div class="ui-toolbar-group-right actionBtn">
-                    <button pButton type="button" routerLink="/edit-workflow-template" label="Add Workflow Template"
-                            icon="ui-icon-"></button>
         </div>
-            </p-toolbar>
-        </div>
-    </div>
-    <div class="ui-g form-group">
-        <div class="ui-g-12 ui-md-3">
-            <img data-elementID="image_sidePanel" title="sidePanel"
-                 src="assets/images/SelectPanel_MessageFlow.png"/>
-        </div>
-        <div class="ui-g-12 ui-md-9">
-            <div class="ui-g form-group">
-                <div class="ui-g-12 ui-md-7">
-                </div>
-                <div class="ui-g-12 ui-md-2">
-                    <label> Order By </label>
-                </div>
-                <div class="ui-g-12 ui-md-3 ui-fluid">
+        <div class="ui-g-12">
+            <div class="ui-g-4 pull-right">
+                <div class="ui-g-4"><label class="order-label">Sort By</label></div>
+                <div class="ui-g-8">
                     <p-dropdown [options]="sortOptions" name="sort" [(ngModel)]="sortSelected"
                                 (onChange)="sortWorkFlowTemplates()"
                                 optionLabel="description">
                     </p-dropdown>
                 </div>
             </div>
+        </div>
+    </div>
+    <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-12 pt-0">
             <div class="ui-g-12 card card-w-title">
                 <h4>My Templates</h4>
                 <div *ngFor="let workflow of myTemplates" class="ui-g form-group">

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

 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 import { AppService } from '../../app.service';
 import { SEARCH, SERVICES } from '../../constants';
 import { SorterModel } from '../../models/sorterModel';
 import { WorkflowTemplateModel } from '../../models/workflowTemplate.model';
-import { SearchService } from '../../oneit/services/search.service';
 import { UtilsService } from '../../oneit/services/utils.service';
 import { BaseComponent } from '../base/base.component';
 
@@ -24,9 +23,7 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
 
     constructor(
         private router: Router,
-        private activatedRoute: ActivatedRoute,
         private utilsService: UtilsService,
-        private searchService: SearchService,
         private appService: AppService
     ) {
         super(utilsService);
@@ -80,7 +77,6 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
     }
 
     onRowSelect(data: WorkflowTemplateModel): void {
-        this.showLoader = true;
-        this.router.navigate(['/edit-workflow-template', data.ObjectID]);
+        this.router.navigate(['/admin/edit-workflow-template', data.ObjectID]);
     }
 }

frontend/angular/src/app/components/select-2/select-2.component.html

+<div class="header-select custom-dropdown w-100">
+    <select2 [data]="data" [value]="selectedData" (valueChanged)="valChange.emit($event)"
+             [options]="options">
+    </select2>
+</div>

frontend/angular/src/app/components/select-2/select-2.component.scss

+.custom-dropdown {
+    margin: 0;
+
+    ::ng-deep {
+        .select2-container {
+            width: 100% !important;
+        }
+    }
+}

frontend/angular/src/app/components/select-2/select-2.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-select-2',
+    templateUrl: './select-2.component.html',
+    styleUrls: ['./select-2.component.scss']
+})
+export class SelectTwoComponent {
+    @Input() data: Array<any>;
+    @Input() fieldLabel: string;
+    @Input() value: any;
+    selectedData: string;
+    options: {};
+    // tslint:disable-next-line:prefer-output-readonly
+    @Output() valChange: EventEmitter<any> = new EventEmitter<any>();
+
+    // tslint:disable-next-line:no-empty
+    constructor() {
+    }
+
+    ngOnInit(): void {
+        this.data.map(elem => {
+            elem.id = elem.ObjectID;
+            elem.text = elem[this.fieldLabel];
+
+            return elem;
+        });
+        this.selectedData = this.data[0] ? this.data[0].ObjectID : '';
+        this.options = {minimumResultsForSearch: Infinity};
+    }
+
+}

frontend/angular/src/app/models/sorterModel.ts

 export class SorterModel {
+    static count;
     description;
     ascending;
+    ObjectID;
 
     constructor(des: string, sort: boolean) {
+        this.ObjectID = SorterModel.count++;
         this.description = des;
         this.ascending = sort;
     }
 }
+
+SorterModel.count = 0;

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

+.listing-title {
+    color: #1a2531;
+    font-size: 28px;
+    font-weight: 300;
+}
+
+.pt-0 {
+    padding-top: 0 !important;
+}
+
+.pb-0 {
+    padding-bottom: 0 !important;
+}
+
+.mt-80 {
+    margin-top: 80px;
+}
+
+.w-100 {
+    width: 100% !important;
+}