fix(core, platform): fix illustrated message in table

SAP · Nov 3, 2024 · fe372e2 · fe372e2
1 parent 9a2d547
commit fe372e2
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 10 deletions.
diff --git a/libs/core/illustrated-message/illustrated-message.component.ts b/libs/core/illustrated-message/illustrated-message.component.ts
@@ -1,5 +1,5 @@
 import {
-    AfterViewInit,
+    AfterContentChecked,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -51,7 +51,7 @@ let illustratedMessageUniqueId = 0;
     standalone: true,
     imports: []
 })
-export class IllustratedMessageComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit, CssClassBuilder {
+export class IllustratedMessageComponent implements AfterContentChecked, OnChanges, OnDestroy, OnInit, CssClassBuilder {
     /**
      * The type of the Illustrated Message
      * Options include: 'scene' | 'spot' | 'dialog' | 'dot' | 'base'.
@@ -138,13 +138,12 @@ export class IllustratedMessageComponent implements AfterViewInit, OnChanges, On
     ngOnInit(): void {
         this.buildComponentCssClass();
         this._constructHref();
+        this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));
     }
 
     /** @hidden */
-    ngAfterViewInit(): void {
-        this._containerWidth = this.elementRef.nativeElement.offsetWidth;
+    ngAfterContentChecked(): void {
         this._constructHref();
-        this._subscriptions.add(fromEvent(window, 'resize').subscribe(() => this._constructHref()));
     }
 
     /** @hidden */

diff --git a/libs/docs/core/table/examples/no-data/no-data-example.component.html b/libs/docs/core/table/examples/no-data/no-data-example.component.html
@@ -0,0 +1,32 @@
+<table fd-table aria-label="Default">
+    <thead fd-table-header>
+        <tr fd-table-row>
+            <th fd-table-cell>Column Header</th>
+            <th fd-table-cell>Column Header</th>
+            <th fd-table-cell>Column Header</th>
+        </tr>
+    </thead>
+    <tbody fd-table-body>
+        <tr fd-table-row>
+            <td
+                fd-table-cell
+                class="fd-table__cell--no-data fd-table__cell fd-table__cell--focusable"
+                tabindex="0"
+                colspan="5"
+                aria-colindex="0"
+            >
+                <div style="width: 100%; display: flex; justify-content: center">
+                    <figure style="width: 100%" fd-illustrated-message [svgConfig]="sceneConfig">
+                        <figcaption fd-illustrated-message-figcaption>
+                            <h3 fd-illustrated-message-title>Headline text goes here</h3>
+                            <p fd-illustrated-message-text>
+                                Description provides user with clarity and possible next steps.
+                            </p>
+                        </figcaption>
+                        <fd-illustrated-message-actions> </fd-illustrated-message-actions>
+                    </figure>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/libs/docs/core/table/examples/no-data/no-data-example.component.ts b/libs/docs/core/table/examples/no-data/no-data-example.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { IconComponent } from '@fundamental-ngx/core/icon';
+import { IllustratedMessageModule } from '@fundamental-ngx/core/illustrated-message';
+import { LinkComponent } from '@fundamental-ngx/core/link';
+import { TableModule } from '@fundamental-ngx/core/table';
+
+@Component({
+    selector: 'fdp-platform-table-no-data-example',
+    templateUrl: './no-data-example.component.html',
+    standalone: true,
+    imports: [TableModule, LinkComponent, IconComponent, IllustratedMessageModule]
+})
+export class NoDataExampleComponent {
+    tableRows = [];
+
+    sceneConfig = {
+        scene: {
+            url: 'assets/images/sapIllus-Scene-NoMail.svg',
+            id: 'sapIllus-Scene-NoMail-1'
+        },
+        dialog: {
+            url: 'assets/images/sapIllus-Dialog-NoMail.svg',
+            id: 'sapIllus-Dialog-NoMail'
+        }
+    };
+}
diff --git a/libs/docs/core/table/table-docs.component.html b/libs/docs/core/table/table-docs.component.html
@@ -233,3 +233,14 @@
     <fd-table-page-scroll-example></fd-table-page-scroll-example>
 </component-example>
 <code-example [exampleFiles]="tablePageScroll"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="fdp-table-no-data-wrapper" componentName="table"> No Data </fd-docs-section-title>
+<description>
+    <p>This example shows table usage with no data using Illustrated Messages</p>
+</description>
+<component-example>
+    <fdp-platform-table-no-data-example></fdp-platform-table-no-data-example>
+</component-example>
+<code-example [exampleFiles]="noData"></code-example>
diff --git a/libs/docs/core/table/table-docs.component.ts b/libs/docs/core/table/table-docs.component.ts
@@ -12,6 +12,7 @@ import {
     getAssetFromModuleAssets
 } from '@fundamental-ngx/docs/shared';
 import { TableLoadingExampleComponent } from './examples/loading/table-loading-example.component';
+import { NoDataExampleComponent } from './examples/no-data/no-data-example.component';
 import { TableActivableExampleComponent } from './examples/table-activable-example.component';
 import { TableCdkExampleComponent } from './examples/table-cdk-example.component';
 import { TableCheckboxesExampleComponent } from './examples/table-checkboxes-example.component';
@@ -71,6 +72,8 @@ const tableFixedTs = 'table-fixed-example.component.ts';
 const tableFixedHtml = 'table-fixed-example.component.html';
 const tablePageScrollHtml = 'table-page-scroll-example.component.html';
 const tablePageScrollTs = 'table-page-scroll-example.component.ts';
+const noDataExampleHtml = 'no-data/no-data-example.component.html';
+const noDataExampleTs = 'no-data/no-data-example.component.ts';
 
 @Component({
     selector: 'app-table',
@@ -101,7 +104,8 @@ const tablePageScrollTs = 'table-page-scroll-example.component.ts';
         TableResponsiveExampleComponent,
         RouterLink,
         TableLoadingExampleComponent,
-        TablePageScrollExampleComponent
+        TablePageScrollExampleComponent,
+        NoDataExampleComponent
     ]
 })
 export class TableDocsComponent {
@@ -373,6 +377,20 @@ export class TableDocsComponent {
         }
     ];
 
+    noData: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(noDataExampleHtml),
+            fileName: 'no-data-example'
+        },
+        {
+            language: 'typescript',
+            component: 'NoDataExampleComponent',
+            code: getAssetFromModuleAssets(noDataExampleTs),
+            fileName: 'no-data-example'
+        }
+    ];
+
     constructor(private schemaFactory: SchemaFactoryService) {
         this.schema = this.schemaFactory.getComponent('table');
     }

diff --git a/libs/docs/platform/table/examples/no-data/no-data-example.component.html b/libs/docs/platform/table/examples/no-data/no-data-example.component.html
@@ -0,0 +1,18 @@
+<fdp-table [dataSource]="source">
+    <fdp-column [nonInteractive]="true" name="name" key="name" label="Name" align="start"> </fdp-column>
+
+    <fdp-column name="description" key="description" label="Description"> </fdp-column>
+
+    <fdp-column name="price" key="price.value" label="Price" align="end"> </fdp-column>
+
+    <fdp-column [nonInteractive]="true" name="status" key="status" label="Status" align="center"> </fdp-column>
+    <fdp-table-no-data-wrapper style="display: block; width: 100%">
+        <figure style="width: 100%" fd-illustrated-message [svgConfig]="sceneConfig">
+            <figcaption fd-illustrated-message-figcaption>
+                <h3 fd-illustrated-message-title>Headline text goes here</h3>
+                <p fd-illustrated-message-text>Description provides user with clarity and possible next steps.</p>
+            </figcaption>
+            <fd-illustrated-message-actions> </fd-illustrated-message-actions>
+        </figure>
+    </fdp-table-no-data-wrapper>
+</fdp-table>
diff --git a/libs/docs/platform/table/examples/no-data/no-data-example.component.ts b/libs/docs/platform/table/examples/no-data/no-data-example.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } from '@angular/core';
+import { PlatformButtonModule } from '@fundamental-ngx/platform/button';
+import { PlatformTableModule } from '@fundamental-ngx/platform/table';
+import {
+    TableDataSourceDirective,
+    TableHeaderResizerDirective,
+    TableInitialStateDirective
+} from '@fundamental-ngx/platform/table-helpers';
+
+import { IllustratedMessageModule } from '@fundamental-ngx/core/illustrated-message';
+
+@Component({
+    selector: 'fdp-platform-table-no-data-example',
+    templateUrl: './no-data-example.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [
+        TableDataSourceDirective,
+        TableHeaderResizerDirective,
+        PlatformTableModule,
+        TableInitialStateDirective,
+        PlatformButtonModule,
+        IllustratedMessageModule
+    ]
+})
+export class NoDataExampleComponent {
+    source;
+
+    constructor(readonly hostElement: ElementRef<HTMLElement>) {
+        this.source = [];
+    }
+
+    sceneConfig = {
+        scene: {
+            url: 'assets/images/sapIllus-Scene-NoMail.svg',
+            id: 'sapIllus-Scene-NoMail-1'
+        },
+        dialog: {
+            url: 'assets/images/sapIllus-Dialog-NoMail.svg',
+            id: 'sapIllus-Dialog-NoMail'
+        },
+        base: {
+            url: 'assets/images/sapIllus-Dialog-NoMail.svg',
+            id: 'sapIllus-Dialog-NoMail'
+        },
+        spot: {
+            url: 'assets/images/sapIllus-Spot-NoMail.svg',
+            id: 'sapIllus-Spot-NoEmail'
+        },
+        dot: {
+            url: 'assets/images/sapIllus-Spot-NoMail.svg',
+            id: 'sapIllus-Spot-NoEmail'
+        }
+    };
+}
diff --git a/libs/docs/platform/table/platform-table-docs.component.html b/libs/docs/platform/table/platform-table-docs.component.html
@@ -359,6 +359,16 @@ <h3>Tree initialization</h3>
 
 <separator></separator>
 
+<description>
+    <p>This example shows table usage with no data using Illustrated Messages</p>
+</description>
+<component-example>
+    <fdp-platform-table-no-data-example></fdp-platform-table-no-data-example>
+</component-example>
+<code-example [exampleFiles]="noDataExample"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title id="playground-table" componentName="table"> Playground Area </fd-docs-section-title>
 <playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
     <fdp-table

diff --git a/libs/docs/platform/table/platform-table-docs.component.ts b/libs/docs/platform/table/platform-table-docs.component.ts
@@ -37,6 +37,7 @@ import {
 } from '@fundamental-ngx/platform/table-helpers';
 import { PlatformTableEditableRowsExampleComponent } from './examples/editable-rows/platform-table-editable-rows-example.component';
 import { PlatformTableInitialLoadingExampleComponent } from './examples/initial-loading/platform-table-initial-loading-example.component';
+import { NoDataExampleComponent } from './examples/no-data/no-data-example.component';
 import { PlatformTableColumnsNgforExampleComponent } from './examples/platform-table-columns-ngfor-example.component';
 import { PlatformTableCustomColumnExampleComponent } from './examples/platform-table-custom-column-example.component';
 import { PlatformTableCustomTitleExampleComponent } from './examples/platform-table-custom-title-example.component';
@@ -94,6 +95,9 @@ const platformInitialLoadingTsSrc = 'initial-loading/platform-table-initial-load
 const platformTableNgForSrc = 'platform-table-columns-ngfor-example.component.html';
 const platformTableNgForTsSrc = 'platform-table-columns-ngfor-example.component.ts';
 
+const noDataTableExampleSrc = 'no-data-example.component.html';
+const noDataTableExampleTsSrc = 'no-data-example.component.ts';
+
 const illustrationDialogNoMail = '/assets/images/sapIllus-Dialog-NoMail.svg';
 
 @Component({
@@ -133,7 +137,8 @@ const illustrationDialogNoMail = '/assets/images/sapIllus-Dialog-NoMail.svg';
         TableInitialStateDirective,
         ContentDensityDirective,
         PlatformButtonModule,
-        FdDatetimeModule
+        FdDatetimeModule,
+        NoDataExampleComponent
     ]
 })
 export class PlatformTableDocsComponent {
@@ -428,6 +433,22 @@ export class PlatformTableDocsComponent {
         }
     ];
 
+    noDataExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(noDataTableExampleSrc),
+            fileName: 'no-data-example',
+            name: 'no-data-example.component.html'
+        },
+        {
+            language: 'typescript',
+            code: getAssetFromModuleAssets(noDataTableExampleTsSrc),
+            fileName: 'no-data-example',
+            component: 'NoDataExampleComponent',
+            name: 'no-data-example.component.ts'
+        }
+    ];
+
     dataSource: TableDataSource<ExampleItem>;
 
     childService = inject(ExampleChildService);

diff --git a/libs/platform/table/table.component.html b/libs/platform/table/table.component.html
@@ -195,9 +195,7 @@
                         <tr fd-table-row>
                             <td fd-table-cell class="fd-table__cell--no-data" [attr.colspan]="_tableColumnsLength">
                                 <div class="fdp-table__empty-table-message">
-                                    <div>
-                                        <ng-content select="fdp-table-no-data-wrapper"></ng-content>
-                                    </div>
+                                    <ng-content select="fdp-table-no-data-wrapper"></ng-content>
                                     @if (!_noDataWrapper && _tableService.visibleColumnsLength() > 0) {
                                         <div>
                                             {{