@adlfe/campaign-management-library 2.9.21 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/campaign-index.component.html

@@ -0,0 +1,138 @@
+<div class="billing-list p-4">
+    <div class="row mb-3">
+        <div class="col-md-8">
+            <p class="title mb-1">Broadcast Messaging</p>
+
+            <mat-chip-list>
+                <p class="font-subtitle">Manage Your Broadcast Messages Here.</p>
+                <div>
+                    <mat-chip class="example-box-total" cdkDrag>
+                        {{ campaignTotal?.total }} Total Broadcasts
+                    </mat-chip>
+                    <mat-chip class="example-box-live" cdkDrag>
+                        {{ campaignTotal?.live }} Scheduled Broadcasts
+                    </mat-chip>
+                    <mat-chip class="example-box-pending" cdkDrag>
+                        {{ campaignTotal?.pending }} Pending Approval
+                    </mat-chip>
+                </div>
+            </mat-chip-list>
+        </div>
+        <div class="col-md-4 mt-auto text-end">
+            <!-- <button mat-flat-button
+				color="primary-telin-blue2"
+				style="height: 46px; margin-right:20px"
+				(click)="changeCurrentView(currentViews.Dashboard)">
+				Go to Dashboard
+			</button> -->
+
+            <button
+                mat-flat-button
+                color="primary-telin-blue2"
+                style="height: 46px"
+                (click)="addCampaign()"
+            >
+                <mat-icon class="icon-menu">add</mat-icon>
+                Add Broadcast
+            </button>
+        </div>
+
+        <div class="col-12 mt-3">
+            <div style="background-color: #ffffff; border-radius: 8px">
+                <section class="wrapper__action w-100 p-3">
+                    <div class="display__left mb-xs">
+                        <lib-search
+                            [placeholder]="'Search'"
+                            (searchRes)="updateSearch($event)"
+                        ></lib-search>
+
+                        <div
+                            class="alert alert-primary d-flex align-items-center ml-3"
+                            role="alert"
+                        >
+                            <img
+                                src="../../../../assets/svg/info-blue.svg"
+                                style="width: 24px; height: auto; cursor: pointer"
+                                [matTooltip]="
+                                    'The 5 minutes is set to give time for summarizing and consolidating all the data properly'
+                                "
+                            />
+
+                            <div class="text-body font-13px ml-2">
+                                The page can be refreshed every 5 minutes to view the updated data
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="display__right float__right__xs">
+                        <div
+                            ngbDropdown
+                            container="body"
+                            class="filter__body"
+                            placement="bottom-right"
+                            [autoClose]="false"
+                            #filterDropdown="ngbDropdown"
+                        >
+                            <button
+                                ngbDropdownToggle
+                                mat-stroked-button
+                                color="primary-telin1"
+                                style="height: 46px"
+                            >
+                                <em class="material-icons md-18 pointer pr-1">filter_list</em>
+                                Filter
+                            </button>
+
+                            <div
+                                ngbDropdownMenu
+                                id="filter-drop"
+                                class="dropdown-menu filter__dropdown"
+                            >
+                                <lib-filter-in-list-of-campaign
+                                    *ngIf="filterDropdown.isOpen()"
+                                    class="filter-content"
+                                    style="z-index: 900 !important"
+                                    [filterValue]="filterValue"
+                                    (onChangeFilter)="updateFilter($event)"
+                                    (closeDropdown)="filterDropdown.close()"
+                                >
+                                </lib-filter-in-list-of-campaign>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <lib-viewing-list-of-campaign-table
+                    [table]="table"
+                    (currentView)="changeCurrentView($event)"
+                    (updateTable)="getCampaignList()"
+                >
+                </lib-viewing-list-of-campaign-table>
+
+                <div class="pagination-customize row">
+                    <div class="col-md-7 col-12 my-auto">
+                        <ngb-pagination
+                            [collectionSize]="table.totalData"
+                            [(page)]="table.page"
+                            [pageSize]="table.pageSize"
+                            [maxSize]="5"
+                            [rotate]="true"
+                            (pageChange)="updatePage($event)"
+                        ></ngb-pagination>
+                    </div>
+
+                    <div class="col-md-5 col-12">
+                        <mat-paginator
+                            [length]="table.totalData"
+                            [pageSize]="table.pageSize"
+                            [pageIndex]="table.getPageIndex()"
+                            [pageSizeOptions]="[10, 25, 50, 100, 250]"
+                            (page)="updatePage($event)"
+                        >
+                        </mat-paginator>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/campaign-index.component.scss

@@ -0,0 +1,101 @@
+@import '../../../../styles/abstracts/variables';
+
+.billing-list {
+	.title {
+		font-size: $font-xxl;
+		font-family: $font-family;
+		font-weight: bold;
+	}
+
+	.sub--title {
+		font-family: $font-family;
+		font-weight: bold;
+	}
+}
+
+.wrapper {
+	display: inline;
+	width: 1000px;
+}
+
+.example-box-total {
+	color: black;
+	background-color: lightskyblue;
+}
+
+.example-box-live {
+	color: black;
+	background-color: lightgreen;
+}
+
+.example-box-pending {
+	color: black;
+	background-color: lightcoral;
+}
+
+.font-softer-black mb-0 {
+	padding-left: 20px;
+}
+
+.example-box-total {
+	color: #659CFF!important;
+	border: 1px solid #659CFF;
+	background-color: #E0EBFF;
+}
+
+.example-box-live {
+	color: #2BCA3B !important;
+	border: 1px solid #2BCA3B;
+	background-color: #E6FDE9;
+}
+
+.example-box-pending {
+	color: #FB9334 !important;
+	border: 1px solid #FB9334;
+	background-color: #FFE8D2;
+}
+
+::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
+	color: rgba(97, 119, 196, 255);
+	font-weight: bold;
+}
+
+::ng-deep .mat-chip.mat-standard-chip {
+	&:after {
+		background-color: inherit !important;
+	}
+}
+
+::ng-deep .mat-tab-group {
+	&.tabs-billing {
+		width: 100%;
+		margin-top: 30px;
+		.mat-tab-header {
+			background-color: #ffffff;
+			border-top-left-radius: 8px;
+			border-top-right-radius: 8px;
+			box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+		}
+		.mat-tab-body-wrapper {
+			min-height: 500px;
+			background-color: #ffffff;
+			border-bottom-left-radius: 8px;
+			border-bottom-right-radius: 8px;
+			box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+		}
+	}
+}
+
+::ng-deep .mat-paginator {
+	&.campaign-paginator {
+		.mat-paginator-container {
+			align-items: normal;
+		}
+		.mat-tab-body {
+			background-color: #ffffff;
+		}
+		.mat-form-field-underline {
+			bottom: 0;
+		}
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/campaign-index.component.ts

@@ -0,0 +1,184 @@
+import { DatePipe } from '@angular/common';
+import {
+	Component,
+	EventEmitter,
+	OnDestroy,
+	OnInit,
+	Output,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MainArea } from '../../../core/enums/main-area.enum';
+import { HttpBodyReqPaginationModel } from '../../../core/models';
+import { Parameter } from '../../../core/models/util/api-adapter-service-models';
+import { AppResponse } from '../../../core/models/util/api-dto/response-models/app-response';
+import { ApiAdapterServiceService } from '../../../core/services/api-adapter-service.service';
+import { CampaignTotalDto } from '../../models/campaign-count-final-response-dto.model';
+import {
+	CampaignListTableColumnConst,
+	CampaignListTableLabelConst,
+	TableModel,
+} from './models';
+import { CampaignResponseDtoApi } from './models/campaign-response-dto.model';
+
+@Component({
+	selector: 'lib-campaign-index',
+	templateUrl: './campaign-index.component.html',
+	styleUrls: ['./campaign-index.component.scss'],
+})
+export class CampaignIndexComponent implements OnInit, OnDestroy {
+	@Output() currentView = new EventEmitter<MainArea>();
+
+	public table: TableModel;
+	public filterValue: any;
+	public currentViews = MainArea;
+	public campaignTotal: CampaignTotalDto;
+
+	private campaignParam: HttpBodyReqPaginationModel;
+	private subscribers: Subscription[] = [];
+
+	constructor(
+		private datePipe: DatePipe,
+		private apiAdapterService: ApiAdapterServiceService
+	) {}
+
+	ngOnInit(): void {
+		this.campaignParam = new HttpBodyReqPaginationModel();
+
+		this.initTable();
+		this.campaignCountService();
+		this.getCampaignList();
+
+		localStorage.removeItem('telin.campaign');
+	}
+
+	private initTable(): void {
+		this.table = new TableModel();
+		this.table.labels = CampaignListTableLabelConst;
+		this.table.columns = CampaignListTableColumnConst;
+	}
+
+	private campaignCountService() {
+		const subs = this.apiAdapterService
+			.executeApiRequest([], '/campaign/totals', 'GET')
+			.subscribe((response: AppResponse<CampaignTotalDto>) => {
+				this.campaignTotal = response?.data;
+			});
+
+		this.subscribers.push(subs);
+	}
+
+	public getCampaignList(searchValue: string = ''): void {
+		const parameterList: Array<Parameter> = [
+			this.initParam('pageNo', this.campaignParam.pageNo, 'number'),
+			this.initParam('rowPerPage', this.campaignParam.pageSize, 'number'),
+			this.initParam('filter', searchValue, 'string'),
+		];
+
+		if (this.filterValue?.businessName)
+			parameterList.push(
+				this.initParam(
+					'clientId',
+					this.filterValue.businessName,
+					'string'
+				)
+			);
+		if (this.filterValue?.medium)
+			parameterList.push(
+				this.initParam('channel', this.filterValue.medium, 'string')
+			);
+		if (this.filterValue?.templateName)
+			parameterList.push(
+				this.initParam(
+					'templateName',
+					this.filterValue.templateName?.name,
+					'string'
+				)
+			);
+		if (this.filterValue?.status)
+			parameterList.push(
+				this.initParam('status', this.filterValue.status, 'string')
+			);
+		if (this.filterValue?.startDate)
+			parameterList.push(
+				this.initParam(
+					'startDate',
+					this.datePipe.transform(
+						this.filterValue.startDate,
+						'yyyy-MM-dd'
+					),
+					'string'
+				)
+			);
+		if (this.filterValue?.endDate)
+			parameterList.push(
+				this.initParam(
+					'endDate',
+					this.datePipe.transform(
+						this.filterValue.endDate,
+						'yyyy-MM-dd'
+					),
+					'string'
+				)
+			);
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(parameterList, '/campaign', 'GET')
+			.subscribe((resp: AppResponse<CampaignResponseDtoApi[]>) => {
+				this.table.dataSource.data = resp.data;
+				this.table.setNextPage(resp.haveNext);
+			});
+
+		this.subscribers.push(subs);
+	}
+
+	private initParam(_name: string, _value: any, _type: string): Parameter {
+		return {
+			name: _name,
+			value: _value,
+			in: 'query',
+			type: _type,
+		};
+	}
+
+	public updatePage(event: any): void {
+		if (event.pageSize) {
+			this.table.totalData = event.pageSize;
+			this.table.setPageSize(event.pageSize);
+			this.table.resetPage();
+		} else {
+			this.table.setPage(event);
+		}
+
+		this.campaignParam.pageNo = this.table.page;
+		this.campaignParam.pageSize = this.table.pageSize;
+		this.getCampaignList();
+	}
+
+	public updateFilter(_filter: any) {
+		this.table.resetPage();
+		this.campaignParam.pageNo = this.table.page;
+		this.campaignParam.pageSize = this.table.pageSize;
+		this.filterValue = _filter;
+
+		this.getCampaignList();
+	}
+
+	public updateSearch(searchValue: string) {
+		this.table.resetPage();
+		this.campaignParam.pageNo = this.table.page;
+		this.getCampaignList(searchValue);
+	}
+
+	public addCampaign(): void {
+		localStorage.removeItem('telin.campaign');
+		this.changeCurrentView(this.currentViews.NewCampaign);
+	}
+
+	public changeCurrentView(area: MainArea) {
+		this.currentView.emit(area);
+	}
+
+	ngOnDestroy(): void {
+		this.subscribers.forEach(each => each.unsubscribe());
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/campaign-index.module.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {
+	NgbDropdownModule,
+	NgbPaginationModule,
+} from '@ng-bootstrap/ng-bootstrap';
+import { MatSelectInfiniteScrollDirective } from '../../../core/directives';
+import { SearchModule } from '../../../global/search/search.module';
+import { CampaignIndexComponent } from './campaign-index.component';
+import { FilterInListOfCampaignComponent } from './component/filter-in-list-of-campaign';
+import { ViewingListOfCampaignTableComponent } from './component/viewing-list-of-campaign-table';
+
+@NgModule({
+	declarations: [
+		ViewingListOfCampaignTableComponent,
+		FilterInListOfCampaignComponent,
+		CampaignIndexComponent,
+		MatSelectInfiniteScrollDirective,
+	],
+	imports: [
+		CommonModule,
+		FormsModule,
+		ReactiveFormsModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatDatepickerModule,
+		MatTableModule,
+		MatSortModule,
+		MatPaginatorModule,
+		MatDialogModule,
+		MatTabsModule,
+		MatCardModule,
+		MatCheckboxModule,
+		MatSelectModule,
+		MatRadioModule,
+		MatButtonModule,
+		MatIconModule,
+		MatChipsModule,
+		NgbPaginationModule,
+		NgbDropdownModule,
+		MatChipsModule,
+		MatGridListModule,
+		MatNativeDateModule,
+		SearchModule,
+		MatToolbarModule,
+		MatTooltipModule,
+	],
+	exports: [CampaignIndexComponent, MatSelectInfiniteScrollDirective],
+})
+export class CampaignIndexModule {}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/component/filter-in-list-of-campaign/filter-in-list-of-campaign.component.html

@@ -0,0 +1,163 @@
+<p class="font-16px font-bold">Filter</p>
+
+<form [formGroup]="form"
+	class="contact-filter">
+	<div class="row">
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-70">
+					<mat-label>Business Name</mat-label>
+
+					<mat-select placeholder="Select Business Name"
+						formControlName="businessName">
+						<mat-option value=""> --- select none --- </mat-option>
+						<mat-option *ngFor="let option of businessNameOption"
+							[value]="option.id">
+							{{ option.name }}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-70">
+					<mat-label>Channel</mat-label>
+
+					<mat-select placeholder="Select the Channel"
+						formControlName="medium">
+						<mat-option value=""> --- select none --- </mat-option>
+						<mat-option *ngFor="let option of channelOption"
+							[value]="option.value"
+							(click)="getTemplateOptionService()">
+							{{ option.label }}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label class="asterix--after">Template Name</mat-label>
+
+					<mat-select matSelectInfiniteScroll
+						formControlName="templateName"
+						placeholder="Select template"
+						[complete]="isHaveNextTemplateOption === false"
+						[compareWith]="templateSelectedDisplay"
+						(infiniteScroll)="getNextTemplateBatch()">
+						<div style="margin: 20px">
+							<lib-search [placeholder]="'Search'"
+								[currentValue]="form?.get('templateName').value?.name"
+								(searchRes)="templateSearch($event)"></lib-search>
+						</div>
+
+						<mat-option *ngFor="let option of templateOption"
+							[value]="option">
+							{{ option.name }}
+						</mat-option>
+						<mat-option *ngIf="isLoadingTemplateOption">Loading...</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-70">
+					<mat-label>Status</mat-label>
+
+					<mat-select placeholder="Select the Status"
+						formControlName="status">
+						<mat-option value=""> --- select none --- </mat-option>
+						<mat-option *ngFor="let option of statusOption"
+							[value]="option.value">
+							{{ option.label }}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label> Start Date </mat-label>
+					<input matInput
+						[matDatepicker]="startDatePicker"
+						formControlName="startDate"
+						class="mat-datepicker-input"
+						(dateChange)="validateBackDate()" />
+
+					<mat-datepicker-toggle matSuffix
+						[for]="startDatePicker"> </mat-datepicker-toggle>
+					<mat-icon *ngIf="form.get('startDate').value"
+						matDatepickerToggleIcon
+						(click)="clearDate()">clear</mat-icon>
+					<mat-datepicker #startDatePicker></mat-datepicker>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div class="col-md-12 col-12">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label> End Date </mat-label>
+					<input matInput
+						[min]="form.get('startDate').value"
+						[matDatepicker]="endDatePicker"
+						formControlName="endDate"
+						class="mat-datepicker-input"
+						(dateChange)="validateBackDate()" />
+
+					<mat-datepicker-toggle matSuffix
+						[for]="endDatePicker"> </mat-datepicker-toggle>
+					<mat-icon *ngIf="form.get('endDate').value"
+						matDatepickerToggleIcon
+						(click)="clearDate()">clear</mat-icon>
+					<mat-datepicker #endDatePicker></mat-datepicker>
+				</mat-form-field>
+			</div>
+		</div>
+
+		<div style="display: flex; flex: 1; width: 100%">
+			<button mat-stroked-button
+				color="primary-telin"
+				class="telin-font-color w-48"
+				style="width: 100%; margin-bottom: 10px"
+				(click)="onReset()">
+				Reset
+			</button>
+		</div>
+		<div class="d-flex justify-content-between">
+			<button mat-stroked-button
+				color="secondary-telin"
+				class="w-48"
+				(click)="onCancel()">
+				Cancel
+			</button>
+
+			<button mat-flat-button
+				color="primary-telin-blue2"
+				class="w-48"
+				(click)="onApply()">
+				Apply
+			</button>
+		</div>
+	</div>
+</form>

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/component/filter-in-list-of-campaign/filter-in-list-of-campaign.component.scss

@@ -0,0 +1,23 @@
+.contact-filter {
+	.platform {
+		display: grid;
+		grid-gap: 5px;
+		grid-template-columns: auto 1fr auto;
+	}
+}
+
+.button-row {
+	margin: 8px 8px 8px 0;
+}
+
+.mat-datepicker-input {
+	width: 85%;
+}
+
+.mat-icon {
+	position: relative;
+	float: right;
+	top: -7px;
+	cursor: pointer;
+	color: rgba(0, 0, 0, 0.54);
+}