feat: add modified column

Signed-off-by: John Molakvoæ <[email protected]>

apps/files/src/components/FileEntry.vue

@@ -125,6 +125,13 @@
 			<span>{{ size }}</span>
 		</td>
 
+		<!-- Mtime -->
+		<td v-if="isMtimeAvailable"
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
+			<span>{{ mtime }}</span>
+		</td>
+
 		<!-- View columns -->
 		<td v-for="column in columns"
 			:key="column.id"
@@ -165,6 +172,7 @@ import { hashCode } from '../utils/hashUtils.ts'
 import { isCachedPreview } from '../services/PreviewService.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useFilesStore } from '../store/files.ts'
+import type moment from 'moment'
 import { useKeyboardStore } from '../store/keyboard.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
@@ -200,6 +208,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		isMtimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,
@@ -300,6 +312,19 @@ export default Vue.extend({
 			return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
 		},
 
+		mtime() {
+			if (this.source.mtime) {
+				return moment(this.source.mtime).fromNow()
+			}
+			return this.t('files_trashbin', 'A long time ago')
+		},
+		mtimeTitle() {
+			if (this.source.mtime) {
+				return moment(this.source.mtime).format('LLL')
+			}
+			return ''
+		},
+
 		linkTo() {
 			if (this.enabledDefaultActions.length > 0) {
 				const action = this.enabledDefaultActions[0]

apps/files/src/components/FilesListFooter.vue

@@ -43,6 +43,10 @@
 			<span>{{ totalSize }}</span>
 		</td>
 
+		<!-- Mtime -->
+		<td v-if="isMtimeAvailable"
+			class="files-list__column files-list__row-mtime" />
+
 		<!-- Custom views columns -->
 		<th v-for="column in columns"
 			:key="column.id"
@@ -67,6 +71,10 @@ export default Vue.extend({
 	},
 
 	props: {
+		isMtimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,

apps/files/src/components/FilesListHeader.vue

@@ -52,6 +52,13 @@
 				<FilesListHeaderButton :name="t('files', 'Size')" mode="size" />
 			</th>
 
+			<!-- Mtime -->
+			<th v-if="isMtimeAvailable"
+				:class="{'files-list__column--sortable': isMtimeAvailable}"
+				class="files-list__column files-list__row-mtime">
+				<FilesListHeaderButton :name="t('files', 'Modified')" mode="mtime" />
+			</th>
+
 			<!-- Custom views columns -->
 			<th v-for="column in columns"
 				:key="column.id"
@@ -91,6 +98,10 @@ export default Vue.extend({
 	],
 
 	props: {
+		isMtimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,

apps/files/src/components/FilesListVirtual.vue

@@ -35,6 +35,7 @@
 			<!-- File row -->
 			<FileEntry :active="active"
 				:index="index"
+				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:files-list-width="filesListWidth"
 				:nodes="nodes"
@@ -50,13 +51,15 @@
 
 			<!-- Thead-->
 			<FilesListHeader :files-list-width="filesListWidth"
+				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes" />
 		</template>
 
 		<template #after>
 			<!-- Tfoot-->
 			<FilesListFooter :files-list-width="filesListWidth"
+				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes"
 				:summary="summary" />
@@ -121,6 +124,13 @@ export default Vue.extend({
 		summary() {
 			return translate('files', '{summaryFile} and {summaryFolder}', this)
 		},
+		isMtimeAvailable() {
+			// Hide mtime column on narrow screens
+			if (this.filesListWidth < 768) {
+				return false
+			}
+			return this.nodes.some(node => node.mtime !== undefined)
+		},
 		isSizeAvailable() {
 			// Hide size column on narrow screens
 			if (this.filesListWidth < 768) {
@@ -355,6 +365,7 @@ export default Vue.extend({
 			}
 		}
 
+		.files-list__row-mtime,
 		.files-list__row-size {
 			// Right align text
 			justify-content: flex-end;
@@ -371,6 +382,10 @@ export default Vue.extend({
 			}
 		}
 
+		.files-list__row-mtime {
+			width: calc(var(--row-height) * 2);
+		}
+
 		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}

apps/files/src/store/files.ts

@@ -21,7 +21,7 @@
  */
 /* eslint-disable */
 import type { Folder, Node } from '@nextcloud/files'
-import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '../types.ts'
+import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '../types'
 
 import { defineStore } from 'pinia'
 import { subscribe } from '@nextcloud/event-bus'

apps/files/src/store/paths.ts

@@ -20,7 +20,7 @@
  *
  */
 /* eslint-disable */
-import type { PathOptions, ServicesState } from '../types.ts'
+import type { PathOptions, ServicesState } from '../types'
 
 import { defineStore } from 'pinia'
 import { subscribe } from '@nextcloud/event-bus'

apps/files/src/store/userconfig.ts

@@ -25,7 +25,7 @@ import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 import axios from '@nextcloud/axios'
-import type { UserConfig, UserConfigStore } from '../types.ts'
+import type { UserConfig, UserConfigStore } from '../types'
 import { emit, subscribe } from '@nextcloud/event-bus'
 
 const userConfig = loadState('files', 'config', {

apps/files/src/views/Navigation.cy.ts

@@ -4,7 +4,7 @@ import FolderSvg from '@mdi/svg/svg/folder.svg'
 import ShareSvg from '@mdi/svg/svg/share-variant.svg'
 import { createTestingPinia } from '@pinia/testing'
 
-import NavigationService from '../services/Navigation.ts'
+import NavigationService from '../services/Navigation'
 import NavigationView from './Navigation.vue'
 import router from '../router/router.js'
 import { useViewConfigStore } from '../store/viewConfig'

apps/files/src/views/favorites.ts

@@ -19,18 +19,18 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import type NavigationService from '../services/Navigation.ts'
-import type { Navigation } from '../services/Navigation.ts'
+import type { Navigation } from '../services/Navigation'
+import type NavigationService from '../services/Navigation'
 import { getLanguage, translate as t } from '@nextcloud/l10n'
-import StarSvg from '@mdi/svg/svg/star.svg?raw'
 import FolderSvg from '@mdi/svg/svg/folder.svg?raw'
+import StarSvg from '@mdi/svg/svg/star.svg?raw'
 
-import { getContents } from '../services/Favorites.ts'
-import { loadState } from '@nextcloud/initial-state'
 import { basename } from 'path'
+import { getContents } from '../services/Favorites'
 import { hashCode } from '../utils/hashUtils'
-import { subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import { Node, FileType } from '@nextcloud/files'
+import { subscribe } from '@nextcloud/event-bus'
 import logger from '../logger'
 
 const generateFolderView = function(folder: string, index = 0): Navigation {

apps/files_trashbin/src/main.ts

@@ -19,8 +19,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import type NavigationService from '../../files/src/services/Navigation.ts'
-import type { Navigation } from '../../files/src/services/Navigation.ts'
+import type NavigationService from '../../files/src/services/Navigation'
+import type { Navigation } from '../../files/src/services/Navigation'
 
 import { translate as t, translate } from '@nextcloud/l10n'
 import DeleteSvg from '@mdi/svg/svg/delete.svg?raw'

apps/files_trashbin/src/services/trashbin.ts

@@ -50,7 +50,8 @@ const resultToNode = function(node: FileStat): File | Folder {
 	const nodeData = {
 		id: node.props?.fileid as number || 0,
 		source: generateRemoteUrl('dav' + rootPath + node.filename),
-		mtime: new Date(node.lastmod),
+		// do not show the mtime column
+		// mtime: new Date(node.lastmod),
 		mime: node.mime as string,
 		size: node.props?.size as number || 0,
 		permissions,