Add ability to show storage limit [SCI-6835]

app/assets/stylesheets/steps/step.scss

@@ -132,13 +132,35 @@
 
     .drop-message {
       display: flex;
+      flex-direction: column;
     }
 
-    *:not(.drop-message) {
+    > *:not(.drop-message) {
       opacity: 0;
       pointer-events: none;
     }
   }
+
+  .storage-usage {
+    @include font-small;
+    color: $color-black;
+
+    .progress-container {
+      background-color: $color-white;
+      border-radius: 2px;
+      height: 4px;
+      margin: 1em 0;
+      overflow: hidden;
+      position: relative;
+
+      .progress-bar {
+        background-color: $brand-primary;
+        height: 100%;
+        position: relative;
+        transition: 1s $timing-function-sharp;
+      }
+    }
+  }
 }
 
 .step-element-header {

app/javascript/vue/protocol/step.vue

@@ -9,6 +9,7 @@
   >
     <div class="drop-message">
       {{ i18n.t('protocols.steps.drop_message', {position: step.attributes.position + 1}) }}
+      <StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
     </div>
     <div class="step-header">
       <a class="step-collapse-link"
@@ -115,6 +116,7 @@
   import Attachments from 'vue/protocol/attachments.vue'
   import fileModal from 'vue/protocol/step_attachments/file_modal.vue'
   import AttachmentsMixin from 'vue/protocol/mixins/attachments.js'
+  import StorageUsage from 'vue/protocol/storage_usage.vue'
 
   export default {
     name: 'StepContainer',
@@ -142,7 +144,8 @@
       Checklist,
       deleteStepModal,
       fileModal,
-      Attachments
+      Attachments,
+      StorageUsage
     },
     created() {
       this.loadAttachments();

app/javascript/vue/protocol/step_attachments/file_modal.vue

@@ -28,6 +28,7 @@
             <div class="description">
               {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_description") }}
             </div>
+            <StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
             <div class="available-storage"></div>
             <div class="drop-notification">
               {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_notification", {position: step.attributes.position + 1}) }}
@@ -69,6 +70,8 @@
   </div>
 </template>
  <script>
+  import StorageUsage from '../storage_usage.vue'
+
   export default {
     name: 'fileModal',
     props: {
@@ -79,6 +82,7 @@
         dragingFile: false
       }
     },
+    components: {StorageUsage},
     mounted() {
       $(this.$refs.modal).modal('show');
       MarvinJsEditor.initNewButton('.new-marvinjs-upload-button', () => {

app/javascript/vue/protocol/storage_usage.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="storage-usage">
+    <div class="progress-container">
+      <div class="progress-bar" :style="`width:${storagePrecentage}%`"></div>
+    </div>
+    <span v-if="this.step.attributes.storage_limit.total > 0">
+      {{ `${this.step.attributes.storage_limit.used_human} / ${this.step.attributes.storage_limit.total_human} Space used`}}
+    </span>
+    <span v-else>
+      {{ `${this.step.attributes.storage_limit.used_human} / Unlimited Space used`}}
+    </span>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'StorageUsage',
+    props: {
+      step: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      storagePrecentage() {
+        let used = this.step.attributes.storage_limit.used;
+        let total = this.step.attributes.storage_limit.total;
+        return ((used / total) * 100);
+      }
+    }
+  }
+</script>

app/serializers/step_serializer.rb

@@ -6,7 +6,8 @@ class StepSerializer < ActiveModel::Serializer
   include CommentHelper
 
   attributes :name, :position, :completed, :urls, :assets_view_mode, :assets_order,
-             :marvinjs_enabled, :marvinjs_context, :wopi_enabled, :wopi_context, :comments_count, :unseen_comments
+             :marvinjs_enabled, :marvinjs_context, :wopi_enabled, :wopi_context, :comments_count, :unseen_comments,
+             :storage_limit
 
   def marvinjs_enabled
     MarvinJsService.enabled?
@@ -42,6 +43,10 @@ class StepSerializer < ActiveModel::Serializer
     end
   end
 
+  def storage_limit
+    nil
+  end
+
   def assets_order
     object.current_view_state(@instance_options[:user]).state.dig('assets', 'sort')
   end