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