103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
const i18n = useI18n();
|
||
|
|
const t = i18n.t;
|
||
|
|
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import { Button, TableView } from 'pankow';
|
||
|
|
import { eachLimit } from 'async';
|
||
|
|
import Section from '../components/Section.vue';
|
||
|
|
import DomainsModel from '../models/DomainsModel.js';
|
||
|
|
import MailModel from '../models/MailModel.js';
|
||
|
|
|
||
|
|
const domainsModel = DomainsModel.create();
|
||
|
|
const mailModel = MailModel.create();
|
||
|
|
|
||
|
|
const columns = {
|
||
|
|
fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
|
||
|
|
ownerId: { label: t('email.incoming.mailboxes.owner'), sort: true },
|
||
|
|
aliases: { label: t('email.incoming.mailboxes.aliases'), sort: true },
|
||
|
|
usage: { label: t('email.incoming.mailboxes.usage'), sort: true },
|
||
|
|
actions: {}
|
||
|
|
};
|
||
|
|
|
||
|
|
const busy = ref(true);
|
||
|
|
const mailboxes = ref([]);
|
||
|
|
const domains = ref([]);
|
||
|
|
|
||
|
|
function renderAliases(aliases) {
|
||
|
|
return aliases.map(a => `${a.name}@${a.domain}`).join(', ');
|
||
|
|
}
|
||
|
|
|
||
|
|
// function updateMailUsage(mailboxName, quotaLimit) {
|
||
|
|
// if (!$scope.mailUsage) $scope.mailUsage = {};
|
||
|
|
// if (!$scope.mailUsage[mailboxName]) $scope.mailUsage[mailboxName] = {};
|
||
|
|
// $scope.mailUsage[mailboxName].quotaLimit = quotaLimit;
|
||
|
|
// }
|
||
|
|
|
||
|
|
async function refreshForDomain(domain) {
|
||
|
|
let [error, result] = await mailModel.usage(domain);
|
||
|
|
if (error) return console.error(error);
|
||
|
|
|
||
|
|
const usage = result;
|
||
|
|
|
||
|
|
console.log(usage);
|
||
|
|
|
||
|
|
[error, result] = await mailModel.listMailboxes(domain);
|
||
|
|
if (error) throw error;
|
||
|
|
|
||
|
|
result.forEach((m) => {
|
||
|
|
m.fullName = m.name + '@' + m.domain; // to make it simple for the ui
|
||
|
|
// m.owner = $scope.owners.find(function (o) { return o.id === m.ownerId; }); // owner may not exist
|
||
|
|
// m.ownerDisplayName = m.owner ? m.owner.display : ''; // this meta property is set when we get the user list
|
||
|
|
});
|
||
|
|
|
||
|
|
mailboxes.value = mailboxes.value.concat(result);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function refresh() {
|
||
|
|
busy.value = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
|
||
|
|
} catch (error) {
|
||
|
|
return console.error(error);
|
||
|
|
}
|
||
|
|
|
||
|
|
busy.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const [error, result] = await domainsModel.list();
|
||
|
|
if (error) return console.error(error);
|
||
|
|
|
||
|
|
domains.value = result;
|
||
|
|
|
||
|
|
await refresh();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<Section :title="$t('email.incoming.mailboxes.title')">
|
||
|
|
<template #header-buttons>
|
||
|
|
<Button>{{ $t('email.incoming.mailboxes.addAction') }}</Button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<TableView :columns="columns" :model="mailboxes" :busy="busy">
|
||
|
|
<template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
|
||
|
|
<template #usage="mailbox">
|
||
|
|
<span v-if="mailUsage !== null">
|
||
|
|
<!-- {{ mailUsage[mailbox.fullName].quotaValue | prettyDecimalSize }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ mailUsage[mailbox.fullName].quotaLimit | prettyDecimalSize }}</span> -->
|
||
|
|
</span>
|
||
|
|
<span ng-show="mailUsage === null">
|
||
|
|
<!-- {{ 'main.loadingPlaceholder' | tr }} ... -->
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</TableView>
|
||
|
|
</Section>
|
||
|
|
</div>
|
||
|
|
</template>
|