Merge pull request #3793 from modoboa/fix/imap-migration-ui

Fixed various issues in IMAP migration UI

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

@@ -12,6 +12,17 @@
     >
       <template #top>
         <v-toolbar color="white" flat>
+          <v-text-field
+            v-model="search"
+            prepend-inner-icon="mdi-magnify"
+            placeholder="Search"
+            filled
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="flex-grow-0 w-33 mr-4"
+          ></v-text-field>
+
           <v-menu location="bottom">
             <template #activator="{ props }">
               <v-btn
@@ -31,15 +42,6 @@
             @click="getMigrations()"
           ></v-btn>
           <v-spacer></v-spacer>
-          <v-text-field
-            v-model="search"
-            prepend-inner-icon="mdi-magnify"
-            placeholder="Search"
-            filled
-            variant="outlined"
-            density="compact"
-            hide-details
-          ></v-text-field>
         </v-toolbar>
       </template>
       <template #[`item.mailbox`]="{ item }">

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

@@ -54,16 +54,21 @@
     </v-expansion-panel>
   </v-expansion-panels>
   <div class="mt-4 d-flex justify-end">
-    <v-btn @click="$router.go(-1)">
+    <v-btn variant="outlined" @click="$router.go(-1)">
       {{ $gettext('Cancel') }}
     </v-btn>
-    <v-btn class="ml-4" color="primary darken-1" @click="save">
+    <v-btn
+      class="ml-4"
+      color="primary darken-1"
+      variant="outlined"
+      @click="save"
+    >
       {{ $gettext('Save') }}
     </v-btn>
   </div>
 </template>
 
-<script setup lang="js">
+<script setup>
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useBusStore, useProvidersStore } from '@/stores'
@@ -105,13 +110,13 @@ watch(
 )
 
 async function save() {
-  if (generalForm.value !== undefined) {
+  if (generalForm.value) {
     const { valid } = await generalForm.value.vFormRef.validate()
     if (!valid) {
       return
     }
   }
-  if (associatedForm.value !== undefined) {
+  if (associatedForm.value) {
     const { valid } = await associatedForm.value.vFormRef.validate()
     if (!valid) {
       return

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

@@ -14,6 +14,17 @@
     >
       <template #top>
         <v-toolbar color="white" flat>
+          <v-text-field
+            v-model="search"
+            prepend-inner-icon="mdi-magnify"
+            :placeholder="$gettext('Search')"
+            single-line
+            variant="outlined"
+            hide-details
+            density="compact"
+            class="flex-grow-0 w-33 mr-4"
+          />
+          <slot name="extraActions" />
           <v-menu location="bottom">
             <template #activator="{ props }">
               <v-btn
@@ -33,14 +44,6 @@
             @click="reloadProviders"
           ></v-btn>
           <v-spacer></v-spacer>
-          <v-text-field
-            v-model="search"
-            prepend-inner-icon="mdi-magnify"
-            :placeholder="$gettext('Search')"
-            single-line
-            variant="outlined"
-            hide-details
-          />
         </v-toolbar>
       </template>
 
@@ -78,7 +81,7 @@
   </v-card>
 </template>
 
-<script setup lang="js">
+<script setup>
 import { useProvidersStore } from '@/stores'
 import MenuItems from '@/components/tools/MenuItems'
 import { useGettext } from 'vue3-gettext'

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

@@ -4,6 +4,7 @@
       v-model="provider.name"
       :label="$gettext('Provider name')"
       variant="outlined"
+      density="compact"
       :rules="[rules.required]"
     />
     <v-text-field
@@ -11,12 +12,14 @@
       :label="$gettext('Address (hostname or IP)')"
       :rules="[rules.required]"
       variant="outlined"
+      density="compact"
     />
     <v-text-field
       v-model="provider.port"
       :label="$gettext('IMAP Port')"
       type="number"
       variant="outlined"
+      density="compact"
       :rules="[rules.required, rules.portNumber]"
     />
     <v-switch

frontend/src/stores/providers.store.js

@@ -44,7 +44,7 @@ export const useProvidersStore = defineStore('providers', () => {
   async function deleteProvider(id) {
     providersLoaded.value = false
     return providersApi
-      .deleteProvider({ id: id })
+      .deleteProvider(id)
       .then((response) => {
         delete providers.value[id]
         busStore.displayNotification({

frontend/src/views/admin/imap_migration/ProvidersView.vue

@@ -2,18 +2,20 @@
   <div>
     <v-toolbar flat>
       <v-toolbar-title> {{ $gettext('Providers') }} </v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        color="primary"
-        variant="flat"
-        prepend-icon="mdi-plus"
-        @click="showProviderWizard = true"
-      >
-        {{ $gettext('New') }}
-      </v-btn>
     </v-toolbar>
 
-    <ProvidersList />
+    <ProvidersList>
+      <template #extraActions>
+        <v-btn
+          color="primary"
+          variant="outlined"
+          prepend-icon="mdi-plus"
+          @click="showProviderWizard = true"
+        >
+          {{ $pgettext('male', 'New') }}
+        </v-btn>
+      </template>
+    </ProvidersList>
 
     <v-dialog
       v-model="showProviderWizard"