update scenario archiving

src/interface/src/app/plan/plan-summary/scenarios-card-list/scenarios-card-list.component.html

@@ -2,15 +2,17 @@
   *ngFor="let s of scenarios"
   [name]="s.name"
   [creator]="s.creator"
-  [areas]="getAreas(s)"
+  [areas]="numberOfAreas(s)"
   [created_at]="s.created_at"
   [budget]="
     hasResults(s) ? calculateTotals(s.scenario_result!).estimatedCost : null
   "
   [treatmentPlansCount]="s.tx_plan_count"
-  [status]="s.scenario_result?.status || 'PENDING'"
+  [resultStatus]="s.scenario_result?.status || 'PENDING'"
+  [archiveStatus]="s.status"
   (click)="handleClickedScenario(s)"
   [selected]="isSelected(s)"
   [treatmentPlansEnabled]="treatmentPlansEnabled"
-  [userCanArchiveScenario]="userCanArchiveScenario(s)">
+  [userCanArchiveScenario]="userCanArchiveScenario(s)"
+  (toggleArchiveStatus)="toggleScenarioStatus(s)">
 </sg-scenario-card>

src/interface/src/app/plan/plan-summary/scenarios-card-list/scenarios-card-list.component.scss

@@ -4,7 +4,7 @@
 :host {
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  justify-content: flex-start;
   gap: 20px;
   padding-top: 20px;
   padding-bottom: 20px;

src/interface/src/app/plan/plan-summary/scenarios-card-list/scenarios-card-list.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ScenariosCardListComponent } from './scenarios-card-list.component';
 import { FeaturesModule } from '../../../features/features.module';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 describe('ScenariosCardListComponent', () => {
   let component: ScenariosCardListComponent;
@@ -12,6 +13,7 @@ describe('ScenariosCardListComponent', () => {
       imports: [
         FeaturesModule,
         HttpClientTestingModule,
+        MatSnackBarModule,
         ScenariosCardListComponent,
       ],
     }).compileComponents();

src/interface/src/app/plan/plan-summary/scenarios-card-list/scenarios-card-list.component.ts

@@ -9,7 +9,9 @@ import {
 } from '../../plan-helpers';
 import { FeatureService } from '../../../features/feature.service';
 import { Plan, Scenario, ScenarioResult } from '@types';
-import { AuthService } from '@services';
+import { AuthService, ScenarioService } from '@services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SNACK_BOTTOM_NOTICE_CONFIG, SNACK_ERROR_CONFIG } from '@shared';
 
 @Component({
   selector: 'app-scenarios-card-list',
@@ -27,12 +29,14 @@ export class ScenariosCardListComponent {
 
   constructor(
     private featureService: FeatureService,
-    private authService: AuthService
+    private authService: AuthService,
+    private snackbar: MatSnackBar,
+    private scenarioService: ScenarioService
   ) {}
 
   treatmentPlansEnabled = this.featureService.isFeatureEnabled('treatments');
 
-  getAreas(scenario: Scenario) {
+  numberOfAreas(scenario: Scenario) {
     return scenario.scenario_result?.result?.features?.length;
   }
 
@@ -69,4 +73,27 @@ export class ScenariosCardListComponent {
     const user = this.authService.currentUser();
     return user?.id === this.plan?.user || user?.id == scenario.user;
   }
+
+  toggleScenarioStatus(scenario: Scenario) {
+    if (scenario.id) {
+      const originalStatus = scenario.status;
+      this.scenarioService.toggleScenarioStatus(Number(scenario.id)).subscribe({
+        next: () => {
+          this.snackbar.open(
+            `"${scenario.name}" has been ${originalStatus === 'ARCHIVED' ? 'restored' : 'archived'}`,
+            'Dismiss',
+            SNACK_BOTTOM_NOTICE_CONFIG
+          );
+          //TODO: refetch the list
+        },
+        error: (err) => {
+          this.snackbar.open(
+            `Error: ${err.error.error}`,
+            'Dismiss',
+            SNACK_ERROR_CONFIG
+          );
+        },
+      });
+    }
+  }
 }

src/interface/src/styleguide/scenario-card/scenario-card.component.html

@@ -2,7 +2,7 @@
   <div class="title-section">
     <div class="scenario-name">{{ name }}</div>
     <sg-status-chip
-      *ngIf="status"
+      *ngIf="resultStatus"
       [status]="getChipStatus()"
       [label]="getChipLabel()"></sg-status-chip>
     <div *ngIf="hasFailed() && treatmentPlansEnabled" class="failed-message">
@@ -27,17 +27,26 @@
       mat-icon-button>
       <mat-icon>more_vert</mat-icon>
     </button>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="openScenario.emit()">
-        <mat-icon class="folder_open-icon">folder_open</mat-icon>
+    <mat-menu class="scenario-more-menu" #menu="matMenu">
+      <button
+        class="more-menu-item"
+        mat-menu-item
+        (click)="openScenario.emit()">
+        <mat-icon class="material-symbols-outlined">folder_open</mat-icon>
         <span>Open</span>
       </button>
       <button
+        class="more-menu-item"
         mat-menu-item
         *ngIf="userCanArchiveScenario"
-        (click)="archiveScenario.emit()">
-        <mat-icon class="archive-icon">archive</mat-icon>
-        <span>Archive</span>
+        (click)="toggleArchiveStatus.emit()">
+        <mat-icon *ngIf="!isArchived()" class="material-symbols-outlined"
+          >archive</mat-icon
+        >
+        <mat-icon *ngIf="isArchived()" class="material-symbols-outlined"
+          >unarchive</mat-icon
+        >
+        <span>{{ isArchived() ? 'Restore' : 'Archive' }}</span>
       </button>
     </mat-menu>
   </div>

src/interface/src/styleguide/scenario-card/scenario-card.component.scss

@@ -87,6 +87,9 @@
     border: none;
     background-color: white;
   }
+  .scenario-more-menu {
+    width: 140px;
+  }
 
   .detail-row {
     display: flex;
@@ -118,3 +121,13 @@
     background-color: inherit;
   }
 }
+
+::ng-deep .scenario-more-menu .mat-icon {
+  margin-right: 8px;
+  height: 20px;
+  width: 20px;
+  font-size: 20px;
+}
+::ng-deep .scenario-more-menu .mat-mdc-menu-panel {
+  width: 140px;
+}

src/interface/src/styleguide/scenario-card/scenario-card.component.ts

@@ -46,7 +46,8 @@ export type ScenarioResultLabel = 'Done' | 'Running' | 'Failed';
   styleUrl: './scenario-card.component.scss',
 })
 export class ScenarioCardComponent {
-  @Input() status: ScenarioResultStatus = 'SUCCESS';
+  @Input() resultStatus: ScenarioResultStatus = 'SUCCESS';
+  @Input() archiveStatus: 'ACTIVE' | 'ARCHIVED' = 'ACTIVE';
   @Input() name = '';
   @Input() areas? = 0;
   @Input() budget: number | null = null;
@@ -60,7 +61,7 @@ export class ScenarioCardComponent {
 
   @Output() openScenario = new EventEmitter();
   @Output() openPlanningProgress = new EventEmitter();
-  @Output() archiveScenario = new EventEmitter();
+  @Output() toggleArchiveStatus = new EventEmitter();
   @Output() clicked = new EventEmitter();
 
   readonly chipsStatus: Record<
@@ -82,17 +83,21 @@ export class ScenarioCardComponent {
 
   hasFailed(): boolean {
     const failedValues = ['LOADING', 'NOT_STARTED', 'PENDING', 'RUNNING'];
-    return failedValues.includes(this.status);
+    return failedValues.includes(this.resultStatus);
   }
 
   isRunning(): boolean {
     const runningValues = ['LOADING', 'NOT_STARTED', 'PENDING', 'RUNNING'];
-    return runningValues.includes(this.status);
+    return runningValues.includes(this.resultStatus);
   }
 
   isDone(): boolean {
     const doneValues = ['SUCCESS'];
-    return doneValues.includes(this.status);
+    return doneValues.includes(this.resultStatus);
+  }
+
+  isArchived(): boolean {
+    return this.archiveStatus === 'ARCHIVED';
   }
 
   @HostBinding('class.disabled-content')
@@ -106,15 +111,15 @@ export class ScenarioCardComponent {
   }
 
   getChipStatus(): StatusChipStatus {
-    if (this.status) {
-      return this.chipsStatus[this.status].status;
+    if (this.resultStatus) {
+      return this.chipsStatus[this.resultStatus].status;
     }
     return 'failed';
   }
 
   getChipLabel(): ScenarioResultLabel {
-    if (this.status) {
-      return this.chipsStatus[this.status].label;
+    if (this.resultStatus) {
+      return this.chipsStatus[this.resultStatus].label;
     }
     return 'Failed';
   }

src/interface/src/styleguide/scenario-card/scenario-card.stories.ts

@@ -25,40 +25,41 @@ export const Default: Story = {
   args: {
     name: 'Test Scenario',
     areas: 5,
-    status: 'SUCCESS',
+    resultStatus: 'SUCCESS',
     creator: 'Larry Larrington',
     created_at: '2024-01-01 12:34:00',
     budget: 1234567,
     treatmentPlansCount: 5,
+    userCanArchiveScenario: true,
   },
 };
 
 export const Running: Story = {
   args: {
     ...Default.args,
-    status: 'RUNNING',
+    resultStatus: 'RUNNING',
   },
 };
 
 export const Done: Story = {
   args: {
     ...Default.args,
-    status: 'SUCCESS',
+    resultStatus: 'SUCCESS',
   },
 };
 
 export const Failed: Story = {
   args: {
     ...Default.args,
-    status: 'FAILURE',
+    resultStatus: 'FAILURE',
   },
 };
 
 export const TreatmentsPlansEnabled: Story = {
   args: {
     name: 'Test Scenario',
     areas: 5,
-    status: 'SUCCESS',
+    resultStatus: 'SUCCESS',
     creator: 'Larry Larrington',
     created_at: '2024-01-01 12:34:00',
     budget: 1234567,
@@ -67,16 +68,16 @@ export const TreatmentsPlansEnabled: Story = {
   },
 };
 
-export const UserCanArchiveScenario: Story = {
+export const UserCannotArchiveScenario: Story = {
   args: {
     name: 'Test Scenario',
     areas: 5,
-    status: 'SUCCESS',
+    resultStatus: 'SUCCESS',
     creator: 'Larry Larrington',
     created_at: '2024-01-01 12:34:00',
     budget: 1234567,
     treatmentPlansCount: 5,
     treatmentPlansEnabled: true,
-    userCanArchiveScenario: true,
+    userCanArchiveScenario: false,
   },
 };