From a75b9e70eb40b0ab2428b66c7beb5705be6f1244 Mon Sep 17 00:00:00 2001 From: Henriette Dinger Date: Tue, 13 Aug 2019 10:51:23 +0200 Subject: [PATCH] Add double click handler to card event registry --- .../card-view-handler-registry.ts | 5 +- .../event-handler/click-handler.ts | 8 +-- .../event-handler/double-click-handler.ts | 54 +++++++++++++++++++ .../wp-card-view/wp-card-view.component.html | 1 - .../wp-card-view/wp-card-view.component.ts | 22 +++----- 5 files changed, 66 insertions(+), 24 deletions(-) create mode 100644 frontend/src/app/components/wp-card-view/event-handler/double-click-handler.ts diff --git a/frontend/src/app/components/wp-card-view/event-handler/card-view-handler-registry.ts b/frontend/src/app/components/wp-card-view/event-handler/card-view-handler-registry.ts index 80ad1b599d..c4e8f4fa42 100644 --- a/frontend/src/app/components/wp-card-view/event-handler/card-view-handler-registry.ts +++ b/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) { diff --git a/frontend/src/app/components/wp-card-view/event-handler/click-handler.ts b/frontend/src/app/components/wp-card-view/event-handler/click-handler.ts index 84e91fc679..faa901d53f 100644 --- a/frontend/src/app/components/wp-card-view/event-handler/click-handler.ts +++ b/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'); diff --git a/frontend/src/app/components/wp-card-view/event-handler/double-click-handler.ts b/frontend/src/app/components/wp-card-view/event-handler/double-click-handler.ts new file mode 100644 index 0000000000..4c5f932ff5 --- /dev/null +++ b/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; + } +} + diff --git a/frontend/src/app/components/wp-card-view/wp-card-view.component.html b/frontend/src/app/components/wp-card-view/wp-card-view.component.html index 4f3b6b5524..aa69f22fa6 100644 --- a/frontend/src/app/components/wp-card-view/wp-card-view.component.html +++ b/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) }">
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; }