@adlfe/campaign-management-library 2.10.0 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.html

@@ -0,0 +1,140 @@
+<h3 class="font-20px font-PoppinsBold asterix--after mb-2"
+	[ngClass]="{ 'mb-3': !isReadOnlyMode }">
+	Target Audience
+</h3>
+<div *ngIf="!isReadOnlyMode"
+	class="d-flex justify-content-between">
+	<p>Select your target audience (category)</p>
+	<div *ngIf="isShowUploadCSV">
+		<button mat-stroked-button
+			color="primary-telin"
+			class="telin-font-color mr-2"
+			(click)="onDownloadSampleService()">
+			Download Template
+		</button>
+
+		<button mat-flat-button
+			color="primary-telin-blue2"
+			[disabled]="isUpload"
+			(click)="filePicker.click()">
+			Upload XLSX
+		</button>
+
+		<input #filePicker
+			hidden
+			type="file"
+			[accept]="extFileAccepted.join()"
+			(change)="onFileSelected($event)" />
+	</div>
+</div>
+
+<p *ngIf="!isReadOnlyMode && (getCampaignStorage?.targetAudienceFile?.name ||
+getCampaignStorage?.targetAudienceFile?.targetURL)"
+	class="text-right my-2">
+	<span class="fw-bold">Filename:</span> {{ getCampaignStorage?.targetAudienceFile?.name ||
+	getCampaignStorage?.targetAudienceFile?.targetURL }}
+</p>
+
+<div *ngIf="!isReadOnlyMode || !fileSelected?.name"
+	class="row align-items-center mb-3">
+	<div class="col-md-4 col-12">
+		<lib-search *ngIf="!isReadOnlyMode"
+			[placeholder]="'Search'"
+			(searchRes)="updateSearch($event)"></lib-search>
+	</div>
+	<div class="col-md-8 col-12">
+		<p class="text-right mb-0">
+			Category Selected:
+			<span class="font-bold">
+				{{ categorySelected?.length || 0 }}
+			</span>
+		</p>
+	</div>
+</div>
+
+<ng-container *ngIf="!isReadOnlyMode || !fileSelected?.name; else isShowFile">
+	<table *ngIf="!isLoading; else isSpinner"
+		mat-table
+		matSort
+		matSortDisableClear
+		class="table w-100 mb-2"
+		[dataSource]="table.dataSource"
+		(matSortChange)="sort()">
+		<ng-container matColumnDef="select">
+			<th *matHeaderCellDef>
+				<ng-container *ngIf="!isReadOnlyMode">
+					<mat-checkbox [aria-label]="checkboxLabel()"
+						[checked]="selection.hasValue() && isAllSelected()"
+						[indeterminate]="selection.hasValue() && !isAllSelected()"
+						(change)="masterToggle($event.checked)">
+					</mat-checkbox>
+				</ng-container>
+			</th>
+			<td *matCellDef="let row">
+				<ng-container *ngIf="!isReadOnlyMode">
+					<mat-checkbox [aria-label]="checkboxLabel(row)"
+						[checked]="isChecked(row)"
+						(change)="onChecked($event.checked, row)">
+					</mat-checkbox>
+				</ng-container>
+			</td>
+		</ng-container>
+
+		<ng-container *ngFor="let index of [1, 2, 3, 4]"
+			[matColumnDef]="table.columns[index]">
+			<th *matHeaderCellDef
+				[mat-sort-header]="table.columns[index]">
+				{{ table.labels[index] }}
+			</th>
+
+			<td *matCellDef="let row">
+				<ng-container *ngIf="[1, 2].includes(index)">
+					{{ row[table.columns[index]] }}
+				</ng-container>
+				<ng-container *ngIf="[3, 4].includes(index)">
+					{{ row[table.columns[index]] | date : ' d MMM y' }}
+				</ng-container>
+			</td>
+		</ng-container>
+
+		<ng-container matColumnDef="no-content">
+			<th class="text-center"
+				*matHeaderCellDef
+				[colSpan]="table.columns.length">
+				Data Not Available
+			</th>
+		</ng-container>
+
+		<tr mat-header-row
+			*matHeaderRowDef="table.columns"></tr>
+
+		<tr mat-header-row
+			class="no-content"
+			*matHeaderRowDef="['no-content']"
+			[style.display]="table.dataSource?.data?.length === 0 ? 'table-row' : 'none'"></tr>
+
+		<tr mat-row
+			*matRowDef="let row; columns: table.columns"></tr>
+	</table>
+
+	<mat-paginator *ngIf="!isReadOnlyMode"
+		class="campaign-paginator"
+		[length]="table.totalData"
+		[pageSize]="table.pageSize"
+		[pageIndex]="table.getPageIndex()"
+		[pageSizeOptions]="[10, 25, 50, 100, 250]"
+		(page)="updatePage($event)"></mat-paginator>
+
+	<ng-template #isSpinner>
+		<div class="text-center my-auto">
+			<img src="../../../../../assets/images/spinner.svg" />
+		</div>
+	</ng-template>
+</ng-container>
+
+<ng-template #isShowFile>
+	<p class="font-PoppinsBold font-14px">
+		File: <a [href]="fileSelected?.targetURL"
+			target="_blank">{{ fileSelected?.name }}</a>
+	</p>
+</ng-template>

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.scss

@@ -0,0 +1,13 @@
+::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/new-campaign/new-number-bases/new-number-bases.component.spec.ts

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

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/new-number-bases/new-number-bases.component.ts

@@ -0,0 +1,419 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { ToastrService } from 'ngx-toastr';
+import { Subscription } from 'rxjs';
+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';
+import { ApiAdapterServiceService } from '../../../../core/services';
+import { downloadBlobFile } from '../../../../core/util';
+import { ContactCategoryModel } from '../../../models';
+import { TableModel } from '../../campaign-index/models';
+
+@Component({
+    selector: 'lib-new-number-bases',
+    templateUrl: './new-number-bases.component.html',
+    styleUrls: ['./new-number-bases.component.scss'],
+})
+export class NewNumberBasesComponent implements OnInit, OnDestroy {
+    @Output()
+    public targetAudience: EventEmitter<{
+        targetAudience: string[];
+        numberCount: number;
+        isUpload: boolean;
+        file: any;
+    }>;
+
+    public table: TableModel;
+    public isUpload: boolean = false;
+    public isLoading: boolean = false;
+    public isShowUploadCSV: boolean = false;
+    public categorySelected: ContactCategoryModel[] = [];
+    public selection = new SelectionModel<ContactCategoryModel>(true, []);
+    public extFileAccepted: string[] = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        '.csv',
+    ];
+    public fileSelected: {
+        name: string;
+        targetURL: string;
+    } = null;
+
+    private categoryParam: HttpBodyReqPaginationModel;
+    private subscribers: Subscription[] = [];
+
+    @Input() public isReadOnlyMode: boolean;
+
+    @ViewChild(MatSort) matSort: MatSort;
+
+    constructor(
+        private apiAdapterService: ApiAdapterServiceService,
+        private toastr: ToastrService
+    ) {
+        this.targetAudience = new EventEmitter();
+    }
+
+    ngOnInit(): void {
+        this.categoryParam = new HttpBodyReqPaginationModel();
+
+        this.initTable();
+        this.getCategoryList();
+
+        this.targetAudience.emit({
+            targetAudience: [],
+            numberCount: 0,
+            isUpload: this.getCampaignStorage?.generalInformation?.form?.isUpload,
+            file: {
+                name: this.getCampaignStorage?.targetAudienceFile?.name,
+                targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+            },
+        });
+    }
+
+    private initTable(): void {
+        this.table = new TableModel();
+        this.table.labels = [
+            'select',
+            'Category',
+            'No. Of Customer',
+            'Created Date',
+            'Updated Date',
+        ];
+        this.table.columns = ['select', 'name', 'totalMembers', 'createdDate', 'updatedDate'];
+    }
+
+    get getCampaignStorage(): any {
+        return localStorage.getItem('telin.campaign')
+            ? JSON.parse(localStorage.getItem('telin.campaign'))
+            : {};
+    }
+
+    private initEdit(): void {
+        if (Object.entries(this.getCampaignStorage).length === 0) return;
+
+        this.isShowUploadCSV = this.getCampaignStorage?.generalInformation?.form?.isUpload;
+
+        this.fileSelected = {
+            name: this.getCampaignStorage?.targetAudienceFile?.name,
+            targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+        };
+
+        this.table.dataSource.data?.forEach((each) => {
+            if (this.getCampaignStorage?.targetAudience?.includes(each.id))
+                this.onChecked(true, each);
+        });
+    }
+
+    private getCategoryList(filter: string = ''): void {
+        this.isLoading = true;
+
+        if (this.isReadOnlyMode) this.categoryParam.pageSize = 1000;
+
+        const parameterList: Array<Parameter> = [
+            this.initParam('pageNo', this.categoryParam.pageNo, 'number'),
+            this.initParam('rowPerPage', this.categoryParam.pageSize, 'number'),
+            this.initParam('filter', filter, 'string'),
+            this.initParam(
+                'platform',
+                this.getCampaignStorage?.generalInformation?.form?.medium,
+                'string'
+            ),
+        ];
+
+        if (this.getCampaignStorage?.generalInformation?.form?.medium === 'LINE')
+            parameterList.push(
+                this.initParam(
+                    'accountId',
+                    this.getCampaignStorage?.generalInformation?.form?.from?.id,
+                    'string'
+                )
+            );
+
+        if (this.isReadOnlyMode) parameterList.push(this.initParam('summary', true, 'string'));
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(parameterList, '/admin/category', 'GET')
+            .subscribe((resp: AppResponse<ContactCategoryModel[]>) => {
+                if (this.isReadOnlyMode) {
+                    this.table.dataSource.data = resp.data?.filter((each) =>
+                        this.getCampaignStorage?.targetAudience?.includes(each.id)
+                    );
+
+                    this.categorySelected = this.table.dataSource.data;
+                    this.isLoading = false;
+                    this.initEdit();
+                    return;
+                }
+
+                this.table.dataSource.data = resp.data;
+                this.table.setNextPage(resp.haveNext);
+                this.isLoading = false;
+                this.initEdit();
+            });
+
+        this.subscribers.push(subs);
+    }
+
+    private initParam(_name: string, _value: any, _type: string): Parameter {
+        return {
+            name: _name,
+            value: _value,
+            in: 'query',
+            type: _type,
+        };
+    }
+
+    public updateSearch(searchValue: string): void {
+        this.table.resetPage();
+        this.categoryParam.pageNo = this.table.page;
+        this.getCategoryList(searchValue);
+    }
+
+    public updatePage(event: any): void {
+        if (this.table.pageSize !== event?.pageSize) this.table.resetPage();
+
+        this.table.page =
+            this.table.pageSize !== event?.pageSize ? this.table.page : event?.pageIndex + 1;
+        this.table.pageSize = event?.pageSize;
+        this.categoryParam.pageNo = this.table.page;
+        this.categoryParam.pageSize = this.table.pageSize;
+
+        this.getCategoryList();
+    }
+
+    public sort(): void {
+        this.table.dataSource.sort = this.matSort;
+    }
+
+    public checkboxLabel(row?: ContactCategoryModel): string {
+        if (!row) return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
+
+        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.name + 1}`;
+    }
+
+    public isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.table.dataSource.data?.length ?? 0;
+
+        if (
+            this.table.dataSource.data &&
+            this.table.dataSource.data.length > 0 &&
+            this.selection.selected &&
+            this.selection.selected.length > 0
+        ) {
+            for (const data of this.table.dataSource.data) {
+                if (this.selection.selected.filter((t) => t.id === data.id).length > 0) continue;
+
+                return false;
+            }
+        }
+
+        return numSelected === numRows;
+    }
+
+    public masterToggle(isChecked: boolean) {
+        if (!isChecked) {
+            this.selection.clear();
+            this.categorySelected = [];
+
+            this.targetAudience.emit({
+                targetAudience: [],
+                numberCount: 0,
+                isUpload: this.isShowUploadCSV,
+                file: {
+                    name: this.getCampaignStorage?.targetAudienceFile?.name,
+                    targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+                },
+            });
+
+            return;
+        }
+
+        this.selection.select(...this.table.dataSource.data);
+        this.categorySelected = this.selection.selected;
+
+        this.targetAudience.emit({
+            targetAudience: this.categorySelected.map((t) => t.id),
+            numberCount: this.categorySelected.reduce((sum, x) => sum + x.totalMembers, 0),
+            isUpload: this.isShowUploadCSV,
+            file: {
+                name: this.getCampaignStorage?.targetAudienceFile?.name,
+                targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+            },
+        });
+    }
+
+    public onChecked(isChecked: boolean, row: ContactCategoryModel) {
+        if (!isChecked) {
+            this.selection.deselect(...this.selection.selected.filter((x) => x.id === row.id));
+            this.categorySelected = this.selection.selected;
+
+            this.targetAudience.emit({
+                targetAudience: this.categorySelected.map((t) => t.id),
+                numberCount: this.categorySelected.reduce((sum, x) => sum + x.totalMembers, 0),
+                isUpload: this.isShowUploadCSV,
+                file: {
+                    name: this.getCampaignStorage?.targetAudienceFile?.name,
+                    targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+                },
+            });
+
+            return;
+        }
+
+        this.selection.select(row);
+        this.categorySelected = this.selection.selected;
+
+        this.targetAudience.emit({
+            targetAudience: this.categorySelected.map((t) => t.id),
+            numberCount: this.categorySelected.reduce((sum, x) => sum + x.totalMembers, 0),
+            isUpload: this.isShowUploadCSV,
+            file: {
+                name: this.getCampaignStorage?.targetAudienceFile?.name,
+                targetURL: this.getCampaignStorage?.targetAudienceFile?.targetURL,
+            },
+        });
+    }
+
+    public isChecked(row: ContactCategoryModel) {
+        const found = this.selection.selected.find((x) => x.id === row.id);
+        return found ? true : false;
+    }
+
+    public onDownloadSampleService(): void {
+        const parameterList: Array<Parameter> = [
+            this.initParam(
+                'platform',
+                this.getCampaignStorage?.generalInformation?.form?.template?.platform,
+                'string'
+            ),
+            this.initParam(
+                'templateName',
+                this.getCampaignStorage?.generalInformation?.form?.template?.name,
+                'string'
+            ),
+            this.initParam(
+                'templateLang',
+                this.getCampaignStorage?.generalInformation?.form?.template?.lang,
+                'string'
+            ),
+            this.initParam(
+                'category',
+                this.categorySelected?.map((t) => t.id).join() ?? [],
+                'string'
+            ),
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(parameterList, '/message/bulkupload/template', 'GET', true)
+            .subscribe((resp: AppResponse<any>) => {
+                downloadBlobFile(resp, 'Sample-UploadParameter.xlsx');
+            });
+
+        this.subscribers.push(subs);
+    }
+
+    public onFileSelected(event: Event) {
+        const file: FileList = (event.target as HTMLInputElement).files;
+        const MAXIMUM_SIZE = 10 * 1024 * 1024;
+
+        if (file.length === 0) return;
+
+        if (file[0].size > MAXIMUM_SIZE) {
+            this.toastr.error('Upload media failed, max size 10mb');
+            return;
+        }
+
+        // this.uploadMediaService(file[0]);
+        this.getPresignedUrlService(file[0]);
+    }
+
+    private getPresignedUrlService(file: File): void {
+        this.isUpload = true;
+
+        const parameterList: Array<Parameter> = [
+            { name: 'fileName', value: file.name, in: 'query', type: 'string' },
+            { name: 'fileType', value: file.type, in: 'query', type: 'string' },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(parameterList, '/campaign/upload/pre-signed-url', 'GET')
+            .subscribe(
+                (resp: AppResponse<any>) => {
+                    if (resp && resp.data) {
+                        this.uploadToS3Service(file, resp.data.url, resp.data.fileName);
+                    }
+                },
+                () => (this.isUpload = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    private uploadToS3Service(file: File, s3Url: string, fileNameS3: string): void {
+        this.apiAdapterService.uploadFileToS3(s3Url, file).subscribe(
+            () => {
+                this.finalizeTargetFileService(fileNameS3);
+            },
+            (err) => {
+                this.toastr.error('Failed uploading to S3 storage');
+                this.isUpload = false;
+                console.error('S3 Upload Error:', err);
+            }
+        );
+    }
+
+    private finalizeTargetFileService(fileNameS3: string): void {
+        const campaignId = this.getCampaignStorage?.generalInformation?.id;
+        const parameterList: Array<Parameter> = [
+            {
+                name: 'body',
+                value: { fileName: fileNameS3 },
+                in: 'body',
+                type: 'object',
+                withoutKeyData: true,
+            },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(parameterList, `/campaign/${campaignId}/targetfile`, 'POST')
+            .subscribe(
+                (resp: AppResponse<any>) => {
+                    if (!resp) return;
+
+                    this.toastr.info('Upload XLSX has been uploaded successfully');
+                    this.isUpload = false;
+
+                    this.targetAudience.emit({
+                        targetAudience: this.categorySelected.map((t) => t.id),
+                        numberCount: this.categorySelected.reduce(
+                            (sum, x) => sum + x.totalMembers,
+                            0
+                        ),
+                        isUpload: true,
+                        file: {
+                            name: fileNameS3,
+                            targetURL: resp.data?.targetURL || '',
+                        },
+                    });
+                },
+                () => (this.isUpload = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    ngOnDestroy(): void {
+        this.subscribers.forEach((each) => each.unsubscribe());
+    }
+}