Merge pull request #9985 from opf/bug/40267-opening-viewpoints-from-gallery-does-not-work-on-mobile

[#40267] Opening viewpoints on mobile

frontend/src/app/features/bim/ifc_models/bcf/list/bcf-list.component.html

@@ -24,7 +24,7 @@
      [ngClass]="{ '_with-resizer': showResizerInCardView() }">
   <wp-grid [configuration]="wpTableConfiguration"
            [showResizer]="showResizerInCardView()"
-           (itemClicked)="handleWorkPackageCardClicked($event)"
+           (itemClicked)="handleWorkPackageClicked($event)"
            (stateLinkClicked)="openStateLink($event)"
            resizerClass="work-packages-partitioned-page--content-right"
            resizerStorageKey="openProject-splitViewFlexBasis">

frontend/src/app/features/bim/ifc_models/bcf/list/bcf-list.component.ts

@@ -29,22 +29,28 @@
 import {
   ChangeDetectionStrategy, Component, Input, NgZone, OnInit,
 } from '@angular/core';
-import { WorkPackageListViewComponent } from 'core-app/features/work-packages/routing/wp-list-view/wp-list-view.component';
-import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
-import { WorkPackageNotificationService } from 'core-app/features/work-packages/services/notifications/work-package-notification.service';
-import { DragAndDropService } from 'core-app/shared/helpers/drag-and-drop/drag-and-drop.service';
-import { CausedUpdatesService } from 'core-app/features/boards/board/caused-updates/caused-updates.service';
-import { BcfViewService } from 'core-app/features/bim/ifc_models/pages/viewer/bcf-view.service';
-import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
-import { IfcModelsDataService } from 'core-app/features/bim/ifc_models/pages/viewer/ifc-models-data.service';
-import { WorkPackageViewColumnsService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-columns.service';
 import { UIRouterGlobals } from '@uirouter/core';
 import { States } from 'core-app/core/states/states.service';
+import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import { DragAndDropService } from 'core-app/shared/helpers/drag-and-drop/drag-and-drop.service';
 import { BcfApiService } from 'core-app/features/bim/bcf/api/bcf-api.service';
+import { QueryResource } from 'core-app/features/hal/resources/query-resource';
+import { BcfViewService } from 'core-app/features/bim/ifc_models/pages/viewer/bcf-view.service';
 import { splitViewRoute } from 'core-app/features/work-packages/routing/split-view-routes.helper';
 import { ViewerBridgeService } from 'core-app/features/bim/bcf/bcf-viewer-bridge/viewer-bridge.service';
-import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
-import { QueryResource } from 'core-app/features/hal/resources/query-resource';
+import { CausedUpdatesService } from 'core-app/features/boards/board/caused-updates/caused-updates.service';
+import { IfcModelsDataService } from 'core-app/features/bim/ifc_models/pages/viewer/ifc-models-data.service';
+import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
+import {
+  WorkPackageListViewComponent,
+} from 'core-app/features/work-packages/routing/wp-list-view/wp-list-view.component';
+import {
+  WorkPackageViewColumnsService,
+} from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-columns.service';
+import {
+  WorkPackageNotificationService,
+} from 'core-app/features/work-packages/services/notifications/work-package-notification.service';
 
 @Component({
   templateUrl: './bcf-list.component.html',
@@ -118,7 +124,7 @@ export class BcfListComponent extends WorkPackageListViewComponent implements Un
       }
     }
 
-    if (double) {
+    if (double || this.deviceService.isMobile) {
       this.goToWpDetailState(workPackageId, this.uIRouterGlobals.params.cards);
     }
   }

frontend/src/app/features/bim/ifc_models/openproject-ifc-models.routes.ts

@@ -56,6 +56,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
     redirectTo: 'bim.partitioned.list',
     url: '',
     component: IFCViewerPageComponent,
+    data: {
+      bodyClasses: 'router--bim',
+    },
   },
   {
     name: 'bim.partitioned.list',
@@ -85,7 +88,7 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
   },
   {
     name: 'bim.partitioned.show',
-    url: '/show/{workPackageId:[0-9]+}?{cards:bool}',
+    url: '/show/{workPackageId:[0-9]+}',
     data: {
       baseRoute: 'bim.partitioned.list',
       partition: '-left-only',
@@ -93,19 +96,23 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
     reloadOnSearch: false,
     redirectTo: 'bim.partitioned.show.details',
   },
-  // BCF single view for list
+  // BCF full view detail routes for usage in revit addi-in
   ...makeSplitViewRoutes(
     'bim.partitioned.list',
     undefined,
     WorkPackageSplitViewComponent,
     undefined,
     true,
+    false,
     'bim.partitioned.show',
   ),
-  // BCF single view for list
+  // BCF split view detail routes
   ...makeSplitViewRoutes(
     'bim.partitioned.list',
     undefined,
     WorkPackageSplitViewComponent,
+    undefined,
+    false,
+    false,
   ),
 ];

frontend/src/app/features/bim/ifc_models/pages/viewer/ifc-viewer-page.component.ts

@@ -70,6 +70,7 @@ import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packa
     BcfViewService,
     QueryParamListenerService,
   ],
+  selector: 'op-ifc-viewer-page',
 })
 export class IFCViewerPageComponent extends PartitionedQuerySpacePageComponent implements UntilDestroyedMixin, OnInit {
   text = {

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output,
 } from '@angular/core';
-import { checkedClassName, uiStateLinkClass } from 'core-app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder';
+import { uiStateLinkClass } from 'core-app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { Highlighting } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
 import { StateService } from '@uirouter/core';
@@ -94,6 +94,7 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
     this.wpTableSelection.setSelection(wp.id!, this.cardView.findRenderedCard(classIdentifier));
     this.wpTableFocus.updateFocus(wp.id!);
     this.stateLinkClicked.emit({ workPackageId: wp.id!, requestedState: stateToEmit });
+    event.preventDefault();
   }
 
   public cardClasses():{ [className:string]:boolean } {

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

@@ -56,6 +56,7 @@ export function makeSplitViewRoutes(baseRoute:string,
   showComponent:ComponentType<unknown>,
   newComponent:ComponentType<unknown> = WorkPackageNewSplitViewComponent,
   makeFullWidth?:boolean,
+  showMobileAlternative = true,
   routeName = baseRoute):Ng2StateDeclaration[] {
   // makeFullWidth configuration
   const views:{ [content:string]:{ component:ComponentType<unknown>; }; } = makeFullWidth
@@ -82,7 +83,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         baseRoute,
         newRoute: `${routeName}.new`,
         partition,
-        mobileAlternative: 'work-packages.show',
+        mobileAlternative: showMobileAlternative ? 'work-packages.show' : undefined,
       },
       // Retarget and by that override the grandparent views
       // https://ui-router.github.io/guide/views#relative-parent-state
@@ -96,7 +97,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         baseRoute,
         menuItem: menuItemClass,
         parent: `${routeName}.details`,
-        mobileAlternative: 'work-packages.show',
+        mobileAlternative: showMobileAlternative ? 'work-packages.show' : undefined,
       },
     },
     // Split create route
@@ -116,7 +117,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',
+        mobileAlternative: showMobileAlternative ? 'work-packages.show' : undefined,
       },
       views: {
         // Retarget and by that override the grandparent views
@@ -139,7 +140,7 @@ export function makeSplitViewRoutes(baseRoute:string,
         bodyClasses: 'router--work-packages-partitioned-split-view',
         menuItem: menuItemClass,
         partition: '-split',
-        mobileAlternative: 'work-packages.show',
+        mobileAlternative: showMobileAlternative ? 'work-packages.show' : undefined,
       },
     },
   ];

frontend/src/app/features/work-packages/routing/wp-list-view/wp-list-view.component.ts

@@ -188,7 +188,7 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
    * Special handling for clicking on cards.
    * If we are on mobile, a click on the card should directly open the full view
    */
-  handleWorkPackageCardClicked(event:{ workPackageId:string; double:boolean }) {
+  handleWorkPackageCardClicked(event:{ workPackageId:string; double:boolean }):void {
     if (this.deviceService.isMobile) {
       this.openInFullView(event.workPackageId);
     } else {

frontend/src/global_styles/content/modules/_bim.sass

@@ -7,6 +7,7 @@
     flex: 0 0 250px
     margin: 10px
     padding: 10px
+
     &.-failed
       border: 1px solid #EAEAEA
 
@@ -17,6 +18,10 @@
   margin-bottom: 50px
 
 table.attributes-table
-  td,th
+  td, th
     padding: 5px
     text-align: center
+
+@media only screen and (max-width: 679px)
+  .router--bim .work-packages--details
+    min-width: 0

modules/bim/spec/features/bim_navigation_spec.rb

@@ -82,8 +82,8 @@ describe 'BIM navigation spec',
       end
 
       it 'can switch between the different view modes' do
-        # Go to single view
-        card_view.open_full_screen_by_details(work_package)
+        # Opening details view with info icon
+        card_view.click_info_icon(work_package)
 
         details_view.ensure_page_loaded
         details_view.expect_subject
@@ -115,8 +115,8 @@ describe 'BIM navigation spec',
         expect(page).to have_selector('[data-qa-selector="op-wp-card-view"]')
         card_view.expect_work_package_listed work_package
 
-        # Go to single view
-        card_view.open_full_screen_by_details(work_package)
+        # Go to details view
+        card_view.click_id_link(work_package)
 
         details_view.ensure_page_loaded
         details_view.expect_subject

modules/bim/spec/features/viewer/show_viewpoint_spec.rb

@@ -96,7 +96,7 @@ describe 'Show viewpoint in model viewer',
 
   context 'when in details view' do
     before do
-      card_view.open_full_screen_by_details(work_package)
+      card_view.click_info_icon(work_package)
       bcf_details.expect_viewpoint_count(1)
 
       # We need to wait a bit for xeokit to be initialized

spec/support/pages/work_packages/work_package_cards.rb

@@ -90,6 +90,11 @@ module Pages
       card_element.find('[data-qa-selector="op-wp-single-card--details-button"]').click
     end
 
+    def click_id_link(work_package)
+      card_element = card(work_package)
+      card_element.find('.__ui-state-link').click
+    end
+
     def deselect_work_package(work_package)
       element = find("wp-single-card[data-work-package-id='#{work_package.id}']")