fix user creation

frontend/pages/admin/manage/users/create.vue

@@ -21,31 +21,28 @@
       <v-card variant="outlined">
         <v-card-text>
           <v-select
-            v-if="groups"
+            v-model="selectedGroup"
-            v-model="selectedGroupId"
+            :items="groups || []"
-            :items="groups"
             item-title="name"
-            item-value="id"
+            return-object
-            :return-object="false"
             variant="filled"
             :label="$t('group.user-group')"
             :rules="[validators.required]"
           />
           <v-select
-            v-model="newUserData.household"
+            v-model="state.newUserData.household"
-            :disabled="!selectedGroupId"
+            :disabled="!selectedGroup"
             :items="households"
             item-title="name"
             item-value="name"
-            :return-object="false"
             variant="filled"
             :label="$t('household.user-household')"
-            :hint="selectedGroupId ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
+            :hint="selectedGroup ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
             persistent-hint
             :rules="[validators.required]"
           />
           <AutoForm
-            v-model="newUserData"
+            v-model="state.newUserData"
             :items="userForm"
           />
         </v-card-text>
@@ -60,82 +57,53 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
-import { useAdminHouseholds } from "~/composables/use-households";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
-import type { UserIn } from "~/lib/api/types/user";
+import type { GroupInDB, UserIn } from "~/lib/api/types/user";
 import type { VForm } from "~/types/auto-forms";
 
-export default defineNuxtComponent({
+definePageMeta({
-  setup() {
+  layout: "admin",
-    definePageMeta({
+});
-      layout: "admin",
+const { userForm } = useUserForm();
-    });
+const { groups } = useGroups();
+const router = useRouter();
 
-    const { userForm } = useUserForm();
+const refNewUserForm = ref<VForm | null>(null);
-    const { groups } = useGroups();
+const adminApi = useAdminApi();
-    const { useHouseholdsInGroup } = useAdminHouseholds();
-    const router = useRouter();
 
-    // ==============================================
+const selectedGroup = ref<GroupInDB | undefined>(undefined);
-    // New User Form
+const households = computed(() => selectedGroup.value?.households || []);
 
-    const refNewUserForm = ref<VForm | null>(null);
+const state = reactive({
-
+  newUserData: {
-    const adminApi = useAdminApi();
+    username: "",
-
+    fullName: "",
-    const selectedGroupId = ref<string>("");
+    email: "",
-    const households = useHouseholdsInGroup(selectedGroupId);
+    admin: false,
-
+    group: computed(() => selectedGroup.value?.name || ""),
-    const selectedGroup = computed(() => {
+    household: "",
-      return groups.value?.find(group => group.id === selectedGroupId.value);
+    advanced: false,
-    });
+    canInvite: false,
-    const state = reactive({
+    canManage: false,
-      newUserData: {
+    canOrganize: false,
-        username: "",
+    password: "",
-        fullName: "",
+    authMethod: "Mealie",
-        email: "",
-        admin: false,
-        group: selectedGroup.value?.name || "",
-        household: "",
-        advanced: false,
-        canInvite: false,
-        canManage: false,
-        canOrganize: false,
-        password: "",
-        authMethod: "Mealie",
-      },
-    });
-    watch(selectedGroup, (newGroup) => {
-      state.newUserData.group = newGroup?.name || "";
-      state.newUserData.household = "";
-    });
-
-    async function handleSubmit() {
-      if (!refNewUserForm.value?.validate()) return;
-
-      const { response } = await adminApi.users.createOne(state.newUserData as UserIn);
-
-      if (response?.status === 201) {
-        router.push("/admin/manage/users");
-      }
-    }
-
-    return {
-      ...toRefs(state),
-      userForm,
-      refNewUserForm,
-      handleSubmit,
-      groups,
-      selectedGroupId,
-      households,
-      validators,
-    };
   },
 });
+
+async function handleSubmit() {
+  if (!refNewUserForm.value?.validate()) return;
+
+  const { response } = await adminApi.users.createOne(state.newUserData as UserIn);
+
+  if (response?.status === 201) {
+    router.push("/admin/manage/users");
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>