Skip to content

P
PERFORMA_REPLICA
Commit 6cba2294 by GD-A-150752
Options

listing UI

parent 151fa4ed
Showing with 187 additions and 117 deletions
frontend/angular/src/app/components/edit-message-template/edit-message-template.component.html
...@@ -11,20 +11,22 @@ ...@@ -11,20 +11,22 @@
<label>Message Template</label> <label>Message Template</label>
</div> </div>
<div class="ui-g-12 ui-md-4 ui-fluid"> <div class="ui-g-12 ui-md-4 ui-fluid">
<input [(ngModel)]="messageTemplate.TemplateName" name="MessageTemplate{{messageTemplate.ObjectID}}" <input [(ngModel)]="messageTemplate.TemplateName"
fieldLabel="Message Template" type="text" [disabled]="showLoader" pInputText name="MessageTemplate{{messageTemplate.ObjectID}}"
class="form-control ui-inputtext" id="MessageTemplate{{messageTemplate.ObjectID}}"> fieldLabel="Message Template" type="text" [disabled]="showLoader" pInputText
class="form-control ui-inputtext" id="MessageTemplate{{messageTemplate.ObjectID}}">
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<label>Message Template Type</label> <label>Message Template Type</label>
</div> </div>
<div class="ui-g-12 ui-md-4 ui-fluid" *ngIf="this.messageTemplateTypes.length"> <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"> <div class="header-select custom-dropdown w-100">
<select2 [data]="messageTemplateTypes" [value]="messageTemplateTypes[0].id" <select2 [data]="messageTemplateTypes" [value]="this.messageTemplate.TemplateType.id"
(valueChanged)="storeMessageContent($event)" (valueChanged)="storeMessageContent($event)"
[options]="options"> [options]="options">
</select2> </select2>
</div> </div>
</div> </div>
...@@ -35,16 +37,16 @@ ...@@ -35,16 +37,16 @@
</div> </div>
<div class="ui-g-12 ui-md-4 ui-fluid"> <div class="ui-g-12 ui-md-4 ui-fluid">
<input id="subjectInputId" [(ngModel)]="messageTemplate.Subject" <input id="subjectInputId" [(ngModel)]="messageTemplate.Subject"
name="Subject{{messageTemplate.ObjectID}}" name="Subject{{messageTemplate.ObjectID}}"
fieldLabel="Subject" placeholder="Subject" type="text" pInputText fieldLabel="Subject" placeholder="Subject" type="text" pInputText
class="form-control ui-inputtext" class="form-control ui-inputtext"
[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"> <div class="header-select custom-dropdown w-100">
<select2 [data]="subjectPlaceholderOptions" [value]="subjectPlaceholderOptions[0].id" <select2 [data]="subjectPlaceholderOptions" [value]="subjectPlaceholderOptions[0].id"
(valueChanged)="addPlaceholderInSubject($event)" (valueChanged)="addPlaceholderInSubject($event)"
[options]="options"> [options]="options">
</select2> </select2>
</div> </div>
</div> </div>
...@@ -55,22 +57,24 @@ ...@@ -55,22 +57,24 @@
</div> </div>
<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"> <div class="ui-g-12 ui-md-4" *ngIf="contentPlaceholderOptions.length">
<p-dropdown [(ngModel)]="contentPlaceholder" <div class="header-select custom-dropdown w-100">
name="ContentOption{{messageTemplate.ObjectID}}" <select2 [data]="contentPlaceholderOptions" [value]="contentPlaceholderOptions[0].id"
[options]="contentPlaceholderOptions" optionLabel="Description" (valueChanged)="addPlaceholderInMessageContent($event)"
(onChange)="addPlaceholderInMessageContent($event)" [disabled]="showLoader"> [options]="options">
</p-dropdown> </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"
style="font-size:15px !important;height:25px !important;" [(ngModel)]="this.linkText" style="font-size:15px !important;height:25px !important;margin-bottom: 20px;"
id="contentLinkModal"> [(ngModel)]="this.linkText"
id="contentLinkModal">
<p-button class="ui-button-success" <p-button class="ui-button-success"
(click)="addAnchorText(true)">Add (click)="addAnchorText(true)">Add
</p-button> </p-button>
<p-button class="ui-button-danger" <p-button class="ui-button-danger"
(click)="addAnchorText(false)">Cancel (click)="addAnchorText(false)">Cancel
</p-button> </p-button>
</p-overlayPanel> </p-overlayPanel>
</div> </div>
...@@ -78,25 +82,26 @@ ...@@ -78,25 +82,26 @@
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<p-editor *ngIf="emailTemplateType()" [(ngModel)]="messageTemplate.MessageContent" <p-editor *ngIf="emailTemplateType()" [(ngModel)]="messageTemplate.MessageContent"
name="MessageContent{{messageTemplate.ObjectID}}" name="MessageContent{{messageTemplate.ObjectID}}"
#messageContent #messageContent
fieldLabel="Message Content"> fieldLabel="Message Content">
<p-header> <p-header>
<span class="ql-formats"> <span class="ql-formats">
<button class="ql-bold" aria-label="Bold"></button> <button class="ql-bold" aria-label="Bold"></button>
<button class="ql-italic" aria-label="Italic"></button> <button class="ql-italic" aria-label="Italic"></button>
<button class="ql-underline" aria-label="Underline"></button> <button class="ql-underline" aria-label="Underline"></button>
</span> </span>
<span class="ql-formats"> <span class="ql-formats">
<button class="ql-list" aria-label="Bullet" value="bullet"></button> <button class="ql-list" aria-label="Bullet" value="bullet"></button>
<button class="ql-link" aria-label="Link"></button> <button class="ql-link" aria-label="Link"></button>
</span> </span>
</p-header> </p-header>
</p-editor> </p-editor>
<textarea id="messageContentTxtAreaId" *ngIf="smsTemplateType()" pInputTextarea <textarea id="messageContentTxtAreaId" *ngIf="smsTemplateType()" pInputTextarea
[(ngModel)]="messageTemplate.MessageContent" [(ngModel)]="messageTemplate.MessageContent"
name="MessageContent{{messageTemplate.ObjectID}}" name="MessageContent{{messageTemplate.ObjectID}}"
fieldLabel="Message Content" style="width: 100%" placeholder="Message Content"></textarea> fieldLabel="Message Content" style="width: 100%"
placeholder="Message Content"></textarea>
</div> </div>
</div> </div>
<div class="ui-g form-group"> <div class="ui-g form-group">
...@@ -104,16 +109,16 @@ ...@@ -104,16 +109,16 @@
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-3 ui-fluid"> <div class="ui-g-12 ui-md-3 ui-fluid">
<p-button label="Cancel" [disabled]="showLoader" <p-button label="Cancel" [disabled]="showLoader"
routerLink="/admin/list-message-templates"></p-button> routerLink="/admin/list-message-templates"></p-button>
</div> </div>
<div class="ui-g-12 ui-md-3 ui-fluid"> <div class="ui-g-12 ui-md-3 ui-fluid">
<p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader" <p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader"
(onClick)="saveMessageTemplate()"> (onClick)="saveMessageTemplate()">
</p-button> </p-button>
</div> </div>
<div class="ui-g-12 ui-md-3 ui-fluid"> <div class="ui-g-12 ui-md-3 ui-fluid">
<p-button *ngIf="showSaveCopyBtn()" label="Save As a Copy" [disabled]="showLoader" <p-button *ngIf="showSaveCopyBtn()" label="Save As a Copy" [disabled]="showLoader"
(onClick)="saveMessageTemplate(true)"> (onClick)="saveMessageTemplate(true)">
</p-button> </p-button>
</div> </div>
</div> </div>
...@@ -124,4 +129,4 @@ ...@@ -124,4 +129,4 @@
<div id="showPlainText"></div> <div id="showPlainText"></div>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner> <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form> </form>
</div> </div>
\ No newline at end of file
frontend/angular/src/app/components/edit-message-template/edit-message-template.component.ts
...@@ -199,6 +199,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -199,6 +199,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
} }
addPlaceholderInMessageContent($event): void { addPlaceholderInMessageContent($event): void {
this.contentPlaceholder = $event.data[0];
if (!this.contentPlaceholder || !this.contentPlaceholder.Value) { if (!this.contentPlaceholder || !this.contentPlaceholder.Value) {
return; return;
...@@ -290,7 +291,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni ...@@ -290,7 +291,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
.subscribe( .subscribe(
data => { data => {
this.messageTemplate = data; this.messageTemplate = data;
this.updatedObjs[this.messageTemplate.ObjectID] = this.messageTemplate; this.messageTemplate.TemplateType =
this.messageTemplateTypes.find(elem => elem.Value === this.messageTemplate.TemplateType.Value);
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"> <form #form="ngForm" class="bg-grey">
<div class="ui-g ui-fluid mt-80"> <div class="ui-g ui-fluid mt-80">
<div class="ui-g-12"> <div class="jobs-list-shorting">
<div class="ui-g-2 listing-title">Messages</div> <div class="ui-g-3 d-job-title all-jobs-title">Messages</div>
<div class="ui-g-3 pull-right"> <div class="ui-g-3">
<a routerLink="/admin/edit-message-template" class="add-more-btn">Add Message Template</a> <a routerLink="/admin/edit-message-template" class="add-more-btn">Add Message Template</a>
</div> </div>
</div> <div class="shorting-dropdown">
<div class="ui-g-12 pt-0 pb-0"> <div class="order-label">order by</div>
<div class="ui-g-4 pull-right"> <app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description"
<div class="ui-g-4"><label class="order-label">Sort By</label></div> (valChange)="sortMessageTemplates($event)">
<div class="ui-g-8"> </app-select-2>
<app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description"
(valChange)="sortMessageTemplates($event)">
</app-select-2>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,39 +17,71 @@ ...@@ -21,39 +17,71 @@
<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 *ngFor="let message of myTemplates" class="messageTemplate"> <div class="main-client-list">
<div class="messageRow"> <div class="template-list" *ngFor="let message of myTemplates" id="{{message.ObjectID}}">
<div class="templateName"> <div class="template-row">
<span (click)="onRowSelect(message)">{{message.TemplateName}}</span> <div class="job-template-left job-template-cl1 ">
<div class="template-name heading">
<span class="calcField" (click)="onRowSelect(message)">{{message.TemplateName}}</span>
</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>
<span (click)="onRowSelect(message)" class="m-user-right-padlockicon">
<span class="pencil"></span>
</span>
</a>
</div>
</div>
</div> </div>
<button pButton type="button" icon="ui-icon-edit" title="Edit"
(click)="onRowSelect(message)" [disabled]="showLoader">
</button>
</div> </div>
</div> <div class="template-list" *ngIf="myTemplates.length === 0">
<div *ngIf="myTemplates.length === 0" class="messageTemplate"> <div class="template-row">
<div class="messageRow"> <div class="job-template-left job-template-cl1 no-border">
<div class="templateName"> <div class="template-name heading">
<span>No records found.</span> <span class="calcField">No records found.</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<h3>Shared Templates</h3> <h3>Shared Templates</h3>
<hr/> <hr/>
<div *ngFor="let message of sharedTemplates" class="messageTemplate"> <div class="main-client-list">
<div class="messageRow"> <div class="template-list" *ngFor="let message of sharedTemplates" id="{{message.ObjectID}}">
<div class="templateName"> <div class="template-row">
<span (click)="onRowSelect(message)">{{message.TemplateName}}</span> <div class="job-template-left job-template-cl1 ">
<div class="template-name heading">
<span class="calcField" (click)="onRowSelect(message)">{{message.TemplateName}}</span>
</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>
<span (click)="onRowSelect(message)" class="m-user-right-padlockicon">
<span class="pencil"></span>
</span>
</a>
</div>
</div>
</div> </div>
<button pButton type="button" icon="ui-icon-edit" title="Edit"
(click)="onRowSelect(message)" [disabled]="showLoader">
</button>
</div> </div>
</div> <div class="template-list" *ngIf="sharedTemplates.length === 0">
<div *ngIf="sharedTemplates.length === 0" class="messageTemplate"> <div class="template-row">
<div class="messageRow"> <div class="job-template-left job-template-cl1 no-border">
<div class="templateName"> <div class="template-name heading">
<span>No records found.</span> <span class="calcField">No records found.</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
frontend/angular/src/app/components/list-work-flows/list-work-flows.component.html
<form #form="ngForm"> <form #form="ngForm" class="bg-grey">
<div class="ui-g ui-fluid mt-80"> <div class="ui-g ui-fluid mt-80">
<div class="ui-g-12"> <div class="jobs-list-shorting">
<div class="ui-g-2 listing-title">Workflows</div> <div class="ui-g-3 d-job-title all-jobs-title">Workflows</div>
<div class="ui-g-3 pull-right"> <div class="ui-g-3">
<a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a> <a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a>
</div> </div>
</div> <div class="shorting-dropdown">
<div class="ui-g-12 pt-0 pb-0"> <div class="order-label">order by</div>
<div class="ui-g-4 pull-right"> <app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description"
<div class="ui-g-4"><label class="order-label">Sort By</label></div> (valChange)="sortWorkFlowTemplates($event)">
<div class="ui-g-8"> </app-select-2>
<app-select-2 [data]="sortOptions" [value]="sortSelected" fieldLabel="description"
(valChange)="sortWorkFlowTemplates($event)">
</app-select-2>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,39 +17,71 @@ ...@@ -21,39 +17,71 @@
<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 *ngFor="let workflow of myTemplates" class="messageTemplate"> <div class="main-client-list">
<div class="messageRow"> <div class="template-list" *ngFor="let workflow of myTemplates" id="{{workflow.ObjectID}}">
<div class="templateName"> <div class="template-row">
<span (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span> <div class="job-template-left job-template-cl1 ">
<div class="template-name heading">
<span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
</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>
<span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
<span class="pencil"></span>
</span>
</a>
</div>
</div>
</div> </div>
<button pButton type="button" icon="ui-icon-edit" title="Edit"
(click)="onRowSelect(workflow)" [disabled]="showLoader">
</button>
</div> </div>
</div> <div class="template-list" *ngIf="myTemplates.length === 0">
<div *ngIf="myTemplates.length === 0" class="messageTemplate"> <div class="template-row">
<div class="messageRow"> <div class="job-template-left job-template-cl1 no-border">
<div class="templateName"> <div class="template-name heading">
<span>No records found.</span> <span class="calcField">No records found.</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<h3>Shared Templates</h3> <h3>Shared Templates</h3>
<hr/> <hr/>
<div *ngFor="let workflow of sharedTemplates" class="messageTemplate"> <div class="main-client-list">
<div class="messageRow"> <div class="template-list" *ngFor="let workflow of sharedTemplates" id="{{workflow.ObjectID}}">
<div class="templateName"> <div class="template-row">
<span (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span> <div class="job-template-left job-template-cl1 ">
<div class="template-name heading">
<span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
</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>
<span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
<span class="pencil"></span>
</span>
</a>
</div>
</div>
</div> </div>
<button pButton type="button" icon="ui-icon-edit" title="Edit"
(click)="onRowSelect(workflow)" [disabled]="showLoader">
</button>
</div> </div>
</div> <div class="template-list" *ngIf="sharedTemplates.length === 0">
<div *ngIf="sharedTemplates.length === 0" class="messageTemplate"> <div class="template-row">
<div class="messageRow"> <div class="job-template-left job-template-cl1 no-border">
<div class="templateName"> <div class="template-name heading">
<span>No records found.</span> <span class="calcField">No records found.</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
frontend/angular/src/assets/css/common.css
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/angular/src/assets/css/custom.scss
...@@ -20,6 +20,14 @@ ...@@ -20,6 +20,14 @@
width: 100% !important; width: 100% !important;
} }
.no-border {
border: 0 !important;
}
.bg-grey {
background-color: #e9ecef;
}
/* Listing of message and workflow templates */ /* Listing of message and workflow templates */
.messageTemplate { .messageTemplate {
......
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