feat: add navigation history

libs/angular-accelerator/src/index.ts

@@ -61,3 +61,4 @@ export * from './lib/utils/create-remote-component-and-mfe-translate-loader.util
 export * from './lib/utils/create-remote-component-translate-loader.utils'
 export * from './lib/utils/enum-to-dropdown-options.utils'
 export * from './lib/utils/criteria.utils'
+export * from './lib/utils/string-and-array-helper-functions.utils'

libs/angular-accelerator/src/lib/utils/string-and-array-helper-functions.utils.spec.ts

@@ -0,0 +1,40 @@
+import {
+  findEntryWithKeyword,
+  removeKeyword,
+  searchPrefixWithSpecialChars,
+} from './string-and-array-helper-functions.utils'
+
+describe('findEntryWithKeyword', () => {
+  it('should find the entry containing the keyword', () => {
+    expect(findEntryWithKeyword(['entry1', 'entry2', 'keywordEntry'], 'keyword')).toBe('keywordEntry')
+    expect(findEntryWithKeyword(['entry1', 'entry2', 'entry3'], 'keyword')).toBe(null)
+    expect(findEntryWithKeyword(undefined, 'keyword')).toBe(null)
+  })
+})
+
+describe('removeKeyword', () => {
+  it('should remove the keyword and trailing details from the input string', () => {
+    expect(removeKeyword('/onecx-mgmt-page/keyword/123', 'keyword')).toBe('/onecx-mgmt-page')
+    expect(removeKeyword('/onecx-mgmt-page/keyword/123/', 'keyword')).toBe('/onecx-mgmt-page')
+    expect(removeKeyword('/onecx-mgmt-page/search/123', 'keyword')).toBe('/onecx-mgmt-page/search/123')
+  })
+
+  describe('searchPrefixWithSpecialChars', () => {
+    it('should return the latest string starting with the prefix followed by ? or #', () => {
+      const exampleUrls1 = ['onecx-mgmt-page?id', 'onecx-mgmt-page#id', 'ibt-order-mgmt-page#id']
+      const exampleUrls2 = ['onecx-mgmt-page#id', 'onecx-mgmt-page#id', 'onecx-mgmt-page?id']
+      const prefix = 'onecx-mgmt-page'
+      const expected1 = 'onecx-mgmt-page#id'
+      const expected2 = 'onecx-mgmt-page?id'
+      expect(searchPrefixWithSpecialChars(exampleUrls1, prefix)).toEqual(expected1)
+      expect(searchPrefixWithSpecialChars(exampleUrls2, prefix)).toEqual(expected2)
+    })
+
+    it('should return the latest string of an array starting with the prefix followed by ? or #', () => {
+      const strings = ['test?case', 'test#case', 'test case', 'example?test', 'example#test']
+      const prefix = 'test'
+      const expected = 'test#case'
+      expect(searchPrefixWithSpecialChars(strings, prefix)).toEqual(expected)
+    })
+  })
+})

libs/angular-accelerator/src/lib/utils/string-and-array-helper-functions.utils.ts

@@ -0,0 +1,31 @@
+export function findEntryWithKeyword(
+  array: string[] | undefined,
+  keyword: string,
+): string | null {
+  const entry = array?.find((entry) => entry.includes(keyword));
+  return entry || null;
+}
+
+export function removeKeyword(input: string, keyword: string): string {
+  let result = input.replace(new RegExp(`/${keyword}.*`), '');
+  if (result.endsWith('/')) {
+    result = result.slice(0, -1);
+  }
+  return result;
+}
+
+export function searchPrefixWithSpecialChars(
+  strings: string[],
+  prefix: string,
+): string | null {
+  for (let i = strings.length - 1; i >= 0; i--) {
+    const str = strings[i];
+    if (
+      str.startsWith(prefix) &&
+      (str[prefix.length] === '?' || str[prefix.length] === '#')
+    ) {
+      return str;
+    }
+  }
+  return null;
+}

libs/integration-interface/src/index.ts

@@ -38,3 +38,4 @@ export * from './lib/topics/permissions-rpc/v1/permissions-rpc.model'
 
 export * from './lib/topics/events/v1/events-topic'
 export * from './lib/topics/events/v1/topic-event-type'
+export * from './lib/topics/events/v1/payload-navigated-event'

libs/integration-interface/src/lib/topics/events/v1/payload-navigated-event.ts

@@ -0,0 +1,5 @@
+export type PayloadNavigatedEvent = {
+  url: string | undefined
+  isFirst: boolean
+  history: string[]
+}

libs/ngrx-accelerator/package.json

@@ -10,6 +10,7 @@
     "@ngrx/operators": "^18.0.1",
     "@ngrx/router-store": "^18.0.1",
     "@ngrx/store": "^18.0.1",
+    "@onecx/integration-interface": "^5",
     "rxjs": "^7.8.1",
     "zod": "^3.23.8"
   },

libs/ngrx-accelerator/src/index.ts

@@ -9,4 +9,11 @@ export * from './lib/utils/selectors/create-child-selectors'
 
 // Local Storage
 export * from './lib/utils/local-storage/lazy-loading-merge-reducer'
-export * from './lib/utils/local-storage/create-nested-key-configuration'
+export * from './lib/utils/local-storage/create-nested-key-configuration'
+
+// Store Connector
+export * from './lib/store-connector/navigated-event-store-connector-service'
+export * from './lib/store-connector/onecx-actions'
+export * from './lib/store-connector/onecx-reducer'
+export * from './lib/store-connector/onecx-selectors'
+export * from './lib/store-connector/onecx-state'

libs/ngrx-accelerator/src/lib/store-connector/navigated-event-store-connector-service.ts

@@ -0,0 +1,31 @@
+import { EventsTopic } from '@onecx/integration-interface'
+import { ENVIRONMENT_INITIALIZER, Injectable, OnDestroy, inject } from '@angular/core'
+import { Store } from '@ngrx/store'
+import { filter } from 'rxjs'
+import { OneCxActions } from './onecx-actions'
+
+export function provideNavigatedEventStoreConnector() {
+  return [
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useFactory() {
+        return () => inject(NavigatedEventStoreConnectorService)
+      },
+    },
+    NavigatedEventStoreConnectorService,
+  ]
+}
+
+@Injectable()
+export class NavigatedEventStoreConnectorService implements OnDestroy {
+  eventsTopic$ = new EventsTopic()
+  constructor(store: Store) {
+    this.eventsTopic$.pipe(filter((e) => e.type === 'navigated')).subscribe((navigatedEvent) => {
+      store.dispatch(OneCxActions.navigated({ event: navigatedEvent.payload }))
+    })
+  }
+  ngOnDestroy(): void {
+    this.eventsTopic$.destroy()
+  }
+}

libs/ngrx-accelerator/src/lib/store-connector/onecx-actions.ts

@@ -0,0 +1,10 @@
+import { createActionGroup, props } from '@ngrx/store'
+
+export const OneCxActions = createActionGroup({
+  source: 'OneCX',
+  events: {
+    navigated: props<{
+      event: undefined | unknown
+    }>(),
+  },
+})

libs/ngrx-accelerator/src/lib/store-connector/onecx-reducer.ts

@@ -0,0 +1,15 @@
+import { createReducer, on } from '@ngrx/store'
+import { OneCxActions } from './onecx-actions'
+import { OneCxState } from './onecx-state'
+import { PayloadNavigatedEvent } from '@onecx/integration-interface'
+
+export const oneCxReducer = createReducer<OneCxState>(
+  {},
+  on(
+    OneCxActions.navigated,
+    (state: OneCxState, action): OneCxState => ({
+      ...state,
+      location: action.event as PayloadNavigatedEvent,
+    })
+  )
+)

libs/ngrx-accelerator/src/lib/store-connector/onecx-selectors.ts

@@ -0,0 +1,22 @@
+import { MemoizedSelector, createFeatureSelector, createSelector } from '@ngrx/store'
+import { OneCxState } from './onecx-state'
+import { LocationState } from './onecx-state'
+export function createOneCxSelector<State extends Record<string, any>>(): MemoizedSelector<State, OneCxState> {
+  return createFeatureSelector('onecx')
+}
+
+export type OneCxSelectors<V> = {
+  selectLocation: MemoizedSelector<V, LocationState | undefined>
+  selectBackNavigationPossible: MemoizedSelector<V, boolean>
+}
+
+export function getOneCxSelectors<V extends Record<string, any>>(
+  selectState: (state: V) => OneCxState = createOneCxSelector<V>()
+): OneCxSelectors<V> {
+  const selectLocation = createSelector(selectState, (state) => state.location)
+  const selectBackNavigationPossible = createSelector(selectLocation, (location) => !!location && !location?.isFirst)
+  return {
+    selectLocation,
+    selectBackNavigationPossible,
+  }
+}

libs/ngrx-accelerator/src/lib/store-connector/onecx-state.ts

@@ -0,0 +1,6 @@
+import { PayloadNavigatedEvent } from '@onecx/integration-interface'
+
+export type LocationState = PayloadNavigatedEvent
+export interface OneCxState {
+  location?: LocationState | undefined
+}