✨ TripDay creation: use date

backend/trip/routers/trips.py

@@ -293,7 +293,7 @@ def create_tripday(
     if db_trip.archived:
         raise HTTPException(status_code=400, detail="Bad request")
 
-    new_day = TripDay(label=td.label, trip_id=trip_id)
+    new_day = TripDay(label=td.label, dt=td.dt, trip_id=trip_id)
 
     session.add(new_day)
     session.commit()

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { ButtonModule } from 'primeng/button';
 import { SkeletonModule } from 'primeng/skeleton';
-import { TripBase, TripInvitation } from '../../types/trip';
+import { TripBase, TripInvitation, TripDay } 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';
@@ -81,8 +81,8 @@ export class TripsComponent implements OnInit {
             let dayCount = 0;
 
             if (trip.daterange && trip.daterange.length === 2) {
-              const obs$ = this.generateDaysLabel(trip.daterange).map((label) =>
-                this.apiService.postTripDay({ id: -1, label: label, items: [] }, new_trip.id),
+              const obs$ = this.generateTripDays(trip.daterange).map((td) =>
+                this.apiService.postTripDay({ id: -1, label: td.label!, dt: td.dt, items: [] }, new_trip.id),
               );
               dayCount = obs$.length;
               forkJoin(obs$).pipe(take(1)).subscribe();
@@ -106,26 +106,22 @@ export class TripsComponent implements OnInit {
     });
   }
 
-  generateDaysLabel(daterange: Date[]): string[] {
-    const from = daterange[0];
-    const to = daterange[1];
-    const labels: string[] = [];
+  generateTripDays(daterange: Date[]): Partial<TripDay>[] {
+    const [from, to] = daterange;
+    const tripDays: Partial<TripDay>[] = [];
     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);
+      const day = current.getDate().toString().padStart(2, '0');
+      const month = current.getMonth();
+      const label = sameMonth ? `${day} ${months[month]}` : `${(month + 1).toString().padStart(2, '0')}/${day}`;
+      tripDays.push({ label, dt: current.toISOString().split('T')[0] });
       current.setDate(current.getDate() + 1);
     }
-    return labels;
+    return tripDays;
   }
 
   toggleInvitations() {

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

@@ -1,9 +1,15 @@
 <section>
-  <div [formGroup]="dayForm">
-    <p-floatlabel variant="in">
-      <input id="label" formControlName="label" pInputText fluid (keyup.enter)="closeDialog()" />
+  <div [formGroup]="dayForm" class="grid md:grid-cols-3 gap-4">
+    <p-floatlabel variant="in" class="md:col-span-2">
+      <input id="label" formControlName="label" autofocus pInputText fluid (keyup.enter)="closeDialog()" />
       <label for="label">Label</label>
     </p-floatlabel>
+
+    <p-floatlabel variant="in">
+      <p-datepicker id="date" formControlName="dt" [iconDisplay]="'input'" [showIcon]="true" appendTo="body" fluid
+        (keyup.enter)="closeDialog()" />
+      <label for="date">Date</label>
+    </p-floatlabel>
   </div>
 
   <div class="mt-4 text-right">

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

@@ -4,18 +4,17 @@ import { ButtonModule } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextModule } from 'primeng/inputtext';
-import { TripDay } from '../../types/trip';
+import { DatePickerModule } from 'primeng/datepicker';
 
 @Component({
   selector: 'app-trip-create-day-modal',
-  imports: [FloatLabelModule, InputTextModule, ButtonModule, ReactiveFormsModule],
+  imports: [FloatLabelModule, InputTextModule, DatePickerModule, ButtonModule, ReactiveFormsModule],
   standalone: true,
   templateUrl: './trip-create-day-modal.component.html',
   styleUrl: './trip-create-day-modal.component.scss',
 })
 export class TripCreateDayModalComponent {
   dayForm: FormGroup;
-  days: TripDay[] = [];
 
   constructor(
     private ref: DynamicDialogRef,
@@ -24,12 +23,15 @@ export class TripCreateDayModalComponent {
   ) {
     this.dayForm = this.fb.group({
       id: -1,
+      dt: null,
       label: ['', Validators.required],
     });
 
     if (this.config.data) {
-      if (this.config.data.day) this.dayForm.patchValue(this.config.data.day);
-      this.days.push(...this.config.data.days);
+      this.dayForm.patchValue({
+        ...this.config.data,
+        dt: this.config.data.dt ? new Date(this.config.data.dt) : null,
+      });
     }
   }
 
@@ -37,6 +39,7 @@ export class TripCreateDayModalComponent {
     // Normalize data for API POST
     let ret = this.dayForm.value;
     if (!ret['label']) return;
+    if (ret['dt']) ret['dt'] = ret['dt'].toISOString().split('T')[0];
     this.ref.close(ret);
   }
 }