Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>pull/44834/head
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' | import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' | ||||
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' | import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' | ||||
import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue' | import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue' | ||||
import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue' | |||||
import Vue from 'vue' | |||||
import Vue, { defineComponent } from 'vue' | |||||
import CustomElementRender from '../CustomElementRender.vue' | import CustomElementRender from '../CustomElementRender.vue' | ||||
import logger from '../../logger.js' | import logger from '../../logger.js' | ||||
// The registered actions list | // The registered actions list | ||||
const actions = getFileActions() | const actions = getFileActions() | ||||
export default Vue.extend({ | |||||
export default defineComponent({ | |||||
name: 'FileEntryActions', | name: 'FileEntryActions', | ||||
components: { | components: { | ||||
ArrowLeftIcon, | ArrowLeftIcon, | ||||
ChevronRightIcon, | |||||
CustomElementRender, | CustomElementRender, | ||||
NcActionButton, | NcActionButton, | ||||
NcActions, | NcActions, | ||||
// Focus the previous menu action button | // Focus the previous menu action button | ||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
// Focus the action button | // Focus the action button | ||||
const menuAction = this.$refs[`action-${action.id}`][0] | |||||
const menuAction = this.$refs[`action-${action.id}`]?.[0] | |||||
if (menuAction) { | if (menuAction) { | ||||
menuAction.$el.querySelector('button')?.focus() | menuAction.$el.querySelector('button')?.focus() | ||||
} | } |
owner: getCurrentUser()?.uid || null, | owner: getCurrentUser()?.uid || null, | ||||
permissions: Permission.ALL, | permissions: Permission.ALL, | ||||
root: context?.root || '/files/' + getCurrentUser()?.uid, | root: context?.root || '/files/' + getCurrentUser()?.uid, | ||||
// Include mount-type from parent folder as this is inherited | |||||
attributes: { | |||||
'mount-type': context.attributes?.['mount-type'], | |||||
'owner-id': context.attributes?.['owner-id'], | |||||
'owner-display-name': context.attributes?.['owner-display-name'], | |||||
}, | |||||
}) | }) | ||||
showSuccess(t('files', 'Created new folder "{name}"', { name: basename(source) })) | showSuccess(t('files', 'Created new folder "{name}"', { name: basename(source) })) |
const TemplatePickerVue = defineAsyncComponent(() => import('../views/TemplatePicker.vue')) | const TemplatePickerVue = defineAsyncComponent(() => import('../views/TemplatePicker.vue')) | ||||
let TemplatePicker: ComponentInstance & { open: (n: string, t: TemplateFile) => void } | null = null | let TemplatePicker: ComponentInstance & { open: (n: string, t: TemplateFile) => void } | null = null | ||||
const getTemplatePicker = async () => { | |||||
const getTemplatePicker = async (context: Folder) => { | |||||
if (TemplatePicker === null) { | if (TemplatePicker === null) { | ||||
// Create document root | // Create document root | ||||
const mountingPoint = document.createElement('div') | const mountingPoint = document.createElement('div') | ||||
// Init vue app | // Init vue app | ||||
TemplatePicker = new Vue({ | TemplatePicker = new Vue({ | ||||
render: (h) => h(TemplatePickerVue, { ref: 'picker' }), | |||||
render: (h) => h( | |||||
TemplatePickerVue, | |||||
{ | |||||
ref: 'picker', | |||||
props: { | |||||
parent: context, | |||||
}, | |||||
}, | |||||
), | |||||
methods: { open(...args) { this.$refs.picker.open(...args) } }, | methods: { open(...args) { this.$refs.picker.open(...args) } }, | ||||
el: mountingPoint, | el: mountingPoint, | ||||
}) | }) | ||||
}, | }, | ||||
order: 11, | order: 11, | ||||
async handler(context: Folder, content: Node[]) { | async handler(context: Folder, content: Node[]) { | ||||
const templatePicker = getTemplatePicker() | |||||
const templatePicker = getTemplatePicker(context) | |||||
const name = await newNodeName(`${provider.label}${provider.extension}`, content, { | const name = await newNodeName(`${provider.label}${provider.extension}`, content, { | ||||
label: t('files', 'Filename'), | label: t('files', 'Filename'), | ||||
name: provider.label, | name: provider.label, |
TemplatePreview, | TemplatePreview, | ||||
}, | }, | ||||
props: { | |||||
/** | |||||
* The parent folder where to create the node | |||||
*/ | |||||
parent: { | |||||
type: Object, | |||||
default: () => null, | |||||
}, | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
// Check empty template by default | // Check empty template by default | ||||
nameWithoutExt() { | nameWithoutExt() { | ||||
// Strip extension from name if defined | // Strip extension from name if defined | ||||
return !this.extension | return !this.extension | ||||
? this.name | |||||
? this.name! | |||||
: this.name!.slice(0, 0 - this.extension.length) | : this.name!.slice(0, 0 - this.extension.length) | ||||
}, | }, | ||||
size: fileInfo.size, | size: fileInfo.size, | ||||
permissions: fileInfo.permissions, | permissions: fileInfo.permissions, | ||||
attributes: { | attributes: { | ||||
// Inherit some attributes from parent folder like the mount type and real owner | |||||
'mount-type': this.parent?.attributes?.['mount-type'], | |||||
'owner-id': this.parent?.attributes?.['owner-id'], | |||||
'owner-display-name': this.parent?.attributes?.['owner-display-name'], | |||||
...fileInfo, | ...fileInfo, | ||||
'has-preview': fileInfo.hasPreview, | 'has-preview': fileInfo.hasPreview, | ||||
}, | }, |