From 2ab6748ccd9135128ca4657b754f87a43a381010 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Mon, 9 Dec 2024 15:04:12 +0100
Subject: [PATCH] fix: some regressions in departments and members management

---
 ui/src/components/add-department-menu.vue     |  2 +-
 ui/src/components/add-member-menu.vue         |  5 ++-
 ui/src/components/delete-department-menu.vue  | 27 ++++++-------
 ui/src/components/edit-department-menu.vue    | 16 ++++----
 .../components/organization-departments.vue   | 40 ++++++++++---------
 5 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/ui/src/components/add-department-menu.vue b/ui/src/components/add-department-menu.vue
index 27a30e87..f45552f0 100644
--- a/ui/src/components/add-department-menu.vue
+++ b/ui/src/components/add-department-menu.vue
@@ -81,7 +81,7 @@ const editDepartment = ref({ ...emptyDepartment })
 
 watch(menu, () => {
   if (!menu.value) return
-  editDepartmentMenu.value = { ...emptyDepartment }
+  editDepartment.value = { ...emptyDepartment }
   createForm.value?.reset()
 })
 
diff --git a/ui/src/components/add-member-menu.vue b/ui/src/components/add-member-menu.vue
index c964c765..23bb9065 100644
--- a/ui/src/components/add-member-menu.vue
+++ b/ui/src/components/add-member-menu.vue
@@ -86,7 +86,7 @@
           />
         </v-form>
         <v-alert
-          :value="!!link"
+          v-if="!!link"
           type="warning"
           variant="outlined"
         >
@@ -107,7 +107,8 @@
         </v-btn>
         <v-btn
           :disabled="disableInvite || !invitation || !invitation.email || !invitation.role"
-          color="warning"
+          color="primary"
+          variant="flat"
           @click="confirmInvitation()"
         >
           {{ $t('common.confirmOk') }}
diff --git a/ui/src/components/delete-department-menu.vue b/ui/src/components/delete-department-menu.vue
index ec473fac..e5613189 100644
--- a/ui/src/components/delete-department-menu.vue
+++ b/ui/src/components/delete-department-menu.vue
@@ -52,7 +52,7 @@
           :disabled="!members || !!members.count || patchOrganization.loading.value"
           color="warning"
           variant="flat"
-          @click="confirmDelete"
+          @click="confirmDelete.execute()"
         >
           {{ $t('common.confirmOk') }}
         </v-btn>
@@ -74,28 +74,25 @@ const { patchOrganization } = useStore()
 const { t } = useI18n()
 
 const menu = ref(false)
-const members = ref<any>()
 
 watch(menu, async () => {
   if (!menu.value) {
-    members.value = null
+    fetchMembers.data.value = null
     return
   }
-  fetchMembers()
+  fetchMembers.refresh()
 })
 
-const fetchMembers = withUiNotif(async () => {
-  members.value = await $fetch(`organizations/${orga.id}/members`, {
-    query: {
-      params: {
-        size: 0,
-        department: department.id
-      }
-    }
-  })
-})
+const fetchMembers = useFetch<{ count: number, results: any[] }>(
+  () => `${$apiPath}/organizations/${orga.id}/members`,
+  {
+    query: computed(() => ({ size: 0, department: department.id })),
+    watch: false,
+  }
+)
+const members = computed(() => fetchMembers.data.value)
 
-const confirmDelete = withUiNotif(async () => {
+const confirmDelete = useAsyncAction(async () => {
   menu.value = false
   const departments = (orga.departments ?? []).filter(d => d.id !== department.id)
   await patchOrganization.execute(orga.id, { departments }, t('common.modificationOk'))
diff --git a/ui/src/components/edit-department-menu.vue b/ui/src/components/edit-department-menu.vue
index 26394586..f6f8e6d7 100644
--- a/ui/src/components/edit-department-menu.vue
+++ b/ui/src/components/edit-department-menu.vue
@@ -7,17 +7,15 @@
       <v-btn
         :title="$t('pages.organization.editDepartment', {departmentLabel})"
         variant="text"
-        icon
+        :icon="mdiPencil"
         v-bind="props"
-      >
-        <v-icon :icon="mdiPencil" />
-      </v-btn>
+      />
     </template>
 
     <v-card
       v-if="editDepartment"
       data-iframe-height
-      width="500"
+      :width="500"
     >
       <v-card-title>
         {{ $t('pages.organization.confirmEditDepartmentTitle', {name: department.name, departmentLabel}) }}
@@ -26,11 +24,12 @@
         <p>{{ $t('common.id') }} = {{ department.id }}</p>
         <load-avatar
           v-if="orga && $uiConfig.avatars.orgs"
-          ref="loadAvatar"
+          ref="avatar"
           :owner="{type: 'organization', id: orga.id, department: department.id}"
           :disabled="$uiConfig.readonly"
           :hide-validate="true"
         />
+
         <v-text-field
           v-model="editDepartment.name"
           :label="$t('common.name')"
@@ -74,7 +73,7 @@ const { t } = useI18n()
 
 const menu = ref(false)
 const editDepartment = ref<Department>()
-const loadAvatar = ref<typeof import('./load-avatar.vue')['default']>()
+const avatar = ref<typeof import('./load-avatar.vue')['default']>()
 
 watch(menu, () => {
   if (!menu.value) return
@@ -85,10 +84,9 @@ const confirmEdit = withUiNotif(async () => {
   menu.value = false
   const departments = (orga.departments ?? []).map(d => d.id === editDepartment.value?.id ? editDepartment.value : d)
   await patchOrganization.execute(orga.id, { departments }, t('common.modificationOk'))
-  await loadAvatar.value?.validate()
+  await avatar.value?.validate()
   emit('change')
 })
-
 </script>
 
 <style lang="css" scoped>
diff --git a/ui/src/components/organization-departments.vue b/ui/src/components/organization-departments.vue
index a3a79307..abf11141 100644
--- a/ui/src/components/organization-departments.vue
+++ b/ui/src/components/organization-departments.vue
@@ -78,25 +78,27 @@
 
           <v-list-item-title>{{ department.name }}</v-list-item-title>
 
-          <v-list-item-action v-if="writableDepartments">
-            <edit-department-menu
-              :orga="orga"
-              :department="department"
-              :department-label="departmentLabel"
-              @change="$emit('change');refreshDepartment(department)"
-            />
-          </v-list-item-action>
-          <v-list-item-action
-            v-if="writableDepartments"
-            class="ml-0"
-          >
-            <delete-department-menu
-              :orga="orga"
-              :department="department"
-              :department-label="departmentLabel"
-              @change="$emit('change')"
-            />
-          </v-list-item-action>
+          <template #append>
+            <v-list-item-action v-if="writableDepartments">
+              <edit-department-menu
+                :orga="orga"
+                :department="department"
+                :department-label="departmentLabel"
+                @change="$emit('change');refreshDepartment(department)"
+              />
+            </v-list-item-action>
+            <v-list-item-action
+              v-if="writableDepartments"
+              class="ml-0"
+            >
+              <delete-department-menu
+                :orga="orga"
+                :department="department"
+                :department-label="departmentLabel"
+                @change="$emit('change')"
+              />
+            </v-list-item-action>
+          </template>
         </v-list-item>
         <v-divider
           v-if="i + 1 < currentPage.length"