diff --git a/src/interface/src/app/plan/create-scenarios/create-scenarios.component.html b/src/interface/src/app/plan/create-scenarios/create-scenarios.component.html
index 6411de5a4..437979c57 100644
--- a/src/interface/src/app/plan/create-scenarios/create-scenarios.component.html
+++ b/src/interface/src/app/plan/create-scenarios/create-scenarios.component.html
@@ -113,7 +113,7 @@
icon="add"
class="new-treatment"
[disabled]="creatingTreatment"
- (click)="createTreatment()">
+ (click)="openTreatmentDialog()">
New Treatment Plan
diff --git a/src/interface/src/app/plan/create-scenarios/create-scenarios.component.ts b/src/interface/src/app/plan/create-scenarios/create-scenarios.component.ts
index 70c4f3235..9c07a1073 100644
--- a/src/interface/src/app/plan/create-scenarios/create-scenarios.component.ts
+++ b/src/interface/src/app/plan/create-scenarios/create-scenarios.component.ts
@@ -24,6 +24,8 @@ import { MetricsService } from '@services/metrics.service';
import { processScenarioResultsToChartData } from '../scenario-helpers';
import { TreatmentsService } from '@services/treatments.service';
import { canAddTreatmentPlan } from '../permissions';
+import { MatDialog } from '@angular/material/dialog';
+import { CreateTreatmentDialogComponent } from './create-treatment-dialog/create-treatment-dialog.component';
enum ScenarioTabs {
CONFIG,
@@ -84,7 +86,8 @@ export class CreateScenariosComponent implements OnInit {
private featureService: FeatureService,
private goalOverlayService: GoalOverlayService,
private metricsService: MetricsService,
- private treatmentsService: TreatmentsService
+ private treatmentsService: TreatmentsService,
+ private dialog: MatDialog
) {}
createForms() {
@@ -353,7 +356,19 @@ export class CreateScenariosComponent implements OnInit {
return this.showTreatmentsTab && !!plan && canAddTreatmentPlan(plan);
}
- createTreatment() {
+ openTreatmentDialog() {
+ this.dialog
+ .open(CreateTreatmentDialogComponent)
+ .afterClosed()
+ .pipe(take(1))
+ .subscribe((name) => {
+ if (name) {
+ this.createTreatment(name);
+ }
+ });
+ }
+
+ createTreatment(name: string) {
this.creatingTreatment = true;
const scenarioId = this.scenarioId;
if (!scenarioId) {
@@ -361,7 +376,7 @@ export class CreateScenariosComponent implements OnInit {
}
this.treatmentsService
- .createTreatmentPlan(Number(scenarioId), 'New Treatment Plan')
+ .createTreatmentPlan(Number(scenarioId), name)
.subscribe({
next: (result) => {
this.goToTreatment(result.id);
diff --git a/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.html b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.html
new file mode 100644
index 000000000..02b9705bc
--- /dev/null
+++ b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.html
@@ -0,0 +1,35 @@
+
Name Your Treatment Plan
+
diff --git a/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.scss b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.scss
new file mode 100644
index 000000000..32c9feecb
--- /dev/null
+++ b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.scss
@@ -0,0 +1,19 @@
+:host {
+ display: block;
+}
+
+mat-form-field {
+ min-width: 480px;
+}
+
+.name-field {
+ margin-top: 32px;
+}
+
+.title {
+ margin: 24px 24px 0;
+}
+
+mat-dialog-actions {
+ padding: 0 24px 16px;
+}
\ No newline at end of file
diff --git a/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.spec.ts b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.spec.ts
new file mode 100644
index 000000000..ae16bc1d7
--- /dev/null
+++ b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTreatmentDialogComponent } from './create-treatment-dialog.component';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { LegacyMaterialModule } from 'src/app/material/legacy-material.module';
+import { MockProvider } from 'ng-mocks';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('CreateTreatmentDialogComponent', () => {
+ let component: CreateTreatmentDialogComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [
+ CreateTreatmentDialogComponent,
+ CommonModule,
+ ReactiveFormsModule,
+ LegacyMaterialModule,
+ BrowserAnimationsModule,
+ ],
+ providers: [MockProvider(MatDialogRef)],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CreateTreatmentDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.ts b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.ts
new file mode 100644
index 000000000..8e37c474e
--- /dev/null
+++ b/src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.ts
@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+ FormControl,
+ FormGroup,
+ ReactiveFormsModule,
+ Validators,
+} from '@angular/forms';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { LegacyMaterialModule } from 'src/app/material/legacy-material.module';
+
+@Component({
+ selector: 'app-create-treatment-dialog',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatDialogModule,
+ LegacyMaterialModule,
+ ],
+ templateUrl: './create-treatment-dialog.component.html',
+ styleUrl: './create-treatment-dialog.component.scss',
+})
+export class CreateTreatmentDialogComponent {
+ submitting: boolean = false;
+ treatmentForm = new FormGroup({
+ treatmentName: new FormControl('', [Validators.required]),
+ });
+
+ constructor(
+ private dialogRef: MatDialogRef
+ ) {}
+
+ async submit() {
+ if (this.treatmentForm.valid) {
+ this.submitting = true;
+ const treatmentName =
+ this.treatmentForm.get('treatmentName')?.value || '';
+ this.dialogRef.close(treatmentName);
+ this.submitting = false;
+ }
+ }
+
+ cancel(): void {
+ this.submitting = false;
+ this.dialogRef.close();
+ }
+}