[AAE-16995] Code refactor of LocationCellComponent (#9033)

* [AAE-16995] Migrate to standalone * [AAE-16995] Update Datatable module * [AAE-16995] Enable hyperlink click * [AAE-16995] Fix test mistake * [AAE-16995] Refactor DatatableCell * [AAE-16995] Refactor LocationCellComponent * [AAE-16995] Update doc about location cell * [AAE-16995] Clarify the purpose of location cell * [AAE-16995] Remove unnecessary check * [AAE-16995] Align to remarks
Alfresco · Oct 31, 2023 · 81f0df3 · 81f0df3
1 parent 5d72597
commit 81f0df3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
@@ -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) {

diff --git 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,