aril 1.1.71 → 1.1.73

package/ui/table/src/export-overlay-panel.component.ts

@@ -0,0 +1,330 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, ViewChild, effect, input, signal } from '@angular/core';
+import { FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { MessageService } from 'primeng/api';
+import { OrderListModule } from 'primeng/orderlist';
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+import { ToastModule } from 'primeng/toast';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { saveAs } from 'file-saver';
+import {
+	catchError,
+	concatMap,
+	filter,
+	finalize,
+	firstValueFrom,
+	from,
+	interval,
+	map,
+	switchMap,
+	take,
+	throwError,
+	toArray
+} from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { SelectionGroupService } from 'aril/theme/layout';
+import { ButtonComponent } from 'aril/ui/button';
+import { CheckboxComponent } from 'aril/ui/checkbox';
+import { FieldComponent } from 'aril/ui/field';
+import { ARiLFormModule } from 'aril/ui/form';
+import { RadioButtonComponent } from 'aril/ui/radioButton';
+import { TextComponent } from 'aril/ui/text';
+
+import {
+	ColForm,
+	ColumnFieldValueMap,
+	ExportForm,
+	ExportOptions,
+	ExportRequest,
+	ExportType,
+	TableColumns
+} from './interfaces';
+
+@Component({
+	standalone: true,
+	selector: 'aril-export-overlay-panel',
+	imports: [
+		ARiLFormModule,
+		ButtonComponent,
+		CheckboxComponent,
+		FieldComponent,
+		FormsModule,
+		OrderListModule,
+		OverlayPanelModule,
+		RadioButtonComponent,
+		ReactiveFormsModule,
+		TextComponent,
+		ToastModule,
+		TooltipModule
+	],
+	template: `
+		<p-overlayPanel styleClass="export-overlay-panel" [baseZIndex]="1101">
+			@if (exportForm) {
+				<aril-form [formGroup]="exportForm" class="w-20rem">
+					<aril-field [label]="'Dosya Tipi'" [cols]="{ default: 12 }">
+						<aril-radio-button formControlName="exportType" [options]="exportTypeOptions" />
+					</aril-field>
+
+					<aril-field [label]="'Dosya İsmi'" [cols]="{ default: 12 }">
+						<aril-text class="w-full" formControlName="exportLabel" />
+					</aril-field>
+
+					@if (exportForm.controls.columns.length) {
+						<ng-container formArrayName="columns">
+							<p-orderList
+								#orderListRef
+								class="col-12"
+								[value]="exportForm.controls.columns.controls"
+								[listStyle]="{ 'max-height': '20rem' }"
+								filterBy="value.title"
+								[disabled]="isLoadingForExport()">
+								<ng-template pTemplate="filter">
+									<div class="flex align-items-center gap-3">
+										<aril-checkbox
+											[label]="''"
+											[ngModel]="isAllSelected"
+											[ngModelOptions]="{ standalone: true }"
+											(ngModelChange)="onSelectAll($event)"
+											[disabled]="isLoadingForExport()" />
+
+										<div class="p-orderlist-filter" [attr.data-pc-section]="'filter'">
+											<input
+												#filter
+												type="text"
+												role="textbox"
+												(keyup)="orderListRef.onFilterKeyup($event)"
+												[disabled]="orderListRef.disabled"
+												class="p-orderlist-filter-input p-inputtext p-component" />
+										</div>
+									</div>
+								</ng-template>
+								<ng-template let-col pTemplate="item">
+									<aril-checkbox [label]="col.value.title" [formControl]="col.controls.checked" />
+								</ng-template>
+							</p-orderList>
+						</ng-container>
+					}
+
+					<aril-button
+						class="col-12"
+						[label]="translocoService.translate('navigateToExportRequests')"
+						color="secondary"
+						(clickEvent)="nativateToExportRequests()" />
+
+					<aril-button
+						class="col-12"
+						[label]="translocoService.translate('messages.export')"
+						color="primary"
+						(clickEvent)="export()"
+						[disabled]="isLoadingForExport()" />
+				</aril-form>
+			}
+		</p-overlayPanel>
+	`
+})
+export class ExportOverlayPanelComponent {
+	@ViewChild(OverlayPanel) op!: OverlayPanel;
+
+	/**
+	 * @see {@link ExportOptions}
+	 */
+	exportConfig = input.required<ExportOptions>();
+	columns = input<TableColumns>();
+
+	exportForm!: FormGroup<ExportForm>;
+	exportTypeOptions = [
+		{ key: ExportType.Excel, label: 'Excel', fileExtension: '.xlsx' },
+		{ key: ExportType.Csv, label: 'Csv', fileExtension: '.csv' }
+	];
+	isLoadingForExport = signal<boolean>(false);
+	isAllSelected = true;
+
+	constructor(
+		private http: HttpClient,
+		private fb: NonNullableFormBuilder,
+		private messageService: MessageService,
+		public translocoService: TranslocoService,
+		private selectionGroupService: SelectionGroupService
+	) {
+		effect(() => {
+			if (this.exportConfig()) {
+				this.createExportForm();
+			}
+		});
+	}
+
+	private createExportForm(): void {
+		const { exportLabel } = this.exportConfig()!;
+
+		this.exportForm = this.fb.group<ExportForm>({
+			exportType: this.fb.control(ExportType.Excel, Validators.required),
+			exportLabel: this.fb.control(exportLabel, Validators.required),
+			columns: this.fb.array<FormGroup<ColForm>>([])
+		});
+
+		this.columns()
+			?._results.filter((col) => col.type() !== 'operations')
+			.filter((col) => {
+				const exportConfig = this.exportConfig();
+				const excludedFields = exportConfig?.excludedFields ?? [];
+
+				return !excludedFields.includes(col.field());
+			})
+			.forEach((col) => {
+				const colGroup = this.fb.group<ColForm>({
+					checked: this.fb.control(true),
+					title: this.fb.control(col.header()),
+					dataKey: this.fb.control(col.field())
+				});
+
+				this.exportForm.controls.columns.push(colGroup);
+			});
+
+		this.exportForm.controls.columns.valueChanges.subscribe((t) => (this.isAllSelected = t.every((a) => a.checked)));
+	}
+
+	get hostUrl(): string {
+		return `${globalThis.location.protocol}//${globalThis.location.host}`;
+	}
+
+	get currentPageReportText(): string {
+		const total = this.translocoService.translate('table.total');
+		const record = this.translocoService.translate('table.records');
+		const page = this.translocoService.translate('table.page');
+		return `${total} : {totalRecords} ${record} | ${page} : {currentPage} / {totalPages}`;
+	}
+
+	async export() {
+		const { exportType, exportLabel, columns } = this.exportForm.value;
+		const {
+			route,
+			params,
+			pageSize,
+			columnFieldValueMap,
+			dateColumnFormatMap,
+			computedColumnMap,
+			customReqUrl,
+			numberColumnScaleMap,
+			treeChildName,
+			headerNames,
+			outputFields
+		} = this.exportConfig()!;
+
+		const checkedColumns = columns!.filter((t) => t.checked);
+		const fileExtension = this.exportTypeOptions.find((t) => t.key === exportType)?.fileExtension;
+
+		let columnFieldValueMapObj: ColumnFieldValueMap | undefined;
+
+		this.isLoadingForExport.set(true);
+		this.exportForm.disable();
+
+		this.messageService.add({
+			severity: 'success',
+			key: 'export-toast',
+			summary: this.translocoService.translate('messages.exporting'),
+			detail: this.translocoService.translate('messages.exportingDetail', {
+				url: `${this.hostUrl}/#/mng/control-management/export-requests`
+			}),
+			life: 10 * 1000
+		});
+		this.op?.hide();
+
+		if (columnFieldValueMap) {
+			const tempObj = {} as ColumnFieldValueMap;
+
+			await firstValueFrom(
+				from(Object.entries(columnFieldValueMap)).pipe(
+					concatMap(([fieldName, value]) => {
+						if (
+							!this.selectionGroupService.selectionGroups()[`${value.groupName}~${value.parentSelectionKey ?? 'ALL'}`]
+						) {
+							this.selectionGroupService.fetchEnum(value.groupName, value.parentSelectionKey);
+						}
+
+						const key = value.groupName + '~' + (value.parentSelectionKey ?? 'ALL');
+
+						return interval(10).pipe(
+							filter(() => !this.selectionGroupService.isLoading(key)),
+							take(1),
+							map(() => {
+								const selectionGroup = this.selectionGroupService.selectionGroups()[key];
+								if (selectionGroup) {
+									tempObj[fieldName] = selectionGroup.selectionItems.reduce((acc: Record<string, string>, item) => {
+										acc[item.selectionKey] = item.selectionDisplay;
+										return acc;
+										// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									}, {}) as any;
+								}
+							})
+						);
+					}),
+					toArray(),
+					finalize(() => {
+						columnFieldValueMapObj = tempObj;
+					})
+				)
+			);
+		}
+
+		const request: ExportRequest = {
+			route: route!,
+			params: params!,
+			pageSize: pageSize!,
+			exportType: exportType!,
+			exportLabel: exportLabel!,
+			computedColumnMap: computedColumnMap!,
+			dateColumnFormatMap: dateColumnFormatMap!,
+			columnFieldValueMap: columnFieldValueMapObj!,
+			numberColumnScaleMap: numberColumnScaleMap ?? {},
+			headerNames: headerNames ?? checkedColumns.map((col) => col.title!),
+			outputFields: outputFields ?? checkedColumns.map((col) => col.dataKey!),
+			treeChildName: treeChildName!
+		};
+
+		const apiUrl = customReqUrl ? API_CONFIGS.api.replace(/\/[^\/]+\/v1$/, `/${customReqUrl}/v1`) : API_CONFIGS.api;
+		const response = await firstValueFrom(
+			this.http.post<{ success: boolean; url: string }>(`${apiUrl}/batch-exporters/export`, request).pipe(
+				switchMap((res) =>
+					this.http.get(`${apiUrl}/bucket-objects/download`, {
+						params: { url: res.url },
+						responseType: 'blob'
+					})
+				),
+				catchError((error) => {
+					this.isLoadingForExport.set(false);
+					this.exportForm.enable();
+					if (error?.status === 400 || error?.status === 500) {
+						this.messageService.add({
+							severity: 'error',
+							summary: this.translocoService.translate('messages.exportUrlNotFound'),
+							key: 'toast-root'
+						});
+					}
+					return throwError(() => error);
+				})
+			)
+		);
+
+		saveAs(response, `${exportLabel}-${new Date().getTime()}${fileExtension}`);
+		this.isLoadingForExport.set(false);
+		this.exportForm.enable();
+		this.exportForm.reset();
+	}
+
+	onSelectAll(value: boolean): void {
+		for (let i = 0; i < this.exportForm.controls.columns.length; i++) {
+			const formGroup = this.exportForm.controls.columns.at(i);
+			formGroup.controls.checked.setValue(value);
+		}
+	}
+
+	nativateToExportRequests() {
+		window.location.href = `${this.hostUrl}/#/mng/control-management/export-requests`;
+	}
+
+	toggleExport = (event: Event): void => this.op.toggle(event);
+}

package/ui/table/src/interfaces.ts

@@ -0,0 +1,162 @@
+import { InputSignal, TemplateRef } from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+
+import { Apps } from 'aril/boot/config/apps';
+
+/**
+ * `exportLabel` dosya ismi
+ *
+ * `route` service path
+ *
+ * `params` service payload
+ *
+ * `dateColumnFormatMap` column value Date ise format verilmeli {@link DateFormat}
+ *
+ * `computedColumnMap` jsonPath ({@link https://github.com/json-path/JsonPath}) formatında yeni field tanımlamak için kullanılır.
+ *
+ * `excludedFields` export edilmemesi istenen field'lar
+ *
+ * @see {@link https://aril.atlassian.net/wiki/spaces/NTD/pages/842203139/Batch+Excel+CSV+Export+From+Controllers}
+ *
+ * @usageNotes
+ * ### Kullanım Örneği
+ *
+ * ```
+ * <i role="button" class="pi pi-file-export" (click)="tableRef.toggleExport($event)"></i>
+ *
+ * <aril-table
+ *      #tableRef
+ *      [exportConfig]="{
+ *			exportLabel: 'Tüketim Listesi',
+ *			route: 'consumptions/search',
+ *			params: [form.value],
+ *			excludedFields: ['id']
+ *			dateColumnFormatMap: { startDate: DateFormat.Year, endDate: DateFormat.Hour },
+ *			columnFieldValueMap: { status: { groupName: 'InvoiceStatus' } }
+ *      }">
+ * ```
+ */
+export interface ExportOptions extends Omit<ExportRequest, 'exportType'> {
+	excludedFields?: string[];
+}
+
+export enum DateFormat {
+	Hour = 'HH:mm',
+	Time = 'dd/MMMM/yyyy HH:mm',
+	Second = 'dd/MMMM/yyyy HH:mm:ss',
+	Minute = 'dd/MMMM/yyyy HH:mm',
+	Day = 'dd/MMMM/yyyy',
+	OnlyDay = 'dd',
+	Month = 'MMMM/yyyy',
+	MonthInt = 'MM/yyyy',
+	OnlyMonth = 'MMMM',
+	Year = 'yyyy'
+}
+
+export enum ExportType {
+	Csv = 'CSV',
+	Excel = 'EXCEL'
+}
+
+export interface ExportRequest {
+	customReqUrl?: Apps; //is added externally
+	exportType: ExportType;
+	exportLabel: string;
+	route: string;
+	treeChildName?: string;
+	pageSize?: number;
+	params: Array<any>;
+	headerNames: string[];
+	outputFields: string[];
+	columnFieldValueMap?: ColumnFieldValueMap;
+	dateColumnFormatMap?: DateColumnFormatMap;
+	computedColumnMap?: ComputedColumnMap;
+	numberColumnScaleMap?: NumberColumnScaleValue;
+}
+
+export interface ExportForm {
+	exportType: FormControl<ExportType>;
+	exportLabel: FormControl<string>;
+	columns: FormArray<FormGroup<ColForm>>;
+}
+
+export interface ColForm {
+	checked: FormControl<boolean>;
+	title: FormControl<string>;
+	dataKey: FormControl<string>;
+}
+
+export interface ColumnFieldValueMap {
+	[key: string]: ColumnFieldValueMapValue;
+}
+
+interface ColumnFieldValueMapValue {
+	groupName: string;
+	parentSelectionKey?: string;
+}
+
+interface ComputedColumnMap {
+	[key: string]: string;
+}
+
+interface DateColumnFormatMap {
+	[key: string]: DateFormat;
+}
+
+export interface NumberColumnScaleValue {
+	[key: string]: NumberColumnScaleMapValue;
+}
+export interface NumberColumnScaleMapValue {
+	roundingMode: 'UP' | 'DOWN' | 'CEILING' | 'FLOOR' | 'HALF_UP' | 'HALF_DOWN' | 'HALF_EVEN'; // roundingMode değerleri
+	scale: number;
+}
+
+export interface ArilfieldFilter {
+	fieldId: number | string;
+	operand: FilterOperand;
+	value: any;
+}
+
+export enum FilterOperand {
+	EQ = 'EQ',
+	NOT_EQ = 'NOT_EQ',
+	IS_NULL = 'IS_NULL',
+	IS_NOT_NULL = 'IS_NOT_NULL',
+	IN = 'IN',
+	NOT_IN = 'NOT_IN',
+	LT = 'LT',
+	GT = 'GT',
+	LTE = 'LTE',
+	GTE = 'GTE',
+	STARTS = 'STARTS',
+	ENDS = 'ENDS',
+	LIKE = 'LIKE',
+	NOT_LIKE = 'NOT_LIKE'
+}
+
+export enum ColumnFilterTypeEnum {
+	TEXT = 'text',
+	NUMERIC = 'numeric',
+	DATE = 'date',
+	BOOLEAN = 'boolean',
+	ENUM = 'enum'
+}
+
+export interface TableColumns {
+	[x: string]: any;
+	_results: Array<TableColumn>;
+}
+
+export interface TableColumn {
+	field: InputSignal<string>;
+	header: InputSignal<string>;
+	type: InputSignal<ValueTypes>;
+	isOperation?: boolean;
+	isShowHeaderTooltip?: boolean;
+	tooltipTemplate?: TemplateRef<any>;
+	template: TemplateRef<any>;
+	width?: string;
+}
+
+export type ValueTypes = 'text' | 'numeric' | 'date' | 'boolean' | 'custom' | 'operations' | 'json' | 'long-text';
+export type AlignTypes = 'left' | 'right' | 'center';

package/ui/table/src/table-column.component.ts

@@ -0,0 +1,22 @@
+import { Component, ContentChild, TemplateRef, input } from '@angular/core';
+
+import { AlignTypes, ColumnFilterTypeEnum, ValueTypes } from './interfaces';
+
+@Component({
+	selector: 'aril-table-column',
+	template: `<ng-content />`
+})
+export class TableColumnComponent {
+	type = input<ValueTypes>('text');
+	field = input.required<string | number>();
+	header = input.required<string>();
+	tAlign = input<AlignTypes>();
+	isShowHeaderTooltip = input<boolean>(false);
+	tooltipTemplate = input<TemplateRef<any>>();
+	width = input<string>();
+	showFilter = input<boolean>(false);
+	filterType = input<ColumnFilterTypeEnum>(ColumnFilterTypeEnum.TEXT);
+	showTimeInDateFilters = input<boolean>(false);
+	enumGroupName = input<string>('');
+	@ContentChild(TemplateRef) template: any;
+}