jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add mailbox search filter and show count and usage there

Browse Source
This commit is contained in:
Johannes Zellner
2025-06-27 14:02:17 +02:00
parent 9ced45c714
commit 2723f2150b
1 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dashboard/src/views/EmailMailboxesView.vue
View File

@@ -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 () => {
<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>