@adminforth/background-jobs 1.1.0 → 1.2.0
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.
- package/build.log +2 -2
- package/custom/JobInfoPopup.vue +3 -3
- package/custom/JobsList.vue +4 -4
- package/custom/NavbarJobs.vue +24 -38
- package/dist/custom/JobInfoPopup.vue +3 -3
- package/dist/custom/JobsList.vue +4 -4
- package/dist/custom/NavbarJobs.vue +24 -38
- 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,
|
|
15
|
-
total size is 10,
|
|
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="
|
|
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
|
-
<
|
|
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
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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>
|
|
@@ -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"
|
|
@@ -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="
|
|
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
|
-
<
|
|
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
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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>
|