@adminforth/upload 1.4.4 → 1.4.6

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 42,329 bytes  received 134 bytes  84,926.00 bytes/sec
-total size is 41,840  speedup is 0.99
+sent 42,982 bytes  received 134 bytes  86,232.00 bytes/sec
+total size is 42,493  speedup is 0.99

package/custom/imageGenerator.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-50 flex justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-white bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
-    <div class="relative p-4 w-full max-w-2xl max-h-full ">
+  <div tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-white bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
+    <div class="relative p-4 w-10/12 max-w-full max-h-full ">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
             <!-- Modal header -->
@@ -57,10 +57,16 @@
                   </div>
                 </div>
 
+                <div v-if="errorMessage" class="absolute flex items-center justify-center w-full h-full z-50 bg-white/80 dark:bg-gray-900/80 rounded-lg">
+                  <div class="pt-20 text-red-500 dark:text-red-400 text-lg font-semibold">
+                    {{ errorMessage }}
+                  </div>
+                </div>
+
                 
                 <div id="gallery" class="relative w-full" data-carousel="static">
                   <!-- Carousel wrapper -->
-                  <div class="relative h-56 overflow-hidden rounded-lg md:h-72">
+                  <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-350px)]">
                       <!-- Item 1 -->
                       <div v-for="(img, index) in images" :key="index" class="hidden duration-700 ease-in-out" 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" 
@@ -118,7 +124,7 @@
             <!-- Modal footer -->
             <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                 <button type="button" @click="confirmImage"
-                  :disabled="loading"
+                  :disabled="loading || images.length === 0"
                   class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center 
                   dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 
                   disabled:opacity-50 disabled:cursor-not-allowed"
@@ -248,6 +254,8 @@ const loadingTimer: Ref<number | null> = ref(null);
 
 const historicalRuns: Ref<number[]> = ref([]);
 
+const errorMessage: Ref<string | null> = ref(null);
+
 const historicalAverage: Ref<number | null> = computed(() => {
   if (historicalRuns.value.length === 0) return null;
   const sum = historicalRuns.value.reduce((a, b) => a + b, 0);
@@ -262,6 +270,7 @@ function formatTime(seconds: number): string {
 
 
 async function generateImages() {
+  errorMessage.value = null;
   loading.value = true;
   loadingTimer.value = 0;
   const start = Date.now();
@@ -271,7 +280,8 @@ async function generateImages() {
   }, 100);
   const currentIndex = caurosel.value?.getActiveItem()?.position || 0;
   
-  let resp;
+  let resp = null;
+  let error = null;
   try {
     resp = await callAdminForthApi({
       path: `/plugin/${props.meta.pluginInstanceId}/generate_images`,
@@ -287,15 +297,25 @@ async function generateImages() {
     historicalRuns.value.push(loadingTimer.value);
     clearInterval(ticker);
     loadingTimer.value = null;
-
-  }
-  if (resp.error) {
-    adminforth.alert({
-      message: $t('Error: {error}', { error: JSON.stringify(resp.error) }), 
-      variant: 'danger',
-      timeout: 15,
-    });
     loading.value = false;
+  }
+  if (resp?.error) {
+    error = resp.error;
+  }
+  if (!resp) {
+    error = $t('Error generating images, something went wrong');
+  }
+
+  if (error) {
+    if (images.value.length === 0) {
+      errorMessage.value = error;
+    } else {
+      adminforth.alert({
+        message: error,
+        variant: 'danger',
+        timeout: 'unlimited',
+      });
+    }
     return;
   }
 

package/dist/custom/imageGenerator.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-50 flex justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-white bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
-    <div class="relative p-4 w-full max-w-2xl max-h-full ">
+  <div tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-white bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
+    <div class="relative p-4 w-10/12 max-w-full max-h-full ">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
             <!-- Modal header -->
@@ -57,10 +57,16 @@
                   </div>
                 </div>
 
+                <div v-if="errorMessage" class="absolute flex items-center justify-center w-full h-full z-50 bg-white/80 dark:bg-gray-900/80 rounded-lg">
+                  <div class="pt-20 text-red-500 dark:text-red-400 text-lg font-semibold">
+                    {{ errorMessage }}
+                  </div>
+                </div>
+
                 
                 <div id="gallery" class="relative w-full" data-carousel="static">
                   <!-- Carousel wrapper -->
-                  <div class="relative h-56 overflow-hidden rounded-lg md:h-72">
+                  <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-350px)]">
                       <!-- Item 1 -->
                       <div v-for="(img, index) in images" :key="index" class="hidden duration-700 ease-in-out" 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" 
@@ -118,7 +124,7 @@
             <!-- Modal footer -->
             <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                 <button type="button" @click="confirmImage"
-                  :disabled="loading"
+                  :disabled="loading || images.length === 0"
                   class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center 
                   dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 
                   disabled:opacity-50 disabled:cursor-not-allowed"
@@ -248,6 +254,8 @@ const loadingTimer: Ref<number | null> = ref(null);
 
 const historicalRuns: Ref<number[]> = ref([]);
 
+const errorMessage: Ref<string | null> = ref(null);
+
 const historicalAverage: Ref<number | null> = computed(() => {
   if (historicalRuns.value.length === 0) return null;
   const sum = historicalRuns.value.reduce((a, b) => a + b, 0);
@@ -262,6 +270,7 @@ function formatTime(seconds: number): string {
 
 
 async function generateImages() {
+  errorMessage.value = null;
   loading.value = true;
   loadingTimer.value = 0;
   const start = Date.now();
@@ -271,7 +280,8 @@ async function generateImages() {
   }, 100);
   const currentIndex = caurosel.value?.getActiveItem()?.position || 0;
   
-  let resp;
+  let resp = null;
+  let error = null;
   try {
     resp = await callAdminForthApi({
       path: `/plugin/${props.meta.pluginInstanceId}/generate_images`,
@@ -287,15 +297,25 @@ async function generateImages() {
     historicalRuns.value.push(loadingTimer.value);
     clearInterval(ticker);
     loadingTimer.value = null;
-
-  }
-  if (resp.error) {
-    adminforth.alert({
-      message: $t('Error: {error}', { error: JSON.stringify(resp.error) }), 
-      variant: 'danger',
-      timeout: 15,
-    });
     loading.value = false;
+  }
+  if (resp?.error) {
+    error = resp.error;
+  }
+  if (!resp) {
+    error = $t('Error generating images, something went wrong');
+  }
+
+  if (error) {
+    if (images.value.length === 0) {
+      errorMessage.value = error;
+    } else {
+      adminforth.alert({
+        message: error,
+        variant: 'danger',
+        timeout: 'unlimited',
+      });
+    }
     return;
   }
 

package/index.ts

@@ -486,7 +486,6 @@ getBucketLifecycleConfiguration on bucket ${this.options.s3Bucket} in region ${t
       path: `/plugin/${this.pluginInstanceId}/generate_images`,
       handler: async ({ body, adminUser, headers }) => {
         const { prompt, recordId } = body;
-
         if (this.options.generation.rateLimit?.limit) {
           // rate limit
           const { error } = RateLimiter.checkRateLimit(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/upload",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Plugin for uploading files for adminforth",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",