fix: Improve UX for new households/userrs (#4653)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

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",

frontend/pages/admin/manage/households/index.vue

@@ -4,10 +4,10 @@
       v-model="createDialog"
       :title="$t('household.create-household')"
       :icon="$globals.icons.household"
-      @submit="createHousehold(createHouseholdForm.data)"
     >
       <template #activator> </template>
       <v-card-text>
+        <v-form ref="refNewHouseholdForm">
           <v-select
             v-if="groups"
             v-model="createHouseholdForm.data.groupId"
@@ -22,7 +22,11 @@
             :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,
     };

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" />