Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AAE-16995] Code refactor of LocationCellComponent #9033

Merged
merged 10 commits into from
Oct 31, 2023
1 change: 1 addition & 0 deletions docs/core/components/data-column.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();
}
});
}

wiktord2000 marked this conversation as resolved.
Show resolved Hide resolved
private getNestedPropertyValue(obj: any, path: string) {
return path.split('.').reduce((source, key) => (source ? source[key] : ''), obj);
}

ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -32,7 +31,7 @@ describe('LocationCellComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
LocationCellComponent,
CoreTestingModule
]
});
Expand All @@ -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],
Expand Down Expand Up @@ -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 = {};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
<ng-container>
<a href="" [title]="tooltip" [routerLink]="link">
<a [title]="tooltip" [routerLink]="link">
{{ value$ | async }}
</a>
</ng-container>
Expand All @@ -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();
}

/** @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) {
if (path?.name && path?.elements) {
this.value$.next(path.name.split('/').pop());

if (!this.tooltip) {
Expand Down
5 changes: 2 additions & 3 deletions lib/core/src/lib/datatable/datatable.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon
DataColumnModule,
BooleanCellComponent,
AmountCellComponent,
NumberCellComponent
NumberCellComponent,
LocationCellComponent
],
declarations: [
DataTableComponent,
Expand All @@ -87,7 +88,6 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon
DataTableRowComponent,
DateCellComponent,
FileSizeCellComponent,
LocationCellComponent,
JsonCellComponent,
ColumnsSelectorComponent,
NoContentTemplateDirective,
Expand All @@ -111,7 +111,6 @@ import { NumberCellComponent } from './components/number-cell/number-cell.compon
DateCellComponent,
ColumnsSelectorComponent,
FileSizeCellComponent,
LocationCellComponent,
JsonCellComponent,
NoContentTemplateDirective,
NoPermissionTemplateDirective,
Expand Down
Loading