Add mailbox search filter and show count and usage there

dashboard/src/views/EmailMailboxesView.vue

@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef, inject } from 'vue';
+import { ref, onMounted, useTemplateRef, inject, computed } from 'vue';
-import { Button, TableView, Dialog, Checkbox } from 'pankow';
+import { Button, TableView, Dialog, Checkbox, TextInput } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import { eachLimit } from 'async';
 import Section from '../components/Section.vue';
@@ -50,10 +50,30 @@ const mailboxes = ref([]);
 const domains = ref([]);
 const users = ref([]);
 const groups = ref([]);
+const searchFilter = ref('');
 
 const features = inject('features');
 const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
 
+const filteredMailboxes = computed(() => {
+  if (!searchFilter.value) return mailboxes.value;
+
+  return mailboxes.value.filter(m => {
+    const search = searchFilter.value.toLowerCase();
+
+    if (m.fullName.toLowerCase().indexOf(search) !== -1) return true;
+    if (m.ownerId.indexOf(search) !== -1) return true;
+    if (m.ownerDisplayName.indexOf(search) !== -1) return true;
+    if (m.aliases.find(a => a.domain.toLowerCase().indexOf(search) !== -1 || a.name.toLowerCase().indexOf(search) !== -1)) return true;
+
+    return false;
+  });
+});
+
+const filteredMailboxesUsage = computed(() => {
+  return filteredMailboxes.value.reduce((acc, m) => acc + (m.usage && m.usage.diskSize), 0);
+});
+
 function renderAliases(aliases) {
   return aliases.map(a => `${a.name}@${a.domain}`).join(', ');
 }
@@ -179,10 +199,11 @@ onMounted(async () => {
 
     <Section :title="$t('email.incoming.mailboxes.title')">
       <template #header-buttons>
+        <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="searchFilter"/>
         <Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
       </template>
 
-      <TableView :columns="columns" :model="mailboxes" :busy="busy" @row-click="onAddOrEdit">
+      <TableView :columns="columns" :model="filteredMailboxes" :busy="busy" @row-click="onAddOrEdit">
         <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>
@@ -195,6 +216,8 @@ onMounted(async () => {
           </div>
         </template>
       </TableView>
+
+      <div style="margin-top: 20px; font-weight: bold;">{{ $t('emails.domains.stats', { mailboxCount: filteredMailboxes.length, usage: prettyDecimalSize(filteredMailboxesUsage) }) }}</div>
     </Section>
   </div>
 </template>