nuxeo-development-framework 5.6.3 → 5.6.4

package/src/lib/components/tables/dynamic-table/dynamic-table/dynamic-table.component.ts

@@ -0,0 +1,383 @@
+import {
+	ChangeDetectorRef,
+	Component,
+	ContentChild,
+	EventEmitter,
+	Input,
+	OnDestroy,
+	OnInit,
+	Output,
+	SimpleChanges,
+	TemplateRef,
+	ViewEncapsulation
+} from '@angular/core';
+import _ from 'lodash';
+import { Subscription } from 'rxjs';
+import { catchError, map, startWith } from 'rxjs/operators';
+import { AdapterService } from '../../../../core/adapters/adapter.service';
+import { CallApiService } from '../../../../core/services/callApi/call-api.service';
+import { EMPTY_TEMPLATE } from '../directives/empty-state.directive';
+import { DynamicTableService } from '../services/dynamic-table.service';
+import { PageEvent } from '@angular/material/paginator/paginator';
+import { EvaluatedString, Evaluator } from '../../../../shared';
+
+/**
+ * this component is an additional layer that uses [Table Component]{@link TableComponent} internally,
+ * you can use this component to configure a page provider listing out of the box easily,
+ * and it will handle all of the basic features such as getting data from API, Listing, Pagination, sorting and filtering
+ * ![Screenshot-1](../screenshots/dynamicTable.png)
+ * @title
+ * Dynamic Table
+ * @example
+ *
+ * <cts-dynamic-table
+ *    [columns]="columns"
+ *    [responsiveColumns]="responsiveColumns"
+ *    [fullWidth]="fullWidth"
+ *    [pageSize]="PageSize"
+ *    [pageProvider]="pageProvider"
+ *    [quickFilter]="filter"
+ *    [sortingBy]="sortingBy"
+ *    [entityType]="'all'"
+ *    [fields]="fields"
+ *    [prefix]="prefix"
+ *    [rowCursor]="true"
+ *    [queryParam]="queryParam"
+ *    [headers]="headers"
+ *    (onRowSelected)="openViewer($event)"
+ *    (actionOnRow)="performAction($event)">
+ * </cts-dynamic-table>
+ */
+@Component({
+	selector: 'cts-dynamic-table',
+	templateUrl: './dynamic-table.component.html',
+	styleUrls: ['./dynamic-table.component.scss'],
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		'[class.loading-results]': 'loading',
+		'[class.no-data]': 'rows.length <= 0'
+	}
+})
+export class DynamicTableComponent implements OnInit, OnDestroy {
+	/** event to emit when selecting single row  */
+	@Output() onRowSelected = new EventEmitter();
+	/** event to emit when selecting single row to catch index*/
+	@Output() onRowIndexSelected = new EventEmitter();
+	/** event to emit when perform action on row (delte, edit, ... ) */
+	@Output() actionOnRow = new EventEmitter();
+	/** event to emit to the higher level  when getting data from api is finished */
+	@Output() onGettingData = new EventEmitter();
+	/** event t emit when selecting multiple row */
+	@Output() onMultiRowSelected = new EventEmitter();
+	/** event t emit when start getting data and when finish */
+	@Output() onLoading = new EventEmitter();
+
+	@Output() sortChanged = new EventEmitter<{ sortBy: string; sortOrder: string }>();
+	/**
+	 * @deprecated Use `onPage` instead.
+	 * @see onPage
+	 */
+	@Output() onPageChange = new EventEmitter();
+
+	@Output() onPage = new EventEmitter<PageEvent>();
+
+	@Output() onLoad = new EventEmitter();
+	@Output() onInitialize = new EventEmitter();
+	/** Array of columns */
+	@Input() columns;
+	/** Array of columns on smaller screens */
+	@Input() responsiveColumns?;
+	/** Defines the page in which table is being used */
+	@Input() entityType: string;
+	/** Translations prefix */
+	@Input() prefix = '';
+	/** Headers to be sent with API Request */
+	@Input() headers;
+	/** Fields keymap to be mapped in the adapter */
+	@Input() fields;
+	/** Page Provider name that will be used to retrieve data */
+	@Input() pageProvider;
+	/** Controls number of items per page in table */
+	@Input() pageSize = 10;
+
+	@Input() isLegacyMode = true;
+	@Input() showTotalRecord = false;
+
+	@ContentChild(EMPTY_TEMPLATE, { read: TemplateRef, static: true })
+	emptyTemplate: TemplateRef<any> | undefined;
+
+	private _pageNumber = 1;
+	@Input() set pageNumber(value: string | number) {
+		this._pageNumber = isNaN(+value) ? 1 : +value;
+	}
+
+	get pageNum() {
+		return this._pageNumber;
+	}
+
+	/** Sorting column */
+	@Input() sortingBy: {
+		sortBy?: string;
+		sortOrder?: string;
+	} = {};
+	@Input() queryParam? = {};
+
+	@Input() customFilters: {
+		params?: Record<string, any>;
+		payload?: Record<string, any>;
+	} = {};
+
+	@Input() quickFilter?;
+	/** Controls if it report page */
+	@Input() report;
+	/** to make cursor when hover on row or not */
+	@Input() rowCursor?;
+	@Input() fullWidth? = 'auto';
+	/** 'list' for noraml table 'card' for cards mode like in memos */
+	@Input() tableMode = 'list';
+
+	@Input() componentName: string;
+	/** action to be used in case of card mode */
+	@Input() tableActions;
+	@Input() defultSort: any = [{ prop: 'properties.createdAt', dir: 'desc' }];
+	@Input() range;
+	@Input() isSearchPage = false;
+	/** allow multiselect rows with checkbox */
+	@Input() multiSelectRows = false;
+	/** to show 1st row with custom template in the table*/
+	@Input() customFirstRow = false;
+	@Input() highlightSelectedCard = false;
+	@Input() showActionsAsMenu = false; // flage to show action in menu or side by side
+	@Input()
+	filterParams = {};
+
+	@Input() skipAggregation: 'never' | 'onPageChange' = 'onPageChange';
+	@Input() customUrl: { url: string; method: 'POST' | 'GET' };
+	@Input() format = 'MMMM d, y';
+
+	@Input() requestActions?: {
+		beforeSubmit?: EvaluatedString<'payload'>;
+	};
+
+	rows = [];
+	totalRecords = 0;
+	myDataSubscription: Subscription;
+	loading;
+	sorting = false;
+	@Input() pageSizes: Array<{ label: string; size: number }> = [];
+
+	initialized = false;
+
+	constructor(
+		private adapter: AdapterService,
+		private callApi: CallApiService,
+		private dynamicTableService: DynamicTableService,
+		private cdr: ChangeDetectorRef
+	) {}
+
+	ngOnInit(): void {
+		this.myDataSubscription = this.dynamicTableService.refreshData.pipe(startWith(null)).subscribe((filterData) => {
+			if (filterData) {
+				this.filterParams = { ...filterData };
+				// reset page number when start new filtering
+				this._resetPageNumber();
+			}
+			this.getData();
+		});
+	}
+
+	ngOnDestroy() {
+		this.myDataSubscription ? this.myDataSubscription.unsubscribe() : '';
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+		const isFirstChange = Object.values(changes).some((c) => c.isFirstChange());
+		if (isFirstChange) {
+			return;
+		}
+
+		const hasChanged = (items: string[]) =>
+			items.some((key) => {
+				const isEqual = _.isEqual(changes[key]?.previousValue || null, changes[key]?.currentValue || null);
+				return !isEqual;
+			});
+
+		if (hasChanged(['queryParam', 'quickFilter', 'customFilters'])) {
+			if (this.initialized) {
+				this._resetPageNumber(); // Reset page number before recalling API with filters
+			}
+			this.getData();
+		}
+
+		if (hasChanged(['sortingBy'])) {
+			this.getData();
+		}
+	}
+
+	private _resetPageNumber() {
+		this._pageNumber = 1;
+		this.onPageChange.emit(this._pageNumber);
+		this.onPage.emit({
+			pageIndex: this._pageNumber,
+			pageSize: this.pageSize,
+			length: this.totalRecords
+		});
+	}
+
+	getData(payload: Record<string, any> = {}, headers: Record<string, any> = {}) {
+		this.loading = true; // internal loading
+		this.onLoading.emit(true); // external loading
+		let params = {
+			...(this.range ? { dublincore_created_agg: this.range } : {}),
+			...this.filterParams, // used to get filter data and set it in our params
+			...this.queryParam, // used to get params from our config
+			...this.quickFilter,
+			...(Object.keys(this.sortingBy || {}).length
+				? {
+						sortBy: this.sortingBy?.sortBy,
+						sortOrder: this.sortingBy?.sortOrder
+					}
+				: {}),
+			currentPageIndex: +this.pageNum - 1,
+			...(this.pageSize ? { pageSize: this.pageSize } : {}),
+			offset: 0,
+			...payload
+		};
+
+		// don't refresh all table in case of sorting only
+		if (!this.sorting && this.isLegacyMode) {
+			// used to not refreshing all table in case of sorting since table lose sorting state when refresh all table
+			this.rows = []; // used to refresh table to feel changes in actions when perform action and need to refresh actions
+		}
+		this.sorting = false; // reset sorting status to false and for next sorting func sorting set it to true again
+
+		const _headers = {
+			...this.headers,
+			...headers
+		};
+
+		let _providerPayload = {
+			query: {
+				pageProvider: this.pageProvider,
+				...params
+			},
+			options: {
+				headers: _headers
+			}
+		};
+
+		let _customPayload = {
+			params: {
+				...params,
+				...(this.customFilters?.params || {})
+			},
+			headers: _headers,
+			payload: this.customFilters?.payload || {}
+		};
+
+		if (this.requestActions?.beforeSubmit && typeof this.requestActions?.beforeSubmit === 'string') {
+			try {
+				if (this.customUrl) {
+					_customPayload = Evaluator.evaluate(
+						this.requestActions?.beforeSubmit,
+						{ criteria: _customPayload },
+						'payload'
+					);
+				} else {
+					_providerPayload = Evaluator.evaluate(
+						this.requestActions?.beforeSubmit,
+						{ criteria: _providerPayload },
+						'payload'
+					);
+				}
+			} catch (e) {
+				console.error(e);
+			}
+		}
+
+		const query$ = this.customUrl
+			? this.callApi.customQuery(this.customUrl, _customPayload.params, _customPayload.headers, _customPayload.payload)
+			: this.callApi.query(_providerPayload.query, _providerPayload.options);
+
+		query$
+			.pipe(
+				map((data: any) => {
+					data.entries.map((item) => this.adapter.adaptIn(item, this.fields));
+					return data;
+				}),
+				catchError((err) => {
+					throw err;
+				})
+			)
+			.subscribe((res) => {
+				this.loading = false;
+				this.onLoading.emit(false);
+				this.onLoad.emit(res);
+				if (!this.initialized) {
+					this.onInitialize.emit(res);
+					this.initialized = true;
+				}
+				res.entries.forEach((element) => {
+					if (element.properties && element.properties?.creator && element.properties.creator?.properties) {
+						element.properties['creatorFullObject'] = { ...element.properties.creator };
+						element.properties.creator =
+							element.properties.creator?.properties?.firstName +
+							' ' +
+							element.properties.creator?.properties?.lastName;
+					}
+					if (element.properties && element.properties?.assignee) {
+						element.properties.assignee = element.properties?.assignee.fullName;
+					}
+				});
+				this.totalRecords = res.resultsCount;
+				this.rows = res.entries;
+				this.cdr.detectChanges();
+				// emit data to outside in case of search page for the first time only to prevent refreshing aggregation with every page change
+				// and for any other page type emit data directly in all page numbers
+				if ((this.isSearchPage && this.pageNum === 1) || !this.isSearchPage) this.onGettingData.emit(res);
+			});
+	}
+
+	// function to be executed when clicking on single row
+	rowDetails(event) {
+		this.onRowSelected.emit(event);
+	}
+
+	indexDetails(event) {
+		this.onRowIndexSelected.emit(event);
+	}
+
+	//function to handle all operations on single row (delete , edit , ...)
+	performAction(action) {
+		this.actionOnRow.emit(action);
+	}
+
+	// handle sorting functionality of the table
+	onSort(sortObject) {
+		this.sortChanged.emit(sortObject);
+		this.sortingBy = sortObject;
+		this.sorting = true;
+		this.getData({}, this.skipAggregation === 'onPageChange' ? { skipAggregates: 'true' } : {});
+	}
+
+	onMultiRowSelectValue(event) {
+		this.onMultiRowSelected.emit(event);
+	}
+
+	public paginationChange(event) {
+		this._pageNumber = event;
+		this.onPageChange.emit(event);
+		this.onPage.emit({
+			pageIndex: this._pageNumber,
+			pageSize: this.pageSize,
+			length: this.totalRecords
+		});
+		this.getData({}, this.skipAggregation === 'onPageChange' ? { skipAggregates: 'true' } : {});
+	}
+
+	onChangePageSize(pageSize: number) {
+		this.pageSize = pageSize;
+		this._resetPageNumber();
+		this.getData({}, this.skipAggregation === 'onPageChange' ? { skipAggregates: 'true' } : {});
+	}
+}

package/src/lib/components/tables/dynamic-table/dynamic-table.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicTableComponent } from './dynamic-table/dynamic-table.component';
+import { TableModule } from '../table';
+import { PaginationModule } from '../../pagination/pagination.module';
+import { LibrarySharedModule } from '../../../shared/libraryShared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { EmptyTemplateDirective } from './directives/empty-state.directive';
+import { SkeletonModule } from '../../skeleton';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+/**
+ * @title
+ * Dynamic Table API
+ */
+@NgModule({
+	declarations: [DynamicTableComponent, EmptyTemplateDirective],
+	imports: [
+		CommonModule,
+		TableModule,
+		PaginationModule,
+		LibrarySharedModule,
+		TranslateModule,
+		SkeletonModule,
+		MatProgressSpinnerModule
+	],
+	exports: [DynamicTableComponent, EmptyTemplateDirective]
+})
+export class DynamicTableModule {}

package/src/lib/components/tables/dynamic-table/services/dynamic-table.service.ts

@@ -0,0 +1,9 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DynamicTableService {
+  refreshData = new EventEmitter();
+  constructor() { }
+}

package/src/lib/components/tables/ndf-table/components/mode-toggler/mode-toggler.component.html

@@ -0,0 +1,9 @@
+<mat-button-toggle-group [value]="mode" (change)="changeMode($event)" class="mode-toggle__group">
+	<mat-button-toggle
+		*ngFor="let item of modesList"
+		[value]="item.value"
+		[title]="item?.key ? (item.key | translate) : ''"
+	>
+		<mat-icon>{{ item.icon }}</mat-icon>
+	</mat-button-toggle>
+</mat-button-toggle-group>

package/src/lib/components/tables/ndf-table/components/mode-toggler/mode-toggler.component.scss

@@ -0,0 +1,9 @@
+::ng-deep {
+	.mode-toggle {
+		&__group {
+			.mat-button-toggle-label-content {
+				line-height: var(--toggle-line-height, 36px);
+			}
+		}
+	}
+}

package/src/lib/components/tables/ndf-table/components/mode-toggler/mode-toggler.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { TableModeList, TableViewMode } from '../../models';
+
+
+const MODES: TableModeList = [
+	{
+		key: 'list',
+		value: 'list',
+		icon: 'table_rows'
+	}
+];
+
+
+@Component({
+	selector: 'mode-toggler',
+	templateUrl: './mode-toggler.component.html',
+	styleUrls: ['./mode-toggler.component.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'mode-toggle'
+	}
+})
+export class ModeTogglerComponent implements OnInit {
+	@Input() modesList: TableModeList = MODES;
+	@Input() mode: TableViewMode;
+	@Output() modeChanged = new EventEmitter<TableViewMode>();
+
+	ngOnInit(): void {}
+
+	changeMode(event: MatButtonToggleChange) {
+		this.mode = event.value;
+		this.modeChanged.emit(event.value);
+	}
+}

package/src/lib/components/tables/ndf-table/components/sorting-list/sorting-list.component.html

@@ -0,0 +1,11 @@
+<button mat-stroked-button [matMenuTriggerFor]="menu" class="sort-list__button">
+	<mat-icon inline> sort </mat-icon>
+	{{ 'TABLE.sortBy' | translate }}
+</button>
+<mat-menu #menu="matMenu" class="p-0" xPosition="before">
+	<span [dir]="direction" class="sort-list__menu">
+		<button mat-menu-item *ngFor="let item of sortList" (click)="changeSort(item)" [class.selected]="item.selected">
+			{{ item.key | translate }}
+		</button>
+	</span>
+</mat-menu>

package/src/lib/components/tables/ndf-table/components/sorting-list/sorting-list.component.scss

@@ -0,0 +1,10 @@
+.sort-list {
+	&__menu {
+		max-height: var(--sort-max-height, 250px);
+		overflow-y: auto;
+		.mat-menu-item {
+			line-height: var(--sort-item-height, 36px);
+			height: var(--sort-item-height, 36px);
+		}
+	}
+}

package/src/lib/components/tables/ndf-table/components/sorting-list/sorting-list.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { BaseComponent } from '../../../../../shared/components';
+import { SortTableItem } from '../../models';
+
+@Component({
+	selector: 'table-sorting-list',
+	templateUrl: './sorting-list.component.html',
+	styleUrls: ['./sorting-list.component.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		class: 'sort-list'
+	}
+})
+export class SortingListComponent extends BaseComponent implements OnInit {
+	@Input() sortList: SortTableItem[];
+	@Output() sortChanged = new EventEmitter<SortTableItem>();
+
+	ngOnInit(): void {}
+
+	changeSort(item: SortTableItem) {
+		this.sortList.forEach((itm) => {
+			itm.selected = item.key === itm.value;
+		});
+		this.sortChanged.emit(item);
+		this.cdr.detectChanges();
+	}
+}

package/src/lib/components/tables/ndf-table/components/table-columns-toggler/table-columns-toggler.component.html

@@ -0,0 +1,67 @@
+<button mat-stroked-button [matMenuTriggerFor]="menu" class="columns-toggler__button">
+	<mat-icon inline> tune </mat-icon>
+	{{ 'TABLE.toggleColumns' | translate }}
+</button>
+<mat-menu #menu="matMenu" class="p-0" xPosition="before">
+	<div
+		class="flex justify-between mb-2 columns-toggler__all top-0 pb-2 px-3"
+		(click)="$event.stopPropagation()"
+	>
+		<mat-checkbox
+			*ngIf="!!columns?.length && !enableSorting"
+			(change)="onCheckAllChange($event)"
+			[checked]="columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length"
+			[indeterminate]="columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length"
+		>
+			{{ 'FILTERS.all' | translate }}
+		</mat-checkbox>
+
+		<button class="action-btn apply-sorting-btn" *ngIf="enableSorting" (click)="applySort()">
+			{{ 'TABLE.applySorting' | translate }}
+		</button>
+
+		<mat-icon
+			role="button"
+			(click)="toggleSorting()"
+			*ngIf="sortEnabled"
+			[title]="(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate"
+			[matTooltip]="(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate"
+			class="columns-toggler__sort-icon"
+		>
+			{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}
+		</mat-icon>
+	</div>
+
+	<ul
+		class="columns-toggler__columns py-2 px-3"
+		(click)="$event.stopPropagation()"
+		[dir]="direction"
+		cdkDropList
+		[cdkDropListDisabled]="!enableSorting && !sortEnabled"
+		(cdkDropListDropped)="drop($event)"
+	>
+		<li
+			*ngFor="let col of columns"
+			class="mb-2 column-control"
+			cdkDrag
+			[cdkDragDisabled]="!enableSorting"
+			[class.sorting-enabled]="enableSorting"
+			[class.column-control__hidden]="!columnsSelection.isSelected(col)"
+		>
+			<mat-checkbox [checked]="columnsSelection.isSelected(col)" (change)="columnsSelection.toggle(col)">
+				{{ prefix + col.name | translate }}
+			</mat-checkbox>
+		</li>
+	</ul>
+	<ul
+		class="columns-toggler__frozen-columns py-2 px-3"
+		(click)="$event.stopPropagation()"
+		*ngIf="sortEnabled && frozenColumns?.length"
+	>
+		<li *ngFor="let col of frozenColumns" class="column-control">
+			<mat-checkbox [checked]="columnsSelection.isSelected(col)" (change)="columnsSelection.toggle(col)">
+				{{ prefix + col.name | translate }}
+			</mat-checkbox>
+		</li>
+	</ul>
+</mat-menu>

package/src/lib/components/tables/ndf-table/components/table-columns-toggler/table-columns-toggler.component.scss

@@ -0,0 +1,72 @@
+.columns-toggler {
+	&__all {
+    border-bottom: var(--columns-toggler-border ,solid #f0f0f0);
+	}
+	&__sort-icon {
+		color: var(--sort-icon-color, #000);
+	}
+	&__columns {
+		max-height: var(--cols-max-height, 275px);
+		overflow-y: auto;
+		.check-all-box {
+			background: var(--check-background-color, #fff);
+		}
+
+		.column-control {
+			&.sorting-enabled {
+				::ng-deep {
+					&,
+					.mat-checkbox-label {
+						cursor: move;
+					}
+				}
+				&.cdk-drag-disabled {
+					cursor: not-allowed;
+					background: var(--drag-disabled-background, transparent);
+					box-shadow: 0 0 0 3px var(--drag-disabled-background, transparent);
+				}
+			}
+			&__hidden {
+				opacity: 0.7;
+			}
+
+			&.cdk-drag-preview {
+				box-sizing: border-box;
+				list-style: none;
+				background: var(--secondary-color);
+				box-shadow: var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8);
+			}
+		}
+
+		.cdk-drag-placeholder {
+			opacity: 0;
+		}
+	}
+
+	&__frozen-columns {
+		border-top: var(--frozen-cols-border-top, 2px solid #ccc);
+		max-height: var(--frozen-cols--max-height, 150px);
+		overflow-y: auto;
+	}
+}
+
+::ng-deep {
+	.column-control {
+		&.cdk-drag-preview {
+			box-sizing: border-box;
+			list-style: none;
+			background: var(--secondary-color);
+			box-shadow: var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8);
+		}
+	}
+	.cdk-drag-animating {
+		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+	}
+}
+.columns-toggler__sort-icon {
+	color: var(--icon-color) !important;
+}
+.apply-sorting-btn {
+	background-color: var(--logo-button-bg);
+	color: var(--main-text);
+}