implement new objective dialog start

puzzle · Oct 23, 2024 · eb52525 · eb52525
1 parent cb9f330
commit eb52525
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 188 deletions.
diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html
@@ -1,81 +1,82 @@
-<div
-  (click)="openObjectiveDetail()"
-  (keydown.enter)="openObjectiveDetail()"
-  *ngIf="objective$ | async as objective"
-  [attr.data-testId]="'objective'"
-  class="objective rounded-3 bg-white w-100 cursor-pointer focus-outline"
-  tabindex="0"
->
-  <div class="row mx-1">
-    <section class="d-flex mb-3 mt-3 justify-content-between pe-0">
-      <section class="d-flex gap-2 align-items-start fit-content objective-title">
-        <img
+<div *ngIf="objective$ | async as objective">
+  <div
+    (click)="openObjectiveDetail(objective.id)"
+    (keydown.enter)="openObjectiveDetail(objective.id)"
+    [attr.data-testId]="'objective'"
+    class="objective rounded-3 bg-white w-100 cursor-pointer focus-outline"
+    tabindex="0"
+  >
+    <div class="row mx-1">
+      <section class="d-flex mb-3 mt-3 justify-content-between pe-0">
+        <section class="d-flex gap-2 align-items-start fit-content objective-title">
+          <img
+            (click)="$event.stopPropagation()"
+            [attr.data-testId]="'objective-state'"
+            [src]="'assets/icons/' + objective.state"
+            alt="The objectives state"
+            class="icon"
+            matTooltip="{{ getStateTooltip() + ' ' + formatObjectiveState(objective.state) }}"
+            matTooltipPosition="above"
+          />
+          <h2 class="title fit-content">{{ objective.title }}</h2>
+        </section>
+        <button
+          #menuButton
+          *ngIf="isWritable"
+          class="icon-button three-dot-menu focus-outline"
+          [matMenuTriggerFor]="objectiveMenu"
           (click)="$event.stopPropagation()"
-          [attr.data-testId]="'objective-state'"
-          [src]="'assets/icons/' + objective.state"
-          alt="The objectives state"
-          class="icon"
-          matTooltip="{{ getStateTooltip() + ' ' + formatObjectiveState(objective.state) }}"
-          matTooltipPosition="above"
-        />
-        <h2 class="title fit-content">{{ objective.title }}</h2>
+          (keydown.enter)="$event.stopPropagation()"
+          [attr.data-testId]="'three-dot-menu'"
+        >
+          <img src="../assets/icons/three-dot-menu-icon.svg" alt="menu icon" class="text-white menu-scale" />
+        </button>
       </section>
-      <button
-        #menuButton
-        *ngIf="isWritable"
-        class="icon-button three-dot-menu focus-outline"
-        [matMenuTriggerFor]="objectiveMenu"
-        (click)="$event.stopPropagation(); getMenu()"
-        (keydown.enter)="$event.stopPropagation()"
-        [attr.data-testId]="'three-dot-menu'"
-      >
-        <img src="../assets/icons/three-dot-menu-icon.svg" alt="menu icon" class="text-white menu-scale" />
-      </button>
-    </section>
 
-    <div class="d-flex px-3 gap-3 flex-column">
-      <app-keyresult
-        *ngFor="let keyResult of objective.keyResults; trackBy: trackByFn"
-        class="border-0 p-0"
-        (click)="$event.stopPropagation()"
-        (keydown.enter)="$event.stopPropagation()"
-        [keyResult]="keyResult"
-        [attr.data-testId]="'keyresult'"
-      ></app-keyresult>
-    </div>
+      <div class="d-flex px-3 gap-3 flex-column">
+        <app-keyresult
+          *ngFor="let keyResult of objective.keyResults; trackBy: trackByFn"
+          class="border-0 p-0"
+          (click)="$event.stopPropagation()"
+          (keydown.enter)="$event.stopPropagation()"
+          [keyResult]="keyResult"
+          [attr.data-testId]="'keyresult'"
+        ></app-keyresult>
+      </div>
 
-    <section class="p-0 py-2 m-0">
-      <button
-        *ngIf="!isComplete && isWritable"
-        mat-button
-        color="primary"
-        class="fw-bold px-0 pe-2 ms-2"
-        [attr.data-testId]="'add-keyResult'"
-        (click)="openAddKeyResultDialog(); $event.stopPropagation()"
-        (keydown.enter)="$event.stopPropagation()"
-      >
-        <span class="d-flex align-items-center add-text">
-          <img alt="Add key-result button" class="add-cross-button" src="../../../assets/icons/new-icon.svg" />
-          Key Result hinzufügen
-        </span>
-      </button>
-    </section>
+      <section class="p-0 py-2 m-0">
+        <button
+          *ngIf="!isObjectiveComplete(this.objective) && isWritable"
+          mat-button
+          color="primary"
+          class="fw-bold px-0 pe-2 ms-2"
+          [attr.data-testId]="'add-keyResult'"
+          (click)="openAddKeyResultDialog(); $event.stopPropagation()"
+          (keydown.enter)="$event.stopPropagation()"
+        >
+          <span class="d-flex align-items-center add-text">
+            <img alt="Add key-result button" class="add-cross-button" src="../../../assets/icons/new-icon.svg" />
+            Key Result hinzufügen
+          </span>
+        </button>
+      </section>
+    </div>
   </div>
-</div>
-<mat-menu
-  #objectiveMenu="matMenu"
-  [class]="'objective-three-dot-menu'"
-  class="pt-2 pb-2"
-  xPosition="before"
-  yPosition="below"
->
-  <button
-    (click)="redirect(menuEntry)"
-    *ngFor="let menuEntry of menuEntries"
-    [attr.data-testId]="'objective-menu'"
-    class="objective-menu-option"
-    mat-menu-item
+  <mat-menu
+    #objectiveMenu="matMenu"
+    [class]="'objective-three-dot-menu'"
+    class="pt-2 pb-2"
+    xPosition="before"
+    yPosition="below"
   >
-    {{ menuEntry.displayName }}
-  </button>
-</mat-menu>
+    <button
+      (click)="$event.stopPropagation(); console.log('menuEntry', menuEntry)"
+      *ngFor="let menuEntry of getMenu(objective)"
+      [attr.data-testId]="'objective-menu'"
+      class="objective-menu-option"
+      mat-menu-item
+    >
+      {{ menuEntry.displayName }}123
+    </button>
+  </mat-menu>
+</div>
diff --git 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<ObjectiveMin>({} 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;
 }