From ecaa574621324cb945078914c542ad3c4072a5e7 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 24 Aug 2023 04:05:18 +0200
Subject: [PATCH 1/3] feat(Dialogs): Allow to pass SVGs as icons

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/DialogButton.vue |  5 +++--
 lib/components/types.ts         | 13 ++++++++++++-
 lib/svg.d.ts                    |  9 +++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 lib/svg.d.ts

diff --git a/lib/components/DialogButton.vue b/lib/components/DialogButton.vue
index d3d073be..eef9bb37 100644
--- a/lib/components/DialogButton.vue
+++ b/lib/components/DialogButton.vue
@@ -2,14 +2,15 @@
 	<NcButton :aria-label="props.label" :type="props.type" @click="handleClick">
 		{{ props.label }}
 		<template v-if="props.icon !== undefined" #icon>
-			<component :is="props.icon" :size="20" />
+			<NcIconSvgWrapper v-if="typeof props.icon === 'string'" :svg="props.icon" />
+			<component :is="props.icon" v-else :size="20" />
 		</template>
 	</NcButton>
 </template>
 
 <script setup lang="ts">
 import type { IDialogButton } from './types'
-import { NcButton } from '@nextcloud/vue'
+import { NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 
 // with vue 3.3:
 // const props = defineProps<IDialogButton>()
diff --git a/lib/components/types.ts b/lib/components/types.ts
index 0bcac3e4..61998e99 100644
--- a/lib/components/types.ts
+++ b/lib/components/types.ts
@@ -25,8 +25,19 @@ import type { AsyncComponent, Component } from 'vue'
 
 export interface IDialogButton {
 	label: string,
-	icon?: Component | AsyncComponent,
+
+	/** Callback on button click */
 	callback: () => void,
+	/**
+	 * Optional Icon for the button
+	 * Can be a Vue component, async Vue component, or SVG
+	 */
+	icon?: Component | AsyncComponent | string,
+
+	/**
+	 * Button type
+	 * @see https://nextcloud-vue-components.netlify.app/#/Components/NcButton
+	 */
 	type?: 'primary' | 'secondary' | 'error' | 'warning' | 'success'
 }
 
diff --git a/lib/svg.d.ts b/lib/svg.d.ts
new file mode 100644
index 00000000..f3873ebb
--- /dev/null
+++ b/lib/svg.d.ts
@@ -0,0 +1,9 @@
+declare module '*.svg' {
+	const content: string
+	export default content
+}
+
+declare module '*.svg?raw' {
+	const content: string
+	export default content
+}

From a2a13cbf70897a949c3227771de26e58403316b2 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 24 Aug 2023 04:14:22 +0200
Subject: [PATCH 2/3] feat(FilePicker): Support button factories which can be
 used to create reactive buttons (e.g. labels like `move to...`)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FilePicker.vue | 26 ++++++----
 lib/components/types.ts                  |  7 +++
 lib/legacy.ts                            | 66 +++++++++++++++---------
 package-lock.json                        |  6 +++
 package.json                             |  1 +
 5 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index 36b16b15..661fd576 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IFilePickerButton } from '../types'
+import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } from '../types'
 import type { Node } from '@nextcloud/files'
 
 import IconFile from 'vue-material-design-icons/File.vue'
@@ -64,7 +64,7 @@ import { t } from '../../utils/l10n'
 
 const props = withDefaults(defineProps<{
 	/** Buttons to be displayed */
-	buttons: IFilePickerButton[]
+	buttons: IFilePickerButton[] | IFilePickerButtonFactory
 
 	/** The name of file picker dialog (heading) */
 	name: string
@@ -84,7 +84,7 @@ const props = withDefaults(defineProps<{
 	/**
 	 * Custom filter function used to filter pickable files
 	 */
-	filterFn?: (node: Node) => boolean
+	filterFn?: IFilePickerFilter
 
 	/**
 	 * List of allowed mime types
@@ -133,13 +133,19 @@ const dialogProps = computed(() => ({
 /**
  * Map buttons to Dialog buttons by wrapping the callback function to pass the selected files
  */
-const dialogButtons = computed(() => [...props.buttons].map(button => ({
-	...button,
-	callback: async () => {
-		const nodes = selectedFiles.value.length === 0 && props.allowPickDirectory ? [await getFile(currentPath.value)] : selectedFiles.value as Node[]
-		return button.callback(nodes)
-	},
-})))
+const dialogButtons = computed(() => {
+	const buttons = typeof props.buttons === 'function'
+		? props.buttons(selectedFiles.value as Node[], currentPath.value, currentView.value)
+		: props.buttons
+
+	return buttons.map((button) => ({
+		...button,
+		callback: async () => {
+			const nodes = selectedFiles.value.length === 0 && props.allowPickDirectory ? [await getFile(currentPath.value)] : selectedFiles.value as Node[]
+			button.callback(nodes)
+		},
+	} as IFilePickerButton))
+})
 
 /**
  * Name of the currently active view
diff --git a/lib/components/types.ts b/lib/components/types.ts
index 61998e99..ef3d7991 100644
--- a/lib/components/types.ts
+++ b/lib/components/types.ts
@@ -44,3 +44,10 @@ export interface IDialogButton {
 export interface IFilePickerButton extends Omit<IDialogButton, 'callback'> {
 	callback: (nodes: Node[]) => void
 }
+
+export type IFilePickerButtonFactory = (selectedNodes: Node[], currentPath: string, currentView: string) => IFilePickerButton[]
+
+/**
+* Type of filter functions to filter the FilePicker's file list
+*/
+export type IFilePickerFilter = (node: Node) => boolean
diff --git a/lib/legacy.ts b/lib/legacy.ts
index 3db4a32b..f99ba4ca 100644
--- a/lib/legacy.ts
+++ b/lib/legacy.ts
@@ -25,13 +25,17 @@
  */
 
 /// <reference types="@nextcloud/typings" />
-import type { IFilePickerButton } from './components/FilePicker/FilePicker.vue'
+import type { IFilePickerButton, IFilePickerButtonFactory } from './components/types'
 import type { Node } from '@nextcloud/files'
 import type { AsyncComponent, Component } from 'vue'
 
+import { basename } from 'path'
 import { t } from './utils/l10n'
 import { FilePickerVue, FilePickerType } from '.'
+
 import DialogBase from './components/DialogBase.vue'
+import IconCopy from '@mdi/svg/svg/folder-multiple.svg'
+import IconMove from '@mdi/svg/svg/folder-move.svg'
 import Vue from 'vue'
 
 /**
@@ -129,34 +133,48 @@ export async function filepicker(title: string, callback: (s: string | string[],
 		sharePermissions: null,
 	})
 
-	const buttons: IFilePickerButton[] = []
-	if (type === FilePickerType.Choose) {
-		buttons.push({
-			label: t('Choose'),
-			type: 'primary',
-			callback: legacyCallback(callback, FilePickerType.Choose),
-		})
-	} else if (type === FilePickerType.Copy || type === FilePickerType.CopyMove) {
-		buttons.push({
-			label: t('Copy'),
-			callback: legacyCallback(callback, FilePickerType.Copy),
-		})
-	}
-	if (type === FilePickerType.CopyMove || type === FilePickerType.Move) {
-		buttons.push({
-			label: t('Move'),
-			type: 'primary',
-			callback: legacyCallback(callback, FilePickerType.Move),
-		})
-	}
+	let buttonFn: IFilePickerButtonFactory|IFilePickerButton[]
 	if (type === FilePickerType.Custom) {
-		(options.buttons || []).forEach((button) => {
-			buttons.push({
+		buttonFn = [] as IFilePickerButton[]
+		(options.buttons || []).forEach((button: { text: string, defaultButton: boolean, type: FilePickerType }) => {
+			(buttonFn as IFilePickerButton[]).push({
 				callback: legacyCallback(callback, button.type),
 				label: button.text,
 				type: button.defaultButton ? 'primary' : 'secondary',
 			})
 		})
+	} else {
+		buttonFn = (nodes, path) => {
+			const buttons: IFilePickerButton[] = []
+			const node = nodes?.[0]?.attributes?.displayName || nodes?.[0]?.basename
+			const target = node || basename(path)
+
+			if (type === FilePickerType.Choose) {
+				buttons.push({
+					callback: legacyCallback(callback, FilePickerType.Choose),
+					label: node && !multiselect ? t('Choose {file}', { file: node }) : t('Choose'),
+					type: 'primary',
+				})
+			}
+
+			if (type === FilePickerType.CopyMove || type === FilePickerType.Copy) {
+				buttons.push({
+					callback: legacyCallback(callback, FilePickerType.Copy),
+					label: target ? t('Copy to {target}', { target }) : t('Copy'),
+					type: 'primary',
+					icon: IconCopy,
+				})
+			}
+			if (type === FilePickerType.Move || type === FilePickerType.CopyMove) {
+				buttons.push({
+					callback: legacyCallback(callback, FilePickerType.Move),
+					label: target ? t('Move to {target}', { target }) : t('Move'),
+					type: type === FilePickerType.Move ? 'primary' : 'secondary',
+					icon: IconMove,
+				})
+			}
+			return buttons
+		}
 	}
 
 	const filter = {} as any
@@ -170,7 +188,7 @@ export async function filepicker(title: string, callback: (s: string | string[],
 	spawnDialog(FilePickerVue, {
 		...filter,
 		name: title,
-		buttons,
+		buttons: buttonFn,
 		multiselect,
 		path,
 		mimetypeFilter,
diff --git a/package-lock.json b/package-lock.json
index eaed4951..4d9ebeb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "4.2.0-beta.3",
       "license": "GPL-3.0-or-later",
       "dependencies": {
+        "@mdi/svg": "^7.2.96",
         "@nextcloud/files": "^3.0.0-beta.14",
         "@nextcloud/l10n": "^2.2.0",
         "@nextcloud/router": "^2.1.2",
@@ -2705,6 +2706,11 @@
         "unist-util-is": "^3.0.0"
       }
     },
+    "node_modules/@mdi/svg": {
+      "version": "7.2.96",
+      "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-7.2.96.tgz",
+      "integrity": "sha512-rxzuSL2RSt/pWWnFnUFQi5GJArm2tHMhx20Gee3Ydn+xT2bqbR4syfgdPrq2b+j+n5LjC7C8Fb1QDM6LKeF0cA=="
+    },
     "node_modules/@microsoft/api-extractor": {
       "version": "7.36.4",
       "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.36.4.tgz",
diff --git a/package.json b/package.json
index ed6eb117..77aaffaa 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "vue": "^2.7.14"
   },
   "dependencies": {
+    "@mdi/svg": "^7.2.96",
     "@nextcloud/files": "^3.0.0-beta.14",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^2.1.2",

From a2cd69ee634c221a917dc313c44dd0ee02e4e32c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 24 Aug 2023 04:15:16 +0200
Subject: [PATCH 3/3] feat(FilePicker): Emit close event when a button is
 pressed with selected files as payload

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 l10n/messages.pot                        | 30 +++++++++++++++++-------
 lib/components/FilePicker/FilePicker.vue |  3 ++-
 lib/utils/dialogs.ts                     |  6 ++---
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index c37d7485..4d729085 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -22,19 +22,27 @@ msgstr ""
 msgid "All files"
 msgstr ""
 
-#: lib/legacy.ts:135
+#: lib/legacy.ts:155
 msgid "Choose"
 msgstr ""
 
-#: lib/legacy.ts:141
+#: lib/legacy.ts:155
+msgid "Choose {file}"
+msgstr ""
+
+#: lib/legacy.ts:163
 msgid "Copy"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:242
+#: lib/legacy.ts:163
+msgid "Copy to {target}"
+msgstr ""
+
+#: lib/components/FilePicker/FilePicker.vue:249
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:152
+#: lib/components/FilePicker/FilePicker.vue:159
 #: lib/components/FilePicker/FilePickerNavigation.vue:65
 msgid "Favorites"
 msgstr ""
@@ -43,11 +51,11 @@ msgstr ""
 msgid "File name cannot be empty."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:228
+#: lib/components/FilePicker/FilePicker.vue:235
 msgid "Files and folders you mark as favorite will show up here."
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:226
+#: lib/components/FilePicker/FilePicker.vue:233
 msgid "Files and folders you recently modified will show up here."
 msgstr ""
 
@@ -55,15 +63,19 @@ msgstr ""
 msgid "Modified"
 msgstr ""
 
-#: lib/legacy.ts:147
+#: lib/legacy.ts:171
 msgid "Move"
 msgstr ""
 
+#: lib/legacy.ts:171
+msgid "Move to {target}"
+msgstr ""
+
 #: lib/components/FilePicker/FileList.vue:19
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:152
+#: lib/components/FilePicker/FilePicker.vue:159
 #: lib/components/FilePicker/FilePickerNavigation.vue:61
 msgid "Recent"
 msgstr ""
@@ -94,6 +106,6 @@ msgstr ""
 msgid "Unset"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:224
+#: lib/components/FilePicker/FilePicker.vue:231
 msgid "Upload some content or sync with your devices!"
 msgstr ""
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index 661fd576..06696b93 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -115,7 +115,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-	(e: 'close'): void
+	(e: 'close', v?: Node[]): void
 }>()
 
 /**
@@ -143,6 +143,7 @@ const dialogButtons = computed(() => {
 		callback: async () => {
 			const nodes = selectedFiles.value.length === 0 && props.allowPickDirectory ? [await getFile(currentPath.value)] : selectedFiles.value as Node[]
 			button.callback(nodes)
+			emit('close', selectedFiles.value as Node[])
 		},
 	} as IFilePickerButton))
 })
diff --git a/lib/utils/dialogs.ts b/lib/utils/dialogs.ts
index abe7907b..e6343781 100644
--- a/lib/utils/dialogs.ts
+++ b/lib/utils/dialogs.ts
@@ -30,7 +30,7 @@ import Vue from 'vue'
  * @param props Properties to pass to the dialog
  * @param onClose Callback when the dialog is closed
  */
-export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onClose: () => void = () => {}) => {
+export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onClose: (...rest: unknown[]) => void = () => {}) => {
 	const el = document.createElement('div')
 
 	const container: HTMLElement = document.querySelector(props?.container) || document.body
@@ -43,8 +43,8 @@ export const spawnDialog = (dialog: Component | AsyncComponent, props: any, onCl
 			h(dialog, {
 				props,
 				on: {
-					close: () => {
-						onClose()
+					close: (...rest: unknown[]) => {
+						onClose(rest)
 						vue.$destroy()
 					},
 				},