feat(files): Display mtime in grid view

Signed-off-by: Louis Chemineau <[email protected]>

apps/files/src/components/FileEntry.vue

@@ -84,7 +84,7 @@
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
-			<NcDateTime v-if="mtime" :timestamp="mtime" :ignore-seconds="true" />
+			<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
 			<span v-else>{{ t('files', 'Unknown date') }}</span>
 		</td>
 
@@ -105,7 +105,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { formatFileSize } from '@nextcloud/files'
-import moment from '@nextcloud/moment'
 
 import { useNavigation } from '../composables/useNavigation'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
@@ -139,18 +138,10 @@ export default defineComponent({
 	],
 
 	props: {
-		isMtimeAvailable: {
-			type: Boolean,
-			default: false,
-		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,
 		},
-		compact: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {
@@ -222,41 +213,6 @@ export default defineComponent({
 				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
 		},
-		mtimeOpacity() {
-			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
-
-			const mtime = this.source.mtime?.getTime?.()
-			if (!mtime) {
-				return {}
-			}
-
-			// 1 = today, 0 = 31 days ago
-			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
-			if (ratio < 0) {
-				return {}
-			}
-			return {
-				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
-			}
-		},
-		mtime() {
-			// If the mtime is not a valid date, return it as is
-			if (this.source.mtime && !isNaN(this.source.mtime.getDate())) {
-				return this.source.mtime
-			}
-
-			if (this.source.crtime && !isNaN(this.source.crtime.getDate())) {
-				return this.source.crtime
-			}
-
-			return null
-		},
-		mtimeTitle() {
-			if (this.source.mtime) {
-				return moment(this.source.mtime).format('LLL')
-			}
-			return ''
-		},
 	},
 
 	methods: {

apps/files/src/components/FileEntryGrid.vue

@@ -63,6 +63,15 @@
 				@click.native="execDefaultAction" />
 		</td>
 
+		<!-- Mtime -->
+		<td v-if="!compact && isMtimeAvailable"
+			:style="mtimeOpacity"
+			class="files-list__row-mtime"
+			data-cy-files-list-row-mtime
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="source.mtime" :timestamp="source.mtime" :ignore-seconds="true" />
+		</td>
+
 		<!-- Actions -->
 		<FileEntryActions ref="actions"
 			:class="`files-list__row-actions-${uniqueId}`"
@@ -77,6 +86,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
 import { useNavigation } from '../composables/useNavigation'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
@@ -97,6 +108,7 @@ export default defineComponent({
 		FileEntryCheckbox,
 		FileEntryName,
 		FileEntryPreview,
+		NcDateTime,
 	},
 
 	mixins: [

apps/files/src/components/FileEntryMixin.ts

@@ -54,6 +54,14 @@ export default defineComponent({
 			type: Number,
 			default: 0,
 		},
+		isMtimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	provide() {
@@ -179,8 +187,22 @@ export default defineComponent({
 			},
 		},
 
-		isRenaming() {
-			return this.renamingStore.renamingNode === this.source
+		mtimeOpacity() {
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+
+			const mtime = this.source.mtime?.getTime?.()
+			if (!mtime) {
+				return {}
+			}
+
+			// 1 = today, 0 = 31 days ago
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
 		},
 
 		/**