feat: add create and edit sms-campaign pages (#851)

Fixes: #167
Fixes: #764

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.html

@@ -0,0 +1,65 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #smsCampaignStepper>
+
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step completed>
+
+      <ng-template matStepLabel>CAMPAIGN</ng-template>
+
+      <mifosx-edit-sms-campaign-step 
+        [smsCampaign]="smsCampaign"
+        [smsCampaignTemplate]="smsCampaignTemplate"
+        (templateParameters)="setParameters($event)"
+      >
+      </mifosx-edit-sms-campaign-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>MESSAGE</ng-template>
+
+      <mifosx-campaign-message-step 
+        [templateParameters]="templateParameters"
+        [editCampaignMessage]="smsCampaign.campaignMessage"
+      >
+      </mifosx-campaign-message-step>
+
+    </mat-step>
+
+    <mat-step state="preview" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-campaign-preview-step
+        [campaign]="smsCampaign"
+        [editedCampaignMessage]="campaignMessage"
+        [smsCampaignTemplate]="smsCampaignTemplate" (submit)="submit()"
+      >
+      </mifosx-campaign-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.scss

@@ -0,0 +1,3 @@
+.container {
+  width: 60%;;
+}

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditCampaignComponent } from './edit-campaign.component';
+
+describe('EditCampaignComponent', () => {
+  let component: EditCampaignComponent;
+  let fixture: ComponentFixture<EditCampaignComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditCampaignComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditCampaignComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.ts

@@ -0,0 +1,94 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { OrganizationService } from 'app/organization/organization.service';
+
+/** Custom Components */
+import { CampaignMessageStepComponent } from '../sms-campaign-stepper/campaign-message-step/campaign-message-step.component';
+
+/**
+ * Edit Campaign Component
+ */
+@Component({
+  selector: 'mifosx-edit-campaign',
+  templateUrl: './edit-campaign.component.html',
+  styleUrls: ['./edit-campaign.component.scss']
+})
+export class EditCampaignComponent {
+
+  /** smsCampaign */
+  smsCampaign: any;
+  /** SMS Campaign Template */
+  smsCampaignTemplate: any;
+  /** Run report headers */
+  templateParameters: any;
+
+  /** Campaign Message Step */
+  @ViewChild(CampaignMessageStepComponent) campaignMessageStep: CampaignMessageStepComponent;
+
+  /**
+   * Fetches campaign template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {OrganizationService} organizationService Organiztion Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private organizationService: OrganizationService) {
+    this.route.data.subscribe((data: { smsCampaign: any, smsCampaignTemplate: any }) => {
+      this.smsCampaignTemplate = data.smsCampaignTemplate;
+      this.smsCampaign = data.smsCampaign;
+      this.smsCampaign.editFlag = true;
+    });
+  }
+
+  /**
+   * Retrieves edited campaign message.
+   */
+  get campaignMessage() {
+    return this.campaignMessageStep.campaignMessage.message;
+  }
+
+  /**
+   * Passes template parameters to campaign-message-step.
+   * @param {any} $event Template parameters
+   */
+  setParameters($event: any) {
+    this.templateParameters = $event;
+  }
+
+  /**
+   * Updates SMS Campaign.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const dateTimeFormat = 'dd MMMM yyyy HH:mm:ss';
+    const smsCampaign: any = {
+      campaignName: this.smsCampaign.campaignName,
+      campaignType: this.smsCampaign.isNotification ? 2 : 1,
+      isNotification: this.smsCampaign.isNotification,
+      triggerType: this.smsCampaign.triggerType.id,
+      providerId: this.smsCampaign.providerId === 0 ? null : this.smsCampaign.providerId,
+      runReportId: this.smsCampaign.runReportId,
+      message: this.campaignMessage,
+      paramValue: JSON.parse(this.smsCampaign.paramValue),
+      dateTimeFormat,
+      dateFormat,
+      locale
+    };
+    if (this.smsCampaign.triggerType.id === 2) {
+      smsCampaign.recurrenceStartDate = this.datePipe.transform(new Date(this.smsCampaign.recurrenceStartDate), dateTimeFormat);
+    }
+    this.organizationService.updateSmsCampaign(smsCampaign, this.smsCampaign.id).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}