Merge pull request #3753 from modoboa/frontend-improvements

Various frontend improvements.

frontend/src/components/admin/domains/DomainAliasForm.vue

@@ -55,7 +55,7 @@ import domainsApi from '@/api/domains'
 
 const { $gettext } = useGettext()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'aliasDeleted'])
 const { displayNotification } = useBusStore()
 
 const props = defineProps({
@@ -82,6 +82,7 @@ async function deleteAlias() {
   try {
     await domainsApi.deleteDomainAlias(props.domainAlias.pk)
     displayNotification({ msg: $gettext('Domain alias deleted') })
+    emit('aliasDeleted')
     emit('close')
   } finally {
     working.value = false

frontend/src/components/admin/domains/DomainEditForm.vue

@@ -157,12 +157,13 @@
       </v-expansion-panel>
     </v-expansion-panels>
     <div class="mt-4 d-flex justify-end">
-      <v-btn :loading="working" @click="router.go(-1)">
+      <v-btn :loading="working" variant="outlined" @click="router.go(-1)">
         {{ $gettext('Cancel') }}
       </v-btn>
       <v-btn
         class="ml-4"
         color="primary darken-1"
+        variant="outlined"
         :loading="working"
         @click="save"
       >

frontend/src/components/admin/domains/DomainList.vue

@@ -2,13 +2,13 @@
   <v-card class="mt-6">
     <v-data-table
       v-model="selected"
-      :expanded="expanded"
+      v-model:expanded="expanded"
       :headers="domainHeaders"
       :items="domains"
       item-value="pk"
       :search="search"
       show-select
-      expand-on-click
+      show-expand
       :loading="loading"
     >
       <template #top>
@@ -168,6 +168,7 @@
       <DomainAliasForm
         :domain-alias="selectedDomainAlias"
         @close="closeDomainAliasForm"
+        @alias-deleted="reloadDomains"
       />
     </v-dialog>
     <v-dialog v-model="showAdminList" persistent max-width="800px">
@@ -239,6 +240,7 @@ const expanded = ref([])
 async function reloadDomains() {
   aliases.value = {}
   loading.value = true
+  expanded.value = []
   try {
     const resp = await domainsApi.getDomains()
     domains.value = resp.data
@@ -296,6 +298,7 @@ async function loadAliases(item, internalItem, isItemExpanded, toggleExpand) {
     const resp = await domainsApi.getDomainAliases(item.name)
     aliases.value[item.name] = resp.data
   }
+  toggleExpand(internalItem)
 }
 
 function openAdminList(domain) {

frontend/src/components/admin/identities/AccountCreationForm.vue

@@ -61,7 +61,7 @@
   </CreationForm>
 </template>
 
-<script setup lang="js">
+<script setup>
 import accountsApi from '@/api/accounts'
 import CreationForm from '@/components/tools/CreationForm.vue'
 import AccountRoleForm from './form_steps/AccountRoleForm.vue'
@@ -70,16 +70,18 @@ import AccountMailboxForm from './form_steps/AccountMailboxForm.vue'
 import AccountAliasForm from './form_steps/AccountAliasForm.vue'
 import constants from '@/constants.json'
 
+import { useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { ref, computed } from 'vue'
 import { useBusStore, useDomainsStore } from '@/stores'
 import { usePermissions } from '@/composables/permissions'
 
+const router = useRouter()
 const { $gettext } = useGettext()
 const { canSetRole } = usePermissions()
 const busStore = useBusStore()
 const domainsStore = useDomainsStore()
-const emit = defineEmits(['close', 'created'])
+const emit = defineEmits(['close'])
 
 const needsMailbox = computed(
   () => account.value.username && account.value.username.indexOf('@') !== -1
@@ -274,8 +276,9 @@ async function submit() {
   delete data.new_password
   delete data.password_confirmation
   try {
-    await accountsApi.create(data)
-    emit('created')
+    const resp = await accountsApi.create(data)
+    router.push({ name: 'AccountDetail', params: { id: resp.data.pk } })
+    busStore.displayNotification({ msg: $gettext('Account created') })
     close()
   } finally {
     form.value.working = false

frontend/src/components/admin/identities/AliasCreationForm.vue

@@ -35,7 +35,7 @@ const { $gettext } = useGettext()
 const busStore = useBusStore()
 const router = useRouter()
 
-const emit = defineEmits(['close', 'created'])
+const emit = defineEmits(['close'])
 
 //Forms refs
 const form = ref()
@@ -145,8 +145,14 @@ async function submit() {
   }
 
   try {
-    await aliasesApi.create(alias.value)
-    emit('created')
+    const resp = await aliasesApi.create(alias.value)
+    router.push({
+      name: 'AliasDetail',
+      params: {
+        id: resp.data.pk,
+      },
+    })
+    busStore.displayNotification({ msg: $gettext('Alias created') })
     close()
   } finally {
     form.value.working = false

frontend/src/components/admin/identities/AliasEditForm.vue

@@ -65,12 +65,13 @@
       </v-expansion-panel>
     </v-expansion-panels>
     <div class="mt-4 d-flex justify-end">
-      <v-btn :loading="working" @click="$router.go(-1)">
+      <v-btn :loading="working" variant="outlined" @click="$router.go(-1)">
         {{ $gettext('Cancel') }}
       </v-btn>
       <v-btn
         class="ml-4"
         color="primary darken-1"
+        variant="outlined"
         :loading="working"
         @click="save"
       >
@@ -80,7 +81,7 @@
   </div>
 </template>
 
-<script setup lang="js">
+<script setup>
 import AliasGeneralForm from './form_steps/AliasGeneralForm.vue'
 import AliasRecipientForm from './form_steps/AliasRecipientForm'
 import LoadingData from '@/components/tools/LoadingData.vue'