feat: Add Households to Mealie (#3970)

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

@@ -14,9 +14,11 @@
           <div class="d-flex">
             <p> {{ $t("user.user-id-with-value", {id: user.id} ) }}</p>
           </div>
+          <!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->
           <v-select
             v-if="groups"
             v-model="user.group"
+            disabled
             :items="groups"
             rounded
             class="rounded-lg"
@@ -26,7 +28,20 @@
             filled
             :label="$tc('group.user-group')"
             :rules="[validators.required]"
-          ></v-select>
+          />
+          <v-select
+            v-if="households"
+            v-model="user.household"
+            :items="households"
+            rounded
+            class="rounded-lg"
+            item-text="name"
+            item-value="name"
+            :return-object="false"
+            filled
+            :label="$tc('household.user-household')"
+            :rules="[validators.required]"
+          />
           <div class="d-flex py-2 pr-2">
             <BaseButton type="button" :loading="generatingToken" create @click.prevent="handlePasswordReset">
               {{ $t("user.generate-password-reset-link") }}
@@ -65,6 +80,7 @@
 import { computed, defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import { useAdminApi, useUserApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
+import { useHouseholds } from "~/composables/use-households";
 import { alert } from "~/composables/use-toast";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
@@ -76,6 +92,7 @@ export default defineComponent({
   setup() {
     const { userForm } = useUserForm();
     const { groups } = useGroups();
+    const { useHouseholdsInGroup } = useHouseholds();
     const { i18n } = useContext();
     const route = useRoute();
 
@@ -89,6 +106,8 @@ export default defineComponent({
     const adminApi = useAdminApi();
 
     const user = ref<UserOut | null>(null);
+    const households = useHouseholdsInGroup(computed(() => user.value?.groupId || ""));
+
     const disabledFields = computed(() => {
       return user.value?.authMethod !== "Mealie" ? ["admin"] : [];
     })
@@ -154,6 +173,7 @@ export default defineComponent({
       refNewUserForm,
       handleSubmit,
       groups,
+      households,
       validators,
       handlePasswordReset,
       resetUrl,

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

@@ -12,17 +12,30 @@
         <v-card-text>
           <v-select
             v-if="groups"
-            v-model="newUserData.group"
+            v-model="selectedGroupId"
             :items="groups"
             rounded
             class="rounded-lg"
             item-text="name"
+            item-value="id"
+            :return-object="false"
+            filled
+            :label="$t('group.user-group')"
+            :rules="[validators.required]"
+          />
+          <v-select
+            v-if="households"
+            v-model="newUserData.household"
+            :items="households"
+            rounded
+            class="rounded-lg"
+            item-text="name"
             item-value="name"
             :return-object="false"
             filled
-            :label="$t('group.user-group')"
+            :label="$t('household.user-household')"
             :rules="[validators.required]"
-          ></v-select>
+          />
           <AutoForm v-model="newUserData" :items="userForm" />
         </v-card-text>
       </v-card>
@@ -34,9 +47,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useRouter, reactive, ref, toRefs } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useRouter, reactive, ref, toRefs, watch } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
+import { useHouseholds } from "~/composables/use-households";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
 import { VForm } from "~/types/vuetify";
@@ -46,6 +60,7 @@ export default defineComponent({
   setup() {
     const { userForm } = useUserForm();
     const { groups } = useGroups();
+    const { useHouseholdsInGroup } = useHouseholds();
     const router = useRouter();
 
     // ==============================================
@@ -55,13 +70,20 @@ export default defineComponent({
 
     const adminApi = useAdminApi();
 
+    const selectedGroupId = ref<string>("");
+    const households = useHouseholdsInGroup(selectedGroupId);
+
+    const selectedGroup = computed(() => {
+      return groups.value?.find((group) => group.id === selectedGroupId.value);
+    });
     const state = reactive({
       newUserData: {
         username: "",
         fullName: "",
         email: "",
         admin: false,
-        group: "",
+        group: selectedGroup.value?.name || "",
+        household: "",
         advanced: false,
         canInvite: false,
         canManage: false,
@@ -70,6 +92,10 @@ export default defineComponent({
         authMethod: "Mealie",
       },
     });
+    watch(selectedGroup, (newGroup) => {
+      state.newUserData.group = newGroup?.name || "";
+      state.newUserData.household = "";
+    });
 
     async function handleSubmit() {
       if (!refNewUserForm.value?.validate()) return;
@@ -87,6 +113,8 @@ export default defineComponent({
       refNewUserForm,
       handleSubmit,
       groups,
+      selectedGroupId,
+      households,
       validators,
     };
   },

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

@@ -18,7 +18,7 @@
 
     <BaseCardSectionTitle :title="$tc('user.user-management')"> </BaseCardSectionTitle>
     <section>
-      <v-toolbar color="background" flat class="justify-between">
+      <v-toolbar color="transparent" flat class="justify-between">
         <BaseButton to="/admin/manage/users/create" class="mr-2">
           {{ $t("general.create") }}
         </BaseButton>
@@ -129,6 +129,7 @@ export default defineComponent({
       { text: i18n.t("user.full-name"), value: "fullName" },
       { text: i18n.t("user.email"), value: "email" },
       { text: i18n.t("group.group"), value: "group" },
+      { text: i18n.t("household.household"), value: "household" },
       { text: i18n.t("user.auth-method"), value: "authMethod" },
       { text: i18n.t("user.admin"), value: "admin" },
       { text: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },