✨ Trip creation: automatically generate days

src/src/app/components/trips/trips.component.ts

@@ -6,7 +6,12 @@ import { TripBase } from "../../types/trip";
 import { DialogService, DynamicDialogRef } from "primeng/dynamicdialog";
 import { TripCreateModalComponent } from "../../modals/trip-create-modal/trip-create-modal.component";
 import { Router } from "@angular/router";
-import { take } from "rxjs";
+import { forkJoin, take } from "rxjs";
+
+interface TripBaseWithDates extends TripBase {
+  from?: Date;
+  to?: Date;
+}
 
 @Component({
   selector: "app-trips",
@@ -61,12 +66,26 @@ export class TripsComponent implements OnInit {
     );
 
     modal.onClose.pipe(take(1)).subscribe({
-      next: (trip: TripBase | null) => {
+      next: (trip: TripBaseWithDates | null) => {
         if (!trip) return;
 
         this.apiService.postTrip(trip).subscribe({
-          next: (trip: TripBase) => {
+          next: (new_trip: TripBase) => {
-            this.trips.push(trip);
+            let dayCount = 0;
+
+            if (trip.from && trip.to) {
+              const obs$ = this.generateDaysLabel(trip.from!, trip.to!).map(
+                (label) =>
+                  this.apiService.postTripDay(
+                    { id: -1, label: label, items: [] },
+                    new_trip.id,
+                  ),
+              );
+              dayCount = obs$.length;
+              forkJoin(obs$).pipe(take(1)).subscribe();
+            }
+
+            this.trips.push({ ...new_trip, days: dayCount });
             this.sortTrips();
           },
         });
@@ -83,4 +102,39 @@ export class TripsComponent implements OnInit {
       return a.name.localeCompare(b.name);
     });
   }
+
+  generateDaysLabel(from: Date, to: Date): string[] {
+    const labels: string[] = [];
+    const sameMonth =
+      from.getFullYear() === to.getFullYear() &&
+      from.getMonth() === to.getMonth();
+
+    const months = [
+      "Jan.",
+      "Feb.",
+      "Mar.",
+      "Apr.",
+      "May.",
+      "Jun.",
+      "Jul.",
+      "Aug.",
+      "Sep.",
+      "Oct.",
+      "Nov.",
+      "Dec.",
+    ];
+
+    const current = new Date(from);
+    while (current <= to) {
+      let label = "";
+      if (sameMonth) {
+        label = `${current.getDate().toString().padStart(2, "0")} ${months[current.getMonth()]}`;
+      } else {
+        label = `${(current.getMonth() + 1).toString().padStart(2, "0")}/${current.getDate().toString().padStart(2, "0")}`;
+      }
+      labels.push(label);
+      current.setDate(current.getDate() + 1);
+    }
+    return labels;
+  }
 }

src/src/app/modals/trip-create-modal/trip-create-modal.component.html

@@ -4,6 +4,20 @@
     <label for="name">Name</label>
   </p-floatlabel>
 
+  @if (tripForm.get("id")?.value === -1) {
+  <div class="grid grid-cols-2 gap-2">
+    <p-floatlabel variant="in">
+      <p-datepicker id="from" formControlName="from" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
+      <label for="from">From</label>
+    </p-floatlabel>
+
+    <p-floatlabel variant="in">
+      <p-datepicker id="to" formControlName="to" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid />
+      <label for="to">To</label>
+    </p-floatlabel>
+  </div>
+  }
+
   <div class="grid place-items-center">
     @if (tripForm.get("image_id")?.value) {
     <div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="fileInput.click()">

src/src/app/modals/trip-create-modal/trip-create-modal.component.ts

@@ -10,12 +10,14 @@ import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
 import { FloatLabelModule } from "primeng/floatlabel";
 import { InputTextModule } from "primeng/inputtext";
 import { FocusTrapModule } from "primeng/focustrap";
+import { DatePickerModule } from "primeng/datepicker";
 
 @Component({
   selector: "app-trip-create-modal",
   imports: [
     FloatLabelModule,
     InputTextModule,
+    DatePickerModule,
     ButtonModule,
     ReactiveFormsModule,
     FocusTrapModule,
@@ -39,6 +41,8 @@ export class TripCreateModalComponent {
       name: ["", Validators.required],
       image: "",
       image_id: null,
+      from: null,
+      to: null,
     });
 
     const patchValue = this.config.data?.trip;