Table display mode working with failing test

frontend/src/app/components/wp-list/wp-list.service.ts

@@ -204,7 +204,6 @@ export class WorkPackagesListService {
    * Load the query from the given state params
    */
   public loadCurrentQueryFromParams(projectIdentifier?:string) {
-    console.log('loadCurrentQueryFromParams: ', projectIdentifier);
     return this
       .fromQueryParams(this.$state.params as any, projectIdentifier)
       .toPromise();

frontend/src/app/components/wp-list/wp-states-initialization.service.ts

@@ -54,7 +54,6 @@ export class WorkPackageStatesInitializationService {
    * @param results
    */
   public initialize(query:QueryResource, results:WorkPackageCollectionResource) {
-    console.log('WorkPackageStatesInitializationService initialize: ', query, results);
     this.clearStates();
 
     // Update the (global) wp query states
@@ -133,7 +132,6 @@ export class WorkPackageStatesInitializationService {
   }
 
   public initializeFromQuery(query:QueryResource, results:WorkPackageCollectionResource) {
-    // console.log('WorkPackageStatesInitializationService initializeFromQuery: ', JSON.stringify(query.columns), results);
     this.querySpace.query.putValue(query);
 
     this.wpTableSum.initialize(query);

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

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, OnInit, AfterViewChecked} from "@angular/core";
+import {ChangeDetectionStrategy, Component, OnInit} from "@angular/core";
 import {WorkPackageViewHandlerToken} from "core-app/modules/work_packages/routing/wp-view-base/event-handling/event-handler-registry";
 import {BcfCardViewHandlerRegistry} from "core-app/modules/bim/ifc_models/ifc-base-view/event-handler/bcf-card-view-handler-registry";
 import {WorkPackageListViewComponent} from "core-app/modules/work_packages/routing/wp-list-view/wp-list-view.component";
@@ -12,6 +12,8 @@ import {InjectField} from "core-app/helpers/angular/inject-field.decorator";
 import {wpDisplayCardRepresentation, wpDisplayListRepresentation} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-display-representation.service";
 import {IfcModelsDataService} from "core-app/modules/bim/ifc_models/pages/viewer/ifc-models-data.service";
 import {WorkPackageViewColumnsService} from 'core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-columns.service';
+import {UIRouterGlobals, UIRouter, TransitionService} from '@uirouter/core';
+import {pluck, distinctUntilChanged, filter} from "rxjs/operators";
 
 @Component({
   templateUrl: '/app/modules/work_packages/routing/wp-list-view/wp-list-view.component.html',
@@ -24,19 +26,46 @@ import {WorkPackageViewColumnsService} from 'core-app/modules/work_packages/rout
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BcfListContainerComponent extends WorkPackageListViewComponent implements OnInit, AfterViewChecked {
+export class BcfListContainerComponent extends WorkPackageListViewComponent implements OnInit {  
   @InjectField() bimView:BimViewService;
   @InjectField() ifcModelsService:IfcModelsDataService;
   @InjectField() wpTableColumns:WorkPackageViewColumnsService;
+  @InjectField() uIRouterGlobals:UIRouterGlobals
 
   public wpTableConfiguration = {
     dragAndDropEnabled: false
   };
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Ensure we add a bcf thumbnail column
+    // until we can load the initial query
+    this.wpTableColumns
+          .onReady()
+          .then(() => {
+            this.wpTableColumns.addColumn('bcfThumbnail', 2);
+          });
+
+    this.uIRouterGlobals
+          .params$!
+          .pipe(
+            this.untilDestroyed(),
+            pluck('cards'),
+            distinctUntilChanged(),
+          )
+          .subscribe((cards:boolean) => {
+            if (cards || cards == null) {
+              this.wpDisplayRepresentation.setDisplayRepresentation(wpDisplayCardRepresentation);
+            } else {
+              this.wpDisplayRepresentation.setDisplayRepresentation(wpDisplayListRepresentation);
+            }
+
+            this.cdRef.detectChanges();
+          });
+  }
   
   protected updateViewRepresentation(query:QueryResource) {
-    console.log('updateViewRepresentation: ', this.wpTableColumns.id, this.wpTableColumns.getColumns(), query);
-    this.wpTableColumns.addColumn('bcfThumbnail', 2);
-
     if (this.wpDisplayRepresentation.current === null) {
       this.wpDisplayRepresentation.setDisplayRepresentation(wpDisplayCardRepresentation);
     }
@@ -51,9 +80,4 @@ export class BcfListContainerComponent extends WorkPackageListViewComponent impl
       return this.bimView.currentViewerState() === bimSplitViewIdentifier;
     }
   }
-
-  ngAfterViewChecked() {
-    console.log('COLUMNS: ', this.wpTableColumns.getColumns());
-    // this.wpTableColumns.addColumn('bcfThumbnail', 2);
-  }
 }

frontend/src/app/modules/bim/ifc_models/ifc-viewer/ifc-viewer.service.ts

@@ -33,7 +33,7 @@ export interface BCFLoadOptions {
 
 @Injectable()
 export class IFCViewerService extends ViewerBridgeService {
-  public shouldShowViewer = false;
+  public shouldShowViewer = true;
   private _viewer:any;
   private $loaded = new Subject<void>();
 

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

@@ -67,6 +67,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
   {
     name: 'bim.partitioned.list',
     url: '/list',
+    params: {
+      cards: true,
+    },
     data: {
       baseRoute: 'bim.partitioned.list',
       newRoute: 'bim.partitioned.list.new',

frontend/src/app/modules/bim/ifc_models/pages/viewer/bim-view.service.ts

@@ -86,7 +86,9 @@ export class BimViewService implements OnDestroy {
 
   public currentViewerState():BimViewState {
     if (this.state.includes('bim.partitioned.list')) {
-      return bimListViewIdentifier;
+      return this.state.params?.cards ?
+              bimListViewIdentifier :
+              bimTableViewIdentifier;
     } else if (this.state.includes('bim.**.model')) {
       return bimViewerViewIdentifier;
     } else {

frontend/src/app/modules/bim/ifc_models/toolbar/view-toggle/bim-view-toggle-dropdown.directive.ts

@@ -78,7 +78,7 @@ export class BimViewToggleDropdownDirective extends OpContextMenuTrigger {
     const current = this.bimView.current;
     const viewRoute = this.state.current.data.viewRoute;
     let items = this.viewerBridgeService.shouldShowViewer ?
-                  [bimViewerViewIdentifier, bimListViewIdentifier, bimSplitViewIdentifier] :
+                  [bimViewerViewIdentifier, bimListViewIdentifier, bimSplitViewIdentifier, bimTableViewIdentifier] :
                   [bimListViewIdentifier, bimTableViewIdentifier];
 
     this.items = items
@@ -94,19 +94,22 @@ export class BimViewToggleDropdownDirective extends OpContextMenuTrigger {
                         }
 
                         switch (key) {
+                          // This project controls the view representation of the data through
+                          // the wpDisplayRepresentation service that modifies the QuerySpace
+                          // to inform the component about which display mode is active
+                          // (this.querySpace.query.live$).
+                          // Under the hood it is done by modifying the params of actual route.
+                          // Because of that, it is no possible to call this.state.go and
+                          // this.wpDisplayRepresentation.setDisplayRepresentation at the same
+                          // time, it raises a route error (The transition has been superseded by 
+                          // a different transition...). Is this why we are passing a cards params
+                          // to inform the view about the display representation mode it has to 
+                          // show (cards or list).
                           case bimListViewIdentifier:
-                            console.log('this.state.current: ', this.state.current);
-                            this.wpDisplayRepresentation.setDisplayRepresentation(wpDisplayCardRepresentation);
-                            if (this.state.current.name !== 'bim.partitioned.list') {
-                              this.state.go('bim.partitioned.list');
-                            }
+                              this.state.go('bim.partitioned.list', {cards: true});
                             break;
                             case bimTableViewIdentifier:
-                            console.log('this.state.current 2: ', this.state.current);
-                            this.wpDisplayRepresentation.setDisplayRepresentation(wpDisplayListRepresentation);
-                            if (this.state.current.name !== 'bim.partitioned.list') {
-                              this.state.go('bim.partitioned.list');
-                            }
+                              this.state.go('bim.partitioned.list', {cards: false});
                             break;
                           case bimViewerViewIdentifier:
                             this.state.go('bim.partitioned.model');

frontend/src/app/modules/work_packages/routing/wp-list-view/wp-list-view.component.html

@@ -1,14 +1,14 @@
 <div class="result-overlay"
-     *ngIf="(showResultOverlay$ | async) && showListView"></div>
+     *ngIf="(showResultOverlay$ | async) && showTableView"></div>
 
 <!-- TABLE + TIMELINE horizontal split -->
-<wp-table *ngIf="tableInformationLoaded && showListView"
+<wp-table *ngIf="tableInformationLoaded && showTableView"
           [projectIdentifier]="CurrentProject.identifier"
           [configuration]="wpTableConfiguration"
           class="work-packages-split-view--tabletimeline-content"></wp-table>
 
 <!-- GRID representation of the WP -->
-<div *ngIf="!showListView"
+<div *ngIf="!showTableView"
      class="work-packages--card-view-container"
      [ngClass]="{ '-with-resizer': showResizerInCardView() }" >
   <wp-grid [configuration]="wpTableConfiguration"

frontend/src/app/modules/work_packages/routing/wp-list-view/wp-list-view.component.ts

@@ -26,7 +26,7 @@
 // See docs/COPYRIGHT.rdoc for more details.
 // ++
 
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit, OnChanges, SimpleChanges} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnInit} from "@angular/core";
 import {take} from "rxjs/operators";
 import {CausedUpdatesService} from "core-app/modules/boards/board/caused-updates/caused-updates.service";
 import {DragAndDropService} from "core-app/modules/common/drag-and-drop/drag-and-drop.service";
@@ -44,9 +44,6 @@ import {CurrentProjectService} from "core-components/projects/current-project.se
 import {WorkPackageViewFiltersService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-filters.service";
 import {UntilDestroyedMixin} from "core-app/helpers/angular/until-destroyed.mixin";
 import {QueryResource} from "core-app/modules/hal/resources/query-resource";
-import {WorkPackageViewColumnsService} from 'core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-columns.service';
-import {InjectField} from "core-app/helpers/angular/inject-field.decorator";
-
 
 @Component({
   selector: 'wp-list-view',
@@ -60,8 +57,7 @@ import {InjectField} from "core-app/helpers/angular/inject-field.decorator";
     CausedUpdatesService
   ]
 })
-export class WorkPackageListViewComponent extends UntilDestroyedMixin implements OnInit, OnChanges {
-  @InjectField() wpTableColumns:WorkPackageViewColumnsService;
+export class WorkPackageListViewComponent extends UntilDestroyedMixin implements OnInit {
 
   text = {
     'jump_to_pagination': this.I18n.t('js.work_packages.jump_marks.pagination'),
@@ -70,7 +66,7 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
   };
 
   /** Switch between list and card view */
-  showListView:boolean = true;
+  showTableView:boolean = true;
 
   /** Determine when query is initially loaded */
   tableInformationLoaded = false;
@@ -104,7 +100,6 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
     this.querySpace.query.values$().pipe(
       this.untilDestroyed()
     ).subscribe((query) => {
-      console.log('this.querySpace: ', query, this.wpTableColumns.getColumns());
       // Update the visible representation
       this.updateViewRepresentation(query);
       this.noResults = query.results.total === 0;
@@ -112,10 +107,6 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
     });
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    console.log('changes: ', changes);
-  }
-
   protected setupInformationLoadedListener() {
     this
       .querySpace
@@ -123,7 +114,6 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
       .values$()
       .pipe(take(1))
       .subscribe(() => {
-        // console.log('this.querySpace 2: ', this.wpTableColumns.getColumns());
         this.tableInformationLoaded = true;
         this.cdRef.detectChanges();
       });
@@ -134,7 +124,7 @@ export class WorkPackageListViewComponent extends UntilDestroyedMixin implements
   }
 
   protected updateViewRepresentation(query:QueryResource) {
-    this.showListView = !(this.deviceService.isMobile ||
+    this.showTableView = !(this.deviceService.isMobile ||
       this.wpDisplayRepresentation.valueFromQuery(query) === wpDisplayCardRepresentation);
   }
 }

frontend/src/app/modules/work_packages/routing/wp-view-base/view-services/wp-view-base.service.ts

@@ -65,13 +65,10 @@ export abstract class WorkPackageViewBaseService<T> {
    */
   public initialize(query:QueryResource, results:WorkPackageCollectionResource, schema?:QuerySchemaResource) {
     const initial = this.valueFromQuery(query, results)!;
-    // console.log('WorkPackageViewBaseService initialize: ', this.id, query, results);
     this.pristineState.putValue(initial);
   }
 
   public update(value:T) {
-    console.log('WorkPackageViewBaseService update: ', value);
-
     this.updatesState.putValue(value);
   }
 

frontend/src/app/modules/work_packages/routing/wp-view-base/view-services/wp-view-columns.service.ts

@@ -33,18 +33,18 @@ import {States} from 'core-components/states.service';
 import {Injectable} from '@angular/core';
 import {cloneHalResourceCollection} from 'core-app/modules/hal/helpers/hal-resource-builder';
 import {QueryColumn, queryColumnTypes} from "core-components/wp-query/query-column";
+import {combine} from "reactivestates";
+import {mapTo, take} from "rxjs/operators";
 
 @Injectable()
 export class WorkPackageViewColumnsService extends WorkPackageQueryStateService<QueryColumn[]> {
 
   public constructor(readonly states:States, readonly querySpace:IsolatedQuerySpace) {
     super(querySpace);
-    console.log('WorkPackageViewColumnsService: ', states, querySpace);
   }
 
   public initialize(query:any, results:any, schema?:any) {
     super.initialize(query, results, schema);
-    console.log('--WorkPackageViewColumnsService initialize: ', this.lastUpdatedState.getValueOr([]), query, results);
   }
 
   public valueFromQuery(query:QueryResource):QueryColumn[] {
@@ -155,7 +155,6 @@ export class WorkPackageViewColumnsService extends WorkPackageQueryStateService<
    * Update the selected columns to a new set of columns.
    */
   public setColumns(columns:QueryColumn[]) {
-    // console.log('setColumns: ', columns);
     // Don't publish if this is the same content
     if (this.isCurrentlyEqualTo(columns)) {
       return;
@@ -210,7 +209,6 @@ export class WorkPackageViewColumnsService extends WorkPackageQueryStateService<
    */
   public addColumn(id:string, position?:number) {
     let columns = this.getColumns();
-    // console.log('addColumn: ', columns, this.all);
 
     if (position === undefined) {
       position = columns.length;
@@ -248,7 +246,6 @@ export class WorkPackageViewColumnsService extends WorkPackageQueryStateService<
 
   // Get the available state
   protected get availableState() {
-    // console.log('availableState: ', this.states.queries.columns, this.states.queries.columns.getValueOr([]));
     return this.states.queries.columns;
   }
 
@@ -278,4 +275,17 @@ export class WorkPackageViewColumnsService extends WorkPackageQueryStateService<
   public get unused():QueryColumn[] {
     return _.differenceBy(this.all, this.getColumns(), '$href');
   }
+
+  /**
+   * Columns service depends on two states
+   */
+  public onReady() {
+    return combine(this.pristineState, this.availableState)
+      .values$()
+      .pipe(
+        take(1),
+        mapTo(null)
+      )
+      .toPromise();
+  }
 }

frontend/src/typings.d.ts

@@ -1,5 +1,7 @@
 /// <reference path="../tests/typings/tests.d.ts" />
-
+// Explicitly add UiRouterRx typings (in order to use params$ type)
+// https://github.com/ui-router/angular/issues/166
+/// <reference path="../node_modules/@uirouter/rx/lib/core.augment.d.ts" />
 /* SystemJS module definition */
 declare var module:NodeModule;
 declare module 'dom-plane' {

modules/bim/spec/features/bim_revit_addin_navigation_spec.rb

@@ -33,9 +33,10 @@ describe 'BIM Revit Add-in navigation spec',
          with_config: { edition: 'bim' },
          js: true,
          driver: :chrome_headless_revit_addin do
-  let(:project) { FactoryBot.create :project, enabled_module_names: %i[bim work_package_tracking] }
+  let(:project) { FactoryBot.create :project, enabled_module_names: [:bim, :work_package_tracking] }
   let!(:work_package) { FactoryBot.create(:work_package, project: project) }
   let(:role) { FactoryBot.create(:role, permissions: %i[view_ifc_models manage_ifc_models view_work_packages]) }
+  let(:wp_table) { ::Pages::WorkPackagesTable.new(project) }
 
   let(:user) do
     FactoryBot.create :user,
@@ -59,7 +60,17 @@ describe 'BIM Revit Add-in navigation spec',
     model_page.model_viewer_visible false
   end
 
-  it 'has no viewer options' do
-    model_page.has_no_menu_item_with_text? 'Viewer'
+  it 'shows a toolbar' do
+    model_page.page_shows_a_toolbar true
+  end
+  
+  it 'menu has no viewer options' do
+    model_page.has_no_menu_item_with_text 'Viewer'
+  end
+
+  it 'can switch to the Table view mode' do
+    model_page.switch_view 'Table'
+    expect(page).to have_selector('.work-package-table')
+    wp_table.expect_work_package_listed work_package
   end
 end