Skip to content

P
PERFORMA_REPLICA
Commit 5121545b by GD-A-150752
Options

SelectTwo Component

parent 6cba2294
Showing with 170 additions and 162 deletions
frontend/angular/src/app/components/edit-message-template/edit-message-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">
<div class="ui-g ui-fluid mt-80"> <div class="ui-g ui-fluid">
<div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Message Template</div> <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Message Template</div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g form-group">
...@@ -23,12 +23,10 @@ ...@@ -23,12 +23,10 @@
</div> </div>
<div class="ui-g-12 ui-md-4 ui-fluid" <div class="ui-g-12 ui-md-4 ui-fluid"
*ngIf="this.messageTemplateTypes.length && this.messageTemplate && this.messageTemplate.TemplateType"> *ngIf="this.messageTemplateTypes.length && this.messageTemplate && this.messageTemplate.TemplateType">
<div class="header-select custom-dropdown w-100"> <app-select-2 [data]="messageTemplateTypes" [value]="templateTypeId"
<select2 [data]="messageTemplateTypes" [value]="this.messageTemplate.TemplateType.id" fieldLabel="Description"
(valueChanged)="storeMessageContent($event)" (valChange)="storeMessageContent($event)">
[options]="options"> </app-select-2>
</select2>
</div>
</div> </div>
</div> </div>
<div class="ui-g form-group" *ngIf="emailTemplateType()"> <div class="ui-g form-group" *ngIf="emailTemplateType()">
...@@ -43,12 +41,10 @@ ...@@ -43,12 +41,10 @@
[disabled]="showLoader"> [disabled]="showLoader">
</div> </div>
<div class="ui-g-12 ui-md-4" *ngIf="subjectPlaceholderOptions.length"> <div class="ui-g-12 ui-md-4" *ngIf="subjectPlaceholderOptions.length">
<div class="header-select custom-dropdown w-100"> <app-select-2 [data]="subjectPlaceholderOptions" [value]="0"
<select2 [data]="subjectPlaceholderOptions" [value]="subjectPlaceholderOptions[0].id" fieldLabel="Description"
(valueChanged)="addPlaceholderInSubject($event)" (valChange)="addPlaceholderInSubject($event)">
[options]="options"> </app-select-2>
</select2>
</div>
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g form-group">
...@@ -58,12 +54,10 @@ ...@@ -58,12 +54,10 @@
<div class="ui-g-12 ui-md-4" *ngIf="emailTemplateType()"> <div class="ui-g-12 ui-md-4" *ngIf="emailTemplateType()">
</div> </div>
<div class="ui-g-12 ui-md-4" *ngIf="contentPlaceholderOptions.length"> <div class="ui-g-12 ui-md-4" *ngIf="contentPlaceholderOptions.length">
<div class="header-select custom-dropdown w-100"> <app-select-2 [data]="contentPlaceholderOptions" [value]="0"
<select2 [data]="contentPlaceholderOptions" [value]="contentPlaceholderOptions[0].id" fieldLabel="Description"
(valueChanged)="addPlaceholderInMessageContent($event)" (valChange)="addPlaceholderInMessageContent($event)">
[options]="options"> </app-select-2>
</select2>
</div>
<p-overlayPanel #contentLinkModal> <p-overlayPanel #contentLinkModal>
<label class="ui-g-12" style="padding-left: 0;">Please enter anchor text</label> <label class="ui-g-12" style="padding-left: 0;">Please enter anchor text</label>
<input pInputText name="contentLinkModal" type="text" class="ui-g-12" <input pInputText name="contentLinkModal" type="text" class="ui-g-12"
......
frontend/angular/src/app/components/edit-message-template/edit-message-template.component.ts
...@@ -42,6 +42,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -42,6 +42,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
showLoader = false; showLoader = false;
editMode = false; editMode = false;
options = {minimumResultsForSearch: Infinity}; options = {minimumResultsForSearch: Infinity};
templateTypeId = 0;
constructor( constructor(
private router: Router, private router: Router,
...@@ -87,10 +88,6 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -87,10 +88,6 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
} }
this.messageTemplateTypes = data; this.messageTemplateTypes = data;
this.messageTemplateTypes.map((elem, index) => {
elem.id = index;
elem.text = elem.Description;
});
this.subscriptions.push(this.activatedRoute.params this.subscriptions.push(this.activatedRoute.params
.subscribe( .subscribe(
...@@ -199,6 +196,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -199,6 +196,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
} }
addPlaceholderInMessageContent($event): void { addPlaceholderInMessageContent($event): void {
if (!$event.data[0]) {
return;
}
this.contentPlaceholder = $event.data[0]; this.contentPlaceholder = $event.data[0];
if (!this.contentPlaceholder || !this.contentPlaceholder.Value) { if (!this.contentPlaceholder || !this.contentPlaceholder.Value) {
...@@ -221,6 +223,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -221,6 +223,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
this.setValueAndFocus(textarea, 'messageContentTxtArea', this.contentPlaceholder.Placeholder); this.setValueAndFocus(textarea, 'messageContentTxtArea', this.contentPlaceholder.Placeholder);
} }
this.resetSelect('contentPlaceholderOptions');
} }
showPlainText(HTMLTitle: string): string { showPlainText(HTMLTitle: string): string {
...@@ -233,9 +236,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -233,9 +236,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
} }
storeMessageContent($event): void { storeMessageContent($event): void {
if (!$event.data[0]) { if (!$event.data[0]) {
return; return;
} }
this.messageTemplate.TemplateType = $event.data[0]; this.messageTemplate.TemplateType = $event.data[0];
if (this.messageTemplate.MessageContent !== undefined) { if (this.messageTemplate.MessageContent !== undefined) {
...@@ -267,6 +272,13 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -267,6 +272,13 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
const input: HTMLInputElement = document.getElementById('subjectInputId') as HTMLInputElement; const input: HTMLInputElement = document.getElementById('subjectInputId') as HTMLInputElement;
this.setValueAndFocus(input, 'subjectInput', this.subjectPlaceholder.Placeholder); this.setValueAndFocus(input, 'subjectInput', this.subjectPlaceholder.Placeholder);
} }
this.resetSelect('subjectPlaceholderOptions');
}
resetSelect(key: string): void {
const temp = this[key];
this[key] = [];
setTimeout(() => (this[key] = temp), 0);
} }
getCursorPos(input): number { getCursorPos(input): number {
...@@ -291,8 +303,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -291,8 +303,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
.subscribe( .subscribe(
data => { data => {
this.messageTemplate = data; this.messageTemplate = data;
this.messageTemplate.TemplateType = this.templateTypeId =
this.messageTemplateTypes.find(elem => elem.Value === this.messageTemplate.TemplateType.Value); this.messageTemplateTypes.find(elem => elem.Value === this.messageTemplate.TemplateType.Value).id;
this.showLoader = false; this.showLoader = false;
setTimeout(() => this.setInputListener(), 0); setTimeout(() => this.setInputListener(), 0);
}, },
......
frontend/angular/src/app/components/list-message-template/list-message-template.component.html
<form #form="ngForm" class="bg-grey"> <div class="dashboard-content-area second-part">
<div class="ui-g ui-fluid mt-80"> <form #form="ngForm">
<div class="jobs-list-shorting"> <div class="ui-g ui-fluid">
<div class="ui-g-3 d-job-title all-jobs-title">Messages</div> <div class="jobs-list-shorting">
<div class="ui-g-3"> <div class="ui-g-3 d-job-title all-jobs-title">Messages</div>
<a routerLink="/admin/edit-message-template" class="add-more-btn">Add Message Template</a> <div class="ui-g-4">
</div> <a routerLink="/admin/edit-message-template" class="add-more-btn">Add Message Template</a>
<div class="shorting-dropdown"> </div>
<div class="order-label">order by</div> <div class="shorting-dropdown">
<app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description" <div class="order-label">order by</div>
(valChange)="sortMessageTemplates($event)"> <app-select-2 [data]="sortOptions" [value]="sortOptions[0]" fieldLabel="description"
</app-select-2> (valChange)="sortMessageTemplates($event)">
</app-select-2>
</div>
</div> </div>
</div> </div>
</div> <div class="ui-g form-group pt-0">
<div class="ui-g form-group pt-0"> <div class="ui-g-12 ui-md-12 pt-0">
<div class="ui-g-12 ui-md-12 pt-0"> <h3>My Templates</h3>
<h3>My Templates</h3> <hr/>
<hr/> <div class="main-client-list">
<div class="main-client-list"> <div class="template-list" *ngFor="let message of myTemplates" id="{{message.ObjectID}}">
<div class="template-list" *ngFor="let message of myTemplates" id="{{message.ObjectID}}"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 ">
<div class="job-template-left job-template-cl1 "> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField"
<span class="calcField" (click)="onRowSelect(message)">{{message.TemplateName}}</span> (click)="onRowSelect(message)">{{message.TemplateName}}</span>
</div>
</div> </div>
</div> <div class="job-template-left job-template-cl4">
<div class="job-template-left job-template-cl2 no-border"> <div class="m-user-right-padlock">
</div> <a>
<div class="job-template-left job-template-cl3 no-border">
</div>
<div class="job-template-left job-template-cl4">
<div class="m-user-right-padlock">
<a>
<span (click)="onRowSelect(message)" class="m-user-right-padlockicon"> <span (click)="onRowSelect(message)" class="m-user-right-padlockicon">
<span class="pencil"></span> <span class="pencil"></span>
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="template-list" *ngIf="myTemplates.length === 0">
<div class="template-list" *ngIf="myTemplates.length === 0"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 no-border">
<div class="job-template-left job-template-cl1 no-border"> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField">No records found.</span>
<span class="calcField">No records found.</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <h3>Shared Templates</h3>
<h3>Shared Templates</h3> <hr/>
<hr/> <div class="main-client-list">
<div class="main-client-list"> <div class="template-list" *ngFor="let message of sharedTemplates" id="{{message.ObjectID}}">
<div class="template-list" *ngFor="let message of sharedTemplates" id="{{message.ObjectID}}"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 ">
<div class="job-template-left job-template-cl1 "> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField"
<span class="calcField" (click)="onRowSelect(message)">{{message.TemplateName}}</span> (click)="onRowSelect(message)">{{message.TemplateName}}</span>
</div>
</div> </div>
</div> <div class="job-template-left job-template-cl4">
<div class="job-template-left job-template-cl2 no-border"> <div class="m-user-right-padlock">
</div> <a>
<div class="job-template-left job-template-cl3 no-border">
</div>
<div class="job-template-left job-template-cl4">
<div class="m-user-right-padlock">
<a>
<span (click)="onRowSelect(message)" class="m-user-right-padlockicon"> <span (click)="onRowSelect(message)" class="m-user-right-padlockicon">
<span class="pencil"></span> <span class="pencil"></span>
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="template-list" *ngIf="sharedTemplates.length === 0">
<div class="template-list" *ngIf="sharedTemplates.length === 0"> <div class="template-row">
<div class="template-row"> <div class="job-template-left job-template-cl1 no-border">
<div class="job-template-left job-template-cl1 no-border"> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField">No records found.</span>
<span class="calcField">No records found.</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner> </form>
</form> </div>
frontend/angular/src/app/components/list-message-template/list-message-template.component.ts
...@@ -19,7 +19,6 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -19,7 +19,6 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
myTemplates: Array<MessageTemplateModel> = []; myTemplates: Array<MessageTemplateModel> = [];
sharedTemplates: Array<MessageTemplateModel> = []; sharedTemplates: Array<MessageTemplateModel> = [];
sortOptions: Array<SorterModel>; sortOptions: Array<SorterModel>;
sortSelected: SorterModel;
showLoader = false; showLoader = false;
constructor( constructor(
......
frontend/angular/src/app/components/list-work-flows/list-work-flows.component.html
<form #form="ngForm" class="bg-grey"> <div class="dashboard-content-area second-part">
<div class="ui-g ui-fluid mt-80"> <form #form="ngForm">
<div class="jobs-list-shorting"> <div class="ui-g ui-fluid">
<div class="ui-g-3 d-job-title all-jobs-title">Workflows</div> <div class="jobs-list-shorting">
<div class="ui-g-3"> <div class="ui-g-3 d-job-title all-jobs-title">Workflows</div>
<a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a> <div class="ui-g-4">
</div> <a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a>
<div class="shorting-dropdown"> </div>
<div class="order-label">order by</div> <div class="shorting-dropdown">
<app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description" <div class="order-label">order by</div>
(valChange)="sortWorkFlowTemplates($event)"> <app-select-2 [data]="sortOptions" [value]="sortOptions[0]" fieldLabel="description"
</app-select-2> (valChange)="sortWorkFlowTemplates($event)">
</app-select-2>
</div>
</div> </div>
</div> </div>
</div> <div class="ui-g form-group pt-0">
<div class="ui-g form-group pt-0"> <div class="ui-g-12 ui-md-12 pt-0">
<div class="ui-g-12 ui-md-12 pt-0"> <h3>My Templates</h3>
<h3>My Templates</h3> <hr/>
<hr/> <div class="main-client-list">
<div class="main-client-list"> <div class="template-list" *ngFor="let workflow of myTemplates" id="{{workflow.ObjectID}}">
<div class="template-list" *ngFor="let workflow of myTemplates" id="{{workflow.ObjectID}}"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 ">
<div class="job-template-left job-template-cl1 "> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField"
<span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span> (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
</div>
</div> </div>
</div> <div class="job-template-left job-template-cl4">
<div class="job-template-left job-template-cl2 no-border"> <div class="m-user-right-padlock">
</div> <a>
<div class="job-template-left job-template-cl3 no-border">
</div>
<div class="job-template-left job-template-cl4">
<div class="m-user-right-padlock">
<a>
<span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon"> <span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
<span class="pencil"></span> <span class="pencil"></span>
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="template-list" *ngIf="myTemplates.length === 0">
<div class="template-list" *ngIf="myTemplates.length === 0"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 no-border">
<div class="job-template-left job-template-cl1 no-border"> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField">No records found.</span>
<span class="calcField">No records found.</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <h3>Shared Templates</h3>
<h3>Shared Templates</h3> <hr/>
<hr/> <div class="main-client-list">
<div class="main-client-list"> <div class="template-list" *ngFor="let workflow of sharedTemplates" id="{{workflow.ObjectID}}">
<div class="template-list" *ngFor="let workflow of sharedTemplates" id="{{workflow.ObjectID}}"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 ">
<div class="job-template-left job-template-cl1 "> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField"
<span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span> (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
</div>
</div> </div>
</div> <div class="job-template-left job-template-cl4">
<div class="job-template-left job-template-cl2 no-border"> <div class="m-user-right-padlock">
</div> <a>
<div class="job-template-left job-template-cl3 no-border">
</div>
<div class="job-template-left job-template-cl4">
<div class="m-user-right-padlock">
<a>
<span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon"> <span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
<span class="pencil"></span> <span class="pencil"></span>
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="template-list" *ngIf="sharedTemplates.length === 0">
<div class="template-list" *ngIf="sharedTemplates.length === 0"> <div class="template-row">
<div class="template-row"> <div class="job-template-left w-80 job-template-cl1 no-border">
<div class="job-template-left job-template-cl1 no-border"> <div class="template-name heading">
<div class="template-name heading"> <span class="calcField">No records found.</span>
<span class="calcField">No records found.</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner> </form>
</form> </div>
frontend/angular/src/app/components/list-work-flows/list-work-flows.component.ts
...@@ -18,7 +18,6 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit { ...@@ -18,7 +18,6 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
myTemplates: Array<WorkflowTemplateModel> = []; myTemplates: Array<WorkflowTemplateModel> = [];
sharedTemplates: Array<WorkflowTemplateModel> = []; sharedTemplates: Array<WorkflowTemplateModel> = [];
sortOptions: Array<SorterModel>; sortOptions: Array<SorterModel>;
sortSelected: SorterModel;
showLoader = false; showLoader = false;
constructor( constructor(
......
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 [data]="data" [value]="selectedData" (valueChanged)="valChange.emit($event)" <select2 #mySelect [data]="data" [value]="value" (valueChanged)="valChange.emit($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 } from '@angular/core'; import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Select2Component } from "ng2-select2";
@Component({ @Component({
selector: 'app-select-2', selector: 'app-select-2',
...@@ -9,7 +10,7 @@ export class SelectTwoComponent { ...@@ -9,7 +10,7 @@ export class SelectTwoComponent {
@Input() data: Array<any>; @Input() data: Array<any>;
@Input() fieldLabel: string; @Input() fieldLabel: string;
@Input() value: any; @Input() value: any;
selectedData: string; @ViewChild('mySelect') mySelect: Select2Component;
options: {}; options: {};
// tslint:disable-next-line:prefer-output-readonly // tslint:disable-next-line:prefer-output-readonly
@Output() valChange: EventEmitter<any> = new EventEmitter<any>(); @Output() valChange: EventEmitter<any> = new EventEmitter<any>();
...@@ -25,14 +26,15 @@ export class SelectTwoComponent { ...@@ -25,14 +26,15 @@ export class SelectTwoComponent {
return; return;
} }
this.value = this.value ? (this.value.id ? this.value.id :
(this.value.ObjectID ? this.value.ObjectID : 0)) : 0;
this.data.map((elem, index) => { this.data.map((elem, index) => {
elem.id = elem.ObjectID ? elem.ObjectID : index; elem.id = elem.ObjectID ? elem.ObjectID : index;
elem.text = elem[this.fieldLabel]; elem.text = elem[this.fieldLabel];
return elem; return elem;
}); });
this.selectedData = this.data[0] ? this.data[0].id : '';
} }
} }
frontend/angular/src/assets/css/custom.scss
...@@ -4,6 +4,16 @@ ...@@ -4,6 +4,16 @@
font-weight: 300; font-weight: 300;
} }
.template-name.heading {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.w-80 {
width: 80% !important;
}
.pt-0 { .pt-0 {
padding-top: 0 !important; padding-top: 0 !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