Split context-menu for specific table actions

pull/7547/head
Oliver Günther 5 years ago
parent 6fc33f2734
commit ad41b21eb6
No known key found for this signature in database
GPG Key ID: A3A8BDAD7C0C552C
  1. 199
      frontend/src/app/components/op-context-menu/wp-context-menu/wp-table-context-menu.directive.ts
  2. 192
      frontend/src/app/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts
  3. 4
      frontend/src/app/components/wp-card-view/event-handler/right-click-handler.ts
  4. 4
      frontend/src/app/components/wp-fast-table/handlers/context-menu/context-menu-handler.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;
}
}

@ -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;
}
}

@ -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);
}

@ -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);
}
}

Loading…
Cancel
Save