Implement catchall settings

dashboard/src/components/CatchAllSettingsItem.vue

@@ -0,0 +1,81 @@
+<script setup>
+
+import { ref, onMounted, computed } from 'vue';
+import { MultiSelect, InputGroup, Button, FormGroup } from 'pankow';
+import SettingsItem from './SettingsItem.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import MailModel from '../models/MailModel.js';
+
+const props = defineProps([ 'domainConfig' ]);
+
+const domainsModel = DomainsModel.create();
+const mailModel = MailModel.create();
+
+const busy = ref(true);
+const addresses = ref([]);
+const currentAddresses = ref([]);
+const allAddresses = ref([]);
+
+async function onSubmit() {
+  busy.value = true;
+
+  const [error] = await mailModel.setCatchallAddresses(props.domainConfig.domain, addresses.value);
+  if (error) return console.error(error);
+
+  currentAddresses.value = addresses.value.slice();
+  busy.value = false;
+}
+
+const hasChanged = computed(() => {
+  if (currentAddresses.value.length !== addresses.value.length) return true;
+
+  const currentSorted = currentAddresses.value.toSorted();
+  const selectedSorted = addresses.value.toSorted();
+
+  for (let i = 0; i < currentSorted.length; i++) {
+    if (currentSorted[i] !== selectedSorted[i]) return true;
+  }
+
+  return false;
+});
+
+onMounted(async () => {
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  // only for inbound enabled but then we have extra rest calls
+
+  for (const domain of result) {
+    const [error, result] = await mailModel.listMailboxes(domain.domain);
+    if (error) return console.error(error);
+
+    allAddresses.value = allAddresses.value.concat(result.map(mailbox => {
+      return {
+        id: `${mailbox.name}@${mailbox.domain}`,
+        label: `${mailbox.name}@${mailbox.domain}`,
+      };
+    }));
+  }
+
+  addresses.value = props.domainConfig.catchAll.slice();
+  currentAddresses.value = props.domainConfig.catchAll.slice();
+
+  busy.value = false;
+});
+
+</script>
+
+<template>
+  <SettingsItem>
+    <FormGroup>
+      <label>{{ $t('email.incoming.catchall.title') }}</label>
+      <div v-html="$t('email.incoming.catchall.description')"></div>
+    </FormGroup>
+    <div style="display: flex; gap: 6px; align-items: center;">
+      <InputGroup>
+        <MultiSelect v-model="addresses" :options="allAddresses" option-label="label" option-key="id" />
+        <Button @click="onSubmit()" :disabled="busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
+      </InputGroup>
+    </div>
+  </SettingsItem>
+</template>