Space quota

changelog/unreleased/enhancement-space-quota

@@ -0,0 +1,6 @@
+Enhancement: Allow updating space quota
+
+We have implemented a way to update the quota of a space
+
+https://github.com/owncloud/web/pull/6477
+https://github.com/owncloud/web/issues/6470

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -5,6 +5,7 @@
       :cancel="closeReadmeContentModal"
       :space="resources[0]"
     ></readme-content-modal>
+    <quota-modal v-if="quotaModalIsOpen" :cancel="closeQuotaModal" :space="resources[0]" />
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"
@@ -37,15 +38,26 @@ import Restore from '../../../mixins/spaces/actions/restore'
 import EditDescription from '../../../mixins/spaces/actions/editDescription'
 import EditReadmeContent from '../../../mixins/spaces/actions/editReadmeContent'
 import UploadImage from '../../../mixins/spaces/actions/uploadImage'
+import EditQuota from '../../../mixins/spaces/actions/editQuota'
+import QuotaModal from '../../Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue'
 
 export default {
   name: 'SpaceActions',
   title: ($gettext) => {
     return $gettext('Actions')
   },
-  components: { ActionMenuItem, ReadmeContentModal },
-  mixins: [Rename, Delete, EditDescription, EditReadmeContent, Disable, Restore, UploadImage],
+  components: { ActionMenuItem, QuotaModal, ReadmeContentModal },
+  mixins: [
+    Rename,
+    Delete,
+    EditDescription,
+    EditReadmeContent,
+    Disable,
+    Restore,
+    UploadImage,
+    EditQuota
+  ],
   computed: {
     ...mapGetters('Files', ['highlightedFile']),
     resources() {
@@ -57,18 +69,25 @@ export default {
         ...this.$_editDescription_items,
         ...this.$_uploadImage_items,
         ...this.$_editReadmeContent_items,
+        ...this.$_editQuota_items,
         ...this.$_restore_items,
         ...this.$_delete_items,
         ...this.$_disable_items
       ].filter((item) => item.isEnabled({ resources: this.resources }))
     },
     readmeContentModalIsOpen() {
       return this.$data.$_editReadmeContent_modalOpen
+    },
+    quotaModalIsOpen() {
+      return this.$data.$_editQuota_modalOpen
     }
   },
   methods: {
     closeReadmeContentModal() {
       this.$_editReadmeContent_closeModal()
+    },
+    closeQuotaModal() {
+      this.$_editQuota_closeModal()
     }
   }
 }

packages/web-app-files/src/components/Spaces/QuotaModal.vue

@@ -0,0 +1,213 @@
+<template>
+  <portal to="app.runtime.modal">
+    <oc-modal
+      :title="modalTitle"
+      :button-cancel-text="$gettext('Cancel')"
+      :button-confirm-text="$gettext('Confirm')"
+      :button-confirm-disabled="confirmButtonDisabled"
+      @confirm="editQuota"
+      @cancel="cancel"
+    >
+      <template #content>
+        <oc-select
+          v-model="selectedOption"
+          :selectable="optionSelectable"
+          taggable
+          push-tags
+          :clearable="false"
+          :options="options"
+          :create-option="createOption"
+          option-label="displayValue"
+          :label="$gettext('Space quota')"
+        >
+          <template #selected-option="{ displayValue, displayUnit }">
+            <span>{{ displayValue }}</span>
+            <span v-if="displayUnit" class="oc-text-muted oc-ml-s">{{ displayUnit }}</span>
+          </template>
+          <template #search="{ attributes, events }">
+            <input class="vs__search" v-bind="attributes" v-on="events" />
+          </template>
+          <template #option="{ displayValue, displayUnit, error }">
+            <div class="oc-flex oc-flex-between">
+              <span>{{ displayValue }}</span>
+              <span v-if="displayUnit" class="oc-text-muted">{{ displayUnit }}</span>
+            </div>
+            <div v-if="error" class="oc-text-input-danger">{{ error }}</div>
+          </template>
+        </oc-select>
+        <p
+          class="oc-mt-xs oc-text-meta"
+          v-text="$gettext('Select a quota option or enter your own value')"
+        />
+      </template>
+    </oc-modal>
+  </portal>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
+
+export default {
+  name: 'SpaceQuotaModal',
+  props: {
+    space: {
+      type: Object,
+      required: true
+    },
+    cancel: {
+      type: Function,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      selectedOption: {},
+      options: [],
+      DEFAULT_OPTIONS: [
+        {
+          displayValue: '1',
+          displayUnit: 'GB',
+          value: Math.pow(10, 9)
+        },
+        {
+          displayValue: '5',
+          displayUnit: 'GB',
+          value: 5 * Math.pow(10, 9)
+        },
+        {
+          displayValue: '10',
+          displayUnit: 'GB',
+          value: 10 * Math.pow(10, 9)
+        },
+        {
+          displayValue: '50',
+          displayUnit: 'GB',
+          value: 50 * Math.pow(10, 9)
+        },
+        {
+          displayValue: '100',
+          displayUnit: 'GB',
+          value: 100 * Math.pow(10, 9)
+        },
+        {
+          displayValue: '500',
+          displayUnit: 'GB',
+          value: 500 * Math.pow(10, 9)
+        },
+        {
+          displayValue: '1000',
+          displayUnit: 'GB',
+          value: 10000 * Math.pow(10, 9)
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['getToken', 'configuration']),
+    confirmButtonDisabled() {
+      return this.space.spaceQuota.total === this.selectedOption.value
+    },
+    modalTitle() {
+      return this.$gettextInterpolate(this.$gettext('Change quota for space %{name}'), {
+        name: this.space.name
+      })
+    }
+  },
+  mounted() {
+    this.setOptions()
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
+
+    editQuota() {
+      const newTotalQuota = this.selectedOption.value
+
+      if (isNaN(newTotalQuota)) {
+        return this.showMessage({
+          title: this.$gettext('Changing space quota failed…'),
+          status: 'danger'
+        })
+      }
+
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
+        .updateDrive(this.space.id, { quota: { total: this.selectedOption.value } }, {})
+        .then(({ data }) => {
+          this.cancel()
+          this.UPDATE_RESOURCE_FIELD({
+            id: this.space.id,
+            field: 'spaceQuota',
+            value: data.quota
+          })
+          this.showMessage({
+            title: this.$gettext('Space quota was changed successfully')
+          })
+        })
+        .catch((error) => {
+          console.error(error)
+          this.showMessage({
+            title: this.$gettext('Failed to change space quota'),
+            desc: error,
+            status: 'danger'
+          })
+        })
+    },
+    optionSelectable(option) {
+      if (!option.value) {
+        return false
+      }
+
+      return !isNaN(option.value)
+    },
+    createOption(option) {
+      if (option.endsWith('.') || option.endsWith(',')) {
+        option = option.slice(0, -1)
+      }
+
+      const optionIsNumberRegex = /^[1-9]\d*(([.,])\d+)?$/g
+
+      if (!optionIsNumberRegex.test(option)) {
+        return {
+          displayValue: option,
+          error: this.$gettext('Please enter only numbers')
+        }
+      }
+
+      option = option.replace(',', '.')
+      return {
+        displayValue: parseFloat(option).toFixed(2).toString().replace('.00', ''),
+        displayUnit: 'GB',
+        value: parseFloat(option).toFixed(2) * Math.pow(10, 9)
+      }
+    },
+    setOptions() {
+      this.options = [...this.DEFAULT_OPTIONS]
+
+      const selectedQuotaInOptions = this.options.find(
+        (option) => option.value === this.space.spaceQuota.total
+      )
+
+      if (selectedQuotaInOptions) {
+        this.selectedOption = selectedQuotaInOptions
+      } else {
+        const newOption = {
+          displayValue: (this.space.spaceQuota.total * Math.pow(10, -9))
+            .toFixed(2)
+            .toString()
+            .replace('.00', ''),
+          displayUnit: 'GB',
+          value: this.space.spaceQuota.total
+        }
+        this.options.push(newOption)
+        this.options = [
+          ...this.options.filter((o) => o.value).sort((a, b) => a.value - b.value),
+          ...this.options.filter((o) => !o.value)
+        ]
+        this.selectedOption = newOption
+      }
+    }
+  }
+}
+</script>

packages/web-app-files/src/mixins/spaces/actions/editQuota.js

@@ -0,0 +1,41 @@
+import { mapState } from 'vuex'
+
+export default {
+  data: () => {
+    return {
+      $_editQuota_modalOpen: false
+    }
+  },
+  computed: {
+    ...mapState('Files', ['currentFolder']),
+    $_editQuota_items() {
+      return [
+        {
+          name: 'editQuota',
+          icon: 'cloud',
+          label: () => {
+            return this.$gettext('Edit quota')
+          },
+          handler: this.$_editQuota_trigger,
+          isEnabled: ({ resources }) => {
+            if (resources.length !== 1) {
+              return false
+            }
+
+            return resources[0].spaceQuota
+          },
+          componentType: 'oc-button',
+          class: 'oc-files-actions-edit-quota-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    $_editQuota_trigger() {
+      this.$data.$_editQuota_modalOpen = true
+    },
+    $_editQuota_closeModal() {
+      this.$data.$_editQuota_modalOpen = false
+    }
+  }
+}

packages/web-app-files/src/views/spaces/Project.vue

@@ -9,6 +9,7 @@
           :cancel="closeReadmeContentModal"
           :space="space"
         ></readme-content-modal>
+        <quota-modal v-if="quotaModalIsOpen" :cancel="closeQuotaModal" :space="space" />
         <div
           class="oc-grid oc-px-m oc-mt-m"
           :class="{ 'oc-child-width-1-1@s': imageExpanded, 'oc-child-width-1-3@s': !imageExpanded }"
@@ -158,7 +159,9 @@ import Restore from '../../mixins/spaces/actions/restore'
 import EditDescription from '../../mixins/spaces/actions/editDescription'
 import ShowDetails from '../../mixins/spaces/actions/showDetails'
 import UploadImage from '../../mixins/spaces/actions/uploadImage'
+import EditQuota from '../../mixins/spaces/actions/editQuota'
 import EditReadmeContent from '../../mixins/spaces/actions/editReadmeContent'
+import QuotaModal from '../../components/Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../components/Spaces/ReadmeContentModal.vue'
 
 const visibilityObserver = new VisibilityObserver()
@@ -172,7 +175,8 @@ export default {
     ListInfo,
     Pagination,
     ContextActions,
-    ReadmeContentModal
+    ReadmeContentModal,
+    QuotaModal
   },
   mixins: [
     MixinAccessibleBreadcrumb,
@@ -185,7 +189,8 @@ export default {
     ShowDetails,
     Restore,
     UploadImage,
-    EditReadmeContent
+    EditReadmeContent,
+    EditQuota
   ],
   setup() {
     const router = useRouter()
@@ -314,6 +319,9 @@ export default {
     displayThumbnails() {
       return !this.configuration.options.disablePreviews
     },
+    quotaModalIsOpen() {
+      return this.$data.$_editQuota_modalOpen
+    },
     readmeContentModalIsOpen() {
       return this.$data.$_editReadmeContent_modalOpen
     }
@@ -421,6 +429,7 @@ export default {
         ...this.$_editDescription_items,
         ...this.$_editReadmeContent_items,
         ...this.$_uploadImage_items,
+        ...this.$_editQuota_items,
         ...this.$_restore_items,
         ...this.$_delete_items,
         ...this.$_disable_items,
@@ -473,6 +482,9 @@ export default {
     isResourceInSelection(resource) {
       return this.selected?.includes(resource)
     },
+    closeQuotaModal() {
+      this.$_editQuota_closeModal()
+    },
     closeReadmeContentModal() {
       this.$_editReadmeContent_closeModal()
     }