add creating file function for available mimetypes

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -75,7 +75,7 @@
  @click="showCreateResourceModal"
  >
  <oc-icon name="create_new_folder" />
- <translate>New folder…</translate>
+ <translate>New folder</translate>
  </oc-button>
  </div>
  </li>
@@ -94,6 +94,23 @@
  </oc-button>
  </div>
  </li>
+ <li
+ v-for="(mimetype, key) in getMimeTypes()"
+ v-if="mimetype.allow_creation === true"
+ :key="key"
+ >
+ <div>
+ <oc-button
+ appearance="raw"
+ justify-content="left"
+ :class="['uk-width-1-1']"
+ @click="showCreateResourceModal(false, mimetype.ext, false, true)"
+ >
+ <oc-icon :name="mimetype.icon || 'file'" />
+ <span>{{ 'New ' + mimetype.name }}</span>
+ </oc-button>
+ </div>
+ </li>
  </ul>
  </oc-drop>
  </template>
@@ -135,6 +152,7 @@ export default {
  SizeInfo,
  ViewOptions
  },
+
  mixins: [Mixins, MixinFileActions, MixinRoutes, MixinScrollToResource],
  data: () => ({
  newFileAction: null,
@@ -152,7 +170,6 @@ export default {
  ]),
  ...mapState(['route']),
  ...mapState('Files', ['areHiddenFilesShown']),
-
  newButtonTooltip() {
  if (!this.canUpload) {
  return this.$gettext('You have no permission to upload!')
@@ -177,6 +194,7 @@ export default {
  }
  return path + '/'
  },
+
  currentPathSegments() {
  // remove potential leading and trailing slash from current path (so that the resulting array doesn't start with an empty string)
  const s = this.currentPath.replace(/^\/+/, '').replace(/\/+$/, '')
@@ -196,19 +214,22 @@ export default {
  Authorization: 'Bearer ' + this.getToken
  }
  },
+
  canUpload() {
  if (this.currentFolder === null) {
  return false
  }
  return this.currentFolder.canUpload()
  },
+
  showActions() {
  return this.$route.meta.hideFilelistActions !== true
  },
 
  showBreadcrumb() {
  return this.isPublicFilesRoute || this.isPersonalRoute
  },
+
  pageTitle() {
  const title = this.$route.meta.title
  return this.$gettext(title)
@@ -297,13 +318,12 @@ export default {
  // 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',
@@ -314,7 +334,12 @@ export default {
  ...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
@@ -341,10 +366,13 @@ 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)
  },
 
@@ -458,7 +486,6 @@ export default {
 
  return
  }
-
  resource = buildResource(resource)
 
  this.UPSERT_RESOURCE(resource)
@@ -486,6 +513,47 @@ export default {
  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')
@@ -506,7 +574,6 @@ export default {
  if (/\s+$/.test(fileName)) {
  return this.$gettext('File name cannot end with whitespace')
  }
-
  const exists = this.files.find(file => file.name === fileName)
 
  if (exists) {
@@ -516,6 +583,7 @@ export default {
 
  return null
  },
+
  async onFileSuccess(event, file) {
  try {
  if (file.name) {