Add mailinglists ui

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>