Show mailbox quota in a separate column and fix usage value

dashboard/src/views/EmailMailboxesView.vue

@@ -42,6 +42,11 @@ const columns = {
     sort: true,
     hideMobile: true,
   },
+  quota: {
+    label: 'Quota',
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 
@@ -206,9 +211,12 @@ onMounted(async () => {
       <TableView :columns="columns" :model="filteredMailboxes" :busy="busy">
         <template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
         <template #usage="mailbox">
-          <span v-if="mailbox.usage">{{ prettyDecimalSize(mailbox.usage.quotaValue)  }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ prettyDecimalSize(mailbox.usage.quotaLimit) }}</span></span>
+          <span v-if="mailbox.usage">{{ prettyDecimalSize(mailbox.usage.diskSize)  }}</span>
           <span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
         </template>
+        <template #quota="mailbox">
+          <span v-if="mailbox.usage && mailbox.usage.quotaLimit">{{ prettyDecimalSize(mailbox.usage.quotaLimit) }}</span>
+        </template>
         <template #actions="mailbox">
           <div class="table-actions">
             <Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailbox)"></Button>