@adminforth/bulk-ai-flow 1.22.3 → 1.23.1

package/build.log

@@ -13,5 +13,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 99,621 bytes  received 172 bytes  199,586.00 bytes/sec
-total size is 98,985  speedup is 0.99
+sent 103,773 bytes  received 172 bytes  207,890.00 bytes/sec
+total size is 103,137  speedup is 0.99

package/custom/VisionAction.vue

@@ -25,10 +25,18 @@
           }, 
           onclick: async (dialog) => { await saveData(); dialog.hide(); } 
         },
+        {
+          label: t('Save current'),
+          options: {
+            disabled: isLoading || isSavingCurrent || completedRecordIds.size < 1,
+            loader: isSavingCurrent, class: 'w-fit'
+          },
+          onclick: async () => { await saveCurrentGenerated(); }
+        },
         { 
           label: t('Cancel'), 
           options: {
-            class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'
+            class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
           }, 
           onclick: (dialog) => confirmDialog.tryToHideModal() 
         },
@@ -52,7 +60,7 @@
             {
               label: t('Cancel'),
               options: {
-                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'
+                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
               },
               onclick: (dialog) => confirmDialog.tryToHideModal()
             },
@@ -68,20 +76,18 @@
   >
     <div class="bulk-vision-table flex flex-col items-center gap-3 md:gap-4 overflow-y-auto">
       <template v-if="recordsList.length && popupMode === 'generation'" >
-
-
         <div class="w-full">
+          <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
-            <p class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
             <div class="flex items-center gap-2">
               <button
-                class="px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 border-none ml-2"
                 @click="resumeGeneration"
               >
                 {{ t('Resume generation') }}
               </button>
               <button
-                class="px-3 py-1.5 text-sm rounded-md bg-white hover:bg-gray-100 text-gray-900 border border-gray-200"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-white hover:bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 dark:border-gray-600"
                 @click="cancelGeneration"
               >
                 {{ t('Cancel generation') }}
@@ -89,7 +95,8 @@
             </div>
           </div>
           <div
-            class="w-full h-[30px] rounded-2xl bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
+            v-if="!isGenerationPaused"
+            class="w-full h-8 rounded-md bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
             :class="isGenerationPaused ? 'opacity-80' : ''"
             role="progressbar"
             :aria-valuenow="displayedProcessedCount"
@@ -138,6 +145,9 @@
           <p v-if="isError === true">{{ errorMessage }}</p>
         </div>
       </template>
+      <template v-else-if="!recordsList.length && popupMode === 'generation'">
+        <p>No data to save. Feel free to click "Cancel"</p>
+      </template>
       <div 
         v-else-if="popupMode === 'settings'" 
         v-for="(promptsCategory, key) in generationPrompts" 
@@ -316,7 +326,7 @@ const recordsList = computed(() => {
     : recordIds.value;
   return ids.map(id => getOrCreateRecord(id));
 });
-
+const isSavingCurrent = ref(false);
 function checkIfDialogOpen() {
   return isDialogOpen.value === true;
 }
@@ -954,6 +964,31 @@ async function prepareDataForSave() {
   return [checkedItems, checkedRecords] as const;
 }
 
+async function prepareDataForRecords(records: RecordState[]) {
+  const checkedItems = records.map(record => ({
+    ...record.data,
+    [primaryKey]: record.id,
+  }));
+
+  const promises: Promise<void>[] = [];
+  records.forEach((record, index) => {
+    if (record.imageGenerationFailed) {
+      return;
+    }
+    for (const [key, value] of Object.entries(checkedItems[index])) {
+      if (props.meta.outputImageFields?.includes(key)) {
+        const p = convertImages(key, value).then(result => {
+          checkedItems[index][key] = result;
+        });
+        promises.push(p);
+      }
+    }
+  });
+
+  await Promise.all(promises);
+  return [checkedItems, records] as const;
+}
+
 async function convertImages(fieldName, img) {
   let imgBlob;
   if (typeof img === 'string' && img.startsWith('data:')) {
@@ -974,6 +1009,37 @@ async function convertImages(fieldName, img) {
   return imgBlob;
 }
 
+async function uploadImagesForRecords(reqData: Record<string, any>[], checkedRecords: RecordState[]) {
+  if (checkedRecords.some(record => record.imageGenerationFailed)) {
+    return;
+  }
+  const imagesToUpload = [];
+  for (let index = 0; index < reqData.length; index++) {
+    const item = reqData[index];
+    const record = checkedRecords[index];
+    for (const [key, value] of Object.entries(item)) {
+      if (props.meta.outputImageFields?.includes(key)) {
+        if (!value) {
+          continue;
+        }
+        if (!overwriteExistingValues.value) {
+          const imageURL = record.data[key];
+          const originalImageUrl = record.listOfImageNotGenerated?.[key]?.originalImage || '';
+          if (originalImageUrl === imageURL) {
+            reqData[index][key] = undefined;
+            continue;
+          }
+        }
+        const p = uploadImage(value, record.id, key).then(result => {
+          reqData[index][key] = result;
+        });
+        imagesToUpload.push(p);
+      }
+    }
+  }
+  await Promise.all(imagesToUpload);
+}
+
 
 async function saveData() {
   const errorText = 'Failed to save some records. Not all data may be saved'
@@ -984,33 +1050,7 @@ async function saveData() {
       adminforth.alert({ message: t('No items selected'), variant: 'warning' });
       return;
     }
-    if (!checkedRecords.some(record => record.imageGenerationFailed)) {
-      const imagesToUpload = [];
-      for (let index = 0; index < reqData.length; index++) {
-        const item = reqData[index];
-        const record = checkedRecords[index];
-        for (const [key, value] of Object.entries(item)) {
-          if (props.meta.outputImageFields?.includes(key)) {
-            if (!value) {
-              continue;
-            }
-            if (!overwriteExistingValues.value) {
-              const imageURL = record.data[key];
-              const originalImageUrl = record.listOfImageNotGenerated?.[key]?.originalImage || '';
-              if (originalImageUrl === imageURL) {
-                reqData[index][key] = undefined;
-                continue;
-              }
-            }
-            const p = uploadImage(value, record.id, key).then(result => {
-              reqData[index][key] = result;
-            });
-            imagesToUpload.push(p);
-          }
-        }
-      }
-      await Promise.all(imagesToUpload);
-    }
+    await uploadImagesForRecords(reqData, checkedRecords);
     const limit = pLimit(props.meta.concurrencyLimit || 10);
     const saveTasks = checkedRecords.map((record, index) =>
       limit(async () => {
@@ -1401,4 +1441,82 @@ const beforeUnloadHandler = (event) => {
   event.returnValue = '';
 };
 
+async function saveCurrentGenerated() {
+  const errorText = 'Failed to save some records. Not all data may be saved';
+  const generatedIds = new Set(completedRecordIds.value);
+  if (generatedIds.size < 1) {
+    return;
+  }
+  const recordsToSave = Array.from(generatedIds)
+    .map(id => recordsById.get(String(id)))
+    .filter((record): record is RecordState => Boolean(record))
+    .filter(record => record.isChecked === true);
+  if (recordsToSave.length < 1) {
+    return;
+  }
+  try {
+    isSavingCurrent.value = true;
+    const [reqData, checkedRecords] = await prepareDataForRecords(recordsToSave);
+    await uploadImagesForRecords(reqData, checkedRecords);
+
+    const limit = pLimit(props.meta.concurrencyLimit || 10);
+    const saveTasks = checkedRecords.map((record, index) =>
+      limit(async () => {
+        const res = await callAdminForthApi({
+          path: `/plugin/${props.meta.pluginInstanceId}/update_fields`,
+          method: 'POST',
+          body: {
+            selectedIds: [record.id],
+            fields: [reqData[index]],
+            saveImages: !record.imageGenerationFailed,
+          },
+        });
+        return { recordId: String(record.id), res };
+      })
+    );
+
+    const saveResults = await Promise.all(saveTasks);
+    const failedResults = saveResults.filter(item => item.res?.ok === false || item.res?.error);
+    const savedIds = saveResults
+      .filter(item => item.res?.ok !== false && !item.res?.error)
+      .map(item => item.recordId);
+
+    if (failedResults.length > 0) {
+      failedResults.forEach(item => {
+        adminforth.alert({
+          message: item.res?.error || t(errorText),
+          variant: 'danger',
+          timeout: 'unlimited',
+        });
+      });
+      isError.value = true;
+      errorMessage.value = t(errorText);
+    }
+
+    if (savedIds.length > 0) {
+      recordIds.value = recordIds.value.filter(id => !savedIds.includes(String(id)));
+      for (let index = 0; index < savedIds.length; index++) {
+        const id = savedIds[index];
+        recordsById.delete(id);
+        uncheckedRecordIds.delete(id);
+        completedRecordIds.value.delete(id);
+      }
+      adminforth.alert({
+        message: t('Successfully saved generated data for {count} records', { count: savedIds.length }),
+        variant: 'success',
+      });
+      touchRecords();
+    }
+  } catch (error) {
+    console.error('Error saving data:', error);
+    isError.value = true;
+    errorMessage.value = t(errorText);
+  } finally {
+    isSavingCurrent.value = false;
+  }
+  await nextTick();
+  tableRef.value.refresh();
+  props.updateList();
+}
+
 </script>

package/dist/custom/VisionAction.vue

@@ -25,10 +25,18 @@
           }, 
           onclick: async (dialog) => { await saveData(); dialog.hide(); } 
         },
+        {
+          label: t('Save current'),
+          options: {
+            disabled: isLoading || isSavingCurrent || completedRecordIds.size < 1,
+            loader: isSavingCurrent, class: 'w-fit'
+          },
+          onclick: async () => { await saveCurrentGenerated(); }
+        },
         { 
           label: t('Cancel'), 
           options: {
-            class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'
+            class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
           }, 
           onclick: (dialog) => confirmDialog.tryToHideModal() 
         },
@@ -52,7 +60,7 @@
             {
               label: t('Cancel'),
               options: {
-                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'
+                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
               },
               onclick: (dialog) => confirmDialog.tryToHideModal()
             },
@@ -68,20 +76,18 @@
   >
     <div class="bulk-vision-table flex flex-col items-center gap-3 md:gap-4 overflow-y-auto">
       <template v-if="recordsList.length && popupMode === 'generation'" >
-
-
         <div class="w-full">
+          <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
-            <p class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
             <div class="flex items-center gap-2">
               <button
-                class="px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 border-none ml-2"
                 @click="resumeGeneration"
               >
                 {{ t('Resume generation') }}
               </button>
               <button
-                class="px-3 py-1.5 text-sm rounded-md bg-white hover:bg-gray-100 text-gray-900 border border-gray-200"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-white hover:bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 dark:border-gray-600"
                 @click="cancelGeneration"
               >
                 {{ t('Cancel generation') }}
@@ -89,7 +95,8 @@
             </div>
           </div>
           <div
-            class="w-full h-[30px] rounded-2xl bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
+            v-if="!isGenerationPaused"
+            class="w-full h-8 rounded-md bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
             :class="isGenerationPaused ? 'opacity-80' : ''"
             role="progressbar"
             :aria-valuenow="displayedProcessedCount"
@@ -138,6 +145,9 @@
           <p v-if="isError === true">{{ errorMessage }}</p>
         </div>
       </template>
+      <template v-else-if="!recordsList.length && popupMode === 'generation'">
+        <p>No data to save. Feel free to click "Cancel"</p>
+      </template>
       <div 
         v-else-if="popupMode === 'settings'" 
         v-for="(promptsCategory, key) in generationPrompts" 
@@ -316,7 +326,7 @@ const recordsList = computed(() => {
     : recordIds.value;
   return ids.map(id => getOrCreateRecord(id));
 });
-
+const isSavingCurrent = ref(false);
 function checkIfDialogOpen() {
   return isDialogOpen.value === true;
 }
@@ -954,6 +964,31 @@ async function prepareDataForSave() {
   return [checkedItems, checkedRecords] as const;
 }
 
+async function prepareDataForRecords(records: RecordState[]) {
+  const checkedItems = records.map(record => ({
+    ...record.data,
+    [primaryKey]: record.id,
+  }));
+
+  const promises: Promise<void>[] = [];
+  records.forEach((record, index) => {
+    if (record.imageGenerationFailed) {
+      return;
+    }
+    for (const [key, value] of Object.entries(checkedItems[index])) {
+      if (props.meta.outputImageFields?.includes(key)) {
+        const p = convertImages(key, value).then(result => {
+          checkedItems[index][key] = result;
+        });
+        promises.push(p);
+      }
+    }
+  });
+
+  await Promise.all(promises);
+  return [checkedItems, records] as const;
+}
+
 async function convertImages(fieldName, img) {
   let imgBlob;
   if (typeof img === 'string' && img.startsWith('data:')) {
@@ -974,6 +1009,37 @@ async function convertImages(fieldName, img) {
   return imgBlob;
 }
 
+async function uploadImagesForRecords(reqData: Record<string, any>[], checkedRecords: RecordState[]) {
+  if (checkedRecords.some(record => record.imageGenerationFailed)) {
+    return;
+  }
+  const imagesToUpload = [];
+  for (let index = 0; index < reqData.length; index++) {
+    const item = reqData[index];
+    const record = checkedRecords[index];
+    for (const [key, value] of Object.entries(item)) {
+      if (props.meta.outputImageFields?.includes(key)) {
+        if (!value) {
+          continue;
+        }
+        if (!overwriteExistingValues.value) {
+          const imageURL = record.data[key];
+          const originalImageUrl = record.listOfImageNotGenerated?.[key]?.originalImage || '';
+          if (originalImageUrl === imageURL) {
+            reqData[index][key] = undefined;
+            continue;
+          }
+        }
+        const p = uploadImage(value, record.id, key).then(result => {
+          reqData[index][key] = result;
+        });
+        imagesToUpload.push(p);
+      }
+    }
+  }
+  await Promise.all(imagesToUpload);
+}
+
 
 async function saveData() {
   const errorText = 'Failed to save some records. Not all data may be saved'
@@ -984,33 +1050,7 @@ async function saveData() {
       adminforth.alert({ message: t('No items selected'), variant: 'warning' });
       return;
     }
-    if (!checkedRecords.some(record => record.imageGenerationFailed)) {
-      const imagesToUpload = [];
-      for (let index = 0; index < reqData.length; index++) {
-        const item = reqData[index];
-        const record = checkedRecords[index];
-        for (const [key, value] of Object.entries(item)) {
-          if (props.meta.outputImageFields?.includes(key)) {
-            if (!value) {
-              continue;
-            }
-            if (!overwriteExistingValues.value) {
-              const imageURL = record.data[key];
-              const originalImageUrl = record.listOfImageNotGenerated?.[key]?.originalImage || '';
-              if (originalImageUrl === imageURL) {
-                reqData[index][key] = undefined;
-                continue;
-              }
-            }
-            const p = uploadImage(value, record.id, key).then(result => {
-              reqData[index][key] = result;
-            });
-            imagesToUpload.push(p);
-          }
-        }
-      }
-      await Promise.all(imagesToUpload);
-    }
+    await uploadImagesForRecords(reqData, checkedRecords);
     const limit = pLimit(props.meta.concurrencyLimit || 10);
     const saveTasks = checkedRecords.map((record, index) =>
       limit(async () => {
@@ -1401,4 +1441,82 @@ const beforeUnloadHandler = (event) => {
   event.returnValue = '';
 };
 
+async function saveCurrentGenerated() {
+  const errorText = 'Failed to save some records. Not all data may be saved';
+  const generatedIds = new Set(completedRecordIds.value);
+  if (generatedIds.size < 1) {
+    return;
+  }
+  const recordsToSave = Array.from(generatedIds)
+    .map(id => recordsById.get(String(id)))
+    .filter((record): record is RecordState => Boolean(record))
+    .filter(record => record.isChecked === true);
+  if (recordsToSave.length < 1) {
+    return;
+  }
+  try {
+    isSavingCurrent.value = true;
+    const [reqData, checkedRecords] = await prepareDataForRecords(recordsToSave);
+    await uploadImagesForRecords(reqData, checkedRecords);
+
+    const limit = pLimit(props.meta.concurrencyLimit || 10);
+    const saveTasks = checkedRecords.map((record, index) =>
+      limit(async () => {
+        const res = await callAdminForthApi({
+          path: `/plugin/${props.meta.pluginInstanceId}/update_fields`,
+          method: 'POST',
+          body: {
+            selectedIds: [record.id],
+            fields: [reqData[index]],
+            saveImages: !record.imageGenerationFailed,
+          },
+        });
+        return { recordId: String(record.id), res };
+      })
+    );
+
+    const saveResults = await Promise.all(saveTasks);
+    const failedResults = saveResults.filter(item => item.res?.ok === false || item.res?.error);
+    const savedIds = saveResults
+      .filter(item => item.res?.ok !== false && !item.res?.error)
+      .map(item => item.recordId);
+
+    if (failedResults.length > 0) {
+      failedResults.forEach(item => {
+        adminforth.alert({
+          message: item.res?.error || t(errorText),
+          variant: 'danger',
+          timeout: 'unlimited',
+        });
+      });
+      isError.value = true;
+      errorMessage.value = t(errorText);
+    }
+
+    if (savedIds.length > 0) {
+      recordIds.value = recordIds.value.filter(id => !savedIds.includes(String(id)));
+      for (let index = 0; index < savedIds.length; index++) {
+        const id = savedIds[index];
+        recordsById.delete(id);
+        uncheckedRecordIds.delete(id);
+        completedRecordIds.value.delete(id);
+      }
+      adminforth.alert({
+        message: t('Successfully saved generated data for {count} records', { count: savedIds.length }),
+        variant: 'success',
+      });
+      touchRecords();
+    }
+  } catch (error) {
+    console.error('Error saving data:', error);
+    isError.value = true;
+    errorMessage.value = t(errorText);
+  } finally {
+    isSavingCurrent.value = false;
+  }
+  await nextTick();
+  tableRef.value.refresh();
+  props.updateList();
+}
+
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/bulk-ai-flow",
-  "version": "1.22.3",
+  "version": "1.23.1",
   "publishConfig": {
     "access": "public"
   },