From eb52525aaec7eb20259ee640e23cea72230a16d4 Mon Sep 17 00:00:00 2001 From: Yanick Minder Date: Wed, 23 Oct 2024 13:44:40 +0200 Subject: [PATCH] implement new objective dialog start --- .../objective/objective.component.html | 151 +++++++++--------- .../objective/objective.component.ts | 137 +++------------- .../objective-menu-actions.service.ts | 85 ++++++++++ 3 files changed, 185 insertions(+), 188 deletions(-) create mode 100644 frontend/src/app/services/objective-menu-actions.service.ts diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html index 48fd01a194..ea8f8cad23 100644 --- a/frontend/src/app/components/objective/objective.component.html +++ b/frontend/src/app/components/objective/objective.component.html @@ -1,81 +1,82 @@ -
-
-
-
- +
+
+
+
+ The objectives state +

{{ objective.title }}

+
+
- -
-
- -
+
+ +
-
- -
+
+ +
+
- - - - + + + diff --git a/frontend/src/app/components/objective/objective.component.ts b/frontend/src/app/components/objective/objective.component.ts index be971d3ae9..681939915f 100644 --- a/frontend/src/app/components/objective/objective.component.ts +++ b/frontend/src/app/components/objective/objective.component.ts @@ -16,20 +16,17 @@ import { KeyresultDialogComponent } from '../keyresult-dialog/keyresult-dialog.c import { TranslateService } from '@ngx-translate/core'; import { GJ_REGEX_PATTERN } from '../../shared/constantLibary'; import { DialogService } from '../../services/dialog.service'; +import { ObjectiveMenuActionsService, ObjectiveMenuEntry } from '../../services/objective-menu-actions.service'; @Component({ selector: 'app-objective-column', templateUrl: './objective.component.html', styleUrls: ['./objective.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, }) export class ObjectiveComponent implements OnInit { @Input() isWritable!: boolean; - - menuEntries: MenuEntry[] = []; isComplete: boolean = false; - isBacklogQuarter: boolean = false; protected readonly trackByFn = trackByFn; @ViewChild('menuButton') private menuButton!: ElementRef; @@ -39,6 +36,7 @@ export class ObjectiveComponent implements OnInit { private refreshDataService: RefreshDataService, private objectiveService: ObjectiveService, private translate: TranslateService, + private objectiveMenuActionsService: ObjectiveMenuActionsService, ) {} @Input() @@ -48,14 +46,7 @@ export class ObjectiveComponent implements OnInit { public objective$ = new BehaviorSubject({} as ObjectiveMin); - ngOnInit() { - if (this.objective$.value.state.includes('successful') || this.objective$.value.state.includes('not-successful')) { - this.isComplete = true; - } - if (!GJ_REGEX_PATTERN.test(this.objective$.value.quarter.label)) { - this.isBacklogQuarter = true; - } - } + ngOnInit() {} formatObjectiveState(state: string): string { const lastIndex = state.lastIndexOf('-'); @@ -70,109 +61,27 @@ export class ObjectiveComponent implements OnInit { return this.translate.instant('INFORMATION.OBJECTIVE_STATE_TOOLTIP'); } - getMenu(): void { - if (this.objective$.value.state.includes('successful') || this.objective$.value.state.includes('not-successful')) { - this.menuEntries = this.getCompletedMenuActions(); - } else { - if (this.objective$.value.state === State.ONGOING) { - this.menuEntries = this.getOngoingMenuActions(); - } else { - this.menuEntries = this.getDraftMenuActions(); - } - } - } - - getOngoingMenuActions() { - return [ - ...this.getDefaultMenuActions(), - ...[ - { - displayName: 'Objective abschliessen', - action: 'complete', - dialog: { dialog: CompleteDialogComponent, data: { objectiveTitle: this.objective$.value.title } }, - }, - { - displayName: 'Objective als Draft speichern', - action: 'todraft', - dialog: { - dialog: ConfirmDialogComponent, - data: { - title: 'Check-in im Draft-Status', - text: 'Dein Objective befindet sich noch im DRAFT Status. Möchtest du das Check-in trotzdem erfassen?', - }, - }, - }, - ], - ]; - } - - getDraftMenuActions() { - const releaseText = this.translate.instant('CONFIRMATION.RELEASE.TEXT'); - const releaseBacklogText = 'releaseBacklog'; - const dialogText = this.isBacklogQuarter ? releaseText : releaseBacklogText; - let menuEntries = { - displayName: 'Objective veröffentlichen', - action: this.isBacklogQuarter ? 'releaseBacklog' : 'release', - dialog: { - dialog: this.isBacklogQuarter ? ObjectiveFormComponent : ConfirmDialogComponent, - data: { - title: this.translate.instant('CONFIRMATION.RELEASE.TITLE'), - text: dialogText, - action: dialogText, - objectiveId: this.isBacklogQuarter ? this.objective$.value.id : undefined, - }, - }, - }; - - return [...this.getDefaultMenuActions(), menuEntries]; - } - - getDefaultMenuActions() { - return [ - { - displayName: 'Objective bearbeiten', - dialog: { dialog: ObjectiveFormComponent, data: { objectiveId: this.objective$.value.id } }, - }, - { - displayName: 'Objective duplizieren', - action: 'duplicate', - dialog: { dialog: ObjectiveFormComponent, data: { objectiveId: this.objective$.value.id } }, - }, - ]; + isObjectiveComplete(objective: ObjectiveMin): boolean { + return objective.state == State.SUCCESSFUL || objective.state == State.NOTSUCCESSFUL; } - getCompletedMenuActions() { - return [ - { displayName: 'Objective wiedereröffnen', action: 'reopen' }, - { - displayName: 'Objective duplizieren', - action: 'duplicate', - dialog: { dialog: ObjectiveFormComponent, data: { objectiveId: this.objective$.value.id } }, - }, - ]; + getMenu(objective: ObjectiveMin): ObjectiveMenuEntry[] { + console.log('get'); + if (this.isObjectiveComplete(objective)) { + return this.objectiveMenuActionsService.getCompletedMenuActions(objective); + } else if (objective.state === State.ONGOING) { + return this.objectiveMenuActionsService.getOngoingMenuActions(objective); + } else if (objective.state === State.DRAFT) { + return this.objectiveMenuActionsService.getDraftMenuActions(objective); + } + //Probably throw an error here + return []; } - redirect(menuEntry: MenuEntry) { - if (menuEntry.dialog) { - const matDialogRef = this.dialogService.open(menuEntry.dialog.dialog, { - data: { - title: menuEntry.dialog.data.title, - action: menuEntry.action, - text: menuEntry.action, - objective: menuEntry.dialog.data, - objectiveTitle: menuEntry.dialog.data.objectiveTitle, - }, - ...((menuEntry.action == 'release' || menuEntry.action == 'todraft') && { width: 'auto' }), - }); - matDialogRef.afterClosed().subscribe((result) => { - this.menuButton.nativeElement.focus(); - if (result) { - this.handleDialogResult(menuEntry, result); - } - }); - } else { - this.reopenRedirect(menuEntry); - } + redirect(menuEntry: ObjectiveMenuEntry) { + console.log('test'); + console.log(menuEntry.action); + const matDialogRef = menuEntry.action(); } handleDialogResult(menuEntry: MenuEntry, result: { endState: string; comment: string | null; objective: any }) { @@ -243,8 +152,8 @@ export class ObjectiveComponent implements OnInit { } } - openObjectiveDetail() { - this.router.navigate(['details/objective', this.objective$.value.id]); + openObjectiveDetail(objectiveId: number) { + this.router.navigate(['details/objective', objectiveId]); } openAddKeyResultDialog() { @@ -263,4 +172,6 @@ export class ObjectiveComponent implements OnInit { this.refreshDataService.markDataRefresh(); }); } + + protected readonly console = console; } diff --git a/frontend/src/app/services/objective-menu-actions.service.ts b/frontend/src/app/services/objective-menu-actions.service.ts new file mode 100644 index 0000000000..2c489e379a --- /dev/null +++ b/frontend/src/app/services/objective-menu-actions.service.ts @@ -0,0 +1,85 @@ +import { Injectable } from '@angular/core'; +import { DialogService } from './dialog.service'; +import { MatDialogRef } from '@angular/material/dialog'; +import { ObjectiveFormComponent } from '../shared/dialog/objective-dialog/objective-form.component'; +import { CompleteDialogComponent } from '../shared/dialog/complete-dialog/complete-dialog.component'; +import { ObjectiveMin } from '../shared/types/model/ObjectiveMin'; +import { GJ_REGEX_PATTERN } from '../shared/constantLibary'; + +export type ObjectiveMenuAction = () => MatDialogRef; + +export interface ObjectiveMenuEntry { + displayName: string; + action: ObjectiveMenuAction; + afterAction?: (arg1: any, arg2: any) => any; +} + +@Injectable({ + providedIn: 'root', +}) +export class ObjectiveMenuActionsService { + constructor(private readonly dialogService: DialogService) {} + + isInBacklogQuarter(objective: ObjectiveMin) { + return !GJ_REGEX_PATTERN.test(objective.quarter.label); + } + + getOngoingMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + return [ + ...this.getDefaultActions(objective), + this.saveObjectiveAsDraftAction(), + this.completeObjectiveAction(objective), + ]; + } + + getDefaultActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + return [this.editObjectiveAction(objective), this.duplicateObjectiveAction(objective)]; + } + + getDraftMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + const releaseAction = this.isInBacklogQuarter(objective) + ? this.releaseFromDraftInBacklogAction(objective) + : this.releaseFromDraftAction(objective); + return [releaseAction]; + } + + releaseFromDraftAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const action = () => this.dialogService.openConfirmDialog('CONFIRMATION.RELEASE'); + return { displayName: 'Objective veröffentlichen', action: action }; + } + + releaseFromDraftInBacklogAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const config = { data: { action: 'releaseBacklog', objectiveId: objective } }; + const action: ObjectiveMenuAction = () => this.dialogService.open(ObjectiveFormComponent, config); + return { displayName: 'Objective veröffentlichen', action: action }; + } + + private editObjectiveAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const config = { data: { objectiveId: objective.id } }; + const action: ObjectiveMenuAction = () => this.dialogService.open(ObjectiveFormComponent, config); + return { displayName: 'Objective bearbeiten', action: action }; + } + + private duplicateObjectiveAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const config = { data: { objectiveId: objective.id } }; + const action = () => this.dialogService.open(ObjectiveFormComponent, config); + return { displayName: 'Objective duplizieren', action: action }; + } + + private completeObjectiveAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const config = { + data: { objectiveTitle: objective.title }, + }; + const action = () => this.dialogService.open(CompleteDialogComponent, config); + return { displayName: 'Objective abschliessen', action: action }; + } + + private saveObjectiveAsDraftAction(): ObjectiveMenuEntry { + const action = () => this.dialogService.openConfirmDialog('CONFIRMATION.DRAFT_CREATE'); + return { displayName: 'Objective als Draft speicherns', action: action }; + } + + getCompletedMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + return []; + } +}