Intruduce own component for the space quota, minor adjustments

owncloud · Feb 18, 2022 · c2aafe8 · c2aafe8
1 parent 2543c5f
commit c2aafe8
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 36 deletions.
diff --git a/changelog/unreleased/enhancement-spaces-sidebar b/changelog/unreleased/enhancement-spaces-sidebar
@@ -1,4 +1,6 @@
 Enhancement: Implement the right sidebar for spaces
 
+The right sidebar for a space functions similar to the files sidebar and gives the user basic information and actions for the current space.
+
 https://github.com/owncloud/web/pull/6437
 https://github.com/owncloud/web/issues/6284
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -39,13 +39,7 @@
         <tr>
           <th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
           <td>
-            <p class="oc-mb-s oc-mt-rm" v-text="personalStorageDetailsLabel" />
-            <oc-progress
-              :value="parseInt(quotaUsagePercent)"
-              :max="100"
-              size="small"
-              :variation="quotaProgressVariant"
-            />
+            <space-quota :space-quota="space.spaceQuota" />
           </td>
         </tr>
       </table>
@@ -59,12 +53,13 @@ import MixinResources from '../../../mixins/resources'
 import { mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
 import { buildWebDavSpacesPath } from '../../../helpers/resources'
-import filesize from 'filesize'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
+import SpaceQuota from '../../SpaceQuota.vue'
 
 export default {
   name: 'SpaceDetails',
+  components: { SpaceQuota },
   mixins: [Mixins, MixinResources],
   inject: ['displayedItem'],
   title: ($gettext) => {
@@ -121,27 +116,6 @@ export default {
     lastModifyDate() {
       return this.formDateFromISO(this.space.mdate)
     },
-    personalStorageDetailsLabel() {
-      return this.$gettextInterpolate('%{percentage} % full (%{used} of %{total} used)', {
-        used: this.quotaUsed,
-        total: this.quotaTotal,
-        percentage: this.quotaUsagePercent
-      })
-    },
-    quotaTotal() {
-      return filesize(this.space.spaceQuota.total)
-    },
-    quotaUsed() {
-      return filesize(this.space.spaceQuota.used)
-    },
-    quotaUsagePercent() {
-      return ((this.space.spaceQuota.used / this.space.spaceQuota.total) * 100).toFixed(2)
-    },
-    quotaProgressVariant() {
-      if (this.quotaUsagePercent < 80) return 'primary'
-      if (this.quotaUsagePercent < 90) return 'warning'
-      return 'danger'
-    },
     ownerUserIds() {
       const permissions = this.space.spacePermissions?.filter((permission) =>
         permission.roles.includes('manager')

diff --git a/packages/web-app-files/src/components/SideBar/SpaceInfo.vue b/packages/web-app-files/src/components/SideBar/SpaceInfo.vue
@@ -2,7 +2,11 @@
   <div class="space_info">
     <div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
       <div class="oc-mr-s">
-        <oc-icon name="layout-grid" size="large" class="oc-display-block" />
+        <oc-icon
+          name="layout-grid"
+          :size="space.description ? 'large' : 'medium'"
+          class="oc-display-block"
+        />
       </div>
       <div>
         <h3 data-testid="space-info-name" v-text="space.name" />

diff --git a/packages/web-app-files/src/components/SpaceQuota.vue b/packages/web-app-files/src/components/SpaceQuota.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <p class="oc-mb-s oc-mt-rm" v-text="spaceStorageDetailsLabel" />
+    <oc-progress
+      :value="parseInt(quotaUsagePercent)"
+      :max="100"
+      size="small"
+      :variation="quotaProgressVariant"
+    />
+  </div>
+</template>
+
+<script>
+import filesize from 'filesize'
+
+export default {
+  name: 'SpaceQuota',
+  props: {
+    spaceQuota: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    spaceStorageDetailsLabel() {
+      return this.$gettextInterpolate(
+        this.$gettext('%{used} of %{total} used (%{percentage} % used)'),
+        {
+          used: this.quotaUsed,
+          total: this.quotaTotal,
+          percentage: this.quotaUsagePercent
+        }
+      )
+    },
+    quotaTotal() {
+      return filesize(this.spaceQuota.total)
+    },
+    quotaUsed() {
+      return filesize(this.spaceQuota.used)
+    },
+    quotaUsagePercent() {
+      return ((this.spaceQuota.used / this.spaceQuota.total) * 100).toFixed(2)
+    },
+    quotaProgressVariant() {
+      switch (this.spaceQuota.state) {
+        case 'normal':
+          return 'primary'
+        case 'nearing':
+          return 'warning'
+        case 'critical':
+          return 'warning'
+        default:
+          return 'danger'
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/web-app-files/src/mixins/spaces/actions/showDetails.js b/packages/web-app-files/src/mixins/spaces/actions/showDetails.js
@@ -21,14 +21,13 @@ export default {
     ...mapActions('Files/sidebar', { openSidebar: 'open', closeSidebar: 'close' }),
     ...mapMutations('Files', ['SET_FILE_SELECTION']),
 
-    async $_showDetails_trigger({ resources }) {
+    $_showDetails_trigger({ resources }) {
       if (resources.length !== 1) {
         return
       }
 
       this.SET_FILE_SELECTION([resources[0]])
-      await this.closeSidebar()
-      await this.openSidebar()
+      this.openSidebar()
     }
   }
 }
diff --git a/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap b/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
@@ -20,8 +20,7 @@ exports[`Details SideBar Panel displayes the details side panel 1`] = `
       <tr>
         <th scope="col" class="oc-pr-s">Quota</th>
         <td>
-          <p class="oc-mb-s oc-mt-rm">10.00 % full (100 B of 1 kB used)</p>
-          <oc-progress-stub value="10" max="100" size="small" variation="primary"></oc-progress-stub>
+          <space-quota-stub spacequota="[object Object]"></space-quota-stub>
         </td>
       </tr>
     </table>

diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/SpaceInfo.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/SpaceInfo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`SpaceInfo shows space info 1`] = `
 <div class="space_info">
   <div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
     <div class="oc-mr-s">
-      <oc-icon-stub name="layout-grid" size="large" class="oc-display-block"></oc-icon-stub>
+      <oc-icon-stub name="layout-grid" size="medium" class="oc-display-block"></oc-icon-stub>
     </div>
     <div>
       <h3 data-testid="space-info-name"> space</h3> <span data-testid="space-info-subtitle"></span>