edit-message-template

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

@@ -23,7 +23,7 @@ export class AppService {
     }
 
     getPlaceholderOptionsEnum(): Observable<Array<PlaceholderOptionsEnum>> {
-        return this.enumService.getEnums('PlaceholderOptions', true);
+        return this.enumService.getEnumsWithNULLOptionLabel('PlaceholderOptions', 'Select variable');
     }
 
     getTypes(serviceName: string): Observable<Array<any>> {

frontend/angular/src/app/components/edit-message-template/edit-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">
-                    {{editMode ? "Edit" : "Add"}} Message Template
-                </div>
-            </p-toolbar>
-        </div>
+    <div class="ui-g ui-fluid mt-80">
+        <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Message Template</div>
     </div>
     <div class="ui-g form-group">
         <div class="ui-g-12 ui-md-12">
@@ -24,13 +18,13 @@
                 <div class="ui-g-12 ui-md-4">
                     <label>Message Template Type</label>
                 </div>
-                <div class="ui-g-12 ui-md-4 ui-fluid">
-                    <p-dropdown [(ngModel)]="messageTemplate.TemplateType"
-                                name="MessageTemplateType{{messageTemplate.ObjectID}}"
-                                fieldLabel="Message Template Type"
-                                [options]="messageTemplateTypes" optionLabel="Description" [disabled]="showLoader"
-                                (onChange)="storeMessageContent()">
-                    </p-dropdown>
+                <div class="ui-g-12 ui-md-4 ui-fluid" *ngIf="this.messageTemplateTypes.length">
+                    <div class="header-select custom-dropdown w-100">
+                        <select2 [data]="messageTemplateTypes" [value]="messageTemplateTypes[0].id"
+                                 (valueChanged)="storeMessageContent($event)"
+                                 [options]="options">
+                        </select2>
+                    </div>
                 </div>
             </div>
             <div class="ui-g form-group" *ngIf="emailTemplateType()">
@@ -44,11 +38,13 @@
                            class="form-control ui-inputtext"
                            [disabled]="showLoader">
                 </div>
-                <div class="ui-g-12 ui-md-4">
-                    <p-dropdown [(ngModel)]="subjectPlaceholder" name="SubjectOption{{messageTemplate.ObjectID}}"
-                                [options]="subjectPlaceholderOptions" optionLabel="Description"
-                                (onHide)="addPlaceholderInSubject()" [disabled]="showLoader">
-                    </p-dropdown>
+                <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>
                 </div>
             </div>
             <div class="ui-g form-group">
@@ -67,12 +63,12 @@
                         <label class="ui-g-12" style="padding-left: 0;">Please enter anchor text</label>
                         <input pInputText name="contentLinkModal" type="text" class="ui-g-12"
                                style="font-size:15px !important;height:25px !important;" [(ngModel)]="this.linkText"
-                               id="overlay">
+                               id="contentLinkModal">
                         <p-button class="ui-button-success"
-                                  (click)="addAnchorText(true); contentLinkModal.hide()">Add
+                                  (click)="addAnchorText(true)">Add
                         </p-button>
                         <p-button class="ui-button-danger"
-                                  (click)="addAnchorText(false); contentLinkModal.hide()">Cancel
+                                  (click)="addAnchorText(false)">Cancel
                         </p-button>
                     </p-overlayPanel>
                 </div>

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

@@ -30,10 +30,10 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     deletedObjs;
 
     messageTemplate = new MessageTemplateModel();
-    messageTemplateTypes: Array<TemplateTypeEnum>;
-    subjectPlaceholderOptions: Array<PlaceholderOptionsEnum>;
-    contentPlaceholderOptions: Array<PlaceholderOptionsEnum>;
-    ContentPlaceholderOptionsEnum: Array<PlaceholderOptionsEnum>;
+    messageTemplateTypes: Array<TemplateTypeEnum> = [];
+    subjectPlaceholderOptions: Array<PlaceholderOptionsEnum> = [];
+    contentPlaceholderOptions: Array<PlaceholderOptionsEnum> = [];
+    ContentPlaceholderOptionsEnum: Array<PlaceholderOptionsEnum> = [];
     subjectPlaceholder: PlaceholderOptionsEnum;
     contentPlaceholder: PlaceholderOptionsEnum;
     contentCursorPoint;
@@ -41,6 +41,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     linkText = '';
     showLoader = false;
     editMode = false;
+    options = {minimumResultsForSearch: Infinity};
 
     constructor(
         private router: Router,
@@ -62,6 +63,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
         this.utilsService.resetCounter();
         this.getPlaceholderOptions();
+
         if (!this.adminPortalLayoutService.userData) {
             this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
                 .subscribe(
@@ -70,6 +72,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                     }
                 ));
         }
+
         this.startComponent();
     }
 
@@ -78,7 +81,17 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
             this.subscriptions.push(this.appService.getMessageTemplateTypeEnum()
                 .subscribe(
                     data => {
+
+                        if (this.createdExists()) {
+                            return;
+                        }
+
                         this.messageTemplateTypes = data;
+                        this.messageTemplateTypes.map((elem, index) => {
+                            elem.id = index;
+                            elem.text = elem.Description;
+                        });
+
                         this.subscriptions.push(this.activatedRoute.params
                             .subscribe(
                                 (params: Params) => {
@@ -155,37 +168,56 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
     addAnchorText(show: boolean): void {
 
-        if (show) {
-            const delta = {
-                ops: [
-                    {retain: this.contentCursorPoint},
-                    {insert: this.contentPlaceholder.Placeholder, attributes: {link: this.linkText}}
-                ]
-            };
+        if (!show || this.linkText === '') {
+            this.contentLinkModal.hide();
+
+            return;
+        }
+
+        const delta = {
+            ops: [
+                {retain: this.contentCursorPoint > 0 ? this.contentCursorPoint : this.contentCursorPoint + 1},
+                {insert: this.contentPlaceholder.Placeholder, attributes: {link: this.linkText}}
+            ]
+        };
+
+        if (this.contentCursorPoint === 0) {
+            this.messageContentEditor.getQuill()
+                .insertText(this.contentCursorPoint, ' ');
+            this.contentCursorPoint++;
+        }
+
+        try {
             this.messageContentEditor.getQuill()
                 .updateContents(delta);
-        } else {
-            this.linkText = '';
+        } catch (e) {
+            this.utilsService.handleError(e);
         }
 
+        this.linkText = '';
+        this.contentLinkModal.hide();
     }
 
     addPlaceholderInMessageContent($event): void {
 
-        if (typeof this.contentCursorPoint === 'number') {
+        if (!this.contentPlaceholder || !this.contentPlaceholder.Value) {
+            return;
+        }
 
-            if (this.emailTemplateType()) {
-                if (this.contentPlaceholder.IsLink) {
-                    this.contentLinkModal.toggle($event);
-                } else {
-                    this.messageContentEditor.getQuill()
-                        .insertText(this.contentCursorPoint, this.contentPlaceholder.Placeholder);
-                }
+        if (typeof this.contentCursorPoint !== 'number') {
+            return;
+        }
+
+        if (this.emailTemplateType()) {
+            if (this.contentPlaceholder.IsLink) {
+                this.contentLinkModal.toggle($event);
             } else {
-                const textarea: HTMLTextAreaElement = document.getElementById('messageContentTxtAreaId') as HTMLTextAreaElement;
-                this.setValueAndFocus(textarea, 'messageContentTxtArea', this.contentPlaceholder.Placeholder);
+                this.messageContentEditor.getQuill()
+                    .insertText(this.contentCursorPoint, this.contentPlaceholder.Placeholder);
             }
-
+        } else {
+            const textarea: HTMLTextAreaElement = document.getElementById('messageContentTxtAreaId') as HTMLTextAreaElement;
+            this.setValueAndFocus(textarea, 'messageContentTxtArea', this.contentPlaceholder.Placeholder);
         }
 
     }
@@ -199,10 +231,13 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         return title;
     }
 
-    storeMessageContent(): void {
+    storeMessageContent($event): void {
+        if (!$event.data[0]) {
+            return;
+        }
+        this.messageTemplate.TemplateType = $event.data[0];
 
         if (this.messageTemplate.MessageContent !== undefined) {
-
             if (this.messageTemplate.TemplateType.Description === 'SMS') {
                 this.temporaryMessageContent = this.messageTemplate.MessageContent;
                 this.messageTemplate.MessageContent = this.showPlainText(this.temporaryMessageContent);
@@ -210,24 +245,24 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
                 this.messageTemplate.MessageContent = this.temporaryMessageContent !== '' ? this.temporaryMessageContent
                     : this.messageTemplate.MessageContent;
             }
-
         }
 
         if (this.ContentPlaceholderOptionsEnum) {
-
             if (this.emailTemplateType()) {
-                this.contentPlaceholderOptions = this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForContent);
+                this.contentPlaceholderOptions = this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForContent ||
+                    option.Value === null);
             } else {
                 this.contentPlaceholderOptions = this.ContentPlaceholderOptionsEnum
-                    .filter(option => option.ShowForContent && option.Value !== 'JOB_LINK');
+                    .filter(option => option.ShowForContent && option.Value !== 'JOB_LINK' || option.Value === null);
             }
         }
 
         this.setInputListener();
     }
 
-    addPlaceholderInSubject(): void {
-        if (this.emailTemplateType()) {
+    addPlaceholderInSubject($event): void {
+        this.subjectPlaceholder = $event.data[0];
+        if (this.emailTemplateType() && this.subjectPlaceholder && this.subjectPlaceholder.Value) {
             const input: HTMLInputElement = document.getElementById('subjectInputId') as HTMLInputElement;
             this.setValueAndFocus(input, 'subjectInput', this.subjectPlaceholder.Placeholder);
         }
@@ -294,8 +329,22 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         this.subscriptions.push(this.appService.getPlaceholderOptionsEnum()
             .subscribe(options => {
                 this.ContentPlaceholderOptionsEnum = options;
-                this.contentPlaceholderOptions = this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForContent);
-                this.subjectPlaceholderOptions = this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForSubject);
+                this.contentPlaceholderOptions =
+                    this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForContent || option.Value === null)
+                        .map((elem, index) => {
+                            elem.id = index;
+                            elem.text = elem.Description;
+
+                            return elem;
+                        });
+                this.subjectPlaceholderOptions =
+                    this.ContentPlaceholderOptionsEnum.filter(option => option.ShowForSubject || option.Value === null)
+                        .map((elem, index) => {
+                            elem.id = index;
+                            elem.text = elem.Description;
+
+                            return elem;
+                        });
             })
         );
     }
@@ -333,4 +382,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
             }
         }, 0);
     }
+
+    createdExists(): boolean {
+        return Object.keys(this.createdObjs).length > 0;
+    }
 }

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

@@ -19,14 +19,20 @@ export class SelectTwoComponent {
     }
 
     ngOnInit(): void {
-        this.data.map(elem => {
-            elem.id = elem.ObjectID;
+        this.options = {minimumResultsForSearch: Infinity};
+
+        if (!this.data) {
+            return;
+        }
+
+        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].ObjectID : '';
-        this.options = {minimumResultsForSearch: Infinity};
+
+        this.selectedData = this.data[0] ? this.data[0].id : '';
     }
 
 }

frontend/angular/src/app/models/placeholderOptions.enum.ts

@@ -7,4 +7,6 @@ export class PlaceholderOptionsEnum {
     ShowForSubject: boolean;
     ShowForContent: boolean;
     IsLink: boolean;
+    id: number;
+    text: string;
 }

frontend/angular/src/app/models/templateType.enum.ts

@@ -3,4 +3,6 @@ export class TemplateTypeEnum {
     Value: string;
     Description: string;
     Disabled: boolean;
+    id: number;
+    text: string;
 }