:feature: Trip: multi-days item creation

src/src/app/components/trip/trip.component.ts

@@ -413,6 +413,7 @@ export class TripComponent implements AfterViewInit {
       this.map?.removeLayer(this.tripMapTemporaryMarker);
       this.tripMapTemporaryMarker = undefined;
     }
+    this.resetMapBounds();
   }
 
   placeHighlightMarker(lat: number, lng: number) {
@@ -961,27 +962,40 @@ export class TripComponent implements AfterViewInit {
     );
 
     modal.onClose.pipe(take(1)).subscribe({
-      next: (item: TripItem | null) => {
+      next: (item: (TripItem & { day_id: number[] }) | null) => {
         if (!item) return;
 
-        this.apiService
-          .postTripDayItem(item, this.trip!.id!, item.day_id)
+        const obs$ = item.day_id.map((day_id) =>
+          this.apiService.postTripDayItem(
+            { ...item, day_id },
+            this.trip!.id!,
+            day_id,
+          ),
+        );
+
+        forkJoin(obs$)
           .pipe(take(1))
           .subscribe({
-            next: (resp) => {
-              const idx = this.trip!.days.findIndex((d) => d.id == item.day_id);
-              if (idx === -1) return;
+            next: (items: TripItem[]) => {
+              items.forEach((item) => {
+                const idx = this.trip!.days.findIndex(
+                  (d) => d.id == item.day_id,
+                );
+                if (idx === -1) return;
+
+                const td: TripDay = this.trip!.days[idx];
+                td.items.push(item);
+
+                this.dayStatsCache.delete(item.day_id);
+                if (item.price) this.updateTotalPrice(item.price);
+                if (item.place?.id) {
+                  this.placesUsedInTable.add(item.place.id);
+                  this.setPlacesAndMarkers();
+                }
+              });
 
-              const td: TripDay = this.trip!.days[idx];
-              td.items.push(resp);
               this.flattenTripDayItems();
-
-              this.dayStatsCache.delete(resp.day_id);
-              if (resp.price) this.updateTotalPrice(resp.price);
-              if (resp.place?.id) {
-                this.placesUsedInTable.add(resp.place.id);
-                this.setPlacesAndMarkers();
-              }
+              this.setPlacesAndMarkers();
             },
           });
       },

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

@@ -1,15 +1,25 @@
 <section>
   <div [formGroup]="itemForm">
     <div class="grid md:grid-cols-5 gap-4">
-      <p-floatlabel variant="in">
+      @if (itemForm.get('id')?.value !== -1) {
+      <p-floatlabel variant="in" class="min-w-0">
         <p-select [options]="days" optionValue="id" optionLabel="label" inputId="day_id" id="day_id"
-          formControlName="day_id" [checkmark]="true" class="capitalize" fluid>
+          formControlName="day_id" [checkmark]="true" fluid>
           <ng-template let-day #item>
             <div class="whitespace-normal">{{ day.label }}</div>
           </ng-template>
         </p-select>
         <label for="day_id">Day</label>
       </p-floatlabel>
+      } @else {
+      <p-multiselect [options]="days" optionValue="id" optionLabel="label" formControlName="day_id" placeholder="Days"
+        [filter]="false" [showToggleAll]="false" display="chip" styleClass="flex items-center"
+        selectedItemsLabel="{0} days selected" fluid>
+        <ng-template let-day #item>
+          <div class="whitespace-normal">{{ day.label }}</div>
+        </ng-template>
+      </p-multiselect>
+      }
 
       <p-floatlabel variant="in" class="w-full">
         <p-inputmask id="time" formControlName="time" mask="99?:99" fluid styleClass="w-full" />

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

@@ -18,6 +18,7 @@ import { UtilsService } from "../../services/utils.service";
 import { checkAndParseLatLng, formatLatLng } from "../../shared/latlng-parser";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { InputNumberModule } from "primeng/inputnumber";
+import { MultiSelectModule } from "primeng/multiselect";
 
 @Component({
   selector: "app-trip-create-day-item-modal",
@@ -34,6 +35,7 @@ import { InputNumberModule } from "primeng/inputnumber";
     ButtonModule,
     ReactiveFormsModule,
     InputMaskModule,
+    MultiSelectModule,
   ],
   standalone: true,
   templateUrl: "./trip-create-day-item-modal.component.html",