feat: Add Households to Mealie (#3970)

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

@@ -1,15 +1,14 @@
-// TODO: Edit Group
 <template>
   <v-container fluid>
     <BaseDialog
       v-model="createDialog"
       :title="$t('group.create-group')"
       :icon="$globals.icons.group"
-      @submit="createGroup(createUserForm.data)"
+      @submit="createGroup(createGroupForm.data)"
     >
       <template #activator> </template>
       <v-card-text>
-        <AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
+        <AutoForm v-model="createGroupForm.data" :update-mode="updateMode" :items="createGroupForm.items" />
       </v-card-text>
     </BaseDialog>
 
@@ -27,7 +26,7 @@
 
     <BaseCardSectionTitle :title="$tc('group.group-management')"> </BaseCardSectionTitle>
     <section>
-      <v-toolbar flat color="background" class="justify-between">
+      <v-toolbar flat color="transparent" class="justify-between">
         <BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
       </v-toolbar>
 
@@ -41,15 +40,15 @@
         :search="search"
         @click:row="handleRowClick"
       >
+        <template #item.households="{ item }">
+          {{ item.households.length }}
+        </template>
         <template #item.users="{ item }">
           {{ item.users.length }}
         </template>
-        <template #item.webhookEnable="{ item }">
-          {{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
-        </template>
         <template #item.actions="{ item }">
           <v-btn
-            :disabled="item && item.users.length > 0"
+            :disabled="item && (item.households.length > 0 || item.users.length > 0)"
             class="mr-1"
             icon
             color="error"
@@ -94,12 +93,12 @@ export default defineComponent({
           value: "id",
         },
         { text: i18n.t("general.name"), value: "name" },
+        { text: i18n.t("group.total-households"), value: "households" },
         { text: i18n.t("user.total-users"), value: "users" },
-        { text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
         { text: i18n.t("general.delete"), value: "actions" },
       ],
       updateMode: false,
-      createUserForm: {
+      createGroupForm: {
         items: [
           {
             label: i18n.t("group.group-name"),
@@ -116,7 +115,7 @@ export default defineComponent({
 
     function openDialog() {
       state.createDialog = true;
-      state.createUserForm.data.name = "";
+      state.createGroupForm.data.name = "";
     }
 
     const router = useRouter();

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

@@ -0,0 +1,117 @@
+<template>
+  <v-container v-if="household" class="narrow-container">
+    <BasePageTitle>
+      <template #header>
+        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
+      </template>
+      <template #title> {{ $t('household.admin-household-management') }} </template>
+      {{ $t('household.admin-household-management-text') }}
+    </BasePageTitle>
+    <AppToolbar back> </AppToolbar>
+    <v-card-text> {{ $t('household.household-id-value', [household.id]) }} </v-card-text>
+    <v-form v-if="!userError" ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
+      <v-card outlined>
+        <v-card-text>
+          <v-select
+            v-if="groups"
+            v-model="household.groupId"
+            disabled
+            :items="groups"
+            rounded
+            class="rounded-lg"
+            item-text="name"
+            item-value="id"
+            :return-object="false"
+            filled
+            :label="$tc('group.user-group')"
+            :rules="[validators.required]"
+          />
+          <v-text-field
+            v-model="household.name"
+            :label="$t('household.household-name')"
+            :rules="[validators.required]"
+          />
+          <HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
+        </v-card-text>
+      </v-card>
+      <div class="d-flex pa-2">
+        <BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
+import HouseholdPreferencesEditor from "~/components/Domain/Household/HouseholdPreferencesEditor.vue";
+import { useGroups } from "~/composables/use-groups";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import { validators } from "~/composables/use-validators";
+import { HouseholdInDB } from "~/lib/api/types/household";
+import { VForm } from "~/types/vuetify";
+
+export default defineComponent({
+  components: {
+      HouseholdPreferencesEditor,
+  },
+  layout: "admin",
+  setup() {
+    const route = useRoute();
+    const { i18n } = useContext();
+
+    const { groups } = useGroups();
+    const householdId = route.value.params.id;
+
+    // ==============================================
+    // New User Form
+
+    const refHouseholdEditForm = ref<VForm | null>(null);
+
+    const userApi = useUserApi();
+
+    const household = ref<HouseholdInDB | null>(null);
+
+    const userError = ref(false);
+
+    onMounted(async () => {
+      const { data, error } = await userApi.households.getOne(householdId);
+
+      if (error?.response?.status === 404) {
+        alert.error(i18n.tc("user.user-not-found"));
+        userError.value = true;
+      }
+
+      if (data) {
+          household.value = data;
+      }
+    });
+
+    async function handleSubmit() {
+      if (!refHouseholdEditForm.value?.validate() || household.value === null) {
+        return;
+      }
+
+      const { response, data } = await userApi.households.updateOne(household.value.id, household.value);
+      if (response?.status === 200 && data) {
+        if (household.value.slug !== data.slug) {
+          // the slug updated, which invalidates the nav URLs
+          window.location.reload();
+        }
+        household.value = data;
+      } else {
+        alert.error(i18n.tc("settings.settings-update-failed"));
+      }
+    }
+
+    return {
+      groups,
+      household,
+      validators,
+      userError,
+      refHouseholdEditForm,
+      handleSubmit,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,167 @@
+<template>
+  <v-container fluid>
+    <BaseDialog
+      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-card-text>
+    </BaseDialog>
+
+    <BaseDialog
+      v-model="confirmDialog"
+      :title="$t('general.confirm')"
+      color="error"
+      @confirm="deleteHousehold(deleteTarget)"
+    >
+      <template #activator> </template>
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <BaseCardSectionTitle :title="$tc('household.household-management')"> </BaseCardSectionTitle>
+    <section>
+      <v-toolbar flat color="transparent" class="justify-between">
+        <BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
+      </v-toolbar>
+
+      <v-data-table
+        :headers="headers"
+        :items="households || []"
+        item-key="id"
+        class="elevation-0"
+        hide-default-footer
+        disable-pagination
+        :search="search"
+        @click:row="handleRowClick"
+      >
+        <template #item.users="{ item }">
+          {{ item.users.length }}
+        </template>
+        <template #item.group="{ item }">
+          {{ item.group }}
+        </template>
+        <template #item.webhookEnable="{ item }">
+          {{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
+        </template>
+        <template #item.actions="{ item }">
+          <v-btn
+            :disabled="item && item.users.length > 0"
+            class="mr-1"
+            icon
+            color="error"
+            @click.stop="
+              confirmDialog = true;
+              deleteTarget = item.id;
+            "
+          >
+            <v-icon>
+              {{ $globals.icons.delete }}
+            </v-icon>
+          </v-btn>
+        </template>
+      </v-data-table>
+      <v-divider></v-divider>
+    </section>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
+import { fieldTypes } from "~/composables/forms";
+import { useGroups } from "~/composables/use-groups";
+import { useHouseholds } from "~/composables/use-households";
+import { validators } from "~/composables/use-validators";
+import { HouseholdInDB } from "~/lib/api/types/household";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    const { i18n } = useContext();
+    const { groups } = useGroups();
+    const { households, refreshAllHouseholds, deleteHousehold, createHousehold } = useHouseholds();
+
+    const state = reactive({
+      createDialog: false,
+      confirmDialog: false,
+      deleteTarget: 0,
+      search: "",
+      headers: [
+        {
+          text: i18n.t("household.household"),
+          align: "start",
+          sortable: false,
+          value: "id",
+        },
+        { text: i18n.t("general.name"), value: "name" },
+        { text: i18n.t("group.group"), value: "group" },
+        { text: i18n.t("user.total-users"), value: "users" },
+        { text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
+        { text: i18n.t("general.delete"), value: "actions" },
+      ],
+      updateMode: false,
+      createHouseholdForm: {
+        items: [
+          {
+            label: i18n.t("household.household-name"),
+            varName: "name",
+            type: fieldTypes.TEXT,
+            rules: ["required"],
+          },
+        ],
+        data: {
+          groupId: "",
+          name: "",
+        },
+      },
+    });
+
+    function openDialog() {
+      state.createDialog = true;
+      state.createHouseholdForm.data.name = "";
+      state.createHouseholdForm.data.groupId = "";
+    }
+
+    const router = useRouter();
+
+    function handleRowClick(item: HouseholdInDB) {
+      router.push(`/admin/manage/households/${item.id}`);
+    }
+
+    return {
+        ...toRefs(state),
+        groups,
+        households,
+        validators,
+        refreshAllHouseholds,
+        deleteHousehold,
+        createHousehold,
+        openDialog,
+        handleRowClick,
+    };
+  },
+  head() {
+    return {
+      title: this.$t("household.manage-households") as string,
+    };
+  },
+});
+</script>

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