diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html index ea8f8cad23..5cfa23b459 100644 --- a/frontend/src/app/components/objective/objective.component.html +++ b/frontend/src/app/components/objective/objective.component.html @@ -1,82 +1,80 @@ -
-
-
-
-
- The objectives state -

{{ objective.title }}

-
- + [attr.data-testId]="'objective-state'" + [src]="'assets/icons/' + objective.state" + alt="The objectives state" + class="icon" + matTooltip="{{ getStateTooltip() + ' ' + formatObjectiveState(objective.state) }}" + matTooltipPosition="above" + /> +

{{ objective.title }}

+ + -
- -
- -
- -
+
+
+ +
+ +
- - -
+ + + diff --git a/frontend/src/app/components/objective/objective.component.ts b/frontend/src/app/components/objective/objective.component.ts index 681939915f..c2206dd24e 100644 --- a/frontend/src/app/components/objective/objective.component.ts +++ b/frontend/src/app/components/objective/objective.component.ts @@ -1,20 +1,16 @@ -import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { MenuEntry } from '../../shared/types/menu-entry'; import { ObjectiveMin } from '../../shared/types/model/ObjectiveMin'; import { Router } from '@angular/router'; -import { ObjectiveFormComponent } from '../../shared/dialog/objective-dialog/objective-form.component'; -import { BehaviorSubject } from 'rxjs'; +import { BehaviorSubject, map } from 'rxjs'; import { RefreshDataService } from '../../services/refresh-data.service'; import { State } from '../../shared/types/enums/State'; import { ObjectiveService } from '../../services/objective.service'; -import { ConfirmDialogComponent } from '../../shared/dialog/confirm-dialog/confirm-dialog.component'; -import { CompleteDialogComponent } from '../../shared/dialog/complete-dialog/complete-dialog.component'; import { Completed } from '../../shared/types/model/Completed'; import { Objective } from '../../shared/types/model/Objective'; -import { trackByFn } from '../../shared/common'; +import { isObjectiveComplete, trackByFn } from '../../shared/common'; import { KeyresultDialogComponent } from '../keyresult-dialog/keyresult-dialog.component'; 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'; @@ -24,11 +20,13 @@ import { ObjectiveMenuActionsService, ObjectiveMenuEntry } from '../../services/ styleUrls: ['./objective.component.scss'], }) export class ObjectiveComponent implements OnInit { - @Input() - isWritable!: boolean; + @Input() isWritable!: boolean; isComplete: boolean = false; + public objective$ = new BehaviorSubject({} as ObjectiveMin); + menuEntries = this.objective$.pipe(map((objective) => this.objectiveMenuActionsService.getMenu(objective))); protected readonly trackByFn = trackByFn; - @ViewChild('menuButton') private menuButton!: ElementRef; + protected readonly console = console; + protected readonly isObjectiveComplete = isObjectiveComplete; constructor( private dialogService: DialogService, @@ -39,13 +37,10 @@ export class ObjectiveComponent implements OnInit { private objectiveMenuActionsService: ObjectiveMenuActionsService, ) {} - @Input() - set objective(objective: ObjectiveMin) { + @Input() set objective(objective: ObjectiveMin) { this.objective$.next(objective); } - public objective$ = new BehaviorSubject({} as ObjectiveMin); - ngOnInit() {} formatObjectiveState(state: string): string { @@ -61,23 +56,6 @@ export class ObjectiveComponent implements OnInit { return this.translate.instant('INFORMATION.OBJECTIVE_STATE_TOOLTIP'); } - isObjectiveComplete(objective: ObjectiveMin): boolean { - return objective.state == State.SUCCESSFUL || objective.state == State.NOTSUCCESSFUL; - } - - 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: ObjectiveMenuEntry) { console.log('test'); console.log(menuEntry.action); @@ -172,6 +150,4 @@ 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 index 2c489e379a..e47ee600da 100644 --- a/frontend/src/app/services/objective-menu-actions.service.ts +++ b/frontend/src/app/services/objective-menu-actions.service.ts @@ -4,7 +4,8 @@ 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'; +import { State } from '../shared/types/enums/State'; +import { isInBacklogQuarter, isObjectiveComplete } from '../shared/common'; export type ObjectiveMenuAction = () => MatDialogRef; @@ -20,11 +21,19 @@ export interface ObjectiveMenuEntry { export class ObjectiveMenuActionsService { constructor(private readonly dialogService: DialogService) {} - isInBacklogQuarter(objective: ObjectiveMin) { - return !GJ_REGEX_PATTERN.test(objective.quarter.label); + getMenu(objective: ObjectiveMin): ObjectiveMenuEntry[] { + if (isObjectiveComplete(objective)) { + return this.getCompletedMenuActions(objective); + } else if (objective.state === State.ONGOING) { + return this.getOngoingMenuActions(objective); + } else if (objective.state === State.DRAFT) { + return this.getDraftMenuActions(objective); + } + //Probably throw an error here + return []; } - getOngoingMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + private getOngoingMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { return [ ...this.getDefaultActions(objective), this.saveObjectiveAsDraftAction(), @@ -32,36 +41,36 @@ export class ObjectiveMenuActionsService { ]; } - getDefaultActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + private getDefaultActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { return [this.editObjectiveAction(objective), this.duplicateObjectiveAction(objective)]; } - getDraftMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { - const releaseAction = this.isInBacklogQuarter(objective) + private getDraftMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + const releaseAction = isInBacklogQuarter(objective) ? this.releaseFromDraftInBacklogAction(objective) : this.releaseFromDraftAction(objective); return [releaseAction]; } - releaseFromDraftAction(objective: ObjectiveMin): ObjectiveMenuEntry { + private 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 } }; + private releaseFromDraftInBacklogAction(objective: ObjectiveMin): ObjectiveMenuEntry { + const config = { data: { objective: { objectiveId: objective }, action: 'releaseBacklog' } }; 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 config = { data: { objective: { 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 config = { data: { objective: { objectiveId: objective.id } } }; const action = () => this.dialogService.open(ObjectiveFormComponent, config); return { displayName: 'Objective duplizieren', action: action }; } @@ -79,7 +88,7 @@ export class ObjectiveMenuActionsService { return { displayName: 'Objective als Draft speicherns', action: action }; } - getCompletedMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { + private getCompletedMenuActions(objective: ObjectiveMin): ObjectiveMenuEntry[] { return []; } } diff --git a/frontend/src/app/shared/common.ts b/frontend/src/app/shared/common.ts index ec0d3de2b3..a896202089 100644 --- a/frontend/src/app/shared/common.ts +++ b/frontend/src/app/shared/common.ts @@ -1,5 +1,8 @@ import { FormGroup } from '@angular/forms'; import { KeyResultMetricMin } from './types/model/KeyResultMetricMin'; +import { ObjectiveMin } from './types/model/ObjectiveMin'; +import { State } from './types/enums/State'; +import { GJ_REGEX_PATTERN } from './constantLibary'; export function getNumberOrNull(str: string | null | undefined): number | null { if (str === null || str === undefined || str.toString().trim() === '') { @@ -95,6 +98,14 @@ export function isMobileDevice() { return window.navigator.userAgent.toLowerCase().includes('mobile'); } +export function isInBacklogQuarter(objective: ObjectiveMin) { + return !GJ_REGEX_PATTERN.test(objective.quarter.label); +} + +export function isObjectiveComplete(objective: ObjectiveMin): boolean { + return objective.state == State.SUCCESSFUL || objective.state == State.NOTSUCCESSFUL; +} + export function hasFormFieldErrors(formGroup: FormGroup, field: string) { if (formGroup.get(field)?.dirty || formGroup.get(field)?.touched) { return formGroup.get(field)?.errors;