improved print view

vue3/src/apps/tandoor/Tandoor.vue

@@ -1,10 +1,10 @@
 <template>
     <v-app>
-        <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated">
+        <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated && !useUserPreferenceStore().isPrintMode">
 
         </v-app-bar>
         <v-app-bar :color="useUserPreferenceStore().activeSpace.navBgColor ? useUserPreferenceStore().activeSpace.navBgColor : useUserPreferenceStore().userSettings.navBgColor"
-                   flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated" :scroll-behavior="useUserPreferenceStore().userSettings.navSticky ? '' : 'hide'">
+                   flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated && !useUserPreferenceStore().isPrintMode" :scroll-behavior="useUserPreferenceStore().userSettings.navSticky ? '' : 'hide'">
             <router-link :to="{ name: 'StartPage', params: {} }">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"
                        v-if="useUserPreferenceStore().userSettings.navShowLogo && !useUserPreferenceStore().activeSpace.navLogo"></v-img>
@@ -58,7 +58,7 @@
             </p>
         </v-app-bar>
 
-        <v-app-bar color="info" density="compact" v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.message != ''">
+        <v-app-bar color="info" density="compact" v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.message != '' && !useUserPreferenceStore().isPrintMode">
             <p class="text-center w-100">
                 {{ useUserPreferenceStore().activeSpace.message }}
             </p>
@@ -69,7 +69,7 @@
         </v-main>
 
         <!-- completely hide in print mode because setting d-print-node keeps layout -->
-        <v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated && !isPrintMode">
+        <v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated && !useUserPreferenceStore().isPrintMode">
             <v-list nav>
                 <v-list-item :to="{ name: 'SettingsPage', params: {} }">
                     <template #prepend>
@@ -96,7 +96,7 @@
 
         </v-navigation-drawer>
 
-        <v-bottom-navigation grow v-if="useUserPreferenceStore().isAuthenticated && !lgAndUp">
+        <v-bottom-navigation grow v-if="useUserPreferenceStore().isAuthenticated && !lgAndUp && !useUserPreferenceStore().isPrintMode">
             <v-btn value="recent" :to="{ name: 'StartPage', params: {} }">
                 <v-icon icon="fa-fw fas fa-book "/>
             </v-btn>
@@ -133,28 +133,21 @@ import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue"
 
 import {useDisplay, useLocale} from "vuetify"
 import VSnackbarQueued from "@/components/display/VSnackbarQueued.vue";
-import MessageListDialog from "@/components/dialogs/MessageListDialog.vue";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import NavigationDrawerContextMenu from "@/components/display/NavigationDrawerContextMenu.vue";
-import {useDjangoUrls} from "@/composables/useDjangoUrls";
-import {nextTick, onMounted} from "vue";
+import {nextTick, onMounted, ref} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
-import {useMediaQuery, useTitle} from "@vueuse/core";
+import {useTitle} from "@vueuse/core";
 import HelpDialog from "@/components/dialogs/HelpDialog.vue";
-import {NAVIGATION_DRAWER} from "@/utils/navigation.ts";
 import {useNavigation} from "@/composables/useNavigation.ts";
 import {useRouter} from "vue-router";
 import {useI18n} from "vue-i18n";
 
 const {lgAndUp} = useDisplay()
-const {getDjangoUrl} = useDjangoUrls()
 const {t} = useI18n()
 
 const title = useTitle()
 const router = useRouter()
-const i18n = useI18n()
-
-const isPrintMode = useMediaQuery('print')
 
 onMounted(() => {
     useUserPreferenceStore().init().then(() => {

vue3/src/components/display/IngredientsTable.vue

@@ -54,15 +54,13 @@
                             </router-link>
                             <a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
                             <span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
-                            <template v-if="i.note != '' && i.note != undefined">
-                                <span class="d-none d-print-block text-disabled font-italic">&nbsp;{{ i.note }}</span>
-                            </template>
+
                         </template>
-
-
                     </td>
-
-                    <td style="width: 1%; text-wrap: nowrap" class="d-print-none">
+                    <td v-if="useUserPreferenceStore().isPrintMode">
+                        <span class="text-disabled font-italic"> {{ i.note }}</span>
+                    </td>
+                    <td style="width: 1%; text-wrap: nowrap" v-if="!useUserPreferenceStore().isPrintMode">
                         <v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
                             <v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
                         </v-icon>

vue3/src/components/display/RecipeActivity.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card class="mt-1 d-print-none" v-if="useUserPreferenceStore().isAuthenticated" :loading="loading">
+    <v-card class="mt-1" v-if="useUserPreferenceStore().isAuthenticated && !useUserPreferenceStore().isPrintMode" :loading="loading">
         <v-card-text>
             <v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment" auto-grow></v-textarea>
             <v-row dense>

vue3/src/components/display/RecipeView.vue

@@ -121,10 +121,10 @@
         <template v-if="recipe.filePath">
             <external-recipe-viewer class="mt-2" :recipe="recipe"></external-recipe-viewer>
 
-            <v-card :title="$t('AI')" prepend-icon="$ai"  :loading="fileApiLoading || loading" :disabled="fileApiLoading || loading || !useUserPreferenceStore().activeSpace.aiEnabled"
+            <v-card :title="$t('AI')" prepend-icon="$ai" :loading="fileApiLoading || loading" :disabled="fileApiLoading || loading || !useUserPreferenceStore().activeSpace.aiEnabled"
                     v-if="!recipe.internal">
                 <v-card-text>
-                    {{$t('ConvertUsingAI')}}
+                    {{ $t('ConvertUsingAI') }}
 
                     <model-select model="AiProvider" v-model="selectedAiProvider">
                         <template #append>
@@ -135,7 +135,8 @@
             </v-card>
         </template>
 
-        <v-card class="mt-1" v-if="(recipe.steps.length > 1 || (recipe.steps.length == 1 && !recipe.steps[0].showIngredientsTable)) && recipe.showIngredientOverview">
+        <v-card class="mt-1"
+                v-if="(recipe.steps.length > 1 || (recipe.steps.length == 1 && !recipe.steps[0].showIngredientsTable)) && recipe.showIngredientOverview && !useUserPreferenceStore().isPrintMode">
             <steps-overview :steps="recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
         </v-card>
 
@@ -147,8 +148,8 @@
 
         <v-card class="mt-2">
             <v-card-text>
-                <v-row>
-                    <v-col cols="12" md="3">
+                <v-row dense>
+                    <v-col cols="12" :sm="(recipe.sourceUrl) ? 3 : 4">
                         <v-card
                             variant="outlined"
                             :title="$t('CreatedBy')"
@@ -157,7 +158,7 @@
                             :to="(useUserPreferenceStore().isAuthenticated) ?  {name: 'SearchPage', query: {createdby: recipe.createdBy.id!}}: undefined">
                         </v-card>
                     </v-col>
-                    <v-col cols="12" md="3">
+                    <v-col cols="12" :sm="(recipe.sourceUrl) ? 3 : 4">
                         <v-card
                             variant="outlined"
                             :title="$t('Created')"
@@ -166,7 +167,7 @@
                             :to="(useUserPreferenceStore().isAuthenticated) ? {name: 'SearchPage', query: {createdon: DateTime.fromJSDate(recipe.createdAt).toISODate()}} : undefined">
                         </v-card>
                     </v-col>
-                    <v-col cols="12" md="3">
+                    <v-col cols="12" :sm="(recipe.sourceUrl) ? 3 : 4">
                         <v-card
                             variant="outlined"
                             :title="$t('Updated')"
@@ -175,7 +176,7 @@
                             :to="(useUserPreferenceStore().isAuthenticated) ?  {name: 'SearchPage', query: {updatedon: DateTime.fromJSDate(recipe.updatedAt).toISODate()}}: undefined">
                         </v-card>
                     </v-col>
-                    <v-col cols="12" md="3" v-if="recipe.sourceUrl">
+                    <v-col cols="12" :sm="(recipe.sourceUrl) ? 3 : 4" v-if="recipe.sourceUrl">
                         <v-card
                             variant="outlined"
                             :title="$t('Imported_From')"
@@ -257,7 +258,7 @@ onBeforeUnmount(() => {
 function aiConvertRecipe() {
     let api = new ApiApi()
 
-    doAiImport(selectedAiProvider.value.id!,null, '', recipe.value.id!).then(r => {
+    doAiImport(selectedAiProvider.value.id!, null, '', recipe.value.id!).then(r => {
         if (r.recipe) {
             recipe.value.internal = true
             recipe.value.steps = r.recipe.steps

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -26,11 +26,9 @@
                         <v-progress-circular v-if="duplicateLoading" indeterminate size="small"></v-progress-circular>
                     </template>
                 </v-list-item>
-
-                <!-- TODO when calling print() some timing or whatever issue makes it so the useMediaQuery does not work and the sidebar is still shown -->
-                <!--                <v-list-item prepend-icon="fa-solid fa-print" @click="openPrintView()">-->
-                <!--                    {{ $t('Print') }}-->
-                <!--                </v-list-item>-->
+                <v-list-item :to="{ name: 'RecipeViewPage', params: { id: recipe.id}, query: {print: 'true'} }" :active="false" target="_blank" prepend-icon="fa-solid fa-print">
+                    {{ $t('Print') }}
+                </v-list-item>
             </v-list>
         </v-menu>
     </v-btn>

vue3/src/pages/RecipeViewPage.vue

@@ -1,11 +1,13 @@
 <template>
     <v-container :class="{'ps-0 pe-0 pt-0': mobile}">
-        <recipe-view v-model="recipe"></recipe-view>
+        <v-defaults-provider :defaults="(useUserPreferenceStore().isPrintMode ? {VCard: {variant: 'flat'}} : {})">
 
-        <div class="mt-2" v-if="isShared && Object.keys(recipe).length > 0">
-            <import-tandoor-dialog></import-tandoor-dialog>
-        </div>
+            <recipe-view v-model="recipe"></recipe-view>
 
+            <div class="mt-2" v-if="isShared && Object.keys(recipe).length > 0">
+                <import-tandoor-dialog></import-tandoor-dialog>
+            </div>
+        </v-defaults-provider>
 
     </v-container>
 
@@ -56,6 +58,12 @@ function refreshData(recipeId: string) {
         recipe.value = r
         title.value = recipe.value.name
 
+        setTimeout(() => {
+            if (useUserPreferenceStore().isPrintMode) {
+                window.print()
+            }
+        }, 500)
+
         if (useUserPreferenceStore().isAuthenticated) {
             api.apiViewLogCreate({viewLog: {recipe: Number(recipeId)} as ViewLog})
         }

vue3/src/stores/UserPreferenceStore.ts

@@ -7,6 +7,7 @@ import {computed, ComputedRef, ref} from "vue";
 import {DeviceSettings} from "@/types/settings";
 import {useTheme} from "vuetify";
 import {useRouter} from "vue-router";
+import {useRouteQuery} from "@vueuse/router";
 
 const DEVICE_SETTINGS_KEY = 'TANDOOR_DEVICE_SETTINGS'
 const USER_PREFERENCE_KEY = 'TANDOOR_USER_PREFERENCE'
@@ -55,6 +56,11 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      */
     const defaultUnitObj = ref<Unit | null>(null)
 
+    /**
+     * detect if print mode is activated by checking for "print" query parameter
+     */
+    const isPrintMode = useRouteQuery('print', false, {transform: Boolean})
+
     const theme = useTheme()
     const router = useRouter()
 
@@ -250,10 +256,10 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
      * applies user settings regarding themes/styling
      */
     function updateTheme() {
-        if (userSettings.value.theme == 'TANDOOR') {
-            theme.change('light')
-        } else if (userSettings.value.theme == 'TANDOOR_DARK') {
+        if (userSettings.value.theme == 'TANDOOR_DARK' && !isPrintMode.value) {
             theme.change('dark')
+        } else {
+            theme.change('light')
         }
     }
 
@@ -281,6 +287,7 @@ export const useUserPreferenceStore = defineStore('user_preference_store', () =>
         spaces,
         activeUserSpace,
         isAuthenticated,
+        isPrintMode,
         initCompleted,
         defaultUnitObj,
         loadUserSettings,