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>

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 144aae33922ac159c5afbbcf910e613dcdb81ee5..d810a389200cfe014f2fc5df8aa1da46d15eebe2 100644 (file)
--- 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')