From a439428ab8febbf817afb050d655e6aec1c1810d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:14:28 -0600
Subject: [PATCH] fix: Improve UX for new households/userrs (#4653)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 frontend/lang/messages/en-US.json             |  3 +-
 .../pages/admin/manage/households/index.vue   | 51 ++++++++++++-------
 frontend/pages/admin/manage/users/create.vue  |  5 +-
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index b40fcc94e..cd229d3fa 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/households/index.vue b/frontend/pages/admin/manage/households/index.vue
index 98426310f..e14f84e3a 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,
     };
diff --git a/frontend/pages/admin/manage/users/create.vue b/frontend/pages/admin/manage/users/create.vue
index 2dc0cc19a..099f43ab9 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,8 +23,8 @@
             :rules="[validators.required]"
           />
           <v-select
-            v-if="households"
             v-model="newUserData.household"
+            :disabled="!selectedGroupId"
             :items="households"
             rounded
             class="rounded-lg"
@@ -34,6 +33,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" />