@kirbydesign/designsystem 0.0.0

package/src/lib/components/modal/services/modal-navigation.service.ts

@@ -0,0 +1,331 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Params, Route, Router, Routes } from '@angular/router';
+import { EMPTY, Observable } from 'rxjs';
+import { filter, first, map, pairwise, startWith } from 'rxjs/operators';
+
+import { ModalRouteActivation } from './modal.interfaces';
+
+@Injectable({ providedIn: 'root' })
+export class ModalNavigationService {
+  constructor(private router: Router, private route: ActivatedRoute) {}
+
+  isModalRoute(url: string): boolean {
+    return url.includes('(modal:');
+  }
+
+  private getCurrentActivatedRoute(): ActivatedRoute {
+    let childRoute = this.route.root;
+    while (childRoute.firstChild) {
+      childRoute = childRoute.firstChild;
+    }
+    return childRoute;
+  }
+
+  private async getModalRoutes(
+    routeConfig: Routes[],
+    moduleRootRoutePath?: string
+  ): Promise<string[]> {
+    const flattenedRoutes: Routes = [].concat(...routeConfig);
+    let modalRoutes: string[] = [];
+    const moduleRootPaths = await this.getModuleRootPath(flattenedRoutes, moduleRootRoutePath);
+    if (moduleRootPaths) {
+      modalRoutes = this.getModalRoutePaths(flattenedRoutes, moduleRootPaths);
+    }
+    return modalRoutes;
+  }
+
+  private async getModuleRootPath(routes: Routes, moduleRootRoutePath?: string): Promise<string[]> {
+    if (moduleRootRoutePath) {
+      const trimmedPaths = moduleRootRoutePath
+        .trim()
+        .split('/')
+        .filter((path) => !!path);
+      const rootPath = [''];
+      return rootPath.concat(trimmedPaths);
+    }
+
+    const currentRoutePaths = await this.getCurrentRoutePaths();
+    const moduleRootPaths = this.getRoutePathsWithoutChildSegments(currentRoutePaths, routes);
+    return moduleRootPaths;
+  }
+
+  private async getCurrentRoutePaths(): Promise<string[]> {
+    const rootPath = [''];
+    const currentNavigation = this.router.getCurrentNavigation();
+
+    if (!this.router.navigated && !currentNavigation) {
+      // If router hasn't navigated yet and we are not in the middle of navigating, assume root:
+      return rootPath;
+    }
+
+    if (currentNavigation) {
+      // Wait for current navigation to finish:
+      await this.navigationEndListener$.pipe(first()).toPromise();
+    }
+
+    let childRoute = this.route.snapshot.root;
+    while (childRoute.firstChild) {
+      childRoute = childRoute.firstChild;
+    }
+    const currentBackdropRoutePath = childRoute.pathFromRoot.filter(
+      (route) => route.outlet !== 'modal'
+    );
+
+    return rootPath.concat(
+      ...currentBackdropRoutePath.map((route) =>
+        route.url.filter((segment) => !!segment.path).map((segment) => segment.path)
+      )
+    );
+  }
+
+  private getRoutePathsWithoutChildSegments(routePaths: string[], routes: Routes): string[] {
+    if (!routePaths.length) return routePaths;
+
+    const matchedChildRoute = this.findChildRouteForUrl(routePaths.join('/'), routes);
+
+    if (!matchedChildRoute) return routePaths;
+
+    const startSlashRegex = /^\//;
+    const relativeChildRoute = matchedChildRoute.replace(startSlashRegex, '');
+    const childSegmentCount = relativeChildRoute.split('/').length;
+    const routePathsWithoutChildSegments = routePaths.slice(0, -childSegmentCount); // Remove child segments from end of route path array
+    return routePathsWithoutChildSegments;
+  }
+
+  private findChildRouteForUrl(url: string, routes: Routes) {
+    const moduleRelativePaths = this.getRoutePaths(routes, ['']).sort().reverse(); // Ensure child paths are evaluated first
+    let matchedChildRoute = moduleRelativePaths.find((path) => url.endsWith(path));
+    if (!matchedChildRoute) {
+      // No static child route found matching current route - look for child route with url params:
+      const exactMatch = false;
+      matchedChildRoute = moduleRelativePaths.find(
+        (path) =>
+          path.includes('/:') && this.pathContainsChildRouteWithUrlParams(url, path, exactMatch)
+      );
+    }
+    return matchedChildRoute;
+  }
+
+  private pathContainsChildRouteWithUrlParams(
+    path: string,
+    childRouteWithUrlParams: string,
+    exactMatch: boolean
+  ) {
+    const pathSegments = path.split('/');
+    const startSlashRegex = /^\//;
+    let childRouteToMatch = childRouteWithUrlParams;
+    if (!exactMatch) {
+      const relativeChildRoute = childRouteWithUrlParams.replace(startSlashRegex, '');
+      childRouteToMatch = relativeChildRoute;
+    }
+    const childRouteSegments = childRouteToMatch.split('/');
+    // Match each child route segment against url
+    // Match backwards from end to start of child route, i.e. "url ends with child route":
+    const pathContainsChildRoute = childRouteSegments.reverse().every((childRouteSegment) => {
+      const pathSegment = pathSegments.pop();
+      // url params (e.g. `/:id/`) are treated as a match:
+      return childRouteSegment.startsWith(':') || childRouteSegment === pathSegment;
+    });
+    if (exactMatch) {
+      // Only match if we've reached the start of the url to match against:
+      return pathSegments.length === 0 && pathContainsChildRoute;
+    }
+    return pathContainsChildRoute;
+  }
+
+  private getRoutePaths(routes: Routes, parentPath: string[]): string[] {
+    return Array.isArray(routes)
+      ? ([] as string[]).concat(...routes.map((route) => this.getRoutePath(route, parentPath)))
+      : [];
+  }
+
+  private getRoutePath(route: Route, parentPath: string[]): string[] {
+    const routes: string[] = [];
+    if (!!route.outlet) return routes; // Don't return relative paths for outlet routes
+
+    const currentPath = [...parentPath];
+    if (!!route.path) {
+      currentPath.push(route.path);
+      routes.push(currentPath.join('/'));
+    }
+
+    return routes.concat(this.getRoutePaths(route.children, currentPath));
+  }
+
+  private getModalRoutePath(route: Route, parentPath: string[]): string[] {
+    const modalOutletName = 'modal';
+    if (!!route.path && route.outlet === modalOutletName) {
+      const modalOutletPath = `(${modalOutletName}:${route.path})`;
+      const modalRoutePath = [...parentPath, modalOutletPath].join('/');
+      return [modalRoutePath];
+    }
+    const currentPath = [...parentPath];
+    if (!!route.path) {
+      currentPath.push(route.path);
+    }
+    return ([] as string[]).concat(...this.getModalRoutePaths(route.children, currentPath));
+  }
+
+  private getModalRoutePaths(routes: Routes, parentPath: string[]): string[] {
+    return Array.isArray(routes)
+      ? ([] as string[]).concat(...routes.map((route) => this.getModalRoutePath(route, parentPath)))
+      : [];
+  }
+
+  private isNewModalWindow(navigationEnd: NavigationEnd): boolean {
+    const currentNavigation = this.router.getCurrentNavigation();
+    if (!currentNavigation || !currentNavigation.previousNavigation) {
+      return true;
+    }
+    const previousRoutePath = (
+      currentNavigation.previousNavigation.finalUrl ||
+      currentNavigation.previousNavigation.extractedUrl
+    ).toString();
+    const wasModalRoute = this.isModalRoute(previousRoutePath);
+    const isModalRoute = this.isModalRoute(navigationEnd.urlAfterRedirects);
+    if (!wasModalRoute && isModalRoute) {
+      return true;
+    }
+
+    const currentModalRouteParent = navigationEnd.urlAfterRedirects.split('/(modal:')[0];
+    const previousModalRouteParent = previousRoutePath.split('/(modal:')[0];
+
+    return previousModalRouteParent !== currentModalRouteParent;
+  }
+
+  private navigationEndListener$ = this.router.events.pipe(
+    filter((event): event is NavigationEnd => event instanceof NavigationEnd)
+  );
+
+  private async waitForCurrentThenGetNavigationEndStream(): Promise<Observable<NavigationEnd>> {
+    if (this.router.getCurrentNavigation()) {
+      const currentNavigationEnd = await this.navigationEndListener$.pipe(first()).toPromise();
+      return this.navigationEndListener$.pipe(startWith(currentNavigationEnd));
+    }
+    return this.navigationEndListener$;
+  }
+
+  private modalRouteActivatedFor(
+    navigationEnd$: Observable<NavigationEnd>,
+    modalRouteSet: Set<string>,
+    modalRoutesContainsUrlParams: boolean
+  ): Observable<ModalRouteActivation> {
+    return navigationEnd$.pipe(
+      filter((navigationEnd) =>
+        this.modalRouteSetContainsPath(modalRouteSet, navigationEnd, modalRoutesContainsUrlParams)
+      ),
+      map((navigationEnd) => ({
+        route: this.getCurrentActivatedRoute(),
+        isNewModal: this.isNewModalWindow(navigationEnd),
+      }))
+    );
+  }
+
+  private modalRouteDeactivatedFor(
+    navigationEnd$: Observable<NavigationEnd>,
+    modalRouteSet: Set<string>,
+    modalRoutesContainsUrlParams: boolean
+  ): Observable<boolean> {
+    return navigationEnd$.pipe(
+      pairwise(),
+      filter(([prevNavigation, _]) =>
+        this.modalRouteSetContainsPath(modalRouteSet, prevNavigation, modalRoutesContainsUrlParams)
+      ), // Only emit if previous route was modal
+      map(([_, currentNavigation]) => {
+        const isNewModalRoute = this.isModalRoute(currentNavigation.urlAfterRedirects);
+        // Deactivate modal route if new route is NOT modal OR is outside current parent route:
+        return !isNewModalRoute || this.isNewModalWindow(currentNavigation);
+      }),
+      filter((isDeactivation) => isDeactivation)
+    );
+  }
+
+  private modalRouteSetContainsPath(
+    modalRouteSet: Set<string>,
+    navigationEnd: NavigationEnd,
+    modalRoutesContainsUrlParams: boolean
+  ) {
+    const pathname = navigationEnd.urlAfterRedirects.split('?')[0];
+    let hasRoute = modalRouteSet.has(pathname);
+    if (!hasRoute && modalRoutesContainsUrlParams) {
+      // Use `for ... of` instead of `forEach` so we can break out of the loop if route is found:
+      for (let route of modalRouteSet) {
+        const exactMatch = true;
+        const routeMatchesPath = this.pathContainsChildRouteWithUrlParams(
+          pathname,
+          route,
+          exactMatch
+        );
+        if (routeMatchesPath) {
+          hasRoute = true;
+          break;
+        }
+      }
+    }
+    return hasRoute;
+  }
+
+  async getModalNavigation(
+    routeConfig: Routes[],
+    moduleRootRoutePath?: string
+  ): Promise<{ activated$: Observable<ModalRouteActivation>; deactivated$: Observable<boolean> }> {
+    if (Array.isArray(routeConfig)) {
+      const navigationEnd$ = await this.waitForCurrentThenGetNavigationEndStream();
+      const modalRoutes = await this.getModalRoutes(routeConfig, moduleRootRoutePath);
+      const hasModalRoutes = modalRoutes.length > 0;
+      if (hasModalRoutes) {
+        const modalRoutesContainsUrlParams = modalRoutes.some((route) => route.includes('/:'));
+        const modalRouteSet = new Set(modalRoutes);
+        const activated$ = this.modalRouteActivatedFor(
+          navigationEnd$,
+          modalRouteSet,
+          modalRoutesContainsUrlParams
+        );
+        const deactivated$ = this.modalRouteDeactivatedFor(
+          navigationEnd$,
+          modalRouteSet,
+          modalRoutesContainsUrlParams
+        );
+        return { activated$, deactivated$ };
+      }
+    }
+    return { activated$: EMPTY, deactivated$: EMPTY };
+  }
+
+  async navigateToModal(path: string | string[], queryParams?: Params): Promise<boolean> {
+    const commands = Array.isArray(path) ? path : path.split('/');
+    const childPath = commands.pop();
+    const result = await this.router.navigate([...commands, { outlets: { modal: [childPath] } }], {
+      queryParams,
+      relativeTo: this.getCurrentActivatedRoute(),
+    });
+    return result;
+  }
+
+  async navigateWithinModal(relativePath: string, queryParams?: Params): Promise<boolean> {
+    return this.router.navigate([relativePath], {
+      queryParams,
+      relativeTo: this.getCurrentActivatedRoute(),
+    });
+  }
+
+  async navigateOutOfModalOutlet(): Promise<boolean> {
+    let result = Promise.resolve(true);
+    const currentActivatedRoute = this.getCurrentActivatedRoute();
+    if (currentActivatedRoute.outlet === 'modal') {
+      const parentRoute = this.getBackdropRoute(currentActivatedRoute);
+      result = this.router.navigate(['./'], {
+        relativeTo: parentRoute,
+      });
+    }
+    return result;
+  }
+
+  private getBackdropRoute(currentActivatedRoute: ActivatedRoute) {
+    let parentRoute = currentActivatedRoute.parent;
+    while (parentRoute && !parentRoute.component && !!parentRoute.parent) {
+      parentRoute = parentRoute.parent;
+    }
+    return parentRoute;
+  }
+}

package/src/lib/components/modal/services/modal.controller.spec.ts

@@ -0,0 +1,212 @@
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+import { EMPTY, Subject } from 'rxjs';
+
+import { ActionSheetHelper } from './action-sheet.helper';
+import { AlertHelper } from './alert.helper';
+import { ModalNavigationService } from './modal-navigation.service';
+import { ModalController } from './modal.controller';
+import { ModalHelper } from './modal.helper';
+import { Overlay, OverlayEventDetail } from './modal.interfaces';
+
+describe('ModalController', () => {
+  let spectator: SpectatorService<ModalController>;
+  let modalController: ModalController;
+
+  const createService = createServiceFactory({
+    service: ModalController,
+    mocks: [ActionSheetHelper, AlertHelper, ModalHelper, ModalNavigationService],
+  });
+
+  let modalHelperSpy: jasmine.SpyObj<ModalHelper>;
+  let actionSheetHelperSpy: jasmine.SpyObj<ActionSheetHelper>;
+  let alertHelperSpy: jasmine.SpyObj<AlertHelper>;
+  let modalNavigationServiceSpy: jasmine.SpyObj<ModalNavigationService>;
+
+  const expectedError = 'No modal overlays are currently registered';
+  let callbackSpy: jasmine.Spy;
+
+  beforeEach(() => {
+    spectator = createService();
+    modalController = spectator.service;
+    modalHelperSpy = spectator.inject(ModalHelper);
+    actionSheetHelperSpy = spectator.inject(ActionSheetHelper);
+    alertHelperSpy = spectator.inject(AlertHelper);
+    modalNavigationServiceSpy = spectator.inject(ModalNavigationService);
+    modalNavigationServiceSpy.getModalNavigation.and.resolveTo({
+      activated$: EMPTY,
+      deactivated$: EMPTY,
+    });
+    callbackSpy = jasmine.createSpy('callback');
+  });
+
+  it('should create', () => {
+    expect(spectator.service).toBeTruthy();
+  });
+
+  describe('initialize', () => {
+    it('should subscribe to modal route navigation', async () => {
+      await new Promise<void>((resolve) => setTimeout(resolve, 1));
+      await modalController.initialize();
+
+      expect(modalNavigationServiceSpy.getModalNavigation).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('hideTopmost', () => {
+    it('should throw an error when closing an overlay, when no overlays have been registered', async () => {
+      await expectAsync(modalController.hideTopmost()).toBeRejectedWithError(expectedError);
+    });
+  });
+
+  describe('hideAll', () => {
+    it('should allow hideAll even if no overlays are registered', async () => {
+      await expectAsync(modalController.hideAll()).toBeResolved();
+    });
+
+    it('should close all opened overlays', async () => {
+      const overlaySpy1: jasmine.SpyObj<Overlay> = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss1$ = new Subject<OverlayEventDetail>();
+      overlaySpy1.onDidDismiss = onDidDismiss1$.toPromise();
+      overlaySpy1.dismiss.and.callFake(() => {
+        onDidDismiss1$.next();
+        onDidDismiss1$.complete();
+        return Promise.resolve(true);
+      });
+      const overlaySpy2: jasmine.SpyObj<Overlay> = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss2$ = new Subject<OverlayEventDetail>();
+      overlaySpy2.onDidDismiss = onDidDismiss2$.toPromise();
+      overlaySpy2.dismiss.and.callFake(() => {
+        onDidDismiss2$.next();
+        onDidDismiss2$.complete();
+        return Promise.resolve(true);
+      });
+      const overlaySpy3: jasmine.SpyObj<Overlay> = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss3$ = new Subject<OverlayEventDetail>();
+      overlaySpy3.onDidDismiss = onDidDismiss3$.toPromise();
+      overlaySpy3.dismiss.and.callFake(() => {
+        onDidDismiss3$.next();
+        onDidDismiss3$.complete();
+        return Promise.resolve(true);
+      });
+
+      modalHelperSpy.showModalWindow.and.returnValues(
+        Promise.resolve(overlaySpy1),
+        Promise.resolve(overlaySpy2),
+        Promise.resolve(overlaySpy3)
+      );
+
+      await modalController.showModal({ component: undefined });
+      await modalController.showModal({ component: undefined });
+      await modalController.showModal({ component: undefined });
+      expect(modalController['overlays'].length).toBe(3);
+
+      await modalController.hideAll();
+      await expectAsync(overlaySpy1.onDidDismiss).toBeResolved();
+      await expectAsync(overlaySpy2.onDidDismiss).toBeResolved();
+      await expectAsync(overlaySpy3.onDidDismiss).toBeResolved();
+      expect(modalController['overlays'].length).toBe(0);
+    });
+  });
+
+  describe('showModal', () => {
+    let overlaySpy: jasmine.SpyObj<Overlay>;
+    beforeEach(() => {
+      overlaySpy = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss$ = new Subject<OverlayEventDetail>();
+      overlaySpy.onDidDismiss = onDidDismiss$.toPromise();
+      overlaySpy.dismiss.and.callFake((data: any) => {
+        onDidDismiss$.next({ data: data });
+        onDidDismiss$.complete();
+        return Promise.resolve(true);
+      });
+      modalHelperSpy.showModalWindow.and.resolveTo(overlaySpy);
+    });
+
+    it('should invoke the registered callback when closed', async () => {
+      await modalController.showModal({ component: undefined }, callbackSpy);
+      await modalController.hideTopmost();
+      expect(callbackSpy).toHaveBeenCalled();
+    });
+
+    it('should invoke the registered callback with data when closed', async () => {
+      const expectedValue = 'Returned Data 123';
+      await modalController.showModal({ component: undefined }, callbackSpy);
+      await modalController.hideTopmost(expectedValue);
+      expect(callbackSpy).toHaveBeenCalledWith(expectedValue);
+    });
+
+    it('should call close() on the returned modal when closed', async () => {
+      await modalController.showModal({ component: undefined });
+      await modalController.hideTopmost();
+      expect(overlaySpy.dismiss).toHaveBeenCalled();
+    });
+  });
+
+  describe('showActionSheet', () => {
+    let overlaySpy: jasmine.SpyObj<Overlay>;
+    beforeEach(() => {
+      overlaySpy = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss$ = new Subject<OverlayEventDetail>();
+      overlaySpy.onDidDismiss = onDidDismiss$.toPromise();
+      overlaySpy.dismiss.and.callFake((data: any) => {
+        onDidDismiss$.next({ data: data });
+        onDidDismiss$.complete();
+        return Promise.resolve(true);
+      });
+      actionSheetHelperSpy.showActionSheet.and.resolveTo(overlaySpy);
+    });
+
+    it('should invoke the registered callback when closed', async () => {
+      await modalController.showActionSheet({ items: [] }, callbackSpy);
+      await modalController.hideTopmost();
+      expect(callbackSpy).toHaveBeenCalled();
+    });
+
+    it('should invoke the registered callback with data when closed', async () => {
+      const expectedValue = 'Returned Data 123';
+      await modalController.showActionSheet({ items: [] }, callbackSpy);
+      await modalController.hideTopmost(expectedValue);
+      expect(callbackSpy).toHaveBeenCalledWith(expectedValue);
+    });
+
+    it('should call close() on the returned overlay when closed', async () => {
+      await modalController.showActionSheet({ items: [] });
+      await modalController.hideTopmost();
+      expect(overlaySpy.dismiss).toHaveBeenCalled();
+    });
+  });
+
+  describe('showAlert', () => {
+    let overlaySpy: jasmine.SpyObj<Overlay>;
+    beforeEach(() => {
+      overlaySpy = jasmine.createSpyObj('overlay', ['dismiss']);
+      const onDidDismiss$ = new Subject<OverlayEventDetail>();
+      overlaySpy.onDidDismiss = onDidDismiss$.toPromise();
+      overlaySpy.dismiss.and.callFake((data: any) => {
+        onDidDismiss$.next({ data: data });
+        onDidDismiss$.complete();
+        return Promise.resolve(true);
+      });
+      alertHelperSpy.showAlert.and.resolveTo(overlaySpy);
+    });
+
+    it('should invoke the registered callback when closed', async () => {
+      await modalController.showAlert({ title: 'Alert' }, callbackSpy);
+      await modalController.hideTopmost();
+      expect(callbackSpy).toHaveBeenCalled();
+    });
+
+    it('should invoke the registered callback with data when closed', async () => {
+      const expectedValue = 'Returned Data 123';
+      await modalController.showAlert({ title: 'Alert' }, callbackSpy);
+      await modalController.hideTopmost(expectedValue);
+      expect(callbackSpy).toHaveBeenCalledWith(expectedValue);
+    });
+
+    it('should call close() on the returned overlay when closed', async () => {
+      await modalController.showAlert({ title: 'Alert' });
+      await modalController.hideTopmost();
+      expect(overlaySpy.dismiss).toHaveBeenCalled();
+    });
+  });
+});