mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
added print mode to recipes
This commit is contained in:
vabene1111
@@ -1,93 +1,97 @@
|
||||
<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">
|
||||
|
||||
</v-app-bar>
|
||||
</v-app-bar>
|
||||
<v-app-bar :color="useUserPreferenceStore().userSettings.navBgColor" flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated">
|
||||
<router-link :to="{ name: 'StartPage', params: {} }">
|
||||
<v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo"></v-img>
|
||||
</router-link>
|
||||
<v-spacer></v-spacer>
|
||||
<global-search-dialog></global-search-dialog>
|
||||
<v-btn icon="$add">
|
||||
<v-icon icon="$add" class="fa-fw"></v-icon>
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
|
||||
<v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
|
||||
<v-avatar color="primary" class="me-2 cursor-pointer">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
|
||||
<v-menu activator="parent">
|
||||
|
||||
<v-list density="compact">
|
||||
<v-list-item class="mb-1">
|
||||
<template #prepend>
|
||||
<v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item :to="{ name: 'SettingsPage', params: {} }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-sliders"></v-icon>
|
||||
</template>
|
||||
{{ $t('Settings') }}
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-folder-tree"></v-icon>
|
||||
</template>
|
||||
{{ $t('Database') }}
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'HelpPage' }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-question"></v-icon>
|
||||
</template>
|
||||
{{ $t('Help') }}
|
||||
</v-list-item>
|
||||
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
|
||||
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
|
||||
<template v-if="useUserPreferenceStore().spaces.length > 1">
|
||||
<v-divider></v-divider>
|
||||
<v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
|
||||
<v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
|
||||
<v-spacer></v-spacer>
|
||||
<global-search-dialog ></global-search-dialog>
|
||||
<v-btn icon="$add" class="d-print-none">
|
||||
<v-icon icon="$add" class="fa-fw"></v-icon>
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
|
||||
<v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
|
||||
<v-avatar color="primary" class="me-2 cursor-pointer d-print-none">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
|
||||
<v-menu activator="parent">
|
||||
|
||||
<v-list density="compact">
|
||||
<v-list-item class="mb-1">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
|
||||
<v-icon icon="fa-solid fa-circle" v-else></v-icon>
|
||||
<v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
|
||||
</template>
|
||||
{{ s.name }}
|
||||
<v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-divider></v-divider>
|
||||
<v-list-item :to="{ name: 'SettingsPage', params: {} }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-sliders"></v-icon>
|
||||
</template>
|
||||
{{ $t('Settings') }}
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-folder-tree"></v-icon>
|
||||
</template>
|
||||
{{ $t('Database') }}
|
||||
</v-list-item>
|
||||
<v-list-item :to="{ name: 'HelpPage' }">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-question"></v-icon>
|
||||
</template>
|
||||
{{ $t('Help') }}
|
||||
</v-list-item>
|
||||
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
|
||||
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
|
||||
<template v-if="useUserPreferenceStore().spaces.length > 1">
|
||||
<v-divider></v-divider>
|
||||
<v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
|
||||
<v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
|
||||
<v-icon icon="fa-solid fa-circle" v-else></v-icon>
|
||||
</template>
|
||||
{{ s.name }}
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-list-item link>
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-database"></v-icon>
|
||||
</template>
|
||||
{{ $t('Messages') }}
|
||||
<message-list-dialog></message-list-dialog>
|
||||
</v-list-item>
|
||||
<v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-shield"></v-icon>
|
||||
</template>
|
||||
{{ $t('Admin') }}
|
||||
</v-list-item>
|
||||
<v-list-item :href="getDjangoUrl('accounts/logout')" link>
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
|
||||
</template>
|
||||
{{ $t('Logout') }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-avatar>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-list-item link>
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-database"></v-icon>
|
||||
</template>
|
||||
{{ $t('Messages') }}
|
||||
<message-list-dialog></message-list-dialog>
|
||||
</v-list-item>
|
||||
<v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-shield"></v-icon>
|
||||
</template>
|
||||
{{ $t('Admin') }}
|
||||
</v-list-item>
|
||||
<v-list-item :href="getDjangoUrl('accounts/logout')" link>
|
||||
<template #prepend>
|
||||
<v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
|
||||
</template>
|
||||
{{ $t('Logout') }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-avatar>
|
||||
</v-app-bar>
|
||||
<v-app-bar color="info" density="compact" v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted">
|
||||
<v-app-bar color="info" density="compact"
|
||||
v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted">
|
||||
<p class="text-center w-100">
|
||||
{{ $t('HostedFreeVersion') }}
|
||||
<v-btn color="success" variant="flat" href="https://tandoor.dev/manage">{{ $t('UpgradeNow') }}</v-btn>
|
||||
@@ -110,7 +114,8 @@
|
||||
<router-view></router-view>
|
||||
</v-main>
|
||||
|
||||
<v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated">
|
||||
<!-- completely hide in print mode because setting d-print-node keeps layout -->
|
||||
<v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated && !isPrintMode">
|
||||
<v-list nav>
|
||||
<v-list-item :to="{ name: 'SettingsPage', params: {} }">
|
||||
<template #prepend>
|
||||
@@ -190,10 +195,13 @@ import {useDjangoUrls} from "@/composables/useDjangoUrls";
|
||||
import {onMounted, ref} from "vue";
|
||||
import {isSpaceAboveLimit} from "@/utils/logic_utils";
|
||||
import '@/assets/tandoor_light.css'
|
||||
import {useMediaQuery} from "@vueuse/core";
|
||||
|
||||
const {lgAndUp} = useDisplay()
|
||||
const {getDjangoUrl} = useDjangoUrls()
|
||||
|
||||
const isPrintMode = useMediaQuery('print')
|
||||
|
||||
onMounted(() => {
|
||||
useUserPreferenceStore()
|
||||
})
|
||||
|
||||
@@ -8,56 +8,63 @@
|
||||
|
||||
<!-- </v-table>-->
|
||||
|
||||
<!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
|
||||
<!-- items-per-page="0">-->
|
||||
<!-- <template v-slot:item.checked="{ item }">-->
|
||||
<!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-slot:item.amount="{ item }">-->
|
||||
<!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
|
||||
<!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
|
||||
<!-- </template>-->
|
||||
<!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
|
||||
<!-- items-per-page="0">-->
|
||||
<!-- <template v-slot:item.checked="{ item }">-->
|
||||
<!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-slot:item.amount="{ item }">-->
|
||||
<!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
|
||||
<!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <template v-slot:item.note="{ item }">-->
|
||||
<!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
|
||||
<!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
|
||||
<!-- </v-icon>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-data-table>-->
|
||||
<!-- <template v-slot:item.note="{ item }">-->
|
||||
<!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
|
||||
<!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
|
||||
<!-- </v-icon>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-data-table>-->
|
||||
|
||||
<v-table density="compact">
|
||||
<tbody>
|
||||
<template v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
|
||||
<tr>
|
||||
<template v-if="i.isHeader">
|
||||
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pa-0 d-print-none" v-if="showCheckbox">
|
||||
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
|
||||
</td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1"
|
||||
v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
|
||||
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="i.food">
|
||||
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
|
||||
{{ ingredientToFoodString(i, ingredientFactor) }}
|
||||
</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="text-disabled font-italic"> {{ i.note }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<tr v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
|
||||
<template v-if="i.isHeader">
|
||||
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
|
||||
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
|
||||
</td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
|
||||
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
|
||||
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="i.food">
|
||||
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
|
||||
{{ ingredientToFoodString(i, ingredientFactor) }}
|
||||
</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>
|
||||
</td>
|
||||
|
||||
<td style="width: 1%; text-wrap: nowrap">
|
||||
<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>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</td>
|
||||
|
||||
<td style="width: 1%; text-wrap: nowrap" class="d-print-none">
|
||||
<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>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<v-icon icon="$properties"></v-icon>
|
||||
{{ $t('Properties') }}
|
||||
|
||||
<v-btn-toggle border divided density="compact" class="float-right" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
|
||||
<v-btn-toggle border divided density="compact" class="float-right d-print-none" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
|
||||
<v-btn size="small" value="food">{{ $t('Food') }}</v-btn>
|
||||
<v-btn size="small" value="recipe">{{ $t('Recipe') }}</v-btn>
|
||||
</v-btn-toggle>
|
||||
@@ -25,9 +25,9 @@
|
||||
<td>{{ $n(p.propertyAmountPerServing) }} {{ p.unit }}</td>
|
||||
<td>{{ $n(p.propertyAmountTotal) }} {{ p.unit }}</td>
|
||||
<td v-if="sourceSelectedToShow == 'food'">
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small"
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small" class="d-print-none"
|
||||
v-if="p.missingValue"></v-btn>
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue"></v-btn>
|
||||
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue" class="d-print-none"></v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<template>
|
||||
|
||||
<v-card class="mt-1">
|
||||
<v-card class="mt-1" v-if="cookLogs.length > 0">
|
||||
<v-card-title>{{ $t('Activity') }}</v-card-title>
|
||||
<v-card-text>
|
||||
|
||||
|
||||
<v-list>
|
||||
<v-list-item v-for="c in cookLogs.sort((a,b) => a.createdAt! > b.createdAt! ? 1 : -1)" :key="c.id">
|
||||
<template #prepend>
|
||||
@@ -31,7 +29,7 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mt-1">
|
||||
<v-card class="mt-1 d-print-none">
|
||||
<v-card-text>
|
||||
<v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment"></v-textarea>
|
||||
<v-row de>
|
||||
|
||||
@@ -89,15 +89,15 @@
|
||||
</v-card-text>
|
||||
|
||||
<v-row class="text-center text-body-2 mb-1 flex-grow-0">
|
||||
<v-col >
|
||||
<v-col>
|
||||
<i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} {{ $t('min') }}<br/>
|
||||
<div class="text-grey">{{ $t('WorkingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<v-col>
|
||||
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} {{ $t('min') }}</div>
|
||||
<div class="text-grey">{{ $t('WaitingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<v-col>
|
||||
<div class="cursor-pointer">
|
||||
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
|
||||
<div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
|
||||
@@ -129,56 +129,46 @@
|
||||
|
||||
<property-view v-model="recipe" :servings="servings" v-if="recipe.internal"></property-view>
|
||||
|
||||
<v-expansion-panels class="mt-2">
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon>
|
||||
{{ $t('Information') }}
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('CreatedBy')"
|
||||
:subtitle="recipe.createdBy.displayName"
|
||||
prepend-icon="fa-solid fa-user">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Created')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$create">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Updated')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$edit">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" v-if="recipe.sourceUrl">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Imported_From')"
|
||||
prepend-icon="$import">
|
||||
<template #subtitle>
|
||||
<a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
|
||||
|
||||
</v-expansion-panels>
|
||||
|
||||
<v-card class="mt-2">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('CreatedBy')"
|
||||
:subtitle="recipe.createdBy.displayName"
|
||||
prepend-icon="fa-solid fa-user">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Created')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$create">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Updated')"
|
||||
:subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
|
||||
prepend-icon="$edit">
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" v-if="recipe.sourceUrl">
|
||||
<v-card
|
||||
variant="outlined"
|
||||
:title="$t('Imported_From')"
|
||||
prepend-icon="$import">
|
||||
<template #subtitle>
|
||||
<a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<recipe-activity :recipe="recipe"></recipe-activity>
|
||||
</template>
|
||||
@@ -195,12 +185,13 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
|
||||
import KeywordsComponent from "@/components/display/KeywordsBar.vue";
|
||||
import RecipeImage from "@/components/display/RecipeImage.vue";
|
||||
import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
|
||||
import {useWakeLock} from "@vueuse/core";
|
||||
import {useMediaQuery, useWakeLock} from "@vueuse/core";
|
||||
import StepView from "@/components/display/StepView.vue";
|
||||
import {DateTime} from "luxon";
|
||||
import PropertyView from "@/components/display/PropertyView.vue";
|
||||
|
||||
const {request, release} = useWakeLock()
|
||||
const isPrintMode = useMediaQuery('print')
|
||||
|
||||
const recipe = defineModel<Recipe>({required: true})
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span>
|
||||
</v-col>
|
||||
<v-col class="text-right">
|
||||
<v-btn-group density="compact" variant="tonal">
|
||||
<v-btn-group density="compact" variant="tonal" class="d-print-none">
|
||||
<v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
|
||||
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
|
||||
</v-btn>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<slot name="activator">
|
||||
<v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw" v-if="mobile"></v-btn>
|
||||
<v-btn @click="dialog = true" variant="plain" v-else>
|
||||
<slot name="activator" >
|
||||
<v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw d-print-none" v-if="mobile"></v-btn>
|
||||
<v-btn @click="dialog = true" variant="plain" class="d-print-none" v-else>
|
||||
<v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
|
||||
<span class="d-none d-sm-block">{{ $t('Search') }}</span>
|
||||
<v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{ $t('Ctrl+K') }}</v-chip>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size">
|
||||
<v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size" class="d-print-none">
|
||||
<v-icon icon="fa-solid fa-ellipsis-v"></v-icon>
|
||||
<v-menu activator="parent" close-on-content-click>
|
||||
<v-list density="compact" class="pt-1 pb-1">
|
||||
@@ -21,6 +21,11 @@
|
||||
{{ $t('Share') }}
|
||||
<recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
|
||||
</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>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
@@ -29,7 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {PropType} from 'vue'
|
||||
import {nextTick, PropType} from 'vue'
|
||||
import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
|
||||
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
|
||||
import RecipeShareDialog from "@/components/dialogs/RecipeShareDialog.vue";
|
||||
@@ -41,6 +46,10 @@ const props = defineProps({
|
||||
size: {type: String, default: 'medium'},
|
||||
})
|
||||
|
||||
function openPrintView() {
|
||||
print()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user