Introduce TableCell component (#112)

* Remove outdated table methods

* Add table-cell component

* Fix filter service reset

* Fix tooltip generation

Author: sha4be

src/ng-generate/components/shared/generators/services/filter/files/__name@dasherize__-filter.service.ts.template

@@ -178,7 +178,7 @@ export class <%= classify(name) %>FilterService {
             const appliedFilters = [...this.activeFilters];
 
             appliedFilters.forEach((filter) => {
-                this.resetFilter(filter)
+                this.removeFilter(filter)
             })
         }
 

src/ng-generate/components/shared/methods/generation/extended-table.html.template

@@ -1,4 +1,4 @@
-<div [hidden]="!!customTemplate && !dataSource.data.length">
+<div class="js-sdk-component-container--inner" [hidden]="!!customTemplate && !dataSource.data.length">
 
     <div data-test="table-container" class="mat-table-container">
         <table data-test="table" mat-table class="full-width-table"
@@ -60,28 +60,21 @@
                     </th>
 
                     <td data-test="table-cell"
-
-                        <% if(options.templateHelper.isEnumPropertyWithEntityValues(value.property)) { %>
-                            [matTooltip]="!('<%= isEmptyValue %>') ? (row.<%= cellPropertyPath %><%= descriptionPipe %>:true<%= language %>) :''" [matTooltipDisabled]="'<%= isEmptyValue %>'"
-                        <% } %>
-
                         mat-cell *matCellDef="let row"
 
                         <% if(options.templateHelper.isNumberProperty(value.property)) { %>
                             class="table-cell-number"
                         <% } %>
                     >
 
-                        <% if(options.hasSearchBar) { %>
-                            <ng-container [ngTemplateOutlet]="highlightCell" [ngTemplateOutletContext]="{ value: <%= cellContent %> }"></ng-container>
-                        <% } else { %>
-                            {{<%= cellContent %>}}
-                        <% } %>
-
-                        <mat-icon data-test="copy-to-clipboard-icon" *ngIf="!(<%= isEmptyValue %>)" class="material-icons copy-to-clipboard"
-                                  (click)="copyToClipboard(row.<%= cellPropertyPath %><%= language %>, $event)">
-                                      content_copy
-                        </mat-icon>
+                        <esmf-table-cell
+                            [value]="<%= cellContent %>"
+                            <% if(options.hasSearchBar) { %>
+                                [configs]="configs"
+                                [highlightString]="highlightString"
+                            <% } %>
+                            (copyToClipboardEvent)="copyToClipboard($event)"
+                        ></esmf-table-cell>
                     </td>
                 </ng-container>
             <% } %>

src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template

@@ -0,0 +1,31 @@
+<!--
+ * Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for
+ * additional information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ -->
+
+<span
+  [tableCellTooltip]="value"
+  [highlight]="highlightString"
+  [highlightSource]="value"
+  [highlightColor]="highlightConfigColor"
+  [selected]="highlightConfigSelector"
+>
+  {{ value === null ? '-' : value }}
+</span>
+
+<mat-icon
+  class="material-icons copy-to-clipboard"
+  *ngIf="!(value === null || value === undefined)"
+  (click)="copyToClipboard(value, $event)"
+  data-test="copy-to-clipboard-icon"
+>
+  content_copy
+</mat-icon>

src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.ts.template

@@ -0,0 +1,33 @@
+/** <%= options.generationDisclaimerText %> **/
+
+import {Clipboard} from '@angular/cdk/clipboard';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Config} from '../product-instance-table/v020/product-instance-table.component';
+
+@Component({
+  selector: '<%= dasherize(name) %>',
+  templateUrl: './<%= dasherize(name) %>.component.html',
+})
+export class EsmfTableCellComponent {
+  @Input() value: any;
+  @Input() highlightString: string[];
+  @Input() configs: Array<Config> = [];
+  @Output() copyToClipboardEvent = new EventEmitter<any>();
+
+  get highlightConfigColor(): string | undefined {
+    return this.configs.find((config: Config) => config.name.includes('highlight'))?.color;
+  }
+
+  get highlightConfigSelector(): boolean | undefined {
+    return this.configs.find((config: Config) => config.name.includes('highlight'))?.selected;
+  }
+
+  constructor(private clipboard: Clipboard) {}
+
+  copyToClipboard(value: any, event: MouseEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.clipboard.copy(value);
+    this.copyToClipboardEvent.emit(value);
+  }
+}

src/ng-generate/components/table/generators/components/table-cell/index.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for
+ * additional information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {apply, applyTemplates, MergeStrategy, mergeWith, move, Rule, SchematicContext, Tree, url} from '@angular-devkit/schematics';
+import {strings} from '@angular-devkit/core';
+
+export function generateTableCellComponent(options: any): Rule {
+    return (tree: Tree, _context: SchematicContext) => {
+        return mergeWith(
+            apply(url('./generators/components/table-cell/files'), [
+                applyTemplates({
+                    classify: strings.classify,
+                    dasherize: strings.dasherize,
+                    options: options,
+                    name: 'esmf-table-cell',
+                }),
+                move('src/app/shared/components/table-cell'),
+            ]),
+            options.overwrite ? MergeStrategy.Overwrite : MergeStrategy.Error,
+        );
+    };
+}

src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template

@@ -44,17 +44,3 @@
 
   <%= options.include('/generation/extended-table.html.template') %>
 </div>
-
-<% if (options.hasSearchBar) { %>
-    <!-- Highlighting search values -->
-    <ng-template #highlightCell let-value="value">
-      <span
-        [highlight]="highlightString"
-        [highlightSource]="value"
-        [highlightColor]="highlightConfigColor"
-        [selected]="highlightConfigSelector"
-      >
-        {{ value === null ? '-' : value }}
-      </span>
-    </ng-template>
-<% } %>

src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template

@@ -30,8 +30,6 @@ import { MatTable } from '@angular/material/table';
     import { FilterEnums, <%= options.filterServiceName %>} from './<%= dasherize(name) %>-filter.service';
 <% } %>
 
-import {Clipboard} from '@angular/cdk/clipboard';
-
 <% if (options.addCommandBar) { %>
     import {unparse} from 'papaparse';
     import {Action, ExportTableDialogComponent} from '<% if (options.enableVersionSupport) { %>../<% } %>../export-confirmation-dialog/export-table-dialog.component';
@@ -228,14 +226,6 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
 
     <% if (options.hasSearchBar) { %>
         highlightString: string[] = [];
-
-        get highlightConfigColor(): string | undefined {
-            return this.configs.find((config: Config) => config.name.includes('highlight'))?.color;
-        }
-
-        get highlightConfigSelector(): boolean | undefined {
-           return this.configs.find((config: Config) => config.name.includes('highlight'))?.selected;
-        }
     <% } %>
 
     <%= byValueFunction %>
@@ -404,10 +394,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
         this.rowDblClickEvent.emit({data: row});
     }
 
-    copyToClipboard(value: any, event: MouseEvent): void {
-        event.stopPropagation();
-        event.preventDefault();
-        this.clipboard.copy(value);
+    copyToClipboard(value: any): void {
         this.copyToClipboardEvent.emit(value);
     }
 

src/ng-generate/components/table/generators/components/table/index.ts

@@ -153,7 +153,6 @@ function commonImports(): string {
             private sanitizer: DomSanitizer,
             private translateService: TranslocoService,
             public dialog: MatDialog,
-            private clipboard: Clipboard,
             private storageService: JSSdkLocalStorageService,
             @Inject(PaginatorSelectConfigInjector) public paginatorSelectConfig: MatPaginatorSelectConfig,
             ${sharedOptions.hasFilters ? `public filterService: ${sharedOptions.filterServiceName},` : ''}

src/ng-generate/components/table/generators/directives/table-cell-tooltip/files/__name@dasherize__.directive.ts.template

@@ -0,0 +1,33 @@
+/** <%= options.generationDisclaimerText %> **/
+
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+import {MatTooltip} from '@angular/material/tooltip';
+
+@Directive({
+  selector: '[tableCellTooltip]',
+  hostDirectives: [MatTooltip]
+})
+export class TableCellTooltipDirective {
+  @Input()
+  get tableCellTooltip() {
+    return this.matTooltip.message;
+  }
+  set tableCellTooltip(txt: string) {
+    this.matTooltip.message = txt;
+  }
+
+  // average space taken by the 3 dots that trim the text
+  private readonly ellipsisSpace = 56;
+
+  constructor(
+    private el: ElementRef,
+    private matTooltip: MatTooltip
+  ) {}
+
+  @HostListener('mouseenter')
+  check(): void {
+    // offsetParent.offsetWidth is the width of the table cell (td element)
+    // offsetWidth width of the span that contains the text inside the table cell
+    this.matTooltip.disabled = this.el.nativeElement.offsetParent.offsetWidth - this.ellipsisSpace >= this.el.nativeElement.offsetWidth;
+  }
+}

src/ng-generate/components/table/generators/directives/table-cell-tooltip/index.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
+ *
+ * See the AUTHORS file(s) distributed with this work for
+ * additional information regarding authorship.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {strings} from '@angular-devkit/core';
+import {apply, applyTemplates, MergeStrategy, mergeWith, move, noop, Rule, url} from '@angular-devkit/schematics';
+
+export function generateTableCellTooltipDirective(options: any): Rule {
+    return () => {
+        if (!options.hasSearchBar) {
+            return noop;
+        }
+
+        return mergeWith(
+            apply(url('./generators/directives/table-cell-tooltip/files'), [
+                applyTemplates({
+                    classify: strings.classify,
+                    dasherize: strings.dasherize,
+                    options: options,
+                    name: 'table-cell-tooltip',
+                }),
+                move('src/app/shared/directives'),
+            ]),
+            options.overwrite ? MergeStrategy.Overwrite : MergeStrategy.Error,
+        );
+    };
+}