diff --git a/dashboard/src/views/EmailMailboxesView.vue b/dashboard/src/views/EmailMailboxesView.vue index 2f6c73f7e..d2b78f997 100644 --- a/dashboard/src/views/EmailMailboxesView.vue +++ b/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 { Button, TableView, Dialog, Checkbox } from 'pankow'; +import { ref, onMounted, useTemplateRef, inject, computed } from 'vue'; +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 () => {
- + + +
{{ $t('emails.domains.stats', { mailboxCount: filteredMailboxes.length, usage: prettyDecimalSize(filteredMailboxesUsage) }) }}