Load groups on modal click

userfrosting · Jan 17, 2025 · 6ab3acc · 6ab3acc
1 parent 9888923
commit 6ab3acc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git 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
@@ -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,18 +58,23 @@ 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>
 
     <!-- This is the modal -->
     <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
@@ -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,18 +86,27 @@ 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>
 
     <!-- This is the modal -->
     <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
@@ -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
  */