fix(files_versions): Use `NcDateTime` to ensure date is transalted properly

Also do not use filters, filters are deprecated and will make migration to Vue 3 harder.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 14 insertions, 20 deletions

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 144aae33922..d810a389200 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -45,10 +45,12 @@
 		<!-- Version file size as subline -->
 		<template #subname>
 			<div class="version__info version__info__subline">
-				<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
+				<NcDateTime class="version__info__date"
+					relative-time="short"
+					:timestamp="version.mtime" />
 				<!-- Separate dot to improve alignement -->
 				<span>•</span>
-				<span>{{ version.size | humanReadableSize }}</span>
+				<span>{{ humanReadableSize }}</span>
 			</div>
 		</template>
 
@@ -117,6 +119,7 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
@@ -138,6 +141,7 @@ export default defineComponent({
 		NcActionLink,
 		NcActionButton,
 		NcAvatar,
+		NcDateTime,
 		NcListItem,
 		BackupRestore,
 		Download,
@@ -151,20 +155,6 @@ export default defineComponent({
 		tooltip: Tooltip,
 	},
 
-	created() {
-		this.fetchDisplayName()
-	},
-
-	filters: {
-		humanReadableSize(bytes: number): string {
-			return formatFileSize(bytes)
-		},
-
-		humanDateFromNow(timestamp: number): string {
-			return moment(timestamp).fromNow()
-		},
-	},
-
 	props: {
 		version: {
 			type: Object as PropType<Version>,
@@ -208,6 +198,10 @@ export default defineComponent({
 	},
 
 	computed: {
+		humanReadableSize() {
+			return formatFileSize(this.version.size)
+		},
+
 		versionLabel(): string {
 			const label = this.version.label ?? ''
 
@@ -234,10 +228,6 @@ export default defineComponent({
 			}
 		},
 
-		formattedDate(): string {
-			return moment(this.version.mtime).format('LLL')
-		},
-
 		enableLabeling(): boolean {
 			return this.capabilities.files.version_labeling === true
 		},
@@ -273,6 +263,10 @@ export default defineComponent({
 		},
 	},
 
+	created() {
+		this.fetchDisplayName()
+	},
+
 	methods: {
 		labelUpdate() {
 			this.$emit('label-update-request')