feat: Add Households to Mealie (#3970)

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -337,7 +337,7 @@ export default defineComponent({
           );
           break;
         case EVENTS.updated:
-          setter("update_at", $globals.icons.sortClockAscending, $globals.icons.sortClockDescending, "desc", false);
+          setter("updated_at", $globals.icons.sortClockAscending, $globals.icons.sortClockDescending, "desc", false);
           break;
         case EVENTS.lastMade:
           setter(

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -138,11 +138,11 @@ import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
-import { useGroupSelf } from "~/composables/use-groups";
+import { useHouseholdSelf } from "~/composables/use-households";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
 import { Recipe } from "~/lib/api/types/recipe";
-import { GroupRecipeActionOut, ShoppingListSummary } from "~/lib/api/types/group";
+import { GroupRecipeActionOut, ShoppingListSummary } from "~/lib/api/types/household";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
 
@@ -254,14 +254,14 @@ export default defineComponent({
     });
 
     const { i18n, $auth, $globals } = useContext();
-    const { group } = useGroupSelf();
+    const { household } = useHouseholdSelf();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const firstDayOfWeek = computed(() => {
-      return group.value?.preferences?.firstDayOfWeek || 0;
+      return household.value?.preferences?.firstDayOfWeek || 0;
     });
 
     // ===========================================================================

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -18,7 +18,7 @@
       </tr>
     </template>
     <template #item.name="{ item }">
-      <a :href="`/r/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
+      <a :href="`/g/${groupSlug}/r/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
     </template>
     <template #item.tags="{ item }">
       <RecipeChip small :items="item.tags" :is-category="false" url-prefix="tags" />
@@ -48,7 +48,7 @@ import UserAvatar from "../User/UserAvatar.vue";
 import RecipeChip from "./RecipeChips.vue";
 import { Recipe } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
-import { UserOut } from "~/lib/api/types/user";
+import { UserSummary } from "~/lib/api/types/user";
 
 const INPUT_EVENT = "input";
 
@@ -95,7 +95,8 @@ export default defineComponent({
     },
   },
   setup(props, context) {
-    const { i18n } = useContext();
+    const { $auth, i18n } = useContext();
+    const groupSlug = $auth.user?.groupSlug;
 
     function setValue(value: Recipe[]) {
       context.emit(INPUT_EVENT, value);
@@ -134,7 +135,7 @@ export default defineComponent({
     // ============
     // Group Members
     const api = useUserApi();
-    const members = ref<UserOut[]>([]);
+    const members = ref<UserSummary[]>([]);
 
     async function refreshMembers() {
       const { data } = await api.groups.fetchMembers();
@@ -149,13 +150,19 @@ export default defineComponent({
 
     function getMember(id: string) {
       if (members.value[0]) {
-        return members.value.find((m) => m.id === id)?.username;
+        return members.value.find((m) => m.id === id)?.fullName;
       }
 
       return i18n.t("general.none");
     }
 
-    return { setValue, headers, members, getMember };
+    return {
+      groupSlug,
+      setValue,
+      headers,
+      members,
+      getMember,
+    };
   },
 
   data() {

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -127,14 +127,14 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, reactive, ref, useContext, watchEffect } from "@nuxtjs/composition-api"
-  import { toRefs } from "@vueuse/core"
-  import RecipeIngredientListItem from "./RecipeIngredientListItem.vue"
-  import { useUserApi } from "~/composables/api"
-  import { alert } from "~/composables/use-toast"
-  import { useShoppingListPreferences } from "~/composables/use-users/preferences"
-  import { ShoppingListSummary } from "~/lib/api/types/group"
-  import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe"
+import { computed, defineComponent, reactive, ref, useContext, watchEffect } from "@nuxtjs/composition-api";
+import { toRefs } from "@vueuse/core";
+import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import { useShoppingListPreferences } from "~/composables/use-users/preferences";
+import { ShoppingListSummary } from "~/lib/api/types/household";
+import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
 
 export interface RecipeWithScale extends Recipe {
   scale: number;
@@ -209,7 +209,8 @@ export default defineComponent({
     watchEffect(
       () => {
         if (shoppingListChoices.value.length === 1 && !state.shoppingListShowAllToggled) {
-          openShoppingListIngredientDialog(shoppingListChoices.value[0]);
+          selectedShoppingList.value = shoppingListChoices.value[0];
+          openShoppingListIngredientDialog(selectedShoppingList.value);
         } else {
           ready.value = true;
         }
@@ -365,12 +366,8 @@ export default defineComponent({
         }
       })
 
-      const successMessage = promises.length === 1
-        ? i18n.t("recipe.successfully-added-to-list") as string
-        : i18n.t("recipe.failed-to-add-to-list") as string;
-
-      success ? alert.success(successMessage)
-      : alert.error(i18n.t("failed-to-add-recipes-to-list") as string)
+      success ? alert.success(i18n.tc("recipe.successfully-added-to-list"))
+      : alert.error(i18n.tc("failed-to-add-recipes-to-list"))
 
       state.shoppingListDialog = false;
       state.shoppingListIngredientDialog = false;

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -66,7 +66,7 @@ import { defineComponent, computed, toRefs, reactive, useContext, useRoute } fro
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
-import { useGroupSelf } from "~/composables/use-groups";
+import { useHouseholdSelf } from "~/composables/use-households";
 import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
@@ -113,12 +113,12 @@ export default defineComponent({
     );
 
     const { $auth, i18n } = useContext();
-    const { group } = useGroupSelf();
+    const { household } = useHouseholdSelf();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
     const firstDayOfWeek = computed(() => {
-      return group.value?.preferences?.firstDayOfWeek || 0;
+      return household.value?.preferences?.firstDayOfWeek || 0;
     });
 
     // ============================================================

frontend/components/Domain/Recipe/RecipeExplorerPage.vue

@@ -349,7 +349,7 @@ export default defineComponent({
       {
         icon: $globals.icons.update,
         name: i18n.tc("general.updated"),
-        value: "update_at",
+        value: "updated_at",
       },
       {
         icon: $globals.icons.diceMultiple,

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -11,7 +11,7 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from "@nuxtjs/composition-api";
-import { RecipeIngredient } from "~/lib/api/types/group";
+import { RecipeIngredient } from "~/lib/api/types/household";
 import { useParsedIngredientText } from "~/composables/recipes";
 
 export default defineComponent({

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -114,7 +114,7 @@ import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@n
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
-import { useGroupSelf } from "~/composables/use-groups";
+import { useHouseholdSelf } from "~/composables/use-households";
 import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
@@ -131,7 +131,7 @@ export default defineComponent({
   setup(props, context) {
     const madeThisDialog = ref(false);
     const userApi = useUserApi();
-    const { group } = useGroupSelf();
+    const { household } = useHouseholdSelf();
     const { $auth, i18n } = useContext();
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
@@ -157,7 +157,7 @@ export default defineComponent({
     );
 
     const firstDayOfWeek = computed(() => {
-      return group.value?.preferences?.firstDayOfWeek || 0;
+      return household.value?.preferences?.firstDayOfWeek || 0;
     });
 
     function clearImage() {

frontend/components/Domain/Recipe/RecipeList.vue

@@ -31,7 +31,7 @@
 import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import DOMPurify from "dompurify";
 import { useFraction } from "~/composables/recipes/use-fraction";
-import { ShoppingListItemOut } from "~/lib/api/types/group";
+import { ShoppingListItemOut } from "~/lib/api/types/household";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 
 export default defineComponent({