@adlfe/campaign-management-library 2.10.0 → 2.10.2

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

@@ -0,0 +1,454 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+	Component,
+	EventEmitter,
+	Input,
+	OnDestroy,
+	OnInit,
+	Output,
+} from '@angular/core';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import {
+	FailoverMechanismValidationConst,
+	PlatformOptionConst,
+	isHaveNextOption,
+	isLoadingOption,
+	optionList,
+	pageNoOption,
+} from '../../../../core/const';
+import { intervalTimeValidator } from '../../../../core/const/form-validators';
+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 { TemplateWAModel, WhatsAppAccountDto } from '../../../models';
+
+@Component({
+	selector: 'lib-failover-mechanism',
+	templateUrl: './failover-mechanism.component.html',
+	styleUrls: ['./failover-mechanism.component.scss'],
+})
+export class FailoverMechanismComponent implements OnInit, OnDestroy {
+	@Output()
+	public failover: EventEmitter<FormGroup>;
+
+	public form: FormGroup;
+	public channelOption: any;
+	public validationMessages: any;
+	public isHaveNextTemplateOption = { ...isHaveNextOption };
+	public isLoadingTemplateOption = { ...isLoadingOption };
+	public templateOption = { ...optionList };
+	public isLoadingAccountOption = { ...isLoadingOption };
+	public isHaveNextAccountOption = { ...isHaveNextOption };
+	public accountOption = { ...optionList };
+
+	private subscribers: Subscription[] = [];
+	private pageNoTemplateOption = { ...pageNoOption };
+	private pageNoAccountOption = { ...pageNoOption };
+
+	@Input() public isReadOnlyMode: boolean;
+
+	constructor(private apiAdapterService: ApiAdapterServiceService) {
+		this.failover = new EventEmitter();
+	}
+
+	ngOnInit(): void {
+		this.validationMessages = FailoverMechanismValidationConst;
+		this.channelOption = [
+			...PlatformOptionConst,
+			/* {
+        icon: '',
+        inputSvgIcon: 'icon-voice-gray',
+        image: 'line.png',
+        label: 'Voice',
+        value: 'VOICE',
+      }, */
+		].filter(
+			t =>
+				![
+					'LINE',
+					this.getCampaignStorage?.generalInformation?.form?.medium,
+				].includes(t.value)
+		);
+
+		this.initForm();
+		this.initDisable();
+		this.initEdit();
+		this.failover.emit(this.form);
+	}
+
+	get getCampaignStorage(): any {
+		return localStorage.getItem('telin.campaign')
+			? JSON.parse(localStorage.getItem('telin.campaign'))
+			: {};
+	}
+
+	get interval() {
+		return this.form.get('interval');
+	}
+
+	private initForm(): void {
+		this.form = new FormGroup({
+			active: new FormControl(false, Validators.required),
+			type: new FormControl(''),
+			interval: new FormControl(null),
+			accounts: new FormArray([]),
+		});
+
+		this.form.valueChanges.subscribe(() => {
+			if (this.interval.touched && this.interval.value === 0) {
+				this.form.get('interval').setErrors({ intervalTime: true });
+			}
+			this.failover.emit(this.form);
+		});
+	}
+
+	private initDisable(): void {
+		if (!this.isReadOnlyMode) {
+			return;
+		}
+
+		this.form.disable();
+	}
+
+	private initEdit(): void {
+		if (
+			Object.entries(this.getCampaignStorage).length === 0 ||
+			!this.getCampaignStorage?.failover
+		)
+			return;
+
+		this.form
+			.get('active')
+			.setValue(this.getCampaignStorage?.failover?.active);
+		this.form
+			.get('type')
+			.setValue(this.getCampaignStorage?.failover?.type ?? '');
+		this.form
+			.get('interval')
+			.setValue(this.getCampaignStorage?.failover?.interval ?? null);
+
+		this.activeChange(this.getCampaignStorage?.failover?.active);
+		this.validationAccount();
+	}
+
+	private initAccount(data: any = null, _channel: any = null): FormGroup {
+		const form = new FormGroup({
+			channel: new FormControl(_channel),
+			platform: new FormControl(_channel?.value),
+			accountId: new FormControl(
+				{
+					value:
+						data?.accountId && typeof data?.accountId === 'string'
+							? {
+									id: data?.accountId,
+									name: data?.accountName,
+							  }
+							: data?.accountId ?? '',
+					disabled: this.isReadOnlyMode,
+				},
+				Validators.required
+			),
+			accountName: new FormControl(data?.accountName ?? ''),
+			subject: new FormControl({
+				value: data?.subject ?? '',
+				disabled: this.isReadOnlyMode,
+			}),
+			template: new FormControl({
+				value: data?.template ?? '',
+				disabled: this.isReadOnlyMode,
+			}),
+			paramBody: new FormArray([]),
+		});
+
+		return form;
+	}
+
+	get getAccount(): FormGroup[] {
+		return (this.form.get('accounts') as FormArray).controls as FormGroup[];
+	}
+
+	public addAccount(data: any = null, channel: any = null): void {
+		const form = this.initAccount(data, channel);
+		(this.form.get('accounts') as FormArray).push(form);
+
+		this.getAccountOptionService(channel?.value, data?.accountName ?? '');
+		this.getTemplateOptionService(channel?.value, {}, data?.template?.name);
+	}
+
+	private initParameter(): FormGroup {
+		const form = new FormGroup({
+			name: new FormControl('', Validators.required),
+		});
+
+		return form;
+	}
+
+	public getParamBody(account: FormGroup): FormGroup[] {
+		return (account.get('paramBody') as FormArray).controls as FormGroup[];
+	}
+
+	public addParamBody(account: FormGroup): void {
+		const form = this.initParameter();
+		(account.get('paramBody') as FormArray).push(form);
+	}
+
+	public deleteParamBody(account: FormGroup, index: number): void {
+		(account.get('paramBody') as FormArray).removeAt(index);
+	}
+
+	private initParam(_name: string, _value: any, _type: string): Parameter {
+		return {
+			name: _name,
+			value: _value,
+			in: 'query',
+			type: _type,
+		};
+	}
+
+	private getAccountOptionService(
+		platform: string,
+		filter: string = '',
+		isInfinite: boolean = false
+	): void {
+		this.isLoadingAccountOption[platform] = true;
+
+		const parameterList: Array<Parameter> = [
+			this.initParam(
+				'pageNo',
+				this.pageNoAccountOption[platform],
+				'number'
+			),
+			this.initParam('rowPerPage', 20, 'number'),
+			this.initParam('status', 'APPROVED', 'string'),
+			this.initParam('platform', platform, 'string'),
+			this.initParam('filter', filter, 'string'),
+		];
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(parameterList, '/admin/account', 'GET')
+			.subscribe((resp: AppResponse<WhatsAppAccountDto[]>) => {
+				if (!resp.data) return;
+
+				this.accountOption[platform] = isInfinite
+					? [...this.accountOption[platform], ...resp.data]
+					: resp.data;
+
+				this.isHaveNextAccountOption[platform] = resp.haveNext;
+				this.isLoadingAccountOption[platform] = false;
+			});
+
+		this.subscribers.push(subs);
+	}
+
+	public getTemplateOptionService(
+		platform: string,
+		account: any,
+		filter: string = '',
+		isInfinite: boolean = false
+	): void {
+		this.isLoadingTemplateOption[platform] = true;
+
+		const parameterList: Array<Parameter> = [
+			this.initParam(
+				'pageNo',
+				this.pageNoTemplateOption[platform],
+				'number'
+			),
+			this.initParam('rowPerPage', 20, 'number'),
+			this.initParam('platform', platform, 'string'),
+			this.initParam('filter', filter, 'string'),
+			this.initParam('clientId', account?.clientId ?? '', 'string'),
+			this.initParam('wabaId', account?.wabaId ?? '', 'string'),
+		];
+
+		if (platform === 'WA')
+			parameterList.push(this.initParam('status', 'APPROVED', 'string'));
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(parameterList, '/message/template', 'GET')
+			.subscribe((resp: AppResponse<TemplateWAModel[]>) => {
+				this.templateOption[platform] = isInfinite
+					? [...this.templateOption[platform], ...resp.data]
+					: resp.data;
+
+				this.isHaveNextTemplateOption[platform] = resp.haveNext;
+				this.isLoadingTemplateOption[platform] = false;
+			});
+
+		this.subscribers.push(subs);
+	}
+
+	public getNextAccountBatch(platform: string) {
+		if (!this.isHaveNextAccountOption[platform]) return;
+
+		this.pageNoAccountOption[platform] += 1;
+		this.getAccountOptionService(platform, '', true);
+	}
+
+	public accountSelectedDisplay(
+		attribute1: WhatsAppAccountDto,
+		attribute2: WhatsAppAccountDto
+	): string {
+		return attribute1 && attribute2 && attribute1.id == attribute2.id
+			? `${attribute1.name} (${attribute1.accountNo})`
+			: '';
+	}
+
+	public templateSelectedDisplay(
+		attribute1: TemplateWAModel,
+		attribute2: TemplateWAModel
+	): string {
+		return attribute1 && attribute2 && attribute1.name == attribute2.name
+			? `${attribute1.name}`
+			: '';
+	}
+
+	public getNextTemplateBatch(platform: string, account: any) {
+		if (!this.isHaveNextTemplateOption[platform]) return;
+
+		this.pageNoTemplateOption[platform] += 1;
+		this.getTemplateOptionService(platform, account, '', true);
+	}
+
+	public updateSearch(
+		searchValue: string,
+		platform: string,
+		account: any
+	): void {
+		this.pageNoTemplateOption[platform] = 1;
+		this.getTemplateOptionService(platform, account, searchValue);
+	}
+
+	public updateSearchAccount(searchValue: string, platform: string): void {
+		this.pageNoAccountOption[platform] = 1;
+		this.getAccountOptionService(platform, searchValue);
+	}
+
+	public activeChange(_active: boolean): void {
+		this.form
+			.get('type')
+			.setValue(this.getCampaignStorage?.failover?.type ?? '');
+		this.form.get('type').setValidators(Validators.required);
+		this.form.get('type').updateValueAndValidity();
+
+		if (_active) {
+			const accounts =
+				this.getCampaignStorage?.failover?.accounts?.filter(
+					(t: any) =>
+						t.platform !==
+						this.getCampaignStorage?.generalInformation?.form
+							?.medium
+				);
+
+			if (accounts) {
+				accounts.map(account =>
+					this.addAccount(
+						account,
+						this.channelOption.find(
+							(t: any) => t.value === account.platform
+						)
+					)
+				);
+
+				this.channelOption
+					.filter((t: any) => {
+						return !accounts.find((account: any) => {
+							return account.platform === t.value;
+						});
+					})
+					.map(channel => this.addAccount({}, channel));
+				return;
+			}
+
+			this.channelOption.map(channel => this.addAccount({}, channel));
+			return;
+		}
+
+		this.form.get('type').clearValidators();
+		this.form.get('type').updateValueAndValidity();
+		(this.form.get('accounts') as FormArray).controls = [];
+		(this.form.get('accounts') as FormArray).reset();
+		this.form.get('accounts').updateValueAndValidity();
+
+		this.typeChange('Status');
+	}
+
+	public typeChange(_type: string): void {
+		if (_type === 'Time') {
+			this.form
+				.get('interval')
+				.setValue(this.getCampaignStorage?.failover?.interval ?? null);
+			this.form
+				.get('interval')
+				.setValidators([Validators.required, intervalTimeValidator()]);
+			this.form.get('interval').updateValueAndValidity();
+			return;
+		}
+
+		this.form.get('interval').clearValidators();
+		this.form.get('interval').updateValueAndValidity();
+	}
+
+	public validationAccount(
+		account: WhatsAppAccountDto = null,
+		accountControl: FormGroup = null
+	): void {
+		accountControl
+			?.get('accountName')
+			.setValue(
+				this.accountOption[accountControl.get('platform').value].find(
+					t => t.id === account?.id
+				)?.name ?? ''
+			);
+
+		const isChooseAccount = this.getAccount.filter(
+			control => control.get('accountId').value
+		);
+
+		this.getAccount.forEach(control => {
+			control.get('accountId').setValidators(Validators.required);
+			control.get('subject').setValidators(Validators.required);
+			control.get('template').setValidators(Validators.required);
+
+			if (
+				!control.get('accountId').value &&
+				isChooseAccount?.length > 0
+			) {
+				control.get('accountId').clearValidators();
+				control.get('subject').setValue('');
+				control.get('subject').clearValidators();
+				control.get('template').setValue('');
+				control.get('template').clearValidators();
+			} else if (
+				['WA', 'SMS', 'VOICE'].includes(control.get('platform').value)
+			) {
+				control.get('subject').clearValidators();
+			}
+
+			control.get('accountId').updateValueAndValidity();
+			control.get('subject').updateValueAndValidity();
+			control.get('template').updateValueAndValidity();
+		});
+
+		if (accountControl)
+			this.getTemplateOptionService(
+				accountControl.get('platform').value,
+				accountControl.get('accountId').value
+			);
+	}
+
+	public drop(event: CdkDragDrop<any[]>) {
+		moveItemInArray(
+			this.getAccount,
+			event.previousIndex,
+			event.currentIndex
+		);
+
+		this.failover.emit(this.form);
+	}
+
+	ngOnDestroy(): void {
+		this.subscribers.forEach(each => each.unsubscribe());
+	}
+}