Various fixes in IMAP migration pages.

fix #3820

frontend/src/components/admin/imap_migration/ProviderCreationForm.vue

@@ -77,6 +77,7 @@ const provider = ref({
 })
 
 // forms ref
+const form = ref()
 const general = ref()
 const associated = ref()
 
@@ -104,13 +105,12 @@ function getForm(step) {
 }
 
 function getVFormRef(step) {
-  console.log(provider.value)
   return formStepsComponents[step.name].value.vFormRef
 }
 
 function validateProvider() {}
 
-function submit() {
+async function submit() {
   const data = { ...provider.value }
   data.domains = []
   for (const domain of provider.value.domains) {
@@ -123,10 +123,13 @@ function submit() {
       data.domains.push(domain)
     }
   }
-  providersStore.createProvider(data).then(() => {
+  try {
+    await providersStore.createProvider(data)
     busStore.displayNotification({ msg: $gettext('Provider created') })
     close()
-  })
+  } finally {
+    form.value.working = false
+  }
 }
 </script>
 

frontend/src/components/admin/imap_migration/ProvidersList.vue

@@ -10,7 +10,7 @@
       item-value="name"
       single-expand
       show-select
-      @click:row="(item, slot) => slot.expand(!slot.isExpanded)"
+      @click:row="expandRow"
     >
       <template #top>
         <v-toolbar color="white" flat>
@@ -41,7 +41,7 @@
           <v-btn
             variant="text"
             icon="mdi-reload"
-            @click="reloadProviders"
+            @click="providersStore.getProviders()"
           ></v-btn>
           <v-spacer></v-spacer>
         </v-toolbar>
@@ -53,21 +53,31 @@
       </template>
       <template #[`item.domains`]="{ item }">
         <v-chip v-if="item.domains.length > 0">
-          {{ item.domains.length }} associated domain(s)
+          {{
+            $ngettext(
+              '%{count} associated domain',
+              '%{count} associated domains',
+              item.domains.length,
+              { count: item.domains.length }
+            )
+          }}
         </v-chip>
-        <v-chip v-else> No associated domain </v-chip>
+        <v-chip v-else>{{ $gettext('No associated domain') }}</v-chip>
       </template>
-      <template #[`expanded-item`]="{ headers, item }">
-        <td :colspan="headers.length">
-          <v-chip v-for="(domain, index) in item.domains" :key="index">
-            <template v-if="domain.new_domain">
-              {{ domain.name }} --> {{ domain.new_domain.name }}
-            </template>
-            <template v-else>
-              {{ domain.name }} --> {{ domain.name }}
-            </template>
-          </v-chip>
-        </td>
+      <template #[`expanded-row`]="{ columns, item }">
+        <tr>
+          <td :colspan="columns.length">
+            <v-chip v-for="(domain, index) in item.domains" :key="index">
+              <template v-if="domain.new_domain">
+                {{ domain.name }} -->
+                {{ domainsStore.getDomainName(domain.new_domain) }}
+              </template>
+              <template v-else>
+                {{ domain.name }} --> {{ domain.name }}
+              </template>
+            </v-chip>
+          </td>
+        </tr>
       </template>
       <template #[`item.actions`]="{ item }">
         <v-menu offset-y>
@@ -82,13 +92,14 @@
 </template>
 
 <script setup>
-import { useProvidersStore } from '@/stores'
+import { useDomainsStore, useProvidersStore } from '@/stores'
 import MenuItems from '@/components/tools/MenuItems'
 import { useGettext } from 'vue3-gettext'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { $gettext } = useGettext()
+const domainsStore = useDomainsStore()
 const providersStore = useProvidersStore()
 const router = useRouter()
 
@@ -121,6 +132,10 @@ function editProvider(provider) {
   router.push({ name: 'ProviderEdit', params: { id: provider.id } })
 }
 
+const expandRow = (event, slot) => {
+  slot.toggleExpand(slot.internalItem)
+}
+
 function getMenuItems() {
   const result = []
   result.push({
@@ -137,11 +152,8 @@ function getMenuItems() {
   return result
 }
 
-function reloadProviders() {
-  providersStore.getProviders()
-}
-
 if (!providersLoaded.value) {
-  reloadProviders()
+  await providersStore.getProviders()
 }
+await domainsStore.getDomains()
 </script>

frontend/src/components/admin/imap_migration/form_steps/ProviderAssociatedForm.vue

@@ -11,7 +11,7 @@
     <v-autocomplete
       v-model="domain.new_domain"
       :label="$gettext('Local domain (optional)')"
-      :items="localDomains"
+      :items="domainsStore.domains"
       item-title="name"
       return-object
       variant="outlined"
@@ -30,7 +30,7 @@
     @click:close="removeDomain(index)"
   >
     <template v-if="domain.new_domain">
-      {{ domain.name }} --> {{ getDomainName(domain.new_domain) }}
+      {{ domain.name }} --> {{ domainsStore.getDomainName(domain.new_domain) }}
     </template>
     <template v-else>
       {{ domain.name }}
@@ -42,13 +42,14 @@
   </v-form>
 </template>
 
-<script setup lang="js">
-import domainsApi from '@/api/domains'
+<script setup>
+import { useDomainsStore } from '@/stores'
 import providerApi from '@/api/imap_migration/providers'
 import { ref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 const { $gettext } = useGettext()
+const domainsStore = useDomainsStore()
 
 const props = defineProps({ modelValue: { type: Array, default: null } })
 const emit = defineEmits(['update:modelValue'])
@@ -60,7 +61,6 @@ const domain = ref({
   name: '',
   new_domain: '',
 })
-const localDomains = ref([])
 
 watch(
   () => props.modelValue,
@@ -106,11 +106,6 @@ function onKeyDown(e) {
   }
 }
 
-function getDomainName(domainId) {
-  console.log(localDomains.value)
-  return localDomains.value.find((domain) => domain.pk === domainId).name
-}
-
 function atLeastOneAssDomain() {
   if (domains.value.length === 0) {
     return $gettext('You need to bind at least one domain to the provider.')
@@ -120,6 +115,7 @@ function atLeastOneAssDomain() {
 
 defineExpose({ vFormRef })
 
-const resp = await domainsApi.getDomains({ page_size: 0 })
-localDomains.value = resp.data.results
+if (!domainsStore.domainsLoaded) {
+  await domainsStore.getDomains()
+}
 </script>

frontend/src/stores/domains.store.js

@@ -22,9 +22,17 @@ export const useDomainsStore = defineStore('domains', () => {
     }
   }
 
+  function getDomainName(domainId) {
+    if (typeof domainId === 'object') {
+      return domainId.name
+    }
+    return domains.value.find((domain) => domain.pk === domainId).name
+  }
+
   return {
     domainsLoaded,
     domains,
+    getDomainName,
     getDomains,
     $reset,
   }