@adminforth/background-jobs 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build.log +2 -2
  2. package/custom/JobInfoPopup.vue +3 -3
  3. package/custom/JobsList.vue +4 -4
  4. package/custom/NavbarJobs.vue +24 -38
  5. package/dist/custom/JobInfoPopup.vue +3 -3
  6. package/dist/custom/JobsList.vue +4 -4
  7. package/dist/custom/NavbarJobs.vue +24 -38
  8. package/dist/index.js +2 -3
  9. package/index.ts +0 -2
  10. package/package.json +1 -1
package/build.log CHANGED
@@ -11,5 +11,5 @@ custom/StateToIcon.vue
11
11
  custom/tsconfig.json
12
12
  custom/utils.ts
13
13
 
14
- sent 11,414 bytes received 134 bytes 23,096.00 bytes/sec
15
- total size is 10,936 speedup is 0.95
14
+ sent 11,397 bytes received 134 bytes 23,062.00 bytes/sec
15
+ total size is 10,912 speedup is 0.95
package/custom/JobInfoPopup.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="flex flex-col w-full min-w-96">
3
3
  <div class="flex items-center mb-1">
4
- <h2 class="text-lg font-semibold">{{ job.name }}</h2>
5
- <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
- <p class="ml-auto text-gray-800 h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
4
+ <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
5
+ <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
+ <p class="ml-auto text-gray-800 dark:text-white h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
7
7
  <StateToIcon :job="job" />
8
8
  </div>
9
9
  <div class="flex items-center gap-4 w-full">
package/custom/JobsList.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
2
+ <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
3
3
  <Modal
4
4
  v-for="job in props.jobs" :key="job.id"
5
5
  :beforeCloseFunction="onBeforeOpen"
@@ -7,11 +7,11 @@
7
7
  removeFromDomOnClose
8
8
  >
9
9
  <template #trigger>
10
- <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
10
+ <div class="flex items-center w-full px-4 py-3 bg-white dark:bg-gray-700 dark:border-gray-600 border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
11
11
  <div class="flex flex-col w-full max-w-48">
12
12
  <p class="flex gap-2 items-end justify-between text-nowrap">
13
- <span class="text-sm h-full text truncate">{{ job.name }}</span>
14
- <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
13
+ <span class="text-sm h-full text truncate dark:text-white">{{ job.name }}</span>
14
+ <span class="text-xs dark:text-gray-200 text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
15
15
  </p>
16
16
  <ProgressBar
17
17
  class="mt-1"
package/custom/NavbarJobs.vue CHANGED
@@ -1,17 +1,25 @@
1
1
  <template>
2
2
  <div ref="dropdownRef">
3
3
  <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
4
- <div v-if="isAlLeastOneJobRunning" class="relative">
5
- <div class="loader "></div>
6
- <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
7
- </div>
8
- <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
4
+ <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
9
5
  <Tooltip>
10
- <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
6
+ <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
11
7
  <template #tooltip>
12
8
  {{ t('All jobs completed') }}
13
9
  </template>
14
10
  </Tooltip>
11
+ <div
12
+ v-if="isAlLeastOneJobRunning"
13
+ class="ping-animation absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
14
+ >
15
+ {{ jobsCount }}
16
+ </div>
17
+ <div
18
+ v-if="isAlLeastOneJobRunning"
19
+ class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
20
+ >
21
+ {{ jobsCount }}
22
+ </div>
15
23
  </div>
16
24
  </div>
17
25
  <Transition
@@ -40,7 +48,7 @@
40
48
  <script setup lang="ts">
41
49
  import type { AdminUser } from 'adminforth';
42
50
  import { onMounted, onUnmounted, ref, computed } from 'vue';
43
- import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
51
+ import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
44
52
  import { Tooltip } from '@/afcl';
45
53
  import { useI18n } from 'vue-i18n';
46
54
  import JobsList from './JobsList.vue';
@@ -119,36 +127,14 @@
119
127
 
120
128
 
121
129
  <style scoped lang="scss">
122
- .loader {
123
- width: 28px;
124
- aspect-ratio: 1;
125
- border-radius: 50%;
126
- --spinner-color: #1a56db;
127
-
128
- background:
129
- conic-gradient(
130
- from 120deg,
131
- var(--spinner-color) 0deg 40deg,
132
- transparent 40deg
133
- ),
134
-
135
- conic-gradient(#ccc 0deg 360deg);
136
-
137
- -webkit-mask: radial-gradient(
138
- farthest-side,
139
- transparent calc(100% - 6px),
140
- #000 calc(100% - 5px)
141
- );
142
- mask: radial-gradient(
143
- farthest-side,
144
- transparent calc(100% - 6px),
145
- #000 calc(100% - 5px)
146
- );
147
-
148
- animation: stepRotate 2s infinite;
149
- }
150
-
151
- @keyframes stepRotate {
152
- to { transform: rotate(1turn); }
130
+ .ping-animation {
131
+ animation: ping 1s cubic-bezier(0, 0, 1, 1) infinite;
132
+ }
133
+
134
+ @keyframes ping {
135
+ 75%, 100% {
136
+ transform: scale(2);
137
+ opacity: 0;
153
138
  }
139
+ }
154
140
  </style>
package/dist/custom/JobInfoPopup.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="flex flex-col w-full min-w-96">
3
3
  <div class="flex items-center mb-1">
4
- <h2 class="text-lg font-semibold">{{ job.name }}</h2>
5
- <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
- <p class="ml-auto text-gray-800 h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
4
+ <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
5
+ <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
+ <p class="ml-auto text-gray-800 dark:text-white h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
7
7
  <StateToIcon :job="job" />
8
8
  </div>
9
9
  <div class="flex items-center gap-4 w-full">
package/dist/custom/JobsList.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
2
+ <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
3
3
  <Modal
4
4
  v-for="job in props.jobs" :key="job.id"
5
5
  :beforeCloseFunction="onBeforeOpen"
@@ -7,11 +7,11 @@
7
7
  removeFromDomOnClose
8
8
  >
9
9
  <template #trigger>
10
- <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
10
+ <div class="flex items-center w-full px-4 py-3 bg-white dark:bg-gray-700 dark:border-gray-600 border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
11
11
  <div class="flex flex-col w-full max-w-48">
12
12
  <p class="flex gap-2 items-end justify-between text-nowrap">
13
- <span class="text-sm h-full text truncate">{{ job.name }}</span>
14
- <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
13
+ <span class="text-sm h-full text truncate dark:text-white">{{ job.name }}</span>
14
+ <span class="text-xs dark:text-gray-200 text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
15
15
  </p>
16
16
  <ProgressBar
17
17
  class="mt-1"
package/dist/custom/NavbarJobs.vue CHANGED
@@ -1,17 +1,25 @@
1
1
  <template>
2
2
  <div ref="dropdownRef">
3
3
  <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
4
- <div v-if="isAlLeastOneJobRunning" class="relative">
5
- <div class="loader "></div>
6
- <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
7
- </div>
8
- <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
4
+ <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
9
5
  <Tooltip>
10
- <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
6
+ <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
11
7
  <template #tooltip>
12
8
  {{ t('All jobs completed') }}
13
9
  </template>
14
10
  </Tooltip>
11
+ <div
12
+ v-if="isAlLeastOneJobRunning"
13
+ class="ping-animation absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
14
+ >
15
+ {{ jobsCount }}
16
+ </div>
17
+ <div
18
+ v-if="isAlLeastOneJobRunning"
19
+ class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
20
+ >
21
+ {{ jobsCount }}
22
+ </div>
15
23
  </div>
16
24
  </div>
17
25
  <Transition
@@ -40,7 +48,7 @@
40
48
  <script setup lang="ts">
41
49
  import type { AdminUser } from 'adminforth';
42
50
  import { onMounted, onUnmounted, ref, computed } from 'vue';
43
- import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
51
+ import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
44
52
  import { Tooltip } from '@/afcl';
45
53
  import { useI18n } from 'vue-i18n';
46
54
  import JobsList from './JobsList.vue';
@@ -119,36 +127,14 @@
119
127
 
120
128
 
121
129
  <style scoped lang="scss">
122
- .loader {
123
- width: 28px;
124
- aspect-ratio: 1;
125
- border-radius: 50%;
126
- --spinner-color: #1a56db;
127
-
128
- background:
129
- conic-gradient(
130
- from 120deg,
131
- var(--spinner-color) 0deg 40deg,
132
- transparent 40deg
133
- ),
134
-
135
- conic-gradient(#ccc 0deg 360deg);
136
-
137
- -webkit-mask: radial-gradient(
138
- farthest-side,
139
- transparent calc(100% - 6px),
140
- #000 calc(100% - 5px)
141
- );
142
- mask: radial-gradient(
143
- farthest-side,
144
- transparent calc(100% - 6px),
145
- #000 calc(100% - 5px)
146
- );
147
-
148
- animation: stepRotate 2s infinite;
149
- }
150
-
151
- @keyframes stepRotate {
152
- to { transform: rotate(1turn); }
130
+ .ping-animation {
131
+ animation: ping 1s cubic-bezier(0, 0, 1, 1) infinite;
132
+ }
133
+
134
+ @keyframes ping {
135
+ 75%, 100% {
136
+ transform: scale(2);
137
+ opacity: 0;
153
138
  }
139
+ }
154
140
  </style>
package/dist/index.js CHANGED
@@ -131,8 +131,8 @@ export default class extends AdminForthPlugin {
131
131
  this.jobCustomComponents[jobHandlerName] = customComponent;
132
132
  }
133
133
  }
134
- startNewJob(jobName_1, adminUser_1, tasks_1) {
135
- return __awaiter(this, arguments, void 0, function* (jobName, adminUser, tasks, initialFields = {}, jobHandlerName) {
134
+ startNewJob(jobName, adminUser, tasks, jobHandlerName) {
135
+ return __awaiter(this, void 0, void 0, function* () {
136
136
  const handleTask = this.taskHandlers[jobHandlerName];
137
137
  if (!handleTask) {
138
138
  throw new Error(`No handler registered for jobHandler ${jobHandlerName}. Please register a handler using the registerTaskHandler method before starting a job with this jobHandler.`);
@@ -143,7 +143,6 @@ export default class extends AdminForthPlugin {
143
143
  const objectToSave = {
144
144
  [this.options.nameField]: jobName,
145
145
  [this.options.startedByField]: adminUser.pk,
146
- [this.options.stateField]: JSON.stringify(initialFields),
147
146
  [this.options.progressField]: 0,
148
147
  [this.options.statusField]: 'IN_PROGRESS',
149
148
  [this.options.jobHandlerField]: jobHandlerName,
package/index.ts CHANGED
@@ -145,7 +145,6 @@ export default class extends AdminForthPlugin {
145
145
  jobName: string,
146
146
  adminUser: AdminUser,
147
147
  tasks: taskType[],
148
- initialFields: Record<string, any> = {},
149
148
  jobHandlerName: string,
150
149
  ) {
151
150
 
@@ -159,7 +158,6 @@ export default class extends AdminForthPlugin {
159
158
  const objectToSave = {
160
159
  [this.options.nameField]: jobName,
161
160
  [this.options.startedByField]: adminUser.pk,
162
- [this.options.stateField]: JSON.stringify(initialFields),
163
161
  [this.options.progressField]: 0,
164
162
  [this.options.statusField]: 'IN_PROGRESS',
165
163
  [this.options.jobHandlerField]: jobHandlerName,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/background-jobs",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",