From 29fdc961fc391c7a7e88003f5a7f0f68f9b4decc Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 17:55:19 +0100
Subject: [PATCH 1/4] move form to another workspace (#339)

* move form to another workspace

* style: apply lint

* fix typo error

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Http/Controllers/Forms/FormController.php |  20 ++++
 .../forms/components/FormWorkspaceModal.vue   | 103 ++++++++++++++++++
 .../components/pages/forms/show/ExtraMenu.vue |  15 +++
 routes/api.php                                |   1 +
 4 files changed, 139 insertions(+)
 create mode 100644 client/components/open/forms/components/FormWorkspaceModal.vue

diff --git a/app/Http/Controllers/Forms/FormController.php b/app/Http/Controllers/Forms/FormController.php
index 8b29d6e0..9c268c5f 100644
--- a/app/Http/Controllers/Forms/FormController.php
+++ b/app/Http/Controllers/Forms/FormController.php
@@ -218,4 +218,24 @@ class FormController extends Controller
 
         return redirect()->to(Storage::temporaryUrl($path, now()->addMinutes(5)));
     }
+
+    /**
+     * Updates a form's workspace
+     */
+    public function updateWorkspace($id, $workspace_id)
+    {
+        $form =  Form::findOrFail($id);
+        $workspace =  Workspace::findOrFail($workspace_id);
+
+        $this->authorize('update', $form);
+        $this->authorize('view', $workspace);
+
+        $form->workspace_id = $workspace_id;
+        $form->creator_id = auth()->user()->id;
+        $form->save();
+
+        return $this->success([
+            'message' => 'Form workspace updated successfully.',
+        ]);
+    }
 }
diff --git a/client/components/open/forms/components/FormWorkspaceModal.vue b/client/components/open/forms/components/FormWorkspaceModal.vue
new file mode 100644
index 00000000..d4528530
--- /dev/null
+++ b/client/components/open/forms/components/FormWorkspaceModal.vue
@@ -0,0 +1,103 @@
+<template>
+    <modal :show="show" @close="emit('close')">
+        <template #icon>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
+            </svg>
+        </template>
+        <template #title>        
+            Change form workspace
+        </template>
+        <div class="p-4">
+            <div class="flex space-x-4 items-center">
+                <p>Current workspace:</p>
+                <div class="flex items-center cursor group p-2 rounded border">
+                    <div class="rounded-full h-8 8">
+                        <img v-if="isUrl(workspace.icon)"
+                            :src="workspace.icon"
+                            :alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
+                        />
+                        <div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
+                            v-text="workspace.icon"
+                        />
+                    </div>
+                    <p class="lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200">
+                        {{ workspace.name }}
+                    </p>
+                </div>
+            </div>
+            <form @submit.prevent="onSubmit">
+                <div class=" my-4">
+                    <select-input name="workspace" class=""
+                            :options="workspacesSelectOptions"
+                            v-model="selectedWorkspace"
+                            :required="true"
+                            label="Select workspace"
+                    />
+                </div>
+                <div class="flex justify-end mt-4 pb-5">
+                    <v-button class="mr-2" :loading="loading">
+                        Change workspace
+                    </v-button>
+                    <v-button color="white" @click.prevent="emit('close')">
+                        Close
+                    </v-button>
+                </div>
+            </form>
+        </div>
+    </modal>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed } from 'vue'
+const emit = defineEmits(['close'])
+const workspacesStore = useWorkspacesStore()
+const formsStore = useFormsStore()
+
+const  selectedWorkspace = ref(null);
+const props = defineProps({
+    show: { type: Boolean, required: true },
+    form: { type: Object, required: true },
+})
+const workspaces = computed(() => workspacesStore.getAll)
+const workspace = computed(() => workspacesStore.getByKey(props.form?.workspace_id))
+const loading = ref(false)
+const workspacesSelectOptions = computed(()=> workspaces.value.filter((w)=>{
+    return w.id !== workspace.value.id
+}).map(workspace => ({ name: workspace.name, value: workspace.id })))
+
+
+const onSubmit = () => {
+    const endpoint = '/open/forms/' + props.form.id + '/workspace/' + selectedWorkspace.value
+    if(! selectedWorkspace.value) {
+        useAlert().error('Please select a workspace!') 
+        return;
+    }
+    opnFetch(endpoint, { method: 'POST' }).then(data => {
+        loading.value = false;
+        emit('close')
+        useAlert().success('Form workspace updated successfully.')
+        workspacesStore.setCurrentId(selectedWorkspace.value)
+        formsStore.resetState()
+        formsStore.loadAll(selectedWorkspace.value)
+        const router = useRouter()
+        const route = useRoute()
+        if (route.name !== 'home') {
+            router.push({ name: 'home' })
+        }
+        formsStore.loadAll(selectedWorkspace.value)
+    }).catch((error) => {
+        useAlert().error(error?.data?.message ??   'Something went wrong, please try again!') 
+        loading.value = false;
+    })
+}
+
+const isUrl = (str) => {
+    try {
+        new URL(str)
+    } catch (_) {
+        return false
+    }
+    return true
+}
+</script>
\ No newline at end of file
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index f6aca7fc..9e6b10c3 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -107,6 +107,17 @@
         </svg>
         Create Template
       </a>
+
+      <a v-track.change_workspace_click="{form_id:form.id, form_slug:form.slug}" href="#"
+         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+         @click.prevent="showFormWorkspaceModal=true"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
+      </svg>
+
+        Change workspace
+      </a>
       <a v-track.delete_form_click="{form_id:form.id, form_slug:form.slug}"
          href="#"
          class="block block px-4 py-2 text-md text-red-600 hover:bg-red-50 flex items-center"
@@ -152,6 +163,8 @@
       </div>
     </modal>
     <form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false" />
+    <form-workspace-modal v-if="user" :form="form" :show="showFormWorkspaceModal" @close="showFormWorkspaceModal=false" />
+
   </div>
 </template>
 
@@ -159,6 +172,7 @@
 import { ref, defineProps, computed } from 'vue'
 import Dropdown from '~/components/global/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
+import FormWorkspaceModal from '../../../open/forms/components/FormWorkspaceModal.vue'
 
 const { copy } = useClipboard()
 const router = useRouter()
@@ -177,6 +191,7 @@ let loadingDuplicate = ref(false)
 let loadingDelete = ref(false)
 let showDeleteFormModal = ref(false)
 let showFormTemplateModal = ref(false)
+let showFormWorkspaceModal = ref(false)
 
 const copyLink = () => {
   copy(props.form.share_url)
diff --git a/routes/api.php b/routes/api.php
index bb27a16c..33885bb6 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -89,6 +89,7 @@ Route::group(['middleware' => 'auth:api'], function () {
 
         Route::prefix('forms')->name('forms.')->group(function () {
             Route::post('/', [FormController::class, 'store'])->name('store');
+            Route::post('/{id}/workspace/{workspace_id}', [FormController::class, 'updateWorkspace'])->name('workspace.update');
             Route::put('/{id}', [FormController::class, 'update'])->name('update');
             Route::delete('/{id}', [FormController::class, 'destroy'])->name('destroy');
 

From d395439c70a2a77c76b90815dad84d070857e21d Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 18:01:06 +0100
Subject: [PATCH 2/4] fix form logo size (#345)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../open/forms/components/form-components/FormEditorPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/open/forms/components/form-components/FormEditorPreview.vue b/client/components/open/forms/components/form-components/FormEditorPreview.vue
index b10ba5bd..b0d7fb84 100644
--- a/client/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/client/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -24,7 +24,7 @@
           >
             <img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
                  :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-                 class="w-20 h-20 object-contain absolute left-5 transition-all"
+                 class="max-w-60 h-20 object-contain absolute left-5 transition-all"
             />
           </div>
         </div>

From bf95096bfe4c5eee3fe8d5a55dc885d9752b5bab Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 18:16:37 +0100
Subject: [PATCH 3/4] fix: hide border on error (#330)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/CodeInput.client.vue         | 2 +-
 client/components/forms/FlatSelectInput.vue          | 2 +-
 client/components/forms/PhoneInput.vue               | 2 +-
 client/components/forms/RichTextAreaInput.client.vue | 2 +-
 client/components/forms/SignatureInput.vue           | 2 +-
 client/components/forms/TextAreaInput.vue            | 2 +-
 client/components/forms/TextInput.vue                | 2 +-
 client/components/forms/components/VSelect.vue       | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/components/forms/CodeInput.client.vue b/client/components/forms/CodeInput.client.vue
index 4d4a0090..50704574 100644
--- a/client/components/forms/CodeInput.client.vue
+++ b/client/components/forms/CodeInput.client.vue
@@ -11,7 +11,7 @@
     </template>
 
     <div
-      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
     >
       <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
                   :extensions="extensions"
diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
index 4965f9d2..1e645390 100644
--- a/client/components/forms/FlatSelectInput.vue
+++ b/client/components/forms/FlatSelectInput.vue
@@ -8,7 +8,7 @@
 
     <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
-         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
          @click="onSelect(option[optionKey])"
     >
       <p class="flex-grow">
diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index ddd7f006..ca53d898 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -28,7 +28,7 @@
         </template>
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled?true:null"
-             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
+             :class="[theme.default.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
              :placeholder="placeholder" :style="inputStyle" @input="onInput"
       >
     </div>
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index ccd1d0c0..e3b609c4 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -7,7 +7,7 @@
     </template>
 
     <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled?true:null"
-                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
+                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
                 :editor-toolbar="editorToolbar" class="rich-editor resize-y"
                 :style="inputStyle"
     />
diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
index c213a9dd..cda0ca9d 100644
--- a/client/components/forms/SignatureInput.vue
+++ b/client/components/forms/SignatureInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+                     :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
                      height="150px"
                      :name="name"
                      :options="{ onEnd }"
diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index 757d7e87..8cc5f177 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -7,7 +7,7 @@
     </template>
 
     <textarea :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-              :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+              :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
               class="resize-y"
               :name="name" :style="inputStyle"
               :placeholder="placeholder"
diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
index da7d6197..2ab41a31 100644
--- a/client/components/forms/TextInput.vue
+++ b/client/components/forms/TextInput.vue
@@ -10,7 +10,7 @@
            :type="nativeType" :autocomplete="autocomplete"
            :pattern="pattern"
            :style="inputStyle"
-           :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
+           :class="[theme.default.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
            :name="name" :accept="accept"
            :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
            @change="onChange" @keydown.enter.prevent="onEnterPress"
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index 96a96caa..288b812b 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -4,7 +4,7 @@
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
               class="cursor-pointer"
               :style="inputStyle"
-              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
+              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
               @click="toggleDropdown"
       >
         <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">

From 7b89ebdcb92b4c3248c27400e154511afc6daeec Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 12 Mar 2024 18:27:09 +0100
Subject: [PATCH 4/4] file upload max size feature (#328)

* file upload max size feature

* Change label

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Http/Requests/AnswerFormRequest.php          |  8 +++++++-
 app/Http/Requests/UserFormRequest.php            |  3 +++
 client/components/open/forms/OpenFormField.vue   |  2 +-
 .../forms/fields/components/FieldOptions.vue     | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index 8e381f74..c1f8f9c1 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -27,6 +27,12 @@ class AnswerFormRequest extends FormRequest
         $this->maxFileSize = $this->form->workspace->max_file_size;
     }
 
+    private function getFieldMaxFileSize($fieldProps)
+    {
+        return array_key_exists('max_file_size', $fieldProps) ?
+            min($fieldProps['max_file_size'] * 1000000, $this->maxFileSize) : $this->maxFileSize;
+    }
+
     /**
      * Validate form before use it
      *
@@ -180,7 +186,7 @@ class AnswerFormRequest extends FormRequest
                 if (! empty($property['allowed_file_types'])) {
                     $allowedFileTypes = explode(',', $property['allowed_file_types']);
                 }
-                $this->requestRules[$property['id'].'.*'] = [new StorageFile($this->maxFileSize, $allowedFileTypes, $this->form)];
+                $this->requestRules[$property['id'] . '.*'] = [new StorageFile($this->getFieldMaxFileSize($property), $allowedFileTypes, $this->form)];
 
                 return ['array'];
             case 'email':
diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index 7444b525..74660646 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -118,6 +118,9 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'properties.*.generates_uuid' => 'boolean|nullable',
             'properties.*.generates_auto_increment_id' => 'boolean|nullable',
 
+            // For file (min and max)
+            'properties.*.max_file_size' => 'min:1|numeric',
+
             // Security & Privacy
             'can_be_indexed' => 'boolean',
             'password' => 'sometimes|nullable',
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index d9738cb5..5c1281f6 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -303,7 +303,7 @@ export default {
         }
       } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
         inputProperties.multiple = (field.multiple !== undefined && field.multiple)
-        inputProperties.mbLimit = this.form?.max_file_size ?? this.currentWorkspace?.max_file_size
+        inputProperties.mbLimit = Math.min(Math.max(field.max_file_size, 1), this.form?.max_file_size ?? this.currentWorkspace?.max_file_size)
         inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ''
       } else if (field.type === 'number' && field.is_rating) {
         inputProperties.numberOfStars = parseInt(field.rating_max_value)
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index f65153c2..88d1db59 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -60,6 +60,13 @@
                   label="Allowed file types" placeholder="jpg,jpeg,png,gif"
                   help="Comma separated values, leave blank to allow all file types"
       />
+
+      <text-input name="max_file_size" class="mt-3" :form="field" native-type="number"
+                  :min="1"
+                  :max="mbLimit"
+                  label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
+                  help="Set the maximum file size that can be uploaded"
+      />
     </div>
 
     <!--   Number Options   -->
@@ -428,6 +435,9 @@ export default {
       required: false
     }
   },
+  setup() {
+    return { currentWorkspace: computed(() => useWorkspacesStore().getCurrent), }
+  },
   data () {
     return {
       typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
@@ -442,6 +452,9 @@ export default {
     hasPlaceholder () {
       return !this.typesWithoutPlaceholder.includes(this.field.type)
     },
+    mbLimit() {
+      return this.form?.max_file_size ?? this.currentWorkspace?.max_file_size
+    },
     prefillSelectsOptions () {
       if (!['select', 'multi_select'].includes(this.field.type)) return {}
 
@@ -504,6 +517,9 @@ export default {
     if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
       this.field.max_char_limit = 2000
     }
+    if (this.field.type == 'files') {
+      this.field.max_file_size = Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
+    }
   },
 
   methods: {