diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue index d41aeda4ec4..22ae9d41c30 100644 --- a/packages/web-app-files/src/components/AppBar/AppBar.vue +++ b/packages/web-app-files/src/components/AppBar/AppBar.vue @@ -75,7 +75,7 @@ @click="showCreateResourceModal" > - New folder… + New folder @@ -94,6 +94,23 @@ +
  • +
    + + + {{ 'New ' + mimetype.name }} + +
    +
  • @@ -110,14 +127,12 @@ import { mapActions, mapGetters, mapState, mapMutations } from 'vuex' import pathUtil from 'path' import isEmpty from 'lodash-es/isEmpty' - import Mixins from '../../mixins' import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions' import MixinRoutes from '../../mixins/routes' import MixinScrollToResource from '../../mixins/filesListScrolling' import { buildResource } from '../../helpers/resources' import { bus } from 'web-pkg/src/instance' - import BatchActions from './SelectedResources/BatchActions.vue' import FileDrop from './Upload/FileDrop.vue' import FileUpload from './Upload/FileUpload.vue' @@ -125,7 +140,6 @@ import FolderUpload from './Upload/FolderUpload.vue' import SizeInfo from './SelectedResources/SizeInfo.vue' import ViewOptions from './ViewOptions.vue' import { DavProperties, DavProperty } from 'web-pkg/src/constants' - export default { components: { BatchActions, @@ -152,7 +166,6 @@ export default { ]), ...mapState(['route']), ...mapState('Files', ['areHiddenFilesShown']), - newButtonTooltip() { if (!this.canUpload) { return this.$gettext('You have no permission to upload!') @@ -169,7 +182,6 @@ export default { } return this.$gettext('Add files or folders') }, - currentPath() { const path = this.$route.params.item || '' if (path.endsWith('/')) { @@ -185,11 +197,9 @@ export default { headers() { if (this.publicPage()) { const password = this.publicLinkPassword - if (password) { return { Authorization: 'Basic ' + Buffer.from('public:' + password).toString('base64') } } - return {} } return { @@ -205,7 +215,6 @@ export default { showActions() { return this.$route.meta.hideFilelistActions !== true }, - showBreadcrumb() { return this.isPublicFilesRoute || this.isPersonalRoute }, @@ -213,7 +222,6 @@ export default { const title = this.$route.meta.title return this.$gettext(title) }, - breadcrumbs() { const pathSegments = this.currentPathSegments const breadcrumbs = [] @@ -225,7 +233,6 @@ export default { breadcrumbs.push({ text: this.$gettext('All files') }) - pathSegments.length < 1 ? (breadcrumbs[0].onClick = () => bus.emit('app.files.list.load', this.$route.params.item)) @@ -238,29 +245,23 @@ export default { to: baseUrl + encodeURIComponent(pathUtil.join(...pathItems)) }) } - for (let i = 0; i < pathSegments.length; i++) { pathItems.push(pathSegments[i]) const to = baseUrl + encodeURIComponent(pathUtil.join(...pathItems)) - if (i === pathSegments.length - 1) { breadcrumbs.push({ text: pathSegments[i], onClick: () => bus.emit('app.files.list.load', this.$route.params.item) }) - continue } - breadcrumbs.push({ text: pathSegments[i], to: i + 1 === pathSegments.length ? null : to }) } - return breadcrumbs }, - hasFreeSpace() { return ( !this.quota || @@ -271,15 +272,12 @@ export default { this.publicPage() ) }, - areDefaultActionsVisible() { return this.selectedFiles.length < 1 }, - isNewBtnDisabled() { return !this.canUpload || !this.hasFreeSpace }, - selectedResourcesAnnouncement() { if (this.selectedFiles.length === 0) { return this.$gettext('No items selected.') @@ -292,18 +290,16 @@ export default { return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length }) } }, - created() { // Storage returns a string so we need to convert it into a boolean const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'true' const areHiddenFilesShownBoolean = areHiddenFilesShown === 'true' - if (areHiddenFilesShownBoolean !== this.areHiddenFilesShown) { this.SET_HIDDEN_FILES_VISIBILITY(areHiddenFilesShownBoolean) } }, - methods: { + ...mapGetters('External', ['getMimeTypes']), ...mapActions('Files', [ 'updateFileProgress', 'removeFilesFromTrashbin', @@ -313,8 +309,12 @@ export default { ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']), ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']), ...mapMutations(['SET_QUOTA']), - - showCreateResourceModal(isFolder = true, ext = 'txt', openAction = null) { + showCreateResourceModal( + isFolder = true, + ext = 'txt', + openAction = null, + createNewFile = false + ) { const defaultName = isFolder ? this.$gettext('New folder') : this.$gettext('New file') + '.' + ext @@ -323,12 +323,10 @@ export default { isFolder ? this.checkNewFolderName(value) : this.checkNewFileName(value) ) } - // Sets action to be executed after creation of the file if (!isFolder) { this.newFileAction = openAction } - const modal = { variation: 'passive', title: isFolder ? this.$gettext('Create a new folder') : this.$gettext('Create a new file'), @@ -341,23 +339,22 @@ export default { ? this.checkNewFolderName(defaultName) : this.checkNewFileName(defaultName), onCancel: this.hideModal, - onConfirm: isFolder ? this.addNewFolder : this.addNewFile, + onConfirm: isFolder + ? this.addNewFolder + : createNewFile + ? this.createNewFile + : this.addNewFile, onInput: checkInputValue } - this.createModal(modal) }, - async addNewFolder(folderName) { if (folderName === '') { return } - this.fileFolderCreationLoading = true - try { const path = pathUtil.join(this.currentPath, folderName) - let resource if (this.isPersonalRoute) { await this.$client.files.createFolder(path) @@ -371,17 +368,14 @@ export default { ) } resource = buildResource(resource) - this.UPSERT_RESOURCE(resource) this.hideModal() - if (this.isPersonalRoute) { this.loadIndicators({ client: this.$client, currentFolder: this.currentFolder.path }) } - setTimeout(() => { this.setFileSelection([resource]) this.scrollToResource(resource) @@ -393,48 +387,36 @@ export default { status: 'danger' }) } - this.fileFolderCreationLoading = false }, - checkNewFolderName(folderName) { if (folderName === '') { return this.$gettext('Folder name cannot be empty') } - if (/[/]/.test(folderName)) { return this.$gettext('Folder name cannot contain "/"') } - if (folderName === '.') { return this.$gettext('Folder name cannot be equal to "."') } - if (folderName === '..') { return this.$gettext('Folder name cannot be equal to ".."') } - if (/\s+$/.test(folderName)) { return this.$gettext('Folder name cannot end with whitespace') } - const exists = this.files.find(file => file.name === folderName) - if (exists) { const translated = this.$gettext('%{name} already exists') return this.$gettextInterpolate(translated, { name: folderName }, true) } - return null }, - async addNewFile(fileName) { if (fileName === '') { return } - this.fileFolderCreationLoading = true - try { const path = pathUtil.join(this.currentPath, fileName) let resource @@ -449,28 +431,21 @@ export default { DavProperties.Default ) } - if (this.newFileAction) { const fileId = resource.fileInfo[DavProperty.FileId] - this.$_fileActions_openEditor(this.newFileAction, path, fileId, EDITOR_MODE_CREATE) this.hideModal() - return } - resource = buildResource(resource) - this.UPSERT_RESOURCE(resource) this.hideModal() - if (this.isPersonalRoute) { this.loadIndicators({ client: this.$client, currentFolder: this.currentFolder.path }) } - setTimeout(() => { this.setFileSelection([resource]) this.scrollToResource(resource) @@ -482,38 +457,69 @@ export default { status: 'danger' }) } - this.fileFolderCreationLoading = false }, - + async createNewFile(fileName) { + try { + const path = pathUtil.join(this.currentPath, fileName) + const url = '/app/new?filename=' + path + console.log(encodeURI(url), path) + const headers = new Headers() + headers.append('Authorization', 'Bearer ' + this.getToken) + headers.append('X-Requested-With', 'XMLHttpRequest') + const response = await fetch(encodeURI(url), { + method: 'POST', + headers + }) + const file = await response.json() + let resource + if (this.isPersonalRoute) { + await this.$client.files.putFileContents(path, '') + resource = await this.$client.files.fileInfo(path, DavProperties.Default) + } + resource = buildResource(resource) + this.UPSERT_RESOURCE(resource) + this.$_fileActions_triggerDefaultAction(resource) + this.hideModal() + if (this.isPersonalRoute) { + this.loadIndicators({ + client: this.$client, + currentFolder: this.currentFolder.path + }) + } + setTimeout(() => { + this.setFileSelection([resource]) + this.scrollToResource(resource) + }) + } catch (error) { + this.showMessage({ + title: this.$gettext('Creating file failed…'), + desc: error, + status: 'danger' + }) + } + }, checkNewFileName(fileName) { if (fileName === '') { return this.$gettext('File name cannot be empty') } - if (/[/]/.test(fileName)) { return this.$gettext('File name cannot contain "/"') } - if (fileName === '.') { return this.$gettext('File name cannot be equal to "."') } - if (fileName === '..') { return this.$gettext('File name cannot be equal to ".."') } - if (/\s+$/.test(fileName)) { return this.$gettext('File name cannot end with whitespace') } - const exists = this.files.find(file => file.name === fileName) - if (exists) { const translated = this.$gettext('%{name} already exists') return this.$gettextInterpolate(translated, { name: fileName }, true) } - return null }, async onFileSuccess(event, file) { @@ -521,9 +527,7 @@ export default { if (file.name) { file = file.name } - await this.$nextTick() - const path = pathUtil.join(this.currentPath, file) let resource = this.isPersonalRoute ? await this.$client.files.fileInfo(path, DavProperties.Default) @@ -532,10 +536,8 @@ export default { this.publicLinkPassword, DavProperties.Default ) - resource = buildResource(resource) this.UPSERT_RESOURCE(resource) - if (this.isPersonalRoute) { this.loadIndicators({ client: this.$client, @@ -543,15 +545,12 @@ export default { encodePath: this.encodePath }) } - const user = await this.$client.users.getUser(this.user.id) - this.SET_QUOTA(user.quota) } catch (error) { console.error(error) } }, - onFileError(error) { this.showMessage({ title: this.$gettext('File upload failed…'), @@ -559,7 +558,6 @@ export default { status: 'danger' }) }, - onFileProgress(progress) { this.updateFileProgress(progress) } @@ -572,7 +570,6 @@ export default { background-color: var(--oc-color-background-default); box-sizing: border-box; z-index: 2; - &-actions { align-items: center; display: flex;