@adminforth/background-jobs 1.8.1 → 1.11.3

package/.woodpecker/release.yml

@@ -17,18 +17,18 @@ steps:
       - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
 
   build:
-    image: node:20
+    image: devforth/node20-pnpm:latest
     when:
       - event: push
     commands:
       - apt update && apt install -y rsync
       - . /woodpecker/deploy.vault.env   
-      - npm clean-install
+      - pnpm install
       - /bin/bash ./.woodpecker/buildRelease.sh
       - npm audit signatures
 
   release:
-    image: node:20
+    image: devforth/node20-pnpm:latest
     when:
       - event:
           - push
@@ -36,7 +36,7 @@ steps:
           - main
     commands:
       - . /woodpecker/deploy.vault.env
-      - npx semantic-release
+      - pnpm exec semantic-release
 
   slack-on-failure:
     image: curlimages/curl

package/README.md

@@ -0,0 +1,31 @@
+# AdminForth Background Jobs 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/background-jobs"><img src="https://img.shields.io/npm/dm/@adminforth/background-jobs" alt="npm downloads" /></a> <a href="https://www.npmjs.com/package/@adminforth/background-jobs"><img src="https://img.shields.io/npm/v/@adminforth/background-jobs" alt="npm version" /></a>
+
+[![Ask AI](https://tluma.ai/badge)](https://tluma.ai/ask-ai/devforth/adminforth)
+
+Lets you run and manage background jobs from AdminForth resources.
+
+## Features
+
+- Run long tasks outside the request-response cycle.
+- Manage background work directly from AdminForth resources.
+- Keep admin operations responsive during heavy processing.
+- Support repeatable job-based back-office workflows.
+
+## Documentation
+
+Full setup and configuration guide:
+
+[AdminForth Background Jobs Documentation](https://adminforth.dev/docs/tutorial/Plugins/background-jobs/)
+
+## About AdminForth
+
+AdminForth is an open-source, agent-first admin framework for building robust admin panels and back-office applications faster.
+
+## Related links
+
+- [AdminForth website](https://adminforth.dev)
+- [npm package](https://www.npmjs.com/package/@adminforth/background-jobs)
+- [More AdminForth plugins](https://adminforth.dev/docs/tutorial/ListOfPlugins/)
+- [Built by DevForth](https://devforth.io)

package/build.log

@@ -10,7 +10,8 @@ custom/JobsList.vue
 custom/NavbarJobs.vue
 custom/StateToIcon.vue
 custom/tsconfig.json
+custom/useBackgroundJobApi.ts
 custom/utils.ts
 
-sent 17,404 bytes  received 153 bytes  35,114.00 bytes/sec
-total size is 16,848  speedup is 0.96
+sent 18,463 bytes  received 172 bytes  37,270.00 bytes/sec
+total size is 17,830  speedup is 0.96

package/custom/GlobalJobApi.vue

@@ -5,11 +5,11 @@
       ref="dialogRef" 
       removeFromDomOnClose 
       class="p-4"
-      :beforeCloseFunction="() => { currentJob.value = null; }"
+      :beforeCloseFunction="() => { jobStore.clearCurrentJob(); jobStore.setIsOpened(false); }"
     >
       <JobInfoPopup
-        v-if="currentJob"
-        :job="currentJob"
+        v-if="jobStore.currentJob"
+        :job="jobStore.currentJob"
         :meta="meta"
         :closeModal="closeModal"
       />
@@ -18,14 +18,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { callAdminForthApi } from '@/utils';
-import { useAdminforth } from '@/adminforth';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { Modal } from '@/afcl';
 import JobInfoPopup from './JobInfoPopup.vue';
 import websocket from '@/websocket';
+import { useBackgroundJobApi } from './useBackgroundJobApi';
 
-const adminforth = useAdminforth();
+const jobStore = useBackgroundJobApi();
+
+const dialogRef = ref<any>(null);
 
 const props = defineProps<{
   meta: {
@@ -33,45 +34,35 @@ const props = defineProps<{
   }
 }>();
 
-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();
+    jobStore.clearCurrentJob();
+    jobStore.setIsOpened(false);
     return;
   }
   if (typeof dialogRef.value.hide === 'function') {
+    jobStore.clearCurrentJob();
+    jobStore.setIsOpened(false);
     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' });
+watch(() => jobStore.isOpened, (newVal) => {
+  if (newVal) {
+    dialogRef.value?.open?.();
+  } else {
+    dialogRef.value?.close?.();
   }
+});
+
+async function openJobInfo(jobId: string) {
+  jobStore.openJobInfoPopup(jobId);
 }
 
+
 onMounted(() => {
   // expose global function
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -79,21 +70,18 @@ onMounted(() => {
   window.OpenJobInfoPopup = openJobInfo;
 
   websocket.subscribe('/background-jobs', (data) => {
-    if (data.jobId === currentJob.value?.id) {
+    if (data.jobId === jobStore.currentJob?.id) {
       if (data.status) { 
-        currentJob.value.status = data.status;
+        jobStore.updateCurrentJob({ status: data.status });
       }
       if (data.progress !== undefined) {
-        currentJob.value.progress = data.progress;
+        jobStore.updateCurrentJob({ progress: data.progress });
       }
       if (data.finishedAt) {
-        currentJob.value.finishedAt = data.finishedAt;
+        jobStore.updateCurrentJob({ finishedAt: data.finishedAt });
       }
       if (data.state) {
-        currentJob.value.state = {
-          ...currentJob.value.state,
-          ...data.state,
-        };
+        jobStore.updateCurrentJob({ state: { ...jobStore.currentJob?.state, ...data.state } });
       }
     }
   });

package/custom/JobInfoPopup.vue

@@ -33,7 +33,7 @@
           </Tooltip>
         </div>
       </div>
-      <div class="flex items-center gap-4 w-full">
+      <div class="flex items-center gap-4 w-full mt-4">
         <ProgressBar 
           :current-value="job.progress" 
           :max-value="100" 
@@ -42,7 +42,7 @@
           :showLabels="false"
           :showValues="false"
           :show-progress="false"
-          :height="6"
+          :height="3"
         />
         <Button class="h-8" v-if="job.status === 'IN_PROGRESS'" @click="cancelJob"> {{ t('Cancel') }} </Button>
       </div>

package/custom/JobsList.vue

@@ -4,8 +4,8 @@
       ref="modalRef"
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
-      :beforeCloseFunction="onBeforeOpen" 
-      :beforeOpenFunction="onBeforeClose"
+      :beforeCloseFunction="onBeforeClose" 
+      :beforeOpenFunction="onBeforeOpen"
       removeFromDomOnClose
     >
       <template #trigger>

package/custom/NavbarJobs.vue

@@ -3,7 +3,7 @@
     <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
       <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
         <Tooltip>
-          <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
+          <IconBriefcaseSolid class="w-7 h-7 text-lightNavbarIcons dark:text-darkNavbarIcons" />
           <template #tooltip>
             {{ t('All jobs completed') }}
           </template>

package/custom/useBackgroundJobApi.ts

@@ -0,0 +1,55 @@
+import { ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { useAdminforth } from '@/adminforth';
+import { defineStore } from 'pinia'
+
+export const useBackgroundJobApi = defineStore('jobInfo', () => {
+  const currentJob = ref<any>(null);
+  const isOpened = ref(false);
+  const adminforth = useAdminforth();
+
+  async function openJobInfoPopup(jobId: string) {
+    if (!jobId) return null;
+    try {
+      const res = await callAdminForthApi({
+        path: `/plugin/get-background-job-info`,
+        method: 'POST',
+        body: { jobId },
+      });
+
+      if (res && res.ok) {
+        currentJob.value = res.job;
+        isOpened.value = true;
+        return res.job;
+      } else {
+        adminforth.alert({ variant: 'danger', message: res?.message || 'Failed to load job info' });
+        return null;
+      }
+    } catch (e) {
+      console.error('OpenJobInfoPopup error', e);
+      adminforth.alert({ variant: 'danger', message: 'Failed to load job info' });
+      return null;
+    }
+  }
+
+  function setIsOpened(value: boolean) {
+    isOpened.value = value;
+  }
+
+  function clearCurrentJob() {
+    currentJob.value = null;
+  }
+
+  function updateCurrentJob(jobData: any) {
+    currentJob.value = { ...currentJob.value, ...jobData };
+  }
+
+  return {
+    currentJob,
+    isOpened,
+    openJobInfoPopup,
+    setIsOpened,
+    clearCurrentJob,
+    updateCurrentJob
+  };
+});

package/dist/custom/GlobalJobApi.vue

@@ -5,11 +5,11 @@
       ref="dialogRef" 
       removeFromDomOnClose 
       class="p-4"
-      :beforeCloseFunction="() => { currentJob.value = null; }"
+      :beforeCloseFunction="() => { jobStore.clearCurrentJob(); jobStore.setIsOpened(false); }"
     >
       <JobInfoPopup
-        v-if="currentJob"
-        :job="currentJob"
+        v-if="jobStore.currentJob"
+        :job="jobStore.currentJob"
         :meta="meta"
         :closeModal="closeModal"
       />
@@ -18,14 +18,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { callAdminForthApi } from '@/utils';
-import { useAdminforth } from '@/adminforth';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { Modal } from '@/afcl';
 import JobInfoPopup from './JobInfoPopup.vue';
 import websocket from '@/websocket';
+import { useBackgroundJobApi } from './useBackgroundJobApi';
 
-const adminforth = useAdminforth();
+const jobStore = useBackgroundJobApi();
+
+const dialogRef = ref<any>(null);
 
 const props = defineProps<{
   meta: {
@@ -33,45 +34,35 @@ const props = defineProps<{
   }
 }>();
 
-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();
+    jobStore.clearCurrentJob();
+    jobStore.setIsOpened(false);
     return;
   }
   if (typeof dialogRef.value.hide === 'function') {
+    jobStore.clearCurrentJob();
+    jobStore.setIsOpened(false);
     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' });
+watch(() => jobStore.isOpened, (newVal) => {
+  if (newVal) {
+    dialogRef.value?.open?.();
+  } else {
+    dialogRef.value?.close?.();
   }
+});
+
+async function openJobInfo(jobId: string) {
+  jobStore.openJobInfoPopup(jobId);
 }
 
+
 onMounted(() => {
   // expose global function
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -79,21 +70,18 @@ onMounted(() => {
   window.OpenJobInfoPopup = openJobInfo;
 
   websocket.subscribe('/background-jobs', (data) => {
-    if (data.jobId === currentJob.value?.id) {
+    if (data.jobId === jobStore.currentJob?.id) {
       if (data.status) { 
-        currentJob.value.status = data.status;
+        jobStore.updateCurrentJob({ status: data.status });
       }
       if (data.progress !== undefined) {
-        currentJob.value.progress = data.progress;
+        jobStore.updateCurrentJob({ progress: data.progress });
       }
       if (data.finishedAt) {
-        currentJob.value.finishedAt = data.finishedAt;
+        jobStore.updateCurrentJob({ finishedAt: data.finishedAt });
       }
       if (data.state) {
-        currentJob.value.state = {
-          ...currentJob.value.state,
-          ...data.state,
-        };
+        jobStore.updateCurrentJob({ state: { ...jobStore.currentJob?.state, ...data.state } });
       }
     }
   });

package/dist/custom/JobInfoPopup.vue

@@ -33,7 +33,7 @@
           </Tooltip>
         </div>
       </div>
-      <div class="flex items-center gap-4 w-full">
+      <div class="flex items-center gap-4 w-full mt-4">
         <ProgressBar 
           :current-value="job.progress" 
           :max-value="100" 
@@ -42,7 +42,7 @@
           :showLabels="false"
           :showValues="false"
           :show-progress="false"
-          :height="6"
+          :height="3"
         />
         <Button class="h-8" v-if="job.status === 'IN_PROGRESS'" @click="cancelJob"> {{ t('Cancel') }} </Button>
       </div>

package/dist/custom/JobsList.vue

@@ -4,8 +4,8 @@
       ref="modalRef"
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
-      :beforeCloseFunction="onBeforeOpen" 
-      :beforeOpenFunction="onBeforeClose"
+      :beforeCloseFunction="onBeforeClose" 
+      :beforeOpenFunction="onBeforeOpen"
       removeFromDomOnClose
     >
       <template #trigger>

package/dist/custom/NavbarJobs.vue

@@ -3,7 +3,7 @@
     <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
       <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
         <Tooltip>
-          <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
+          <IconBriefcaseSolid class="w-7 h-7 text-lightNavbarIcons dark:text-darkNavbarIcons" />
           <template #tooltip>
             {{ t('All jobs completed') }}
           </template>

package/dist/custom/useBackgroundJobApi.ts

@@ -0,0 +1,55 @@
+import { ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { useAdminforth } from '@/adminforth';
+import { defineStore } from 'pinia'
+
+export const useBackgroundJobApi = defineStore('jobInfo', () => {
+  const currentJob = ref<any>(null);
+  const isOpened = ref(false);
+  const adminforth = useAdminforth();
+
+  async function openJobInfoPopup(jobId: string) {
+    if (!jobId) return null;
+    try {
+      const res = await callAdminForthApi({
+        path: `/plugin/get-background-job-info`,
+        method: 'POST',
+        body: { jobId },
+      });
+
+      if (res && res.ok) {
+        currentJob.value = res.job;
+        isOpened.value = true;
+        return res.job;
+      } else {
+        adminforth.alert({ variant: 'danger', message: res?.message || 'Failed to load job info' });
+        return null;
+      }
+    } catch (e) {
+      console.error('OpenJobInfoPopup error', e);
+      adminforth.alert({ variant: 'danger', message: 'Failed to load job info' });
+      return null;
+    }
+  }
+
+  function setIsOpened(value: boolean) {
+    isOpened.value = value;
+  }
+
+  function clearCurrentJob() {
+    currentJob.value = null;
+  }
+
+  function updateCurrentJob(jobData: any) {
+    currentJob.value = { ...currentJob.value, ...jobData };
+  }
+
+  return {
+    currentJob,
+    isOpened,
+    openJobInfoPopup,
+    setIsOpened,
+    clearCurrentJob,
+    updateCurrentJob
+  };
+});

package/dist/index.js

@@ -449,7 +449,7 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
         });
         server.endpoint({
             method: 'POST',
-            path: `/plugin/${this.pluginInstanceId}/get-job-info`,
+            path: `/plugin/get-background-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));

package/index.ts

@@ -15,7 +15,7 @@ type taskType = {
   skip?: boolean;
   state: Record<string, any>;
 }
-
+ 
 export default class BackgroundJobsPlugin extends AdminForthPlugin {
   options: PluginOptions;
   private taskHandlers: Record<string, taskHandlerType> = {};
@@ -485,7 +485,7 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
 
     server.endpoint({
       method: 'POST',
-      path: `/plugin/${this.pluginInstanceId}/get-job-info`,
+      path: `/plugin/get-background-job-info`,
       handler: async ({ adminUser, body }) => {
         const jobId = body.jobId;
 

package/package.json

@@ -1,23 +1,53 @@
 {
   "name": "@adminforth/background-jobs",
-  "version": "1.8.1",
+  "version": "1.11.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "homepage": "https://adminforth.dev/docs/tutorial/Plugins/background-jobs/",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
+  "keywords": [
+    "adminforth",
+    "background-jobs",
+    "async-processing",
+    "task-runner",
+    "job-management",
+    "progress-tracking",
+    "long-running-tasks"
+  ],
+  "author": "DevForth (https://devforth.io)",
+  "license": "MIT",
+  "description": "Background jobs plugin for AdminForth to run and manage long tasks from resources",
   "devDependencies": {
     "@types/node": "latest",
+    "adminforth": "^2.42.0",
+    "semantic-release": "^24.2.1",
+    "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
   },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "semantic-release-slack-bot",
+        {
+          "packageName": "@adminforth/background-jobs",
+          "notifyOnSuccess": true,
+          "notifyOnFail": true,
+          "slackIcon": ":package:",
+          "markdownReleaseNotes": true
+        }
+      ]
+    ]
+  },
   "dependencies": {
     "@vueuse/core": "^14.2.1",
     "async-mutex": "^0.5.0",
@@ -25,6 +55,6 @@
     "p-limit": "^7.3.0"
   },
   "peerDependencies": {
-    "adminforth": "next"
+    "adminforth": "^2.42.0"
   }
 }

package/types.ts

@@ -1,5 +1,6 @@
+import  {type PluginsCommonOptions } from "adminforth";
 
-export interface PluginOptions {
+export interface PluginOptions extends PluginsCommonOptions {
   createdAtField: string; 
   finishedAtField: string;
   startedByField: string;