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

Revert ACS-8113 (#9910)

Browse Source 
* Revert "Add new datatable param for checkboxes visibility (#9908)"

This reverts commit 55dfc07a24.

* Revert "[ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#9861)"

This reverts commit a48611eb92.

* [ci:force]

* [ci:force]
This commit is contained in:
Pablo Martinez
2024-07-04 08:28:38 +02:00
committed by GitHub
parent 55dfc07a24
commit 640b8b17a2
14 changed files with 63 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/breadcrumb/breadcrumb.component.html
View File

@@ -57,7 +57,7 @@
</a>
<div *ngSwitchDefault class="adf-breadcrumb-item-current" aria-current="location">
{{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
{{ item.name | translate }}
</div>
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">

25
lib/content-services/src/lib/breadcrumb/breadcrumb.component.spec.ts
View File

@@ -33,9 +33,6 @@ describe('Breadcrumb', () => {
});
let documentListComponent: DocumentListComponent;
const getBreadcrumbActionText = (): string =>
fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim();
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ContentTestingModule],
@@ -303,26 +300,4 @@ describe('Breadcrumb', () => {
expect(component.route[3].id).toBe('test-id');
expect(component.route[3].name).toBe('test-name');
});
it('should set title based on selectedRowItemsCount', () => {
component.transform = (transformNode) => {
transformNode.id = 'test-id';
transformNode.name = 'test-name';
return transformNode;
};
component.folderNode = {
path: { elements: [{ id: 'element-1-id', name: 'element-1-name' }] }
} as Node;
component.ngOnChanges();
fixture.detectChanges();
expect(getBreadcrumbActionText()).toEqual('test-name');
component.selectedRowItemsCount = 2;
fixture.detectChanges();
expect(getBreadcrumbActionText()).toEqual('BREADCRUMB.HEADER.SELECTED');
});
});

4
lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
View File

@@ -72,10 +72,6 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
@Input()
maxItems: number;
/** Number of table rows that are currently selected. */
@Input()
selectedRowItemsCount = 0;
previousNodes: PathElement[];
lastNodes: PathElement[];

2
lib/content-services/src/lib/document-list/components/document-list.component.html
View File

@@ -17,13 +17,11 @@
[allowFiltering]="allowFiltering"
[isResizingEnabled]="isResizingEnabled"
[blurOnResize]="blurOnResize"
[displayCheckboxesOnHover]="displayCheckboxesOnHover"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(columnsWidthChanged)="onColumnsWidthChange($event)"
(columnOrderChanged)="onColumnOrderChange($event)"
(selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
(rowClick)="onNodeClick($event.value?.node)"
(rowDblClick)="onNodeDblClick($event.value?.node)"
(row-select)="onNodeSelect($any($event).detail)"

6
lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
View File

@@ -1468,12 +1468,6 @@ describe('DocumentList', () => {
expect(documentList.reload).not.toHaveBeenCalled();
});
it('should emit custom date range on date picker closed', () => {
const selectedItemsCountChangedSpy = spyOn(documentList.selectedItemsCountChanged, 'emit');
documentList.onSelectedItemsCountChanged(1);
expect(selectedItemsCountChangedSpy).toHaveBeenCalledWith(1);
});
it('should add includeFields in the server request when present', () => {
documentList.includeFields = ['test-include'];
documentList.currentFolderId = 'fake-id';

12
lib/content-services/src/lib/document-list/components/document-list.component.ts
View File

@@ -340,10 +340,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Input()
blurOnResize = true;
/** Display checkboxes in datatable rows on hover only */
@Input()
displayCheckboxesOnHover = false;
/** Emitted when the user clicks a list node */
@Output()
nodeClick = new EventEmitter<NodeEntityEvent>();
@@ -392,10 +388,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Output()
columnsOrderChanged = new EventEmitter<string[] | undefined>();
/** Emitted when the selected row items count in the table changed. */
@Output()
selectedItemsCountChanged = new EventEmitter<number | undefined>();
@ViewChild('dataTable', { static: true })
dataTable: DataTableComponent;
@@ -840,10 +832,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
this.columnsWidthChanged.emit(this.columnsWidths);
}
onSelectedItemsCountChanged(count: number) {
this.selectedItemsCountChanged.emit(count);
}
onNodeClick(nodeEntry: NodeEntry) {
const domEvent = new CustomEvent('node-click', {
detail: {

3
lib/content-services/src/lib/i18n/en.json
View File

@@ -662,9 +662,6 @@
"ARIA-LABEL": {
"BREADCRUMB": "Breadcrumb",
"DROPDOWN": "Dropdown"
},
"HEADER": {
"SELECTED": "Selected ({{ count }})"
}
},
"NAME_COLUMN_LINK": {

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

@@ -21,7 +21,7 @@
</div>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox-cell">
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
</div>
@@ -182,11 +182,9 @@
</mat-menu>
</div>
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox-cell adf-datatable-checkbox-single">
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
<mat-checkbox
[id]="'select-file-' + idx"
[class.adf-datatable-checkbox-selected]="row.isSelected"
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
role="checkbox"

28
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@@ -158,28 +158,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: flex;
align-items: center;
&:hover {
.adf-datatable-hover-only {
visibility: visible;
}
}
.adf-datatable-hover-only {
visibility: hidden;
&.adf-datatable-checkbox-selected {
visibility: visible;
}
}
.adf-datatable-checkbox-cell {
.adf-datatable-checkbox {
max-width: $data-table-thumbnail-width;
width: $data-table-thumbnail-width;
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-datatable-checkbox-cell {
.adf-datatable-checkbox {
padding-top: 15px;
}
}
@@ -297,11 +283,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
padding-right: 15px;
}
.adf-datatable-checkbox-cell {
display: flex;
justify-content: center;
}
.adf-cell-value {
display: flex;
min-height: inherit;
@@ -451,8 +432,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: none;
}
/* stylelint-disable media-feature-range-notation */
/* mobile phone */
@media all and (max-width: 768px) {
.adf-desktop-only.adf-ellipsis-cell {
@@ -578,7 +557,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
}
/* stylelint-disable selector-class-pattern */
.cdk-drag-preview {
&.adf-datatable-cell-header {
border-radius: 6px;
@@ -642,7 +620,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
align-items: center;
height: inherit;
.adf-datatable-body[role='rowgroup'] {
.adf-datatable-body[role="rowgroup"] {
.adf-datatable-row {
height: 100%;
background-color: var(--adf-theme-background-card-color);

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

@@ -154,7 +154,6 @@ describe('DataTable', () => {
});
it('should preserve the historical selection order', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
const rows = dataTable.data.getRows();
@@ -167,25 +166,6 @@ describe('DataTable', () => {
expect(selection[0].getValue('id')).toBe(2);
expect(selection[1].getValue('id')).toBe(0);
expect(selection[2].getValue('id')).toBe(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(3);
});
it('should selectedItemsCountChanged be emitted 4 times', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
const rows = dataTable.data.getRows();
dataTable.selectRow(rows[2], true);
dataTable.selectRow(rows[0], true);
dataTable.selectRow(rows[1], true);
dataTable.selectRow(rows[1], false);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(3);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(4);
});
it('should update schema if columns change', fakeAsync(() => {
@@ -557,7 +537,6 @@ describe('DataTable', () => {
});
it('should unselect the row searching it by row id, when row id is defined', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
const findSelectionByIdSpy = spyOn(dataTable, 'findSelectionById');
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
@@ -573,8 +552,6 @@ describe('DataTable', () => {
expect(indexOfSpy).not.toHaveBeenCalled();
expect(findSelectionByIdSpy).toHaveBeenCalledWith(fakeDataRows[0].id);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
});
it('should unselect the row by searching for the exact same reference of it (indexOf), when row id is not defined ', () => {
@@ -892,7 +869,7 @@ describe('DataTable', () => {
dataTable.multiselect = true;
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(false);
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);
@@ -1329,36 +1306,6 @@ describe('DataTable', () => {
expect(rows[1].getValue('icon')).toBe('directions_car');
expect(rows[2].getValue('icon')).toBe('local_shipping');
});
describe('displayCheckboxesOnHover', () => {
const getCheckboxes = () =>
fixture.debugElement.queryAll(By.css('.adf-datatable-checkbox-single .adf-checkbox-sr-only')).map((row) => row.nativeElement);
beforeEach(() => {
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
dataTable.multiselect = true;
});
it('should always display checkboxes when displayCheckboxesOnHover is set to false', () => {
dataTable.displayCheckboxesOnHover = false;
fixture.detectChanges();
const checkboxes = getCheckboxes();
checkboxes.forEach((checkbox) => {
expect(checkbox.classList).not.toContain('adf-datatable-hover-only');
});
});
it('should display checkboxes on hover when displayCheckboxesOnHover is set to true', () => {
dataTable.displayCheckboxesOnHover = true;
fixture.detectChanges();
const checkboxes = getCheckboxes();
checkboxes.forEach((checkbox) => {
expect(checkbox.classList).toContain('adf-datatable-hover-only');
});
});
});
});
describe('Accesibility', () => {

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

@@ -191,10 +191,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Output()
columnsWidthChanged = new EventEmitter<DataColumn[]>();
/** Emitted when the selected row items count in the table changed. */
@Output()
selectedItemsCountChanged = new EventEmitter<number>();
/**
* 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).
@@ -238,12 +234,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Input()
blurOnResize = true;
/**
* Flag that indicates if selection checkboxes inside row should be displayed on hover only.
*/
@Input()
displayCheckboxesOnHover = false;
headerFilterTemplate: TemplateRef<any>;
noContentTemplate: TemplateRef<any>;
noPermissionTemplate: TemplateRef<any>;
@@ -526,37 +516,34 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (!this.data) {
return;
}
if (this.isSingleSelectionMode()) {
if (row.isSelected) {
this.resetSelection();
this.emitRowSelectionEvent('row-unselect', null);
} else {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
if (this.data) {
if (this.isSingleSelectionMode()) {
if (row.isSelected) {
this.resetSelection();
this.emitRowSelectionEvent('row-unselect', null);
} else {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
}
}
}
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
let newValue: boolean;
if (this.selection.length === 1) {
newValue = !row.isSelected;
} else {
newValue = modifier ? !row.isSelected : true;
}
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
let newValue: boolean;
if (this.selection.length === 1) {
newValue = !row.isSelected;
} else {
newValue = modifier ? !row.isSelected : true;
}
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (!modifier) {
this.resetSelection();
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
this.checkSelectAllCheckboxState();
}
}
@@ -685,8 +672,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.isSelectAllChecked = true;
this.isSelectAllIndeterminate = false;
} else if (numberOfSelectedRows > 0 && numberOfSelectedRows < rows.length) {
this.isSelectAllChecked = false;
this.isSelectAllIndeterminate = true;
this.isSelectAllChecked = true;
} else {
this.isSelectAllChecked = false;
this.isSelectAllIndeterminate = false;
@@ -812,8 +799,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.selection.splice(idx, 1);
}
}
this.selectedItemsCountChanged.emit(this.selection.length);
}
}