Merge pull request #9764 from opf/fetaure/39148-always-redirect-from-split-to-full-view-on-mobile

[39148] Generic redirect from split to full view on mobile

frontend/src/app/core/routing/openproject.routes.ts

@@ -52,6 +52,10 @@ import { BackRoutingService } from 'core-app/features/work-packages/components/b
 import { MY_ACCOUNT_LAZY_ROUTES } from 'core-app/features/user-preferences/user-preferences.lazy-routes';
 import { IAN_LAZY_ROUTES } from 'core-app/features/in-app-notifications/in-app-notifications.lazy-routes';
 import { StateObject } from '@uirouter/core/lib/state/stateObject';
+import {
+  mobileGuardActivated,
+  redirectToMobileAlternative,
+} from 'core-app/shared/helpers/routing/mobile-guard.helper';
 
 export const OPENPROJECT_ROUTES:Ng2StateDeclaration[] = [
   {
@@ -218,6 +222,15 @@ export function initializeUiRouterListeners(injector:Injector) {
   // const uiRouter = injector.get(UIRouter);
   // uiRouter.trace.enable();
 
+  // For some pages it makes no sense to display them on mobile (e.g. the split screen).
+  // If a `mobileAlternative` is specified, we redirect there instead.
+  // Actually, this would be solved with an ActiveGuard, but unfortunately ui-router does not support this.
+  // The recommended alternative is this transition hook (compare: https://github.com/angular-ui/ui-router/issues/2964)
+  $transitions.onBefore(
+    { to: (state) => (state ? mobileGuardActivated(state) : false) },
+    (transition) => redirectToMobileAlternative(transition),
+  );
+
   // Apply classes from bodyClasses in each state definition
   // This was defined as onEnter, onExit functions in each state before
   // but since AOT doesn't allow anonymous functions, we can't re-use them now.

frontend/src/app/features/work-packages/routing/split-view-routes.template.ts

@@ -53,12 +53,12 @@ import { WorkPackageCopySplitViewComponent } from 'core-app/features/work-packag
  */
 export function makeSplitViewRoutes(baseRoute:string,
   menuItemClass:string|undefined,
-  showComponent:ComponentType<any>,
-  newComponent:ComponentType<any> = WorkPackageNewSplitViewComponent,
+  showComponent:ComponentType<unknown>,
+  newComponent:ComponentType<unknown> = WorkPackageNewSplitViewComponent,
   makeFullWidth?:boolean,
   routeName = baseRoute):Ng2StateDeclaration[] {
   // makeFullWidth configuration
-  const views:any = makeFullWidth
+  const views:{ [content:string]:{ component:ComponentType<unknown>; }; } = makeFullWidth
     ? { 'content-left@^.^': { component: showComponent } }
     : { 'content-right@^.^': { component: showComponent } };
   const partition = makeFullWidth ? '-left-only' : '-split';
@@ -82,6 +82,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         baseRoute,
         newRoute: `${routeName}.new`,
         partition,
+        mobileAlternative: 'work-packages.show',
       },
       // Retarget and by that override the grandparent views
       // https://ui-router.github.io/guide/views#relative-parent-state
@@ -95,6 +96,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         baseRoute,
         menuItem: menuItemClass,
         parent: `${routeName}.details`,
+        mobileAlternative: 'work-packages.show',
       },
     },
     // Split create route
@@ -109,6 +111,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         // Remember the base route so we can route back to it anywhere
         baseRoute,
         parent: baseRoute,
+        mobileAlternative: 'work-packages.show',
       },
       views: {
         // Retarget and by that override the grandparent views
@@ -131,6 +134,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         bodyClasses: 'router--work-packages-partitioned-split-view',
         menuItem: menuItemClass,
         partition: '-split',
+        mobileAlternative: 'work-packages.show',
       },
     },
   ];

frontend/src/app/shared/helpers/routing/mobile-guard.helper.ts

@@ -0,0 +1,47 @@
+// -- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) 2012-2021 the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { StateObject } from '@uirouter/core/lib/state/stateObject';
+import { DeviceService } from 'core-app/core/browser/device.service';
+import {
+  TargetState,
+  Transition,
+} from '@uirouter/core';
+
+export function mobileGuardActivated(state:StateObject):boolean {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return
+  return state.data && state.data.mobileAlternative && (new DeviceService()).isMobile;
+}
+
+export function redirectToMobileAlternative(transition:Transition):TargetState {
+  const $state = transition.router.stateService;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+  const alternativeRoute:string = transition.to().data.mobileAlternative;
+
+  return $state.target(alternativeRoute, transition.params(), {});
+}