@adminforth/bulk-ai-flow 1.7.4 → 1.8.1

package/README.md

@@ -1 +1,7 @@
-Readme
+# AdminForth Bulk AI Flow Plugin
+
+<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /> <img src="https://woodpecker.devforth.io/api/badges/3848/status.svg" alt="Build Status" /> <a href="https://www.npmjs.com/package/@adminforth/bulk-ai-flow"> <img src="https://img.shields.io/npm/dt/@adminforth/bulk-ai-flow" alt="npm downloads" /></a> <a href="https://www.npmjs.com/package/@adminforth/bulk-ai-flow"><img src="https://img.shields.io/npm/v/@adminforth/bulk-ai-flow" alt="npm version" /></a> <a href="https://www.npmjs.com/package/@adminforth/bulk-ai-flow">
+
+Allows you to log changes made to table records via adminforth.
+
+## For usage, see [AdminForth Bulk AI Flow Documentation](https://adminforth.dev/docs/tutorial/Plugins/bulk-ai-flow/)

package/build.log

@@ -4,12 +4,12 @@
 
 sending incremental file list
 custom/
-custom/imageGenerationCarousel.vue
+custom/ImageGenerationCarousel.vue
+custom/VisionAction.vue
+custom/VisionTable.vue
 custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
-custom/visionAction.vue
-custom/visionTable.vue
 
-sent 180,683 bytes  received 134 bytes  361,634.00 bytes/sec
-total size is 180,148  speedup is 1.00
+sent 179,998 bytes  received 134 bytes  360,264.00 bytes/sec
+total size is 179,465  speedup is 1.00

package/custom/{imageGenerationCarousel.vue → ImageGenerationCarousel.vue}

@@ -1,8 +1,8 @@
 
 <template>
   <!-- Main modal -->
-  <div tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 z-10 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/50 dark:bg-gray-900 dark:bg-opacity-50">
-    <div class="relative p-4 w-10/12 max-w-full max-h-full ">
+  <div tabindex="-1" class="fixed inset-0 z-10 flex justify-center items-center dark:bg-gray-900/50 overflow-y-auto">
+    <div class="relative p-4 w-full max-w-[1600px] max-h-[90vh] ">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
             <!-- Modal header -->
@@ -95,20 +95,20 @@
                 </div>
 
                 
-                <div id="gallery" class="relative w-full" data-carousel="static">
+                <div id="gallery" class="relative w-full min-w-0" data-carousel="static">
                   <!-- Carousel wrapper -->
                   <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-400px)]">
                       <!-- Item 1 -->
                       <div
                         v-for="(img, index) in images"
                         :key="index"
+                        class="flex items-center justify-center w-full h-full"
                         :class="[
-                          index === 0 ? 'block' : 'hidden',
-                          'duration-700 ease-in-out'
+                          index === 0 ? 'block' : 'hidden'
                         ]"
                         data-carousel-item
                       >
-                          <img :src="img" class="absolute block max-w-full max-h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" 
+                          <img :src="img" class="max-w-full max-h-full object-contain" 
                             :alt="`Generated image ${index + 1}`"
                           />
                       </div>
@@ -175,10 +175,6 @@
         </div>
     </div>
   </div>
-
-  
-  
-
 </template>
 
 <script setup lang="ts">
@@ -193,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[]>([])
@@ -208,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) => {
@@ -298,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');
 

package/custom/{visionAction.vue → VisionAction.vue}

@@ -5,60 +5,38 @@
     </div>
     <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ props.meta.actionName }}</p>
   </div>
-  <Dialog ref="confirmDialog">
-    <div
-      class="fixed inset-0 z-20 flex items-center justify-center bg-black/40"
-    >
-      <div
-        class="bulk-vision-dialog flex items-center justify-center relative w-[100vw] h-[100vh] max-h-[100vh] md:w-auto md:max-w-[95vw] md:min-w-[640px] md:h-auto md:max-h-[90vh] bg-white dark:bg-gray-900 rounded-none md:rounded-md shadow-2xl overflow-hidden"
-      >
-        <div class="bulk-vision-table flex flex-col items-center justify-evenly md:max-h-[90vh] gap-3 md:gap-4 w-full h-full p-4 md:p-6 overflow-y-auto overflow-x-auto">
-          <button type="button" 
-            @click="closeDialog"
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
-              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-              </svg>
-          </button>
-
-          <div v-if="records && props.checkboxes.length" class="w-full overflow-x-auto">
-            <VisionTable
-              :checkbox="props.checkboxes"
-              :records="records"
-              :index="0"
-              :meta="props.meta"
-              :images="images"
-              :tableHeaders="tableHeaders"
-              :tableColumns="tableColumns"
-              :customFieldNames="customFieldNames"
-              :tableColumnsIndexes="tableColumnsIndexes"
-              :selected="selected"
-              :isAiResponseReceivedAnalize="isAiResponseReceivedAnalize"
-              :isAiResponseReceivedImage="isAiResponseReceivedImage"
-              :primaryKey="primaryKey"
-              :openGenerationCarousel="openGenerationCarousel"
-              @error="handleTableError"
-            />
-          </div>
-          <div class="flex w-full flex-col md:flex-row items-stretch md:items-end justify-end gap-3 md:gap-4">
-            <div class="h-full text-red-600 font-semibold flex items-center justify-center md:mb-2">
-              <p v-if="isError === true">{{ errorMessage }}</p>
-            </div>
-            <button type="button" class="w-full md:w-auto py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-              @click="closeDialog"
-            >
-              {{'Cancel'}}
-            </button>
-            <Button 
-              class="w-full md:w-64"
-              @click="saveData"
-              :disabled="isLoading || checkedCount < 1 || isCriticalError"
-              :loader="isLoading"
-            >
-            {{ checkedCount > 1 ? 'Save fields' : 'Save field' }}
-            </Button>
-          </div>
-        </div>
+  <Dialog 
+    ref="confirmDialog"
+    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 || isFetchingRecords, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
+      { label: 'Cancel', onclick: (dialog) => dialog.hide() },
+    ]"
+  >
+    <div class="bulk-vision-table flex flex-col items-center max-w-[1560px] md:max-h-[90vh] gap-3 md:gap-4 w-full h-full overflow-y-auto">
+      <div v-if="records && props.checkboxes.length" class="w-full overflow-x-auto">
+        <VisionTable
+          :checkbox="props.checkboxes"
+          :records="records"
+          :meta="props.meta"
+          :images="images"
+          :tableHeaders="tableHeaders"
+          :tableColumns="tableColumns"
+          :customFieldNames="customFieldNames"
+          :tableColumnsIndexes="tableColumnsIndexes"
+          :selected="selected"
+          :isAiResponseReceivedAnalize="isAiResponseReceivedAnalize"
+          :isAiResponseReceivedImage="isAiResponseReceivedImage"
+          :primaryKey="primaryKey"
+          :openGenerationCarousel="openGenerationCarousel"
+          @error="handleTableError"
+          :carouselSaveImages="carouselSaveImages"
+          :carouselImageIndex="carouselImageIndex"
+        />
+      </div>
+      <div class="text-red-600 flex items-center w-full">
+        <p v-if="isError === true">{{ errorMessage }}</p>
       </div>
     </div>
   </Dialog>
@@ -68,13 +46,11 @@
 import { callAdminForthApi } from '@/utils';
 import { Ref, ref, watch } from 'vue'
 import { Dialog, Button } from '@/afcl';
-import VisionTable from './visionTable.vue'
+import VisionTable from './VisionTable.vue'
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import { AdminUser, type AdminForthResourceCommon } from '@/types';
 
-const route = useRoute();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -99,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);
@@ -128,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({
@@ -152,7 +131,12 @@ const openDialog = async () => {
     }));
   }
   await Promise.all(tasks);
-  isLoading.value = false;
+
+  if (props.meta.isImageGeneration) {
+    fillCarouselSaveImages();
+  }
+  
+  isFetchingRecords.value = false;
 }
  
 watch(selected, (val) => {
@@ -160,22 +144,22 @@ watch(selected, (val) => {
   checkedCount.value = val.filter(item => item.isChecked === true).length;
 }, { deep: true });
 
-const closeDialog = () => {
-  confirmDialog.value.close();
-  isAiResponseReceivedAnalize.value = [];
-  isAiResponseReceivedImage.value = [];
-
-  records.value = [];
-  images.value = [];
-  selected.value = [];
-  tableColumns.value = [];
-  tableColumnsIndexes.value = [];
-  isError.value = false;
-  isCriticalError.value = false;
-  isImageGenerationError.value = false;
-  errorMessage.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) {
   return str
     .split('_')                   
@@ -270,7 +254,6 @@ async function getRecords() {
     console.error('Failed to get records:', error);
     isError.value = true;
     errorMessage.value = `Failed to fetch records. Please, try to re-run the action.`;
-    // Handle error appropriately
   }
 }
 
@@ -288,7 +271,6 @@ async function getImages() {
     console.error('Failed to get images:', error);
     isError.value = true;
     errorMessage.value = `Failed to fetch images. Please, try to re-run the action.`;
-    // Handle error appropriately
   }
 }
 

package/{dist/custom/visionTable.vue → custom/VisionTable.vue}

@@ -1,9 +1,8 @@
 <template>
-  <div>
     <Table
       :columns="tableHeaders"
       :data="tableColumns"
-      :pageSize="8"
+      :pageSize="6"
       >
       <!-- HEADER TEMPLATE -->
       <template #header:checkboxes="{ item }">
@@ -28,18 +27,22 @@
                   @click="zoomImage(image)"
               />
             </div>
+          </div>
+          <transition name="fade">
             <div
               v-if="zoomedImage"
               class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
               @click.self="closeZoom"
             >
-              <img
-                :src="zoomedImage"
-                ref="zoomedImg"
-                class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
-              />
+              <transition name="zoom">
+                <img
+                  v-if="zoomedImage"
+                  :src="zoomedImage"
+                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
+                />
+              </transition>
             </div>
-          </div>
+          </transition>
         </div>
       </template>
       <!-- CUSTOM FIELD TEMPLATES -->
@@ -73,7 +76,7 @@
             <Input
               type="number"
               v-model="selected[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
-              class="w-full "
+              class="w-full min-w-[80px]"
               :fullWidth="true"
             />
           </div>
@@ -91,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>
@@ -112,14 +117,12 @@
         </div>
       </template>
     </Table>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, watch } from 'vue'
-import mediumZoom from 'medium-zoom'
+import { ref } from 'vue'
 import { Select, Input, Textarea, Table, Checkbox, Skeleton, Toggle } from '@/afcl'
-import GenerationCarousel from './imageGenerationCarousel.vue'
+import GenerationCarousel from './ImageGenerationCarousel.vue'
 
 const props = defineProps<{
   meta: any,
@@ -134,12 +137,13 @@ const props = defineProps<{
   openGenerationCarousel: any
   isError: boolean,
   errorMessage: string
+  carouselSaveImages: any[]
+  carouselImageIndex: any[]
 }>();
 const emit = defineEmits(['error']);
 
 
 const zoomedImage = ref(null)
-const zoomedImg = ref(null)
 
 
 function zoomImage(img) {
@@ -150,17 +154,6 @@ function closeZoom() {
   zoomedImage.value = null
 }
 
-watch(zoomedImage, async (val) => {
-  await nextTick()
-  if (val && zoomedImg.value) {
-    mediumZoom(zoomedImg.value, {
-      margin: 24,
-      background: 'rgba(0, 0, 0, 0.9)',
-      scrollOffset: 150
-    }).show()
-  }
-})
-
 function isInColumnEnum(key: string): boolean {
   const colEnum = props.meta.columnEnums?.find(c => c.name === key);
   if (!colEnum) {
@@ -193,4 +186,25 @@ function handleError({ isError, errorMessage }) {
   });
 }
 
-</script>
+function updateActiveIndex(newIndex: number, id: any, fieldName: string) {
+  props.carouselImageIndex[props.tableColumnsIndexes.findIndex(el => el[props.primaryKey] === id)][fieldName] = newIndex;
+}
+
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.zoom-enter-active, .zoom-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.zoom-enter-from, .zoom-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>

package/dist/custom/{imageGenerationCarousel.vue → ImageGenerationCarousel.vue}

@@ -1,8 +1,8 @@
 
 <template>
   <!-- Main modal -->
-  <div tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 z-10 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/50 dark:bg-gray-900 dark:bg-opacity-50">
-    <div class="relative p-4 w-10/12 max-w-full max-h-full ">
+  <div tabindex="-1" class="fixed inset-0 z-10 flex justify-center items-center dark:bg-gray-900/50 overflow-y-auto">
+    <div class="relative p-4 w-full max-w-[1600px] max-h-[90vh] ">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
             <!-- Modal header -->
@@ -95,20 +95,20 @@
                 </div>
 
                 
-                <div id="gallery" class="relative w-full" data-carousel="static">
+                <div id="gallery" class="relative w-full min-w-0" data-carousel="static">
                   <!-- Carousel wrapper -->
                   <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-400px)]">
                       <!-- Item 1 -->
                       <div
                         v-for="(img, index) in images"
                         :key="index"
+                        class="flex items-center justify-center w-full h-full"
                         :class="[
-                          index === 0 ? 'block' : 'hidden',
-                          'duration-700 ease-in-out'
+                          index === 0 ? 'block' : 'hidden'
                         ]"
                         data-carousel-item
                       >
-                          <img :src="img" class="absolute block max-w-full max-h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" 
+                          <img :src="img" class="max-w-full max-h-full object-contain" 
                             :alt="`Generated image ${index + 1}`"
                           />
                       </div>
@@ -175,10 +175,6 @@
         </div>
     </div>
   </div>
-
-  
-  
-
 </template>
 
 <script setup lang="ts">
@@ -193,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[]>([])
@@ -208,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) => {
@@ -298,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');