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

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

Browse Source
This commit is contained in:
jacekpluta
2024-06-30 23:11:29 +02:00
committed by GitHub
parent 3cc571ee32
commit a48611eb92
14 changed files with 168 additions and 64 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">
{{ item.name | translate }}
{{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
</div>
<mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">

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

@@ -33,6 +33,9 @@ describe('Breadcrumb', () => {
});
let documentListComponent: DocumentListComponent;
const getBreadcrumbActionText = (): string =>
fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim();
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ContentTestingModule],
@@ -300,4 +303,26 @@ 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,6 +72,10 @@ 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[];

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

@@ -22,6 +22,7 @@
(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,6 +1468,12 @@ 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';

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

@@ -388,6 +388,10 @@ 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;
@@ -832,6 +836,10 @@ 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,6 +662,9 @@
"ARIA-LABEL": {
"BREADCRUMB": "Breadcrumb",
"DROPDOWN": "Dropdown"
},
"HEADER": {
"SELECTED": "Selected ({{ count }})"
}
},
"NAME_COLUMN_LINK": {

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

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

@@ -158,14 +158,30 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: flex;
align-items: center;
.adf-datatable-checkbox {
&:hover {
.adf-datatable-checkbox-cell {
&.adf-datatable-checkbox-single {
visibility: visible;
}
}
}
.adf-datatable-checkbox-single {
visibility: hidden;
&:has(.adf-datatable-checkbox-selected) {
visibility: visible;
}
}
.adf-datatable-checkbox-cell {
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 {
.adf-datatable-checkbox-cell {
padding-top: 15px;
}
}
@@ -283,6 +299,11 @@ $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;

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

@@ -154,6 +154,7 @@ 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();
@@ -166,6 +167,25 @@ 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(() => {
@@ -537,6 +557,7 @@ 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' })]);
@@ -552,6 +573,8 @@ 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 ', () => {
@@ -869,7 +892,7 @@ describe('DataTable', () => {
dataTable.multiselect = true;
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(false);
expect(dataTable.isSelectAllChecked).toBe(true);
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);

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

@@ -191,6 +191,10 @@ 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).
@@ -516,35 +520,38 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
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.data) {
return;
}
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();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
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 (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
this.checkSelectAllCheckboxState();
}
}
resetSelection(): void {
@@ -672,8 +679,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;
@@ -799,6 +806,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.selection.splice(idx, 1);
}
}
this.selectedItemsCountChanged.emit(this.selection.length);
}
}