Merge branch 'main' into feat/webcomponent-adapt-slot

CHANGELOG.md

@@ -1,3 +1,37 @@
+## [4.29.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.28.0...v4.29.0) (2024-06-04)
+
+
+### Features
+
+* renaming of the slots ([#266](https://github.com/onecx/onecx-portal-ui-libs/issues/266)) ([13635a1](https://github.com/onecx/onecx-portal-ui-libs/commit/13635a18e545136b475a550c2a88baa2b29492ed))
+
+## [4.28.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.27.0...v4.28.0) (2024-06-03)
+
+
+### Features
+
+* topic message id for message ordering ([#265](https://github.com/onecx/onecx-portal-ui-libs/issues/265)) ([22b8bcf](https://github.com/onecx/onecx-portal-ui-libs/commit/22b8bcf89f07e6940d15110214efa39f16ed0c3b))
+
+
+### Bug Fixes
+
+* paginator All option displayed only for one element ([#263](https://github.com/onecx/onecx-portal-ui-libs/issues/263)) ([4e71709](https://github.com/onecx/onecx-portal-ui-libs/commit/4e717090a122cac12c3b1b33ad9dd56eee52b4cf))
+
+## [4.27.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.26.0...v4.27.0) (2024-05-28)
+
+
+### Features
+
+* CUSTOM column type for data table ([#262](https://github.com/onecx/onecx-portal-ui-libs/issues/262)) ([c15aad3](https://github.com/onecx/onecx-portal-ui-libs/commit/c15aad3394ccbd698cb33016b2d48152dec3a707))
+* object details in page header can be styled ([#261](https://github.com/onecx/onecx-portal-ui-libs/issues/261)) ([ae72fc7](https://github.com/onecx/onecx-portal-ui-libs/commit/ae72fc7920c9890b9cfd1abee35588a76fac21e1))
+
+## [4.26.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.25.1...v4.26.0) (2024-05-27)
+
+
+### Features
+
+* menu harnesses enhancements ([#260](https://github.com/onecx/onecx-portal-ui-libs/issues/260)) ([0733f33](https://github.com/onecx/onecx-portal-ui-libs/commit/0733f33d5a9c8181bc861930477ece6a495ca6eb))
+
 ## [4.25.1](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.25.0...v4.25.1) (2024-05-17)
 
 

libs/accelerator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onecx/accelerator",
-  "version": "4.25.1",
+  "version": "4.29.0",
   "peerDependencies": {
     "tslib": "^2.3.0",
     "rxjs": "7.8.1"

libs/accelerator/src/lib/topic/message.ts

@@ -1,7 +1,17 @@
+declare global {
+  interface Window {
+    onecxMessageId: number
+  }
+}
+
+window['onecxMessageId'] = 0
+
 export class Message {
   timestamp: number
+  id: number // id can be undefined while used via old implementation
 
   constructor(public type: string) {
     this.timestamp = window.performance.now()
+    this.id = window['onecxMessageId']++
   }
 }

libs/accelerator/src/lib/topic/topic-message.ts

@@ -1,12 +1,8 @@
-import { Message } from "./message";
-import { TopicMessageType } from "./topic-message-type";
+import { Message } from './message'
+import { TopicMessageType } from './topic-message-type'
 
 export class TopicMessage extends Message {
-    constructor(
-      type: TopicMessageType,
-      public name: string,
-      public version: number
-    ) {
-      super(type);
-    }
-  }
+  constructor(type: TopicMessageType, public name: string, public version: number) {
+    super(type)
+  }
+}

libs/accelerator/src/lib/topic/topic.spec.ts

@@ -8,6 +8,8 @@
 
 import { map } from 'rxjs'
 import { Topic } from './topic'
+import { TopicMessageType } from './topic-message-type'
+import { TopicDataMessage } from './topic-data-message'
 
 describe('Topic', () => {
   const origAddEventListener = window.addEventListener
@@ -155,4 +157,130 @@ describe('Topic', () => {
       done()
     })
   })
+
+  describe('integration with older versions of library', () => {
+    let previousMessage: TopicDataMessage<string>
+    let incomingMessage: MessageEvent<TopicDataMessage<string>>
+
+    beforeEach(() => {
+      previousMessage = {
+        type: TopicMessageType.TopicNext,
+        name: testTopic1.name,
+        version: testTopic1.version,
+        data: '',
+        timestamp: 0,
+        id: 0,
+      }
+      incomingMessage = {
+        data: {
+          type: TopicMessageType.TopicNext,
+          name: testTopic1.name,
+          version: testTopic1.version,
+          data: '',
+          timestamp: 0,
+          id: 0,
+        },
+      } as any
+
+      // initialize topic
+      testTopic1.publish('initMsg')
+    })
+
+    it('should have value if incoming id is greater than previous id', () => {
+      previousMessage.data = 'msg1'
+      previousMessage.id = 0
+      incomingMessage.data.data = 'msg2'
+      incomingMessage.data.id = 1
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1', 'msg2'])
+    })
+
+    it('should have value if incoming timestamp is greater than previous timestamp with no ids provided', () => {
+      previousMessage.data = 'msg1'
+      ;(<any>previousMessage).id = undefined
+      previousMessage.timestamp = 1
+      incomingMessage.data.data = 'msg2'
+      ;(<any>incomingMessage.data).id = undefined
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1', 'msg2'])
+    })
+
+    it('should have value if incoming timestamp is greater than previous timestamp when current message has id', () => {
+      previousMessage.data = 'msg1'
+      previousMessage.id = 1
+      previousMessage.timestamp = 1
+      incomingMessage.data.data = 'msg2'
+      ;(<any>incomingMessage.data).id = undefined
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1', 'msg2'])
+    })
+
+    it('should have value if incoming timestamp is greater than previous timestamp when incoming message has id', () => {
+      previousMessage.data = 'msg1'
+      ;(<any>previousMessage).id = undefined
+      previousMessage.timestamp = 1
+      incomingMessage.data.data = 'msg2'
+      incomingMessage.data.id = 1
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1', 'msg2'])
+    })
+
+    it('should have no value if incoming timestamp is equal to the previous timestamp with no ids provided', () => {
+      previousMessage.data = 'msg1'
+      ;(<any>previousMessage).id = undefined
+      previousMessage.timestamp = 3
+      incomingMessage.data.data = 'msg2'
+      ;(<any>incomingMessage.data).id = undefined
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1'])
+    })
+
+    it('should have no value if incoming timestamp is equal to the previous timestamp when current message has id', () => {
+      jest.spyOn(console, 'warn')
+      previousMessage.data = 'msg1'
+      previousMessage.id = 1
+      previousMessage.timestamp = 3
+      incomingMessage.data.data = 'msg2'
+      ;(<any>incomingMessage.data).id = undefined
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1'])
+      expect(console.warn).toHaveBeenLastCalledWith(
+        'Message was dropped because of equal timestamps, because there was an old style message in the system. Please upgrade all libraries to the latest version.'
+      )
+    })
+
+    it('should have no value if incoming timestamp is equal to previous timestamp when incoming message has id', () => {
+      jest.spyOn(console, 'warn')
+      previousMessage.data = 'msg1'
+      ;(<any>previousMessage).id = undefined
+      previousMessage.timestamp = 3
+      incomingMessage.data.data = 'msg2'
+      incomingMessage.data.id = 1
+      incomingMessage.data.timestamp = 3
+      ;(<any>testTopic1).data.next(previousMessage)
+      ;(<any>testTopic1).onMessage(incomingMessage)
+
+      expect(values1).toEqual(['initMsg', 'msg1'])
+      expect(console.warn).toHaveBeenLastCalledWith(
+        'Message was dropped because of equal timestamps, because there was an old style message in the system. Please upgrade all libraries to the latest version.'
+      )
+    })
+  })
 })

libs/accelerator/src/lib/topic/topic.ts

@@ -23,7 +23,7 @@ export class Topic<T> extends TopicPublisher<T> implements Subscribable<T> {
 
   constructor(name: string, version: number, sendGetMessage = true) {
     super(name, version)
-    
+
     this.isInitializedPromise = new Promise<void>((resolve) => {
       this.resolveInitPromise = resolve
     })
@@ -34,7 +34,7 @@ export class Topic<T> extends TopicPublisher<T> implements Subscribable<T> {
       window.postMessage(message, '*')
     }
   }
-  
+
   get isInitialized(): Promise<void> {
     return this.isInitializedPromise
   }
@@ -145,10 +145,17 @@ export class Topic<T> extends TopicPublisher<T> implements Subscribable<T> {
   private onMessage(m: MessageEvent<TopicMessage>): any {
     switch (m.data.type) {
       case TopicMessageType.TopicNext:
+        if (m.data.name !== this.name || m.data.version !== this.version) {
+          break
+        }
+
         if (
-          m.data.name === this.name &&
-          m.data.version === this.version &&
-          (!this.data.value || (this.isInit && (<TopicMessage>m.data).timestamp > this.data.value.timestamp))
+          !this.data.value ||
+          (this.isInit &&
+            (<TopicMessage>m.data).id !== undefined &&
+            this.data.value.id !== undefined &&
+            (<TopicMessage>m.data).id > this.data.value.id) ||
+          (this.isInit && (<TopicMessage>m.data).timestamp > this.data.value.timestamp)
         ) {
           this.isInit = true
           this.data.next(<TopicDataMessage<T>>m.data)
@@ -158,6 +165,15 @@ export class Topic<T> extends TopicPublisher<T> implements Subscribable<T> {
             publishPromiseResolver()
             delete this.publishPromiseResolver[m.data.timestamp]
           }
+        } else if (
+          this.data.value &&
+          this.isInit &&
+          (<TopicMessage>m.data).timestamp === this.data.value.timestamp &&
+          ((<TopicMessage>m.data).id || this.data.value.id)
+        ) {
+          console.warn(
+            'Message was dropped because of equal timestamps, because there was an old style message in the system. Please upgrade all libraries to the latest version.'
+          )
         }
         break
       case TopicMessageType.TopicGet:

libs/angular-accelerator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onecx/angular-accelerator",
-  "version": "4.25.1",
+  "version": "4.29.0",
   "peerDependencies": {
     "@angular/common": "^15.2.7 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0",

libs/angular-accelerator/src/lib/components/data-table/data-table.component.html

@@ -89,15 +89,12 @@
   [rows]="pageSize"
   [showCurrentPageReport]="true"
   currentPageReportTemplate="{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}"
-  [rowsPerPageOptions]="[10, 25, 50, rows?.length]"
+  [rowsPerPageOptions]="[10, 25, 50, { showAll: ('OCX_DATA_TABLE.ALL' | translate)}]"
   id="dataTable_{{name}}"
   (selectionChange)="onSelectionChange($event)"
   [selection]="(selectedRows$ | async) || []"
   [scrollable]="true"
 >
-  <ng-template let-item pTemplate="paginatordropdownitem">
-    {{ item.value === rows?.length ? ("OCX_DATA_TABLE.ALL" | translate) : item.value }}
-  </ng-template>
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 4rem" scope="col" *ngIf="selectionChangedObserved">
@@ -196,6 +193,18 @@
 
 <ng-template #defaultCell let-rowObject="rowObject" let-column="column">
   <ng-container [ngSwitch]="column.columnType">
+    <ng-container *ngSwitchCase="'CUSTOM'">
+      <ng-container
+        [ngTemplateOutlet]="
+            _customCell ? _customCell: defaultCustomCell
+            "
+        [ngTemplateOutletContext]="{
+                rowObject: rowObject,
+                column: column
+            }"
+      >
+      </ng-container>
+    </ng-container>
     <ng-container *ngSwitchCase="'DATE'">
       <ng-container
         [ngTemplateOutlet]="
@@ -267,6 +276,9 @@
   <ng-container> {{ rowObject[column.id] | number }} </ng-container>
 </ng-template>
 
+<ng-template #defaultCustomCell let-rowObject="rowObject" let-column="column">
+</ng-template>
+
 <ng-template #defaultDateCell let-rowObject="rowObject" let-column="column">
   <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>
 </ng-template>

libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts

@@ -279,7 +279,7 @@ describe('DataTableComponent', () => {
       const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataTable.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('Alle')
     })
 
@@ -289,11 +289,33 @@ describe('DataTableComponent', () => {
       const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataTable.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('All')
     })
   })
 
+  it('should display 10 rows by default for 1000 rows', async () => {
+    component.rows = Array.from(Array(1000).keys()).map((number) => {
+      return {
+        id: number,
+        name: number,
+      }
+    })
+    component.columns = [
+      {
+        columnType: ColumnType.NUMBER,
+        id: 'name',
+        nameKey: 'COLUMN_HEADER_NAME.NAME',
+      },
+    ]
+    component.paginator = true
+    fixture.detectChanges()
+
+    const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
+    const rows = await dataTable.getRows()
+    expect(rows.length).toBe(10)
+  })
+
   describe('Table row selection', () => {
     it('should initially show a table without selection checkboxes', async () => {
       expect(dataTable).toBeTruthy()

libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts

@@ -125,6 +125,12 @@ export class DataTableComponent extends DataSortBase implements OnInit {
     return this.numberCellTemplate || this.numberCellChildTemplate
   }
 
+  @Input() customCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('customCell') customCellChildTemplate: TemplateRef<any> | undefined
+  get _customCell(): TemplateRef<any> | undefined {
+    return this.customCellTemplate || this.customCellChildTemplate
+  }
+
   @Input() dateCellTemplate: TemplateRef<any> | undefined
   @ContentChild('dateCell') dateCellChildTemplate: TemplateRef<any> | undefined
   get _dateCell(): TemplateRef<any> | undefined {
@@ -341,6 +347,6 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   }
 
   fieldIsTruthy(object: any, key: any) {
-    return !!(ObjectUtils.resolveFieldData(object, key))
+    return !!ObjectUtils.resolveFieldData(object, key)
   }
 }