@adminforth/background-jobs 1.6.2 → 1.8.0

package/build.log

@@ -4,6 +4,7 @@
 
 sending incremental file list
 custom/
+custom/GlobalJobApi.vue
 custom/JobInfoPopup.vue
 custom/JobsList.vue
 custom/NavbarJobs.vue
@@ -11,5 +12,5 @@ custom/StateToIcon.vue
 custom/tsconfig.json
 custom/utils.ts
 
-sent 13,153 bytes  received 134 bytes  26,574.00 bytes/sec
-total size is 12,668  speedup is 0.95
+sent 17,404 bytes  received 153 bytes  35,114.00 bytes/sec
+total size is 16,848  speedup is 0.96

package/custom/GlobalJobApi.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- Hidden component that registers a global function to open job info modal -->
+  <div style="display:none">
+    <Modal 
+      ref="dialogRef" 
+      removeFromDomOnClose 
+      class="p-4"
+      :beforeCloseFunction="() => { currentJob.value = null; }"
+    >
+      <JobInfoPopup
+        v-if="currentJob"
+        :job="currentJob"
+        :meta="meta"
+        :closeModal="closeModal"
+      />
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { useAdminforth } from '@/adminforth';
+import { Modal } from '@/afcl';
+import JobInfoPopup from './JobInfoPopup.vue';
+import websocket from '@/websocket';
+
+const adminforth = useAdminforth();
+
+const props = defineProps<{
+  meta: {
+    pluginInstanceId: string;
+  }
+}>();
+
+const dialogRef = ref<any>(null);
+const currentJob = ref<any>(null);
+
+function closeModal() {
+  if (!dialogRef.value) return;
+  if (typeof dialogRef.value.close === 'function') {
+    dialogRef.value.close();
+    return;
+  }
+  if (typeof dialogRef.value.hide === 'function') {
+    dialogRef.value.hide();
+  }
+}
+
+async function openJobInfo(jobId: string) {
+  if (!jobId) return;
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-job-info`,
+      method: 'POST',
+      body: { jobId },
+    });
+    if (res && res.ok) {
+      currentJob.value = res.job;
+      // open dialog
+      if (dialogRef.value && typeof dialogRef.value.open === 'function') {
+        dialogRef.value.open();
+      } else if (dialogRef.value && typeof dialogRef.value.show === 'function') {
+        dialogRef.value.show();
+      }
+    } else {
+      adminforth.alert({ variant: 'danger', message: res?.message || 'Failed to load job info' });
+    }
+  } catch (e) {
+    console.error('OpenJobInfoPopup error', e);
+    adminforth.alert({ variant: 'danger', message: 'Failed to load job info' });
+  }
+}
+
+onMounted(() => {
+  // expose global function
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.OpenJobInfoPopup = openJobInfo;
+
+  websocket.subscribe('/background-jobs', (data) => {
+    if (data.jobId === currentJob.value?.id) {
+      if (data.status) { 
+        currentJob.value.status = data.status;
+      }
+      if (data.progress !== undefined) {
+        currentJob.value.progress = data.progress;
+      }
+      if (data.finishedAt) {
+        currentJob.value.finishedAt = data.finishedAt;
+      }
+      if (data.state) {
+        currentJob.value.state = {
+          ...currentJob.value.state,
+          ...data.state,
+        };
+      }
+    }
+  });
+});
+onBeforeUnmount(() => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (window.OpenJobInfoPopup) delete window.OpenJobInfoPopup;
+  websocket.unsubscribe('/background-jobs');
+});
+</script>

package/custom/JobInfoPopup.vue

@@ -1,5 +1,5 @@
 <template> 
-    <div class="flex flex-col w-full min-w-96">
+    <div class="flex flex-col w-full min-w-96 mt-2">
       <div class="flex items-center mb-1">
         <div class="flex flex-col items-start justify-end h-12">
           <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
@@ -11,9 +11,19 @@
           </Tooltip>
         </div>
         <div class="ml-auto flex flex-col items-start justify-end h-12">
-          <div class="flex items-center">
+          <div class="flex items-center mr-6">
             <p class=" text-gray-800 dark:text-white h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
             <StateToIcon :job="job" />
+            <button
+              @click="closeModal()"
+              type="button"
+              class="absolute top-2 right-2 text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+            >
+              <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>
+              <span class="sr-only">{{ t('Close Modal') }}</span>
+            </button>
           </div>
           <Tooltip v-if="job.finishedAt">
              <p class="text-xs text-gray-600 dark:text-gray-200 h-full"> {{ t('Finished:') }} {{ getTimeAgoString(new Date(job.finishedAt)) }}</p>
@@ -68,6 +78,7 @@ const props = defineProps<{
   meta: {
     pluginInstanceId: string;
   };
+  closeModal: () => void;
 }>();
 
 async function cancelJob() {

package/custom/JobsList.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
     <Modal 
+      ref="modalRef"
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
       :beforeCloseFunction="onBeforeOpen" 
@@ -31,6 +32,7 @@
       <JobInfoPopup
         :job="job" 
         :meta="meta"
+        :closeModal="closeModal"
       />
     </Modal>
 
@@ -46,6 +48,26 @@ import JobInfoPopup from './JobInfoPopup.vue';
 import StateToIcon from './StateToIcon.vue';
 import { ref } from 'vue';
 
+const modalRef = ref<any>(null);
+
+function closeModal() {
+  const m = modalRef.value;
+  if (!m) return;
+
+  if (typeof m.close === 'function') {
+    m.close();
+    return;
+  }
+
+  if (Array.isArray(m)) {
+    m.forEach((inst: any) => {
+      if (inst?.close && typeof inst.close === 'function') {
+        inst.close();
+      }
+    });
+  }
+}
+
 const props = defineProps<{
   jobs: IJob[];
   closeDropdown: () => void;

package/dist/custom/GlobalJobApi.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- Hidden component that registers a global function to open job info modal -->
+  <div style="display:none">
+    <Modal 
+      ref="dialogRef" 
+      removeFromDomOnClose 
+      class="p-4"
+      :beforeCloseFunction="() => { currentJob.value = null; }"
+    >
+      <JobInfoPopup
+        v-if="currentJob"
+        :job="currentJob"
+        :meta="meta"
+        :closeModal="closeModal"
+      />
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { useAdminforth } from '@/adminforth';
+import { Modal } from '@/afcl';
+import JobInfoPopup from './JobInfoPopup.vue';
+import websocket from '@/websocket';
+
+const adminforth = useAdminforth();
+
+const props = defineProps<{
+  meta: {
+    pluginInstanceId: string;
+  }
+}>();
+
+const dialogRef = ref<any>(null);
+const currentJob = ref<any>(null);
+
+function closeModal() {
+  if (!dialogRef.value) return;
+  if (typeof dialogRef.value.close === 'function') {
+    dialogRef.value.close();
+    return;
+  }
+  if (typeof dialogRef.value.hide === 'function') {
+    dialogRef.value.hide();
+  }
+}
+
+async function openJobInfo(jobId: string) {
+  if (!jobId) return;
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-job-info`,
+      method: 'POST',
+      body: { jobId },
+    });
+    if (res && res.ok) {
+      currentJob.value = res.job;
+      // open dialog
+      if (dialogRef.value && typeof dialogRef.value.open === 'function') {
+        dialogRef.value.open();
+      } else if (dialogRef.value && typeof dialogRef.value.show === 'function') {
+        dialogRef.value.show();
+      }
+    } else {
+      adminforth.alert({ variant: 'danger', message: res?.message || 'Failed to load job info' });
+    }
+  } catch (e) {
+    console.error('OpenJobInfoPopup error', e);
+    adminforth.alert({ variant: 'danger', message: 'Failed to load job info' });
+  }
+}
+
+onMounted(() => {
+  // expose global function
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.OpenJobInfoPopup = openJobInfo;
+
+  websocket.subscribe('/background-jobs', (data) => {
+    if (data.jobId === currentJob.value?.id) {
+      if (data.status) { 
+        currentJob.value.status = data.status;
+      }
+      if (data.progress !== undefined) {
+        currentJob.value.progress = data.progress;
+      }
+      if (data.finishedAt) {
+        currentJob.value.finishedAt = data.finishedAt;
+      }
+      if (data.state) {
+        currentJob.value.state = {
+          ...currentJob.value.state,
+          ...data.state,
+        };
+      }
+    }
+  });
+});
+onBeforeUnmount(() => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (window.OpenJobInfoPopup) delete window.OpenJobInfoPopup;
+  websocket.unsubscribe('/background-jobs');
+});
+</script>

package/dist/custom/JobInfoPopup.vue

@@ -1,5 +1,5 @@
 <template> 
-    <div class="flex flex-col w-full min-w-96">
+    <div class="flex flex-col w-full min-w-96 mt-2">
       <div class="flex items-center mb-1">
         <div class="flex flex-col items-start justify-end h-12">
           <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
@@ -11,9 +11,19 @@
           </Tooltip>
         </div>
         <div class="ml-auto flex flex-col items-start justify-end h-12">
-          <div class="flex items-center">
+          <div class="flex items-center mr-6">
             <p class=" text-gray-800 dark:text-white h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
             <StateToIcon :job="job" />
+            <button
+              @click="closeModal()"
+              type="button"
+              class="absolute top-2 right-2 text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+            >
+              <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>
+              <span class="sr-only">{{ t('Close Modal') }}</span>
+            </button>
           </div>
           <Tooltip v-if="job.finishedAt">
              <p class="text-xs text-gray-600 dark:text-gray-200 h-full"> {{ t('Finished:') }} {{ getTimeAgoString(new Date(job.finishedAt)) }}</p>
@@ -68,6 +78,7 @@ const props = defineProps<{
   meta: {
     pluginInstanceId: string;
   };
+  closeModal: () => void;
 }>();
 
 async function cancelJob() {

package/dist/custom/JobsList.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
     <Modal 
+      ref="modalRef"
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
       :beforeCloseFunction="onBeforeOpen" 
@@ -31,6 +32,7 @@
       <JobInfoPopup
         :job="job" 
         :meta="meta"
+        :closeModal="closeModal"
       />
     </Modal>
 
@@ -46,6 +48,26 @@ import JobInfoPopup from './JobInfoPopup.vue';
 import StateToIcon from './StateToIcon.vue';
 import { ref } from 'vue';
 
+const modalRef = ref<any>(null);
+
+function closeModal() {
+  const m = modalRef.value;
+  if (!m) return;
+
+  if (typeof m.close === 'function') {
+    m.close();
+    return;
+  }
+
+  if (Array.isArray(m)) {
+    m.forEach((inst: any) => {
+      if (inst?.close && typeof inst.close === 'function') {
+        inst.close();
+      }
+    });
+  }
+}
+
 const props = defineProps<{
   jobs: IJob[];
   closeDropdown: () => void;

package/dist/index.js

@@ -48,6 +48,13 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
                     pluginInstanceId: this.pluginInstanceId,
                 }
             });
+            // Global API injection: exposes OpenJobInfoPopup(jobId) to open job details from anywhere
+            (adminforth.config.customization.globalInjections.header).push({
+                file: this.componentPath('GlobalJobApi.vue'),
+                meta: {
+                    pluginInstanceId: this.pluginInstanceId,
+                }
+            });
             if (!this.adminforth.config.componentsToExplicitRegister) {
                 this.adminforth.config.componentsToExplicitRegister = [];
             }
@@ -440,6 +447,28 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
                 return { jobs: jobsToReturn };
             })
         });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get-job-info`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ adminUser, body }) {
+                const jobId = body.jobId;
+                const job = yield this.adminforth.resource(this.resourceConfig.resourceId).get(Filters.EQ(this.getResourcePk(), jobId));
+                if (!job) {
+                    return { ok: false, message: `Job with id ${jobId} not found.` };
+                }
+                const jobToReturn = {
+                    id: job[this.getResourcePk()],
+                    name: job[this.options.nameField],
+                    createdAt: job[this.options.createdAtField],
+                    finishedAt: job[this.options.finishedAtField] || null,
+                    status: job[this.options.statusField],
+                    state: JSON.parse(job[this.options.stateField]),
+                    progress: job[this.options.progressField],
+                    customComponent: this.jobCustomComponents[job[this.options.jobHandlerField]],
+                };
+                return { ok: true, job: jobToReturn };
+            })
+        });
         server.endpoint({
             method: 'POST',
             path: `/plugin/${this.pluginInstanceId}/cancel-job`,

package/index.ts

@@ -51,6 +51,14 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
       }
     });
 
+    // Global API injection: exposes OpenJobInfoPopup(jobId) to open job details from anywhere
+    (adminforth.config.customization.globalInjections.header).push({
+      file: this.componentPath('GlobalJobApi.vue'),
+      meta: {
+        pluginInstanceId: this.pluginInstanceId,
+      }
+    });
+
     if (!this.adminforth.config.componentsToExplicitRegister) {
       this.adminforth.config.componentsToExplicitRegister = [];
     }
@@ -475,6 +483,31 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
       }
     });
 
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get-job-info`,
+      handler: async ({ adminUser, body }) => {
+        const jobId = body.jobId;
+
+        const job = await this.adminforth.resource(this.resourceConfig.resourceId).get(Filters.EQ(this.getResourcePk(), jobId));
+        if (!job) {
+          return { ok: false, message: `Job with id ${jobId} not found.` };
+        }
+        const jobToReturn = {
+          id: job[this.getResourcePk()],
+          name: job[this.options.nameField],
+          createdAt: job[this.options.createdAtField],
+          finishedAt: job[this.options.finishedAtField] || null,
+          status: job[this.options.statusField],
+          state: JSON.parse(job[this.options.stateField]),
+          progress: job[this.options.progressField],
+          customComponent: this.jobCustomComponents[job[this.options.jobHandlerField]],
+        };
+        return { ok: true, job: jobToReturn };
+      }
+    });
+
+
     server.endpoint({
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/cancel-job`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/background-jobs",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",