inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-12578 added fn to save col width with preferences (#8296)

Browse Source 
* AAE-12578 added fn to save col width with preferences Resolved Conflict

* AAE-12578 fixed formatting issues

* Empty-Commit

* AAE-12578 added resizing column feature to process list

* AAE-12578: Removed duplicate component entry

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
This commit is contained in:
tomasz hanaj
2023-02-20 16:11:16 +01:00
committed by GitHub
parent b876102098
commit 477d49eaee
11 changed files with 128 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -31,7 +31,7 @@
let col of (data.getColumns() | filterOutEvery:'isHidden':true);
let columnIndex = index"
[attr.data-automation-id]="'auto_id_' + col.key"
[ngClass]="{
[ngClass]="{
'adf-sortable': col.sortable,
'adf-datatable__cursor--pointer': !isResizing,
'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
@@ -58,7 +58,7 @@
#resizableElement="adf-resizable"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="isResizing = true"
(resizeEnd)="isResizing = false"
(resizeEnd)="onResizingEnd()"
[attr.data-automation-id]="'auto_header_content_id_' + col.key"
class="adf-datatable-cell-header-content"
[ngClass]="{ 'adf-datatable-cell-header-content--hovered':
@@ -93,7 +93,7 @@
[class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
</span>
</div>
<div
<div
*ngIf="isResizingEnabled"
adf-resize-handle
class="adf-datatable__resize-handle"

24
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -1982,4 +1982,28 @@ describe('Column Resizing', () => {
expect(dataTable.isResizing).toBeFalse();
expect(tableBody.classList).not.toContain('adf-blur-datatable-body');
});
it('should emit on columns width change when resizing ends', () => {
spyOn(dataTable.columnsWidthChanged,'emit');
dataTable.isResizingEnabled = true;
fixture.detectChanges();
const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
fixture.detectChanges();
expect(dataTable.isResizing).toBeTrue();
resizeHandle.dispatchEvent(new MouseEvent('mousemove'));
fixture.detectChanges();
resizeHandle.dispatchEvent(new MouseEvent('mouseup'));
fixture.detectChanges();
expect(dataTable.isResizing).toBeFalse();
expect(dataTable.columnsWidthChanged.emit).toHaveBeenCalled();
});
});

9
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@@ -175,6 +175,9 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Output()
columnOrderChanged = new EventEmitter<DataColumn[]>();
@Output()
columnsWidthChanged = new EventEmitter<DataColumn[]>();
/** Flag that indicates if the datatable is in loading state and needs to show the
* loading template (see the docs to learn how to configure a loading template).
*/
@@ -935,6 +938,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
allColumns[colIndex].width = width;
this.data.setColumns(allColumns);
}
onResizingEnd(): void {
this.isResizing = false;
const allColumns = this.data.getColumns();
this.columnsWidthChanged.emit(allColumns);
}
}
export interface DataTableDropEvent {

14
lib/core/src/lib/datatable/data/data-table.schema.ts
View File

@@ -39,6 +39,7 @@ export abstract class DataTableSchema<T = unknown> {
protected columnsOrderedByKey: string = 'id';
protected columnsVisibility: { [columnId: string]: boolean } | undefined;
protected columnsWidths: { [columnId: string]: number} | undefined;
private layoutPresets = {};
@@ -62,7 +63,8 @@ export abstract class DataTableSchema<T = unknown> {
public createColumns(): void {
const allColumns = this.mergeJsonAndHtmlSchema();
const columns = this.setHiddenColumns(allColumns);
const allColumnsWithWidth = this.setColumnsWidth(allColumns);
const columns = this.setHiddenColumns(allColumnsWithWidth);
this.columns = this.sortColumnsByKey(columns);
}
@@ -144,4 +146,14 @@ export abstract class DataTableSchema<T = unknown> {
return columns;
}
private setColumnsWidth(columns: DataColumn[]): DataColumn[] {
if(this.columnsWidths) {
return columns.map(column => {
const columnWidth = this.columnsWidths[column.id];
return columnWidth === undefined ? column : {...column, width:columnWidth};
});
}
return columns;
}
}

2
lib/core/src/lib/datatable/data/object-datacolumn.model.ts
View File

@@ -36,6 +36,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
draggable: boolean;
isHidden: boolean;
customData?: T;
width?: number;
constructor(input: any) {
this.id = input.id ?? '';
@@ -54,5 +55,6 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
this.draggable = input.draggable ?? false;
this.isHidden = input.isHidden ?? false;
this.customData = input.customData;
this.width = input.width;
}
}

4
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
View File

@@ -20,7 +20,9 @@
(row-unselect)="onRowUnselect($any($event))"
(row-keyup)="onRowKeyUp($any($event))"
(sorting-changed)="onSortingChanged($any($event))"
(columnOrderChanged)="onColumnOrderChanged($event)">
(columnOrderChanged)="onColumnOrderChanged($event)"
(columnsWidthChanged)="onColumnsWidthChanged($event)"
>
<adf-loading-content-template>
<ng-template>
<mat-progress-spinner

28
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
View File

@@ -238,14 +238,16 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
const preferencesList = preferences?.list?.entries ?? [];
const columnsOrder = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnOrder);
const columnsVisibility = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnsVisibility);
const columnsWidths = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnsWidths);
return {
columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined,
columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : this.columnsVisibility
columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : this.columnsVisibility,
columnsWidths: columnsWidths ? JSON.parse(columnsWidths.entry.value) : undefined
};
}))
)
.subscribe(({ columnsOrder, columnsVisibility }) => {
.subscribe(({ columnsOrder, columnsVisibility, columnsWidths }) => {
if (columnsVisibility) {
this.columnsVisibility = columnsVisibility;
}
@@ -254,6 +256,11 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
this.columnsOrder = columnsOrder;
}
if (columnsWidths) {
this.columnsWidths = columnsWidths;
}
this.createDatatableSchema();
});
}
@@ -385,6 +392,23 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
}
}
onColumnsWidthChanged(columns: DataColumn[]): void {
this.columnsWidths = columns.reduce((widthsColumnsMap, column) => {
if (column.width) {
widthsColumnsMap[column.id] = Math.ceil(column.width);
}
return widthsColumnsMap;
}, {});
if (this.appName) {
this.cloudPreferenceService.updatePreference(
this.appName,
ProcessListCloudPreferences.columnsWidths,
this.columnsWidths
);
}
}
onRowClick(item: DataRowEvent) {
this.currentInstanceId = item.value.getValue('id');
this.rowClick.emit(this.currentInstanceId);

3
lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts
View File

@@ -18,5 +18,6 @@
// eslint-disable-next-line no-shadow
export enum ProcessListCloudPreferences {
columnOrder = 'processes-cloud-list-columns-order',
columnsVisibility = 'processes-cloud-columns-visibility'
columnsVisibility = 'processes-cloud-columns-visibility',
columnsWidths = 'processes-cloud-columns-widths'
}

4
lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html
View File

@@ -23,7 +23,9 @@
(rowClick)="onRowClick($any($event))"
(row-keyup)="onRowKeyUp($any($event))"
(sorting-changed)="onSortingChanged($any($event))"
(columnOrderChanged)="onColumnOrderChanged($event)">
(columnOrderChanged)="onColumnOrderChanged($event)"
(columnsWidthChanged)="onColumnsWidthChanged($event)"
>
<adf-loading-content-template>
<ng-template>
<!-- Add your custom loading template here -->

59
lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts
View File

@@ -130,10 +130,10 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
private onDestroy$ = new Subject<boolean>();
constructor(appConfigService: AppConfigService,
private taskCloudService: TaskCloudService,
private userPreferences: UserPreferencesService,
presetKey: string,
private cloudPreferenceService: PreferenceCloudServiceInterface) {
private taskCloudService: TaskCloudService,
private userPreferences: UserPreferencesService,
presetKey: string,
private cloudPreferenceService: PreferenceCloudServiceInterface) {
super(appConfigService, presetKey, taskPresetsCloudDefaultModel);
this.size = userPreferences.paginationSize;
@@ -172,23 +172,29 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
const preferencesList = preferences?.list?.entries ?? [];
const columnsOrder = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnOrder);
const columnsVisibility = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnsVisibility);
const columnsWidths = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnsWidths);
return {
columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined,
columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined
columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined,
columnsWidths: columnsWidths ? JSON.parse(columnsWidths.entry.value) : undefined
};
}))
).subscribe(({ columnsOrder, columnsVisibility }) => {
if (columnsOrder) {
this.columnsOrder = columnsOrder;
}
if (columnsVisibility) {
this.columnsVisibility = columnsVisibility;
}
this.createDatatableSchema();
).subscribe(({ columnsOrder, columnsVisibility, columnsWidths }) => {
if (columnsOrder) {
this.columnsOrder = columnsOrder;
}
if (columnsVisibility) {
this.columnsVisibility = columnsVisibility;
}
if (columnsWidths) {
this.columnsWidths = columnsWidths;
}
this.createDatatableSchema();
}
);
}
@@ -266,7 +272,7 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
this.columnsOrder = columnsWithNewOrder.map(column => column.id);
if (this.appName) {
this.cloudPreferenceService.updatePreference(
this.cloudPreferenceService.updatePreference(
this.appName,
TasksListCloudPreferences.columnOrder,
this.columnsOrder
@@ -296,6 +302,23 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
this.reload();
}
onColumnsWidthChanged(columns: DataColumn[]): void {
this.columnsWidths = columns.reduce((widthsColumnsMap, column) => {
if (column.width) {
widthsColumnsMap[column.id] = Math.ceil(column.width);
}
return widthsColumnsMap;
}, {});
if (this.appName) {
this.cloudPreferenceService.updatePreference(
this.appName,
TasksListCloudPreferences.columnsWidths,
this.columnsWidths
);
}
}
setSorting(sortDetail) {
const sorting = sortDetail ? {
orderBy: sortDetail.key,
@@ -317,10 +340,10 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
replacePriorityValues(row: DataRow, column: DataColumn) {
return column.key.split('.').reduce((source, key) => {
if (key === 'priority' && source && typeof(source[key]) === 'number') {
if (key === 'priority' && source && typeof (source[key]) === 'number') {
return source[key] = this.taskCloudService.getPriorityLabel(source[key]);
}
return source && typeof(source) === 'object' ? source[key] : undefined;
return source && typeof (source) === 'object' ? source[key] : undefined;
}, row.obj);
}

3
lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts
View File

@@ -18,5 +18,6 @@
// eslint-disable-next-line no-shadow
export enum TasksListCloudPreferences {
columnOrder = 'tasks-list-cloud-columns-order',
columnsVisibility = 'tasks-list-cloud-columns-visibility'
columnsVisibility = 'tasks-list-cloud-columns-visibility',
columnsWidths = 'tasks-list-cloud-columns-widths'
}