cloudron-box/dashboard/src/components/CatchAllSettingsItem.vue

<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';
import MailboxesModel from '../models/MailboxesModel.js';

const props = defineProps([ 'domainConfig', 'disabled' ]);

const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();
const mailboxesModel = MailboxesModel.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 mailboxesModel.list(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 ? props.domainConfig.catchAll.slice() : [];
  currentAddresses.value = props.domainConfig.catchAll ? props.domainConfig.catchAll.slice() : [];

  busy.value = false;
});

</script>

<template>
  <SettingsItem wrap>
    <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" :disabled="disabled"/>
        <Button @click="onSubmit()" tool :disabled="disabled || busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
      </InputGroup>
    </div>
  </SettingsItem>
</template>