@adminforth/i18n 2.1.2 → 2.3.0

package/build.log

@@ -20,5 +20,5 @@ custom/package.json
 custom/pnpm-lock.yaml
 custom/tsconfig.json
 
-sent 45,592 bytes  received 305 bytes  91,794.00 bytes/sec
-total size is 44,424  speedup is 0.97
+sent 47,968 bytes  received 305 bytes  96,546.00 bytes/sec
+total size is 46,800  speedup is 0.97

package/custom/BulkActionButton.vue

@@ -23,7 +23,7 @@
       <button class="flex items-center justify-center w-full">
         <IconLanguageOutline class="text-gray-500 dark:text-gray-400 w-5 h-5" />
         <div class="flex items-end justify-start gap-2 cursor-pointer">
-          <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ t('Translate filtered') }}</p>
+          <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{props.checkboxes.length === 0 ? t('Translate filtered') : t('Translate selected ({count})', { count: props.checkboxes.length })}}</p>
             <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-1 text-center">
             {{t('AI')}}
           </div>
@@ -133,7 +133,13 @@
 
   async function runTranslation() {
     isLoading.value = true;
-    const listOfIds = await getListOfIds();
+  
+    let listOfIds = []; 
+    if (props.checkboxes.length === 0) {
+      listOfIds = await getListOfIds();
+    } else {
+      listOfIds = props.checkboxes;
+    }
     try {
       const res = await callAdminForthApi({
         path: `/plugin/${props.meta.pluginInstanceId}/translate-selected-to-languages`,

package/custom/TranslationJobViewComponent.vue

@@ -12,6 +12,7 @@
     </div> 
     <div class="grid grid-cols-3 gap-2">
       <div 
+        v-if="!isFetchingTasks"
         class="bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border-gray-200 dark:border-gray-700 transition-all px-2 py-2 rounded-md border max-w-64 w-full flex items-center justify-between gap-2" 
         v-for="(task, index) in translationTasks" 
         :key="index"
@@ -30,25 +31,56 @@
           />
         </div>
       </div>
+      <div v-else class="col-span-3 flex items-center justify-center">
+        <Spinner class="w-10 h-10" />
+      </div>
+    </div>
+    <div v-if="page > 0 || hasNextPage" class="flex items-center justify-center gap-3 mt-4">
+      <Button
+        variant="secondary"
+        :disabled="page === 0 || isFetchingTasks"
+        @click="loadPage(page - 1)"
+      >
+        <IconAngleLeftOutline class="w-4 h-4" />
+      </Button>
+      <span class="text-sm text-gray-600 dark:text-gray-300">
+        {{ t('Page {page}', { page: page + 1 }) }}
+      </span>
+      <Button
+        variant="secondary"
+        :disabled="!hasNextPage || isFetchingTasks"
+        @click="loadPage(page + 1)"
+      >
+        <IconAngleRightOutline class="w-4 h-4" />
+      </Button>
     </div>
 </template>
 
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import websocket from '@/websocket';
 import { getCountryCodeFromLangCode } from './langCommon';
 import { getCustomComponent } from '@/utils';
+import { Button, Spinner } from '@/afcl';
+import { IconAngleLeftOutline, IconAngleRightOutline } from '@iconify-prerendered/vue-flowbite';
 
 const { t } = useI18n();
 
 const translationTasks = ref<{state: Record<string, any>, status: string}[]>([]);
-const currentPaginationWindow = ref({limit: 25, offset: 0});
+const isFetchingTasks = ref(false);
+const page = ref(0);
+const hasNextPage = ref(false);
+const PAGE_SIZE = 24;
+const MAX_RETRIES = 10; // Maximum number of retries for fetching tasks
+const RETRY_DELAY_MS = 2000; // 2 seconds
+
+const currentOffset = computed(() => page.value * PAGE_SIZE);
 
 const props = defineProps<{
   meta: any;
-  getJobTasks: (limit?: number, offset?: number) => Promise<
+  getJobTasks: (limit?: number, offset?: number, fieldsToReturn?: string[]) => Promise<
   {state: Record<string, any>, status: string}[]>;
   job: {
     id: string;
@@ -64,15 +96,51 @@ const props = defineProps<{
   };
 }>();
 
+async function loadPage(targetPage: number) {
+  if (targetPage < 0 || isFetchingTasks.value) {
+    return;
+  }
+  isFetchingTasks.value = true;
+  const retries = targetPage === 0 ? MAX_RETRIES : 1;
+  try {
+    for (let retry = 0; retry < retries; retry++) {
+      try {
+        const res = await props.getJobTasks(PAGE_SIZE, targetPage * PAGE_SIZE, ['lang', 'error', 'taskName', 'failedToTranslate']);
+        if (res && res.length > 0) {
+          translationTasks.value = res;
+          page.value = targetPage;
+          hasNextPage.value = res.length === PAGE_SIZE;
+          return;
+        }
+      } catch (error) {
+        console.error('Failed to fetch translation tasks, retrying...', error);
+      }
+      if (retry < retries - 1) {
+        await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
+      }
+    }
+    // nothing came back: either there are no tasks at all, or we went past the last page
+    if (targetPage === 0) {
+      translationTasks.value = [];
+      page.value = 0;
+    }
+    hasNextPage.value = false;
+  } finally {
+    isFetchingTasks.value = false;
+  }
+}
+
 onMounted(async () => {
-  translationTasks.value = await props.getJobTasks(currentPaginationWindow.value.limit, currentPaginationWindow.value.offset);
+  await loadPage(0);
+
   websocket.subscribe(`/background-jobs-task-update/${props.job.id}`, (data: { taskIndex: number, status?: string, state?: Record<string, any> }) => {
-    if ( data.taskIndex <= currentPaginationWindow.value.offset + currentPaginationWindow.value.limit && data.taskIndex >= currentPaginationWindow.value.offset ) {
+    const indexOnPage = data.taskIndex - currentOffset.value;
+    if (indexOnPage >= 0 && indexOnPage < translationTasks.value.length) {
       if (data.state) {
-        translationTasks.value[data.taskIndex].state = data.state;
+        translationTasks.value[indexOnPage].state = data.state;
       }
       if (data.status) {
-        translationTasks.value[data.taskIndex].status = data.status;
+        translationTasks.value[indexOnPage].status = data.status;
       }
     }
   });

package/dist/custom/BulkActionButton.vue

@@ -23,7 +23,7 @@
       <button class="flex items-center justify-center w-full">
         <IconLanguageOutline class="text-gray-500 dark:text-gray-400 w-5 h-5" />
         <div class="flex items-end justify-start gap-2 cursor-pointer">
-          <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ t('Translate filtered') }}</p>
+          <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{props.checkboxes.length === 0 ? t('Translate filtered') : t('Translate selected ({count})', { count: props.checkboxes.length })}}</p>
             <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-1 text-center">
             {{t('AI')}}
           </div>
@@ -133,7 +133,13 @@
 
   async function runTranslation() {
     isLoading.value = true;
-    const listOfIds = await getListOfIds();
+  
+    let listOfIds = []; 
+    if (props.checkboxes.length === 0) {
+      listOfIds = await getListOfIds();
+    } else {
+      listOfIds = props.checkboxes;
+    }
     try {
       const res = await callAdminForthApi({
         path: `/plugin/${props.meta.pluginInstanceId}/translate-selected-to-languages`,

package/dist/custom/TranslationJobViewComponent.vue

@@ -12,6 +12,7 @@
     </div> 
     <div class="grid grid-cols-3 gap-2">
       <div 
+        v-if="!isFetchingTasks"
         class="bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border-gray-200 dark:border-gray-700 transition-all px-2 py-2 rounded-md border max-w-64 w-full flex items-center justify-between gap-2" 
         v-for="(task, index) in translationTasks" 
         :key="index"
@@ -30,25 +31,56 @@
           />
         </div>
       </div>
+      <div v-else class="col-span-3 flex items-center justify-center">
+        <Spinner class="w-10 h-10" />
+      </div>
+    </div>
+    <div v-if="page > 0 || hasNextPage" class="flex items-center justify-center gap-3 mt-4">
+      <Button
+        variant="secondary"
+        :disabled="page === 0 || isFetchingTasks"
+        @click="loadPage(page - 1)"
+      >
+        <IconAngleLeftOutline class="w-4 h-4" />
+      </Button>
+      <span class="text-sm text-gray-600 dark:text-gray-300">
+        {{ t('Page {page}', { page: page + 1 }) }}
+      </span>
+      <Button
+        variant="secondary"
+        :disabled="!hasNextPage || isFetchingTasks"
+        @click="loadPage(page + 1)"
+      >
+        <IconAngleRightOutline class="w-4 h-4" />
+      </Button>
     </div>
 </template>
 
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import websocket from '@/websocket';
 import { getCountryCodeFromLangCode } from './langCommon';
 import { getCustomComponent } from '@/utils';
+import { Button, Spinner } from '@/afcl';
+import { IconAngleLeftOutline, IconAngleRightOutline } from '@iconify-prerendered/vue-flowbite';
 
 const { t } = useI18n();
 
 const translationTasks = ref<{state: Record<string, any>, status: string}[]>([]);
-const currentPaginationWindow = ref({limit: 25, offset: 0});
+const isFetchingTasks = ref(false);
+const page = ref(0);
+const hasNextPage = ref(false);
+const PAGE_SIZE = 24;
+const MAX_RETRIES = 10; // Maximum number of retries for fetching tasks
+const RETRY_DELAY_MS = 2000; // 2 seconds
+
+const currentOffset = computed(() => page.value * PAGE_SIZE);
 
 const props = defineProps<{
   meta: any;
-  getJobTasks: (limit?: number, offset?: number) => Promise<
+  getJobTasks: (limit?: number, offset?: number, fieldsToReturn?: string[]) => Promise<
   {state: Record<string, any>, status: string}[]>;
   job: {
     id: string;
@@ -64,15 +96,51 @@ const props = defineProps<{
   };
 }>();
 
+async function loadPage(targetPage: number) {
+  if (targetPage < 0 || isFetchingTasks.value) {
+    return;
+  }
+  isFetchingTasks.value = true;
+  const retries = targetPage === 0 ? MAX_RETRIES : 1;
+  try {
+    for (let retry = 0; retry < retries; retry++) {
+      try {
+        const res = await props.getJobTasks(PAGE_SIZE, targetPage * PAGE_SIZE, ['lang', 'error', 'taskName', 'failedToTranslate']);
+        if (res && res.length > 0) {
+          translationTasks.value = res;
+          page.value = targetPage;
+          hasNextPage.value = res.length === PAGE_SIZE;
+          return;
+        }
+      } catch (error) {
+        console.error('Failed to fetch translation tasks, retrying...', error);
+      }
+      if (retry < retries - 1) {
+        await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
+      }
+    }
+    // nothing came back: either there are no tasks at all, or we went past the last page
+    if (targetPage === 0) {
+      translationTasks.value = [];
+      page.value = 0;
+    }
+    hasNextPage.value = false;
+  } finally {
+    isFetchingTasks.value = false;
+  }
+}
+
 onMounted(async () => {
-  translationTasks.value = await props.getJobTasks(currentPaginationWindow.value.limit, currentPaginationWindow.value.offset);
+  await loadPage(0);
+
   websocket.subscribe(`/background-jobs-task-update/${props.job.id}`, (data: { taskIndex: number, status?: string, state?: Record<string, any> }) => {
-    if ( data.taskIndex <= currentPaginationWindow.value.offset + currentPaginationWindow.value.limit && data.taskIndex >= currentPaginationWindow.value.offset ) {
+    const indexOnPage = data.taskIndex - currentOffset.value;
+    if (indexOnPage >= 0 && indexOnPage < translationTasks.value.length) {
       if (data.state) {
-        translationTasks.value[data.taskIndex].state = data.state;
+        translationTasks.value[indexOnPage].state = data.state;
       }
       if (data.status) {
-        translationTasks.value[data.taskIndex].status = data.status;
+        translationTasks.value[indexOnPage].status = data.status;
       }
     }
   });

package/dist/index.d.ts

@@ -40,7 +40,10 @@ export default class I18nPlugin extends AdminForthPlugin {
         strId: string;
         enStr: string;
         translatedStr: string;
-    }>, lang: string, failedToTranslate: IFailedTranslation[], needToTranslateByLang: Record<string, any>, jobId: string, promptCost: number): Promise<void>;
+    }>, lang: string, failedToTranslate: IFailedTranslation[], needToTranslateByLang: Record<string, any>, jobId: string, promptCost: number): Promise<{
+        ok: boolean;
+        error?: string;
+    }>;
     getTranslateToLangTasks(langIsoCode: SupportedLanguage, strings: {
         id: string;
         en_string: string;

package/dist/index.js

@@ -496,7 +496,7 @@ export default class I18nPlugin extends AdminForthPlugin {
             });
             process.env.HEAVY_DEBUG && console.log(`🪲🔪LLM resp >> ${prompt.length}, <<${resp.content.length} :\n\n`, JSON.stringify(resp));
             if (resp.error) {
-                throw new AiTranslateError(resp.error);
+                return { ok: false, error: resp.error };
             }
             let res;
             try {
@@ -511,7 +511,7 @@ export default class I18nPlugin extends AdminForthPlugin {
                         failedReason: "Error in parsing LLM response"
                     });
                 });
-                return null;
+                return { ok: false, error: 'Error in parsing LLM response' };
             }
             const backgroundJobsPlugin = this.adminforth.getPluginByClassName('BackgroundJobsPlugin');
             backgroundJobsPlugin.updateJobFieldsAtomically(jobId, () => __awaiter(this, void 0, void 0, function* () {
@@ -533,7 +533,7 @@ export default class I18nPlugin extends AdminForthPlugin {
                         failedReason: "Error in parsing LLM response JSON"
                     });
                 });
-                return null;
+                return { ok: false, error: 'Error in parsing LLM response JSON' };
             }
             for (const [schemaKey, translatedStr] of Object.entries(res)) {
                 const enStr = schemaKeyToEnString.get(schemaKey) || schemaKey;
@@ -577,6 +577,7 @@ export default class I18nPlugin extends AdminForthPlugin {
                     yield this.cache.clear(`${this.resourceConfig.resourceId}:${category}:${lang}`);
                 }
             }
+            return { ok: true };
         });
     }
     getTranslateToLangTasks(langIsoCode_1, strings_1) {
@@ -793,8 +794,9 @@ export default class I18nPlugin extends AdminForthPlugin {
             //handler function
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ jobId, setTaskStateField, getTaskStateField }) {
                 const initialState = yield getTaskStateField();
+                let bunchResult;
                 if (initialState.prompt && initialState.strings && initialState.translations && initialState.updateStrings && initialState.lang && initialState.failedToTranslate && initialState.needToTranslateByLang) {
-                    yield this.generateAndSaveBunch(initialState.prompt, initialState.strings, initialState.translations, initialState.updateStrings, initialState.lang, initialState.failedToTranslate, initialState.needToTranslateByLang, jobId, initialState.promptCost);
+                    bunchResult = yield this.generateAndSaveBunch(initialState.prompt, initialState.strings, initialState.translations, initialState.updateStrings, initialState.lang, initialState.failedToTranslate, initialState.needToTranslateByLang, jobId, initialState.promptCost);
                 }
                 afLogger.debug(`Translation task for language ${initialState.lang} completed.`);
                 const stateToSave = {
@@ -804,6 +806,10 @@ export default class I18nPlugin extends AdminForthPlugin {
                 };
                 yield setTaskStateField(stateToSave);
                 this.adminforth.websocket.publish('/translation_progress', {});
+                if (bunchResult && !bunchResult.ok) {
+                    afLogger.error(`Failed to translate bunch for language ${initialState.lang} in plugin ${this.constructor.name}: ${bunchResult.error}`);
+                    throw new AiTranslateError(bunchResult.error);
+                }
                 if (initialState.failedToTranslate.length > 0) {
                     afLogger.error(`Failed to translate some strings for language ${initialState.lang} in plugin ${this.constructor.name}:, ${initialState.failedToTranslate}`);
                     throw new Error(`Failed to translate some strings for language ${initialState.lang}, check job details for more info`);

package/index.ts

@@ -540,7 +540,7 @@ export default class I18nPlugin extends AdminForthPlugin {
     needToTranslateByLang: Record<string, any> = {},
     jobId: string,
     promptCost: number,
-  ): Promise<void>{
+  ): Promise<{ ok: boolean, error?: string }>{
 
     // return [];
     const jsonSchemaProperties = {};
@@ -578,7 +578,7 @@ export default class I18nPlugin extends AdminForthPlugin {
     process.env.HEAVY_DEBUG && console.log(`🪲🔪LLM resp >> ${prompt.length}, <<${resp.content.length} :\n\n`, JSON.stringify(resp));
     
     if (resp.error) {
-      throw new AiTranslateError(resp.error);
+      return { ok: false, error: resp.error };
     }
 
     let res;
@@ -593,7 +593,7 @@ export default class I18nPlugin extends AdminForthPlugin {
           failedReason: "Error in parsing LLM response"
         });
       });
-      return null;
+      return { ok: false, error: 'Error in parsing LLM response' };
     }
 
     const backgroundJobsPlugin = this.adminforth.getPluginByClassName<any>('BackgroundJobsPlugin');
@@ -618,7 +618,7 @@ export default class I18nPlugin extends AdminForthPlugin {
           failedReason: "Error in parsing LLM response JSON"
         });
       });
-      return null;
+      return { ok: false, error: 'Error in parsing LLM response JSON' };
     }
 
 
@@ -681,6 +681,7 @@ export default class I18nPlugin extends AdminForthPlugin {
       }
     }
 
+    return { ok: true };
   }
 
   async getTranslateToLangTasks (
@@ -976,9 +977,10 @@ export default class I18nPlugin extends AdminForthPlugin {
           needToTranslateByLang?: Record<string, any>,
           promptCost?: number,
         } = await getTaskStateField();
+        let bunchResult: { ok: boolean, error?: string } | undefined;
 
         if ( initialState.prompt && initialState.strings && initialState.translations && initialState.updateStrings && initialState.lang && initialState.failedToTranslate && initialState.needToTranslateByLang) {
-          await this.generateAndSaveBunch(
+          bunchResult = await this.generateAndSaveBunch(
             initialState.prompt,
             initialState.strings,
             initialState.translations,
@@ -1000,6 +1002,10 @@ export default class I18nPlugin extends AdminForthPlugin {
         await setTaskStateField(stateToSave);
 
         this.adminforth.websocket.publish('/translation_progress', {});
+        if (bunchResult && !bunchResult.ok) {
+          afLogger.error(`Failed to translate bunch for language ${initialState.lang} in plugin ${this.constructor.name}: ${bunchResult.error}`);
+          throw new AiTranslateError(bunchResult.error);
+        }
         if (initialState.failedToTranslate.length > 0) {
           afLogger.error(`Failed to translate some strings for language ${initialState.lang} in plugin ${this.constructor.name}:, ${initialState.failedToTranslate}`);
           throw new Error(`Failed to translate some strings for language ${initialState.lang}, check job details for more info`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "2.1.2",
+  "version": "2.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",