From 5749fb089cbbd8345c95804c497366ef3f9bf2d7 Mon Sep 17 00:00:00 2001 From: elizavetaRa Date: Tue, 9 Nov 2021 16:42:29 +0100 Subject: [PATCH] new file function for allowed mimetypes --- .../src/components/AppBar/AppBar.vue | 143 +++++++++--------- 1 file changed, 71 insertions(+), 72 deletions(-) diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue index 4c83108e9a4..76698bed6be 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,20 @@ +
  • +
    + + + {{ 'New ' + mimetype.name }} + New %{name} + +
    +
    • @@ -110,14 +124,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 +137,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, @@ -142,6 +153,7 @@ export default { fileFolderCreationLoading: false }), computed: { + ...mapGetters('External', ['getMimeTypes']), ...mapGetters(['getToken', 'configuration', 'newFileHandlers', 'quota', 'user']), ...mapGetters('Files', [ 'files', @@ -153,6 +165,9 @@ export default { ...mapState(['route']), ...mapState('Files', ['areHiddenFilesShown']), + mimetypesAllowedForCreation() { + return this.getMimeTypes.filter((mimetype) => mimetype.allow_creation) + }, newButtonTooltip() { if (!this.canUpload) { return this.$gettext('You have no permission to upload!') @@ -169,7 +184,6 @@ export default { } return this.$gettext('Add files or folders') }, - currentPath() { const path = this.$route.params.item || '' if (path.endsWith('/')) { @@ -185,11 +199,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 +217,6 @@ export default { showActions() { return this.$route.meta.hideFilelistActions !== true }, - showBreadcrumb() { return this.isPublicFilesRoute || this.isPersonalRoute }, @@ -213,7 +224,6 @@ export default { const title = this.$route.meta.title return this.$gettext(title) }, - breadcrumbs() { const pathSegments = this.currentPathSegments const breadcrumbs = [] @@ -225,7 +235,6 @@ export default { breadcrumbs.push({ text: this.$gettext('All files') }) - pathSegments.length < 1 ? (breadcrumbs[0].onClick = () => bus.publish('app.files.list.load', this.$route.params.item)) @@ -238,29 +247,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.publish('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 +274,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 +292,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 +311,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, + generateNewFile = false + ) { const defaultName = isFolder ? this.$gettext('New folder') : this.$gettext('New file') + '.' + ext @@ -323,12 +325,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 +341,22 @@ export default { ? this.checkNewFolderName(defaultName) : this.checkNewFileName(defaultName), onCancel: this.hideModal, - onConfirm: isFolder ? this.addNewFolder : this.addNewFile, + onConfirm: isFolder + ? this.addNewFolder + : generateNewFile + ? this.generateNewFile + : 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 +370,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 +389,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 +433,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 +459,69 @@ export default { status: 'danger' }) } - this.fileFolderCreationLoading = false }, - + async generateNewFile(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 + }) + 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 +529,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 +538,8 @@ export default { this.publicLinkPassword, DavProperties.Default ) - resource = buildResource(resource) this.UPSERT_RESOURCE(resource) - if (this.isPersonalRoute) { this.loadIndicators({ client: this.$client, @@ -543,15 +547,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 +560,6 @@ export default { status: 'danger' }) }, - onFileProgress(progress) { this.updateFileProgress(progress) } @@ -572,7 +572,6 @@ export default { background-color: var(--oc-color-background-default); box-sizing: border-box; z-index: 2; - &-actions { align-items: center; display: flex;