Implement functionality to reopen an objective, release one or complete

frontend/src/app/objective/objective.component.ts

@@ -11,6 +11,8 @@ import { BehaviorSubject } from 'rxjs';
 import { State } from '../shared/types/enums/State';
 import { ObjectiveService } from '../shared/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';
 
 @Component({
   selector: 'app-objective-column',
@@ -85,18 +87,21 @@ export class ObjectiveComponent implements AfterViewInit {
           dialog: { dialog: ObjectiveFormComponent, data: { objectiveId: this.objective.value.id } },
         },
         { displayName: 'Objective duplizieren', action: 'duplicate' },
+        // TODO nur wenn nicht auf Draft
         {
           displayName: 'Objective abschliessen',
           action: 'complete',
+          dialog: { dialog: CompleteDialogComponent, data: {} },
         },
+        // TODO nur wenn nicht auf OnGoing
         {
           displayName: 'Objective freigeben',
           action: 'release',
           dialog: {
             dialog: ConfirmDialogComponent,
             data: {
               title: 'Objective',
-              action: 'Release',
+              action: 'release',
             },
           },
         },
@@ -105,41 +110,36 @@ export class ObjectiveComponent implements AfterViewInit {
   }
 
   redirect(menuEntry: MenuEntry) {
-    if (menuEntry.action) {
-      this.objectiveService.getFullObjective(this.objective.value.id).subscribe((objective) => {
-        let fullObjective = objective;
-        switch (menuEntry.action) {
-          case 'reopen':
-            fullObjective.state = State.ONGOING;
-            // TODO remove objective from new completed table
-            break;
-          case 'duplicate':
-            // TODO Duplicate Objective
-            break;
-          case 'complete':
-            // TODO Open Complete dialog for successful or not successful
-            const matDialogRef = this.matDialog.open(menuEntry.dialog!.dialog, {
-              data: menuEntry.dialog!.data,
-              width: '850px',
-            });
-            // TODO this.objective.value.state = State.SUCCESSFUL
-            matDialogRef.afterClosed().subscribe((result: string) => {
-              fullObjective.state = State[result as keyof typeof State];
-            });
-            // TODO call new endpoint
-            return;
-          case 'release':
-            fullObjective.state = State.ONGOING;
-        }
-        this.objectiveService.updateObjective(fullObjective);
+    if (menuEntry.dialog) {
+      const matDialogRef = this.matDialog.open(menuEntry.dialog.dialog, {
+        data: {
+          title: menuEntry.dialog.data.title,
+          action: menuEntry.action,
+          objective: menuEntry.dialog.data,
+        },
+        width: '850px',
       });
-    } else {
-      if (menuEntry.dialog) {
-        const matDialogRef = this.matDialog.open(menuEntry.dialog.dialog, {
-          data: menuEntry.dialog.data,
-          width: '850px',
-        });
-        matDialogRef.afterClosed().subscribe((result) => {
+      matDialogRef.afterClosed().subscribe((result) => {
+        if (menuEntry.action) {
+          this.objectiveService.getFullObjective(this.objective.value.id).subscribe((objective) => {
+            if (menuEntry.action == 'complete') {
+              objective.state = result.endState as State;
+              const completed: Completed = {
+                id: null,
+                objective: objective,
+                comment: result.comment,
+              };
+              this.objectiveService.updateObjective(objective).subscribe(() => {
+                this.objectiveService.createCompleted(completed).subscribe();
+              });
+            } else if (menuEntry.action == 'release') {
+              if (result) {
+                objective.state = 'ONGOING' as State;
+                this.objectiveService.updateObjective(objective).subscribe();
+              }
+            }
+          });
+        } else {
           if (result?.objective) {
             this.notifierService.objectivesChanges.next({
               objective: result.objective,
@@ -148,6 +148,15 @@ export class ObjectiveComponent implements AfterViewInit {
               addKeyResult: result.addKeyResult,
             });
           }
+        }
+      });
+    } else {
+      if (menuEntry.action === 'reopen') {
+        this.objectiveService.getFullObjective(this.objective.value.id).subscribe((objective) => {
+          objective.state = 'ONGOING' as State;
+          this.objectiveService.updateObjective(objective).subscribe(() => {
+            this.objectiveService.deleteCompleted(objective.id).subscribe();
+          });
         });
       } else {
         this.routeService.navigate(menuEntry.route!);

frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html

@@ -9,4 +9,6 @@
 
   <label>Kommentar (optional)</label>
   <input placeholder="Kommentar" />
+
+  <button (click)="closeDialog()">Submit</button>
 </div>

frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.ts

@@ -1,22 +1,24 @@
 import { Component } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { State } from '../../types/enums/State';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-complete-dialog',
   templateUrl: './complete-dialog.component.html',
   styleUrls: ['./complete-dialog.component.scss'],
 })
 export class CompleteDialogComponent {
-  isSuccessful: boolean = true;
-  comment: string = '';
+  completeForm = new FormGroup({
+    isSuccessful: new FormControl<boolean>(true, [Validators.required]),
+    comment: new FormControl<string>('', [Validators.maxLength(4096)]),
+  });
 
   constructor(public dialogRef: MatDialogRef<CompleteDialogComponent>) {}
 
   closeDialog() {
     this.dialogRef.close({
-      endState: this.isSuccessful ? State.SUCCESSFUL : State.NOTSUCCESSFUL,
-      comment: this.comment,
+      endState: this.completeForm.value.isSuccessful ? 'SUCCESSFUL' : 'NOTSUCCESSFUL',
+      comment: this.completeForm.value.comment,
     });
   }
 }

frontend/src/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts

@@ -16,7 +16,7 @@ export class ConfirmDialogComponent implements OnInit {
 
   ngOnInit() {
     if (this.data.action) {
-      if (this.data.action === 'Release') {
+      if (this.data.action === 'release') {
         this.dialogTitle = this.data.title + ' freigeben';
         this.dialogText = 'Soll dieses ' + this.data.title + ' freigegeben werden?';
       }

frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html

@@ -1,7 +1,7 @@
 <div mat-dialog-content>
   <div class="w-100 d-flex justify-content-between align-items-center">
     <span class="title">
-      <span *ngIf="!data.objectiveId; else objectiveEditTitle"> Objective erfassen </span>
+      <span *ngIf="!data.objective.objectiveId; else objectiveEditTitle"> Objective erfassen </span>
       <ng-template #objectiveEditTitle> Objective bearbeiten </ng-template>
     </span>
     <button data-test-id="closeDrawer" mat-dialog-close mat-icon-button>
@@ -57,7 +57,7 @@
         class="d-flex align-items-center col-5 custom-text-wrap"
         color="primary"
         formControlName="createKeyResults"
-        *ngIf="!data.objectiveId"
+        *ngIf="!data.objective.objectiveId"
       >
         Key Results im Anschluss erfassen
       </mat-checkbox>
@@ -68,7 +68,7 @@
           Speichern
         </button>
         <button
-          *ngIf="!data.objectiveId"
+          *ngIf="!data.objective.objectiveId"
           [disabled]="objectiveForm.invalid"
           color="dark"
           mat-stroked-button
@@ -79,7 +79,7 @@
         </button>
         <button color="primary" mat-button mat-dialog-close>Abbrechen</button>
       </div>
-      <button color="primary" *ngIf="data.objectiveId" type="button" mat-button (click)="deleteObjective()">
+      <button color="primary" *ngIf="data.objective.objectiveId" type="button" mat-button (click)="deleteObjective()">
         Objective Löschen
       </button>
     </div>

frontend/src/app/shared/dialog/objective-dialog/objective-form.component.ts

@@ -41,16 +41,18 @@ export class ObjectiveFormComponent implements OnInit {
     private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA)
     public data: {
-      objectiveId?: number;
-      teamId?: number;
+      objective: {
+        objectiveId?: number;
+        teamId?: number;
+      };
     },
   ) {}
 
   onSubmit(event: any): void {
     const value = this.objectiveForm.getRawValue();
     const state = event.submitter.getAttribute('submitType');
     let objectiveDTO: Objective = {
-      id: this.data.objectiveId,
+      id: this.data.objective.objectiveId,
       quarterId: value.quarter,
       description: value.description,
       title: value.title,
@@ -70,16 +72,16 @@ export class ObjectiveFormComponent implements OnInit {
   ngOnInit(): void {
     this.teams$ = this.teamService.getAllTeams();
     this.quarters$ = this.quarterService.getAllQuarters();
-    const objective$ = this.data.objectiveId
-      ? this.objectiveService.getFullObjective(this.data.objectiveId)
+    const objective$ = this.data.objective.objectiveId
+      ? this.objectiveService.getFullObjective(this.data.objective.objectiveId)
       : of(this.getDefaultObjective());
 
     forkJoin([objective$, this.quarters$]).subscribe(([objective, quarters]) => {
-      const teamId = this.data.objectiveId ? objective.teamId : this.data.teamId;
+      const teamId = this.data.objective.objectiveId ? objective.teamId : this.data.objective.teamId;
       this.teams$.subscribe((value) => {
         this.currentTeam = value.filter((team) => team.id == teamId)[0];
       });
-      const quarterId = this.data.objectiveId ? objective.quarterId : quarters[0].id;
+      const quarterId = this.data.objective.objectiveId ? objective.quarterId : quarters[0].id;
       this.objectiveForm.patchValue({
         title: objective.title,
         description: objective.description,
@@ -97,9 +99,9 @@ export class ObjectiveFormComponent implements OnInit {
     });
     dialog.afterClosed().subscribe((result) => {
       if (result) {
-        this.objectiveService.deleteObjective(this.data.objectiveId!).subscribe({
+        this.objectiveService.deleteObjective(this.data.objective.objectiveId!).subscribe({
           next: () => {
-            let objectiveDTO: Objective = { id: this.data.objectiveId! } as unknown as Objective;
+            let objectiveDTO: Objective = { id: this.data.objective.objectiveId! } as unknown as Objective;
             this.closeDialog(objectiveDTO, true);
           },
           error: () => {

frontend/src/app/shared/services/objective.service.ts

@@ -30,7 +30,7 @@ export class ObjectiveService {
     return this.httpClient.post<Completed>('/api/v2/completed', completed);
   }
 
-  deleteCompleted(completed: Completed): void {
-    this.httpClient.delete<Completed>(`/api/v2/completed/${completed.objective.id}`);
+  deleteCompleted(objectiveId: number): Observable<Completed> {
+    return this.httpClient.delete<Completed>('/api/v2/completed/' + objectiveId);
   }
 }

frontend/src/app/shared/types/model/Completed.ts

@@ -1,7 +1,7 @@
 import { Objective } from './Objective';
 
 export interface Completed {
-  id: number;
+  id: number | null;
   objective: Objective;
   comment: string;
 }