From 6ab3acc9e1d1de3cb8ac5fe75990a70472ab677b Mon Sep 17 00:00:00 2001
From: Louis Charette <charette.louis@gmail.com>
Date: Thu, 16 Jan 2025 21:24:44 -0500
Subject: [PATCH] Load groups on modal click

---
 .../app/assets/composables/useGroupsApi.ts        |  3 ---
 .../Pages/Admin/User/UserCreateModal.vue          | 11 ++++++++---
 .../components/Pages/Admin/User/UserEditModal.vue | 15 ++++++++++++---
 .../src/components/Pages/Admin/User/UserForm.vue  | 14 ++++++++------
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/sprinkle-admin/app/assets/composables/useGroupsApi.ts b/packages/sprinkle-admin/app/assets/composables/useGroupsApi.ts
index b7ca863f3..e3fb2e76f 100644
--- a/packages/sprinkle-admin/app/assets/composables/useGroupsApi.ts
+++ b/packages/sprinkle-admin/app/assets/composables/useGroupsApi.ts
@@ -47,8 +47,5 @@ export function useGroupsApi() {
             })
     }
 
-    // Init the fetch
-    updateGroups()
-
     return { groups, error, loading, updateGroups }
 }
diff --git a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserCreateModal.vue b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserCreateModal.vue
index 0a757b19e..fd884d6f7 100644
--- a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserCreateModal.vue
+++ b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserCreateModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIkit from 'uikit'
 import { ref } from 'vue'
-import { useUserCreateApi } from '@userfrosting/sprinkle-admin/composables'
+import { useGroupsApi, useUserCreateApi } from '@userfrosting/sprinkle-admin/composables'
 import type { UserCreateRequest } from '@userfrosting/sprinkle-admin/interfaces'
 import UserForm from './UserForm.vue'
 
@@ -58,10 +58,15 @@ const submitForm = () => {
             })
         })
 }
+
+/**
+ * Load group list from API
+ */
+const { groups, updateGroups } = useGroupsApi()
 </script>
 
 <template>
-    <a v-bind="$attrs" :uk-toggle="'target: #modal-user-create'">
+    <a v-bind="$attrs" :uk-toggle="'target: #modal-user-create'" @click="updateGroups()">
         <slot><font-awesome-icon icon="user-plus" /> Create user</slot>
     </a>
 
@@ -69,7 +74,7 @@ const submitForm = () => {
     <UFModal id="modal-user-create" closable>
         <template #header>Create User</template>
         <template #default>
-            <UserForm v-model="formData" @submit="submitForm()" />
+            <UserForm v-model="formData" :groups="groups" @submit="submitForm()" />
         </template>
     </UFModal>
 </template>
diff --git a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserEditModal.vue b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserEditModal.vue
index 144cb3687..2813c14bf 100644
--- a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserEditModal.vue
+++ b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserEditModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIkit from 'uikit'
 import { ref, watch } from 'vue'
-import { useUserEditApi } from '@userfrosting/sprinkle-admin/composables'
+import { useGroupsApi, useUserEditApi } from '@userfrosting/sprinkle-admin/composables'
 import type { UserEditRequest } from '@userfrosting/sprinkle-admin/interfaces'
 import type { UserInterface } from '@userfrosting/sprinkle-account/interfaces'
 import UserForm from './UserForm.vue'
@@ -86,10 +86,19 @@ const submitForm = () => {
             })
         })
 }
+
+/**
+ * Load group list from API
+ */
+const { groups, updateGroups } = useGroupsApi()
 </script>
 
 <template>
-    <a href="#" v-bind="$attrs" :uk-toggle="'target: #modal-user-edit-' + props.user.user_name">
+    <a
+        href="#"
+        v-bind="$attrs"
+        :uk-toggle="'target: #modal-user-edit-' + props.user.user_name"
+        @click="updateGroups()">
         <slot> <font-awesome-icon icon="pen-to-square" fixed-width /> Edit User </slot>
     </a>
 
@@ -97,7 +106,7 @@ const submitForm = () => {
     <UFModal :id="'modal-user-edit-' + props.user.user_name" closable>
         <template #header> Edit User </template>
         <template #default>
-            <UserForm v-model="formData" @submit="submitForm()" />
+            <UserForm v-model="formData" :groups="groups" @submit="submitForm()" />
         </template>
     </UFModal>
 </template>
diff --git a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserForm.vue b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserForm.vue
index fc62ae98f..8629faa06 100644
--- a/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserForm.vue
+++ b/packages/theme-pink-cupcake/src/components/Pages/Admin/User/UserForm.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { useConfigStore } from '@userfrosting/sprinkle-core/stores'
 import type { UserEditRequest } from '@userfrosting/sprinkle-admin/interfaces'
-import { useGroupsApi } from '@userfrosting/sprinkle-admin/composables'
+import type { GroupInterface } from '@userfrosting/sprinkle-account/interfaces'
+
+/**
+ * Props
+ */
+const { groups } = defineProps<{
+    groups: GroupInterface[]
+}>()
 
 /**
  * Form Model
@@ -28,11 +35,6 @@ function getDefaultLocale(): string {
 // Apply default locale to form data
 formData.value.locale = getDefaultLocale()
 
-/**
- * Load group list from API
- */
-const { groups } = useGroupsApi()
-
 /**
  * Emits
  */