Show mail domain change progress

dashboard/src/components/SettingsItem.vue

@@ -3,23 +3,31 @@
 
 <template>
   <div class="settings-item">
-    <slot></slot>
+    <div class="settings-item-body">
+      <slot></slot>
+    </div>
+    <div class="setting-item-bottom">
+      <slot name="bottom"></slot>
+    </div>
   </div>
 </template>
 
 <style>
 
 .settings-item {
-  display: flex;
-  justify-content: space-between;
   border-radius: var(--pankow-border-radius);
   padding: 10px;
   margin-bottom: 10px;
+}
+
+.settings-item-body {
+  display: flex;
+  justify-content: space-between;
   gap: 20px;
 }
 
 @media (max-width: 576px) {
-  .settings-item {
+  .settings-item-body {
     flex-wrap: wrap;
   }
 }
@@ -32,4 +40,9 @@
   margin-top: 0;
 }
 
+.setting-item-bottom {
+  width: 100%;
+  margin-top: 10px;
+}
+
 </style>

dashboard/src/models/TasksModel.js

@@ -7,7 +7,7 @@ function create() {
   const accessToken = localStorage.token;
 
   return {
-    async wait(id) {
+    async wait(id, progressHandler = function () {}) {
       while(true) {
         let result;
         try {
@@ -16,8 +16,11 @@ function create() {
           return [e];
         }
 
+        console.log(result.body)
         if (!result.body.active) return [result.body.error, result.body.result];
 
+        progressHandler(result.body);
+
         await sleep(2000);
       }
     },

dashboard/src/views/EmailsView.vue

@@ -5,17 +5,19 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, TableView, InputDialog, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
+import { Button, TableView, ProgressBar, InputDialog, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
 import ProfileModel from '../models/ProfileModel.js';
+import TasksModel from '../models/TasksModel.js';
 
 const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
 const profileModel = ProfileModel.create();
+const tasksModel = TasksModel.create();
 
 const inputDialog = useTemplateRef('inputDialog');
 const columns = {
@@ -36,8 +38,6 @@ const blocklist = ref([]);
 const allowlist = ref([]);
 const dnsblZones = ref([]);
 const dnsblZonesString = ref('');
-const locationSubdomain = ref('');
-const locationDomain = ref('');
 const currentLocationSubdomain = ref('');
 const currentLocationDomain = ref('');
 const spamCustomConfig = ref('');
@@ -129,6 +129,33 @@ async function onSendTestMail(domain) {
   window.pankow.notify({ text: 'Mail sent', type: 'success' });
 }
 
+
+// mail server location
+const locationSubdomain = ref('');
+const locationDomain = ref('');
+const locationChangeBusy = ref(false);
+const locationChangeMessage = ref('');
+const locationChangeProgress = ref(0);
+
+async function onChangeMailDomain() {
+  locationChangeBusy.value = true;
+  locationChangeMessage.value = '';
+  locationChangeProgress.value = 0;
+
+  const [error, result] = await mailModel.setLocation(locationSubdomain.value, locationDomain.value);
+  if (error) return console.error(error);
+
+  await tasksModel.wait(result, (result) => {
+    locationChangeMessage.value = result.message;
+    locationChangeProgress.value = result.percent;
+  });
+
+  locationChangeBusy.value = false;
+  locationChangeMessage.value = '';
+  locationChangeProgress.value = 0;
+}
+
+
 async function onChangeMailboxSharing(value) {
   const [error] = await mailModel.setMailboxSharing(value);
   if (error) {
@@ -250,17 +277,21 @@ onMounted(async () => {
 
     <Section :title="$t('emails.settings.title')">
       <SettingsItem>
-        <FormGroup>
+        <FormGroup style="flex-grow: 1;">
           <label>{{ $t('emails.settings.location') }}</label>
           <div v-html="$t('emails.changeDomainDialog.description')"></div>
         </FormGroup>
         <div style="display: flex; gap: 6px; align-items: center;">
           <InputGroup>
-            <TextInput v-model="locationSubdomain" />
-            <SingleSelect v-model="locationDomain" :options="domains" option-key="domain" option-label="domain"/>
+            <TextInput v-model="locationSubdomain" :disabled="locationChangeBusy"/>
+            <SingleSelect v-model="locationDomain" :options="domains" option-key="domain" option-label="domain" :disabled="locationChangeBusy"/>
           </InputGroup>
-          <Button tool :plain="(currentLocationSubdomain !== locationSubdomain || currentLocationDomain !== locationDomain) ? null : true" :disabled="currentLocationSubdomain === locationSubdomain && currentLocationDomain === locationDomain">{{ $t('main.dialog.save') }}</Button>
+          <Button tool @click="onChangeMailDomain()" :plain="(currentLocationSubdomain !== locationSubdomain || currentLocationDomain !== locationDomain) ? null : true" :disabled="locationChangeBusy || (currentLocationSubdomain === locationSubdomain && currentLocationDomain === locationDomain)">{{ $t('main.dialog.save') }}</Button>
         </div>
+        <template #bottom v-if="locationChangeProgress">
+          <ProgressBar :value="locationChangeProgress"/>
+          {{ locationChangeMessage }}
+        </template>
       </SettingsItem>
 
       <SettingsItem>