feat(planting): create seed details dialog component

artaommahe · Aug 31, 2024 · 29dbef7 · 29dbef7
1 parent 12e5f1f
commit 29dbef7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/src/app/planting/planting-page.component.ts b/src/app/planting/planting-page.component.ts
@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/cor
 
 import { BarnService } from '../barn/barn.service';
 import { AddTermsButtonComponent } from '../home/add-terms-button/add-terms-button.component';
-import { DialogComponent } from '../ui/dialog/dialog.component';
-import { SeedDetailsComponent, type SeedDetailsSeed } from './seed-details/seed-details.component';
+import { SeedDetailsDialogComponent } from './seed-details-dialog/seed-details-dialog.component';
+import type { SeedDetailsSeed } from './seed-details/seed-details.component';
 import { SeedsListComponent } from './seeds-list/seeds-list.component';
 
 @Component({
@@ -15,18 +15,11 @@ import { SeedsListComponent } from './seeds-list/seeds-list.component';
       <app-add-terms-button />
 
       @if (seedDetails(); as seed) {
-        <app-dialog (close)="seedDetails.set(null)">
-          <app-seed-details
-            [seed]="seed"
-            (cancel)="seedDetails.set(null)"
-            (remove)="onRemoveSeed(seed.name)"
-            (update)="onUpdateSeed(seed.name, $event)"
-          />
-        </app-dialog>
+        <app-seed-details-dialog [seed]="seed" (close)="seedDetails.set(null)" />
       }
     </div>
   `,
-  imports: [SeedsListComponent, SeedDetailsComponent, DialogComponent, AddTermsButtonComponent],
+  imports: [SeedsListComponent, SeedDetailsDialogComponent, AddTermsButtonComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -35,14 +28,4 @@ export class PlantingPageComponent {
 
   seeds = this.barnService.seeds;
   seedDetails = signal<SeedDetailsSeed | null>(null);
-
-  onRemoveSeed(name: string) {
-    this.barnService.removeSeed(name);
-    this.seedDetails.set(null);
-  }
-
-  onUpdateSeed(name: string, value: Partial<SeedDetailsSeed>) {
-    this.barnService.updateSeed(name, value);
-    this.seedDetails.set(null);
-  }
 }
diff --git a/src/app/planting/seed-details-dialog/seed-details-dialog.component.ts b/src/app/planting/seed-details-dialog/seed-details-dialog.component.ts
@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
+
+import { BarnService } from '../../barn/barn.service';
+import { DialogComponent } from '../../ui/dialog/dialog.component';
+import { SeedDetailsComponent, type SeedDetailsSeed } from '../seed-details/seed-details.component';
+
+@Component({
+  selector: 'app-seed-details-dialog',
+  template: `
+    <app-dialog (close)="close.emit()">
+      <app-seed-details
+        [seed]="seed()"
+        (cancel)="close.emit()"
+        (remove)="onRemoveSeed(seed().name)"
+        (update)="onUpdateSeed(seed().name, $event)"
+      />
+    </app-dialog>
+  `,
+  imports: [DialogComponent, SeedDetailsComponent],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeedDetailsDialogComponent {
+  private barnService = inject(BarnService);
+
+  seed = input.required<SeedDetailsSeed>();
+
+  close = output();
+
+  onRemoveSeed(name: string) {
+    this.barnService.removeSeed(name);
+    this.close.emit();
+  }
+
+  onUpdateSeed(name: string, value: Partial<SeedDetailsSeed>) {
+    this.barnService.updateSeed(name, value);
+    this.close.emit();
+  }
+}