feat: add create and edit sms-campaign pages (#851)
Fixes: #167 Fixes: #764
This commit is contained in:
Karan Takalkar
@@ -1,125 +1,151 @@
|
||||
<div class="container">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="flex-end" class="action-buttons m-b-20">
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
|
||||
<button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="edit"></fa-icon> Edit
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
|
||||
<button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="lock-open"></fa-icon> Activate
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
|
||||
<button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="times"></fa-icon> Close
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
|
||||
<button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="undo"></fa-icon> Reactivate
|
||||
</button>
|
||||
</span>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
|
||||
<button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="trash"></fa-icon> Delete
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="flex-end" class="action-buttons m-b-20">
|
||||
|
||||
<mat-card class="sms-card">
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
|
||||
<button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
|
||||
<fa-icon icon="edit"></fa-icon> Edit
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<mat-card-content>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
|
||||
<button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="lock-open"></fa-icon> Activate
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
|
||||
<button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="times"></fa-icon> Close
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<mat-tab label="Campaign">
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
|
||||
<button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="undo"></fa-icon> Reactivate
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="tab-content mat-typography">
|
||||
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
Campaign Name : {{ smsCampaignData.campaignName }}
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
Report Name : {{ smsCampaignData.reportName }}
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
Status : {{ smsCampaignData.campaignStatus.value }}
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
Trigger Type : {{ smsCampaignData.triggerType.value }}
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
Submitted on : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | date}}
|
||||
</mat-list-item>
|
||||
<div fxLayout="column" fxLayoutGap="10px" class="template-message">
|
||||
<h3>Template Message :</h3>
|
||||
<textarea matInput disabled>{{ smsCampaignData.campaignMessage}}</textarea>
|
||||
</div>
|
||||
</mat-list>
|
||||
<span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
|
||||
<button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'">
|
||||
<fa-icon icon="trash"></fa-icon> Delete
|
||||
</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-tab>
|
||||
<mat-card class="sms-card">
|
||||
|
||||
<mat-tab *ngFor = "let tab of smsTabs" [label]="tab.label">
|
||||
<mat-card-content>
|
||||
|
||||
<div class="tab-content mat-typography">
|
||||
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
||||
|
||||
<form [formGroup]="smsForm" (ngSubmit)="search()">
|
||||
<div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
|
||||
<mat-form-field>
|
||||
<mat-label>From Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>To Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<div class="search-button" >
|
||||
<button mat-raised-button color="primary">
|
||||
<fa-icon icon="search"></fa-icon> Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<mat-tab label="Campaign">
|
||||
|
||||
<div class="tab-content mat-typography">
|
||||
|
||||
<div class="mat-elevation-z1 m-b-25">
|
||||
<table #messageTable mat-table [dataSource]="dataSource">
|
||||
<ng-container matColumnDef="Message">
|
||||
<th mat-header-cell *matHeaderCellDef> Message </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.message}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Status">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.status.value}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Mobile No.">
|
||||
<th mat-header-cell *matHeaderCellDef> Mobile No. </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.mobileNo}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Campaign Name">
|
||||
<th mat-header-cell *matHeaderCellDef> Campaign Name </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.campaignName}}</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<mat-list>
|
||||
|
||||
<mat-list-item>
|
||||
Campaign Name : {{ smsCampaignData.campaignName }}
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
Report Name : {{ smsCampaignData.reportName }}
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
Status : {{ smsCampaignData.campaignStatus.value }}
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
Trigger Type : {{ smsCampaignData.triggerType.value }}
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
Submitted on : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | date }}
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item *ngIf="smsCampaignData.recurrence">
|
||||
Recurrence : {{ smsCampaignData.recurrence }}
|
||||
</mat-list-item>
|
||||
|
||||
<div fxLayout="column" fxLayoutGap="10px" class="template-message">
|
||||
<h3>Template Message :</h3>
|
||||
<textarea matInput disabled>{{ smsCampaignData.campaignMessage}}</textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-list>
|
||||
|
||||
</mat-tab>
|
||||
</div>
|
||||
|
||||
</mat-tab-group>
|
||||
</mat-tab>
|
||||
|
||||
</mat-card-content>
|
||||
<mat-tab *ngFor = "let tab of smsTabs" [label]="tab.label">
|
||||
|
||||
</mat-card>
|
||||
<div class="tab-content mat-typography">
|
||||
|
||||
<form [formGroup]="smsForm" (ngSubmit)="search()">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>From Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>To Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="search-button" >
|
||||
<button mat-raised-button color="primary">
|
||||
<fa-icon icon="search"></fa-icon> Search</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<table #messageTable mat-table [dataSource]="dataSource" class="mat-elevation-z1 m-b-25">
|
||||
|
||||
<ng-container matColumnDef="Message">
|
||||
<th mat-header-cell *matHeaderCellDef> Message </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.message}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Status">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.status.value}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Mobile No.">
|
||||
<th mat-header-cell *matHeaderCellDef> Mobile No. </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.mobileNo}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Campaign Name">
|
||||
<th mat-header-cell *matHeaderCellDef> Campaign Name </th>
|
||||
<td mat-cell *matCellDef="let sms">{{sms.campaignName}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user