✨ TripItem modal: attachments

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

@@ -13,8 +13,8 @@
       </p-floatlabel>
       } @else {
       <p-multiselect [options]="days" optionValue="id" optionLabel="label" formControlName="day_id" placeholder="Days"
-        [filter]="false" [showToggleAll]="false" display="chip" class="flex items-center" scrollHeight="320px"
+        [showToggleAll]="false" display="chip" class="flex items-center" scrollHeight="320px" appendTo="body"
-        appendTo="body" selectedItemsLabel="{0} days selected" [filter]="true" fluid>
+        selectedItemsLabel="{0} days selected" fluid>
         <ng-template let-day #item>
           <div class="whitespace-normal">{{ day.label }}</div>
         </ng-template>
@@ -73,7 +73,7 @@
         }
       </p-inputgroup>
 
-      <p-floatlabel variant="in" class="md:col-span-2">
+      <p-floatlabel variant="in">
         <p-select [options]="statuses" optionValue="label" optionLabel="label" inputId="status" id="status"
           class="capitalize" formControlName="status" [checkmark]="true" [showClear]="true" fluid>
           <ng-template #selectedItem let-selectedOption>
@@ -90,6 +90,23 @@
         </p-select>
         <label for="status">Status</label>
       </p-floatlabel>
+
+      <p-floatlabel variant="in">
+        <p-multiselect [options]="trip?.attachments ?? []" optionValue="id" optionLabel="filename"
+          formControlName="attachments" [showToggleAll]="false" class="flex items-center" scrollHeight="320px"
+          appendTo="body" selectedItemsLabel="{0} attachments selected" fluid>
+          <ng-template let-option #item>
+            <div class="whitespace-normal">{{ option.filename }}</div>
+          </ng-template>
+          <ng-template #footer>
+            <div class="p-3 flex justify-center">
+              <p-button (click)="fileUpload.click()" icon="pi pi-upload" label="Upload attachment" text />
+              <input type="file" style="display: none;" (change)="onFileUploadInputChange($event)" #fileUpload>
+            </div>
+          </ng-template>
+        </p-multiselect>
+        <label for="attachments">Attachments</label>
+      </p-floatlabel>
     </div>
 
     <div class="mt-4 grid col-span-full md:grid-cols-7">

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

@@ -4,7 +4,7 @@ import { ButtonModule } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextModule } from 'primeng/inputtext';
-import { TripDay, TripMember, TripStatus } from '../../types/trip';
+import { Trip, TripAttachment, TripDay, TripMember, TripStatus } from '../../types/trip';
 import { Place } from '../../types/poi';
 import { SelectModule } from 'primeng/select';
 import { TextareaModule } from 'primeng/textarea';
@@ -17,6 +17,8 @@ import { MultiSelectModule } from 'primeng/multiselect';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { Popover, PopoverModule } from 'primeng/popover';
+import { ApiService } from '../../services/api.service';
+import { take } from 'rxjs';
 
 @Component({
   selector: 'app-trip-create-day-item-modal',
@@ -51,11 +53,13 @@ export class TripCreateDayItemModalComponent {
   statuses: TripStatus[] = [];
   previous_image_id: number | null = null;
   previous_image: string | null = null;
+  trip?: Trip;
 
   constructor(
     private ref: DynamicDialogRef,
     private fb: FormBuilder,
     private config: DynamicDialogConfig,
+    private apiService: ApiService,
     private utilsService: UtilsService,
   ) {
     this.statuses = this.utilsService.statuses;
@@ -91,6 +95,7 @@ export class TripCreateDayItemModalComponent {
         },
       ],
       paid_by: null,
+      attachments: [],
     });
 
     const data = this.config.data;
@@ -98,11 +103,13 @@ export class TripCreateDayItemModalComponent {
       this.members = data.members ?? [];
       this.places = data.places ?? [];
       this.days = data.days ?? [];
+      this.trip = data.trip ?? [];
 
       if (data.item)
         this.itemForm.patchValue({
           ...data.item,
           place: data.item.place?.id ?? null,
+          attachments: data.item.attachments.map((a: TripAttachment) => a.id),
         });
 
       if (data.selectedDay) this.itemForm.get('day_id')?.setValue([data.selectedDay]);
@@ -165,6 +172,10 @@ export class TripCreateDayItemModalComponent {
     }
     if (ret['gpx'] == '1') delete ret['gpx'];
     if (!ret['place']) delete ret['place'];
+    if (ret['attachments']) {
+      ret['attachment_ids'] = ret['attachments'];
+      delete ret['attachments'];
+    }
     this.ref.close(ret);
   }
 
@@ -238,4 +249,20 @@ export class TripCreateDayItemModalComponent {
     this.itemForm.get('gpx')?.setValue(null);
     this.itemForm.get('gpx')?.markAsDirty();
   }
+
+  onFileUploadInputChange(event: Event) {
+    if (!this.trip) return;
+    const input = event.target as HTMLInputElement;
+    if (!input.files?.length) return;
+
+    const formdata = new FormData();
+    formdata.append('file', input.files[0]);
+
+    this.apiService
+      .postTripAttachment(this.trip?.id, formdata)
+      .pipe(take(1))
+      .subscribe({
+        next: (attachment) => (this.trip!.attachments = [...this.trip!.attachments!, attachment]),
+      });
+  }
 }