Add double click handler to card event registry

frontend/src/app/components/wp-card-view/event-handler/card-view-handler-registry.ts

@@ -1,6 +1,7 @@
 import {Injector} from '@angular/core';
 import {WorkPackageCardViewComponent} from "core-components/wp-card-view/wp-card-view.component";
 import {CardClickHandler} from "core-components/wp-card-view/event-handler/click-handler";
+import {CardDblClickHandler} from "core-components/wp-card-view/event-handler/double-click-handler";
 
 export interface CardEventHandler {
   EVENT:string;
@@ -18,7 +19,9 @@ export class CardViewHandlerRegistry {
 
   private eventHandlers:((c:WorkPackageCardViewComponent) => CardEventHandler)[] = [
     // Clicking on the card (not within a cell)
-    c => new CardClickHandler(this.injector, c)
+    c => new CardClickHandler(this.injector, c),
+    // Double Clicking on the row (not within a cell)
+    c => new CardDblClickHandler(this.injector, c),
   ];
 
   attachTo(card:WorkPackageCardViewComponent) {

frontend/src/app/components/wp-card-view/event-handler/click-handler.ts

@@ -1,9 +1,6 @@
 import {Injector} from '@angular/core';
-import {StateService} from '@uirouter/core';
 import {CardEventHandler} from "core-components/wp-card-view/event-handler/card-view-handler-registry";
 import {WorkPackageCardViewComponent} from "core-components/wp-card-view/wp-card-view.component";
-import {States} from "core-components/states.service";
-import {KeepTabService} from "core-components/wp-single-view-tabs/keep-tab/keep-tab.service";
 import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp-table-selection.service";
 import {WorkPackageTableFocusService} from "core-components/wp-fast-table/state/wp-table-focus.service";
 import {WorkPackageCardViewService} from "core-components/wp-card-view/services/wp-card-view.service";
@@ -11,9 +8,6 @@ import {WorkPackageCardViewService} from "core-components/wp-card-view/services/
 export class CardClickHandler implements CardEventHandler {
 
   // Injections
-  public $state:StateService = this.injector.get(StateService);
-  public states:States = this.injector.get(States);
-  public keepTab:KeepTabService = this.injector.get(KeepTabService);
   public wpTableSelection:WorkPackageTableSelection = this.injector.get(WorkPackageTableSelection);
   public wpTableFocus:WorkPackageTableFocusService = this.injector.get(WorkPackageTableFocusService);
   public wpCardView:WorkPackageCardViewService = this.injector.get(WorkPackageCardViewService);
@@ -42,7 +36,7 @@ export class CardClickHandler implements CardEventHandler {
       return true;
     }
 
-    // Locate the row from event
+    // Locate the card from event
     let element = target.closest(this.SELECTOR);
     let wpId = element.data('workPackageId');
     let classIdentifier = element.data('classIdentifier');

frontend/src/app/components/wp-card-view/event-handler/double-click-handler.ts

@@ -0,0 +1,54 @@
+import {Injector} from '@angular/core';
+import {CardEventHandler} from "core-components/wp-card-view/event-handler/card-view-handler-registry";
+import {WorkPackageCardViewComponent} from "core-components/wp-card-view/wp-card-view.component";
+import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp-table-selection.service";
+import {WorkPackageTableFocusService} from "core-components/wp-fast-table/state/wp-table-focus.service";
+import {StateService} from "@uirouter/core";
+
+export class CardDblClickHandler implements CardEventHandler {
+
+  // Injections
+  public $state:StateService = this.injector.get(StateService);
+  public wpTableSelection:WorkPackageTableSelection = this.injector.get(WorkPackageTableSelection);
+  public wpTableFocus:WorkPackageTableFocusService = this.injector.get(WorkPackageTableFocusService);
+
+  constructor(public readonly injector:Injector,
+              card:WorkPackageCardViewComponent) {
+  }
+
+  public get EVENT() {
+    return 'dblclick.cardView.card';
+  }
+
+  public get SELECTOR() {
+    return `.wp-card`;
+  }
+
+  public eventScope(card:WorkPackageCardViewComponent) {
+    return jQuery(card.container.nativeElement);
+  }
+
+  public handleEvent(card:WorkPackageCardViewComponent, evt:JQueryEventObject) {
+    let target = jQuery(evt.target);
+
+    // Ignore links
+    if (target.is('a') || target.parent().is('a')) {
+      return true;
+    }
+
+    // Locate the row from event
+    let element = target.closest(this.SELECTOR);
+    let wpId = element.data('workPackageId');
+
+    if (!wpId) {
+      return true;
+    }
+
+    this.$state.go(
+      'work-packages.show',
+      {workPackageId: wpId}
+    );
+    return false;
+  }
+}
+

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -13,7 +13,6 @@
        [attr.data-is-new]="wp.isNew || undefined"
        [attr.data-work-package-id]="wp.id"
        [attr.data-class-identifier]="classIdentifier(wp)"
-       (doubleClickOrTap)="handleDblClick(wp)"
        [ngClass]="{'-draggable': canDragOutOf(wp), '-new' : wp.isNew, '-checked' : isSelected(wp) }">
 
     <div class="wp-card--highlighting"

frontend/src/app/components/wp-card-view/wp-card-view.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -48,7 +49,7 @@ export type CardViewOrientation = 'horizontal'|'vertical';
   templateUrl: './wp-card-view.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class WorkPackageCardViewComponent  implements OnInit {
+export class WorkPackageCardViewComponent  implements OnInit, AfterViewInit {
   @Input('dragOutOfHandler') public canDragOutOf:(wp:WorkPackageResource) => boolean;
   @Input() public dragInto:boolean;
   @Input() public highlightingMode:CardHighlightingMode;
@@ -157,9 +158,6 @@ export class WorkPackageCardViewComponent  implements OnInit {
       this.workPackages = query.results.elements;
       this.isResultEmpty = this.workPackages.length === 0;
       this.cdRef.detectChanges();
-
-      // Register event handlers for the cards
-      new CardViewHandlerRegistry(this.injector).attachTo(this);
     });
 
     // Update selection state
@@ -172,12 +170,13 @@ export class WorkPackageCardViewComponent  implements OnInit {
       });
   }
 
-  ngOnDestroy():void {
-    this.dragService.remove(this.container.nativeElement);
+  ngAfterViewInit() {
+    // Register event handlers for the cards
+    new CardViewHandlerRegistry(this.injector).attachTo(this);
   }
 
-  public handleDblClick(wp:WorkPackageResource) {
-    this.goToWpFullView(wp.id!);
+  ngOnDestroy():void {
+    this.dragService.remove(this.container.nativeElement);
   }
 
   public openSplitScreen(wp:WorkPackageResource) {
@@ -187,13 +186,6 @@ export class WorkPackageCardViewComponent  implements OnInit {
     );
   }
 
-  private goToWpFullView(wpId:string) {
-    this.$state.go(
-      'work-packages.show',
-      {workPackageId: wpId}
-    );
-  }
-
   public wpTypeAttribute(wp:WorkPackageResource) {
     return wp.type.name;
   }