feat: add storing of carousel images between closing and opening

Author: yaroslav8765

custom/ImageGenerationCarousel.vue

@@ -189,8 +189,8 @@ import { ProgressBar } from '@/afcl';
 const { t: $t } = useI18n();
 
 const prompt = ref('');
-const emit = defineEmits(['close', 'selectImage', 'error']);
-const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage']);
+const emit = defineEmits(['close', 'selectImage', 'error', 'updateCarouselIndex']);
+const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex']);
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
@@ -204,12 +204,14 @@ function minifyField(field: string): string {
 
 const caurosel = ref(null);
 onMounted(async () => {
-  images.value.push((props.images || []));
+  for (const img of props.images || []) {
+    images.value.push(img);
+  }
   const temp = await getGenerationPrompt() || '';
   prompt.value = temp[props.fieldName];
   await nextTick();
 
-  const currentIndex = caurosel.value?.getActiveItem()?.position || 0;
+  const currentIndex = props.carouselImageIndex || 0;
   caurosel.value = new Carousel(
     document.getElementById('gallery'), 
     images.value.map((img, index) => {
@@ -294,6 +296,12 @@ async function confirmImage() {
   const currentIndex = caurosel.value?.getActiveItem()?.position || 0;
   const img = images.value[currentIndex];
 
+  props.images.splice(0, props.images.length);
+  for (const i of images.value) {
+    props.images.push(i);
+  }
+
+  emit('updateCarouselIndex', currentIndex, props.recordId, props.fieldName);
   emit('selectImage', img, props.recordId, props.fieldName);
   emit('close');
 

custom/VisionAction.vue

@@ -37,6 +37,8 @@
               :primaryKey="primaryKey"
               :openGenerationCarousel="openGenerationCarousel"
               @error="handleTableError"
+              :carouselSaveImages="carouselSaveImages"
+              :carouselImageIndex="carouselImageIndex"
             />
           </div>
           <div class="flex w-full flex-col md:flex-row items-stretch md:items-end justify-end gap-3 md:gap-4">
@@ -96,6 +98,8 @@ const tableColumns = ref([]);
 const tableColumnsIndexes = ref([]);
 const customFieldNames = ref([]);
 const selected = ref<any[]>([]);
+const carouselSaveImages = ref<any[]>([]);
+const carouselImageIndex = ref<any[]>([]);
 const isAiResponseReceivedAnalize = ref([]);
 const isAiResponseReceivedImage = ref([]);
 const primaryKey = props.meta.primaryKey;
@@ -149,6 +153,11 @@ const openDialog = async () => {
     }));
   }
   await Promise.all(tasks);
+
+  if (props.meta.isImageGeneration) {
+    fillCarouselSaveImages();
+  }
+  
   isLoading.value = false;
 }
  
@@ -171,6 +180,23 @@ const closeDialog = () => {
   isCriticalError.value = false;
   isImageGenerationError.value = false;
   errorMessage.value = '';
+  carouselSaveImages.value = [];
+  carouselImageIndex.value = [];
+}
+
+function fillCarouselSaveImages() {
+  for (const item of selected.value) {
+    const tempItem: any = {};
+    const tempItemIndex: any = {};
+    for (const [key, value] of Object.entries(item)) {
+        if (props.meta.outputImageFields?.includes(key)) {
+          tempItem[key] = [value];
+          tempItemIndex[key] = 0;
+        }
+    }
+    carouselSaveImages.value.push(tempItem);
+    carouselImageIndex.value.push(tempItemIndex);
+  }
 }
 
 function formatLabel(str) {

custom/VisionTable.vue

@@ -91,13 +91,15 @@
             <div>
               <GenerationCarousel
                 v-if="openGenerationCarousel[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
-                :images="selected[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
+                :images="carouselSaveImages[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
                 :recordId="item[primaryKey]"
                 :meta="props.meta"
                 :fieldName="n"
+                :carouselImageIndex="carouselImageIndex[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
                 @error="handleError"
                 @close="openGenerationCarousel[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] = false"
                 @selectImage="updateSelectedImage"
+                @updateCarouselIndex="updateActiveIndex"
               />
             </div>
           </div>
@@ -134,6 +136,8 @@ const props = defineProps<{
   openGenerationCarousel: any
   isError: boolean,
   errorMessage: string
+  carouselSaveImages: any[]
+  carouselImageIndex: any[]
 }>();
 const emit = defineEmits(['error']);
 
@@ -193,4 +197,8 @@ function handleError({ isError, errorMessage }) {
   });
 }
 
+function updateActiveIndex(newIndex: number, id: any, fieldName: string) {
+  props.carouselImageIndex[props.tableColumnsIndexes.findIndex(el => el[props.primaryKey] === id)][fieldName] = newIndex;
+}
+
 </script>