feat(files_external): migrate to vue

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

apps/files/src/components/CustomElementRender.vue

@@ -23,7 +23,7 @@
 	<span />
 </template>
 
-<script>
+<script lang="ts">
 /**
  * This component is used to render custom
  * elements provided by an API. Vue doesn't allow
@@ -46,20 +46,29 @@ export default {
 			required: true,
 		},
 	},
-	computed: {
-		element() {
-			return this.render(this.source, this.currentView)
-		},
-	},
 	watch: {
-		element() {
-			this.$el.replaceWith(this.element)
-			this.$el = this.element
+		source() {
+			this.updateRootElement()
+		},
+		currentView() {
+			this.updateRootElement()
 		},
 	},
 	mounted() {
-		this.$el.replaceWith(this.element)
-		this.$el = this.element
+		this.updateRootElement()
+	},
+	methods: {
+		async updateRootElement() {
+			const span = document.createElement('span') as HTMLSpanElement
+			this.$el.replaceWith(span)
+			this.$el = span
+
+			const element = await this.render(this.source, this.currentView)
+			if (element) {
+				this.$el.replaceWith(element)
+				this.$el = element
+			}
+		},
 	},
 }
 </script>

apps/files/src/components/FileEntry.vue

@@ -91,8 +91,12 @@
 
 		<!-- Actions -->
 		<td v-show="!isRenamingSmallScreen" :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
-			<!-- Inline actions -->
-			<!-- TODO: implement CustomElementRender -->
+			<!-- Render actions -->
+			<CustomElementRender v-for="action in enabledRenderActions"
+				:key="action.id"
+				:current-view="currentView"
+				:render="action.renderInline"
+				:source="source" />
 
 			<!-- Menu actions -->
 			<NcActions v-if="active"
@@ -301,15 +305,16 @@ export default Vue.extend({
 			return formatFileSize(size, true)
 		},
 		sizeOpacity() {
-			const size = parseInt(this.source.size, 10) || 0
-			if (!size || size < 0) {
-				return 1
-			}
-
 			// Whatever theme is active, the contrast will pass WCAG AA
 			// with color main text over main background and an opacity of 0.7
 			const minOpacity = 0.7
 			const maxOpacitySize = 10 * 1024 * 1024
+
+			const size = parseInt(this.source.size, 10) || 0
+			if (!size || size < 0) {
+				return minOpacity
+			}
+
 			return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
 		},
 
@@ -396,9 +401,17 @@ export default Vue.extend({
 			return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
 		},
 
+		// Enabled action that are displayed inline with a custom render function
+		enabledRenderActions() {
+			if (!this.active) {
+				return []
+			}
+			return this.enabledActions.filter(action => typeof action.renderInline === 'function')
+		},
+
 		// Default actions
 		enabledDefaultActions() {
-			return this.enabledActions.filter(action => !!action.default)
+			return this.enabledActions.filter(action => !!action?.default)
 		},
 
 		// Actions shown in the menu
@@ -407,7 +420,7 @@ export default Vue.extend({
 				// Showing inline first for the NcActions inline prop
 				...this.enabledInlineActions,
 				// Then the rest
-				...this.enabledActions.filter(action => action.default !== DefaultType.HIDDEN),
+				...this.enabledActions.filter(action => action.default !== DefaultType.HIDDEN && typeof action.renderInline !== 'function'),
 			].filter((value, index, self) => {
 				// Then we filter duplicates to prevent inline actions to be shown twice
 				return index === self.findIndex(action => action.id === value.id)

apps/files/src/services/FileAction.ts

@@ -74,7 +74,7 @@ interface FileActionData {
 	 * If defined, the returned html element will be
 	 * appended before the actions menu.
 	 */
-	renderInline?: (file: Node, view: Navigation) => HTMLElement,
+	renderInline?: (file: Node, view: Navigation) => Promise<HTMLElement | null>,
 }
 
 export class FileAction {

apps/files/src/views/FilesList.vue

@@ -183,19 +183,24 @@ export default Vue.extend({
 				return this.isAscSorting ? results : results.reverse()
 			}
 
+			const identifiers = [
+				// Sort favorites first if enabled
+				...this.userConfig.sort_favorites_first ? [v => v.attributes?.favorite !== 1] : [],
+				// Sort folders first if sorting by name
+				...this.sortingMode === 'basename' ? [v => v.type !== 'folder'] : [],
+				// Use sorting mode if NOT basename (to be able to use displayName too)
+				...this.sortingMode !== 'basename' ? [v => v[this.sortingMode]] : [],
+				// Use displayName if available, fallback to name
+				v => v.attributes?.displayName || v.basename,
+				// Finally, use basename if all previous sorting methods failed
+				v => v.basename,
+			]
+			const orders = new Array(identifiers.length).fill(this.isAscSorting ? 'asc' : 'desc')
+
 			return orderBy(
 				[...(this.currentFolder?._children || []).map(this.getNode).filter(file => file)],
-				[
-					// Sort favorites first if enabled
-					...this.userConfig.sort_favorites_first ? [v => v.attributes?.favorite !== 1] : [],
-					// Sort folders first if sorting by name
-					...this.sortingMode === 'basename' ? [v => v.type !== 'folder'] : [],
-					// Use sorting mode
-					v => v[this.sortingMode],
-					// Finally, fallback to name
-					v => v.basename,
-				],
-				this.isAscSorting ? ['asc', 'asc', 'asc'] : ['desc', 'desc', 'desc'],
+				identifiers,
+				orders,
 			)
 		},
 

apps/files_external/appinfo/routes.php

@@ -62,5 +62,10 @@
 			'url' => '/api/v1/mounts',
 			'verb' => 'GET',
 		],
+		[
+			'name' => 'Api#askNativeAuth',
+			'url' => '/api/v1/auth',
+			'verb' => 'GET',
+		],
 	],
 ];

apps/files_external/composer/composer/autoload_classmap.php

@@ -96,6 +96,7 @@
     'OCA\\Files_External\\Lib\\Storage\\Swift' => $baseDir . '/../lib/Lib/Storage/Swift.php',
     'OCA\\Files_External\\Lib\\VisibilityTrait' => $baseDir . '/../lib/Lib/VisibilityTrait.php',
     'OCA\\Files_External\\Listener\\GroupDeletedListener' => $baseDir . '/../lib/Listener/GroupDeletedListener.php',
+    'OCA\\Files_External\\Listener\\LoadAdditionalListener' => $baseDir . '/../lib/Listener/LoadAdditionalListener.php',
     'OCA\\Files_External\\Listener\\StorePasswordListener' => $baseDir . '/../lib/Listener/StorePasswordListener.php',
     'OCA\\Files_External\\Listener\\UserDeletedListener' => $baseDir . '/../lib/Listener/UserDeletedListener.php',
     'OCA\\Files_External\\Migration\\DummyUserSession' => $baseDir . '/../lib/Migration/DummyUserSession.php',

apps/files_external/composer/composer/autoload_static.php

@@ -111,6 +111,7 @@ class ComposerStaticInitFiles_External
         'OCA\\Files_External\\Lib\\Storage\\Swift' => __DIR__ . '/..' . '/../lib/Lib/Storage/Swift.php',
         'OCA\\Files_External\\Lib\\VisibilityTrait' => __DIR__ . '/..' . '/../lib/Lib/VisibilityTrait.php',
         'OCA\\Files_External\\Listener\\GroupDeletedListener' => __DIR__ . '/..' . '/../lib/Listener/GroupDeletedListener.php',
+        'OCA\\Files_External\\Listener\\LoadAdditionalListener' => __DIR__ . '/..' . '/../lib/Listener/LoadAdditionalListener.php',
         'OCA\\Files_External\\Listener\\StorePasswordListener' => __DIR__ . '/..' . '/../lib/Listener/StorePasswordListener.php',
         'OCA\\Files_External\\Listener\\UserDeletedListener' => __DIR__ . '/..' . '/../lib/Listener/UserDeletedListener.php',
         'OCA\\Files_External\\Migration\\DummyUserSession' => __DIR__ . '/..' . '/../lib/Migration/DummyUserSession.php',

apps/files_external/composer/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => '__root__',
         'pretty_version' => 'dev-master',
         'version' => 'dev-master',
-        'reference' => 'b1797842784b250fb01ed5e3bf130705eb94751b',
+        'reference' => '706c141fffce928d344fe2f039da549fad065393',
         'type' => 'library',
         'install_path' => __DIR__ . '/../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         '__root__' => array(
             'pretty_version' => 'dev-master',
             'version' => 'dev-master',
-            'reference' => 'b1797842784b250fb01ed5e3bf130705eb94751b',
+            'reference' => '706c141fffce928d344fe2f039da549fad065393',
             'type' => 'library',
             'install_path' => __DIR__ . '/../',
             'aliases' => array(),