feat: enhance job modal functionality and update plugin options

Author: yaroslav8765

custom/JobsList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
-    <Modal v-for="job in props.jobs" :key="job.id" :beforeOpenFunction="props.closeDropdown">
+    <Modal 
+      v-for="job in props.jobs" :key="job.id" 
+      :beforeCloseFunction="onBeforeOpen" 
+      :beforeOpenFunction="onBeforeClose"
+      removeFromDomOnClose
+    >
       <template #trigger>
         <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
           <div class="flex flex-col w-full max-w-48">
@@ -22,12 +27,10 @@
           <StateToIcon :job="job" />
         </div>
       </template>
-      <div>
-        <JobInfoPopup 
-          :job="job" 
-          :meta="meta"
-        />
-      </div>
+      <JobInfoPopup
+        :job="job" 
+        :meta="meta"
+      />
     </Modal>
 
   </div>
@@ -40,6 +43,7 @@ import { getTimeAgoString } from '@/utils';
 import { ProgressBar, Modal } from '@/afcl';
 import JobInfoPopup from './JobInfoPopup.vue';
 import StateToIcon from './StateToIcon.vue';
+import { ref } from 'vue';
 
 const props = defineProps<{
   jobs: IJob[];
@@ -49,5 +53,16 @@ const props = defineProps<{
   };
 }>();
 
+
+const isModalOpen = ref(false);
+
+function onBeforeOpen() {
+  props.closeDropdown();
+}
+
+function onBeforeClose() {
+  isModalOpen.value = false;
+}
+
   
 </script>

custom/NavbarJobs.vue

@@ -41,7 +41,7 @@
   import type { AdminUser } from 'adminforth';
   import { onMounted, onUnmounted, ref, computed } from 'vue';
   import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
-  import { Tooltip, Modal } from '@/afcl';
+  import { Tooltip } from '@/afcl';
   import { useI18n } from 'vue-i18n';
   import JobsList from './JobsList.vue';
   import type { IJob } from './utils';

index.ts

@@ -4,6 +4,7 @@ import type { PluginOptions } from './types.js';
 import { afLogger } from "adminforth";
 import pLimit from 'p-limit';
 import { Level } from 'level';
+import fs from 'fs/promises';
 
 type TaskStatus = 'SCHEDULED' | 'IN_PROGRESS' | 'DONE' | 'FAILED';
 type setStateFieldParams = (state: Record<string, any>) => void;
@@ -48,6 +49,35 @@ export default class  extends AdminForthPlugin {
         pluginInstanceId: this.pluginInstanceId,
       }
     });
+
+    if (!this.resourceConfig.hooks) {
+      this.resourceConfig.hooks = {};
+    }
+    if (!this.resourceConfig.hooks.delete) {
+      this.resourceConfig.hooks.delete = {};
+    }
+    if (!this.resourceConfig.hooks.delete.beforeSave) {
+      this.resourceConfig.hooks.delete.beforeSave = [];
+    }
+    this.resourceConfig.hooks.delete.beforeSave.push(async ({record, recordId}: {record: any, recordId: any}) => {
+
+      const levelDbPath = `${this.options.levelDbPath || './background-jobs-dbs/'}job_${recordId}`;
+      const jobLevelDb = this.levelDbInstances[recordId];
+
+      //close level db instance if it's open and delete the level db folder for the job
+      if (jobLevelDb) {
+        await jobLevelDb.close();
+        delete this.levelDbInstances[recordId];
+      }
+
+      //delete level db folder for the job
+      await fs.rm(levelDbPath, {
+        recursive: true,
+        force: true,
+      });
+
+      return {ok: true};
+    })
   }
 
   private checkIfFieldInResource(resourceConfig: AdminForthResource, fieldName: string, fieldString?: string) {
@@ -198,6 +228,7 @@ export default class  extends AdminForthPlugin {
 
       //define the setTaskStateField and getTaskStateField functions to pass to the task
       const setTaskStateField = async (state: Record<string, any>) => {
+        this.adminforth.websocket.publish(`/background-jobs-task-update/${jobId}`, { taskIndex, state });
         await this.setLevelDbTaskStateField(jobLevelDb, taskIndex.toString(), state);
       }
       const getTaskStateField = async () => {
@@ -242,11 +273,13 @@ export default class  extends AdminForthPlugin {
     if (lastJobStatus !== 'CANCELLED' && failedTasks === 0) {
       await this.adminforth.resource(this.getResourceId()).update(jobId, {
         [this.options.statusField]: 'DONE',
+        [this.options.finishedAtField]: (new Date()).toISOString(),
       })
       this.adminforth.websocket.publish('/background-jobs', { jobId, status: 'DONE' });
     } else if (failedTasks > 0) {
       await this.adminforth.resource(this.getResourceId()).update(jobId, {
         [this.options.statusField]: 'DONE_WITH_ERRORS',
+        [this.options.finishedAtField]: (new Date()).toISOString(),
       })
       this.adminforth.websocket.publish('/background-jobs', { jobId, status: 'DONE_WITH_ERRORS' });
     }
@@ -349,11 +382,13 @@ export default class  extends AdminForthPlugin {
   async validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     // optional method where you can safely check field types after database discovery was performed
     this.checkIfFieldInResource(resourceConfig, this.options.createdAtField, 'createdAtField');
+    this.checkIfFieldInResource(resourceConfig, this.options.finishedAtField, 'finishedAtField');
     this.checkIfFieldInResource(resourceConfig, this.options.startedByField, 'startedByField');
     this.checkIfFieldInResource(resourceConfig, this.options.stateField, 'stateField');
     this.checkIfFieldInResource(resourceConfig, this.options.progressField, 'progressField');
     this.checkIfFieldInResource(resourceConfig, this.options.statusField, 'statusField');
     this.checkIfFieldInResource(resourceConfig, this.options.nameField, 'nameField');
+    this.checkIfFieldInResource(resourceConfig, this.options.jobHandlerField, 'jobHandlerField');
 
 
     //Add temp delay to make sure, that all resources active. Probably should be fixed
@@ -402,6 +437,7 @@ export default class  extends AdminForthPlugin {
         try {
           await this.adminforth.resource(this.getResourceId()).update(jobId, {
             [this.options.statusField]: 'CANCELLED',
+            [this.options.finishedAtField]: (new Date()).toISOString(),
           });
           this.adminforth.websocket.publish('/background-jobs', { 
             jobId, 
@@ -426,6 +462,7 @@ export default class  extends AdminForthPlugin {
         } else {
           try {
             jobLevelDb = new Level(levelDbPath, { valueEncoding: 'json' });
+            this.levelDbInstances[jobId] = jobLevelDb;
           } catch (error) {
             return { ok: false, message: `Failed to access tasks for job with id ${jobId}.` };
           }

types.ts

@@ -1,12 +1,13 @@
 
 export interface PluginOptions {
   createdAtField: string; 
+  finishedAtField: string;
   startedByField: string;
   stateField: string;
   progressField: string;
   statusField: string;
-  nameField?: string;
-  jobHandlerField?: string;
+  nameField: string;
+  jobHandlerField: string;
 
   /**
    * Path to the level db folder. If not provided, a default path is ./background-jobs-dbs/