Add "delete submission" for survey organizers

firestore/firestore.rules

@@ -211,7 +211,9 @@ rules_version = '2';
       // Allow all survey users to list submissions.
       allow list: if canViewSurvey(getSurvey(surveyId));
       // Allow if user is owner of the existing submission and can collect data, or can manage survey.
-      allow update, delete: if (isSubmissionOwner(resource.data) && canCollectData(getSurvey(surveyId))) || canManageSurvey(getSurvey(surveyId));
+      allow update: if (isSubmissionOwner(resource.data) && canCollectData(getSurvey(surveyId))) || canManageSurvey(getSurvey(surveyId));
+      // Only survey managers (organizers and owners) may delete submissions.
+      allow delete: if canManageSurvey(getSurvey(surveyId));
     }
 
     // Apply survey-level permissions to job documents.

web/src/app/components/main-page/secondary-side-panel/_secondary-side-panel.component-theme.scss

@@ -38,7 +38,7 @@
       font: mat.get-theme-typography($theme, label-small, font);
     }
 
-    .submission-title-text {
+    .submission-panel-header-title {
       font: mat.get-theme-typography($theme, headline-small, font);
     }
 

web/src/app/components/main-page/secondary-side-panel/submission-panel/submission-panel.component.html

@@ -14,21 +14,41 @@
 limitations under the License.
 -->
 
-<div class="submission-panel" [ngClass]="{ loading: isLoading() }">
-  <div *ngIf="isLoading()" class="progress-spinner">
+<div
+  class="submission-panel"
+  [ngClass]="{ loading: isLoading() || isDeleting() }"
+>
+  <div *ngIf="isLoading() || isDeleting()" class="progress-spinner">
     <mat-spinner mode="indeterminate" diameter="50"></mat-spinner>
   </div>
 
-  <ng-container *ngIf="!isLoading()">
-    <div class="submission-title">
-      <div class="submission-title-left">
+  <ng-container *ngIf="!isLoading() && !isDeleting()">
+    <div class="submission-panel-header">
+      <div class="submission-panel-header-left">
         <button mat-icon-button (click)="navigateToSubmissionList()">
           <mat-icon>arrow_back</mat-icon>
         </button>
-        <div class="submission-title-text">
+        <div class="submission-panel-header-title">
           {{ submission()?.created?.user?.displayName }}
         </div>
       </div>
+      <button
+        *ngIf="canManageSurvey()"
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        aria-label="Submission options"
+        i18n-aria-label="@@app.submissionPanel.options"
+      >
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="deleteSubmission()">
+          <mat-icon>delete</mat-icon>
+          <span i18n="@@app.submissionPanel.deleteSubmission"
+            >Delete submission</span
+          >
+        </button>
+      </mat-menu>
     </div>
     <div class="submission-subtitle">
       <span>

web/src/app/components/main-page/secondary-side-panel/submission-panel/submission-panel.component.scss

@@ -23,7 +23,7 @@
     align-items: center;
   }
 
-  .submission-title, .submission-title-left {
+  .submission-panel-header, .submission-panel-header-left {
     display: flex;
     align-items: center;
     justify-content: space-between;

web/src/app/components/main-page/secondary-side-panel/submission-panel/submission-panel.component.spec.ts

@@ -22,6 +22,7 @@ import {
   tick,
 } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
@@ -34,9 +35,11 @@ import { Job } from 'app/models/job.model';
 import { Submission } from 'app/models/submission/submission.model';
 import { DataSharingType, Survey } from 'app/models/survey.model';
 import { Task, TaskType } from 'app/models/task/task.model';
+import { DialogType } from 'app/components/shared/dialog/dialog.component';
 import { GroundIconModule } from 'app/modules/ground-icon.module';
 import { NavigationService } from 'app/services/navigation/navigation.service';
 import { SubmissionService } from 'app/services/submission/submission.service';
+import { SurveyService } from 'app/services/survey/survey.service';
 
 import { SubmissionPanelComponent } from './submission-panel.component';
 import { Result } from 'app/models/submission/result.model';
@@ -49,6 +52,8 @@ describe('SubmissionPanelComponent', () => {
   let fixture: ComponentFixture<SubmissionPanelComponent>;
   let submissionService: jasmine.SpyObj<SubmissionService>;
   let navigationService: jasmine.SpyObj<NavigationService>;
+  let surveyService: jasmine.SpyObj<SurveyService>;
+  let dialog: jasmine.SpyObj<MatDialog>;
   const mockSurvey = new Survey(
     'survey1',
     'Survey Title',
@@ -91,7 +96,9 @@ describe('SubmissionPanelComponent', () => {
   beforeEach(async () => {
     submissionService = jasmine.createSpyObj('SubmissionService', [
       'getSubmission$',
+      'deleteSubmission',
     ]);
+    submissionService.deleteSubmission.and.resolveTo();
     navigationService = jasmine.createSpyObj('NavigationService', [
       'getTaskId$',
       'getLocationOfInterestId$',
@@ -102,6 +109,9 @@ describe('SubmissionPanelComponent', () => {
       of(mockSubmission.loiId)
     );
     navigationService.getTaskId$.and.returnValue(of(null));
+    surveyService = jasmine.createSpyObj('SurveyService', ['canManageSurvey']);
+    surveyService.canManageSurvey.and.returnValue(true);
+    dialog = jasmine.createSpyObj('MatDialog', ['open']);
 
     await TestBed.configureTestingModule({
       declarations: [SubmissionPanelComponent],
@@ -116,6 +126,8 @@ describe('SubmissionPanelComponent', () => {
       providers: [
         { provide: NavigationService, useValue: navigationService },
         { provide: SubmissionService, useValue: submissionService },
+        { provide: SurveyService, useValue: surveyService },
+        { provide: MatDialog, useValue: dialog },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -222,6 +234,67 @@ describe('SubmissionPanelComponent', () => {
     ).not.toHaveBeenCalled();
   });
 
+  it('deletes submission and navigates back when confirmed', fakeAsync(() => {
+    dialog.open.and.returnValue({
+      afterClosed: () => of({ dialogType: DialogType.DeleteSubmission }),
+    } as any);
+    initializeWithSubmission(Map({}));
+
+    component.deleteSubmission();
+    tick();
+
+    expect(submissionService.deleteSubmission).toHaveBeenCalledWith(
+      mockSurvey.id,
+      mockSubmission.id
+    );
+    expect(navigationService.selectLocationOfInterest).toHaveBeenCalledWith(
+      mockSurvey.id,
+      mockSubmission.loiId
+    );
+  }));
+
+  it('does not delete submission when not confirmed', fakeAsync(() => {
+    dialog.open.and.returnValue({
+      afterClosed: () => of(undefined),
+    } as any);
+    initializeWithSubmission(Map({}));
+
+    component.deleteSubmission();
+    tick();
+
+    expect(submissionService.deleteSubmission).not.toHaveBeenCalled();
+  }));
+
+  it('logs and bails on delete when no submission has loaded', () => {
+    spyOn(console, 'error');
+    component.deleteSubmission();
+    expect(console.error).toHaveBeenCalled();
+    expect(dialog.open).not.toHaveBeenCalled();
+    expect(submissionService.deleteSubmission).not.toHaveBeenCalled();
+  });
+
+  it('canManageSurvey reflects the survey service', fakeAsync(() => {
+    initializeWithSubmission(Map({}));
+    expect(component.canManageSurvey()).toBe(true);
+
+    surveyService.canManageSurvey.and.returnValue(false);
+    // Re-set the survey input so the computed re-evaluates.
+    fixture.componentRef.setInput('activeSurvey', { ...mockSurvey } as Survey);
+    expect(component.canManageSurvey()).toBe(false);
+  }));
+
+  it('logs and bails on delete when user cannot manage the survey', fakeAsync(() => {
+    spyOn(console, 'error');
+    surveyService.canManageSurvey.and.returnValue(false);
+    initializeWithSubmission(Map({}));
+
+    component.deleteSubmission();
+
+    expect(console.error).toHaveBeenCalled();
+    expect(dialog.open).not.toHaveBeenCalled();
+    expect(submissionService.deleteSubmission).not.toHaveBeenCalled();
+  }));
+
   it('getTaskSubmissionResult returns result for a known task', fakeAsync(() => {
     const result = new Result('answer');
     initializeWithSubmission(Map({task1: result}));

web/src/app/components/main-page/secondary-side-panel/submission-panel/submission-panel.component.ts

@@ -14,11 +14,17 @@
  * limitations under the License.
  */
 
-import { Component, computed, inject, input } from '@angular/core';
+import { Component, computed, inject, input, signal } from '@angular/core';
 import { rxResource } from '@angular/core/rxjs-interop';
+import { MatDialog } from '@angular/material/dialog';
 import { List } from 'immutable';
 import { of } from 'rxjs';
 
+import {
+  DialogComponent,
+  DialogData,
+  DialogType,
+} from 'app/components/shared/dialog/dialog.component';
 import { Geometry } from 'app/models/geometry/geometry';
 import { LocationOfInterest } from 'app/models/loi.model';
 import { MultipleSelection } from 'app/models/submission/multiple-selection';
@@ -27,6 +33,7 @@ import { Survey } from 'app/models/survey.model';
 import { Task, TaskType } from 'app/models/task/task.model';
 import { NavigationService } from 'app/services/navigation/navigation.service';
 import { SubmissionService } from 'app/services/submission/submission.service';
+import { SurveyService } from 'app/services/survey/survey.service';
 
 @Component({
   selector: 'submission-panel',
@@ -37,6 +44,8 @@ import { SubmissionService } from 'app/services/submission/submission.service';
 export class SubmissionPanelComponent {
   private submissionService = inject(SubmissionService);
   private navigationService = inject(NavigationService);
+  private surveyService = inject(SurveyService);
+  private dialog = inject(MatDialog);
 
   activeSurvey = input<Survey>();
   selectedLoi = input<LocationOfInterest>();
@@ -74,6 +83,12 @@ export class SubmissionPanelComponent {
 
   readonly submission = this.submissionResource.value;
   readonly isLoading = this.submissionResource.isLoading;
+  readonly isDeleting = signal(false);
+
+  readonly canManageSurvey = computed(() => {
+    const survey = this.activeSurvey();
+    return !!survey && this.surveyService.canManageSurvey(survey);
+  });
 
   navigateToSubmissionList() {
     const loi = this.selectedLoi();
@@ -90,6 +105,42 @@ export class SubmissionPanelComponent {
     this.navigationService.selectLocationOfInterest(survey.id, loi.id);
   }
 
+  deleteSubmission() {
+    const survey = this.activeSurvey();
+    const loi = this.selectedLoi();
+    const submission = this.submission();
+    if (!survey || !loi || !submission) {
+      console.error("No active survey or submission - can't delete submission");
+      return;
+    }
+    if (!this.canManageSurvey()) {
+      console.error('Only survey managers can delete submissions');
+      return;
+    }
+    this.dialog
+      .open(DialogComponent, {
+        data: {
+          dialogType: DialogType.DeleteSubmission,
+        },
+        panelClass: 'small-width-dialog',
+      })
+      .afterClosed()
+      .subscribe(async (result: DialogData) => {
+        if (!result) return;
+        this.isDeleting.set(true);
+        try {
+          await this.submissionService.deleteSubmission(
+            survey.id,
+            submission.id
+          );
+          this.navigationService.selectLocationOfInterest(survey.id, loi.id);
+        } catch (e) {
+          console.error('Error deleting submission', e);
+          this.isDeleting.set(false);
+        }
+      });
+  }
+
   getTaskSubmissionResult({ id: taskId }: Task): Result | undefined {
     const submission = this.submission();
     if (!submission) return;

web/src/app/components/main-page/secondary-side-panel/submission-panel/submission-panel.module.ts

@@ -18,11 +18,15 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { DialogModule } from 'app/components/shared/dialog/dialog.module';
+
 import { SubmissionPanelComponent } from './submission-panel.component';
 import { SubmissionDateViewComponent } from './views/submission-date-view/submission-date-view.component';
 import { SubmissionGeometryViewComponent } from './views/submission-geometry-view/submission-geometry-view.component';
@@ -34,11 +38,14 @@ import { SubmissionTimeViewComponent } from './views/submission-time-view/submis
 @NgModule({
   imports: [
     BrowserModule,
+    DialogModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatDialogModule,
     MatIconModule,
     MatListModule,
+    MatMenuModule,
     MatProgressSpinnerModule,
   ],
   exports: [SubmissionPanelComponent],

web/src/app/components/shared/dialog/dialog.component.ts

@@ -27,6 +27,7 @@ export enum DialogType {
   CopySurvey,
   DeleteLois,
   DeleteOption,
+  DeleteSubmission,
   DeleteSurvey,
   DisableFreeForm,
   InvalidSurvey,
@@ -81,6 +82,12 @@ export const dialogConfigs: Record<DialogType, DialogConfig> = {
     backButtonLabel: $localize`:@@app.labels.cancel:Cancel`,
     continueButtonLabel: $localize`:@@app.labels.confirm:Confirm`,
   },
+  [DialogType.DeleteSubmission]: {
+    title: $localize`:@@app.dialogs.deleteSubmission.title:Delete submission?`,
+    content: $localize`:@@app.dialogs.deleteSubmission.content:This action will permanently delete this submission from the database. Are you sure you want to delete it?`,
+    backButtonLabel: $localize`:@@app.labels.cancel:Cancel`,
+    continueButtonLabel: $localize`:@@app.labels.delete:Delete`,
+  },
   [DialogType.DeleteSurvey]: {
     title: $localize`:@@app.dialogs.deleteSurvey.title:Delete survey`,
     content: $localize`:@@app.dialogs.deleteSurvey.content:Are you sure you wish to delete this survey? All associated data will be lost. This cannot be undone.`,

web/src/app/services/submission/submission.service.ts

@@ -74,6 +74,10 @@ export class SubmissionService {
     );
   }
 
+  deleteSubmission(surveyId: string, submissionId: string): Promise<void> {
+    return this.dataStore.deleteSubmission(surveyId, submissionId);
+  }
+
   createNewSubmission(
     user: User,
     survey: Survey,