github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

Timeline Item

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 13:18:06 +00:00
commit bb46dd1317
1 changed files with 65 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

77
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View file

@ -91,7 +91,7 @@
</v-timeline-item> </v-timeline-item>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue"; import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
import { useStaticRoutes } from "~/composables/api"; import { useStaticRoutes } from "~/composables/api";
@ -100,41 +100,37 @@ import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue"; import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import SafeMarkdown from "~/components/global/SafeMarkdown.vue"; import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
export default defineNuxtComponent({ interface Props {
components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown }, event: RecipeTimelineEventOut;
recipe?: Recipe;
showRecipeCards?: boolean;
}
props: { const props = withDefaults(defineProps<Props>(), {
event: { recipe: undefined,
type: Object as () => RecipeTimelineEventOut, showRecipeCards: false,
required: true, });
},
recipe: {
type: Object as () => Recipe,
default: undefined,
},
showRecipeCards: {
type: Boolean,
default: false,
},
},
emits: ["selected", "update", "delete"],
setup(props) { defineEmits<{
const { $vuetify, $globals } = useNuxtApp(); selected: [];
const { recipeTimelineEventImage } = useStaticRoutes(); update: [];
const { eventTypeOptions } = useTimelineEventTypes(); delete: [];
const timelineEvents = ref([] as RecipeTimelineEventOut[]); }>();
const { user: currentUser } = useMealieAuth(); const { $vuetify, $globals } = useNuxtApp();
const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes();
const route = useRoute(); const { user: currentUser } = useMealieAuth();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => { const route = useRoute();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => {
return $vuetify.display.smAndDown.value; return $vuetify.display.smAndDown.value;
}); });
const attrs = computed(() => { const attrs = computed(() => {
if (useMobileFormat.value) { if (useMobileFormat.value) {
return { return {
class: "px-0", class: "px-0",
@ -163,33 +159,20 @@ export default defineNuxtComponent({
}, },
}; };
} }
}); });
const icon = computed(() => { const icon = computed(() => {
const option = eventTypeOptions.value.find(option => option.value === props.event.eventType); const option = eventTypeOptions.value.find(option => option.value === props.event.eventType);
return option ? option.icon : $globals.icons.informationVariant; return option ? option.icon : $globals.icons.informationVariant;
}); });
const hideImage = ref(false); const hideImage = ref(false);
const eventImageUrl = computed<string>(() => { const eventImageUrl = computed<string>(() => {
if (props.event.image !== "has image") { if (props.event.image !== "has image") {
return ""; return "";
} }
return recipeTimelineEventImage(props.event.recipeId, props.event.id); return recipeTimelineEventImage(props.event.recipeId, props.event.id);
});
return {
attrs,
groupSlug,
icon,
eventImageUrl,
hideImage,
timelineEvents,
useMobileFormat,
currentUser,
};
},
}); });
</script> </script>