From 48800e2eee9b4932a5f639639eb0ca034d4fbff7 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 6 Feb 2025 10:19:28 +0100
Subject: [PATCH] feat(front): Updated time for playlist cards

---
 front/src/components/playlists/Card.vue | 33 ++++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 080f3ea17..228552ff8 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -3,10 +3,14 @@ import type { Playlist } from '~/types'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
 import defaultCover from '~/assets/audio/default-cover.png'
+import { momentFormat } from '~/utils/filters'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+
+import moment from 'moment'
+
 import Card from '~/components/ui/Card.vue'
 import ActorLink from '~/components/common/ActorLink.vue'
 
@@ -52,6 +56,12 @@ const randomizedColors = computed(() => shuffleArray(bgcolors.value));
 const goToPlaylist = () => {
   router.push({name: 'library.playlists.detail', params: {id: props.playlist.id}})
 }
+
+const updatedTitle = computed(() => {
+  const date = momentFormat(new Date(props.playlist.modification_date ?? '1970-01-01'))
+  return t('components.audio.PlaylistCard.title', { date })
+})
+const updatedAgo = computed(() => moment(props.playlist.modification_date).fromNow())
 </script>
 
 <template>
@@ -92,15 +102,20 @@ const goToPlaylist = () => {
     </template>
 
     <template #footer>
-      <div class="playlist-action">
-        <span>{{ t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}</span>
-        <PlayButton
-          v-if="playlist.is_playable"
-          dropdown-only
-          :is-playable="playlist.is_playable"
-          :playlist="playlist"
-        />
-      </div>
+      <time
+        :datetime="playlist.modification_date"
+        :title="updatedTitle"
+      >
+        {{ updatedAgo }}
+      </time>
+      <i class="bi bi-dot" />
+      <span>{{ t('components.playlists.Card.meta.tracks', playlist.tracks_count) }}</span>
+      <PlayButton
+        v-if="playlist.is_playable"
+        dropdown-only
+        :is-playable="playlist.is_playable"
+        :playlist="playlist"
+      />
     </template>
   </Card>
 </template>