list-message-template

frontend/angular/src/app/app.module.ts

@@ -6,13 +6,14 @@ import { ConfirmationService, EditorModule, OverlayPanelModule } from 'primeng/p
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
 import { AppService } from './app.service';
-import { EditMessageTemplateComponent } from "./components/edit-message-template/edit-message-template.component";
-import { EditMessageTemplateService } from "./components/edit-message-template/edit-message-template.service";
+import { EditMessageTemplateComponent } from './components/edit-message-template/edit-message-template.component';
+import { EditMessageTemplateService } from './components/edit-message-template/edit-message-template.service';
+import { ListMessageTemplateComponent } from './components/list-message-template/list-message-template.component';
+import { ListMessageTemplateService } from './components/list-message-template/list-message-template.service';
 
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
 import { OneITModule } from './oneit/oneit.module';
 
-
 @NgModule({
   imports: [
     AppRoutingModule,
@@ -23,19 +24,20 @@ import { OneITModule } from './oneit/oneit.module';
   declarations: [
     AppComponent,
     FullLayoutComponent,
-    EditMessageTemplateComponent
+    EditMessageTemplateComponent,
+    ListMessageTemplateComponent
   ],
   providers: [
     FormBuilder,
     ConfirmationService,
     AppService,
-    EditMessageTemplateService
+    EditMessageTemplateService,
+    ListMessageTemplateService
   ],
   bootstrap: [AppComponent]
 })
 
 export class AppModule {
   constructor() {
-
   }
 }

frontend/angular/src/app/app.routing.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { EditMessageTemplateComponent } from "./components/edit-message-template/edit-message-template.component";
+import { EditMessageTemplateComponent } from './components/edit-message-template/edit-message-template.component';
+import { ListMessageTemplateComponent } from './components/list-message-template/list-message-template.component';
 
 import { AccessDeniedComponent } from './oneit/components/access-denied/access-denied.component';
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
@@ -9,12 +10,11 @@ import { IframePageComponent } from './oneit/components/iframe-page/iframe-page.
 
 import { AuthGuard } from './oneit/guards/auth.guard';
 
-
 export const routes: Routes = [
   {
     path: '',
     redirectTo: 'home',
-    pathMatch: 'full',
+    pathMatch: 'full'
   },
   {
     path: '',
@@ -50,6 +50,11 @@ export const routes: Routes = [
         path: 'edit-message-template/:id',
         component: EditMessageTemplateComponent,
         canActivate: [AuthGuard]
+      },
+      {
+        path: 'list-message-template',
+        component: ListMessageTemplateComponent,
+        canActivate: [AuthGuard]
       }
     ]
   }

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

@@ -13,7 +13,6 @@ import { SaveService } from '../../oneit/services/save.service';
 import { UtilsService } from '../../oneit/services/utils.service';
 import { BaseComponent } from '../base/base.component';
 import { EditMessageTemplateService } from './edit-message-template.service';
-import set = Reflect.set;
 
 @Component({
   selector: 'app-edit-message-template',
@@ -129,8 +128,8 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
         }
 
       }
-    }, 0)
 
+    }, 0);
   }
 
   addAnchorText(show: boolean): void {
@@ -243,10 +242,9 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
       this.showLoader = true;
       this.subscriptions.push(this.saveService.saveObjects(service, this.createdObjs, this.updatedObjs, this.deletedObjs)
         .subscribe(
-          data => {
+          () => {
             this.utilsService.handleSuccess();
-            // TODO: Redirect to listing
-            this.router.navigate(['/home']);
+            this.router.navigate(['/list-message-template']);
           },
           error => {
             this.showLoader = false;
@@ -257,19 +255,6 @@ export class EditMessageTemplateComponent extends BaseComponent implements OnIni
     }
   }
 
-  getMessageTemplateTypes(): void {
-    this.subscriptions.push(this.appService.getMessageTemplateTypeEnum()
-      .subscribe(
-        data => {
-          this.messageTemplateTypes = data;
-        },
-        error => {
-          this.utilsService.handleError(error);
-        }
-      )
-    );
-  }
-
   getPlaceholderOptions(): void {
     this.subscriptions.push(this.appService.getPlaceholderOptionsEnum()
       .subscribe(options => {

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

-export class MessageTemplate {
-  ObjectID: string;
-  ObjectClass = 'MessageTemplate';
-  SidePanel: any;
-  MessageTemplate: string;
-  MessageTemplateType: any;
-  Subject: string;
-  MessageContent: string;
-}

frontend/angular/src/app/components/list-message-template/list-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">
+          Messages
+        </div>
+        <div class="ui-toolbar-group-right actionBtn">
+          <button pButton type="button" routerLink="/edit-message-template" label="Add Message Template"
+                  icon="ui-icon-"></button>
+        </div>
+      </p-toolbar>
+    </div>
+  </div>
+  <div class="ui-g form-group">
+    <div class="ui-g-12">
+      <div class="ui-g-offset-3 pull-right">
+        <label>Sort By</label>
+        <p-dropdown [options]="sortOptions" name="sort" [(ngModel)]="sortSelected" (onChange)="sortMessageTemplates()"
+                    optionLabel="description">
+        </p-dropdown>
+      </div>
+      <h1>My Templates</h1>
+      <hr/>
+      <div *ngFor="let message of myMessageTemplates" class="messageTemplate">
+        <div class="messageRow">
+          <div class="templateName">
+            <span (click)="onRowSelect(message)">{{message.TemplateName}}</span>
+          </div>
+          <button pButton type="button" icon="ui-icon-edit" title="Edit"
+                  (click)="onRowSelect(message)" [disabled]="showLoader">
+          </button>
+        </div>
+      </div>
+      <h1>Shared Templates</h1>
+      <hr/>
+      <div *ngFor="let message of sharedMessageTemplates" class="messageTemplate">
+        <div class="messageRow">
+          <div class="templateName">
+            <span (click)="onRowSelect(message)">{{message.TemplateName}}</span>
+          </div>
+          <button pButton type="button" icon="ui-icon-edit" title="Edit"
+                  (click)="onRowSelect(message)" [disabled]="showLoader">
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
+</form>

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

+.messageTemplate {
+  background: #fff none repeat scroll 0 0;
+  display: inline-block;
+  width: 100%;
+  border-left: 5px solid #03ac66;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.02);
+  margin-bottom: 10px;
+
+  .messageRow {
+    height: 40px;
+    padding: 15px;
+    display: flex;
+
+    .templateName {
+      width: 95%;
+      align-self: center;
+
+      span {
+        cursor: pointer;
+        font-weight: bold;
+        color: #4e5258;
+        font-size: 18px;
+      }
+    }
+  }
+}

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

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+import { MessageTemplateModel } from '../../models/messageTemplateModel';
+
+import { BaseComponent } from '../base/base.component';
+
+import { AppService } from '../../app.service';
+import { SearchService } from '../../oneit/services/search.service';
+import { UtilsService } from '../../oneit/services/utils.service';
+import { ListMessageTemplateService } from './list-message-template.service';
+
+@Component({
+  selector: 'app-list-message-template',
+  templateUrl: './list-message-template.component.html',
+  styleUrls: ['./list-message-template.component.scss']
+})
+export class ListMessageTemplateComponent extends BaseComponent implements OnInit {
+
+  subscriptions: Array<Subscription> = [];
+  myMessageTemplates: Array<MessageTemplateModel> = [];
+  sharedMessageTemplates: Array<MessageTemplateModel> = [];
+  showLoader = false;
+  sortOptions: Array<SorterClass>;
+  sortSelected: SorterClass;
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private utilsService: UtilsService,
+    private searchService: SearchService,
+    private appService: AppService,
+    private listMessageTemplateService: ListMessageTemplateService
+  ) {
+    super(utilsService);
+  }
+
+  ngOnInit(): void {
+    this.sortOptions = [
+      new SorterClass('Alphabetical (A-Z)', true),
+      new SorterClass('Alphabetical (Z-A)', false)
+    ];
+    this.showLoader = true;
+    const sharedMsgParams = {
+      OnlyGlobalTemplate: true
+    };
+    const myMsgParams = {
+      OnlyGlobalTemplate: false
+    };
+    this.subscriptions.push(
+      this.listMessageTemplateService
+        .getMessageTemplates(myMsgParams, [])
+        .subscribe(
+          messages => {
+            this.myMessageTemplates = messages;
+          },
+          error => {
+            this.showLoader = false;
+            this.utilsService.handleError(error);
+          }
+        )
+    );
+    this.subscriptions.push(
+      this.listMessageTemplateService
+        .getMessageTemplates(sharedMsgParams, [])
+        .subscribe(
+          messages => {
+            this.sharedMessageTemplates = messages;
+          },
+          error => {
+            this.showLoader = false;
+            this.utilsService.handleError(error);
+          }
+        )
+    );
+    setTimeout(() => (this.showLoader = false), 0);
+  }
+
+  sortMessageTemplates(): void {
+    this.showLoader = true;
+
+    if (this.sortSelected.ascending) {
+      this.myMessageTemplates = this.utilsService.sort(this.myMessageTemplates, ['TemplateName'], [1], false);
+      this.sharedMessageTemplates = this.utilsService.sort(this.sharedMessageTemplates, ['TemplateName'], [1], false);
+    } else {
+      this.myMessageTemplates = this.utilsService.sort(this.myMessageTemplates, ['TemplateName'], [-1], false);
+      this.sharedMessageTemplates = this.utilsService.sort(this.sharedMessageTemplates, ['TemplateName'], [-1], false);
+    }
+
+    this.showLoader = false;
+  }
+
+  onRowSelect(data): void {
+    this.showLoader = true;
+    this.router.navigate(['/edit-message-template', data.ObjectID]);
+  }
+}
+
+export class SorterClass {
+  description;
+  ascending;
+
+  constructor(des: string, sort: boolean) {
+    this.description = des;
+    this.ascending = sort;
+  }
+}

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

+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { SearchService } from '../../oneit/services/search.service';
+import { UtilsService } from '../../oneit/services/utils.service';
+
+@Injectable()
+export class ListMessageTemplateService {
+
+  constructor(
+    private searchService: SearchService,
+    private utilsService: UtilsService
+  ) {
+  }
+
+  getMessageTemplates(queryParams, assocs): Observable<any> {
+    return this.searchService.searchAndSaveSearchRequest('MessageTemplates', 'All',
+      queryParams, assocs, null, null, null, null, 'ListMessageTemplate', false)
+      .map(
+        data =>
+          this.utilsService.convertResponseToObjects(data, assocs)
+      );
+  }
+
+}