chore(edit-content): migrate ai dialog state with signals #30062

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts

@@ -1,4 +1,4 @@
-import { tapResponse } from '@ngrx/component-store';
+import { tapResponse } from '@ngrx/operators';
 import { patchState, signalStore, withComputed, withMethods, withState } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe } from 'rxjs';

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.html

@@ -1,46 +1,44 @@
-@if (vm$ | async; as vm) {
-    <div class="dialog-prompt__wrapper">
-        <dot-ai-image-prompt-form
-            (valueChange)="store.setFormValue($event)"
-            (generate)="store.generateImage()"
-            [value]="vm.images[vm.galleryActiveIndex]"
-            [isLoading]="vm.isLoading"
-            [hasEditorContent]="vm.hasEditorContent" />
+<div class="dialog-prompt__wrapper">
+    <dot-ai-image-prompt-form
+        (valueChange)="store.setFormValue($event)"
+        (generate)="store.generateImage()"
+        [value]="store.currentImage()"
+        [isLoading]="store.isLoading()"
+        [hasEditorContent]="store.hasContext()" />
 
-        <div [class.dialog-prompt_gallery]="vm.images.length || vm.isLoading">
-            <dot-ai-image-prompt-gallery
-                (activeIndexChange)="store.setGalleryActiveIndex($event)"
-                (regenerate)="store.generateImage()"
-                [isLoading]="vm.isLoading"
-                [images]="vm.images"
-                [activeImageIndex]="vm.galleryActiveIndex"
-                [orientation]="vm.formValue?.size" />
-            @if (vm.images.length || vm.isLoading) {
-                <div class="dot-ai-image__buttons">
-                    <button
-                        (click)="closeDialog()"
-                        [label]="'Cancel' | dm"
-                        class="p-button-text"
-                        data-testid="close-btn"
-                        type="button"
-                        pButton></button>
-                    <button
-                        (click)="selectedImage(vm.images[vm.galleryActiveIndex])"
-                        [disabled]="vm.isLoading || vm.images[vm.galleryActiveIndex].error"
-                        [label]="'block-editor.extension.ai-image.insert' | dm"
-                        class="align-self-end"
-                        data-testid="submit-btn"
-                        pButton
-                        type="submit"
-                        icon="pi pi-check"></button>
-                </div>
-            }
-        </div>
-        <p-confirmDialog
-            [style]="{ width: '500px' }"
-            key="ai-image-prompt"
-            rejectButtonStyleClass="p-button-outlined"
-            acceptIcon="null"
-            rejectIcon="null" />
+    <div [class.dialog-prompt_gallery]="store.isLoading() || store.hasImages()">
+        <dot-ai-image-prompt-gallery
+            (activeIndexChange)="store.setGalleryActiveIndex($event)"
+            (regenerate)="store.generateImage()"
+            [isLoading]="store.isLoading()"
+            [images]="store.images()"
+            [activeImageIndex]="store.galleryActiveIndex()"
+            [orientation]="store.formValue()?.size" />
+        @if (store.isLoading() || store.hasImages()) {
+            <div class="dot-ai-image__buttons">
+                <button
+                    (click)="closeDialog()"
+                    [label]="'Cancel' | dm"
+                    class="p-button-text"
+                    data-testid="close-btn"
+                    type="button"
+                    pButton></button>
+                <button
+                    (click)="insertImage()"
+                    [disabled]="store.isLoading() || store.currentImageHasError()"
+                    [label]="'block-editor.extension.ai-image.insert' | dm"
+                    class="align-self-end"
+                    data-testid="submit-btn"
+                    pButton
+                    type="submit"
+                    icon="pi pi-check"></button>
+            </div>
+        }
     </div>
-}
+    <p-confirmDialog
+        [style]="{ width: '500px' }"
+        key="ai-image-prompt"
+        rejectButtonStyleClass="p-button-outlined"
+        acceptIcon="null"
+        rejectIcon="null" />
+</div>

core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.ts

@@ -1,5 +1,3 @@
-import { Observable } from 'rxjs';
-
 import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
@@ -11,10 +9,9 @@ import { DialogModule } from 'primeng/dialog';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotGeneratedAIImage } from '@dotcms/dotcms-models';
 
 import { DotMessagePipe } from './../../dot-message/dot-message.pipe';
-import { DotAiImagePromptStore, VmAiImagePrompt } from './ai-image-prompt.store';
+import { DotAiImagePromptdStore } from './ai-image-prompt.store';
 import { AiImagePromptFormComponent } from './components/ai-image-prompt-form/ai-image-prompt-form.component';
 import { AiImagePromptGalleryComponent } from './components/ai-image-prompt-gallery/ai-image-prompt-gallery.component';
 
@@ -32,22 +29,20 @@ import { AiImagePromptGalleryComponent } from './components/ai-image-prompt-gall
         AiImagePromptFormComponent,
         AiImagePromptGalleryComponent
     ],
-    providers: [FormGroupDirective, ConfirmationService],
+    providers: [FormGroupDirective, ConfirmationService, DotAiImagePromptdStore],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotAIImagePromptComponent implements OnInit {
     readonly #dotMessageService = inject(DotMessageService);
     readonly #confirmationService = inject(ConfirmationService);
-    readonly store = inject(DotAiImagePromptStore);
+    readonly store = inject(DotAiImagePromptdStore);
 
     readonly #dialogRef = inject(DynamicDialogRef);
     readonly #dialogConfig = inject(DynamicDialogConfig<{ context: string }>);
 
-    protected readonly vm$: Observable<VmAiImagePrompt> = this.store.vm$;
-
     ngOnInit(): void {
         const context = this.#dialogConfig?.data?.context || '';
-        this.store.showDialog(context);
+        this.store.setContext(context);
     }
 
     closeDialog(): void {
@@ -64,7 +59,8 @@ export class DotAIImagePromptComponent implements OnInit {
         });
     }
 
-    selectedImage(image: DotGeneratedAIImage): void {
-        this.#dialogRef.close(image);
+    insertImage(): void {
+        const currentImage = this.store.currentImage();
+        this.#dialogRef.close(currentImage);
     }
 }