mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
AAE-27309 Add selectable property to datatable row (#10368)
* AAE-27309 Add selectable property to datatable row * AAE-27309 Update documentation
This commit is contained in:
parent
258f01803c
commit
db22c6aac9
@ -81,6 +81,7 @@ An array of [`DataRow`](../../../lib/core/src/lib/datatable/data/data-row.model.
|
|||||||
```ts
|
```ts
|
||||||
interface DataRow {
|
interface DataRow {
|
||||||
isSelected: boolean;
|
isSelected: boolean;
|
||||||
|
isSelectable?: boolean;
|
||||||
isDropTarget?: boolean;
|
isDropTarget?: boolean;
|
||||||
cssClass?: string;
|
cssClass?: string;
|
||||||
hasValue(key: string): boolean;
|
hasValue(key: string): boolean;
|
||||||
|
@ -213,6 +213,7 @@
|
|||||||
tabindex="0">
|
tabindex="0">
|
||||||
<mat-checkbox
|
<mat-checkbox
|
||||||
[id]="'select-file-' + idx"
|
[id]="'select-file-' + idx"
|
||||||
|
[disabled]="!row?.isSelectable"
|
||||||
[class.adf-datatable-checkbox-selected]="row.isSelected"
|
[class.adf-datatable-checkbox-selected]="row.isSelected"
|
||||||
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
|
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
|
||||||
[checked]="row.isSelected"
|
[checked]="row.isSelected"
|
||||||
|
@ -919,6 +919,34 @@ describe('DataTable', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should update only selectable rows on "select all" click', () => {
|
||||||
|
const data = new ObjectDataTableAdapter([{}, {}, {}], []);
|
||||||
|
const rows = data.getRows();
|
||||||
|
|
||||||
|
rows[0].isSelectable = false;
|
||||||
|
|
||||||
|
dataTable.data = data;
|
||||||
|
dataTable.multiselect = true;
|
||||||
|
dataTable.ngAfterContentInit();
|
||||||
|
|
||||||
|
dataTable.onSelectAllClick({ checked: true } as MatCheckboxChange);
|
||||||
|
expect(dataTable.isSelectAllChecked).toBe(true);
|
||||||
|
for (let i = 0; i < rows.length; i++) {
|
||||||
|
if (i === 0) {
|
||||||
|
expect(rows[i].isSelected).toBe(false);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(rows[i].isSelected).toBe(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
dataTable.onSelectAllClick({ checked: false } as MatCheckboxChange);
|
||||||
|
expect(dataTable.isSelectAllChecked).toBe(false);
|
||||||
|
for (let i = 0; i < rows.length; i++) {
|
||||||
|
expect(rows[i].isSelected).toBe(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
it('should allow "select all" calls with no rows', () => {
|
it('should allow "select all" calls with no rows', () => {
|
||||||
dataTable.multiselect = true;
|
dataTable.multiselect = true;
|
||||||
dataTable.ngOnChanges({ data: new SimpleChange('123', {}, true) });
|
dataTable.ngOnChanges({ data: new SimpleChange('123', {}, true) });
|
||||||
|
@ -446,7 +446,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
|||||||
}
|
}
|
||||||
|
|
||||||
convertToRowsData(rows: any[]): ObjectDataRow[] {
|
convertToRowsData(rows: any[]): ObjectDataRow[] {
|
||||||
return rows.map((row) => new ObjectDataRow(row, row.isSelected));
|
return rows.map((row) => new ObjectDataRow(row, row.isSelected, row?.isSelectable));
|
||||||
}
|
}
|
||||||
|
|
||||||
convertToColumnsData(columns: any[]): ObjectDataColumn[] {
|
convertToColumnsData(columns: any[]): ObjectDataColumn[] {
|
||||||
@ -589,7 +589,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
|||||||
}
|
}
|
||||||
|
|
||||||
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
|
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
|
||||||
if (!this.data) {
|
if (!this.data || !row?.isSelectable) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -713,10 +713,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
|||||||
this.isSelectAllIndeterminate = false;
|
this.isSelectAllIndeterminate = false;
|
||||||
|
|
||||||
if (this.multiselect) {
|
if (this.multiselect) {
|
||||||
const rows = this.data.getRows();
|
const selectableRows = this.data.getRows().filter(row => row?.isSelectable);
|
||||||
if (rows && rows.length > 0) {
|
if (selectableRows && selectableRows.length > 0) {
|
||||||
for (let i = 0; i < rows.length; i++) {
|
for (let i = 0; i < selectableRows.length; i++) {
|
||||||
this.selectRow(rows[i], matCheckboxChange.checked);
|
this.selectRow(selectableRows[i], matCheckboxChange.checked);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@ export interface DataRow {
|
|||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
|
|
||||||
isSelected: boolean;
|
isSelected: boolean;
|
||||||
|
isSelectable?: boolean;
|
||||||
isDropTarget?: boolean;
|
isDropTarget?: boolean;
|
||||||
cssClass?: string;
|
cssClass?: string;
|
||||||
id?: string;
|
id?: string;
|
||||||
|
@ -21,7 +21,7 @@ import { DataRow } from './data-row.model';
|
|||||||
// Simple implementation of the DataRow interface.
|
// Simple implementation of the DataRow interface.
|
||||||
export class ObjectDataRow implements DataRow {
|
export class ObjectDataRow implements DataRow {
|
||||||
|
|
||||||
constructor(private obj: any, public isSelected: boolean = false) {
|
constructor(private obj: any, public isSelected: boolean = false, public isSelectable: boolean = true) {
|
||||||
if (!obj) {
|
if (!obj) {
|
||||||
throw new Error('Object source not found');
|
throw new Error('Object source not found');
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user