chore: add background jobs plugin to the dev demo

Author: yaroslav8765

.gitignore

@@ -2,4 +2,5 @@ node_modules
 plugins/*
 !plugins/install-plugins.sh
 adapters/*
-!adapters/install-adapters.sh
+!adapters/install-adapters.sh
+background-jobs-dbs

dev-demo/custom/AfComponents.vue

@@ -161,17 +161,21 @@
         :currentValue="2600"
         :minValue="0"
         :maxValue="5000"
+        :height="6"
+                  :leftLabel="'Level 2'"
+          :rightLabel="'Level 3'"
+        showAnimation
         />
 
-        <ProgressBar
+        <!-- <ProgressBar
           :currentValue="1070"
           :minValue="0"
           :maxValue="5000"
           :leftLabel="'Level 2'"
           :rightLabel="'Level 3'"
           :formatter="(value: number) => `${value} points`"
           :progressFormatter="(value: number, percentage: number) => `${value} done`"
-        />
+        /> -->
 
         <div class="flex flex-col gap-2">
           <Skeleton class="w-full h-4" />
@@ -287,6 +291,22 @@
       label="Pick start"
     />
 
+
+    <Modal class="w-96" clickToCloseOutside>
+      <template #trigger>
+        <Button>Modal Toggle</Button>
+      </template>
+
+      <div class="space-y-4">
+        <p>This is the first paragraph of dialog content.</p>
+        <p>And this is the second paragraph.</p>
+      </div>
+    </Modal>
+
+    <Button class="mt-48 ml-48" @click="createJob"> Create Job</Button>
+
+
+
   </div>
 
 
@@ -313,11 +333,13 @@ import { ProgressBar } from '@/afcl';
 import { Skeleton } from '@/afcl';
 import { Spinner } from '@/afcl';
 import { Toggle } from '@/afcl';
+import { Modal } from '@/afcl';
 import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
 import { DatePicker } from '@/afcl';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import Toast from '@/components/Toast.vue';
 import { useAdminforth } from '@/adminforth';
+import { callApi } from '@/utils';
 
 const { alert } = useAdminforth();
 import adminforth  from '@/adminforth';
@@ -346,4 +368,13 @@ function doSmth(){
   adminforth.alert({message: 'You clicked the button!', variant: 'success' })
 }
 
+async function createJob() {
+  try {
+    const res = await callApi({path: '/api/create-job/', method: 'POST'});
+    console.log('Job created successfully:', res);
+  } catch (error) {
+    console.error('Error creating job:', error);
+  }
+}
+
 </script>

dev-demo/custom/JobCustomComponent.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="w-[1000px] h-[500px] bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center  ">
+    <Button class="h-10" @click="loadTasks">
+      Get Job Tasks
+    </Button>
+    {{ tasks }}
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { Button, JsonViewer } from '@/afcl';
+import { onMounted, onUnmounted, ref } from 'vue';
+import websocket from '@/websocket';
+import type { AdminForthComponentDeclarationFull } from 'adminforth';
+
+
+const tasks = ref<{state: Record<string, any>, status: string}[]>([]);
+
+
+const props = defineProps<{
+  meta: any;
+  getJobTasks: (limit?: number, offset?: number) => Promise<{state: Record<string, any>, status: string}[]>;
+  job: {
+    id: string;
+    name: string;
+    status: 'IN_PROGRESS' | 'DONE' | 'DONE_WITH_ERRORS' | 'CANCELLED';
+    progress: number; // 0 to 100
+    createdAt: Date;
+    customComponent?: AdminForthComponentDeclarationFull; 
+  };
+}>();
+
+const loadTasks = async () => {
+  tasks.value = await props.getJobTasks(10, 0);
+  console.log('Loaded tasks for job:', tasks.value);
+}
+
+
+onMounted(async () => {
+  loadTasks();
+  websocket.subscribe(`/background-jobs-task-update/${props.job.id}`, (data: { taskIndex: number, status?: string, state?: Record<string, any> }) => {
+    console.log('Received WebSocket message for job:', data.status);
+    
+    if (data.state) {
+      tasks.value[data.taskIndex].state = data.state;
+    }
+    if (data.status) {
+      tasks.value[data.taskIndex].status = data.status;
+    }
+
+  });
+});
+
+onUnmounted(() => {
+  console.log('Unsubscribing from WebSocket for job:', props.job.id);
+  websocket.unsubscribe(`/background-jobs-task-update/${props.job.id}`);
+});
+
+
+</script>

dev-demo/index.ts

@@ -10,6 +10,8 @@ import cars_MyS_resource from './resources/cars_MyS.js';
 import cars_PG_resource from './resources/cars_PG.js';
 import cars_Mongo_resource from './resources/cars_mongo.js';
 import cars_Ch_resource from './resources/cars_Ch.js';
+import background_jobs_resource from './resources/background_jobs.js';
+import BackgroundJobsPlugin from '../plugins/adminforth-background-jobs/index.js';
 
 import auditLogsResource from "./resources/auditLogs.js"
 import { FICTIONAL_CAR_BRANDS, FICTIONAL_CAR_MODELS_BY_BRAND, ENGINE_TYPES, BODY_TYPES } from './custom/cars_data.js';
@@ -79,6 +81,14 @@ export const admin = new AdminForth({
       }
     }
   },
+  componentsToExplicitRegister: [
+    { 
+      file: '@@/JobCustomComponent.vue',
+      meta: {
+        label: 'Job Custom Component',
+      }
+    }
+  ],
   dataSources: [
     {
       id: 'sqlite',
@@ -112,6 +122,7 @@ export const admin = new AdminForth({
     passkeysResource,
     carsDescriptionImage,
     translations,
+    background_jobs_resource
   ],
   menu: [
     { type: 'heading', label: 'SYSTEM' },
@@ -180,6 +191,32 @@ if (fileURLToPath(import.meta.url) === path.resolve(process.argv[1])) {
   const app = express();
   app.use(express.json());
 
+  app.post(`${ADMIN_BASE_URL}/api/create-job/`,
+    admin.express.authorize(
+      async (req: any, res: any) => {
+        const backgroundJobsPlugin = admin.getPluginByClassName<BackgroundJobsPlugin>('BackgroundJobsPlugin');
+        if (!backgroundJobsPlugin) {
+          res.status(404).json({ error: 'BackgroundJobsPlugin not found' });
+          return;
+        }
+        backgroundJobsPlugin.startNewJob(
+          'Example Job', //job name
+          req.adminUser, // adminuser
+          [
+            { state: { step: 1 } },
+            { state: { step: 2 } },
+            { state: { step: 3 } },
+            { state: { step: 4 } },
+            { state: { step: 5 } },
+            { state: { step: 6 } },
+          ], //initial tasks
+          'example_job_handler', //job handler name
+        )
+        res.json({ok: true, message: 'Job started' });
+      }
+    ),
+  );
+
   initApi(app, admin);
 
   const port = 3000;
@@ -190,6 +227,30 @@ if (fileURLToPath(import.meta.url) === path.resolve(process.argv[1])) {
 
   admin.express.serve(app);
 
+  const backgroundJobsPlugin = admin.getPluginByClassName<BackgroundJobsPlugin>('BackgroundJobsPlugin');
+
+  backgroundJobsPlugin.registerTaskHandler({
+    // job handler name
+    jobHandlerName: 'example_job_handler',
+    //handler function
+    handler: async ({ setTaskStateField, getTaskStateField }) => {
+      const state = await getTaskStateField();
+      console.log('State of the task at the beginning of the job handler:', state);
+      await new Promise(resolve => setTimeout(resolve, 3000));
+      await setTaskStateField({[state.step]: `Step ${state.step} completed`});
+      const updatedState = await getTaskStateField();
+      console.log('State of the task after setting the new state in the job handler:', updatedState);
+    },
+    //limit of tasks, that are running in parallel
+    parallelLimit: 1
+  })
+  
+  backgroundJobsPlugin.registerTaskDetailsComponent({
+    jobHandlerName: 'example_job_handler', // Handler name
+    component: { 
+      file: '@@/JobCustomComponent.vue'  //custom component for the job details
+    },
+  })
   admin.discoverDatabases().then(async () => {
     if (await admin.resource('adminuser').count() === 0) {
       await admin.resource('adminuser').create({

dev-demo/migrations/prisma/sqlite/migrations/20260227164309_add_jobs_table/migration.sql

@@ -0,0 +1,46 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `price` on the `cars` table. The data in that column could be lost. The data in that column will be cast from `Decimal` to `Float`.
+
+*/
+-- CreateTable
+CREATE TABLE "jobs" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "created_at" DATETIME NOT NULL,
+    "finished_at" DATETIME,
+    "started_by" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "state" TEXT NOT NULL,
+    "progress" TEXT NOT NULL,
+    "status" TEXT NOT NULL,
+    "job_handler_name" TEXT NOT NULL
+);
+
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_cars" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "model" TEXT NOT NULL,
+    "price" REAL NOT NULL,
+    "created_at" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "engine_type" TEXT,
+    "engine_power" INTEGER,
+    "production_year" INTEGER,
+    "description" TEXT,
+    "listed" BOOLEAN NOT NULL DEFAULT false,
+    "mileage" REAL,
+    "color" TEXT,
+    "body_type" TEXT,
+    "photos" TEXT,
+    "seller_id" TEXT,
+    "seller" TEXT,
+    "promo_picture" TEXT,
+    "generated_promo_picture" TEXT
+);
+INSERT INTO "new_cars" ("body_type", "color", "created_at", "description", "engine_power", "engine_type", "generated_promo_picture", "id", "listed", "mileage", "model", "photos", "price", "production_year", "promo_picture", "seller", "seller_id") SELECT "body_type", "color", "created_at", "description", "engine_power", "engine_type", "generated_promo_picture", "id", "listed", "mileage", "model", "photos", "price", "production_year", "promo_picture", "seller", "seller_id" FROM "cars";
+DROP TABLE "cars";
+ALTER TABLE "new_cars" RENAME TO "cars";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

dev-demo/migrations/prisma/sqlite/migrations/20260228131439_make_jobs_state_field_optional/migration.sql

@@ -0,0 +1,19 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_jobs" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "created_at" DATETIME NOT NULL,
+    "finished_at" DATETIME,
+    "started_by" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "state" TEXT,
+    "progress" TEXT NOT NULL,
+    "status" TEXT NOT NULL,
+    "job_handler_name" TEXT NOT NULL
+);
+INSERT INTO "new_jobs" ("created_at", "finished_at", "id", "job_handler_name", "name", "progress", "started_by", "state", "status") SELECT "created_at", "finished_at", "id", "job_handler_name", "name", "progress", "started_by", "state", "status" FROM "jobs";
+DROP TABLE "jobs";
+ALTER TABLE "new_jobs" RENAME TO "jobs";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

dev-demo/migrations/prisma/sqlite/schema.prisma

@@ -89,4 +89,16 @@ model audit_logs {
     @@index([en_string, category])
     @@index([category])
     @@index([completedLangs])
+}
+
+model jobs {
+  id          String @id
+  created_at  DateTime
+  finished_at DateTime?
+  started_by  String
+  name        String
+  state       String?
+  progress    String
+  status      String
+  job_handler_name String
 }