Included preview for new campaign

tapit-backend/campaign.go

@@ -158,7 +158,7 @@ func (tapit *Tapit) createCampaign(w http.ResponseWriter, r *http.Request) {
         http.Error(w, "Bad request", 400)
         return
     }
-    if newCampaignJson.Name != "" {
+    if newCampaignJson.Name != "" && newCampaignJson.FromNumber != "" && newCampaignJson.PhonebookId != 0 && newCampaignJson.TextTemplateId != 0 {
         var newCampaign Campaign
 
         // populate details to be used later
@@ -226,7 +226,7 @@ func (tapit *Tapit) createCampaign(w http.ResponseWriter, r *http.Request) {
         notifyPopup(w, r, "success", "Successfully added new campaign", newCampaignJson)
         return
     } else {
-        notifyPopup(w, r, "failure", "Please enter the campaign name", nil)
+        notifyPopup(w, r, "failure", "Please enter campaign details", nil)
         return
     }
 }

tapit-frontend/src/app/campaign-new/campaign-new.component.html

@@ -13,33 +13,40 @@
       </div>
     </div>
     <!-- Add phonebook & template via list -->  
-  <div class="form-group">
-    <label for="provider-select">Provider</label>
-    <select class="form-control" [(ngModel)]="newCampaign.providerTag" id="provider-select">
-      <option></option>
-      <option *ngFor="let providerEnum of providerService.providerEnums" [ngValue]="providerEnum.tag">{{providerEnum.name}}</option>
-    </select>
-  </div>
-  <div class="form-group">
-    <label for="phonebook-select">Phonebook</label>
-    <select class="form-control" [(ngModel)]="newCampaign.phonebookId" id="phonebook-select">
-      <option></option>
-      <option *ngFor="let phonebook of phonebookService.phonebooks" [ngValue]="phonebook.id">{{phonebook.name}}: Size {{phonebook.size}}</option>
-    </select>
-  </div>
-  <div class="form-group">
-    <label for="text-template-select">Text Template</label>
-    <select class="form-control" [(ngModel)]="newCampaign.textTemplateId" id="text-template-select">
-      <option></option>
-      <option *ngFor="let textTemplate of textTemplateService.textTemplates" [ngValue]="textTemplate.id">{{textTemplate.name}}</option>
-    </select>
-  </div>
+    <div class="form-group">
+      <label for="provider-select">Provider</label>
+      <select class="form-control" [(ngModel)]="newCampaign.providerTag" id="provider-select">
+        <option></option>
+        <option *ngFor="let providerEnum of providerService.providerEnums" [ngValue]="providerEnum.tag">{{providerEnum.name}}</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="phonebook-select">Phonebook</label>
+      <select class="form-control" (change)="updatePreviews()" [(ngModel)]="newCampaign.phonebookId" id="phonebook-select">
+        <option [ngValue]="0"></option>
+        <option *ngFor="let phonebook of phonebookService.phonebooks" [ngValue]="phonebook.id">{{phonebook.name}}: Size {{phonebook.size}}</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="text-template-select">Text Template</label>
+      <select class="form-control" (change)="updatePreviews()" [(ngModel)]="newCampaign.textTemplateId" id="text-template-select">
+        <option [ngValue]="0"></option>
+        <option *ngFor="let textTemplate of textTemplateService.textTemplates" [ngValue]="textTemplate.id">{{textTemplate.name}}</option>
+      </select>
+    </div>
  
     <div class="row mt-4">
       <div class="col-12 d-flex">
         <button type="button" (click)="submitNewCampaignRun()" class="btn btn-primary mr-2">Start</button>
         <button type="button" (click)="submitNewCampaign()" class="btn btn-secondary ml-2">Save</button>
-        <button type="button" *ngIf="router.url !== '/campaign/new'" (click)="askDelete()" class="btn btn-danger ml-auto" data-toggle="modal" data-target="#completeModal">Delete</button>
       </div>
     </div>
+    <div class="form-group mt-4">
+      <label for="template-preview" class="pr-2 mt-auto mb-auto">Template</label>
+      <textarea class="form-control flex" [(ngModel)]="templateStr" id="template-preview" rows="4" disabled></textarea>
+    </div>
+    <div class="form-group mt-2">
+      <label for="new-text-preview" class="pr-2 mt-auto mb-auto">Preview (First Entry)</label>
+      <textarea class="form-control flex" [(ngModel)]="previewStr" id="new-text-preview" rows="4" disabled></textarea>
+    </div>
 </div>

tapit-frontend/src/app/campaign-new/campaign-new.component.ts

@@ -21,6 +21,9 @@ export class CampaignNewComponent implements OnInit {
 
   newCampaign: Campaign = new Campaign();
 
+  templateStr = '';
+  previewStr = '';
+
   submitNewCampaign() {
     this.campaignService.addCampaign(this.newCampaign);
   }
@@ -29,7 +32,30 @@ export class CampaignNewComponent implements OnInit {
     this.campaignService.addCampaignRun(this.newCampaign);
   }
 
+  updatePreviews() {
+    if (this.newCampaign.textTemplateId !== 0 && this.newCampaign.phonebookId !== 0) {
+      this.phonebookService.getPhonebookObs(this.newCampaign.phonebookId).subscribe(phonebook => {
+        this.textTemplateService.getTextTemplateObs(this.newCampaign.textTemplateId).subscribe(textTemplate => {
+          this.templateStr = textTemplate.templateStr;
+
+          let tempStr = this.templateStr;
+          tempStr = tempStr.replace('{firstName}', phonebook.records[0].firstName);
+          tempStr = tempStr.replace('{lastName}', phonebook.records[0].lastName);
+          tempStr = tempStr.replace('{alias}', phonebook.records[0].alias);
+          tempStr = tempStr.replace('{phoneNumber}', phonebook.records[0].phoneNumber);
+
+          this.previewStr = tempStr;
+        });
+      });
+    } else {
+      this.templateStr = '';
+      this.previewStr = '';
+    }
+  }
+
   ngOnInit() {
+    this.newCampaign.textTemplateId = 0;
+    this.newCampaign.phonebookId = 0;
   }
 
 }

tapit-frontend/src/app/text-template-new/text-template-new.component.ts

@@ -50,6 +50,7 @@ export class TextTemplateNewComponent implements OnInit {
         this.id = parseInt(params[idParam], 10);
         this.textTemplateService.getTextTemplateObs(this.id).subscribe(currTT => {
           this.newTextTemplate = currTT;
+          this.updatePreview();
         });
       });
     }