@adlfe/campaign-management-library 2.10.0 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/core/services/api-adapter-service.service.ts

@@ -0,0 +1,131 @@
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/internal/operators/catchError';
+import { environment } from '../../../environments/environment';
+import { Parameter, ServerInBuiltError } from '../models/util/api-adapter-service-models';
+import { AppRequest } from '../models/util/api-dto/request-models/app-request';
+import { AppResponse } from '../models/util/api-dto/response-models/app-response';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ApiAdapterServiceService {
+    private queryCount = 0;
+
+    constructor(private httpClient: HttpClient) {}
+
+    public executeApiRequest<T>(
+        parameterList: Array<Parameter>,
+        path: string,
+        httpVerb: string,
+        isFile: boolean = false
+    ): Observable<any> {
+        let url = path;
+        let bodyData: {};
+        let parameter: Parameter;
+        let formData = new FormData();
+
+        parameterList
+            ?.filter((rt) => rt.in !== 'header')
+            .forEach((requestType) => {
+                parameter = parameterList.find(
+                    (parameter) => parameter.name === requestType.name
+                ) as Parameter;
+
+                if (!parameter && requestType.required && requestType.in !== 'header') {
+                    window.alert(
+                        `Parameter "${requestType.name}" is required!, Try again with "${requestType.name}"`
+                    );
+                } else if (!parameter && !requestType.required) {
+                    // continue;
+                } else {
+                    switch (requestType.in) {
+                        case 'body': {
+                            bodyData = parameter.value;
+                            break;
+                        }
+                        case 'path': {
+                            url = url.replace(`{${parameter.name}}`, parameter.value);
+                            break;
+                        }
+                        case 'query': {
+                            url = this.setQuery(parameter.name, parameter.value, url);
+                            break;
+                        }
+                        case 'formData': {
+                            formData = this.setFormData(parameter, formData);
+                            break;
+                        }
+                        default: {
+                            break;
+                        }
+                    }
+                }
+
+                parameter = undefined;
+            });
+
+        this.queryCount = 0;
+
+        url = `${environment.api}${url}`;
+        const appRequest: AppRequest<any> = {
+            ...(parameterList?.[0]?.withoutKeyData ? bodyData : { data: bodyData }),
+        };
+
+        const headers = new HttpHeaders()
+            .set('Authorization', 'Bearer ' + localStorage.getItem('telin.accessToken'))
+            .set('Access-Control-Allow-Origin', '*');
+
+        return this.httpClient
+            .request<AppResponse<T>>(httpVerb, url, {
+                body: !bodyData ? formData : appRequest,
+                responseType: isFile ? ('blob' as 'json') : ('json' as 'json'),
+                headers,
+            })
+            .pipe(
+                catchError((err: HttpErrorResponse) => {
+                    if (err.error instanceof ErrorEvent) {
+                        return of<AppResponse<any>>({
+                            error: {
+                                title: 'Network error!',
+                                detail: err.message,
+                                source: err.statusText,
+                                status: err.status.toString(),
+                            },
+                            meta: {
+                                code: err.status,
+                                message: err.message,
+                            },
+                        });
+                    }
+
+                    return of<ServerInBuiltError>(err.error);
+                })
+            );
+    }
+
+    public uploadFileToS3(s3Url: string, file: File): Observable<any> {
+        // Kita kirim raw binary/file dengan header Content-Type yang sesuai
+        return this.httpClient.put(s3Url, file, {
+            headers: { 'Content-Type': file.type },
+        });
+    }
+
+    private setQuery(name: string, value: any, url: string): string {
+        url = this.queryCount === 0 ? `${url}?${name}=${value}` : `${url}&${name}=${value}`;
+        this.queryCount++;
+        return url;
+    }
+
+    private setFormData(parameter: Parameter, formData: FormData): FormData {
+        if (parameter.type === 'array') {
+            for (let i = 0; parameter.value.length > i; i++) {
+                formData.append(parameter.name, parameter.value[i], parameter.value[i].name);
+            }
+        } else {
+            formData.append(parameter.name, parameter.value ? parameter.value : null);
+        }
+        return formData;
+    }
+}

package/projects/adl-campaign-management-library-internal/src/lib/core/util/custom-paginator.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+
+@Injectable()
+export class CustomPaginator extends MatPaginatorIntl {
+	itemsPerPageLabel = 'Listing per Page';
+
+	getRangeLabel = function (page, pageSize, length) {
+		if (length === 0 || pageSize === 0) {
+			return 'Show 0';
+		}
+
+		length = Math.max(length, 0);
+
+		const startIndex = page * pageSize;
+		const endIndex =
+			startIndex < length
+				? Math.min(startIndex + pageSize, length)
+				: startIndex + pageSize;
+		const sumStartIndex = startIndex + 1;
+
+		return 'Show ' + sumStartIndex + ' - ' + endIndex;
+	};
+}

package/projects/adl-campaign-management-library-internal/src/lib/core/util/download-blob-file.ts

@@ -0,0 +1,20 @@
+export const downloadBlobFile = (blob: any, name: string = 'file.csv'): any => {
+	const blobUrl = URL.createObjectURL(blob);
+
+	const link = document.createElement('a');
+
+	link.href = blobUrl;
+	link.download = name;
+
+	document.body.appendChild(link);
+
+	link.dispatchEvent(
+		new MouseEvent('click', {
+			bubbles: true,
+			cancelable: true,
+			view: window,
+		})
+	);
+
+	document.body.removeChild(link);
+};

package/projects/adl-campaign-management-library-internal/src/lib/core/util/enum-to-option-generator.ts

@@ -0,0 +1,28 @@
+import { BaseOptionModel } from '../models';
+
+export const generateEnumOption = (enumObject: Object): BaseOptionModel[] => {
+	if (!enumObject) {
+		return [];
+	}
+
+	return Object.keys(enumObject).reduce((result, each) => {
+		if (isNaN(Number(each))) {
+			const inputOption = new BaseOptionModel();
+			const label = each
+				.replace(/([A-Z])/g, ' $1')
+				.replace(/([0-9])/g, ' $1');
+
+			inputOption.label = label;
+
+			if (isNaN(Number(enumObject[each]))) {
+				inputOption.value = enumObject[each];
+			} else {
+				inputOption.value = Number(enumObject[each]);
+			}
+
+			result.push(inputOption);
+		}
+
+		return result;
+	}, []);
+};

package/projects/adl-campaign-management-library-internal/src/lib/core/util/http-param-generator.ts

@@ -0,0 +1,19 @@
+import { HttpParams } from '@angular/common/http';
+
+export const generateHttpParams =
+	(params: Object): HttpParams => {
+		let httpParams = new HttpParams();
+
+		if (params) {
+			Object.keys(params).forEach((key) => {
+				if (params[key] !== null
+					&& params[key] !== undefined
+					&& params[key] !== '') {
+
+					httpParams = httpParams.set(key, params[key]);
+				}
+			});
+		}
+
+		return httpParams;
+	};

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/confirmation/confirmation.component.html

@@ -0,0 +1,37 @@
+<h2 mat-dialog-title
+	class="font-sbold text-center">
+	{{ data?.title }}
+</h2>
+
+<mat-dialog-content class="confirmation-content">
+	<div [innerHTML]="data?.content"
+		class="text-center"></div>
+</mat-dialog-content>
+
+<mat-dialog-actions class="confirmation-actions mt-4">
+	<button *ngIf="data?.btnCancel"
+		mat-stroked-button
+		color="secondary-telin"
+		class="w-48"
+		mat-dialog-close>
+		{{ data?.btnCancel }}
+	</button>
+
+	<button *ngIf="data?.btnSubmit"
+		mat-flat-button
+		color="primary-telin-blue2"
+		class="w-48"
+		[mat-dialog-close]="true"
+		(click)="deleteRowOn()">
+		{{ data?.btnSubmit }}
+	</button>
+
+	<button mat-flat-button
+		*ngIf="data?.btnSubmitRed"
+		class="font-bold telin-bg-color w-48 text-white"
+		color="primary-telin"
+		[mat-dialog-close]="true"
+		(click)="deleteRowOn()">
+		{{ data?.btnSubmitRed }}
+	</button>
+</mat-dialog-actions>

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/confirmation/confirmation.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .mat-dialog-container {
+	.mat-dialog-actions {
+		&.confirmation-actions {
+			margin-bottom: -10px;
+		}
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/confirmation/confirmation.component.ts

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { SharedServicesService } from '../../../global/confirmation/shared/shared-services.service';
+import { ConfirmationModel } from '../shared/model';
+
+@Component({
+	selector: 'app-confirmation',
+	templateUrl: './confirmation.component.html',
+	styleUrls: ['./confirmation.component.scss'],
+})
+export class ConfirmationComponent {
+	constructor(
+		@Inject(MAT_DIALOG_DATA)
+		public data: ConfirmationModel,
+		private sharedService: SharedServicesService
+	) {}
+
+	deleteRowOn() {
+		this.sharedService.sendClickEvent();
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/confirmation/index.ts

@@ -0,0 +1 @@
+export * from './confirmation.component';

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/confirmation.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ConfirmationComponent } from './confirmation';
+
+@NgModule({
+	declarations: [ConfirmationComponent],
+	imports: [CommonModule, MatDialogModule, MatButtonModule],
+	exports: [ConfirmationComponent]
+})
+export class ConfirmationModule {}

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/shared/model/confirmation.model.ts

@@ -0,0 +1,7 @@
+export class ConfirmationModel {
+  public title: string;
+  public content: string;
+  public btnSubmit: string;
+  public btnSubmitRed: string;
+  public btnCancel: string;
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/shared/model/index.ts

@@ -0,0 +1 @@
+export * from './confirmation.model';

package/projects/adl-campaign-management-library-internal/src/lib/global/confirmation/shared/shared-services.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SharedServicesService {
+
+  private subject = new Subject<any>();
+
+  sendClickEvent(){
+    this.subject.next();
+  }
+
+  getEvent(): Observable<any>{
+    return this.subject.asObservable();
+  }
+
+  constructor() { }
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/search/search/search.component.html

@@ -0,0 +1,25 @@
+<div class="search">
+	<mat-form-field appearance="outline"
+		floatLabel="never"
+		class="search">
+		<mat-icon matPrefix
+			class="mr-2">
+			search
+		</mat-icon>
+
+		<input matInput
+			autocomplete="off"
+			[formControl]="form"
+			[placeholder]="placeholder"
+			(keyup)="searchResult($event)">
+
+		<button *ngIf="form.value"
+			mat-button
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="clearInput()">
+			<mat-icon>close</mat-icon>
+		</button>
+	</mat-form-field>
+</div>

package/projects/adl-campaign-management-library-internal/src/lib/global/search/search/search.component.scss

@@ -0,0 +1,7 @@
+::ng-deep mat-form-field {
+	&.search {
+		.mat-form-field-infix {
+			padding: 0.64em 0 0.64em 0;
+		}
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/search/search/search.component.spec.ts

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

package/projects/adl-campaign-management-library-internal/src/lib/global/search/search/search.component.ts

@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+	selector: 'lib-search',
+	templateUrl: './search.component.html',
+	styleUrls: ['./search.component.scss'],
+})
+export class SearchComponent implements OnInit {
+	@Output()
+	public searchRes: EventEmitter<string>;
+
+	public form: FormControl;
+
+	private debounceSubject = new Subject();
+
+	@Input()
+	public placeholder: string;
+
+	@Input()
+	public currentValue: string;
+
+	constructor() {
+		this.searchRes = new EventEmitter();
+	}
+
+	ngOnInit(): void {
+		this.form = new FormControl(this.currentValue ?? '');
+
+		this.debounceSubject.pipe(debounceTime(500)).subscribe((value: any) => {
+			this.searchRes.emit(value.toLowerCase());
+		});
+	}
+
+	public searchResult(event: any) {
+		this.debounceSubject.next(event.target.value);
+	}
+
+	public clearInput(): void {
+		this.form.setValue('');
+		this.searchRes.emit(this.form.value);
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/global/search/search.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchComponent } from './search/search.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+
+@NgModule({
+  declarations: [SearchComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+		ReactiveFormsModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatButtonModule,
+		MatIconModule,
+  ],
+  exports: [
+    SearchComponent
+  ]
+})
+export class SearchModule { }

package/projects/adl-campaign-management-library-internal/src/polyfills.ts

@@ -0,0 +1,89 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'core-js/es/array';
+// import 'core-js/es/object';
+// import 'core-js/es/reflect';
+// import 'core-js/es/string';
+// import 'core-js/es/map';
+// import 'core-js/es/set';
+
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+
+import 'classlist.js'; // Run `npm install --save classlist.js`.
+import 'core-js/es6/array';
+import 'core-js/es6/date';
+import 'core-js/es6/function';
+import 'core-js/es6/map';
+import 'core-js/es6/math';
+import 'core-js/es6/number';
+import 'core-js/es6/object';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/regexp';
+import 'core-js/es6/set';
+import 'core-js/es6/string';
+import 'core-js/es6/symbol';
+import 'core-js/es6/weak-map';
+import 'core-js/es7/array'; // for .includes()
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/projects/adl-campaign-management-library-internal/src/public-api.ts

@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of adl-campaign-management-library-internal
+ */
+export * from './lib/adl-campaign-management-library-internal.component';
+export * from './lib/adl-campaign-management-library-internal.module';
+export * from './lib/campaign-management/campaign-management.component';
+export * from './lib/campaign-management/campaign-management.module';
+export * from './lib/campaign-management/modules/campaign-index/campaign-index.module';
+export * from './lib/campaign-management/modules/dashboard/dashboard.module';
+export * from './lib/global/confirmation/confirmation';
+export * from './lib/global/confirmation/confirmation.module';
+export * from './lib/global/confirmation/confirmation/confirmation.component';
+export * from './lib/global/search/search.module';
+