feat: add close modal functionality to JobInfoPopup and integrate with JobsList

Author: yaroslav8765

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() {

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;