Scroll to new folder on creation

cernbox · Sep 6, 2022 · 460b98c · 460b98c
1 parent 2744ffc
commit 460b98c
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 68 deletions.
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -131,6 +131,7 @@ import pathUtil from 'path'
 import filesize from 'filesize'
 
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
+import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 import { buildResource, buildWebDavFilesPath } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import { useActiveLocation } from '../../composables'
@@ -161,7 +162,7 @@ export default defineComponent({
   components: {
     ResourceUpload
   },
-  mixins: [MixinFileActions],
+  mixins: [MixinFileActions, MixinFilesListScrolling],
   props: {
     limitedScreenSpace: {
       type: Boolean,
@@ -413,70 +414,82 @@ export default defineComponent({
       this.createModal(modal)
     },
 
-    async addNewFolder(folderName) {
-      if (folderName === '') {
-        return
-      }
+    addNewFolder(folderName) {
+      const addNewFolderInner = async (folderName) => {
+        if (folderName === '') {
+          return
+        }
 
-      this.fileFolderCreationLoading = true
+        this.fileFolderCreationLoading = true
 
-      try {
-        let path = pathUtil.join(this.currentPath, folderName)
-        let resource
+        try {
+          let path = pathUtil.join(this.currentPath, folderName)
+          let resource
 
-        if (this.isPersonalLocation) {
-          if (this.hasShareJail) {
-            path = buildWebDavSpacesPath(this.personalDriveId, path || '')
+          if (this.isPersonalLocation) {
+            if (this.hasShareJail) {
+              path = buildWebDavSpacesPath(this.personalDriveId, path || '')
+            } else {
+              path = buildWebDavFilesPath(this.user.id, path)
+            }
+            await this.$client.files.createFolder(path)
+            resource = await this.$client.files.fileInfo(path, DavProperties.Default)
+          } else if (this.isSpacesProjectLocation) {
+            path = buildWebDavSpacesPath(this.$route.params.storageId, path)
+            await this.$client.files.createFolder(path)
+            resource = await this.$client.files.fileInfo(path, DavProperties.Default)
+          } else if (this.isSpacesShareLocation) {
+            path = buildWebDavSpacesPath([SHARE_JAIL_ID, this.$route.query.shareId].join('!'), path)
+            await this.$client.files.createFolder(path)
+            resource = await this.$client.files.fileInfo(path, DavProperties.Default)
           } else {
-            path = buildWebDavFilesPath(this.user.id, path)
+            await this.$client.publicFiles.createFolder(path, null, this.publicLinkPassword)
+            resource = await this.$client.publicFiles.getFileInfo(
+              path,
+              this.publicLinkPassword,
+              DavProperties.PublicLink
+            )
           }
-          await this.$client.files.createFolder(path)
-          resource = await this.$client.files.fileInfo(path, DavProperties.Default)
-        } else if (this.isSpacesProjectLocation) {
-          path = buildWebDavSpacesPath(this.$route.params.storageId, path)
-          await this.$client.files.createFolder(path)
-          resource = await this.$client.files.fileInfo(path, DavProperties.Default)
-        } else if (this.isSpacesShareLocation) {
-          path = buildWebDavSpacesPath([SHARE_JAIL_ID, this.$route.query.shareId].join('!'), path)
-          await this.$client.files.createFolder(path)
-          resource = await this.$client.files.fileInfo(path, DavProperties.Default)
-        } else {
-          await this.$client.publicFiles.createFolder(path, null, this.publicLinkPassword)
-          resource = await this.$client.publicFiles.getFileInfo(
-            path,
-            this.publicLinkPassword,
-            DavProperties.PublicLink
-          )
-        }
-        resource = buildResource(resource)
+          resource = buildResource(resource)
 
-        this.UPSERT_RESOURCE(resource)
-        this.hideModal()
+          this.UPSERT_RESOURCE(resource)
+          this.hideModal()
 
-        if (this.isPersonalLocation) {
-          this.loadIndicators({
-            client: this.$client,
-            currentFolder: this.currentFolder.path
+          if (this.isPersonalLocation) {
+            this.loadIndicators({
+              client: this.$client,
+              currentFolder: this.currentFolder.path
+            })
+          }
+
+          this.showMessage({
+            title: this.$gettextInterpolate(
+              this.$gettext('"%{folderName}" was created successfully'),
+              {
+                folderName
+              }
+            )
+          })
+
+          return resource
+        } catch (error) {
+          console.error(error)
+          this.showMessage({
+            title: this.$gettext('Failed to create folder'),
+            status: 'danger'
           })
         }
 
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$gettext('"%{folderName}" was created successfully'),
-            {
-              folderName
-            }
-          )
-        })
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettext('Failed to create folder'),
-          status: 'danger'
-        })
+        this.fileFolderCreationLoading = false
       }
 
-      this.fileFolderCreationLoading = false
+      addNewFolderInner(folderName)
+        .then((r) =>
+          this.scrollToResource({
+            id: r.id
+          })
+        )
+        .catch((error) => console.error(error))
     },
 
     checkNewFolderName(folderName) {

diff --git a/packages/web-app-files/src/mixins/filesListScrolling.js b/packages/web-app-files/src/mixins/filesListScrolling.js
@@ -3,21 +3,8 @@ export default {
     scrollToResource(resource) {
       const resourceElement = document.querySelectorAll(`[data-item-id='${resource.id}']`)[0]
 
-      // bottom reached
-      if (resourceElement.getBoundingClientRect().bottom > window.innerHeight) {
-        resourceElement.scrollIntoView(false)
-        return
-      }
-
-      const topbarElement = document.getElementsByClassName('files-topbar')[0]
-      // topbar height + th height + height of one row = offset needed when scrolling top
-      const topOffset = topbarElement.offsetHeight + resourceElement.offsetHeight * 2
-
-      // top reached
-      if (resourceElement.getBoundingClientRect().top < topOffset) {
-        const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
-        fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
-      }
+      // scroll to the middle of page
+      resourceElement.scrollIntoView({ block: 'center' })
     }
   }
 }