Add mailinglists ui

dashboard/src/views/MailboxesView.vue

@@ -86,7 +86,7 @@ async function refresh() {
 
     const usage = result;
 
-    [error, result] = await mailModel.listMailboxes(domain);
+    [error, result] = await mailboxesModel.list(domain);
     if (error) throw error;
 
     result.forEach((m) => {
@@ -171,7 +171,7 @@ onMounted(async () => {
         </template>
         <template #actions="mailbox">
           <div class="table-actions">
-            <Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailboxe)"></Button>
+            <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>

dashboard/src/views/MailinglistsView.vue

@@ -0,0 +1,143 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, TableView, Dialog } from 'pankow';
+import { eachLimit } from 'async';
+import Section from '../components/Section.vue';
+import MailinglistDialog from '../components/MailinglistDialog.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import MailinglistsModel from '../models/MailinglistsModel.js';
+
+const domainsModel = DomainsModel.create();
+const mailinglistsModel = MailinglistsModel.create();
+
+const columns = {
+  membersOnly: {},
+  fullName: { label: t('email.incoming.mailinglists.name'), sort: true },
+  members: { label: t('email.incoming.mailinglists.members'), sort: true },
+  actions: {}
+};
+
+const busy = ref(true);
+const mailinglists = ref([]);
+const domains = ref([]);
+
+const mailinglistDialog = useTemplateRef('mailinglistDialog');
+
+async function onAddOrEdit(mailinglist = null) {
+  mailinglistDialog.value.open(mailinglist);
+}
+
+const removeDialog = useTemplateRef('removeDialog');
+const removeBusy = ref(false);
+const removeError = ref('');
+const removeMailinglist = ref({});
+
+function onRemove(mailinglist) {
+  removeBusy.value = false;
+  removeError.value = '';
+  removeMailinglist.value = mailinglist;
+
+  removeDialog.value.open();
+}
+
+async function onSubmitRemove() {
+  removeBusy.value = true;
+  removeError.value = '';
+
+  const [error] = await mailinglistsModel.remove(removeMailinglist.value.domain, removeMailinglist.value.name);
+  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) {
+    const [error, result] = await mailinglistsModel.list(domain);
+    if (error) throw error;
+
+    result.forEach((m) => {
+      m.fullName = m.name + '@' + m.domain;
+    });
+
+    tmp = tmp.concat(result);
+  }
+
+  try {
+    await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
+  } catch (error) {
+    return console.error(error);
+  }
+
+  mailinglists.value = tmp;
+}
+
+onMounted(async () => {
+  busy.value = true;
+
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+
+  await refresh();
+
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <div>
+    <Dialog ref="removeDialog"
+      :title="$t('email.deleteMailinglistDialog.title', { name: removeMailinglist.name, domain: removeMailinglist.domain })"
+      :confirm-label="$t('email.deleteMailinglistDialog.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.deleteMailinglistDialog.description', { name: removeMailinglist.name, domain: removeMailinglist.domain })"></div>
+      </div>
+    </Dialog>
+
+    <MailinglistDialog ref="mailinglistDialog" :domains="domains" @success="refresh()"/>
+
+    <Section :title="$t('email.incoming.mailinglists.title')">
+      <template #header-buttons>
+        <Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
+      </template>
+
+      <TableView :columns="columns" :model="mailinglists" :busy="busy" @row-click="onAddOrEdit">
+        <template #membersOnly="mailinglist">
+          <i class="fas" :class="{ 'fa-door-closed': mailinglist.membersOnly, 'fa-door-open': !mailinglist.membersOnly }" v-tooltip="$t(mailinglist.membersOnly ? 'email.incoming.mailinglists.everyoneTooltip' : 'email.incoming.mailinglists.membersOnlyTooltip')"></i>
+        </template>
+        <template #members="mailinglist">
+          {{ mailinglist.members.join(', ') }}
+        </template>
+        <template #actions="mailinglist">
+          <div class="table-actions">
+            <Button tool secondary small icon="fa fa-pencil-alt" @click.stop="onAddOrEdit(mailinglist)"></Button>
+            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(mailinglist)"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>