fix(files): fix custom render components reactivity

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

9 files changed, 59 insertions, 37 deletions

diff --git a/apps/files/src/components/CustomElementRender.vue b/apps/files/src/components/CustomElementRender.vue
index b5dc510b645..bb6df3fd854 100644
--- a/apps/files/src/components/CustomElementRender.vue
+++ b/apps/files/src/components/CustomElementRender.vue
@@ -20,20 +20,40 @@
   -
   -->
 <template>
-	<div />
+	<span />
 </template>
 
 <script>
 export default {
 	name: 'CustomElementRender',
 	props: {
-		element: {
-			type: HTMLElement,
+		source: {
+			type: Object,
 			required: true,
 		},
+		currentView: {
+			type: Object,
+			required: true,
+		},
+		render: {
+			type: Function,
+			required: true,
+		},
+	},
+	computed: {
+		element() {
+			return this.render(this.source, this.currentView)
+		},
+	},
+	watch: {
+		element() {
+			this.$el.replaceWith(this.element)
+			this.$el = this.element
+		},
 	},
 	mounted() {
 		this.$el.replaceWith(this.element)
+		this.$el = this.element
 	},
 }
 </script>
diff --git a/apps/files/src/components/CustomSvgIconRender.vue b/apps/files/src/components/CustomSvgIconRender.vue
index f025319946f..8c14cf39872 100644
--- a/apps/files/src/components/CustomSvgIconRender.vue
+++ b/apps/files/src/components/CustomSvgIconRender.vue
@@ -35,6 +35,11 @@ export default {
 			required: true,
 		},
 	},
+	watch: {
+		svg() {
+			this.$el.innerHTML = sanitize(this.svg)
+		},
+	},
 	mounted() {
 		this.$el.innerHTML = sanitize(this.svg)
 	},
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 29e9895757e..fcada72e4ce 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -57,8 +57,8 @@
 		<!-- Actions -->
 		<td :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
 			<!-- Inline actions -->
-			<template v-for="action in enabledInlineActions">
-				<CustomElementRender v-if="action.renderInline"
+			<template v-if="false" v-for="action in enabledInlineActions">
+				<CustomElementRender v-if="false"
 					:key="action.id"
 					:element="action.renderInline(source, currentView)" />
 				<NcButton v-else
@@ -100,7 +100,7 @@
 			:key="column.id"
 			:class="`files-list__row-${currentView?.id}-${column.id}`"
 			class="files-list__row-column-custom">
-			<CustomElementRender :element="column.render(source)" />
+			<CustomElementRender :current-view="currentView" :render="column.render" :source="source" />
 		</td>
 	</Fragment>
 </template>
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index 0ee7298ee95..b69a394a812 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/apps/files/src/components/FilesListHeader.vue
@@ -27,7 +27,7 @@
 
 		<!-- Link to file -->
 		<th class="files-list__column files-list__row-name files-list__column--sortable"
-			@click.exact.stop="toggleSortBy('basename')">
+			@click.stop.prevent="toggleSortBy('basename')">
 			<!-- Icon or preview -->
 			<span class="files-list__row-icon" />
 
diff --git a/apps/files/src/components/FilesListHeaderButton.vue b/apps/files/src/components/FilesListHeaderButton.vue
index 8a07dd71395..2e0c398ab25 100644
--- a/apps/files/src/components/FilesListHeaderButton.vue
+++ b/apps/files/src/components/FilesListHeaderButton.vue
@@ -24,7 +24,7 @@
 		:class="{'files-list__column-sort-button--active': sortingMode === mode}"
 		class="files-list__column-sort-button"
 		type="tertiary"
-		@click="toggleSortBy(mode)">
+		@click.stop.prevent="toggleSortBy(mode)">
 		<!-- Sort icon before text as size is align right -->
 		<MenuUp v-if="sortingMode !== mode || isAscSorting" slot="icon" />
 		<MenuDown v-else slot="icon" />
@@ -42,8 +42,6 @@ import Vue from 'vue'
 
 import { useSortingStore } from '../store/sorting'
 
-Vue.config.performance = true
-
 export default Vue.extend({
 	name: 'FilesListHeaderButton',
 
@@ -109,13 +107,6 @@ export default Vue.extend({
 			this.sortingStore.setSortingBy(key, this.currentView.id)
 		},
 
-		toggleSortByCustomColumn(column) {
-			if (!column.sort) {
-				return
-			}
-			this.toggleSortBy(column.id)
-		},
-
 		t: translate,
 	},
 })
diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss
index 06b6637b6f2..8a03b364fd2 100644
--- a/apps/files/src/mixins/fileslist-row.scss
+++ b/apps/files/src/mixins/fileslist-row.scss
@@ -21,8 +21,10 @@
  */
 
 /**
+ * ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
  * This file is for every column styling that must be
- * shared between the files list and the list header.
+ * shared between BOTH the files list AND the list header.
+ * ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠
  */
 td, th {
 	display: flex;
diff --git a/apps/files/src/services/Navigation.ts b/apps/files/src/services/Navigation.ts
index 4ca4588dff5..247243a8a74 100644
--- a/apps/files/src/services/Navigation.ts
+++ b/apps/files/src/services/Navigation.ts
@@ -36,7 +36,7 @@ export interface Column {
 	/** Translated column title */
 	title: string
 	/** The content of the cell. The element will be appended within */
-	render: (node: Node) => HTMLElement
+	render: (node: Node, view: Navigation) => HTMLElement
 	/** Function used to sort Nodes between them */
 	sort?: (nodeA: Node, nodeB: Node) => number
 	/** Custom summary of the column to display at the end of the list.
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 03b0076a435..98e917b5191 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -61,9 +61,9 @@
 </template>
 
 <script lang="ts">
-import { Folder } from '@nextcloud/files'
+import { Folder, File, Node } from '@nextcloud/files'
 import { join } from 'path'
-import { compare, orderBy } from 'natural-orderby'
+import { orderBy } from 'natural-orderby'
 import { translate } from '@nextcloud/l10n'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -147,6 +147,15 @@ export default Vue.extend({
 			return this.filesStore.getNode(fileId)
 		},
 
+		sortingMode() {
+			return this.sortingStore.getSortingMode(this.currentView.id)
+				|| this.currentView.defaultSortKey
+				|| 'basename'
+		},
+		isAscSorting() {
+			return this.sortingStore.isAscSorting(this.currentView.id) === true
+		},
+
 		/**
 		 * The current directory contents.
 		 * @return {Node[]}
@@ -156,34 +165,27 @@ export default Vue.extend({
 				return []
 			}
 
-			const sortAsc = this.sortingStore.isAscSorting(this.currentView.id) === true
-			const sortKey = this.sortingStore.getSortingMode(this.currentView.id)
-				|| this.currentView.defaultSortKey
-				|| 'basename'
-
 			const customColumn = this.currentView.columns
-				.find(column => column.id === sortKey)
+				.find(column => column.id === this.sortingMode)
 
 			// Custom column must provide their own sorting methods
 			if (customColumn?.sort && typeof customColumn.sort === 'function') {
-				if (sortAsc) {
-					return [...(this.currentFolder?.children || []).map(this.getNode)]
-						.sort(customColumn.sort)
-				}
-				return [...(this.currentFolder?.children || []).map(this.getNode)]
+				const results = [...(this.currentFolder?.children || []).map(this.getNode)]
 					.sort(customColumn.sort)
-					.reverse()
+				return this.isAscSorting ? results : results.reverse()
 			}
 
 			return orderBy(
 				[...(this.currentFolder?.children || []).map(this.getNode)],
 				[
 					// Sort folders first if sorting by name
-					...sortKey === 'basename' ? [v => v.type !== 'folder'] : [],
-					v => v[sortKey],
+					...this.sortingMode === 'basename' ? [v => v.type !== 'folder'] : [],
+					// Use sorting mode
+					v => v[this.sortingMode],
+					// Fallback to name
 					v => v.basename,
 				],
-				sortAsc ? 'asc' : 'desc',
+				this.isAscSorting ? ['asc', 'asc', 'asc'] : ['desc', 'desc', 'desc'],
 			)
 		},
 
diff --git a/apps/files_trashbin/src/main.ts b/apps/files_trashbin/src/main.ts
index 13b37836774..dfa88bded93 100644
--- a/apps/files_trashbin/src/main.ts
+++ b/apps/files_trashbin/src/main.ts
@@ -54,7 +54,9 @@ Navigation.register({
 					span.textContent = moment.unix(deletionTime).fromNow()
 					return span
 				}
-				span.textContent = translate('files_trashbin', 'Deleted a long time ago')
+
+				// Unknown deletion time
+				span.textContent = translate('files_trashbin', 'A long time ago')
 				return span
 			},
 			sort(nodeA, nodeB) {