nuxeo-development-framework 5.6.3 → 5.6.4

package/src/lib/components/ndf-filters/services/aggregation-field.service.ts

@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import _ from 'lodash';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { NdfTransformService, NdfTransformerDataModel } from '../../../core/services';
+import {
+	AggregationBucket,
+	AggregationFieldConfig,
+	AggregationResponse,
+	AggregationTooltipType,
+	FieldOptionsType,
+	FilterOption
+} from '../models';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class AggregationFieldService {
+	constructor(private readonly _ndfTransformService: NdfTransformService) {}
+
+	prepareAggregationFiled(data: FieldOptionsType) {
+		return !!data.fieldConfig?.dataTransformer
+			? this._transformData(data.aggregation, data.fieldConfig?.dataTransformer)
+			: this._prepareOptions(data);
+	}
+
+	private _prepareOptions({ fieldConfig, aggregation }: FieldOptionsType): Observable<FilterOption[]> {
+		return of(aggregation).pipe(
+			map((aggregation) => {
+				const _items = _.get(aggregation, fieldConfig?.propertyPath || 'buckets') || [];
+				return _items.map((item: AggregationBucket) => this._mapOption(item, fieldConfig));
+			})
+		);
+	}
+
+	private _transformData(aggregation: AggregationResponse, transformer: string) {
+		const _key = (k: string) => `${k}`.split('/').pop();
+
+		const createMappedData = (res: NdfTransformerDataModel[], aggregation: AggregationResponse) => {
+			return res.map((item) => {
+				const bucket = aggregation.buckets.find((it) => _key(it.key) === _key(item.code));
+				item.code = bucket.key;
+				return this._createFilterOption(item, bucket?.docCount || 0);
+			});
+		};
+
+		const dataMappers: Partial<
+			Record<
+				string,
+				(res: NdfTransformerDataModel[], aggregation: AggregationResponse) => ReturnType<typeof createMappedData>
+			>
+		> = {
+			subject: (res, aggregation) => createMappedData(res, aggregation),
+			format: (res, aggregation) => createMappedData(res, aggregation)
+		};
+
+		if (!this._ndfTransformService.has(transformer)) {
+			throw new Error(`No transformer defined for type: ${transformer}`);
+		}
+
+		const keys = aggregation.buckets.map((bt) => bt.key);
+		return this._ndfTransformService.transform(transformer, keys).pipe(
+			map((res) => {
+				const _dataMapper = dataMappers[transformer];
+				if (_dataMapper) {
+					return _dataMapper(res, aggregation);
+				}
+				return res.map((item) => {
+					const bucket = aggregation.buckets.find((bkt) => bkt.key === item.code || bkt.key === item?.id);
+					return this._createFilterOption(item, bucket?.docCount || 0);
+				});
+			})
+		);
+	}
+
+	private _createFilterOption(item: any, docCount: number): FilterOption {
+		const code = item.code || item.id;
+		return {
+			id: code,
+			label: item.code,
+			value: code,
+			count: docCount,
+			localizedLabel: { ar: item.arabicTitle, en: item.englishTitle }
+		};
+	}
+
+	private _mapOption(item: AggregationBucket, config: AggregationFieldConfig): FilterOption {
+		const prefix = config?.prefix || '';
+		const bindValue = config?.bindValue;
+		const value = _.get(item, bindValue || 'key') || _.get(item, bindValue || 'id');
+
+		const option: FilterOption = {
+			id: item.key,
+			label: `${prefix}${item.key}`,
+			value: value,
+			count: item?.docCount,
+			localizedLabel: config.bindLabel
+				? {
+						ar: _.get(item, config?.bindLabel.ar),
+						en: _.get(item, config?.bindLabel.en)
+				  }
+				: null
+		};
+		if (config?.tooltip) {
+			const { properties, ...tooltipConfig } = config?.tooltip;
+			option.tooltip = {
+				config: tooltipConfig,
+				values: this._prepareTooltip(item, config?.tooltip) || null
+			};
+		}
+		return option;
+	}
+
+	private _prepareTooltip(item: AggregationBucket, config: AggregationTooltipType) {
+		return Object.entries(config.properties).reduce((acc, [key]) => {
+			const val = _.get(item, key);
+			if (val) {
+				acc[key] = val;
+			}
+			return acc;
+		}, {});
+	}
+}

package/src/lib/components/ndf-filters/services/dynamic-component-loader.service.ts

@@ -0,0 +1,47 @@
+import {
+  ComponentFactoryResolver,
+  Injectable,
+  Type,
+  ViewContainerRef,
+} from '@angular/core';
+import {
+  AggregationFieldType,
+  CustomFieldType,
+  PredicateFieldType,
+} from '../models';
+
+type ComponentType =
+  | AggregationFieldType
+  | PredicateFieldType
+  | CustomFieldType;
+
+@Injectable()
+export class DynamicComponentLoaderService {
+  private readonly _components = new Map<ComponentType, Type<any>>();
+
+  constructor(private _factoryResolver: ComponentFactoryResolver) {}
+
+  registerComponent<T>(key: ComponentType, component: Type<T>) {
+    this._components.set(key, component);
+  }
+
+  registerComponents<T>(components: Record<ComponentType | string, Type<any>>) {
+    Object.entries(components).forEach(([key, component]) => {
+      this.registerComponent(key as ComponentType, component);
+    });
+  }
+
+  renderComponent(key: ComponentType, vcr: ViewContainerRef) {
+    if (!this._components.has(key)) {
+      throw 'unknown component ';
+    }
+    const component = this._components.get(key);
+    return this.loadComponent(component, vcr);
+  }
+
+  loadComponent<T>(componentAngularType: Type<T>, vcr: ViewContainerRef) {
+    const component =
+      this._factoryResolver.resolveComponentFactory(componentAngularType);
+    return vcr.createComponent(component);
+  }
+}

package/src/lib/components/ndf-filters/services/filters-mapper.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { FIELD_SEND_MODE } from '../constants';
+import { FieldConfigModel } from '../models';
+import { isFieldValueObject, NxQlQuery } from '../utility';
+
+
+
+@Injectable({
+	providedIn: 'root'
+})
+export class FiltersMapperService {
+	preparePayload(fields: FieldConfigModel[], criteria: Record<string, any>) {
+		return this._preparePayload(fields, criteria);
+	}
+
+	private _preparePayload(fields: FieldConfigModel[], criteria: Record<string, any>) {
+		const params = {};
+		const predicateList = [];
+		const payload = {};
+
+		for (const field of fields) {
+			const fieldValue = criteria[field.config.fieldKey];
+			const paramKey = field.type == 'aggregation' ? field.config.aggregation : field.config.fieldKey;
+
+			if (!fieldValue) {
+				continue;
+			}
+
+			if ((this._sendInPayload(field) || this._sendCustom(field)) && isFieldValueObject(fieldValue)) {
+				const _data = NxQlQuery.preparePayloadItem(fieldValue, field);
+				predicateList.push(_data);
+				continue;
+			}
+
+			if (this._sendInPayload(field)) {
+				payload[paramKey] = this._stringifyValue(fieldValue);
+			}
+
+			if (this._sendCustom(field) || this._sendInQueryParams(field)) {
+				params[paramKey] = this._stringifyValue(fieldValue);
+			}
+		}
+
+		return {
+			params,
+			payload: {
+				...payload,
+				predicateList
+			}
+		};
+	}
+
+	private _stringifyValue(value: string | string[]) {
+		return Array.isArray(value) ? JSON.stringify(value) : value;
+	}
+
+	private _sendInQueryParams(field: FieldConfigModel) {
+		return field.config?.sendMode === FIELD_SEND_MODE.queryParam;
+	}
+
+	private _sendInPayload(field: FieldConfigModel) {
+		return field.config?.sendMode === FIELD_SEND_MODE.payload;
+	}
+
+	private _sendCustom(field: FieldConfigModel) {
+		return field.config?.sendMode === FIELD_SEND_MODE.custom;
+	}
+}

package/src/lib/components/ndf-filters/services/filters-query.service.ts

@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import { VALUE_OBJECT } from '../constants';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class FilterQueryService {
+	private readonly keyToShortMap = new Map<string, string>();
+	private readonly shortToKeyMap = new Map<string, string>();
+
+	private readonly defaultShortKeys: Record<string, string> = {
+		value: 'v',
+		operator: 'o',
+		min: 'n',
+		max: 'x',
+		prefix: 'p'
+	};
+
+	constructor() {
+		this.initializeDefaultKeys();
+	}
+
+	registerKeys(keys: Record<string, string>): void {
+		Object.entries(keys).forEach(([key, value]) => this.registerKey(key, value));
+	}
+
+	registerKey(longKey: string, shortKey: string): void {
+		this.keyToShortMap.set(longKey, shortKey);
+		this.shortToKeyMap.set(shortKey, longKey);
+	}
+
+	/**
+	 * Encodes a query object into a URL-safe string by transforming its keys
+	 * and converting it to a JSON string.
+	 *
+	 * @param {Record<string, any>} query - The query object to encode.
+	 *
+	 * @example
+	 * // Example query object
+	 * const query = {
+	 *   // Predicate field (payload sent)
+	 *   'locRef:boxCode': {
+	 *     value: '1',
+	 *     operator: 'LIKE',
+	 *   },
+	 *
+	 *   // Aggregation field (query parameter)
+	 *   'locRef:boxCode': [1]
+	 * };
+	 *
+	 * const encodedQuery = encodeQuery(query);
+	 * console.log(encodedQuery); // Encoded string representation
+	 *
+	 * @returns {string} - The URL-encoded JSON string representation of the query object.
+	 */
+	encodeQuery(query: Record<string, any>): string {
+		const transformed = this.transformObject(query, this.keyToShortMap, false);
+		return encodeURIComponent(JSON.stringify(transformed));
+	}
+
+	/**
+	 * Decodes a URL-encoded query string back into its original object form.
+	 *
+	 * @param {string} encodedQuery - The URL-encoded JSON string representation of a query.
+	 *
+	 * @example
+	 * const encodedQuery = "%7B%22locRef%3AboxCode%22%3A%7B%22value%22%3A%221%22%2C%22operator%22%3A%22LIKE%22%7D%7D";
+	 * const decodedQuery = decodeQuery(encodedQuery);
+	 * console.log(decodedQuery);
+	 * Output:
+	 * {
+	 *   'locRef:boxCode': {
+	 *     value: '1',
+	 *     operator: 'LIKE'
+	 *   }
+	 * }
+	 *
+	 * @returns {Record<string, any> | null} - The decoded query object, or `null` if decoding fails.
+	 */
+
+	decodeQuery(encodedQuery: string): Record<string, any> | null {
+		try {
+			const parsedQuery = JSON.parse(decodeURIComponent(encodedQuery));
+			return this.transformObject(parsedQuery, this.shortToKeyMap, true);
+		} catch (error) {
+			console.error('Failed to decode query:', error);
+			return null;
+		}
+	}
+
+	private initializeDefaultKeys(): void {
+		Object.entries(this.defaultShortKeys).forEach(([longKey, shortKey]) => {
+			this.registerKey(longKey, shortKey);
+		});
+	}
+
+	private transformObject(entry: any, keyMap: Map<string, string>, isDecode: boolean): any {
+		if (Array.isArray(entry)) {
+			return entry.map((item) => this.transformObject(item, keyMap, isDecode));
+		}
+
+		if (entry && typeof entry === 'object') {
+			if (!isDecode) {
+				delete entry[VALUE_OBJECT];
+			}
+			return Object.keys(entry).reduce(
+				(acc, key) => {
+					const newKey = keyMap.get(key);
+					if (!newKey) {
+						throw new Error(`Query key mapping not found for: ${key}`);
+					}
+					if (isDecode && newKey === 'operator') {
+						acc[VALUE_OBJECT] = `${VALUE_OBJECT}`;
+					}
+					acc[newKey] = this.transformObject(entry[key], keyMap, isDecode);
+					return acc;
+				},
+				{} as Record<string, any>
+			);
+		}
+
+		return entry;
+	}
+}

package/src/lib/components/ndf-filters/services/index.ts

@@ -0,0 +1,4 @@
+export * from './aggregation-field.service';
+export * from './dynamic-component-loader.service';
+export * from './filters-query.service';
+export * from './filters-mapper.service'

package/src/lib/components/ndf-filters/utility/index.ts

@@ -0,0 +1,3 @@
+export * from './nxql';
+export * from './object';
+export * from './nxql-query'

package/src/lib/components/ndf-filters/utility/nxql-query.ts

@@ -0,0 +1,67 @@
+import { COMPARISON_OPERATOR } from "../constants";
+import { ComparisonOperator, FieldConfigModel, FieldValueObject } from "../models";
+import { OperatorValueObject } from '../models/operator-value-object';
+import { NxQL } from './nxql';
+
+
+
+export class NxQlQuery extends NxQL {
+	static preparePayloadItem(value: FieldValueObject, field: FieldConfigModel): OperatorValueObject {
+		const _defaultOperator = field.type == 'aggregation' ? COMPARISON_OPERATOR.in : COMPARISON_OPERATOR.like;
+		const _fieldName = field.config.fieldKey;
+
+		const _operator = value?.operator || field.config?.operator || _defaultOperator;
+
+		return {
+			name: _fieldName,
+			operator: _operator,
+			value: NxQlQuery.prepareValueByOperator(_operator, value)
+		};
+	}
+
+	static prepareValueByOperator(operator: ComparisonOperator, fieldValue: FieldValueObject): string {
+		const _opr = COMPARISON_OPERATOR;
+
+    const { value, prefix } = fieldValue;
+
+		if (operator === _opr.between) {
+			return NxQlQuery._getMinMaxRange(fieldValue, prefix);
+		}
+
+		const operatorHandlers = {
+			[_opr.equals]: NxQlQuery.equals,
+			[_opr.notEquals]: NxQlQuery.equals,
+			[_opr.lessThan]: NxQlQuery.equals,
+			[_opr.greaterThan]: NxQlQuery.equals,
+			[_opr.in]: NxQlQuery.in,
+			[_opr.notIn]: NxQlQuery.in,
+			[_opr.lessThanOrEqual]: NxQlQuery.equals,
+			[_opr.greaterThanOrEqual]: NxQlQuery.equals,
+			[_opr.like]: NxQlQuery.like,
+			[_opr.iLike]: NxQlQuery.like,
+			[_opr.notLike]: NxQlQuery.like,
+			[_opr.notILike]: NxQlQuery.like,
+			[_opr.startsWith]: NxQlQuery.equals,
+			[_opr.fullText]: NxQlQuery.equals
+		};
+
+		return operatorHandlers[operator](value, prefix);
+	}
+
+	static equals(value: string, prefix: string = '') {
+		return `${prefix ? `${prefix} ` : ''}'${value.trim()}'`;
+	}
+
+	static like(value: string, prefix: string = '') {
+		return `${prefix ? `${prefix} ` : ''}'%${value.trim()}%'`;
+	}
+
+	static in(value: string, prefix: string = '') {
+		const _val = Array.isArray(value) ? value.map(item => `'${item}'`).join(',') : value;
+		return `${prefix ? `${prefix} ` : ''}(${_val.trim()})`;
+	}
+
+	static between(value1: string, value2: string) {
+		return `${value1} AND ${value2}`;
+	}
+}

package/src/lib/components/ndf-filters/utility/nxql.ts

@@ -0,0 +1,66 @@
+import { COMPARISON_OPERATOR, VALUE_OBJECT } from '../constants';
+import { ComparisonOperator, FieldValueObject } from '../models';
+
+export class NxQL {
+	static _getDateRange(value: { min?: string; max?: string }): string {
+		return NxQL._getMinMaxRange(value, 'DATE');
+	}
+
+	static _getMinMaxRange(value: { min?: string; max?: string }, prefix: string = ''): string {
+		const { min, max } = value;
+
+		if (min && max) {
+			return `${prefix} '${min}' AND ${prefix} '${max}'`;
+		}
+
+		if (max) {
+			return `${prefix} '${max}'`;
+		}
+
+		if (min) {
+			return `${prefix} '${min}'`;
+		}
+		return '';
+	}
+
+	static _getRangeOperator(value: { min?: string; max?: string }): ComparisonOperator | null {
+		const { min, max } = value;
+
+		if (min && max) {
+			return COMPARISON_OPERATOR.between;
+		}
+		if (max) {
+			return COMPARISON_OPERATOR.lessThan;
+		}
+		if (min) {
+			return COMPARISON_OPERATOR.greaterThan;
+		}
+
+		return null;
+	}
+
+	static _getValueRange(
+		value: { min?: string; max?: string },
+		prefix: string = '',
+		operator?: ComparisonOperator
+	): FieldValueObject {
+		const { min, max } = value;
+		const baseObject = { value: '', prefix, operator };
+		if (min && max) {
+			return new FieldValueObject({
+				...baseObject,
+				value: `${prefix} '${min}' AND ${prefix} '${max}'`,
+				min: `${min}`,
+				max: `${max}`
+			});
+		}
+
+		if (max) {
+			return new FieldValueObject({ ...baseObject, value: `${max}`, max: `${max}` });
+		}
+
+		if (min) {
+			return new FieldValueObject({ ...baseObject, value: `${min}`, min: `${min}` });
+		}
+	}
+}

package/src/lib/components/ndf-filters/utility/object.ts

@@ -0,0 +1,51 @@
+import { isBoolean, isDate, isNumber, isObject } from 'lodash';
+import { FieldValueObject } from '../models';
+import { VALUE_OBJECT } from '../constants';
+
+export function isFieldValueObject(value: any): value is FieldValueObject {
+	return typeof value === 'object' && (value[VALUE_OBJECT] || ('value' in value && 'operator' in value));
+}
+
+export function isDateObject(obj: any): obj is { min: string; max: string } {
+	return (
+		obj &&
+		typeof obj === 'object' &&
+		'min' in obj &&
+		'max' in obj &&
+		typeof obj.min === 'string' &&
+		typeof obj.max === 'string'
+	);
+}
+
+export function removeEmptyKeys<T = any>(data): T {
+	return Object.entries(data || {}).reduce((obj, [key, value]) => {
+		if (Array.isArray(value)) {
+			const cleanedArray = value
+				.map((item) => (isObject(value) ? removeEmptyKeys(item) : item))
+				.filter(shouldIncludeValue);
+
+			if (cleanedArray.length > 0) {
+				obj[key] = cleanedArray;
+			}
+		}
+
+		if (isObject(value) && !isDate(value) && !Array.isArray(value)) {
+			const cleanedValue = removeEmptyKeys(value);
+
+			if (Object.keys(cleanedValue).length > 0) {
+				obj[key] = cleanedValue;
+			}
+		} else if (shouldIncludeValue(value)) {
+			obj[key] = value;
+		}
+		return obj;
+	}, {} as T);
+}
+
+function shouldIncludeValue(value: any): boolean {
+	if (Array.isArray(value) && value.length > 0) {
+		return value.some((item) => shouldIncludeValue(item));
+	}
+
+	return !Array.isArray(value) && (!!value || isBoolean(value) || isNumber(value) || isDate(value));
+}

package/src/lib/components/ndf-panel/component/ndf-panel.component.html

@@ -0,0 +1,13 @@
+<div class="scroll-panel">
+	<div class="header">
+		<ng-container [ngTemplateOutlet]="panelHeader"></ng-container>
+	</div>
+
+	<div class="body" [style.maxHeight]="maxBodyHeight">
+		<ng-container [ngTemplateOutlet]="panelBody"></ng-container>
+	</div>
+
+	<div class="footer">
+		<ng-container [ngTemplateOutlet]="panelFooter"></ng-container>
+	</div>
+</div>

package/src/lib/components/ndf-panel/component/ndf-panel.component.scss

@@ -0,0 +1,20 @@
+.scroll-panel {
+	display: var(--ndf-panel-display, flex);
+	flex-direction: var(--ndf-panel-flex-direction, column);
+	height: var(--ndf-panel-height, calc(100dvh - 65px));
+	border: 1px solid var(--ndf-panel-main-border);
+}
+.header {
+	flex: var(--ndf-panel-header-flex, 0 0 auto);
+	color: var(--ndf-panel-color, #3b3b3c);
+	background-color: var(--ndf-panel-bg, #f6f9f5);
+	border-bottom: 1px solid var(--ndf-panel-border-color, #e7e7e7);
+}
+.footer {
+	border-top: 1px solid var(--ndf-panel-border-color, #e7e7e7);
+}
+.body {
+	flex: var(--ndf-panel-body-flex, 1 1 auto);
+	overflow-y: var(--ndf-panel-body-overflow-y, auto);
+	min-height: var(--ndf-panel-body-min-height, 0);
+}

package/src/lib/components/ndf-panel/component/ndf-panel.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef } from '@angular/core';
+
+@Component({
+	selector: 'ndf-panel',
+	templateUrl: './ndf-panel.component.html',
+	styleUrls: ['./ndf-panel.component.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NdfPanelComponent {
+	@Input() maxBodyHeight = 'auto';
+
+	@ContentChild('panelHeader', { read: TemplateRef }) panelHeader?: TemplateRef<any>;
+	@ContentChild('panelBody', { read: TemplateRef }) panelBody?: TemplateRef<any>;
+	@ContentChild('panelFooter', { read: TemplateRef }) panelFooter?: TemplateRef<any>;
+}

package/src/lib/components/ndf-panel/ndf-panel.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NdfPanelComponent } from './component/ndf-panel.component';
+
+@NgModule({
+	declarations: [NdfPanelComponent],
+	imports: [CommonModule],
+	exports: [NdfPanelComponent]
+})
+export class NdfPanelModule { }

package/src/lib/components/ndf-tabs/component/ndf-tabs.component.html

@@ -0,0 +1,37 @@
+<div class="flex flex-col ndf-tabs-wrapper rounded-md   px-0.5" *ngIf="!checkingPermission">
+	<div
+		class="tabs-header flex justify-between items-center w-full border-b print:hidden"
+		[@visibilitySlide]="showHeader"
+		[class.overflow-hidden]="!showHeader"
+	>
+		<div class="tabs-wrapper flex justify-start items-center gap-2.5 self-stretch">
+			<ng-container *ngFor="let tab of tabs">
+				<ng-container *ngIf="isEnabledTab(tab) && isAllowdTabFn(tab)">
+					<div
+						[ngClass]="{
+							'selected-tab': activeTab === tab.id
+						}"
+						class="tab-item flex p-4 justify-center items-center gap-2.5 rounded-t-md font-medium text-xl cursor-pointer"
+						(click)="activateTab(tab)"
+					>
+						<ng-template
+							[ngTemplateOutlet]="tabHeader || defaultHeader"
+							[ngTemplateOutletContext]="{ $implicit: tab }"
+						></ng-template>
+					</div>
+				</ng-container>
+			</ng-container>
+		</div>
+		<ng-template
+			[ngTemplateOutlet]="headerOptions"
+			[ngTemplateOutletContext]="{ $implicit: activatedTab }"
+		></ng-template>
+	</div>
+	<ng-template
+		[ngTemplateOutlet]="tabBody || defaultBody"
+		[ngTemplateOutletContext]="{ $implicit: activatedTab }"
+	></ng-template>
+</div>
+
+<ng-template #defaultHeader let-tab>{{ tab.label | translate }}</ng-template>
+<ng-template #defaultBody>Default Body</ng-template>

package/src/lib/components/ndf-tabs/component/ndf-tabs.component.scss

@@ -0,0 +1,16 @@
+:host {
+	display: block;
+}
+.ndf-tabs-wrapper {
+	background-color: var(--ndf-tabs-body, #fff);
+	border-radius: 8px 8px 0px 0px;
+	overflow: var(--ndf-tabs-wrapper-overflow, auto);
+	height: calc(100vh - 100px);
+	.tabs-header {
+		background-color: var(--ndf-tabs-header, #fff);
+	}
+
+	@media print {
+		--ndf-tabs-wrapper-overflow: visible;
+	}
+}