aril 1.1.72 → 1.1.73

package/ui/value/src/value.component.ts

@@ -0,0 +1,268 @@
+import { CurrencyPipe, DecimalPipe, SlicePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
+
+import { MessageService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+
+import { SelectionGroupService } from 'aril/theme/layout';
+import { BadgeComponent } from 'aril/ui/badge';
+import { EnumColorPickerPipe } from 'aril/ui/lib';
+import { DecimalRoundingType } from 'aril/util/lib';
+import { RoundNumberPipe } from 'aril/util/pipes';
+import 'aril/util/primitive-extensions';
+
+type ValueTypes =
+	| 'text'
+	| 'number'
+	| 'bool'
+	| 'decimal'
+	| 'big_decimal'
+	| 'date'
+	| 'password'
+	| 'enum'
+	| 'array'
+	| 'isoDate'
+	| 'currency';
+
+@Component({
+	standalone: true,
+	selector: 'aril-value',
+	templateUrl: './value.component.html',
+	styleUrl: './value.component.scss',
+	imports: [
+		BadgeComponent,
+		TooltipModule,
+		TranslocoModule,
+		OverlayPanelModule,
+		EnumColorPickerPipe,
+		SlicePipe,
+		DecimalPipe,
+		CurrencyPipe,
+		RoundNumberPipe
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [DialogService, DecimalPipe]
+})
+export class ValueComponent {
+	model = input.required<string | number | boolean | any>();
+	type = input<ValueTypes>('text');
+	format = input<string>();
+	isClickable = input<boolean>(false);
+	groupName = input<string>();
+	parentSelectionKey = input<string>('ALL');
+	isTextClamp = input<boolean>(true);
+	textClampCharacters = input<number>(50);
+	style = input<string>();
+	copyable = input<boolean>(false);
+	shouldShowCopyForClampedText = input<boolean>(false);
+	showCopyIcon = computed(
+		() =>
+			(!this.shouldShowCopyForClampedText() && this.copyable()) ||
+			(this.shouldShowCopyForClampedText() && this.model().length > this.textClampCharacters())
+	);
+
+	// only for array type
+	arrayTypeDisplayName = input<string>('valueDesc');
+	arrayTypeMaxBadgeCount = input<number>(3);
+
+	// only for big_decimal type
+	bigDecimalRoundingMode = input<DecimalRoundingType>();
+	bigDecimalScale = input<number>();
+
+	constructor(
+		public translocoService: TranslocoService,
+		private readonly selectionGroupService: SelectionGroupService,
+		private readonly messageService: MessageService
+	) {
+		this.translocoService.langChanges$.subscribe((lang) => {
+			this.langSignal.set(lang);
+		});
+	}
+
+	langSignal = signal(this.translocoService.getActiveLang());
+
+	getNumberFormat(): string {
+		if (this.type() === 'number') return '1.0-0';
+		else if (this.type() === 'decimal') {
+			const format = this.format();
+
+			if (!format) return '1.0-3';
+
+			// Eğer format Angular DecimalPipe formatındaysa direkt kullan
+			if (format && typeof format === 'string' && format.match(/^\d+\.\d+-\d+$/)) {
+				return format;
+			}
+			// Eğer eski format string'i varsa (örn: #.00) onu çevir
+			if (format && typeof format === 'string' && format.includes('.')) {
+				const decimalPlaces = format.split('.')[1].length;
+				return `1.${decimalPlaces}-${decimalPlaces}`;
+			}
+		}
+		return '';
+	}
+
+	colorList = [
+		'#1890FF',
+		'#FAAD14',
+		'#52C41A',
+		'#5D6D7E',
+		'#FF6B6B',
+		'#13C2C2',
+		'#58D68D',
+		'#722ED1',
+		'#85C1E9',
+		'#c49e05ff'
+	];
+
+	display = computed(() => {
+		switch (this.type()) {
+			case 'text':
+			case 'number':
+			case 'decimal':
+			case 'currency':
+			case 'big_decimal':
+				return this.model();
+			case 'date':
+				return (<number>this.model()).longToString(this.format() ?? 'time');
+			case 'password':
+				return (<string>this.model()).replace(/./g, '*');
+			default:
+				console.error("Invalid type: '" + this.type() + "'");
+				return '';
+		}
+	});
+
+	enumSelectionDisplay = computed(() => {
+		const currentLang = this.langSignal();
+
+		const selectionGroup =
+			this.selectionGroupService.selectionGroups()[`${this.groupName()!}~${this.parentSelectionKey()!}`];
+
+		if (!selectionGroup) {
+			this.selectionGroupService.fetchEnum(this.groupName()!, this.parentSelectionKey()!);
+			return this.model();
+		}
+
+		const rawModel = this.model();
+		const key =
+			typeof rawModel === 'object' && rawModel !== null && 'value' in rawModel ? rawModel.value
+			: typeof rawModel === 'boolean' ? String(rawModel)
+			: rawModel;
+
+		const selectionItem = selectionGroup.selectionItems.find((t) => t.selectionKey === key) as {
+			selectionMultiLanguageDisplays?: { [lang: string]: string };
+			selectionDisplay?: string;
+		};
+
+		if (!selectionItem) return key;
+
+		return selectionItem.selectionMultiLanguageDisplays?.[currentLang] ?? selectionItem.selectionDisplay ?? key;
+	});
+
+	enumBadgeBackgroundColor = computed(() => {
+		if (typeof this.model() === 'boolean') {
+			return this.model() ? '#22c55e' : '#ef4444'; // true için yeşil, false için kırmızı
+		}
+
+		const selectionGroup =
+			this.selectionGroupService.selectionGroups()[`${this.groupName()!}~${this.parentSelectionKey()!}`];
+		const selectionItems = selectionGroup?.selectionItems ?? [];
+
+		const selectionItem = selectionItems.find((t) => t.selectionKey === this.model());
+
+		if (!selectionItem) {
+			return '#1890FF';
+		} else if (this.colorList[selectionItem.showOrder] !== undefined) {
+			return this.colorList[selectionItem.showOrder];
+		}
+		return '#A2AFFF';
+	});
+
+	getArrayItemValue(item: any): any {
+		return item[this.arrayTypeDisplayName()];
+	}
+
+	isModelArray = computed(() => {
+		return Array.isArray(this.model());
+	});
+
+	// Get enum display for array items
+	enumArrayDisplays = computed(() => {
+		if (!this.isModelArray() || !Array.isArray(this.model())) return [];
+
+		const currentLang = this.langSignal();
+		const selectionGroup =
+			this.selectionGroupService.selectionGroups()[`${this.groupName()!}~${this.parentSelectionKey()!}`];
+
+		if (!selectionGroup) {
+			this.selectionGroupService.fetchEnum(this.groupName()!, this.parentSelectionKey()!);
+			return this.model() as string[];
+		}
+
+		return this.model().map((item: any) => {
+			const key =
+				typeof item === 'object' && item !== null && 'value' in item ? item.value
+				: typeof item === 'boolean' ? String(item)
+				: item;
+
+			const selectionItem = selectionGroup.selectionItems.find((t) => t.selectionKey === key) as {
+				selectionMultiLanguageDisplays?: { [lang: string]: string };
+				selectionDisplay?: string;
+			};
+
+			if (!selectionItem) return key;
+
+			return selectionItem.selectionMultiLanguageDisplays?.[currentLang] ?? selectionItem.selectionDisplay ?? key;
+		}) as string[];
+	});
+
+	// Get enum background colors for array items
+	enumArrayBackgroundColors = computed(() => {
+		if (!this.isModelArray() || !Array.isArray(this.model())) return [];
+
+		const selectionGroup =
+			this.selectionGroupService.selectionGroups()[`${this.groupName()!}~${this.parentSelectionKey()!}`];
+		const selectionItems = selectionGroup?.selectionItems ?? [];
+
+		return this.model().map((item: any) => {
+			if (typeof item === 'boolean') {
+				return item ? '#22c55e' : '#ef4444';
+			}
+
+			const selectionItem = selectionItems.find((t) => t.selectionKey === item);
+
+			if (!selectionItem) {
+				return '#1890FF';
+			} else if (this.colorList[selectionItem.showOrder] !== undefined) {
+				return this.colorList[selectionItem.showOrder];
+			}
+			return '#A2AFFF';
+		});
+	});
+
+	copyToClipboard(value: string | undefined) {
+		if (!value) return;
+		navigator.clipboard.writeText(value).then(
+			() => {
+				this.messageService.add({
+					severity: 'success',
+					summary: this.translocoService.translate('messages.successMessageHeader'),
+					detail: this.translocoService.translate('messages.copyToClipboardSuccess'),
+					key: 'toast-root'
+				});
+			},
+			(err) => {
+				this.messageService.add({
+					severity: 'error',
+					summary: this.translocoService.translate('messages.unsuccessfulMessageHeader'),
+					detail: this.translocoService.translate('messages.copyToClipboardError'),
+					key: 'toast-root'
+				});
+			}
+		);
+	}
+}

package/ui-business/assetPicker/index.ts

@@ -0,0 +1 @@
+export * from './src/asset-picker.component';

package/ui-business/assetPicker/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui-business/assetPicker/src/asset-picker.component.html

@@ -0,0 +1,29 @@
+<p-autoComplete
+	optionLabel="text"
+	[optionValue]="optionValue()!"
+	[placeholder]="placeholder()"
+	[multiple]="multiple()"
+	[group]="true"
+	[forceSelection]="forceSelection()"
+	[delay]="700"
+	[minLength]="3"
+	[suggestions]="filteredSelectionItems"
+	(completeMethod)="search($event)"
+	[formControl]="ngControl.control"
+	[autoHighlight]="true"
+	[type]="type()!"
+	(ngModelChange)="onNgModelChange($event)"
+	[showClear]="showClear()"
+	[emptyMessage]="translocoService.translate('messages.noDataToDisplay')"
+	(onSelect)="triggerSelectedEvents($event)"
+	[appendTo]="appendTo()"
+	(keyup.enter)="search($event)">
+	<ng-template let-group pTemplate="group">
+		<span class="font-bold">{{ group.text }}</span>
+	</ng-template>
+	@if (showOnlyAssetNumber()) {
+		<ng-template let-value pTemplate="selectedItem">
+			<span>{{ value?.assetNumber || value?.text }}</span>
+		</ng-template>
+	}
+</p-autoComplete>

package/ui-business/assetPicker/src/asset-picker.component.ts

@@ -0,0 +1,259 @@
+import { HttpClient } from '@angular/common/http';
+import {
+	AfterViewInit,
+	Component,
+	DestroyRef,
+	EventEmitter,
+	OnInit,
+	Output,
+	ViewChild,
+	effect,
+	inject,
+	input,
+	signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
+import { ObjectUtils } from 'primeng/utils';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { Subject, switchMap } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { Apps } from 'aril/boot/config/apps';
+import { SelectionGroupService } from 'aril/theme/layout';
+import { BaseInputComponent, ValueAccessorDirective } from 'aril/ui/lib';
+
+import {
+	AssetAggregate,
+	AttributeElement,
+	CacheSearchRequestDTO,
+	DefaultSearchAggregateAssetAggregate,
+	SuggestionsDTO,
+	SuggestionsGroupDTO
+} from './interface';
+
+type ValueTypes = 'text' | 'number';
+@Component({
+	standalone: true,
+	selector: 'aril-asset-picker[ngModel], aril-asset-picker[formControl], aril-asset-picker[formControlName]',
+	templateUrl: './asset-picker.component.html',
+	styles: [
+		`
+			::ng-deep .p-autocomplete-multiple-container {
+				flex-wrap: wrap;
+				max-height: 50px;
+				overflow-y: auto;
+				align-items: center;
+			}
+
+			::ng-deep .p-autocomplete-token {
+				margin: 0;
+				flex-shrink: 0;
+			}
+
+			::ng-deep .p-autocomplete-input-token {
+				flex: 1;
+				min-width: 150px;
+			}
+		`
+	],
+	imports: [ReactiveFormsModule, AutoCompleteModule],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class AssetPickerComponent extends BaseInputComponent implements AfterViewInit, OnInit {
+	@ViewChild(AutoComplete) autoCompleteRef!: AutoComplete;
+	assetCode = input<string | string[] | null>(null);
+	type = input<ValueTypes | null>(null);
+
+	placeholder = input<string>('Arama...');
+	forceSelection = input<boolean>(false);
+	multiple = input<boolean>(false);
+	showClear = input<boolean>(false);
+	optionValue = input<keyof SuggestionsDTO | null>(null);
+	appendTo = input<string | HTMLElement | null>('body');
+	mql = input<string>();
+	showOnlyAssetNumber = input<boolean>(false);
+	isUpdateMode = signal<boolean>(false);
+
+	filteredSelectionItems!: SuggestionsGroupDTO[];
+	selectionDefinitions!: DefaultSearchAggregateAssetAggregate;
+	cacheSearchRequest$ = new Subject<CacheSearchRequestDTO>();
+	destroyRef = inject(DestroyRef);
+	@Output() selectedDefinitionEvent: EventEmitter<AssetAggregate> = new EventEmitter<AssetAggregate>();
+
+	constructor(
+		private readonly http: HttpClient,
+		public translocoService: TranslocoService,
+		private readonly selectionGroupService: SelectionGroupService
+	) {
+		super();
+
+		effect(() => {
+			this.selectionGroupService.selectionGroups();
+			if (this.selectionDefinitions) {
+				this.refreshFilteredSelectionItems();
+			}
+		});
+		
+	}
+
+	ngOnInit() {
+		this.cacheSearchRequest$
+			.pipe(
+				switchMap((payload) =>
+					this.http.post<any>(API_CONFIGS.getExternalAppEndpoint(Apps.MNG) + '/master-data/cache-search', payload)
+				),
+				takeUntilDestroyed(this.destroyRef)
+			)
+			.subscribe((selectionGroup) => {
+				this.selectionDefinitions = selectionGroup;
+				this.refreshFilteredSelectionItems();
+			});
+
+		// If the form control's value is a string, perform a cache search to retrieve the ID.
+		const currentValue = this.ngControl?.control?.value;
+		if (currentValue && typeof currentValue === 'string'){
+					this.isUpdateMode.set(true);
+					this.search({ query: currentValue });
+		}
+
+	}
+
+	private refreshFilteredSelectionItems(): void {
+		if (!this.selectionDefinitions) return;
+
+		const newFilteredGroupSuggestions: SuggestionsGroupDTO[] = [];
+
+		Object.keys(this.selectionDefinitions).forEach((key: string) => {
+			const groupData: SuggestionsGroupDTO = {
+				text: this.selectionDefinitions[key]?.result[0]?.assets[0]?.assetDefinitionName,
+				key: key,
+				items: this.selectionDefinitions[key].result.map(
+					(item: AssetAggregate) =>
+						({
+							key: item.id,
+							text: this.getAttiributesValueDescr(item.attributes),
+							assetNumber: this.getAssetNumberValue(item.attributes),
+							attributes: item.attributes,
+							assetDefinitionCode: item.assetDefinitionCode
+						}) as SuggestionsDTO
+				)
+			};
+			newFilteredGroupSuggestions.push(groupData);
+
+			// If the string value is patched in update mode and there is group data, select the first item
+			if (this.isUpdateMode() && groupData.items.length === 1 && !this.multiple()) {
+				this.ngControl?.control?.setValue(groupData.items[0]);
+				this.isUpdateMode.set(false);
+			}
+		});
+
+		this.filteredSelectionItems = newFilteredGroupSuggestions;
+	}
+
+	ngAfterViewInit(): void {
+		this.autoCompleteRef.getOptionValue = this.getOptionValue.bind(this);
+	}
+
+	getOptionValue(option: any) {
+		if (!this.optionValue()) {
+			return option;
+		}
+
+		if (typeof option === 'object') {
+			return ObjectUtils.resolveFieldData(option, this.optionValue());
+		}
+
+		return option;
+	}
+
+	onNgModelChange(value: string) {
+		const validatedValue = this.validateInput(value);
+		this.ngControl.viewToModelUpdate(validatedValue);
+	}
+
+	validateInput(value: string) {
+		if (this.type() === 'number') {
+			return value.replace(/\D/g, '');
+		} else if (this.type() === 'text') {
+			return value.replace(/[^a-zA-ZğüşıöçĞÜŞİÖÇ\s]/g, '');
+		}
+		return value;
+	}
+
+	search(event: any) {
+		const query = this.validateInput(event.query);
+		const payload: CacheSearchRequestDTO = {
+			searchText: query?.trim(),
+			assetDefinitionCodes: Array.isArray(this.assetCode()) ? this.assetCode() : ([this.assetCode()] as any),
+			pager: {
+				pageSize: 5,
+				pageNumber: 1
+			}
+		};
+
+		if (this.mql()) payload.mql = this.mql();
+
+		this.cacheSearchRequest$.next(payload);
+	}
+
+	getAttiributesValueDescr(attributes: AttributeElement[]): string {
+		const excludedAttributes = ['AssetId', 'AssetDefinitionName'];
+		return attributes
+			?.filter((attr) => !excludedAttributes.includes(attr.attribute?.attributeCode))
+			?.map((attr) => {
+				// Handle SELECT type attributes using SelectionGroupService
+				if (attr.attribute?.attributeType === 'SELECT' && attr.attribute?.selectOption) {
+					return this.getSelectionDisplay(attr.attribute.selectOption, attr.value as string);
+				}
+				const value = attr.valueDesc ? attr.valueDesc : attr.value;
+				return typeof value === 'object' ? JSON.stringify(value) : String(value);
+			})
+			.join(' - ');
+	}
+	private getAssetNumberValue(attributes: AttributeElement[]): string {
+		const assetNumberAttr = attributes?.find((attr) => attr.attribute?.attributeCode === 'AssetNumber');
+		if (!assetNumberAttr) return '';
+		return String(assetNumberAttr.valueDesc || assetNumberAttr.value || '');
+	}
+	private getSelectionDisplay(groupName: string, value: string): string {
+		const key = `${groupName}~ALL`;
+		const selectionGroup = this.selectionGroupService.selectionGroups()[key];
+
+		if (!selectionGroup) {
+			this.selectionGroupService.fetchEnum(groupName, 'ALL');
+			return value;
+		}
+
+		const currentLang = this.translocoService.getActiveLang();
+		const selectionItem = selectionGroup.selectionItems?.find((t) => t.selectionKey === value) as {
+			selectionMultiLanguageDisplays?: { [lang: string]: string };
+			selectionDisplay?: string;
+		};
+
+		if (!selectionItem) return value;
+
+		return selectionItem.selectionMultiLanguageDisplays?.[currentLang] ?? selectionItem.selectionDisplay ?? value;
+	}
+
+	triggerSelectedEvents(event: any) {
+		const selectedItems: AssetAggregate[] = Object.keys(this.selectionDefinitions).map((key: string) => {
+			return this.selectionDefinitions[key].result.find((item: AssetAggregate) => item.id === event?.value?.key);
+		}) as AssetAggregate[];
+
+		const selectedItem = selectedItems[0];
+
+		const selectedEvent = {
+			...selectedItem,
+			key: selectedItem?.id,
+			text: selectedItem?.assetDefinitionName,
+			attributes: selectedItem?.attributes,
+			assetDefinitionCode: selectedItem?.assetDefinitionCode
+		};
+
+		this.selectedDefinitionEvent.emit(selectedEvent);
+	}
+}

package/ui-business/assetPicker/src/interface.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+export interface SuggestionsGroupDTO {
+	key: number | string | null;
+	text: string;
+	attributes?: AttributeElement[];
+	assetDefinitionCode?: string;
+	items: SuggestionsDTO[];
+}
+export interface SuggestionsDTO {
+	key: number | string | null;
+	text: string;
+	assetNumber?: string;
+	attributes?: AttributeElement[];
+}
+
+export interface DefaultSearchAggregateAssetAggregate {
+	[key: string]: AdditionalProp;
+}
+
+export interface AdditionalProp {
+	resultInfo: ResultInfo;
+	result: AssetAggregate[];
+}
+
+export interface ResultInfo {
+	totalPage: number;
+	totalItem: number;
+}
+
+export interface AssetAggregate {
+	id: number;
+	assetDefinitionId: number;
+	assetDefinitionCode: string;
+	assetDefinitionName: string;
+	uniqueIdentifier: string;
+	authorityGroup: string;
+	createDate: number;
+	updateDate: number;
+	updateUser: string;
+	createUser: string;
+	assets: Asset[];
+	attributes: AttributeElement[];
+	key?: number;
+	text?: string;
+}
+
+export interface Asset {
+	alias: string;
+	assetDefinitionID: number;
+	assetDefinitionCode: string;
+	assetDefinitionName: string;
+	assetId: number;
+}
+
+export interface AttributeElement {
+	id: number;
+	attribute: AttributeAttribute;
+	value: Value;
+	startDate: number;
+	valueDesc: string;
+}
+
+export interface AttributeAttribute {
+	alias: string;
+	attributeCode: string;
+	attributeName: string;
+	attributeId: number;
+	attributeType: string;
+	selectOption?: string;
+}
+
+export interface Value {}
+
+export interface PagerDTO {
+	pageSize: number;
+	pageNumber: number;
+}
+export interface CacheSearchRequestDTO {
+	assetDefinitionCodes: string[];
+	searchText?: string;
+	mql?: string;
+	pager: PagerDTO;
+}

package/ui-business/detailed-overlay-panel/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}