Add mailinglists ui

dashboard/src/Index.vue

@@ -13,6 +13,7 @@ import EmailDomainView from './views/EmailDomainView.vue';
 import EmailsEventlogView from './views/EmailsEventlogView.vue';
 import EventlogView from './views/EventlogView.vue';
 import MailboxesView from './views/MailboxesView.vue';
+import MailinglistsView from './views/MailinglistsView.vue';
 import NetworkView from './views/NetworkView.vue';
 import ProfileView from './views/ProfileView.vue';
 import ServicesView from './views/ServicesView.vue';
@@ -34,6 +35,7 @@ const VIEWS = {
   EMAIL_DOMAIN: 'email-domain',
   EMAILS_EVENTLOG: 'emails-eventlog',
   EMAILS_MAILBOXES: 'emails-mailboxes',
+  EMAILS_MAILINGLISTS: 'emails-mailinglists',
   EVENTLOG: 'eventlog',
   NETWORK: 'network',
   PROFILE: 'profile',
@@ -69,6 +71,8 @@ function onHashChange() {
     view.value = VIEWS.EMAILS_EVENTLOG;
   } else if (v === VIEWS.EMAILS_MAILBOXES) {
     view.value = VIEWS.EMAILS_MAILBOXES;
+  } else if (v === VIEWS.EMAILS_MAILINGLISTS) {
+    view.value = VIEWS.EMAILS_MAILINGLISTS;
   } else if (v.indexOf(VIEWS.EMAIL) === 0) {
     view.value = VIEWS.EMAIL_DOMAIN;
   } else if (v === VIEWS.EVENTLOG) {
@@ -126,6 +130,7 @@ onMounted(async () => {
     <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
     <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
     <MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
+    <MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
     <NetworkView v-else-if="view === VIEWS.NETWORK" />
     <ProfileView v-else-if="view === VIEWS.PROFILE" />
     <ServicesView v-else-if="view === VIEWS.SERVICES" />

dashboard/src/components/CatchAllSettingsItem.vue

@@ -5,11 +5,13 @@ import { MultiSelect, InputGroup, Button, FormGroup } from 'pankow';
 import SettingsItem from './SettingsItem.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
+import MailboxesModel from '../models/MailboxesModel.js';
 
 const props = defineProps([ 'domainConfig' ]);
 
 const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
+const mailboxesModel = MailboxesModel.create();
 
 const busy = ref(true);
 const addresses = ref([]);
@@ -46,7 +48,7 @@ onMounted(async () => {
   // only for inbound enabled but then we have extra rest calls
 
   for (const domain of result) {
-    const [error, result] = await mailModel.listMailboxes(domain.domain);
+    const [error, result] = await mailboxesModel.list(domain.domain);
     if (error) return console.error(error);
 
     allAddresses.value = allAddresses.value.concat(result.map(mailbox => {

dashboard/src/components/MailinglistDialog.vue

@@ -0,0 +1,106 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Dialog, TextInput, FormGroup, Checkbox, InputGroup, SingleSelect } from 'pankow';
+import MailinglistsModel from '../models/MailinglistsModel.js';
+
+const emit = defineEmits([ 'success' ]);
+const props = defineProps([ 'domains' ]);
+
+const mailinglistsModel = MailinglistsModel.create();
+
+const dialog = useTemplateRef('dialog');
+const busy = ref(false);
+const formError = ref('');
+const name = ref('');
+const domain = ref('');
+const mailinglist = ref(null);
+const membersText = ref('');
+const membersOnly = ref(false);
+const active = ref(false);
+
+async function onSubmit() {
+  busy.value = true;
+  formError.value = '';
+
+  const data = {
+    members: membersText.value.split('\n').map(m => m.trim()).filter(m => m),
+    membersOnly: membersOnly.value,
+    active: active.value,
+  };
+
+  if (mailinglist.value) {
+    const [error] = await mailinglistsModel.update(domain.value, name.value, data);
+    if (error) {
+      busy.value = false;
+      formError.value = error.body ? error.body.message : 'Internal error';
+      return console.error(error);
+    }
+  } else {
+    const [error] = await mailinglistsModel.add(domain.value, name.value, data);
+    if (error) {
+      busy.value = false;
+      formError.value = error.body ? error.body.message : 'Internal error';
+      return console.error(error);
+    }
+  }
+
+  emit('success');
+  dialog.value.close();
+  busy.value = false;
+}
+
+defineExpose({
+  async open(m = null) {
+    busy.value = false;
+    formError.value = '';
+    mailinglist.value = m;
+
+    name.value = m ? m.name : '';
+    domain.value = m ? m.domain : '';
+    membersText.value = m ? m.members.join('\n') : '';
+    membersOnly.value = m ? m.membersOnly : false;
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="mailinglist ? $t('email.editMailboxDialog.title', { name: mailinglist.name, domain: mailinglist.domain }) : $t('email.addMailboxDialog.title')"
+    :confirm-label="$t(mailinglist ? 'main.dialog.save' : 'email.incoming.mailboxes.addAction')"
+    :confirm-busy="busy"
+    :confirm-active="!busy && name !== '' && domain !== '' && membersText !== ''"
+     reject-style="secondary"
+    :reject-label="busy ? null : $t('main.dialog.cancel')"
+    @confirm="onSubmit()"
+  >
+    <div>
+      <div class="has-error" v-if="formError">{{ formError }}</div>
+
+      <form @submit.prevent="onSubmit()" novalidate autocomplete="off">
+         <fieldset :disabled="busy">
+          <input type="submit" style="display: none;" :disabled="!name || !domain"/>
+
+          <FormGroup v-if="!mailinglist">
+            <label for="nameInput">{{ $t('email.addMailinglistDialog.name') }}</label>
+            <InputGroup>
+              <TextInput id="nameInput" style="flex-grow: 1;" v-model="name"/>
+              <SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" />
+            </InputGroup>
+          </FormGroup>
+
+          <FormGroup>
+            <label for="membersInput">{{ $t('email.addMailinglistDialog.members') }}</label>
+            <textarea id="membersInput" v-model="membersText" rows="5"></textarea>
+          </FormGroup>
+
+          <Checkbox v-model="membersOnly" :label="$t('email.addMailinglistDialog.membersOnlyCheckbox')"/><br/>
+          <Checkbox v-model="active" :label="$t('email.updateMailinglistDialog.activeCheckbox')"/><br/>
+        </fieldset>
+      </form>
+    </div>
+  </Dialog>
+</template>

dashboard/src/models/MailModel.js

@@ -39,28 +39,6 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.count];
     },
-    async listMailboxes(domain, search = '', page = 1, per_page = 1000) {
-      let result;
-      try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes`, { search, page, per_page, access_token: accessToken });
-      } catch (e) {
-        return [e];
-      }
-
-      if (result.status !== 200) return [result];
-      return [null, result.body.mailboxes];
-    },
-    async getMailbox(domain, mailboxName) {
-      let result;
-      try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/mailboxes/${mailboxName}`, { access_token: accessToken });
-      } catch (e) {
-        return [e];
-      }
-
-      if (result.status !== 200) return [result];
-      return [null, result.body.mailbox];
-    },
     async setCatchallAddresses(domain, addresses) {
       let result;
       try {

dashboard/src/models/MailinglistsModel.js

@@ -0,0 +1,82 @@
+
+import { fetcher } from 'pankow';
+import { API_ORIGIN } from '../constants.js';
+
+function create() {
+  const accessToken = localStorage.token;
+
+  return {
+    async list(domain) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/lists`, { page: 1, per_page: 1000, access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.lists];
+    },
+    async get(domain, name) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/mail/${domain}/lists/${name}`, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.list];
+    },
+    async add(domain, name, options) {
+      const data = {
+        name: name,
+        members: options.members || [],
+        membersOnly: !!options.membersOnly,
+        active: !!options.active,
+      };
+
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/lists`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 201) return [result];
+      return [null];
+    },
+    async update(domain, name, options) {
+      const data = {
+        members: options.members || [],
+        membersOnly: !!options.membersOnly,
+        active: !!options.active,
+      };
+
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/lists/${name}`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 204) return [result];
+      return [null];
+    },
+    async remove(domain, name) {
+      let result;
+      try {
+        result = await fetcher.del(`${API_ORIGIN}/api/v1/mail/${domain}/lists/${name}`, null, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 204) return [result];
+      return [null];
+    },
+  };
+}
+
+export default {
+  create,
+};

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>