DEV 175 - Delete dialog

corn-frontend/src/app/core/services/users/user.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { User } from "@interfaces/boards/user";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs";
 import { ApiUrl } from "@core/enum/api-url";

corn-frontend/src/app/pages/boards/backlog/backlog-item-comment-list/backlog-item-comment/backlog-item-comment.component.ts

@@ -17,6 +17,8 @@ import {
     BacklogItemCommentService
 } from "@core/services/boards/backlog/backlog-item-comment/backlog-item-comment.service";
 import { take } from "rxjs";
+import { MatDialog } from "@angular/material/dialog";
+import { DeleteDialogComponent } from "@pages/utils/delete-dialog/delete-dialog.component";
 
 @Component({
     selector: 'app-backlog-item-comment',
@@ -42,7 +44,7 @@ import { take } from "rxjs";
     ],
     templateUrl: './backlog-item-comment.component.html',
     styleUrl: './backlog-item-comment.component.scss',
-    providers: [provideIcons({ matEdit, matDone, matDelete })],
+    providers: [provideIcons({matEdit, matDone, matDelete})],
 })
 export class BacklogItemCommentComponent implements OnInit {
 
@@ -54,12 +56,14 @@ export class BacklogItemCommentComponent implements OnInit {
 
     commentControl!: FormControl;
 
-    constructor(private commentService: BacklogItemCommentService) {}
+    constructor(private commentService: BacklogItemCommentService,
+                private dialog: MatDialog) {
+    }
 
     ngOnInit(): void {
         this.prepareComment();
 
-        this.commentControl =  new FormControl(this.comment.comment,
+        this.commentControl = new FormControl(this.comment.comment,
             [Validators.required, CustomValidators.notWhitespace()]);
     }
 
@@ -68,12 +72,12 @@ export class BacklogItemCommentComponent implements OnInit {
     }
 
     canEdit(): boolean {
-      //TODO acquire real information about user being owner of the comment or owner of the project
-      return true;
+        //TODO acquire real information about user being owner of the comment or owner of the project
+        return true;
     }
 
     editComment(): void {
-        if(this.commentControl.invalid) {
+        if (this.commentControl.invalid) {
             return;
         }
 
@@ -87,15 +91,26 @@ export class BacklogItemCommentComponent implements OnInit {
     }
 
     deleteComment(): void {
-        this.commentService.deleteComment(this.comment.backlogItemCommentId)
-            .pipe(take(1))
-            .subscribe(() => {
-                this.commentDeleted.emit();
-            });
+        const dialogRef = this.dialog.open(DeleteDialogComponent, {
+            enterAnimationDuration: '100ms',
+            exitAnimationDuration: '100ms'
+        })
+
+        dialogRef.afterClosed().pipe(take(1)).subscribe(result => {
+            if (!result) {
+                return;
+            }
+
+            this.commentService.deleteComment(this.comment.backlogItemCommentId)
+                .pipe(take(1))
+                .subscribe(() => {
+                    this.commentDeleted.emit();
+                });
+        })
     }
 
     formatDate(date: Date): string {
-        if(!date) {
+        if (!date) {
             return "";
         }
 

corn-frontend/src/app/pages/boards/backlog/backlog-item-table/backlog-item-table.component.ts

@@ -43,6 +43,7 @@ import { BacklogTypeComponent } from "@pages/boards/backlog/backlog-item-table/b
 import { BacklogDragComponent } from "@pages/boards/backlog/backlog-item-table/backlog-drag/backlog-drag.component";
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { BacklogItemDetailsComponent } from "@pages/boards/backlog/backlog-item-details/backlog-item-details.component";
+import { DeleteDialogComponent } from "@pages/utils/delete-dialog/delete-dialog.component";
 
 @Component({
     selector: 'app-backlog-item-table',
@@ -78,7 +79,7 @@ import { BacklogItemDetailsComponent } from "@pages/boards/backlog/backlog-item-
     ],
     templateUrl: './backlog-item-table.component.html',
     styleUrl: './backlog-item-table.component.scss',
-    providers: [provideIcons({ bootstrapBugFill, featherBook, matTask, octContainer, matDelete })],
+    providers: [provideIcons({bootstrapBugFill, featherBook, matTask, octContainer, matDelete})],
 })
 export class BacklogItemTableComponent implements AfterViewInit, OnDestroy {
 
@@ -103,15 +104,28 @@ export class BacklogItemTableComponent implements AfterViewInit, OnDestroy {
     }
 
     deleteItem(item: BacklogItem): void {
-        this.backlogItemService.deleteBacklogItem(item).pipe(take(1)).subscribe((deletedItem: BacklogItem) => {
-            this.dataToDisplay = this.dataToDisplay.filter((i) => i !== item);
-            this.resultsLength -= 1;
-        });
+        const dialogRef = this.dialog.open(DeleteDialogComponent, {
+            enterAnimationDuration: '100ms',
+            exitAnimationDuration: '100ms'
+        })
+
+        dialogRef.afterClosed().pipe(take(1)).subscribe(result => {
+            if (!result) {
+                return;
+            }
+
+            this.backlogItemService.deleteBacklogItem(item).pipe(take(1)).subscribe((deletedItem: BacklogItem) => {
+                this.dataToDisplay = this.dataToDisplay.filter((i) => i !== item);
+                this.resultsLength -= 1;
+            });
+        })
+
+
     }
 
     ngAfterViewInit(): void {
         this.inputSprintChanged.pipe(takeUntil(this.destroy$)).subscribe((sprintId: number) => {
-            if(sprintId == this.sprintId) {
+            if (sprintId == this.sprintId) {
                 this.fetchBacklogItems();
             }
         });
@@ -141,26 +155,26 @@ export class BacklogItemTableComponent implements AfterViewInit, OnDestroy {
         }
 
         source.pipe(
-                catchError(() => of(null)),
-                map(data => {
-                    this.isLoading = false;
-
-                    if (!data) {
-                        return [];
-                    }
-
-                    this.resultsLength = data.totalNumber;
-                    return data.backlogItemResponseList;
-                }),
-                take(1)
-            ).subscribe(data => {
-              this.dataToDisplay = data;
+            catchError(() => of(null)),
+            map(data => {
+                this.isLoading = false;
+
+                if (!data) {
+                    return [];
+                }
+
+                this.resultsLength = data.totalNumber;
+                return data.backlogItemResponseList;
+            }),
+            take(1)
+        ).subscribe(data => {
+            this.dataToDisplay = data;
         })
     }
 
     updateBacklogItem(item: BacklogItem): void {
         this.backlogItemService.updateBacklogItem(item).pipe(take(1)).subscribe((newItem) => {
-            if(newItem.sprintId == this.sprintId) {
+            if (newItem.sprintId == this.sprintId) {
                 let index: number = this.dataToDisplay.findIndex(item => item.backlogItemId == newItem.backlogItemId);
                 this.dataToDisplay[index] = newItem;
                 this.table.renderRows();
@@ -198,7 +212,7 @@ export class BacklogItemTableComponent implements AfterViewInit, OnDestroy {
         });
 
         dialogRef.afterClosed().pipe(take(1)).subscribe((result: BacklogItem) => {
-            if(!result) {
+            if (!result) {
                 return;
             }
 

corn-frontend/src/app/pages/boards/board/board.component.ts

@@ -25,7 +25,9 @@ import { BacklogItemApi } from '@core/services/api/v1/backlog/item/backlog-item-
 import { BacklogItemStatus } from '@core/enum/BacklogItemStatus';
 import { StorageKey } from '@core/enum/storage-key.enum';
 import { firstValueFrom } from 'rxjs';
-import { ProjectMemberInfoExtendedResponse } from '@core/services/api/v1/project/member/data/project-member-info-extended-reponse.interface';
+import {
+    ProjectMemberInfoExtendedResponse
+} from '@core/services/api/v1/project/member/data/project-member-info-extended-reponse.interface';
 import { BacklogItemResponse } from '@core/services/api/v1/backlog/item/data/backlog-item-response.interface';
 import { UsernameToAssigneeMapper } from '@core/types/board/boards/UsernameToAssigneeMapper';
 import { SimpleSprint } from '@core/interfaces/boards/board/simple_sprint.interface';

corn-frontend/src/app/pages/boards/project-settings/project-settings.component.ts

@@ -17,11 +17,10 @@ import { NewProjectComponent } from "@pages/project-list/new-project/new-project
 import { take } from "rxjs";
 import { Project } from "@interfaces/boards/project";
 import { ProjectService } from "@core/services/boards/project.service";
-import { Route, Router } from "@angular/router";
+import { Router } from "@angular/router";
 import { RouterPaths } from "@core/enum/RouterPaths";
-import {
-    AddMemberDialogComponent
-} from "@pages/boards/project-settings/add-member-dialog/add-member-dialog.component";
+import { AddMemberDialogComponent } from "@pages/boards/project-settings/add-member-dialog/add-member-dialog.component";
+import { DeleteDialogComponent } from "@pages/utils/delete-dialog/delete-dialog.component";
 
 @Component({
     selector: 'app-project-settings',
@@ -74,10 +73,23 @@ export class ProjectSettingsComponent implements OnInit {
     }
 
     deleteMember(projectMember: User): void {
-        this.projectService
-            .deleteMemberFromProject(projectMember.username, this.projectId)
+        const dialogRef = this.dialog.open(DeleteDialogComponent, {
+            enterAnimationDuration: '100ms',
+            exitAnimationDuration: '100ms'
+        });
+
+        dialogRef.afterClosed()
             .pipe(take(1))
-            .subscribe();
+            .subscribe(result => {
+                if(!result) {
+                    return;
+                }
+
+                this.projectService
+                    .deleteMemberFromProject(projectMember.username, this.projectId)
+                    .pipe(take(1))
+                    .subscribe();
+            })
     }
 
     editProjectName(): void {
@@ -105,7 +117,20 @@ export class ProjectSettingsComponent implements OnInit {
     }
 
     deleteProject(): void {
-        // TODO: add deleting project after adding dialogs
+        const dialogRef = this.dialog.open(DeleteDialogComponent, {
+            enterAnimationDuration: '300ms',
+            exitAnimationDuration: '100ms',
+        });
+
+        dialogRef.afterClosed()
+            .pipe(take(1))
+            .subscribe(result => {
+                if(!result) {
+                    return;
+                }
+
+                //TODO: add project deletion
+            })
     }
 
     addNewMember(): void {

corn-frontend/src/app/pages/utils/delete-dialog/delete-dialog.component.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>Confirm deletion</h2>
+<mat-dialog-content>
+    <p>Are you sure?</p>
+    <p>This action is irreversible</p>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <div class="w-full flex flex-row justify-between">
+        <button mat-raised-button [mat-dialog-close]="false">Cancel</button>
+        <button mat-raised-button [mat-dialog-close]="true" color="warn">Delete</button>
+    </div>
+</mat-dialog-actions>

corn-frontend/src/app/pages/utils/delete-dialog/delete-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteDialogComponent } from './delete-dialog.component';
+
+describe('DeleteDialogComponent', () => {
+  let component: DeleteDialogComponent;
+  let fixture: ComponentFixture<DeleteDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeleteDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

corn-frontend/src/app/pages/utils/delete-dialog/delete-dialog.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle } from "@angular/material/dialog";
+import { MatButton } from "@angular/material/button";
+
+@Component({
+  selector: 'app-delete-dialog',
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose
+  ],
+  templateUrl: './delete-dialog.component.html',
+  styleUrl: './delete-dialog.component.scss'
+})
+export class DeleteDialogComponent {
+
+}