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

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

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -51,6 +51,7 @@
                 mealplanner: true,
                 shoppingList: true,
                 print: false,
+                printPreferences: false,
                 share: true,
                 publicUrl: false,
               }"

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -50,6 +50,7 @@
                   mealplanner: true,
                   shoppingList: true,
                   print: false,
+                  printPreferences: false,
                   share: true,
                   publicUrl: false,
                 }"

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -2,6 +2,7 @@
   <div class="text-center">
     <!-- Recipe Share Dialog -->
     <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
+    <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipe" />
     <BaseDialog
       v-model="recipeDeleteDialog"
       :title="$t('recipe.delete-recipe')"
@@ -115,10 +116,12 @@
 
 <script lang="ts">
 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;

frontend/components/Domain/Recipe/RecipeDialogPrintPreferences.vue

@@ -0,0 +1,89 @@
+<template>
+  <BaseDialog
+    v-model="dialog"
+    :icon="$globals.icons.printerSettings"
+    :title="$tc('general.print-preferences')"
+    width="70%"
+  >
+    <div class="pa-6">
+      <v-container class="print-config mb-3 pa-0">
+        <v-row>
+          <v-col cols="auto" align-self="center" class="text-center">
+            <div class="text-subtitle-2" style="text-align: center;">{{ $tc('recipe.recipe-image') }}</div>
+            <v-btn-toggle v-model="preferences.imagePosition" mandatory style="width: fit-content;">
+              <v-btn :value="ImagePosition.left">
+                <v-icon>{{ $globals.icons.dockLeft }}</v-icon>
+              </v-btn>
+              <v-btn :value="ImagePosition.right">
+                <v-icon>{{ $globals.icons.dockRight }}</v-icon>
+              </v-btn>
+              <v-btn :value="ImagePosition.hidden">
+                <v-icon>{{ $globals.icons.windowClose }}</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+          </v-col>
+          <v-col cols="auto" align-self="start">
+            <v-row no-gutters>
+              <v-switch v-model="preferences.showDescription" hide-details :label="$tc('recipe.description')" />
+            </v-row>
+            <v-row no-gutters>
+              <v-switch v-model="preferences.showNotes" hide-details :label="$tc('recipe.notes')" />
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-card
+        height="fit-content"
+        max-height="40vh"
+        width="100%"
+        class="print-preview"
+        style="overflow-y: auto;"
+      >
+        <RecipePrintView :recipe="recipe"/>
+      </v-card>
+    </div>
+  </BaseDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { Recipe } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
+import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
+
+export default defineComponent({
+  components: {
+    RecipePrintView,
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const preferences = useUserPrintPreferences();
+
+    // V-Model Support
+    const dialog = computed({
+      get: () => {
+        return props.value;
+      },
+      set: (val) => {
+        context.emit("input", val);
+      },
+    });
+
+    return {
+      dialog,
+      ImagePosition,
+      preferences,
+    }
+  }
+});
+</script>

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -70,7 +70,7 @@
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
-    <RecipePrintView :recipe="recipe" :scale="scale" />
+    <RecipePrintContainer :recipe="recipe" :scale="scale" />
   </v-container>
 </template>
 
@@ -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,

frontend/components/Domain/Recipe/RecipePrintContainer.vue

@@ -0,0 +1,56 @@
+<template>
+<div class="print-container">
+  <RecipePrintView :recipe="recipe" :scale="scale" dense />
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
+import { Recipe } from "~/lib/api/types/recipe";
+
+export default defineComponent({
+  components: {
+    RecipePrintView,
+  },
+  props: {
+    recipe: {
+      type: Object as () => Recipe,
+      required: true,
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+});
+</script>
+
+<style>
+@media print {
+  body,
+  html {
+    margin-top: 0 !important;
+  }
+
+  .print-container {
+    display: block !important;
+  }
+
+  .v-main {
+    display: block;
+  }
+
+  .v-main__wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>
+
+<style scoped>
+.print-container {
+  display: none;
+}
+</style>

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -1,19 +1,32 @@
 <template>
-  <div class="print-container">
+  <div :class="dense ? 'wrapper' : 'wrapper pa-3'">
     <section>
-      <v-card-title class="headline pl-0">
+      <v-container class="ma-0 pa-0">
-        <v-icon left color="primary">
+        <v-row>
-          {{ $globals.icons.primary }}
+          <v-col
-        </v-icon>
+            v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
-        {{ recipe.name }}
+            :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
-      </v-card-title>
+            cols="4"
-      <RecipeTimeCard :prep-time="recipe.prepTime" :total-time="recipe.totalTime" :perform-time="recipe.performTime" />
+            align-self="center"
+          >
+            <img :key="imageKey" :src="recipeImageUrl" style="min-height: 50; max-width: 100%;" />
+          </v-col>
+          <v-col order=0>
+            <v-card-title class="headline pl-0">
+              <v-icon left color="primary">
+                {{ $globals.icons.primary }}
+              </v-icon>
+              {{ recipe.name }}
+            </v-card-title>
+            <RecipeTimeCard :prep-time="recipe.prepTime" :total-time="recipe.totalTime" :perform-time="recipe.performTime" color="white" />
+            <v-card-text v-if="preferences.showDescription" class="px-0">
+              <SafeMarkdown :source="recipe.description" />
+            </v-card-text>
+          </v-col>
+        </v-row>
+      </v-container>
     </section>
 
-    <v-card-text class="px-0">
-      <SafeMarkdown :source="recipe.description" />
-    </v-card-text>
-
     <!-- Ingredients -->
     <section>
       <v-card-title class="headline pl-0"> {{ $t("recipe.ingredients") }} </v-card-title>
@@ -30,6 +43,7 @@
           :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
         >
           <template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients">
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <p :key="`ingredient-${ingredientIndex}`" class="ingredient-body" v-html="parseText(ingredient)" />
           </template>
         </div>
@@ -57,24 +71,30 @@
     </section>
 
     <!-- Notes -->
-    <v-divider v-if="hasNotes" class="grey my-4"></v-divider>
+    <div v-if="preferences.showNotes">
+      <v-divider v-if="hasNotes" class="grey my-4"></v-divider>
 
-    <section>
+      <section>
-      <div v-for="(note, index) in recipe.notes" :key="index + 'note'">
+        <div v-for="(note, index) in recipe.notes" :key="index + 'note'">
-        <div class="print-section">
+          <div class="print-section">
-          <h4>{{ note.title }}</h4>
+            <h4>{{ note.title }}</h4>
-          <SafeMarkdown :source="note.text" class="note-body" />
+            <SafeMarkdown :source="note.text" class="note-body" />
+          </div>
         </div>
-      </div>
+      </section>
-    </section>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "@nuxtjs/composition-api";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
+import { useStaticRoutes } from "~/composables/api";
 import { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
+import { NoUndefinedField } from "~/lib/api/types/non-generated";
+import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
 import { parseIngredientText } from "~/composables/recipes";
+import { usePageState } from "~/composables/recipe-page/shared-state";
 
 type IngredientSection = {
   sectionName: string;
@@ -93,15 +113,27 @@ export default defineComponent({
   },
   props: {
     recipe: {
-      type: Object as () => Recipe,
+      type: Object as () => NoUndefinedField<Recipe>,
       required: true,
     },
     scale: {
       type: Number,
       default: 1,
     },
+    dense: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props) {
+    const preferences = useUserPrintPreferences();
+    const { recipeImage } = useStaticRoutes();
+    const { imageKey } = usePageState(props.recipe.slug);
+
+    const recipeImageUrl = computed(() => {
+      return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
+    });
+
     // Group ingredients by section so we can style them independently
     const ingredientSections = computed<IngredientSection[]>(() => {
       if (!props.recipe.recipeIngredient) {
@@ -190,8 +222,12 @@ export default defineComponent({
 
     return {
       hasNotes,
+      imageKey,
+      ImagePosition,
       parseText,
       parseIngredientText,
+      preferences,
+      recipeImageUrl,
       ingredientSections,
       instructionSections,
     };
@@ -199,38 +235,14 @@ export default defineComponent({
 });
 </script>
 
-<style>
-@media print {
-  body,
-  html {
-    margin-top: 0 !important;
-  }
-
-  .print-container {
-    display: block !important;
-  }
-
-  .v-main {
-    display: block;
-  }
-
-  .v-main__wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-</style>
-
 <style scoped>
 /* Makes all text solid black */
-.print-container {
+.wrapper {
-  display: none;
   background-color: white;
 }
 
-.print-container,
+.wrapper,
-.print-container >>> * {
+.wrapper >>> * {
   opacity: 1 !important;
   color: black !important;
 }

frontend/components/Domain/Recipe/RecipeTimeCard.vue

@@ -5,7 +5,7 @@
       :key="index"
       :small="$vuetify.breakpoint.smAndDown"
       label
-      color="accent custom-transparent"
+      :color="color"
       class="ma-1"
     >
       <v-icon left>
@@ -34,6 +34,10 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    color: {
+      type: String,
+      default: "accent custom-transparent"
+    },
   },
   setup(props) {
     const { i18n } = useContext();

frontend/composables/use-users/preferences.ts

@@ -1,6 +1,18 @@
 import { Ref, useContext } from "@nuxtjs/composition-api";
 import { useLocalStorage } from "@vueuse/core";
 
+export interface UserPrintPreferences {
+  imagePosition: string;
+  showDescription: boolean;
+  showNotes: boolean;
+}
+
+export enum ImagePosition {
+  hidden = "hidden",
+  left = "left",
+  right = "right",
+}
+
 export interface UserRecipePreferences {
   orderBy: string;
   orderDirection: string;
@@ -9,6 +21,22 @@ export interface UserRecipePreferences {
   useMobileCards: boolean;
 }
 
+export function useUserPrintPreferences(): Ref<UserPrintPreferences> {
+  const fromStorage = useLocalStorage(
+    "recipe-print-preferences",
+    {
+      imagePosition: "left",
+      showDescription: true,
+      showNotes: true,
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserPrintPreferences>;
+
+  return fromStorage;
+}
+
 export function useUserSortPreferences(): Ref<UserRecipePreferences> {
   const { $globals } = useContext();
 

frontend/lang/messages/en-US.json

@@ -111,6 +111,7 @@
     "ok": "OK",
     "options": "Options:",
     "print": "Print",
+    "print-preferences": "Print Preferences",
     "random": "Random",
     "rating": "Rating",
     "recent": "Recent",

frontend/lib/icons/icons.ts

@@ -31,6 +31,7 @@ import {
   mdiAlertCircle,
   mdiDotsVertical,
   mdiPrinter,
+  mdiPrinterPosCog,
   mdiShareVariant,
   mdiChevronDown,
   mdiHeart,
@@ -128,6 +129,10 @@ import {
   mdiMessageText,
   mdiChefHat,
   mdiContentDuplicate,
+  mdiDockLeft,
+  mdiDockRight,
+  mdiDockTop,
+  mdiDockBottom,
 } from "@mdi/js";
 
 export const icons = {
@@ -176,6 +181,10 @@ export const icons = {
   desktopTowerMonitor: mdiDesktopTowerMonitor,
   devTo: mdiDevTo,
   diceMultiple: mdiDiceMultiple,
+  dockTop: mdiDockTop,
+  dockBottom: mdiDockBottom,
+  dockLeft: mdiDockLeft,
+  dockRight: mdiDockRight,
   dotsHorizontal: mdiDotsHorizontal,
   dotsVertical: mdiDotsVertical,
   download: mdiDownload,
@@ -211,6 +220,7 @@ export const icons = {
   orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
   pageLayoutBody: mdiPageLayoutBody,
   printer: mdiPrinter,
+  printerSettings: mdiPrinterPosCog,
   refreshCircle: mdiRefreshCircle,
   robot: mdiRobot,
   search: mdiMagnify,

frontend/pages/group/mealplan/planner.vue

@@ -246,6 +246,7 @@
                     duplicate: false,
                     mealplanner: false,
                     print: true,
+                    printPreferences: false,
                     share: false,
                     shoppingList: true,
                     publicUrl: false,