diff --git a/front-end/src/app/reports/report-list/report-list.component.html b/front-end/src/app/reports/report-list/report-list.component.html
index c1e9da60bf..557afed90e 100644
--- a/front-end/src/app/reports/report-list/report-list.component.html
+++ b/front-end/src/app/reports/report-list/report-list.component.html
@@ -102,3 +102,6 @@
Recent reports
(dialogClose)="dialogVisible = false"
[dialogVisible]="dialogVisible"
>
+
+
+
\ No newline at end of file
diff --git a/front-end/src/app/reports/report-list/report-list.component.spec.ts b/front-end/src/app/reports/report-list/report-list.component.spec.ts
index fda2527f08..0a9e0c5122 100644
--- a/front-end/src/app/reports/report-list/report-list.component.spec.ts
+++ b/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,
+ });
+ }));
+ });
});
diff --git a/front-end/src/app/reports/report-list/report-list.component.ts b/front-end/src/app/reports/report-list/report-list.component.ts
index 4bde3c5354..54c395dad7 100644
--- a/front-end/src/app/reports/report-list/report-list.component.ts
+++ b/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 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 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 {
await this.router.navigateByUrl(`/reports/f3x/test-dot-fec/${item.id}`);
}
diff --git a/front-end/src/app/shared/models/report.model.ts b/front-end/src/app/shared/models/report.model.ts
index 077bba7b2f..3db20722c3 100644
--- a/front-end/src/app/shared/models/report.model.ts
+++ b/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;
diff --git a/front-end/src/assets/styles/theme.css b/front-end/src/assets/styles/theme.css
index d005187816..8533bb2e0f 100644
--- a/front-end/src/assets/styles/theme.css
+++ b/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;