Merge branch 'main' of github.com:devforth/adminforth-bulk-ai-flow

Author: SerVitasik

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

@@ -10,7 +10,7 @@
     header="Bulk AI Flow"
     class="!max-w-full w-full lg:w-[1600px] !lg:max-w-[1600px]"
     :buttons="[
-      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
+      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
       { label: 'Cancel', onclick: (dialog) => dialog.hide() },
     ]"
   >
@@ -31,6 +31,8 @@
           :primaryKey="primaryKey"
           :openGenerationCarousel="openGenerationCarousel"
           @error="handleTableError"
+          :carouselSaveImages="carouselSaveImages"
+          :carouselImageIndex="carouselImageIndex"
         />
       </div>
       <div class="text-red-600 flex items-center w-full">
@@ -73,11 +75,14 @@ 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;
 const openGenerationCarousel = ref([]);
 const isLoading = ref(false);
+const isFetchingRecords = ref(false);
 const isError = ref(false);
 const isCriticalError = ref(false);
 const isImageGenerationError = ref(false);
@@ -102,7 +107,7 @@ const openDialog = async () => {
       return acc;
     },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
   }
-  isLoading.value = true;
+  isFetchingRecords.value = true;
   const tasks = [];
   if (props.meta.isFieldsForAnalizeFromImages) {
     tasks.push(runAiAction({
@@ -126,14 +131,34 @@ const openDialog = async () => {
     }));
   }
   await Promise.all(tasks);
-  isLoading.value = false;
+
+  if (props.meta.isImageGeneration) {
+    fillCarouselSaveImages();
+  }
+  
+  isFetchingRecords.value = false;
 }
  
 watch(selected, (val) => {
   //console.log('Selected changed:', val);
   checkedCount.value = val.filter(item => item.isChecked === true).length;
 }, { deep: true });
 
+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) {
   return str

custom/VisionTable.vue

@@ -94,13 +94,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>
@@ -135,6 +137,8 @@ const props = defineProps<{
   openGenerationCarousel: any
   isError: boolean,
   errorMessage: string
+  carouselSaveImages: any[]
+  carouselImageIndex: any[]
 }>();
 const emit = defineEmits(['error']);
 
@@ -182,6 +186,10 @@ 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>
 
 <style scoped>

index.ts

@@ -322,8 +322,13 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
         for( const [index, record] of records.entries() ) {
           records[index]._label = this.resourceConfig.recordLabel(records[index]);
         }
+        const order = Object.fromEntries(body.body.record.map((id, i) => [id, i]));
+
+        const sortedRecords = records.sort(
+          (a, b) => order[a.id] - order[b.id]
+        );
         return {
-          records,
+          records: sortedRecords,
         };
       }
     });
@@ -390,7 +395,7 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
               }
             }
             try {
-              const AuditLogPlugin = this.adminforth.getPluginByClassName('AuditLogPlugin');
+              const AuditLogPlugin:any = this.adminforth.getPluginByClassName('AuditLogPlugin');
               if (AuditLogPlugin) {
 
                 for (const [key, value] of Object.entries(oldRecord)) {