|
4 | 4 | --> |
5 | 5 |
|
6 | 6 | <template> |
7 | | - <div :id="containerId"> |
8 | | - <FilePicker v-bind="filepickerOptions" @close="onClose" /> |
9 | | - </div> |
| 7 | + <div :id="containerId" /> |
10 | 8 | </template> |
11 | 9 |
|
12 | | -<script lang="ts"> |
| 10 | +<script setup lang="ts"> |
13 | 11 | import type { IFilePickerButton } from '@nextcloud/dialogs' |
14 | 12 | import type { Node as NcNode } from '@nextcloud/files' |
15 | 13 |
|
16 | | -import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js' |
17 | | -import { translate as t } from '@nextcloud/l10n' |
| 14 | +import { FilePickerBuilder } from '@nextcloud/dialogs' |
| 15 | +import { t } from '@nextcloud/l10n' |
18 | 16 | import { generateUrl } from '@nextcloud/router' |
19 | | -import { defineComponent } from 'vue' |
| 17 | +import { onMounted } from 'vue' |
| 18 | +import logger from '../logger.ts' |
20 | 19 |
|
21 | | -export default defineComponent({ |
22 | | - name: 'FileReferencePickerElement', |
23 | | - components: { |
24 | | - FilePicker, |
25 | | - }, |
| 20 | +defineProps<{ |
| 21 | + providerId: string |
| 22 | + accessible: boolean |
| 23 | +}>() |
26 | 24 |
|
27 | | - props: { |
28 | | - providerId: { |
29 | | - type: String, |
30 | | - required: true, |
31 | | - }, |
| 25 | +const emit = defineEmits<{ |
| 26 | + (e: 'submit', url: string): void |
| 27 | + (e: 'cancel'): void |
| 28 | +}>() |
32 | 29 |
|
33 | | - accessible: { |
34 | | - type: Boolean, |
35 | | - default: false, |
36 | | - }, |
37 | | - }, |
| 30 | +const containerId = `filepicker-${Math.random().toString(36).slice(7)}` |
38 | 31 |
|
39 | | - computed: { |
40 | | - containerId() { |
41 | | - return `filepicker-${Math.random().toString(36).slice(7)}` |
42 | | - }, |
| 32 | +const filePicker = new FilePickerBuilder(t('files', 'Select file or folder to link to')) |
| 33 | + .allowDirectories(true) |
| 34 | + .setButtonFactory(buttonFactory) |
| 35 | + .setContainer(`#${containerId}`) |
| 36 | + .setMultiSelect(false) |
| 37 | + .build() |
43 | 38 |
|
44 | | - filepickerOptions() { |
45 | | - return { |
46 | | - allowPickDirectory: true, |
47 | | - buttons: this.buttonFactory, |
48 | | - container: `#${this.containerId}`, |
49 | | - multiselect: false, |
50 | | - name: t('files', 'Select file or folder to link to'), |
51 | | - } |
52 | | - }, |
53 | | - }, |
| 39 | +onMounted(async () => { |
| 40 | + try { |
| 41 | + const [node] = await filePicker.pickNodes() |
| 42 | + onSubmit(node) |
| 43 | + } catch (error) { |
| 44 | + logger.debug('Aborted picking nodes:', { error }) |
| 45 | + emit('cancel') |
| 46 | + } |
| 47 | +}) |
54 | 48 |
|
55 | | - methods: { |
56 | | - t, |
| 49 | +/** |
| 50 | + * Get buttons for the file picker dialog |
| 51 | + * |
| 52 | + * @param selected - currently selected nodes |
| 53 | + */ |
| 54 | +function buttonFactory(selected: NcNode[]): IFilePickerButton[] { |
| 55 | + const buttons = [] as IFilePickerButton[] |
| 56 | + const node = selected[0] |
| 57 | + if (node === undefined) { |
| 58 | + return [] |
| 59 | + } |
57 | 60 |
|
58 | | - buttonFactory(selected: NcNode[]): IFilePickerButton[] { |
59 | | - const buttons = [] as IFilePickerButton[] |
60 | | - if (selected.length === 0) { |
61 | | - return [] |
62 | | - } |
63 | | - const node = selected.at(0) |
64 | | - if (node.path === '/') { |
65 | | - return [] // Do not allow selecting the users root folder |
66 | | - } |
67 | | - buttons.push({ |
68 | | - label: t('files', 'Choose {file}', { file: node.displayname }), |
69 | | - type: 'primary', |
70 | | - callback: this.onClose, |
71 | | - }) |
72 | | - return buttons |
73 | | - }, |
| 61 | + if (node.path === '/') { |
| 62 | + return [] // Do not allow selecting the users root folder |
| 63 | + } |
74 | 64 |
|
75 | | - onClose(nodes?: NcNode[]) { |
76 | | - if (nodes === undefined || nodes.length === 0) { |
77 | | - this.$emit('cancel') |
78 | | - } else { |
79 | | - this.onSubmit(nodes[0]) |
80 | | - } |
81 | | - }, |
| 65 | + buttons.push({ |
| 66 | + label: t('files', 'Choose {file}', { file: node.displayname }), |
| 67 | + variant: 'primary', |
| 68 | + callback: () => {}, // handled by the pickNodes method |
| 69 | + }) |
| 70 | + return buttons |
| 71 | +} |
82 | 72 |
|
83 | | - onSubmit(node: NcNode) { |
84 | | - const url = new URL(window.location.href) |
85 | | - url.pathname = generateUrl('/f/{fileId}', { fileId: node.fileid! }) |
86 | | - url.search = '' |
87 | | - this.$emit('submit', url.href) |
88 | | - }, |
89 | | - }, |
90 | | -}) |
| 73 | +/** |
| 74 | + * @param node - selected node |
| 75 | + */ |
| 76 | +function onSubmit(node: NcNode) { |
| 77 | + const url = new URL(window.location.href) |
| 78 | + url.pathname = generateUrl('/f/{fileId}', { fileId: node.fileid! }) |
| 79 | + url.search = '' |
| 80 | + emit('submit', url.href) |
| 81 | +} |
91 | 82 | </script> |
0 commit comments