Fix update post

libs/media/src/lib/components/images-selector/images-selector.component.html

@@ -1,6 +1,6 @@
 <swiper-container space-between="16" slides-per-view="auto" #swiper>
-  <ng-container *ngFor="let control of form.controls">
-    <swiper-slide>
+  <ng-container *ngFor="let control of form.controls; let index = index">
+    <swiper-slide (click)="openPopover($event, index)">
       <img [src]="control.value.preview" />
     </swiper-slide>
   </ng-container>

libs/media/src/lib/components/images-selector/images-selector.component.scss

@@ -11,6 +11,7 @@
     width: 100%;
 
     swiper-slide {
+      min-width: 50px;
       max-width: 100%;
       width: fit-content;
     }

libs/media/src/lib/components/images-selector/images-selector.component.ts

@@ -2,7 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Com
 import { CommonModule } from '@angular/common'
 import { FormArray } from '@angular/forms'
 import { SafeUrl } from '@angular/platform-browser'
-import { IonicModule, ToastController } from '@ionic/angular'
+import { IonicModule, PopoverController, ToastController } from '@ionic/angular'
 import { SwiperContainer } from 'swiper/swiper-element'
 
 import { BehaviorSubject, Subscription } from 'rxjs'
@@ -11,14 +11,16 @@ import { Camera, GalleryPhoto } from '@capacitor/camera'
 import { captureException, captureMessage } from '@sentry/capacitor'
 import { EditMediaForm } from '@strive/media/forms/media.form'
 import { delay } from '@strive/utils/helpers'
+import { ImageOptionsPopoverComponent } from './popover/options.component'
 
 type CropStep = 'drop' | 'hovering'
 
 @Component({
   standalone: true,
   imports: [
     CommonModule,
-    IonicModule
+    IonicModule,
+    ImageOptionsPopoverComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: '[form] strive-images-selector',
@@ -43,6 +45,7 @@ export class ImagesSelectorComponent implements OnInit, OnDestroy {
 
   constructor(
     private cdr: ChangeDetectorRef,
+    private popoverCtrl: PopoverController,
     private toast: ToastController
   ) {}
 
@@ -128,6 +131,24 @@ export class ImagesSelectorComponent implements OnInit, OnDestroy {
       })
     }
   }
+
+  async openPopover(event: Event, index: number) {
+    const popover = await this.popoverCtrl.create({
+      component: ImageOptionsPopoverComponent,
+      componentProps: { form: this.form, index },
+      event
+    })
+
+    popover.onDidDismiss().then(dismiss => {
+      const { data } = dismiss
+      if (data === 'remove') {
+        this.form.removeAt(index)
+        this.form.markAsDirty()
+      }
+    })
+
+    popover.present()
+  }
 }
 
 function isFileList(file: FileList | File): file is FileList {

libs/media/src/lib/components/images-selector/popover/options.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { IonicModule, PopoverController } from '@ionic/angular'
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule
+  ],
+  selector: 'strive-image-options-popover',
+  template: `
+    <ion-list lines="none">
+      <ion-item button (click)="remove()">Remove image</ion-item>
+    </ion-list>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImageOptionsPopoverComponent {
+  constructor(
+    private popoverCtrl: PopoverController
+  ) {}
+
+  remove() {
+    this.popoverCtrl.dismiss('remove')
+  }
+}

libs/post/src/lib/modals/upsert/post-upsert.component.html

@@ -75,7 +75,10 @@
 <ion-footer class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="end">
-      <ion-button [disabled]="postForm.pristine || postForm.isEmpty" (click)="submitPost()" fill="clear" color="primary">{{ mode === 'create' ? 'Submit to Story' : 'Save changes' }}</ion-button>
+      <ion-button [disabled]="postForm.pristine || postForm.isEmpty || (saving$ | async)" (click)="submitPost()" fill="clear" color="primary">
+        <ion-spinner *ngIf="saving$ | async" slot="end" name="bubbles" color="primary" slot="start"/>
+        <span>{{ mode === 'create' ? 'Submit to Story' : 'Save changes' }}</span>
+      </ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-footer>

libs/post/src/lib/modals/upsert/post-upsert.component.ts

@@ -6,6 +6,7 @@ import { getFunctions, httpsCallable } from 'firebase/functions'
 
 import { captureException } from '@sentry/capacitor'
 
+import { BehaviorSubject } from 'rxjs'
 import { debounceTime, filter } from 'rxjs/operators'
 import { addYears } from 'date-fns'
 
@@ -30,6 +31,7 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
   @ViewChild(ImageSelectorComponent) imageSelector?: ImageSelectorComponent
 
   postForm = new PostForm()
+  saving$ = new BehaviorSubject(false)
 
   scrapingUrl = false
   mode: 'create' | 'update' = 'create'
@@ -65,7 +67,6 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
     const scrape = httpsCallable(getFunctions(), 'scrapeMetatags')
     const scraped = await scrape({ url })
     const { error, result } = scraped.data as { error: string, result: any }
-    console.log('result: ', result)
     if (error) {
       console.error(result)
       captureException(result)
@@ -101,6 +102,7 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
 
   async submitPost() {
     if (!this.auth.uid) return
+    this.saving$.next(true)
 
     if (this.imageSelector?.step.value === 'crop') {
       this.imageSelector.cropIt()
@@ -116,7 +118,7 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
         if (media.file) {
           const promise = this.mediaService.upload(media.file, storagePath, goalId).then(id => media.id = id)
           promises.push(promise)
-        } else if (media.preview) {
+        } else if (media.preview && !media.id) {
           // media has preview if it scraped from an URL
           const promise = this.mediaService.uploadFromURL(media.preview, storagePath, goalId).then(id => media.id = id)
           promises.push(promise)
@@ -127,6 +129,7 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
       const mediaIds = medias ? medias.map(({ id }) => id) : []
 
       const post = createPost({
+        id: this.post.id,
         goalId: this.post.goalId,
         date,
         description,
@@ -138,7 +141,7 @@ export class UpsertPostModalComponent extends ModalDirective implements OnDestro
 
       await this.postService.upsert(post, { params: { goalId: post.goalId }})
     }
-
+    this.saving$.next(false)
     this.dismiss(true)
   }