From 05492e5ca1ad0829490a50b4e8b02e3458f8ef60 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 1 Dec 2024 19:33:51 +0000
Subject: [PATCH 1/4] Prevent submitting a household without a group

---
 .../pages/admin/manage/households/index.vue   | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/pages/admin/manage/households/index.vue b/frontend/pages/admin/manage/households/index.vue
index 98426310f4e..e14f84e3a06 100644
--- a/frontend/pages/admin/manage/households/index.vue
+++ b/frontend/pages/admin/manage/households/index.vue
@@ -4,25 +4,29 @@
       v-model="createDialog"
       :title="$t('household.create-household')"
       :icon="$globals.icons.household"
-      @submit="createHousehold(createHouseholdForm.data)"
     >
       <template #activator> </template>
       <v-card-text>
-        <v-select
-          v-if="groups"
-          v-model="createHouseholdForm.data.groupId"
-          :items="groups"
-          rounded
-          class="rounded-lg"
-          item-text="name"
-          item-value="id"
-          :return-object="false"
-          filled
-          :label="$tc('household.household-group')"
-          :rules="[validators.required]"
-        />
-        <AutoForm v-model="createHouseholdForm.data" :update-mode="updateMode" :items="createHouseholdForm.items" />
+        <v-form ref="refNewHouseholdForm">
+          <v-select
+            v-if="groups"
+            v-model="createHouseholdForm.data.groupId"
+            :items="groups"
+            rounded
+            class="rounded-lg"
+            item-text="name"
+            item-value="id"
+            :return-object="false"
+            filled
+            :label="$tc('household.household-group')"
+            :rules="[validators.required]"
+          />
+          <AutoForm v-model="createHouseholdForm.data" :update-mode="updateMode" :items="createHouseholdForm.items" />
+        </v-form>
       </v-card-text>
+      <template #custom-card-action>
+        <BaseButton type="submit" @click="handleCreateSubmit"> {{ $t("general.create") }} </BaseButton>
+      </template>
     </BaseDialog>
 
     <BaseDialog
@@ -92,12 +96,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
 import { fieldTypes } from "~/composables/forms";
 import { useGroups } from "~/composables/use-groups";
 import { useAdminHouseholds } from "~/composables/use-households";
 import { validators } from "~/composables/use-validators";
 import { HouseholdInDB } from "~/lib/api/types/household";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   layout: "admin",
@@ -105,10 +110,12 @@ export default defineComponent({
     const { i18n } = useContext();
     const { groups } = useGroups();
     const { households, refreshAllHouseholds, deleteHousehold, createHousehold } = useAdminHouseholds();
+    const refNewHouseholdForm = ref<VForm | null>(null);
 
     const state = reactive({
       createDialog: false,
       confirmDialog: false,
+      loading: false,
       deleteTarget: 0,
       search: "",
       headers: [
@@ -153,14 +160,24 @@ export default defineComponent({
       router.push(`/admin/manage/households/${item.id}`);
     }
 
+    async function handleCreateSubmit() {
+      if (!refNewHouseholdForm.value?.validate()) {
+        return;
+      }
+
+      state.createDialog = false;
+      await createHousehold(state.createHouseholdForm.data);
+    }
+
     return {
         ...toRefs(state),
+        refNewHouseholdForm,
         groups,
         households,
         validators,
         refreshAllHouseholds,
         deleteHousehold,
-        createHousehold,
+        handleCreateSubmit,
         openDialog,
         handleRowClick,
     };

From 56adec78033bbbab6a497025e3b1ee8ddfb4602d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 1 Dec 2024 19:39:36 +0000
Subject: [PATCH 2/4] disable household dropdown if group isn't selected

---
 frontend/lang/messages/en-US.json            | 3 ++-
 frontend/pages/admin/manage/users/create.vue | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index b40fcc94e48..cd229d3fab8 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -276,7 +276,8 @@
     "admin-group-management": "Admin Group Management",
     "admin-group-management-text": "Changes to this group will be reflected immediately.",
     "group-id-value": "Group Id: {0}",
-    "total-households": "Total Households"
+    "total-households": "Total Households",
+    "you-must-select-a-group-before-selecting-a-household": "You must select a group before selecting a household"
   },
   "household": {
     "household": "Household",
diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index 2dc0cc19af1..150c09204f8 100644
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -25,6 +25,7 @@
           />
           <v-select
             v-if="households"
+            :disabled="!selectedGroupId"
             v-model="newUserData.household"
             :items="households"
             rounded
@@ -34,6 +35,8 @@
             :return-object="false"
             filled
             :label="$t('household.user-household')"
+            :hint="selectedGroupId ? '' : $tc('group.you-must-select-a-group-before-selecting-a-household')"
+            persistent-hint
             :rules="[validators.required]"
           />
           <AutoForm v-model="newUserData" :items="userForm" />

From 8c52cc7445495017ff1e2e33e5100c411ef142fc Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 1 Dec 2024 19:41:51 +0000
Subject: [PATCH 3/4] remove jitter when groups are loading

---
 frontend/pages/admin/manage/users/create.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index 150c09204f8..1de3f59954d 100644
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -11,7 +11,6 @@
       <v-card outlined>
         <v-card-text>
           <v-select
-            v-if="groups"
             v-model="selectedGroupId"
             :items="groups"
             rounded
@@ -24,7 +23,6 @@
             :rules="[validators.required]"
           />
           <v-select
-            v-if="households"
             :disabled="!selectedGroupId"
             v-model="newUserData.household"
             :items="households"

From cc99c07e380740ea6d69f344057dd76b76a1e680 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:36:10 -0600
Subject: [PATCH 4/4] Update frontend/pages/admin/manage/users/create.vue

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 frontend/pages/admin/manage/users/create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index 1de3f59954d..099f43ab9be 100644
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -23,8 +23,8 @@
             :rules="[validators.required]"
           />
           <v-select
-            :disabled="!selectedGroupId"
             v-model="newUserData.household"
+            :disabled="!selectedGroupId"
             :items="households"
             rounded
             class="rounded-lg"