Include spaces in the list info

changelog/unreleased/bugfix-include-spaces-in-list-info

@@ -0,0 +1,6 @@
+Bugfix: Include spaces in the list info
+
+Spaces have been included in the list info below file lists that support displaying spaces.
+
+https://github.com/owncloud/web/pull/7926
+https://github.com/owncloud/web/issues/7924

packages/web-app-files/src/components/FilesList/ListInfo.vue

@@ -5,6 +5,7 @@
       :data-test-items="items"
       :data-test-files="files"
       :data-test-folders="folders"
+      :data-test-spaces="spaces"
       :data-test-size="size"
       class="oc-text-muted"
     >
@@ -26,6 +27,16 @@ export default {
       type: Number,
       required: true
     },
+    spaces: {
+      type: Number,
+      default: 0,
+      required: false
+    },
+    showSpaces: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
     /**
      * Total size in bytes. Unformatted strings and integers are allowed.
      */
@@ -37,7 +48,7 @@ export default {
   },
   computed: {
     items() {
-      return this.files + this.folders
+      return this.files + this.folders + (this.showSpaces ? this.spaces : 0)
     },
     text() {
       const filesStr = this.$gettextInterpolate(
@@ -52,24 +63,48 @@ export default {
           foldersCount: this.folders
         }
       )
+      const spacesStr = this.$gettextInterpolate(
+        this.$ngettext('%{ spacesCount } space', '%{ spacesCount } spaces', this.spaces),
+        {
+          spacesCount: this.spaces
+        }
+      )
       const itemSize = formatFileSize(this.size, this.$language.current)
-      const translated =
-        this.size > 0
-          ? this.$ngettext(
-              '%{ itemsCount } item with %{ itemSize } in total (%{ filesStr}, %{foldersStr})',
-              '%{ itemsCount } items with %{ itemSize } in total (%{ filesStr}, %{foldersStr})',
-              this.items
-            )
-          : this.$ngettext(
-              '%{ itemsCount } item in total (%{ filesStr}, %{foldersStr})',
-              '%{ itemsCount } items in total (%{ filesStr}, %{foldersStr})',
-              this.items
-            )
+      let translated
+      if (this.showSpaces) {
+        translated =
+          this.size > 0
+            ? this.$ngettext(
+                '%{ itemsCount } item with %{ itemSize } in total (%{ filesStr}, %{foldersStr}, %{spacesStr})',
+                '%{ itemsCount } items with %{ itemSize } in total (%{ filesStr}, %{foldersStr}, %{spacesStr})',
+                this.items
+              )
+            : this.$ngettext(
+                '%{ itemsCount } item in total (%{ filesStr}, %{foldersStr}, %{spacesStr})',
+                '%{ itemsCount } items in total (%{ filesStr}, %{foldersStr}, %{spacesStr})',
+                this.items
+              )
+      } else {
+        translated =
+          this.size > 0
+            ? this.$ngettext(
+                '%{ itemsCount } item with %{ itemSize } in total (%{ filesStr}, %{foldersStr})',
+                '%{ itemsCount } items with %{ itemSize } in total (%{ filesStr}, %{foldersStr})',
+                this.items
+              )
+            : this.$ngettext(
+                '%{ itemsCount } item in total (%{ filesStr}, %{foldersStr})',
+                '%{ itemsCount } items in total (%{ filesStr}, %{foldersStr})',
+                this.items
+              )
+      }
+
       return this.$gettextInterpolate(translated, {
         itemsCount: this.items,
         itemSize,
         filesStr,
-        foldersStr
+        foldersStr,
+        spacesStr
       })
     }
   }

packages/web-app-files/src/store/getters.ts

@@ -1,3 +1,4 @@
+import { isProjectSpaceResource } from 'web-client/src/helpers'
 import { ShareTypes } from 'web-client/src/helpers/share'
 
 export default {
@@ -32,9 +33,11 @@ export default {
   totalFilesCount: (state, getters) => {
     const fileCount = getters.filesAll.filter((file) => file.type === 'file').length
     const folderCount = getters.filesAll.filter((file) => file.type === 'folder').length
+    const spaceCount = getters.filesAll.filter((file) => isProjectSpaceResource(file)).length
     return {
       files: fileCount,
-      folders: folderCount
+      folders: folderCount,
+      spaces: spaceCount
     }
   },
   currentFileOutgoingCollaborators: (state) => {

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -45,6 +45,8 @@
               class="oc-width-1-1 oc-my-s"
               :files="totalFilesCount.files"
               :folders="totalFilesCount.folders"
+              :spaces="totalFilesCount.spaces"
+              :show-spaces="hasProjectSpaces"
             />
           </template>
         </resource-table>
@@ -79,7 +81,7 @@ import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from 'vue'
 import { Resource } from 'web-client'
-import { useStore } from 'web-pkg/src/composables'
+import { useCapabilityProjectSpacesEnabled, useStore } from 'web-pkg/src/composables'
 import { buildShareSpaceResource, SpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 
@@ -119,7 +121,8 @@ export default defineComponent({
 
     return {
       ...useResourcesViewDefaults<Resource, any, any[]>(),
-      getSpace
+      getSpace,
+      hasProjectSpaces: useCapabilityProjectSpacesEnabled()
     }
   },
 

packages/web-app-files/tests/unit/components/FilesList/ListInfo.spec.js

@@ -18,6 +18,7 @@ describe('ListInfo', () => {
       expect(itemElement.attributes('data-test-items')).toBe('5')
       expect(itemElement.attributes('data-test-files')).toBe('2')
       expect(itemElement.attributes('data-test-folders')).toBe('3')
+      expect(itemElement.attributes('data-test-spaces')).toBe('1')
     })
 
     it('should show text with files and folders total and individual count', () => {
@@ -96,6 +97,7 @@ function getWrapper(props = {}) {
     propsData: {
       files: 2,
       folders: 3,
+      spaces: 1,
       ...props
     }
   })