From fb61e3a7613727a71123ceb8c8767b0110d49460 Mon Sep 17 00:00:00 2001
From: John Molakvoæ <skjnldsv@protonmail.com>
Date: Thu, 22 Jun 2023 18:18:38 +0200
Subject: feat: add modified column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 apps/files/src/components/FileEntry.vue        | 25 +++++++++++++++++++++++++
 apps/files/src/components/FilesListFooter.vue  |  8 ++++++++
 apps/files/src/components/FilesListHeader.vue  | 11 +++++++++++
 apps/files/src/components/FilesListVirtual.vue | 15 +++++++++++++++
 apps/files/src/store/files.ts                  |  2 +-
 apps/files/src/store/paths.ts                  |  2 +-
 apps/files/src/store/userconfig.ts             |  2 +-
 apps/files/src/views/Navigation.cy.ts          |  2 +-
 apps/files/src/views/favorites.ts              | 12 ++++++------
 9 files changed, 69 insertions(+), 10 deletions(-)

(limited to 'apps/files/src')

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 5c17ada6e84..2153377cad8 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/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]
diff --git a/apps/files/src/components/FilesListFooter.vue b/apps/files/src/components/FilesListFooter.vue
index 80047f404fc..b4a2d7eda30 100644
--- a/apps/files/src/components/FilesListFooter.vue
+++ b/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,
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index 2d848d0eefe..d36c9dd46a6 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/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,
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 4ab34dba0e2..ca77f0a8f3e 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/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,6 +51,7 @@
 
 			<!-- Thead-->
 			<FilesListHeader :files-list-width="filesListWidth"
+				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes" />
 		</template>
@@ -57,6 +59,7 @@
 		<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);
 		}
diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts
index bd7d3202dd9..553df2e79d4 100644
--- a/apps/files/src/store/files.ts
+++ b/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'
diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts
index ecff97bf00c..60f4e6c08c5 100644
--- a/apps/files/src/store/paths.ts
+++ b/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'
diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts
index a5b049f197f..3115eff9b7f 100644
--- a/apps/files/src/store/userconfig.ts
+++ b/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', {
diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index 97f1f8ee7b8..65964832e8a 100644
--- a/apps/files/src/views/Navigation.cy.ts
+++ b/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'
diff --git a/apps/files/src/views/favorites.ts b/apps/files/src/views/favorites.ts
index 8267bf266e8..e445731b370 100644
--- a/apps/files/src/views/favorites.ts
+++ b/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 {
-- 
cgit v1.2.3