Merge pull request #1831 from fecgov/feature/386-2

feature/386 - Add Delete Report functionality

front-end/src/app/reports/report-list/report-list.component.html

@@ -102,3 +102,6 @@ <h5 class="m-0">Recent reports</h5>
   (dialogClose)="dialogVisible = false"
   [dialogVisible]="dialogVisible"
 ></app-form-type-dialog>
+
+<p-toast></p-toast>
+<p-confirmDialog></p-confirmDialog>

front-end/src/app/reports/report-list/report-list.component.spec.ts

@@ -1,13 +1,13 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore } from '@ngrx/store/testing';
-import { testMockStore } from 'app/shared/utils/unit-test.utils';
+import { testActiveReport, testMockStore } from 'app/shared/utils/unit-test.utils';
 import { TableModule } from 'primeng/table';
 import { ToolbarModule } from 'primeng/toolbar';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { ApiService } from 'app/shared/services/api.service';
 import { ReportListComponent } from './report-list.component';
-import { Form3X, F3xFormTypes } from '../../shared/models/form-3x.model';
+import { F3xFormTypes, Form3X } from '../../shared/models/form-3x.model';
 import { Report, ReportTypes } from '../../shared/models/report.model';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
@@ -101,4 +101,25 @@ describe('ReportListComponent', () => {
     component.editItem(item);
     expect(navigateSpy).toHaveBeenCalledWith('/reports/f1m/edit/99');
   });
+
+  describe('deleteReport', () => {
+    it('should call confirm', () => {
+      const confirmSpy = spyOn(component.confirmationService, 'confirm');
+      component.confirmDelete(testActiveReport);
+      expect(confirmSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should delete', fakeAsync(async () => {
+      const deleteSpy = spyOn(component.itemService, 'delete').and.returnValue(of(null));
+      const messageServiceSpy = spyOn(component.messageService, 'add');
+      await component.delete(testActiveReport);
+      expect(deleteSpy).toHaveBeenCalledOnceWith(testActiveReport);
+      expect(messageServiceSpy).toHaveBeenCalledOnceWith({
+        severity: 'success',
+        summary: 'Successful',
+        detail: 'Report Deleted',
+        life: 3000,
+      });
+    }));
+  });
 });

front-end/src/app/reports/report-list/report-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { take, takeUntil } from 'rxjs';
+import { lastValueFrom, take, takeUntil } from 'rxjs';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { TableAction, TableListBaseComponent } from '../../shared/components/table-list-base/table-list-base.component';
 import { Report, ReportStatus, ReportTypes } from '../../shared/models/report.model';
@@ -25,14 +25,15 @@ export class ReportListComponent extends TableListBaseComponent<Report> implemen
       this.editItem.bind(this),
       (report: Report) => report.report_status !== ReportStatus.IN_PROGRESS,
     ),
+    new TableAction('Delete', this.confirmDelete.bind(this), (report: Report) => report.can_delete),
     new TableAction('Download as .fec', this.goToTest.bind(this)),
   ];
 
   constructor(
-    protected override messageService: MessageService,
-    protected override confirmationService: ConfirmationService,
+    override messageService: MessageService,
+    override confirmationService: ConfirmationService,
     protected override elementRef: ElementRef,
-    protected override itemService: ReportService,
+    override itemService: ReportService,
     public router: Router,
   ) {
     super(messageService, confirmationService, elementRef);
@@ -84,6 +85,30 @@ export class ReportListComponent extends TableListBaseComponent<Report> implemen
       });
   }
 
+  public confirmDelete(report: Report): void {
+    this.confirmationService.confirm({
+      message: 'Are you sure you want to delete this report? This action cannot be undone.',
+      header: 'Hang on...',
+      rejectLabel: 'Cancel',
+      rejectIcon: 'none',
+      rejectButtonStyleClass: 'p-button-secondary',
+      acceptLabel: 'Confirm',
+      acceptIcon: 'none',
+      accept: async () => this.delete(report),
+    });
+  }
+
+  async delete(report: Report) {
+    await lastValueFrom(this.itemService.delete(report));
+    this.refreshTable();
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Successful',
+      detail: 'Report Deleted',
+      life: 3000,
+    });
+  }
+
   public async goToTest(item: Report): Promise<void> {
     await this.router.navigateByUrl(`/reports/f3x/test-dot-fec/${item.id}`);
   }

front-end/src/app/shared/models/report.model.ts

@@ -32,7 +32,7 @@ export abstract class Report extends BaseModel {
   @Type(() => Date)
   @Transform(BaseModel.dateTransform)
   updated: Date | undefined;
-  deleted: string | undefined;
+  can_delete = false;
 
   abstract get formLabel(): string;
 

front-end/src/assets/styles/theme.css

@@ -4646,7 +4646,18 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   padding: 1rem;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
+  position: relative;
 }
+
+.p-dialog .p-dialog-header::after {
+  border-bottom: 2px solid #5b616b;
+  width: 94%;
+  position: absolute;
+  left: 3%;
+  bottom: 0;
+  content: "";
+}
+
 .p-dialog .p-dialog-header .p-dialog-title {
   font-weight: 600;
   font-size: 1.25rem;
@@ -4677,7 +4688,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-dialog .p-dialog-content {
   background: #ffffff;
   color: #212121;
-  padding: 1rem;
+  padding: 1rem 2rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 1px solid #e8e8e8;
@@ -4687,6 +4698,8 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   text-align: right;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
+  display: flex;
+  justify-content: space-between;
 }
 .p-dialog .p-dialog-footer button {
   margin: 0 0.5rem 0 0;