mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-06-02 21:25:45 -04:00
fe17922bb8
* extended query filter to accept nested tables * decoupled timeline api from recipe slug * modified frontend to use simplified events api * fixed nested loop index ghosting * updated existing tests * gave mypy a snack * added tests for nested queries * fixed "last made" render error * decoupled recipe timeline from dialog * removed unused props * tweaked recipe get_all to accept ids * created group global timeline added new timeline page to sidebar reformatted the recipe timeline added vertical option to recipe card mobile * extracted timeline item into its own component * fixed apploader centering * added paginated scrolling to recipe timeline * added sort direction config fixed infinite scroll on dialog fixed hasMore var not resetting during instantiation * added sort direction to user preferences * updated API docs with new query filter feature * better error tracing * fix for recipe not found response * simplified recipe crud route for slug/id added test for fetching by slug/id * made query filter UUID validation clearer * moved timeline menu option below shopping lists --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<template>
|
||
<v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'info' : 'secondary'">
|
||
<template #activator="{ on, attrs }">
|
||
<v-btn
|
||
small
|
||
:color="buttonStyle ? 'info' : 'secondary'"
|
||
:fab="buttonStyle"
|
||
class="ml-1"
|
||
v-bind="attrs"
|
||
v-on="on"
|
||
@click.prevent="toggleTimeline"
|
||
>
|
||
<v-icon :small="!buttonStyle" :color="buttonStyle ? 'white' : 'secondary'">
|
||
{{ $globals.icons.timelineText }}
|
||
</v-icon>
|
||
</v-btn>
|
||
<BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
|
||
<RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="70vh" />
|
||
</BaseDialog>
|
||
|
||
</template>
|
||
<span>{{ $t('recipe.open-timeline') }}</span>
|
||
</v-tooltip>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||
import RecipeTimeline from "./RecipeTimeline.vue";
|
||
export default defineComponent({
|
||
components: { RecipeTimeline },
|
||
|
||
props: {
|
||
buttonStyle: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
slug: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
recipeName: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
|
||
setup(props) {
|
||
const { $vuetify, i18n } = useContext();
|
||
const showTimeline = ref(false);
|
||
function toggleTimeline() {
|
||
showTimeline.value = !showTimeline.value;
|
||
}
|
||
|
||
const timelineAttrs = computed(() => {
|
||
let title = i18n.tc("recipe.timeline")
|
||
if ($vuetify.breakpoint.smAndDown) {
|
||
title += ` – ${props.recipeName}`
|
||
}
|
||
|
||
return {
|
||
title,
|
||
queryFilter: `recipe.slug="${props.slug}"`,
|
||
}
|
||
})
|
||
|
||
return { showTimeline, timelineAttrs, toggleTimeline };
|
||
},
|
||
});
|
||
</script>
|