feat: duration span

src/main/webapp/src/components/DurationSpan.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { dateToDuration, formatedDuration } from '@/utils/dateFnsUtils.ts';
+import { onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  date: string;
+}>();
+
+const formated = ref<string>('');
+
+const timeout = ref<NodeJS.Timeout | undefined>();
+
+const getFormatedDuration = (): void => {
+  const duration = dateToDuration(props.date);
+  const { years, months, weeks, days, hours } = duration;
+
+  if (!years && !months && !weeks && !days)
+    timeout.value = setTimeout(getFormatedDuration, hours && hours > 0 ? 600000 : 20000);
+
+  formated.value = formatedDuration(duration);
+};
+
+watch(
+  () => props.date,
+  () => {
+    clearTimeout(timeout.value);
+    getFormatedDuration();
+  },
+  { immediate: true },
+);
+
+onUnmounted(() => clearTimeout(timeout.value));
+</script>
+
+<template>
+  <span>{{ t('information.duration', { duration: formated }) }}</span>
+</template>

src/main/webapp/src/components/drawers/information/InformationDrawer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import DurationSpan from '@/components/DurationSpan.vue';
 import ShareInRoomDialog from '@/components/dialogs/ShareInRoomDialog.vue';
 import HistoriesTab from '@/components/drawers/information/tabs/HistoriesTab.vue';
 import InformationTab from '@/components/drawers/information/tabs/InformationTab.vue';
 import ShareTab from '@/components/drawers/information/tabs/ShareTab.vue';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
-import { dateToDuration } from '@/utils/dateFnsUtils.ts';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -56,7 +56,7 @@ const onClose = (): void => {
               {{ file.title }}
             </div>
             <div class="text-caption text-medium-emphasis">
-              {{ t('information.duration', { duration: dateToDuration(file.editionDate) }) }}
+              <duration-span :date="file.editionDate" />
             </div>
           </div>
         </div>

src/main/webapp/src/components/layouts/FilesLayout.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import DurationSpan from '@/components/DurationSpan.vue';
 import FileMenu from '@/components/FileMenu.vue';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import type { File } from '@/types/fileType.ts';
-import { dateToDuration } from '@/utils/dateFnsUtils.ts';
 import { useSessionStorage } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
@@ -21,12 +21,6 @@ defineProps<{
   files: Array<File> | undefined;
 }>();
 
-const key = ref<number>(0);
-
-setInterval((): void => {
-  key.value++;
-}, 10000);
-
 const headers = ref<Array<any>>([
   { title: t('information.title'), key: 'title', sortable: true, width: '100%' },
   { title: '', key: 'actions', sortable: false, align: 'end' },
@@ -93,7 +87,7 @@ const sortBy = useSessionStorage<Array<any>>(`${__APP_SLUG__}.sort-by`, [{ key:
       </router-link>
     </template>
     <template #item.editionDate="{ item }">
-      <span :key="key">{{ t('information.duration', { duration: dateToDuration(item.editionDate) }) }}</span>
+      <duration-span :date="item.editionDate" />
     </template>
     <template #item.actions="{ item }">
       <file-menu :file-id="item.id" />

src/main/webapp/src/utils/dateFnsUtils.ts

@@ -1,10 +1,14 @@
-import { formatDuration, intervalToDuration } from 'date-fns';
+import { type Duration, formatDuration, intervalToDuration } from 'date-fns';
 
-const dateToDuration = (date: string): string => {
-  const { years, months, weeks, days, hours, minutes, seconds } = intervalToDuration({
+const dateToDuration = (date: string): Duration => {
+  return intervalToDuration({
     start: date,
     end: Date.now(),
   });
+};
+
+const formatedDuration = (duration: Duration): string => {
+  const { years, months, weeks, days, hours, minutes, seconds } = duration;
 
   if (
     years == undefined &&
@@ -26,4 +30,4 @@ const dateToDuration = (date: string): string => {
   return formatDuration({ seconds }, { format: ['seconds'] });
 };
 
-export { dateToDuration };
+export { dateToDuration, formatedDuration };