diff --git a/docs/core/components/data-column.component.md b/docs/core/components/data-column.component.md index a7e4a2a93b..b31a296e46 100644 --- a/docs/core/components/data-column.component.md +++ b/docs/core/components/data-column.component.md @@ -74,6 +74,7 @@ The `type` input allows us to specify the type of hosted values for a given colu - `boolean` - The column expects true / false (boolean values) and in addition accepts two strings - 'false' and 'true'. Other values are not recognized by the column, and the cell remains empty. - `amount` - This column is responsible for displaying currencies. It expects numerals represented by a string or a number. This type comes with [`currencyConfig`](#default-currency-config), - `number` - This column is responsible for displaying numbers (integers and decimals). It expects numerals represented by a string or a number. This type comes with [`decimalConfig`](#default-decimal-config) +- `location` - This column displays a clickable location link pointing to the parent path of the node. **Note:** This type is strongly related to the document list component ([document-list.component.md](../../content-services/components/document-list.component.md)). ### `currencyConfig` Input diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts index ab86c873f7..cce35d794c 100644 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts +++ b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts @@ -78,22 +78,7 @@ export class DataTableCellComponent implements OnInit, OnDestroy { ngOnInit() { this.updateValue(); - if (this.dataTableService) { - this.dataTableService.rowUpdate.pipe(takeUntil(this.onDestroy$)).subscribe((data) => { - if (data?.id) { - if (this.row.id === data.id) { - if (this.row.obj && data.obj) { - this.row.obj = data.obj; - this.row['cache'][this.column.key] = this.column.key - .split('.') - .reduce((source, key) => (source ? source[key] : ''), data.obj); - - this.updateValue(); - } - } - } - }); - } + this.subscribeToRowUpdates(); } protected updateValue() { @@ -108,6 +93,24 @@ export class DataTableCellComponent implements OnInit, OnDestroy { } } + private subscribeToRowUpdates() { + if (!this.dataTableService || !this.row.obj) { + return; + } + this.dataTableService.rowUpdate.pipe(takeUntil(this.onDestroy$)).subscribe((data) => { + if (data?.id === this.row?.id && data.obj) { + this.row.obj = data.obj; + this.row['cache'][this.column.key] = this.getNestedPropertyValue(data.obj, this.column.key); + + this.updateValue(); + } + }); + } + + private getNestedPropertyValue(obj: any, path: string) { + return path.split('.').reduce((source, key) => (source ? source[key] : ''), obj); + } + ngOnDestroy() { this.onDestroy$.next(true); this.onDestroy$.complete(); diff --git a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts index 9f9a83cd44..79cc25cc27 100644 --- a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts @@ -20,7 +20,6 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter'; import { ObjectDataColumn } from '../../data/object-datacolumn.model'; import { LocationCellComponent } from './location-cell.component'; import { CoreTestingModule } from '../../../testing/core.testing.module'; -import { TranslateModule } from '@ngx-translate/core'; describe('LocationCellComponent', () => { let component: LocationCellComponent; @@ -32,7 +31,7 @@ describe('LocationCellComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - TranslateModule.forRoot(), + LocationCellComponent, CoreTestingModule ] }); @@ -45,15 +44,15 @@ describe('LocationCellComponent', () => { name: '1', path: { elements: [ - { id: '1', name: 'path' }, - { id: '2', name: 'to' }, - { id: '3', name: 'location' } + { id: '1', name: 'User files', nodeType: 'folder' }, + { id: '2', name: 'Favorite', nodeType: 'folder' }, + { id: '3', name: 'Movies', nodeType: 'folder' } ], - name: '/path/to/location' + name: '/User files/Favorite/Movies' } }; - columnData = { format: '/somewhere', type: 'location', key: 'path'}; + columnData = { format: '/files', type: 'location', key: 'path'}; dataTableAdapter = new ObjectDataTableAdapter( [rowData], @@ -82,6 +81,13 @@ describe('LocationCellComponent', () => { expect(component.link).toEqual([ columnData.format , rowData.path.elements[2].id ]); }); + it('should NOT set router link when format NOT provided', () => { + component.column.format = undefined; + fixture.detectChanges(); + + expect(component.link).toEqual([]); + }); + it('should not setup cell when path has no data', (done) => { rowData.path = {}; diff --git a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts index 5a4f1a7bda..7fdcfb7ec7 100644 --- a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts +++ b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts @@ -18,13 +18,18 @@ import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, ViewEncapsulation } from '@angular/core'; import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component'; import { DataTableService } from '../../services/datatable.service'; +import { AsyncPipe } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { PathInfo } from '@alfresco/js-api'; @Component({ + standalone: true, + imports: [AsyncPipe, RouterModule], selector: 'adf-location-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: ` - + {{ value$ | async }} @@ -40,12 +45,16 @@ export class LocationCellComponent extends DataTableCellComponent implements OnI super(dataTableService); } - /** @override */ ngOnInit() { - if (this.column?.key && this.row && this.data) { - const path: any = this.data.getValue(this.row, this.column, this.resolverFn); + super.ngOnInit(); + } - if (path?.name && path.elements) { + /** @override */ + protected updateValue(): void { + if (this.column?.key && this.column?.format && this.row && this.data) { + const path: PathInfo = this.data.getValue(this.row, this.column, this.resolverFn); + + if (path?.name && path?.elements) { this.value$.next(path.name.split('/').pop()); if (!this.tooltip) { diff --git a/lib/core/src/lib/datatable/datatable.module.ts b/lib/core/src/lib/datatable/datatable.module.ts index 83b83103d4..f3c21c5201 100644 --- a/lib/core/src/lib/datatable/datatable.module.ts +++ b/lib/core/src/lib/datatable/datatable.module.ts @@ -75,7 +75,8 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon DataColumnModule, BooleanCellComponent, AmountCellComponent, - NumberCellComponent + NumberCellComponent, + LocationCellComponent ], declarations: [ DataTableComponent, @@ -87,7 +88,6 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon DataTableRowComponent, DateCellComponent, FileSizeCellComponent, - LocationCellComponent, JsonCellComponent, ColumnsSelectorComponent, NoContentTemplateDirective, @@ -111,7 +111,6 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon DateCellComponent, ColumnsSelectorComponent, FileSizeCellComponent, - LocationCellComponent, JsonCellComponent, NoContentTemplateDirective, NoPermissionTemplateDirective,