code-refactor

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

@@ -2,7 +2,12 @@
     <app-error-message></app-error-message>
     <form #form="ngForm">
         <div class="ui-g ui-fluid">
-            <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Workflow Template</div>
+            <div class="page-title mb-0">
+                <a [routerLink]="['/admin/list-message-templates']" class="arrow-btn-blue ml-0">
+                    <img src="/assets/images/arrow-left-prev_blue.svg">
+                </a>
+                {{editMode ? "Edit" : "Add"}} Message Template
+            </div>
         </div>
         <div class="ui-g form-group">
             <div class="ui-g-12 ui-md-12">
@@ -40,28 +45,24 @@
                         </app-select-2>
                     </div>
                 </div>
-                <div class="form-group row">
+                <div class="form-group row h-80">
                     <div class="col-md-offset-6 col-md-6" *ngIf="contentPlaceholderOptions.length">
                         <label>Placeholder for Content</label>
                         <app-select-2 [data]="contentPlaceholderOptions" [value]="0"
                                       fieldLabel="Description"
                                       (valChange)="addPlaceholderInMessageContent($event)">
                         </app-select-2>
+                    </div>
+                </div>
                 <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"
                            style="font-size:15px !important;height:25px !important;margin-bottom: 20px;"
                            [(ngModel)]="this.linkText"
                            id="contentLinkModal">
-                            <p-button class="ui-button-success"
-                                      (click)="addAnchorText(true)">Add
-                            </p-button>
-                            <p-button class="ui-button-danger"
-                                      (click)="addAnchorText(false)">Cancel
-                            </p-button>
+                    <button class="btn btn-primary add-more-btn" (click)="addAnchorText(true)">Add</button>
+                    <button class="btn btn-primary add-more-btn" (click)="addAnchorText(false)">Cancel</button>
                 </p-overlayPanel>
-                    </div>
-                </div>
                 <div class="form-group row">
                     <div class="col-md-12">
                         <label>Message Content</label>

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

@@ -42,10 +42,10 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     contentCursorPoint;
     temporaryMessageContent = '';
     linkText = '';
-    showLoader = false;
-    editMode = false;
     options = {minimumResultsForSearch: Infinity};
     templateTypeId = 0;
+    showLoader = false;
+    editMode = false;
 
     constructor(
         private router: Router,
@@ -67,28 +67,23 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         this.utilsService.resetCounter();
         this.getPlaceholderOptions();
 
-        if (!this.adminPortalLayoutService.userData) {
-            this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+        if (this.adminPortalLayoutService.userData) {
+            this.initComponent();
+        } else {
+            this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated.first()
                 .subscribe(
                     () => {
-                        this.startComponent();
+                        this.initComponent();
                     }
                 ));
         }
-
-        this.startComponent();
     }
 
-    startComponent(): void {
+    initComponent(): void {
         setTimeout(() => {
             this.subscriptions.push(this.appService.getMessageTemplateTypeEnum()
                 .subscribe(
                     data => {
-
-                        if (this.alreadyExists()) {
-                            return;
-                        }
-
                         this.messageTemplateTypes = data;
 
                         this.subscriptions.push(this.activatedRoute.params
@@ -108,6 +103,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
                                         this.utilsService.createObject(this.messageTemplate, this.createdObjs);
                                         this.setInputListener();
+
                                         this.showLoader = false;
                                     }
 
@@ -147,9 +143,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
                 if (editElement) {
                     const editor = editElement.getElementsByClassName('ql-editor');
+
                     if (editor[0]) {
                         editor[0].classList.add('form-control');
                     }
+
                     ['keyup', 'click'].forEach(event => {
                         editElement.addEventListener(event, () => {
                             this.contentCursorPoint = this.messageContentEditor.getQuill()
@@ -208,11 +206,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
     addPlaceholderInMessageContent($event): void {
 
-        if (!$event.data[0]) {
+        if (!$event) {
             return;
         }
 
-        this.contentPlaceholder = $event.data[0];
+        this.contentPlaceholder = $event;
 
         if (!this.contentPlaceholder || !this.contentPlaceholder.Value) {
             return;
@@ -224,13 +222,15 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
         if (this.emailTemplateType()) {
             if (this.contentPlaceholder.IsLink) {
-                this.contentLinkModal.toggle($event);
+                const event = new Event('build');
+                this.contentLinkModal.toggle(event, this.messageContentEditor.getQuill());
             } else {
                 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);
         }
 
@@ -248,11 +248,11 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
     storeMessageContent($event): void {
 
-        if (!$event.data[0]) {
+        if (!$event) {
             return;
         }
 
-        this.messageTemplate.TemplateType = $event.data[0];
+        this.messageTemplate.TemplateType = $event;
 
         if (this.messageTemplate.MessageContent !== undefined) {
             if (this.messageTemplate.TemplateType.Description === 'SMS') {
@@ -278,7 +278,7 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     addPlaceholderInSubject($event): void {
-        this.subjectPlaceholder = $event.data[0];
+        this.subjectPlaceholder = $event;
         if (this.emailTemplateType() && this.subjectPlaceholder && this.subjectPlaceholder.Value) {
             const input: HTMLInputElement = document.getElementById('subjectInputId') as HTMLInputElement;
             this.setValueAndFocus(input, 'subjectInput', this.subjectPlaceholder.Placeholder);
@@ -362,15 +362,18 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
 
                         if (this.templateCreationFromWorkflow()) {
                             let id = this.messageTemplate.ObjectID;
+
                             if (data.created[id]) {
                                 id = data.created[id];
                             }
+
                             this.closeModal.emit(id);
                         } else if (this.templateUpdateFromWorkflow()) {
                             this.closeModal.emit(this.messageTemplate.ObjectID);
                         } else {
                             this.router.navigate(['/admin/list-message-templates']);
                         }
+
                     },
                     error => {
                         this.showLoader = false;
@@ -421,8 +424,12 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         const start = element.selectionStart;
         const end = element.selectionEnd;
         element.value = `${element.value.substring(0, start)}${placeholder}${element.value.substring(end)}`;
+
         this.focusField(elementId);
-        element.selectionEnd = end + placeholder.length;
+
+        setTimeout(() => {
+            element.selectionStart = element.selectionEnd = end + placeholder.length;
+        }, 0);
     }
 
     focusField(elementId: string): void {
@@ -439,9 +446,5 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         }, 0);
     }
 
-    alreadyExists(): boolean {
-        return Object.keys(this.createdObjs).length > 0 || Object.keys(this.updatedObjs).length > 0;
-    }
-
 // tslint:disable-next-line:max-file-line-count
 }

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

@@ -41,24 +41,21 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
             new SorterModel('Alphabetical (Z-A)', false)
         ];
         this.showLoader = true;
-        this.processing = true;
 
-        this.startComponent();
-        this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+        if (this.adminPortalLayoutService.userData) {
+            this.initComponent();
+        } else {
+            this.subscriptions.push(
+                this.adminPortalLayoutService.userDataUpdated.first()
                     .subscribe(
-                () => {
-                    this.startComponent();
-                }
-            ));
+                        () => this.initComponent()
+                    )
+            );
         }
 
-    startComponent(): void {
-
-        if (!this.processing) {
-            return;
     }
 
-        this.processing = false;
+    initComponent(): void {
         const sharedMsgParams = {
             OnlyGlobalTemplate: true
         };
@@ -76,8 +73,10 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
                         this.myTemplates = response[0].filter(message => message.HiringTeam ===
                             this.adminPortalLayoutService.getHiringTeamID().ObjectID);
                         this.sharedTemplates = response[1];
+
                         this.sortSpecificTemplate('myTemplates');
                         this.sortSpecificTemplate('sharedTemplates');
+
                         this.showLoader = false;
                     }
                 )
@@ -90,17 +89,17 @@ export class ListMessageTemplateComponent extends BaseComponent implements OnIni
     }
 
     sortMessageTemplates($event): void {
-        if (!$event.data[0]) {
+
+        if (!$event) {
             return;
         }
-        const sort = $event.data[0];
+
         this.showLoader = true;
         this.myTemplates = this.utilsService.sort(this.myTemplates,
-            ['TemplateName'], [sort.ascending ? 1 : -1], false);
+            ['TemplateName'], [$event.ascending ? 1 : -1], false);
         this.sharedTemplates = this.utilsService.sort(this.sharedTemplates,
-            ['TemplateName'], [sort.ascending ? 1 : -1], false);
+            ['TemplateName'], [$event.ascending ? 1 : -1], false);
         this.showLoader = false;
-
     }
 
     onRowSelect(data: MessageTemplateModel): void {

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

@@ -21,7 +21,6 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
     sharedTemplates: Array<WorkflowTemplateModel> = [];
     sortOptions: Array<SorterModel>;
     showLoader = false;
-    processing = false;
 
     constructor(
         private router: Router,
@@ -38,24 +37,21 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
             new SorterModel('Alphabetical (Z-A)', false)
         ];
         this.showLoader = true;
-        this.processing = true;
 
-        this.startComponent();
-        this.subscriptions.push(this.adminPortalLayoutService.userDataUpdated
+        if (this.adminPortalLayoutService.userData) {
+            this.initComponent();
+        } else {
+            this.subscriptions.push(
+                this.adminPortalLayoutService.userDataUpdated.first()
                     .subscribe(
-                () => {
-                    this.startComponent();
-                }
-            ));
+                        () => this.initComponent()
+                    )
+            );
         }
 
-    startComponent(): void {
-
-        if (!this.processing) {
-            return;
     }
 
-        this.processing = false;
+    initComponent(): void {
         const sharedParams = {
             OnlyGlobalTemplates: true
         };
@@ -72,12 +68,11 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
                     (response: [Array<WorkflowTemplateModel>, Array<WorkflowTemplateModel>]) => {
                         this.myTemplates = response[0].filter(wf => wf.HiringTeam ===
                             this.adminPortalLayoutService.getHiringTeamID().ObjectID);
-                        this.sortSpecificTemplate('myTemplates');
                         this.sharedTemplates = response[1];
+
+                        this.sortSpecificTemplate('myTemplates');
                         this.sortSpecificTemplate('sharedTemplates');
-                        const val = this.myTemplates.map(m => m.ObjectID)
-                            .join(',');
-                        console.log(val);
+
                         this.showLoader = false;
                     },
                     error => {
@@ -94,17 +89,17 @@ export class ListWorkFlowsComponent extends BaseComponent implements OnInit {
     }
 
     sortWorkFlowTemplates($event): void {
-        if (!$event.data[0]) {
+
+        if (!$event) {
             return;
         }
-        const sort = $event.data[0];
+
         this.showLoader = true;
         this.myTemplates = this.utilsService.sort(this.myTemplates,
-            ['TemplateName'], [sort.ascending ? 1 : -1], false);
+            ['TemplateName'], [$event.ascending ? 1 : -1], false);
         this.sharedTemplates = this.utilsService.sort(this.sharedTemplates,
-            ['TemplateName'], [sort.ascending ? 1 : -1], false);
+            ['TemplateName'], [$event.ascending ? 1 : -1], false);
         this.showLoader = false;
-
     }
 
     onRowSelect(data: WorkflowTemplateModel): void {

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

@@ -148,7 +148,7 @@
 
 .ui-inputswitch {
     height: 20px !important;
-    width: 40px !important !important;
+    width: 40px !important;
     border-color: #667281 !important;
     background-color: #667281 !important;
     border-radius: 34px !important;
@@ -201,3 +201,7 @@
         }
     }
 }
+
+.h-80 {
+    height: 80px;
+}