[AAE-10769] remove alfresco deps from datatable (#8045)

* remove alfresco dep * [ci:force] move data-column in datatable * new datatable service * doc * required changes * fix * fix
2025-07-24 17:32:15 +00:00 · 2023-01-04 09:08:03 +01:00
parent 85429b4cf1
commit 4da74f1c07
30 changed files with 361 additions and 135 deletions
--- a/lib/core/src/lib/core.module.ts
+++ b/lib/core/src/lib/core.module.ts
@@ -25,7 +25,6 @@ import { AboutModule } from './about/about.module';
 import { AppConfigModule } from './app-config/app-config.module';
 import { CardViewModule } from './card-view/card-view.module';
 import { ContextMenuModule } from './context-menu/context-menu.module';
-import { DataColumnModule } from './data-column/data-column.module';
 import { DataTableModule } from './datatable/datatable.module';
 import { InfoDrawerModule } from './info-drawer/info-drawer.module';
 import { LanguageMenuModule } from './language-menu/language-menu.module';
@@ -90,7 +89,6 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
        LoginModule,
        LanguageMenuModule,
        InfoDrawerModule,
-        DataColumnModule,
        DataTableModule,
        ButtonsMenuModule,
        TemplateModule,
@@ -131,7 +129,6 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
        LoginModule,
        LanguageMenuModule,
        InfoDrawerModule,
-        DataColumnModule,
        DataTableModule,
        TranslateModule,
        ButtonsMenuModule,
--- 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
@@ -21,14 +21,14 @@ import {
    Input,
    OnInit,
    ViewEncapsulation,
-    OnDestroy
+    OnDestroy, Optional
 } from '@angular/core';
 import { DataColumn } from '../../data/data-column.model';
 import { DataRow } from '../../data/data-row.model';
 import { DataTableAdapter } from '../../data/datatable-adapter';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { NodesApiService } from '../../../services/nodes-api.service';
+import { DataTableService } from '../../services/datatable.service';

@Component({
    selector: 'adf-datatable-cell',
@@ -36,12 +36,12 @@ import { NodesApiService } from '../../../services/nodes-api.service';
    template: `
        <ng-container>
            <span *ngIf="copyContent; else defaultCell"
-                adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
-                [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
-                [attr.aria-label]="value$ | async"
-                [title]="tooltip"
-                class="adf-datatable-cell-value"
-                >{{ value$ | async }}</span>
+                  adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
+                  [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
+                  [attr.aria-label]="value$ | async"
+                  [title]="tooltip"
+                  class="adf-datatable-cell-value"
+            >{{ value$ | async }}</span>
        </ng-container>
        <ng-template #defaultCell>
            <span
@@ -51,7 +51,7 @@ import { NodesApiService } from '../../../services/nodes-api.service';
        </ng-template>
    `,
    encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-content-cell' }
+    host: {class: 'adf-datatable-content-cell'}
 })
 export class DataTableCellComponent implements OnInit, OnDestroy {
    /** Data table adapter instance. */
@@ -78,25 +78,31 @@ export class DataTableCellComponent implements OnInit, OnDestroy {

    /** Custom resolver function which is used to parse dynamic column objects */
    @Input()
-    resolverFn: (row: DataRow, col: DataColumn) => any  = null;
+    resolverFn: (row: DataRow, col: DataColumn) => any = null;

    protected onDestroy$ = new Subject<boolean>();

-    constructor(protected nodesApiService: NodesApiService) {}
+    constructor(@Optional() protected dataTableService: DataTableService) {
+    }

    ngOnInit() {
        this.updateValue();
-        this.nodesApiService.nodeUpdated
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(node => {
-                if (this.row && node && node.id) {
-                    if (this.row['node'].entry.id === node.id) {
-                        this.row['node'].entry = node;
-                        this.row['cache'][this.column.key] = this.column.key.split('.').reduce((source, key) => source ? source[key] : '', node);
-                        this.updateValue();
+        if(this.dataTableService) {
+            this.dataTableService.rowUpdate
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe(data => {
+                    if (data && 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();
+                            }
+                        }
                    }
-                }
-            });
+                });
+        }
    }

    protected updateValue() {
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -26,8 +26,8 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { DataTableComponent, ShowHeaderMode } from './datatable.component';
 import { setupTestBed } from '../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
-import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
-import { DataColumnComponent } from '../../../data-column/data-column.component';
+import { DataColumnListComponent } from '../../data-column/data-column-list.component';
+import { DataColumnComponent } from '../../data-column/data-column.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { domSanitizerMock } from '../../../mock/dom-sanitizer-mock';
 import { matIconRegistryMock } from '../../../mock/mat-icon-registry-mock';
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -26,7 +26,7 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { Subscription, Observable, Observer } from 'rxjs';
-import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
+import { DataColumnListComponent } from '../../data-column/data-column-list.component';
 import { DataColumn } from '../../data/data-column.model';
 import { DataRowEvent } from '../../data/data-row-event.model';
 import { DataRow } from '../../data/data-row.model';
--- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
+++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
@@ -15,19 +15,18 @@
 * limitations under the License.
 */

-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Optional, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
 import {
    UserPreferencesService,
    UserPreferenceValues
 } from '../../../common/services/user-preferences.service';
-import { NodesApiService } from '../../../services/nodes-api.service';
 import { AppConfigService } from '../../../app-config/app-config.service';
 import { takeUntil } from 'rxjs/operators';
+import { DataTableService } from '../../services/datatable.service';

@Component({
    selector: 'adf-date-cell',
-
    template: `
        <ng-container>
            <span
@@ -65,10 +64,10 @@ export class DateCellComponent extends DataTableCellComponent {

    constructor(
        userPreferenceService: UserPreferencesService,
-        nodesApiService: NodesApiService,
+        @Optional() dataTableService: DataTableService,
        appConfig: AppConfigService
    ) {
-        super(nodesApiService);
+        super(dataTableService);

        this.dateFormat = appConfig.get('dateValues.defaultDateFormat', DateCellComponent.DATE_FORMAT);
        this.tooltipDateFormat = appConfig.get('dateValues.defaultTooltipDateFormat', DateCellComponent.DATE_FORMAT);
--- a/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts
+++ b/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts
@@ -15,9 +15,9 @@
 * limitations under the License.
 */

-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Optional, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
-import { NodesApiService } from '../../../services/nodes-api.service';
+import { DataTableService } from '../../services/datatable.service';

@Component({
    selector: 'adf-filesize-cell',
@@ -33,7 +33,7 @@ import { NodesApiService } from '../../../services/nodes-api.service';
    host: { class: 'adf-filesize-cell' }
 })
 export class FileSizeCellComponent extends DataTableCellComponent {
-    constructor(nodesApiService: NodesApiService) {
-        super(nodesApiService);
+    constructor(@Optional() dataTableService: DataTableService) {
+        super(dataTableService);
    }
 }
--- a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts
+++ b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts
@@ -15,11 +15,11 @@
 * limitations under the License.
 */

-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input, Optional } from '@angular/core';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
 import { MatDialog } from '@angular/material/dialog';
 import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
-import { NodesApiService } from '../../../services/nodes-api.service';
+import { DataTableService } from '../../services/datatable.service';

@Component({
    selector: 'adf-json-cell',
@@ -45,9 +45,9 @@ export class JsonCellComponent extends DataTableCellComponent implements OnInit

    constructor(
        private dialog: MatDialog,
-        nodesApiService: NodesApiService
+        @Optional() dataTableService: DataTableService
    ) {
-        super(nodesApiService);
+        super(dataTableService);
    }

    ngOnInit() {
--- 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
@@ -19,12 +19,12 @@ import {
    ChangeDetectionStrategy,
    Component,
    Input,
-    OnInit,
+    OnInit, Optional,
    ViewEncapsulation
 } from '@angular/core';
 import { PathInfoEntity } from '@alfresco/js-api';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
-import { NodesApiService } from '../../../services/nodes-api.service';
+import { DataTableService } from '../../services/datatable.service';

@Component({
    selector: 'adf-location-cell',
@@ -43,8 +43,8 @@ export class LocationCellComponent extends DataTableCellComponent implements OnI
    @Input()
    link: any[];

-    constructor(nodesApiService: NodesApiService) {
-        super(nodesApiService);
+    constructor(@Optional() dataTableService: DataTableService) {
+        super(dataTableService);
    }

    /** @override */
--- a/lib/core/src/lib/datatable/data-column/data-column-header.component.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column-header.component.ts
--- a/lib/core/src/lib/datatable/data-column/data-column-list.component.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column-list.component.ts
--- a/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts
@@ -16,8 +16,8 @@
 */

 import { DataColumnComponent } from './data-column.component';
-import { setupTestBed } from '../testing/setup-test-bed';
-import { CoreTestingModule } from '../testing/core.testing.module';
+import { setupTestBed } from '../../testing/setup-test-bed';
+import { CoreTestingModule } from '../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';

 describe('DataColumnListComponent', () => {
--- a/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
@@ -16,13 +16,12 @@
 */

 import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { DataColumnModule } from './data-column.module';
 import { DataColumnComponent } from './data-column.component';
-import { DataTableModule } from './../datatable/datatable.module';
-import { CoreStoryModule } from '../testing/core.story.module';
-import * as data from './../mock/data-column.mock';
+import { DataTableModule } from '../datatable.module';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import * as data from '../../mock/data-column.mock';
 import { RouterTestingModule } from '@angular/router/testing';
-import { DataRow } from './../datatable';
+import { DataRow } from '../index';

 export default {
    component: DataColumnComponent,
@@ -31,7 +30,6 @@ export default {
        moduleMetadata({
            imports: [
                CoreStoryModule,
-                DataColumnModule,
                DataTableModule,
                RouterTestingModule
            ]
--- a/lib/core/src/lib/datatable/data-column/data-column.component.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column.component.ts
--- a/lib/core/src/lib/datatable/data-column/data-column.module.ts
+++ b/lib/core/src/lib/datatable/data-column/data-column.module.ts
@@ -32,9 +32,7 @@ import { DateColumnHeaderComponent } from './data-column-header.component';
        DateColumnHeaderComponent
    ],
    exports: [
-        DataColumnComponent,
-        DataColumnListComponent,
-        DateColumnHeaderComponent
+
    ]
 })
 export class DataColumnModule {}
--- a/lib/core/src/lib/datatable/data-column/index.ts
+++ b/lib/core/src/lib/datatable/data-column/index.ts
--- a/lib/core/src/lib/datatable/data-column/public-api.ts
+++ b/lib/core/src/lib/datatable/data-column/public-api.ts
@@ -18,5 +18,3 @@
 export * from './data-column-list.component';
 export * from './data-column.component';
 export * from './data-column-header.component';
-
-export * from './data-column.module';
--- a/lib/core/src/lib/datatable/data/data-row-update.model.ts
+++ b/lib/core/src/lib/datatable/data/data-row-update.model.ts
@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface DataRowUpdateModel {
+    obj: any;
+    id: string;
+}
--- a/lib/core/src/lib/datatable/data/data-table.schema.ts
+++ b/lib/core/src/lib/datatable/data/data-table.schema.ts
@@ -18,7 +18,7 @@
 import { ContentChild, Input, Directive } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { AppConfigService } from '../../app-config/app-config.service';
-import { DataColumnListComponent } from '../../data-column/data-column-list.component';
+import { DataColumnListComponent } from '../data-column/data-column-list.component';
 import { DataColumn } from './data-column.model';
 import { ObjectDataColumn } from './object-datacolumn.model';

--- a/lib/core/src/lib/datatable/datatable.module.ts
+++ b/lib/core/src/lib/datatable/datatable.module.ts
@@ -47,10 +47,10 @@ import { MainMenuDataTableTemplateDirective } from './directives/main-data-table
 import { JsonCellComponent } from './components/json-cell/json-cell.component';
 import { ClipboardModule } from '../clipboard/clipboard.module';
 import { DropZoneDirective } from './directives/drop-zone.directive';
-import { DataColumnModule } from '../data-column/data-column.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { IconModule } from '../icon/icon.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent } from './data-column';

@NgModule({
    imports: [
@@ -58,7 +58,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        MaterialModule,
        CommonModule,
        TranslateModule,
-        DataColumnModule,
        ContextMenuModule,
        PipeModule,
        DirectiveModule,
@@ -89,7 +88,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        CustomLoadingContentTemplateDirective,
        CustomNoPermissionTemplateDirective,
        MainMenuDataTableTemplateDirective,
-        DropZoneDirective
+        DropZoneDirective,
+        DataColumnComponent,
+        DataColumnListComponent,
+        DateColumnHeaderComponent
    ],
    exports: [
        DataTableComponent,
@@ -112,7 +114,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
        CustomLoadingContentTemplateDirective,
        CustomNoPermissionTemplateDirective,
        MainMenuDataTableTemplateDirective,
-        DropZoneDirective
+        DropZoneDirective,
+        DataColumnComponent,
+        DataColumnListComponent,
+        DateColumnHeaderComponent
    ]
 })
 export class DataTableModule {}
--- a/lib/core/src/lib/datatable/public-api.ts
+++ b/lib/core/src/lib/datatable/public-api.ts
@@ -50,4 +50,8 @@ export * from './directives/custom-loading-template.directive';
 export * from './directives/custom-no-permission-template.directive';
 export * from './directives/main-data-table-action-template.directive';

+export * from './services/datatable.service';
+
+
 export * from './datatable.module';
+export * from './data-column';
--- a/lib/core/src/lib/datatable/services/datatable.service.ts
+++ b/lib/core/src/lib/datatable/services/datatable.service.ts
@@ -0,0 +1,29 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { DataRowUpdateModel } from '../data/data-row-update.model';
+
+@Injectable()
+export class DataTableService {
+
+    /**
+     * Publish/subscribe to events related to row updates.
+     */
+    rowUpdate = new Subject<DataRowUpdateModel>();
+}
--- a/lib/core/src/lib/form/form-base.module.ts
+++ b/lib/core/src/lib/form/form-base.module.ts
@@ -20,7 +20,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { DataTableModule } from '../datatable/datatable.module';
-import { DataColumnModule } from '../data-column/data-column.module';
 import { PipeModule } from '../pipes/pipe.module';
 import { HttpClientModule } from '@angular/common/http';

@@ -51,7 +50,6 @@ import { InplaceFormInputComponent } from './components/inplace-form-input/inpla
        TranslateModule,
        FormsModule,
        ReactiveFormsModule,
-        DataColumnModule,
        PipeModule,
        MatDatetimepickerModule,
        MatNativeDatetimeModule,
--- a/lib/core/src/public-api.ts
+++ b/lib/core/src/public-api.ts
@@ -23,7 +23,7 @@ export * from './lib/pagination/index';
 export * from './lib/login/index';
 export * from './lib/language-menu/index';
 export * from './lib/info-drawer/index';
-export * from './lib/data-column/index';
+export * from './lib/datatable/data-column/index';
 export * from './lib/datatable/index';
 export * from './lib/context-menu/index';
 export * from './lib/card-view/index';