cloudron-box/dashboard/src/views/EmailMailboxesView.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

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';
import MailboxDialog from '../components/MailboxDialog.vue';
import DomainsModel from '../models/DomainsModel.js';
import MailModel from '../models/MailModel.js';
import GroupsModel from '../models/GroupsModel.js';
import UsersModel from '../models/UsersModel.js';
import MailboxesModel from '../models/MailboxesModel.js';

const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();
const groupsModel = GroupsModel.create();
const mailboxesModel = MailboxesModel.create();
const usersModel = UsersModel.create();

const columns = {
  fullName: {
    label: t('email.incoming.mailboxes.name'),
    sort: true
  },
  ownerDisplayName: {
    label: t('email.incoming.mailboxes.owner'),
    sort: true,
    hideMobile: true,
  },
  aliases: {
    label: t('email.incoming.mailboxes.aliases'),
    sort: true,
    hideMobile: true,
  },
  usage: {
    label: t('email.incoming.mailboxes.usage'),
    sort: true,
    hideMobile: true,
  },
  actions: {}
};

const busy = ref(true);
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(', ');
}

const mailboxDialog = useTemplateRef('mailboxDialog');

async function onAddOrEdit(mailbox = null) {
  if (mailbox || features.value.mailboxMaxCount > mailboxes.value.length) mailboxDialog.value.open(mailbox);
  else subscriptionRequiredDialog.value.open();
}

const removeDialog = useTemplateRef('removeDialog');
const removeBusy = ref(false);
const removeError = ref('');
const removePurge = ref(false);
const removeMailbox = ref({});

function onRemove(mailbox) {
  removeBusy.value = false;
  removePurge.value = false;
  removeError.value = '';
  removeMailbox.value = mailbox;

  removeDialog.value.open();
}

async function onSubmitRemove() {
  removeBusy.value = true;
  removeError.value = '';

  const [error] = await mailboxesModel.remove(removeMailbox.value.domain, removeMailbox.value.name, removePurge.value);
  if (error) {
    removeBusy.value = false;
    removeError.value = error.body ? error.body.message : 'Internal error';
    return console.error(error);
  }

  await refresh();
  removeDialog.value.close();

  removeBusy.value = false;
}

async function refresh() {
  let tmp = [];
  async function refreshForDomain(domain) {
    let [error, result] = await mailModel.usage(domain);
    if (error) return console.error(error);

    const usage = result;

    [error, result] = await mailboxesModel.list(domain);
    if (error) throw error;

    result.forEach((m) => {
      m.fullName = m.name + '@' + m.domain;

      m.owner = users.value.find(u => u.id === m.ownerId) || null;
      if (!m.owner) m.owner = groups.value.find(g => g.id === m.ownerId) || null;

      m.ownerDisplayName = m.owner ? (m.owner.username || m.owner.name) : '';
      m.usage = usage[m.fullName] || null;
    });

    tmp = tmp.concat(result);
  }

  try {
    await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
  } catch (error) {
    return console.error(error);
  }

  mailboxes.value = tmp;
}

onMounted(async () => {
  busy.value = true;

  let [error, result] = await domainsModel.list();
  if (error) return console.error(error);

  domains.value = result;

  [error, result] = await usersModel.list();
  if (error) return console.error(error);

  users.value = result;

  [error, result] = await groupsModel.list();
  if (error) return console.error(error);

  groups.value = result;

  await refresh();

  busy.value = false;
});

</script>

<template>
  <div class="content">
    <Dialog ref="removeDialog"
      :title="$t('email.deleteMailboxDialog.title', { name: removeMailbox.name, domain: removeMailbox.domain })"
      :confirm-label="$t('email.deleteMailboxDialog.deleteAction')"
      :confirm-busy="removeBusy"
      :confirm-active="!removeBusy"
       confirm-style="danger"
      :reject-label="removeBusy ? '' : $t('main.dialog.cancel')"
       reject-style="secondary"
      @confirm="onSubmitRemove()"
    >
      <div>
        <div class="text-danger" v-if="removeError">{{ removeError }}</div>
        <div v-html="$t('email.deleteMailboxDialog.description')"></div>
        <br/>
        <Checkbox v-model="removePurge" :label="$t('email.deleteMailboxDialog.purgeMailboxCheckbox')" />
      </div>
    </Dialog>

    <MailboxDialog ref="mailboxDialog" :users="users" :groups="groups" :domains="domains" @success="refresh()"/>

    <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="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>
          <span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
        </template>
        <template #actions="mailbox">
          <div class="table-actions">
            <Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailbox)"></Button>
            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(mailbox)"></Button>
          </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>