Skip to content

Commit 19b17f1

Browse files
S3bastianCZS3bastianCZ
committed
implement useTimeAgo from vueUse
1 parent 26fb972 commit 19b17f1

File tree

4 files changed

+91
-69
lines changed

4 files changed

+91
-69
lines changed

Diff for: ‎@xen-orchestra/web-core/lib/components/ui/task-item/UiTaskItem.vue

+42-60
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@
2525
<span>{{ t('by') }}</span>
2626
<UiUserLink :username="user" />
2727
</div>
28-
<span v-tooltip class="text-ellipsis">{{ taskElapsedMessage }}</span>
29-
<span v-if="task.progress && !taskIsComplete" v-tooltip class="text-ellipsis"
30-
>{{ t('task.estimated-end-in', { time: remainingTime }) }}
31-
</span>
28+
<span>{{ taskElapsedMessage }}</span>
3229
</div>
3330
<div class="progress-circle-bar">
3431
<UiCircleProgressBar
@@ -54,7 +51,8 @@ import UiUserLink from '@core/components/ui/user-link/UiUserLink.vue'
5451
import { vTooltip } from '@core/directives/tooltip.directive'
5552
import type { Message, Task } from '@core/types/task.type.ts'
5653
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
57-
import { computed, ref } from 'vue'
54+
import { useTimeAgo } from '@vueuse/core'
55+
import { computed } from 'vue'
5856
import { useI18n } from 'vue-i18n'
5957

6058
const { task, user } = defineProps<{
@@ -63,7 +61,45 @@ const { task, user } = defineProps<{
6361
}>()
6462

6563
const { t } = useI18n()
66-
const now = ref(new Date())
64+
65+
const taskTimeStatus = computed(() => task.end ?? task.start ?? new Date())
66+
67+
const timeAgo = useTimeAgo(taskTimeStatus, {
68+
fullDateFormatter: (date: Date) => date.toLocaleDateString(),
69+
messages: {
70+
justNow: t('just-now'),
71+
past: n => (n.match(/\d/) ? t('ago', [n]) : n),
72+
future: n => (n.match(/\d/) ? t('in', [n]) : n),
73+
month: (n, past) =>
74+
n === 1 ? (past ? t('last-month') : t('next-month')) : `${n} ${t(`month${n > 1 ? 's' : ''}`)}`,
75+
year: (n, past) => (n === 1 ? (past ? t('last-year') : t('next-year')) : `${n} ${t(`year${n > 1 ? 's' : ''}`)}`),
76+
day: (n, past) => (n === 1 ? (past ? t('yesterday') : t('tomorrow')) : `${n} ${t(`day${n > 1 ? 's' : ''}`)}`),
77+
week: (n, past) => (n === 1 ? (past ? t('last-week') : t('next-week')) : `${n} ${t(`week${n > 1 ? 's' : ''}`)}`),
78+
hour: n => `${n} ${t(`hour${n > 1 ? 's' : ''}`)}`,
79+
minute: n => `${n} ${t(`minute${n > 1 ? 's' : ''}`)}`,
80+
second: n => `${n} ${t(`second${n > 1 ? 's' : ''}`)}`,
81+
},
82+
})
83+
84+
const taskIsComplete = computed(() => {
85+
if (!task.end || !task.start) {
86+
return
87+
}
88+
89+
return task.end >= task.start || task.progress === 100
90+
})
91+
92+
const taskElapsedMessage = computed(() => {
93+
if (!task.start && !task.end) {
94+
return ''
95+
}
96+
97+
if (taskIsComplete.value) {
98+
return `${t('task.finished')} ${timeAgo.value}`
99+
} else {
100+
return `${t('task.started')} ${timeAgo.value}`
101+
}
102+
})
67103

68104
const countSubtasks = (task: Task): number => {
69105
if (!task.subtasks || task.subtasks.length === 0) {
@@ -83,14 +119,6 @@ const circleProgress = computed(() => {
83119
}
84120
})
85121

86-
const taskIsComplete = computed(() => {
87-
if (!task.end || !task.start) {
88-
return
89-
}
90-
91-
return task.end >= task.start || task.progress === 100
92-
})
93-
94122
const getEffectiveStatus = computed<CircleProgressBarAccent>(() => {
95123
const evaluate = (task: Task) => {
96124
const subtasks = task.subtasks || []
@@ -168,52 +196,6 @@ const generateMessages = (task: Task) => {
168196
]
169197
}
170198
const messageTypes = computed(() => generateMessages(task))
171-
172-
const formatElapsed = (timestamp: number) => {
173-
const diff = now.value.getTime() - timestamp
174-
if (diff < 0) {
175-
return '0m'
176-
}
177-
178-
const minutes = Math.floor(diff / 60000) % 60
179-
const hours = Math.floor(diff / 3600000)
180-
181-
return hours > 0 ? `${hours}h${minutes}m` : `${minutes}m`
182-
}
183-
184-
const startElapsedTime = computed(() => (task.start ? formatElapsed(task.start) : undefined))
185-
186-
const endElapsedTime = computed(() => (task.end ? formatElapsed(task.end) : undefined))
187-
188-
const taskElapsedMessage = computed(() => {
189-
if (!task.start && !task.end) {
190-
return ''
191-
}
192-
193-
if (taskIsComplete.value) {
194-
return t('task.finished-ago', { time: endElapsedTime.value })
195-
} else {
196-
return t('task.started-ago', { time: startElapsedTime.value })
197-
}
198-
})
199-
200-
const remainingTime = computed(() => {
201-
if (!task.start || !task.progress) {
202-
return
203-
}
204-
205-
const now = Date.now()
206-
const elapsed = now - task.start
207-
208-
const total = elapsed / (task.progress / 100)
209-
const remaining = total - elapsed
210-
211-
const minutes = Math.floor(remaining / 60000)
212-
const hours = Math.floor(minutes / 60)
213-
const mins = minutes % 60
214-
215-
return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`
216-
})
217199
</script>
218200

219201
<style scoped lang="postcss">

Diff for: ‎@xen-orchestra/web-core/lib/locales/en.json

+23-3
Original file line numberDiff line numberDiff line change
@@ -432,10 +432,9 @@
432432
"tags": "Tags",
433433
"task.estimated-end": "Estimated end",
434434
"task.estimated-end-in": "Estimated end in {time}",
435-
"task.finished-ago": "Finished {time} ago",
435+
"task.finished": "Finished",
436436
"task.progress": "Progress",
437437
"task.started": "Started",
438-
"task.started-ago": "Started {time} ago",
439438
"tasks": "Tasks",
440439
"tasks.n-subtasks": "{n} subtask | {n} subtasks",
441440
"tasks.no-tasks": "No tasks",
@@ -506,5 +505,26 @@
506505
"xoa-ssh-account": "XOA SSH account",
507506
"xoa-ssh-password-confirm-different": "SSH password confirmation is different",
508507
"you-are-currently-on": "You are currently on: {0}",
509-
"zstd": "zstd"
508+
"zstd": "zstd",
509+
510+
"just-now": "just now",
511+
"ago": "{0} ago",
512+
"in": "in {0}",
513+
"days": "days",
514+
"day": "day",
515+
"last-month": "last month",
516+
"next-month": "next month",
517+
"month": "month",
518+
"months": "months",
519+
"yesterday": "yesterday",
520+
"hour": "hour",
521+
"hours": "hours",
522+
"minutes": "minutes",
523+
"week": "week",
524+
"weeks": "weeks",
525+
"years": "years",
526+
"last-year": "last year",
527+
"next-year": "next year",
528+
"tomorrow": "tomorrow",
529+
"next-week": "next week"
510530
}

Diff for: ‎@xen-orchestra/web-core/lib/locales/fr.json

+24-4
Original file line numberDiff line numberDiff line change
@@ -432,10 +432,9 @@
432432
"tags": "Tags",
433433
"task.estimated-end": "Fin estimée",
434434
"task.estimated-end-in": "Fin estimée dans {time}",
435-
"task.finished-ago": "Fini depuis {time} ago",
435+
"task.finished": "terminée",
436436
"task.progress": "Progression",
437-
"task.started": "Démarré",
438-
"task.started-ago": "Démarré depuis {time}",
437+
"task.started": "Démarrée",
439438
"tasks": "Tâches",
440439
"tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches",
441440
"tasks.no-tasks": "Aucune tâche",
@@ -506,5 +505,26 @@
506505
"xoa-ssh-account": "Compte SSH de la XOA",
507506
"xoa-ssh-password-confirm-different": "La confirmation du mot de passe SSH est différente",
508507
"you-are-currently-on": "Vous êtes actuellement sur : {0}",
509-
"zstd": "zstd"
508+
"zstd": "zstd",
509+
510+
"just-now": "maintenant",
511+
"ago": "il y a {0}",
512+
"in": "dans {0}",
513+
"days": "jours",
514+
"day": "jour",
515+
"last-month": "depuis un mois",
516+
"next-month": "dans un mois",
517+
"month": "mois",
518+
"months": "mois",
519+
"yesterday": "hier",
520+
"hour": "heure",
521+
"hours": "heures",
522+
"minutes": "minutes",
523+
"week": "semaine",
524+
"weeks": "semaines",
525+
"years": "années",
526+
"last-year": "une année",
527+
"next-year": "dans un an",
528+
"tomorrow": "demain",
529+
"next-week": "dans une semaine"
510530
}

Diff for: ‎@xen-orchestra/web-core/lib/types/task.type.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export type Task = {
88
id: string | number
99
name: string
1010
status: TaskStatus
11-
tag?: string
12-
start?: number
11+
tag: string
12+
start: number
1313
end?: number
1414
userId?: string
1515
subtasks?: Task[]

0 commit comments

Comments
 (0)