Feat/recipe timeline event UI

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -22,6 +22,7 @@
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
+      <RecipeTimelineBadge button-style :slug="recipe.slug" :recipe-name="recipe.name"  />
       <v-tooltip v-if="!locked" bottom color="info">
         <template #activator="{ on, attrs }">
           <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('edit', true)">
@@ -70,7 +71,6 @@
         :key="index"
         :fab="$vuetify.breakpoint.xs"
         :small="$vuetify.breakpoint.xs"
-        class="mx-1"
         :color="btn.color"
         @click="emitHandler(btn.event)"
       >
@@ -85,6 +85,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import { Recipe } from "~/lib/api/types/recipe";
 
 const SAVE_EVENT = "save";
@@ -94,7 +95,7 @@ const JSON_EVENT = "json";
 const OCR_EVENT = "ocr";
 
 export default defineComponent({
-  components: { RecipeContextMenu, RecipeFavoriteBadge },
+  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
   props: {
     recipe: {
       required: true,

frontend/components/Domain/Recipe/RecipeDialogTimeline.vue

@@ -0,0 +1,245 @@
+<template>
+  <BaseDialog
+    v-model="dialog"
+    :title="attrs.title"
+    :icon="$globals.icons.timelineText"
+    width="70%"
+  >
+    <v-card
+      v-if="timelineEvents && timelineEvents.length"
+      height="fit-content"
+      max-height="70vh"
+      width="100%"
+      style="overflow-y: auto;"
+    >
+      <v-timeline :dense="attrs.timeline.dense">
+        <v-timeline-item
+          v-for="(event, index) in timelineEvents"
+          :key="event.id"
+          :class="attrs.timeline.item.class"
+          fill-dot
+          :small="attrs.timeline.item.small"
+          :icon="chooseEventIcon(event)"
+        >
+          <template v-if="!useMobileFormat" #opposite>
+            <v-chip v-if="event.timestamp" label large>
+              <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
+              {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+            </v-chip>
+          </template>
+          <v-card>
+            <v-sheet>
+              <v-card-title>
+                <v-row>
+                  <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'">
+                    <UserAvatar :user-id="event.userId" />
+                  </v-col>
+                  <v-col v-if="useMobileFormat" align-self="center" class="ml-3">
+                    <v-chip label>
+                      <v-icon> {{ $globals.icons.calendar }} </v-icon>
+                      {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+                    </v-chip>
+                  </v-col>
+                  <v-col v-else cols="9">
+                    {{ event.subject }}
+                  </v-col>
+                  <v-spacer />
+                  <v-col :cols="useMobileFormat ? 'auto' : '1'" :class="useMobileFormat ? '' : 'pa-0'">
+                    <RecipeTimelineContextMenu
+                      v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
+                      :menu-top="false"
+                      :slug="slug"
+                      :event="event"
+                      :menu-icon="$globals.icons.dotsVertical"
+                      fab
+                      color="transparent"
+                      :elevation="0"
+                      :card-menu="false"
+                      :use-items="{
+                        edit: true,
+                        delete: true,
+                      }"
+                      @update="updateTimelineEvent(index)"
+                      @delete="deleteTimelineEvent(index)"
+                    />
+                  </v-col>
+                </v-row>
+              </v-card-title>
+              <v-card-text>
+                <v-row>
+                  <v-col>
+                    <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+                    <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+                      {{ event.eventMessage }}
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-sheet>
+          </v-card>
+        </v-timeline-item>
+      </v-timeline>
+    </v-card>
+    <v-card v-else>
+      <v-card-title class="justify-center pa-9">
+        {{ $t("recipe.timeline-is-empty") }}
+      </v-card-title>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { whenever } from "@vueuse/core";
+import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
+import { alert } from "~/composables/use-toast";
+import { useUserApi } from "~/composables/api";
+import { RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe"
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+
+export default defineComponent({
+  components: { RecipeTimelineContextMenu, UserAvatar },
+
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    slug: {
+      type: String,
+      default: "",
+    },
+    recipeName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup(props, context) {
+    const api = useUserApi();
+    const { $globals, $vuetify, i18n } = useContext();
+    const timelineEvents = ref([{}] as RecipeTimelineEventOut[])
+
+    const useMobileFormat = computed(() => {
+      return $vuetify.breakpoint.smAndDown;
+    });
+
+    const attrs = computed(() => {
+      if (useMobileFormat.value) {
+        return {
+          title: i18n.tc("recipe.timeline"),
+          timeline: {
+            dense: true,
+            item: {
+              class: "pr-3",
+              small: true
+            }
+          }
+        }
+      }
+      else {
+        return {
+          title: `${i18n.tc("recipe.timeline")} – ${props.recipeName}`,
+          timeline: {
+            dense: false,
+            item: {
+              class: "px-3",
+              small: false
+            }
+          }
+        }
+      }
+    })
+
+    // V-Model Support
+    const dialog = computed({
+      get: () => {
+        return props.value;
+      },
+      set: (val) => {
+        context.emit("input", val);
+      },
+    });
+
+    whenever(
+      () => props.value,
+      () => {
+        refreshTimelineEvents();
+      }
+    );
+
+    function chooseEventIcon(event: RecipeTimelineEventOut) {
+      switch (event.eventType) {
+        case "comment":
+          return $globals.icons.commentTextMultiple;
+
+        case "info":
+          return $globals.icons.informationVariant;
+
+        case "system":
+          return $globals.icons.cog;
+
+        default:
+          return $globals.icons.informationVariant;
+      };
+    };
+
+    async function updateTimelineEvent(index: number) {
+      const event = timelineEvents.value[index]
+      const payload: RecipeTimelineEventUpdate = {
+        subject: event.subject,
+        eventMessage: event.eventMessage,
+        image: event.image,
+      };
+
+        const { response } = await api.recipes.updateTimelineEvent(props.slug, event.id, payload);
+        if (response?.status !== 200) {
+          alert.error(i18n.t("events.something-went-wrong") as string);
+          return;
+        }
+
+        alert.success(i18n.t("events.event-updated") as string);
+      };
+
+    async function deleteTimelineEvent(index: number) {
+      const { response } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
+      if (response?.status !== 200) {
+        alert.error(i18n.t("events.something-went-wrong") as string);
+        return;
+      }
+
+      timelineEvents.value.splice(index, 1);
+      alert.success(i18n.t("events.event-deleted") as string);
+    };
+
+    async function refreshTimelineEvents() {
+      // TODO: implement infinite scroll and paginate instead of loading all events at once
+      const page = 1;
+      const perPage = -1;
+      const orderBy = "timestamp";
+      const orderDirection = "asc";
+
+      const response = await api.recipes.getAllTimelineEvents(props.slug, page, perPage, { orderBy, orderDirection });
+      if (!response?.data) {
+        return;
+      }
+
+      timelineEvents.value = response.data.items;
+    };
+
+    // preload events
+    refreshTimelineEvents();
+
+    return {
+      attrs,
+      chooseEventIcon,
+      deleteTimelineEvent,
+      dialog,
+      refreshTimelineEvents,
+      timelineEvents,
+      updateTimelineEvent,
+      useMobileFormat,
+    };
+  },
+});
+</script>