Feature: Global Timeline

docs/docs/documentation/getting-started/api-usage.md

@@ -72,6 +72,13 @@ This filter will find all recipes created on or after a particular date: <br>
 This filter will find all units that have `useAbbreviation` disabled: <br>
 `useAbbreviation = false`
 
+##### Nested Property filters
+When querying tables with relationships, you can filter properties on related tables. For instance, if you want to query all recipes owned by a particular user: <br>
+`user.username = "SousChef20220320"`
+
+This timeline event filter will return all timeline events for recipes that were created after a particular date: <br>
+`recipe.createdAt >= "2023-02-25"`
+
 ##### Compound Filters
 You can combine multiple filter statements using logical operators (`AND`, `OR`).
 

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -7,8 +7,18 @@
       :to="$listeners.selected ? undefined : `/recipe/${slug}`"
       @click="$emit('selected')"
     >
+      <v-img v-if="vertical">
+        <RecipeCardImage
+          :icon-size="100"
+          :height="75"
+          :slug="slug"
+          :recipe-id="recipeId"
+          small
+          :image-version="image"
+        />
+      </v-img>
       <v-list-item three-line>
-        <slot name="avatar">
+        <slot v-if="!vertical" name="avatar">
           <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
             <RecipeCardImage
               :icon-size="100"
@@ -17,15 +27,15 @@
               :recipe-id="recipeId"
               small
               :image-version="image"
-            ></RecipeCardImage>
+            />
           </v-list-item-avatar>
         </slot>
         <v-list-item-content>
           <v-list-item-title class="mb-1">{{ name }} </v-list-item-title>
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
-          <div class="d-flex justify-center align-center">
+          <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
               <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
               <v-rating
@@ -107,6 +117,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    vertical: {
+      type: Boolean,
+      default: false,
+    }
   },
   setup() {
     const { $auth } = useContext();

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -75,17 +75,17 @@ import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/comp
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
-import { RecipeTimelineEventIn } from "~/lib/api/types/recipe";
+import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   props: {
     value: {
       type: String,
       default: null,
     },
-    recipeSlug: {
-      type: String,
-      required: true,
+    recipe: {
+      type: Object as () => Recipe,
+      default: null,
     },
   },
   setup(props, context) {
@@ -99,6 +99,7 @@ export default defineComponent({
       eventType: "comment",
       eventMessage: "",
       timestamp: undefined,
+      recipeId: props.recipe?.id || "",
     });
 
     whenever(
@@ -113,20 +114,21 @@ export default defineComponent({
 
     const state = reactive({datePickerMenu: false});
     async function createTimelineEvent() {
-      if (!newTimelineEvent.value.timestamp) {
+      if (!(newTimelineEvent.value.timestamp && props.recipe?.id && props.recipe?.slug)) {
         return;
       }
 
+      newTimelineEvent.value.recipeId = props.recipe.id
       const actions: Promise<any>[] = [];
 
       // the user only selects the date, so we set the time to end of day local time
       // we choose the end of day so it always comes after "new recipe" events
       newTimelineEvent.value.timestamp = new Date(newTimelineEvent.value.timestamp + "T23:59:59").toISOString();
-      actions.push(userApi.recipes.createTimelineEvent(props.recipeSlug, newTimelineEvent.value));
+      actions.push(userApi.recipes.createTimelineEvent(newTimelineEvent.value));
 
       // we also update the recipe's last made value
       if (!props.value || newTimelineEvent.value.timestamp > props.value) {
-        actions.push(userApi.recipes.updateLastMade(props.recipeSlug,  newTimelineEvent.value.timestamp));
+        actions.push(userApi.recipes.updateLastMade(props.recipe.slug,  newTimelineEvent.value.timestamp));
 
         // update recipe in parent so the user can see it
         // we remove the trailing "Z" since this is how the API returns it

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

@@ -13,7 +13,7 @@
           <div v-if="user.id" class="d-flex justify-center mt-5">
             <RecipeLastMade
               v-model="recipe.lastMade"
-              :recipe-slug="recipe.slug"
+              :recipe="recipe"
               class="d-flex justify-center flex-wrap"
               :class="true ? undefined : 'force-bottom'"
             />