Skip to content

Commit 2447769

Browse files
yaroslav8765yaroslav8765
committed
progress[2]
1 parent 45ac762 commit 2447769

4 files changed

Lines changed: 129 additions & 47 deletions

File tree

‎custom/JobInfoPopup.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="flex flex-col ">
3+
<div class="flex flex-col">
4+
<div class="flex items-center mb-1">
5+
<h2 class="text-lg font-semibold">{{ job.name }}</h2>
6+
<p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
7+
<p class="ml-auto text-gray-800 h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
8+
<StateToIcon :job="job" />
9+
</div>
10+
<div class="flex items-center gap-4">
11+
<ProgressBar
12+
:current-value="job.progress"
13+
:max-value="100"
14+
:min-value="0"
15+
:showAnimation="job.status === 'IN_PROGRESS'"
16+
:showLabels="false"
17+
:showValues="false"
18+
:show-progress="false"
19+
:height="6"
20+
/>
21+
<Button class="h-8"> Stop </Button>
22+
</div>
23+
</div>
24+
<slot></slot>
25+
</div>
26+
</template>
27+
28+
29+
30+
<script setup lang="ts">
31+
import type { IJob } from './utils';
32+
import { ProgressBar, Button } from '@/afcl';
33+
import { getTimeAgoString } from '@/utils';
34+
import { useI18n } from 'vue-i18n';
35+
import StateToIcon from './StateToIcon.vue';
36+
37+
const { t } = useI18n();
38+
39+
40+
const props = defineProps<{
41+
job: IJob;
42+
}>();
43+
</script>

‎custom/JobsList.vue‎

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,49 @@
11
<template>
22
<div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
3-
<div v-for="job in props.jobs" :key="job.id" class="flex items-center px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
4-
<div class="flex flex-col w-full max-w-48">
5-
<p class="flex gap-2 items-end justify-between text-nowrap">
6-
<span class="text-sm h-full text truncate">{{ job.name }}</span>
7-
<span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
8-
</p>
9-
<ProgressBar
10-
class="mt-1"
11-
:current-value="job.progress"
12-
:max-value="100"
13-
:min-value="0"
14-
:showAnimation="job.status === 'IN_PROGRESS'"
15-
:showLabels="false"
16-
:showValues="false"
17-
:show-progress="false"
18-
/>
3+
<Modal v-for="job in props.jobs" :key="job.id" :beforeOpenFunction="props.closeDropdown">
4+
<template #trigger>
5+
<div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
6+
<div class="flex flex-col w-full max-w-48">
7+
<p class="flex gap-2 items-end justify-between text-nowrap">
8+
<span class="text-sm h-full text truncate">{{ job.name }}</span>
9+
<span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
10+
</p>
11+
<ProgressBar
12+
class="mt-1"
13+
:current-value="job.progress"
14+
:max-value="100"
15+
:min-value="0"
16+
:showAnimation="job.status === 'IN_PROGRESS'"
17+
:showLabels="false"
18+
:showValues="false"
19+
:show-progress="false"
20+
/>
21+
</div>
22+
<StateToIcon :job="job" />
23+
</div>
24+
</template>
25+
<div>
26+
<JobInfoPopup :job="job" />
1927
</div>
20-
<Tooltip v-if="job.status === 'IN_PROGRESS'">
21-
<Spinner class="w-4 h-4 ml-2" />
22-
<template #tooltip>
23-
{{ t('In progress') }}
24-
</template>
25-
</Tooltip>
26-
<Tooltip v-else-if="job.status === 'DONE'">
27-
<IconCheckCircleOutline class="w-5 h-5 ml-2 text-green-500" />
28-
<template #tooltip>
29-
{{ t('Done') }}
30-
</template>
31-
</Tooltip>
32-
<Tooltip v-else-if="job.status === 'CANCELED'">
33-
<IconCloseCircleOutline class="w-5 h-5 ml-2 text-red-500" />
34-
<template #tooltip>
35-
{{ t('Canceled') }}
36-
</template>
37-
</Tooltip>
38-
<Tooltip v-else-if="job.status === 'DONE_WITH_ERRORS'">
39-
<IconExclamationCircleOutline class="w-5 h-5 ml-2 text-yellow-500" />
40-
<template #tooltip>
41-
{{ t('Done with errors') }}
42-
</template>
43-
</Tooltip>
44-
</div>
28+
</Modal>
29+
4530
</div>
4631
</template>
4732

4833

4934
<script setup lang="ts">
5035
import type { IJob } from './utils';
5136
import { getTimeAgoString } from '@/utils';
52-
import { ProgressBar, Spinner, Tooltip } from '@/afcl';
53-
import { IconCheckCircleOutline, IconCloseCircleOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
37+
import { ProgressBar, Modal } from '@/afcl';
5438
import { useI18n } from 'vue-i18n';
39+
import JobInfoPopup from './JobInfoPopup.vue';
40+
import StateToIcon from './StateToIcon.vue';
5541
5642
const { t } = useI18n();
5743
5844
const props = defineProps<{
5945
jobs: IJob[];
46+
closeDropdown: () => void;
6047
}>();
6148
6249

‎custom/NavbarJobs.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,21 @@
1414
</Tooltip>
1515
</div>
1616
</div>
17-
<div v-if="isDropdownOpen" class="absolute right-28 top-14 md:top-12 rounded z-10">
18-
<JobsList :jobs="jobs" />
19-
</div>
17+
<Transition
18+
enter-active-class="transition ease-out duration-200"
19+
enter-from-class="opacity-0 scale-95"
20+
enter-to-class="opacity-100 scale-100"
21+
leave-active-class="transition ease-in duration-150"
22+
leave-from-class="opacity-100 scale-100"
23+
leave-to-class="opacity-0 scale-95"
24+
>
25+
<div v-show="isDropdownOpen" class="absolute right-28 top-14 md:top-12 rounded z-10">
26+
<JobsList
27+
:closeDropdown="() => isDropdownOpen = false"
28+
:jobs="jobs"
29+
/>
30+
</div>
31+
</Transition>
2032
</div>
2133

2234

@@ -28,7 +40,7 @@
2840
import type { AdminUser } from 'adminforth';
2941
import { onMounted, onUnmounted, ref, computed } from 'vue';
3042
import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
31-
import { Tooltip } from '@/afcl';
43+
import { Tooltip, Modal } from '@/afcl';
3244
import { useI18n } from 'vue-i18n';
3345
import JobsList from './JobsList.vue';
3446
import type { IJob } from './utils';

‎custom/StateToIcon.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<Tooltip v-if="job.status === 'IN_PROGRESS'">
3+
<Spinner class="w-4 h-4 ml-2" />
4+
<template #tooltip>
5+
{{ t('In progress') }}
6+
</template>
7+
</Tooltip>
8+
<Tooltip v-else-if="job.status === 'DONE'">
9+
<IconCheckCircleOutline class="w-5 h-5 ml-2 text-green-500" />
10+
<template #tooltip>
11+
{{ t('Done') }}
12+
</template>
13+
</Tooltip>
14+
<Tooltip v-else-if="job.status === 'CANCELED'">
15+
<IconCloseCircleOutline class="w-5 h-5 ml-2 text-red-500" />
16+
<template #tooltip>
17+
{{ t('Canceled') }}
18+
</template>
19+
</Tooltip>
20+
<Tooltip v-else-if="job.status === 'DONE_WITH_ERRORS'">
21+
<IconExclamationCircleOutline class="w-5 h-5 ml-2 text-yellow-500" />
22+
<template #tooltip>
23+
{{ t('Done with errors') }}
24+
</template>
25+
</Tooltip>
26+
</template>
27+
28+
29+
<script setup lang="ts">
30+
import type { IJob } from './utils';
31+
import { IconCheckCircleOutline, IconCloseCircleOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
32+
import { Spinner, Tooltip } from '@/afcl';
33+
import { useI18n } from 'vue-i18n';
34+
35+
const { t } = useI18n();
36+
37+
const props = defineProps<{
38+
job: IJob;
39+
}>();
40+
</script>

0 commit comments

Comments
 (0)