Use the Vue store for spaces (#6427)

Use the Vue store for spaces
owncloud · Feb 14, 2022 · 8b6b445 · 8b6b445
1 parent 35275b9
commit 8b6b445
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 83 deletions.
diff --git a/changelog/unreleased/enhancement-spaces-use-store b/changelog/unreleased/enhancement-spaces-use-store
@@ -0,0 +1,5 @@
+Enhancement: Use the Vue store for spaces
+
+Using the store for spaces integrates them seamlessly in our ecosystem and makes it easier to develop spaces even further. E.g. the properties of a space can now be altered without fetching all spaces again. This was achieved by introducing a "buildSpace" method, that transforms a space into a more generic resource object (just like regular files or shares).
+
+https://github.com/owncloud/web/pull/6427
diff --git a/packages/web-app-files/src/helpers/resources.js b/packages/web-app-files/src/helpers/resources.js
@@ -102,6 +102,80 @@ export function buildResource(resource) {
   }
 }
 
+export function buildSpace(space) {
+  let spaceImageData, spaceReadmeData, spacePermissions
+  let disabled = false
+
+  if (space.special) {
+    spaceImageData = space.special.find((el) => el.specialFolder.name === 'image')
+    spaceReadmeData = space.special.find((el) => el.specialFolder.name === 'readme')
+  }
+
+  if (space.root) {
+    spacePermissions = space.root.permissions
+
+    if (space.root.deleted) {
+      disabled = space.root.deleted?.state === 'trashed'
+    }
+  }
+
+  return {
+    id: space.id,
+    fileId: '',
+    mimeType: '',
+    name: space.name,
+    description: space.description,
+    extension: '',
+    path: '',
+    webDavPath: '',
+    type: 'space',
+    isFolder: true,
+    mdate: space.lastModifiedDateTime,
+    size: '',
+    indicators: [],
+    permissions: '',
+    starred: false,
+    etag: '',
+    sharePermissions: '',
+    shareTypes: (function () {
+      return []
+    })(),
+    privateLink: '',
+    downloadURL: '',
+    ownerDisplayName: '',
+    ownerId: '',
+    disabled,
+    spaceQuota: space.quota,
+    spacePermissions,
+    spaceImageData,
+    spaceReadmeData,
+    canUpload: function () {
+      return true
+    },
+    canDownload: function () {
+      return true
+    },
+    canBeDeleted: function () {
+      return true
+    },
+    canRename: function () {
+      return true
+    },
+    canShare: function () {
+      return true
+    },
+    canCreate: function () {
+      return true
+    },
+    isMounted: function () {
+      return true
+    },
+    isReceivedShare: function () {
+      return false
+    }
+  }
+}
+
 export function buildWebDavFilesPath(userId, path) {
   return `/files/${userId}/${path}`
 }

diff --git a/packages/web-app-files/src/mixins/spaces/actions/delete.js b/packages/web-app-files/src/mixins/spaces/actions/delete.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
 export default {
@@ -19,7 +19,7 @@ export default {
               return false
             }
 
-            return spaces[0].root?.deleted?.state === 'trashed'
+            return spaces[0].disabled
           },
           componentType: 'oc-button',
           class: 'oc-files-actions-delete-trigger'
@@ -35,6 +35,7 @@ export default {
       'showMessage',
       'toggleModalConfirmButton'
     ]),
+    ...mapMutations('Files', ['REMOVE_FILE']),
 
     $_delete_trigger({ spaces }) {
       if (spaces.length !== 1) {
@@ -66,7 +67,7 @@ export default {
         })
         .then(() => {
           this.hideModal()
-          this.loadSpacesTask.perform(this)
+          this.REMOVE_FILE({ id })
         })
         .catch((error) => {
           this.showMessage({

diff --git a/packages/web-app-files/src/mixins/spaces/actions/disable.js b/packages/web-app-files/src/mixins/spaces/actions/disable.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
 export default {
@@ -19,7 +19,7 @@ export default {
               return false
             }
 
-            return spaces[0].root?.deleted?.state !== 'trashed'
+            return !spaces[0].disabled
           },
           componentType: 'oc-button',
           class: 'oc-files-actions-disable-trigger'
@@ -35,6 +35,7 @@ export default {
       'showMessage',
       'toggleModalConfirmButton'
     ]),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
 
     $_disable_trigger({ spaces }) {
       if (spaces.length !== 1) {
@@ -62,7 +63,11 @@ export default {
         .deleteDrive(id)
         .then(() => {
           this.hideModal()
-          this.loadSpacesTask.perform(this)
+          this.UPDATE_RESOURCE_FIELD({
+            id,
+            field: 'disabled',
+            value: true
+          })
         })
         .catch((error) => {
           this.showMessage({

diff --git a/packages/web-app-files/src/mixins/spaces/actions/editDescription.js b/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
 export default {
@@ -29,6 +29,7 @@ export default {
       'showMessage',
       'toggleModalConfirmButton'
     ]),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
 
     $_editDescription_trigger({ spaces }) {
       if (spaces.length !== 1) {
@@ -57,7 +58,11 @@ export default {
         .updateDrive(id, { description }, {})
         .then(() => {
           this.hideModal()
-          this.loadSpacesTask.perform(this)
+          this.UPDATE_RESOURCE_FIELD({
+            id,
+            field: 'description',
+            value: description
+          })
         })
         .catch((error) => {
           this.showMessage({

diff --git a/packages/web-app-files/src/mixins/spaces/actions/rename.js b/packages/web-app-files/src/mixins/spaces/actions/rename.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
 export default {
@@ -29,6 +29,7 @@ export default {
       'showMessage',
       'toggleModalConfirmButton'
     ]),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
 
     $_rename_trigger({ spaces }) {
       if (spaces.length !== 1) {
@@ -64,7 +65,11 @@ export default {
         .updateDrive(id, { name }, {})
         .then(() => {
           this.hideModal()
-          this.loadSpacesTask.perform(this)
+          this.UPDATE_RESOURCE_FIELD({
+            id,
+            field: 'name',
+            value: name
+          })
         })
         .catch((error) => {
           this.showMessage({

diff --git a/packages/web-app-files/src/mixins/spaces/actions/restore.js b/packages/web-app-files/src/mixins/spaces/actions/restore.js
@@ -1,4 +1,4 @@
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
 export default {
@@ -19,7 +19,7 @@ export default {
               return false
             }
 
-            return spaces[0].root?.deleted?.state === 'trashed'
+            return spaces[0].disabled
           },
           componentType: 'oc-button',
           class: 'oc-files-actions-restore-trigger'
@@ -35,6 +35,7 @@ export default {
       'showMessage',
       'toggleModalConfirmButton'
     ]),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
 
     $_restore_trigger({ spaces }) {
       if (spaces.length !== 1) {
@@ -70,7 +71,11 @@ export default {
         )
         .then(() => {
           this.hideModal()
-          this.loadSpacesTask.perform(this)
+          this.UPDATE_RESOURCE_FIELD({
+            id,
+            field: 'disabled',
+            value: false
+          })
         })
         .catch((error) => {
           this.showMessage({

diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-overview">
-    <list-loader v-if="loadSpaceTask.isRunning" />
+    <list-loader v-if="loadFilesListTask.isRunning" />
     <template v-else>
       <not-found-message v-if="!space.id" class="space-not-found oc-height-1-1" />
       <div
@@ -77,7 +77,7 @@ import { useStore, useRouter, useRouteQuery } from 'web-pkg/src/composables'
 import marked from 'marked'
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import { bus } from 'web-pkg/src/instance'
-import { buildResource, buildWebDavSpacesPath } from '../../helpers/resources'
+import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../helpers/resources'
 import ResourceTable, { determineSortFields } from '../../components/FilesList/ResourceTable.vue'
 import { createLocationSpaces } from '../../router'
 import { usePagination, useSort } from '../../composables'
@@ -136,19 +136,13 @@ export default {
       sortBy
     })
 
-    const loadSpaceTask = useTask(function* () {
-      const response = yield graphClient.drives.getDrive(spaceId)
-      space.value = response.data || {}
-    })
     const loadReadmeTask = useTask(function* (signal, ref) {
-      const markdownEntry = space.value?.special?.find((el) => el?.specialFolder?.name === 'readme')
-
-      if (!markdownEntry) {
+      if (!space.value.spaceReadmeData) {
         return
       }
 
       const fileContents = yield ref.$client.files.getFileContents(
-        buildWebDavSpacesPath(space.value.id, markdownEntry.name)
+        buildWebDavSpacesPath(space.value.id, space.value.spaceReadmeData.name)
       )
 
       if (ref.markdownResizeObserver) {
@@ -162,14 +156,12 @@ export default {
       }
     })
     const loadImageTask = useTask(function* (signal, ref) {
-      const imageEntry = space.value?.special?.find((el) => el?.specialFolder?.name === 'image')
-
-      if (!imageEntry) {
+      if (!space.value.spaceImageData) {
         return
       }
 
       const fileContents = yield ref.$client.files.getFileContents(
-        buildWebDavSpacesPath(space.value.id, imageEntry.name),
+        buildWebDavSpacesPath(space.value.id, space.value.spaceImageData.name),
         {
           responseType: 'arrayBuffer'
         }
@@ -180,11 +172,30 @@ export default {
 
     const loadFilesListTask = useTask(function* (signal, ref, sameRoute, path = null) {
       ref.CLEAR_CURRENT_FILES_LIST()
-      const response = yield ref.$client.files.list(
+      const graphResponse = yield graphClient.drives.getDrive(spaceId)
+
+      if (!graphResponse.data) {
+        return
+      }
+
+      space.value = buildSpace(graphResponse.data)
+
+      const webDavResponse = yield ref.$client.files.list(
         buildWebDavSpacesPath(ref.$route.params.spaceId, path || '')
       )
 
-      const resources = response.map(buildResource)
+      let resources = []
+      if (!path) {
+        // space front page -> use space as current folder
+        resources.push(space.value)
+
+        const webDavResources = webDavResponse.map(buildResource)
+        webDavResources.shift() // Remove webdav entry for the space itself
+        resources = resources.concat(webDavResources)
+      } else {
+        resources = webDavResponse.map(buildResource)
+      }
+
       const currentFolder = resources.shift()
 
       ref.LOAD_FILES({
@@ -193,23 +204,22 @@ export default {
       })
       ref.loadIndicators({
         client: ref.$client,
-        currentFolder: currentFolder.path
+        currentFolder: currentFolder?.path
       })
-
-      ref.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
-      ref.scrollToResourceFromRoute()
     })
 
     const loadResourcesTask = useTask(function* (signal, ref, sameRoute, path) {
-      yield loadSpaceTask.perform(ref)
-      loadReadmeTask.perform(ref)
-      loadImageTask.perform(ref)
-      loadFilesListTask.perform(ref, sameRoute, path)
+      yield loadFilesListTask.perform(ref, sameRoute, path)
+
+      // Only load when in space root, no need to fetch in subdirectories
+      if (!path) {
+        loadReadmeTask.perform(ref)
+        loadImageTask.perform(ref)
+      }
     })
 
     return {
       space,
-      loadSpaceTask,
       loadImageTask,
       loadReadmeTask,
       markdownContent,
@@ -276,9 +286,8 @@ export default {
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
 
-        if (!sameRoute || !sameItem) {
-          this.loadFilesListTask.perform(this, sameRoute, to.params.item)
-          this.loadReadmeTask.perform(this)
+        if ((!sameRoute || !sameItem) && from) {
+          this.loadResourcesTask.perform(this, sameRoute, to.params.item)
         }
       },
       immediate: true