From 670907b56335f72e2ee5f9c1a3fcd12d59420530 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 19 Feb 2023 18:37:18 -0600
Subject: [PATCH] feat: Print Preferences (#2131)
* added basic recipe print settings
added print settings dialog
refactored print view to live inside print container
* removed unwanted padding
* changed preferences layout
---
.../Domain/Recipe/RecipeActionMenu.vue | 2 +
.../components/Domain/Recipe/RecipeCard.vue | 1 +
.../Domain/Recipe/RecipeCardMobile.vue | 1 +
.../Domain/Recipe/RecipeContextMenu.vue | 20 ++++
.../Recipe/RecipeDialogPrintPreferences.vue | 89 +++++++++++++++
.../Domain/Recipe/RecipePage/RecipePage.vue | 6 +-
.../Domain/Recipe/RecipePrintContainer.vue | 56 +++++++++
.../Domain/Recipe/RecipePrintView.vue | 108 ++++++++++--------
.../Domain/Recipe/RecipeTimeCard.vue | 6 +-
frontend/composables/use-users/preferences.ts | 28 +++++
frontend/lang/messages/en-US.json | 1 +
frontend/lib/icons/icons.ts | 10 ++
frontend/pages/group/mealplan/planner.vue | 1 +
13 files changed, 277 insertions(+), 52 deletions(-)
create mode 100644 frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue
create mode 100644 frontend/components/Domain/Recipe/RecipePrintContainer.vue
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index d48e01e5e3c0..a27de7ca9d45 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -50,6 +50,7 @@
fab
color="info"
:card-menu="false"
+ :recipe="recipe"
:recipe-id="recipe.id"
:recipe-scale="recipeScale"
:use-items="{
@@ -60,6 +61,7 @@
mealplanner: true,
shoppingList: true,
print: true,
+ printPreferences: true,
share: true,
publicUrl: recipe.settings ? recipe.settings.public : false,
}"
diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index 4dab312d3efd..09ae988604e8 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -51,6 +51,7 @@
mealplanner: true,
shoppingList: true,
print: false,
+ printPreferences: false,
share: true,
publicUrl: false,
}"
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index acd377b9f43a..c38b65f4bfaa 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -50,6 +50,7 @@
mealplanner: true,
shoppingList: true,
print: false,
+ printPreferences: false,
share: true,
publicUrl: false,
}"
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index 5ae36e4cae6c..54776be78f26 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -2,6 +2,7 @@
+
import { defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
+import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
import RecipeDialogShare from "./RecipeDialogShare.vue";
import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
import { planTypeOptions } from "~/composables/use-group-mealplan";
+import { Recipe } from "~/lib/api/types/recipe";
import { ShoppingListSummary } from "~/lib/api/types/group";
import { PlanEntryType } from "~/lib/api/types/meal-plan";
import { useAxiosDownloader } from "~/composables/api/use-axios-download";
@@ -131,6 +134,7 @@ export interface ContextMenuIncludes {
mealplanner: boolean;
shoppingList: boolean;
print: boolean;
+ printPreferences: boolean;
share: boolean;
publicUrl: boolean;
}
@@ -144,6 +148,7 @@ export interface ContextMenuItem {
export default defineComponent({
components: {
+ RecipeDialogPrintPreferences,
RecipeDialogShare,
},
props: {
@@ -157,6 +162,7 @@ export default defineComponent({
mealplanner: true,
shoppingList: true,
print: true,
+ printPreferences: true,
share: true,
publicUrl: false,
}),
@@ -195,6 +201,10 @@ export default defineComponent({
required: true,
type: String,
},
+ recipe: {
+ type: Object as () => Recipe,
+ default: undefined,
+ },
recipeId: {
required: true,
type: String,
@@ -217,6 +227,7 @@ export default defineComponent({
const api = useUserApi();
const state = reactive({
+ printPreferencesDialog: false,
shareDialog: false,
recipeDeleteDialog: false,
mealplannerDialog: false,
@@ -278,6 +289,12 @@ export default defineComponent({
color: undefined,
event: "print",
},
+ printPreferences: {
+ title: i18n.tc("general.print-preferences"),
+ icon: $globals.icons.printerSettings,
+ color: undefined,
+ event: "printPreferences",
+ },
share: {
title: i18n.tc("general.share"),
icon: $globals.icons.shareVariant,
@@ -382,6 +399,9 @@ export default defineComponent({
mealplanner: () => {
state.mealplannerDialog = true;
},
+ printPreferences: () => {
+ state.printPreferencesDialog = true;
+ },
shoppingList: () => {
getShoppingLists();
state.shoppingListDialog = true;
diff --git a/frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue b/frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue
new file mode 100644
index 000000000000..eb3c5fa65e92
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+ {{ $tc('recipe.recipe-image') }}
+
+
+ {{ $globals.icons.dockLeft }}
+
+
+ {{ $globals.icons.dockRight }}
+
+
+ {{ $globals.icons.windowClose }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index f5ffb6ddf684..6e297a01d1ee 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -70,7 +70,7 @@
:recipe="recipe"
class="px-1 my-4 d-print-none"
/>
-
+
@@ -96,7 +96,7 @@ import RecipePageOrganizers from "./RecipePageParts/RecipePageOrganizers.vue";
import RecipePageScale from "./RecipePageParts/RecipePageScale.vue";
import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue";
import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
-import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
+import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContainer.vue";
import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
import { NoUndefinedField } from "~/lib/api/types/non-generated";
import { Recipe } from "~/lib/api/types/recipe";
@@ -116,7 +116,7 @@ const EDITOR_OPTIONS = {
export default defineComponent({
components: {
RecipePageHeader,
- RecipePrintView,
+ RecipePrintContainer,
RecipePageComments,
RecipePageTitleContent,
RecipePageEditorToolbar,
diff --git a/frontend/components/Domain/Recipe/RecipePrintContainer.vue b/frontend/components/Domain/Recipe/RecipePrintContainer.vue
new file mode 100644
index 000000000000..e8ff679a2292
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipePrintContainer.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index b7989ea79159..1d3529a6da5b 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -1,19 +1,32 @@
-
+
-
-
- {{ $globals.icons.primary }}
-
- {{ recipe.name }}
-
-
+
+
+
+
+
+
+
+
+ {{ $globals.icons.primary }}
+
+ {{ recipe.name }}
+
+
+
+
+
+
+
+
-
-
-
-
{{ $t("recipe.ingredients") }}
@@ -30,6 +43,7 @@
:style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
>
+
@@ -57,24 +71,30 @@
-
+
-
-