From ad41b21eb66788fb62690e4b148aff3369f696d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Fri, 16 Aug 2019 08:55:28 +0200 Subject: [PATCH] Split context-menu for specific table actions --- .../wp-table-context-menu.directive.ts | 199 ++---------------- .../wp-view-context-menu.directive.ts | 192 +++++++++++++++++ .../event-handler/right-click-handler.ts | 4 +- .../context-menu/context-menu-handler.ts | 4 +- 4 files changed, 209 insertions(+), 190 deletions(-) create mode 100644 frontend/src/app/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts diff --git a/frontend/src/app/components/op-context-menu/wp-context-menu/wp-table-context-menu.directive.ts b/frontend/src/app/components/op-context-menu/wp-context-menu/wp-table-context-menu.directive.ts index 1717376ef6..6cc4b38511 100644 --- a/frontend/src/app/components/op-context-menu/wp-context-menu/wp-table-context-menu.directive.ts +++ b/frontend/src/app/components/op-context-menu/wp-context-menu/wp-table-context-menu.directive.ts @@ -1,205 +1,32 @@ import {Injector} from "@angular/core"; -import { - WorkPackageAction, - WorkPackageContextMenuHelperService -} from "core-components/wp-table/context-menu-helper/wp-context-menu-helper.service"; +import {WorkPackageAction} from "core-components/wp-table/context-menu-helper/wp-context-menu-helper.service"; import {WorkPackageTable} from "core-components/wp-fast-table/wp-fast-table"; -import {States} from "core-components/states.service"; -import {WorkPackageRelationsHierarchyService} from "core-components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.service"; -import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp-table-selection.service"; -import {LinkHandling} from "core-app/modules/common/link-handling/link-handling"; -import {OpContextMenuHandler} from "core-components/op-context-menu/op-context-menu-handler"; -import {OPContextMenuService} from "core-components/op-context-menu/op-context-menu.service"; -import { - OpContextMenuItem, - OpContextMenuLocalsMap -} from "core-components/op-context-menu/op-context-menu.types"; -import {PERMITTED_CONTEXT_MENU_ACTIONS} from "core-components/op-context-menu/wp-context-menu/wp-static-context-menu-actions"; -import {OpModalService} from "core-components/op-modals/op-modal.service"; -import {WpDestroyModal} from "core-components/modals/wp-destroy-modal/wp-destroy.modal"; -import {StateService} from "@uirouter/core"; +import {WorkPackageViewContextMenu} from "core-components/op-context-menu/wp-context-menu/wp-view-context-menu.directive"; -export class OpWorkPackageContextMenu extends OpContextMenuHandler { +export class WorkPackageTableContextMenu extends WorkPackageViewContextMenu { - private states = this.injector.get(States); - private wpRelationsHierarchyService = this.injector.get(WorkPackageRelationsHierarchyService); - private opModalService:OpModalService = this.injector.get(OpModalService); - private $state:StateService = this.injector.get(StateService); - private wpTableSelection = this.injector.get(WorkPackageTableSelection); - private WorkPackageContextMenuHelper = this.injector.get(WorkPackageContextMenuHelperService); - - private workPackage = this.states.workPackages.get(this.workPackageId).value!; - private selectedWorkPackages = this.getSelectedWorkPackages(); - private permittedActions = this.WorkPackageContextMenuHelper.getPermittedActions( - this.selectedWorkPackages, - PERMITTED_CONTEXT_MENU_ACTIONS, - this.allowSplitScreenActions - ); - protected items = this.buildItems(); - - constructor(readonly injector:Injector, - readonly workPackageId:string, - public $element:JQuery, - public additionalPositionArgs:any = {}, - readonly table?:WorkPackageTable, - readonly allowSplitScreenActions:boolean = true) { - super(injector.get(OPContextMenuService)) - } - - public get locals():OpContextMenuLocalsMap { - return { contextMenuId: 'work-package-context-menu', items: this.items}; - } - - public positionArgs(evt:JQueryEventObject) { - let position = super.positionArgs(evt); - _.assign(position, this.additionalPositionArgs); - - return position; + constructor(protected injector:Injector, + protected workPackageId:string, + protected $element:JQuery, + protected additionalPositionArgs:any = {}, + protected allowSplitScreenActions:boolean = true, + protected table:WorkPackageTable) { + super(injector, workPackageId, $element, additionalPositionArgs, allowSplitScreenActions); } public triggerContextMenuAction(action:WorkPackageAction) { - const link = action.link; - switch (action.key) { - case 'delete': - this.deleteSelectedWorkPackages(); - break; - - case 'edit': - this.editSelectedWorkPackages(link); - break; - - case 'copy': - this.copySelectedWorkPackages(link); - break; - case 'relation-precedes': - if (this.table) { - this.table.timelineController.startAddRelationPredecessor(this.workPackage); - } + this.table.timelineController.startAddRelationPredecessor(this.workPackage); break; case 'relation-follows': - if (this.table) { - this.table.timelineController.startAddRelationFollower(this.workPackage); - } - break; - - case 'relation-new-child': - this.wpRelationsHierarchyService.addNewChildWp(this.workPackage); + this.table.timelineController.startAddRelationFollower(this.workPackage); break; default: - window.location.href = link; + super.triggerContextMenuAction(action); break; } } - - private deleteSelectedWorkPackages() { - var selected = this.getSelectedWorkPackages(); - this.opModalService.show(WpDestroyModal, this.injector, { workPackages: selected }); - } - - private editSelectedWorkPackages(link:any) { - var selected = this.getSelectedWorkPackages(); - - if (selected.length > 1) { - window.location.href = link; - return; - } - } - - private copySelectedWorkPackages(link:any) { - var selected = this.getSelectedWorkPackages(); - - if (selected.length > 1) { - window.location.href = link; - return; - } - - var params = { - copiedFromWorkPackageId: selected[0].id - }; - - this.$state.go('work-packages.list.copy', params); - } - - private getSelectedWorkPackages() { - let selectedWorkPackages = this.wpTableSelection.getSelectedWorkPackages(); - - if (selectedWorkPackages.length === 0) { - return [this.workPackage]; - } - - if (selectedWorkPackages.indexOf(this.workPackage) === -1) { - selectedWorkPackages.push(this.workPackage); - } - - return selectedWorkPackages; - } - - protected buildItems():OpContextMenuItem[] { - let items = this.permittedActions.map((action:WorkPackageAction) => { - return { - class: undefined as string|undefined, - disabled: false, - linkText: action.text, - href: action.href, - icon: action.icon != null ? action.icon : `icon-${action.key}`, - onClick: ($event:JQueryEventObject) => { - if (action.href && LinkHandling.isClickedWithModifier($event)) { - return false; - } - - this.triggerContextMenuAction(action); - return true; - } - }; - }); - - - if (!this.workPackage.isNew) { - items.unshift({ - disabled: false, - icon: 'icon-view-fullscreen', - class: 'openFullScreenView', - href: this.$state.href('work-packages.show', {workPackageId: this.workPackageId}), - linkText: I18n.t('js.button_open_fullscreen'), - onClick: ($event:JQueryEventObject) => { - if (LinkHandling.isClickedWithModifier($event)) { - return false; - } - - this.$state.go( - 'work-packages.show', - { workPackageId: this.workPackageId } - ); - return true; - } - }); - - if (this.allowSplitScreenActions) { - items.unshift({ - disabled: false, - icon: 'icon-view-split', - class: 'detailsViewMenuItem', - href: this.$state.href('work-packages.list.details.overview', {workPackageId: this.workPackageId}), - linkText: I18n.t('js.button_open_details'), - onClick: ($event:JQueryEventObject) => { - if (LinkHandling.isClickedWithModifier($event)) { - return false; - } - - this.$state.go( - 'work-packages.list.details.overview', - {workPackageId: this.workPackageId} - ); - return true; - } - }); - } - } - - return items; - } } diff --git a/frontend/src/app/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts b/frontend/src/app/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts new file mode 100644 index 0000000000..780957081b --- /dev/null +++ b/frontend/src/app/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts @@ -0,0 +1,192 @@ +import {Injector} from "@angular/core"; +import { + WorkPackageAction, + WorkPackageContextMenuHelperService +} from "core-components/wp-table/context-menu-helper/wp-context-menu-helper.service"; +import {WorkPackageTable} from "core-components/wp-fast-table/wp-fast-table"; +import {States} from "core-components/states.service"; +import {WorkPackageRelationsHierarchyService} from "core-components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.service"; +import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp-table-selection.service"; +import {LinkHandling} from "core-app/modules/common/link-handling/link-handling"; +import {OpContextMenuHandler} from "core-components/op-context-menu/op-context-menu-handler"; +import {OPContextMenuService} from "core-components/op-context-menu/op-context-menu.service"; +import { + OpContextMenuItem, + OpContextMenuLocalsMap +} from "core-components/op-context-menu/op-context-menu.types"; +import {PERMITTED_CONTEXT_MENU_ACTIONS} from "core-components/op-context-menu/wp-context-menu/wp-static-context-menu-actions"; +import {OpModalService} from "core-components/op-modals/op-modal.service"; +import {WpDestroyModal} from "core-components/modals/wp-destroy-modal/wp-destroy.modal"; +import {StateService} from "@uirouter/core"; + +export class WorkPackageViewContextMenu extends OpContextMenuHandler { + + protected states = this.injector.get(States); + protected wpRelationsHierarchyService = this.injector.get(WorkPackageRelationsHierarchyService); + protected opModalService:OpModalService = this.injector.get(OpModalService); + protected $state:StateService = this.injector.get(StateService); + protected wpTableSelection = this.injector.get(WorkPackageTableSelection); + protected WorkPackageContextMenuHelper = this.injector.get(WorkPackageContextMenuHelperService); + + protected workPackage = this.states.workPackages.get(this.workPackageId).value!; + protected selectedWorkPackages = this.getSelectedWorkPackages(); + protected permittedActions = this.WorkPackageContextMenuHelper.getPermittedActions( + this.selectedWorkPackages, + PERMITTED_CONTEXT_MENU_ACTIONS, + this.allowSplitScreenActions + ); + protected items = this.buildItems(); + + constructor(protected injector:Injector, + protected workPackageId:string, + protected $element:JQuery, + protected additionalPositionArgs:any = {}, + protected allowSplitScreenActions:boolean = true) { + super(injector.get(OPContextMenuService)); + } + + public get locals():OpContextMenuLocalsMap { + return { contextMenuId: 'work-package-context-menu', items: this.items}; + } + + public positionArgs(evt:JQueryEventObject) { + let position = super.positionArgs(evt); + _.assign(position, this.additionalPositionArgs); + + return position; + } + + public triggerContextMenuAction(action:WorkPackageAction) { + const link = action.link; + + switch (action.key) { + case 'delete': + this.deleteSelectedWorkPackages(); + break; + + case 'edit': + this.editSelectedWorkPackages(link); + break; + + case 'copy': + this.copySelectedWorkPackages(link); + break; + + case 'relation-new-child': + this.wpRelationsHierarchyService.addNewChildWp(this.workPackage); + break; + + default: + window.location.href = link; + break; + } + } + + private deleteSelectedWorkPackages() { + var selected = this.getSelectedWorkPackages(); + this.opModalService.show(WpDestroyModal, this.injector, { workPackages: selected }); + } + + private editSelectedWorkPackages(link:any) { + var selected = this.getSelectedWorkPackages(); + + if (selected.length > 1) { + window.location.href = link; + return; + } + } + + private copySelectedWorkPackages(link:any) { + var selected = this.getSelectedWorkPackages(); + + if (selected.length > 1) { + window.location.href = link; + return; + } + + var params = { + copiedFromWorkPackageId: selected[0].id + }; + + this.$state.go('work-packages.list.copy', params); + } + + private getSelectedWorkPackages() { + let selectedWorkPackages = this.wpTableSelection.getSelectedWorkPackages(); + + if (selectedWorkPackages.length === 0) { + return [this.workPackage]; + } + + if (selectedWorkPackages.indexOf(this.workPackage) === -1) { + selectedWorkPackages.push(this.workPackage); + } + + return selectedWorkPackages; + } + + protected buildItems():OpContextMenuItem[] { + let items = this.permittedActions.map((action:WorkPackageAction) => { + return { + class: undefined as string|undefined, + disabled: false, + linkText: action.text, + href: action.href, + icon: action.icon != null ? action.icon : `icon-${action.key}`, + onClick: ($event:JQueryEventObject) => { + if (action.href && LinkHandling.isClickedWithModifier($event)) { + return false; + } + + this.triggerContextMenuAction(action); + return true; + } + }; + }); + + + if (!this.workPackage.isNew) { + items.unshift({ + disabled: false, + icon: 'icon-view-fullscreen', + class: 'openFullScreenView', + href: this.$state.href('work-packages.show', {workPackageId: this.workPackageId}), + linkText: I18n.t('js.button_open_fullscreen'), + onClick: ($event:JQueryEventObject) => { + if (LinkHandling.isClickedWithModifier($event)) { + return false; + } + + this.$state.go( + 'work-packages.show', + { workPackageId: this.workPackageId } + ); + return true; + } + }); + + if (this.allowSplitScreenActions) { + items.unshift({ + disabled: false, + icon: 'icon-view-split', + class: 'detailsViewMenuItem', + href: this.$state.href('work-packages.list.details.overview', {workPackageId: this.workPackageId}), + linkText: I18n.t('js.button_open_details'), + onClick: ($event:JQueryEventObject) => { + if (LinkHandling.isClickedWithModifier($event)) { + return false; + } + + this.$state.go( + 'work-packages.list.details.overview', + {workPackageId: this.workPackageId} + ); + return true; + } + }); + } + } + + return items; + } +} diff --git a/frontend/src/app/components/wp-card-view/event-handler/right-click-handler.ts b/frontend/src/app/components/wp-card-view/event-handler/right-click-handler.ts index e35cad81b7..a01fc2108e 100644 --- a/frontend/src/app/components/wp-card-view/event-handler/right-click-handler.ts +++ b/frontend/src/app/components/wp-card-view/event-handler/right-click-handler.ts @@ -5,8 +5,8 @@ import {WorkPackageTableSelection} from "core-components/wp-fast-table/state/wp- import {uiStateLinkClass} from "core-components/wp-fast-table/builders/ui-state-link-builder"; import {debugLog} from "core-app/helpers/debug_output"; import {WorkPackageCardViewService} from "core-components/wp-card-view/services/wp-card-view.service"; -import {OpWorkPackageContextMenu} from "core-components/op-context-menu/wp-context-menu/wp-table-context-menu.directive"; import {OPContextMenuService} from "core-components/op-context-menu/op-context-menu.service"; +import {WorkPackageViewContextMenu} from "core-components/op-context-menu/wp-context-menu/wp-view-context-menu.directive"; export class CardRightClickHandler implements CardEventHandler { @@ -58,7 +58,7 @@ export class CardRightClickHandler implements CardEventHandler { this.wpTableSelection.setSelection(wpId, index); } - const handler = new OpWorkPackageContextMenu(this.injector, wpId, jQuery(evt.target) as JQuery, {}, undefined, card.showInfoButton); + const handler = new WorkPackageViewContextMenu(this.injector, wpId, jQuery(evt.target) as JQuery, {}, card.showInfoButton); this.opContextMenu.show(handler, evt); } diff --git a/frontend/src/app/components/wp-fast-table/handlers/context-menu/context-menu-handler.ts b/frontend/src/app/components/wp-fast-table/handlers/context-menu/context-menu-handler.ts index 5584e1ddc6..6675b361af 100644 --- a/frontend/src/app/components/wp-fast-table/handlers/context-menu/context-menu-handler.ts +++ b/frontend/src/app/components/wp-fast-table/handlers/context-menu/context-menu-handler.ts @@ -3,7 +3,7 @@ import {tableRowClassName} from '../../builders/rows/single-row-builder'; import {WorkPackageTable} from '../../wp-fast-table'; import {TableEventHandler} from '../table-handler-registry'; import {OPContextMenuService} from "core-components/op-context-menu/op-context-menu.service"; -import {OpWorkPackageContextMenu} from "core-components/op-context-menu/wp-context-menu/wp-table-context-menu.directive"; +import {WorkPackageTableContextMenu} from "core-components/op-context-menu/wp-context-menu/wp-table-context-menu.directive"; export abstract class ContextMenuHandler implements TableEventHandler { // Injections @@ -28,7 +28,7 @@ export abstract class ContextMenuHandler implements TableEventHandler { public abstract handleEvent(table:WorkPackageTable, evt:JQueryEventObject):boolean; protected openContextMenu(evt:JQueryEventObject, workPackageId:string, positionArgs?:any):void { - const handler = new OpWorkPackageContextMenu(this.injector, workPackageId, jQuery(evt.target) as JQuery, positionArgs, this.table); + const handler = new WorkPackageTableContextMenu(this.injector, workPackageId, jQuery(evt.target) as JQuery, positionArgs, this.table); this.opContextMenu.show(handler, evt); } }