chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/Recipe/RecipeTimeline.vue

@@ -0,0 +1,319 @@
+<template>
+  <div style="height: 100%;">
+    <v-row class="my-0 mx-7">
+      <v-spacer />
+      <v-col class="text-right">
+        <!-- Filters -->
+        <v-menu
+          offset-y
+          bottom
+          start
+          nudge-bottom="3"
+          :close-on-content-click="false"
+        >
+          <template #activator="{ props: activatorProps }">
+            <v-badge
+              :content="filterBadgeCount"
+              :model-value="filterBadgeCount > 0"
+              bordered
+            >
+              <v-btn
+                class="rounded-circle"
+                size="small"
+                color="info"
+                v-bind="activatorProps"
+                icon
+              >
+                <v-icon> {{ $globals.icons.filter }} </v-icon>
+              </v-btn>
+            </v-badge>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item
+                :prepend-icon="preferences.orderDirection === 'asc' ? $globals.icons.sortCalendarDescending : $globals.icons.sortCalendarAscending"
+                :title="preferences.orderDirection === 'asc' ? $t('general.sort-descending') : $t('general.sort-ascending')"
+                @click="reverseSort"
+              />
+              <v-divider />
+              <v-list-item
+                v-for="option, idx in eventTypeFilterState"
+                :key="idx"
+              >
+                <v-checkbox
+                  :model-value="option.checked"
+                  color="primary"
+                  readonly
+                  @click="toggleEventTypeOption(option.value)"
+                >
+                  <template #label>
+                    <v-icon start>
+                      {{ option.icon }}
+                    </v-icon>
+                    {{ option.label }}
+                  </template>
+                </v-checkbox>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </v-col>
+    </v-row>
+    <v-divider class="mx-2" />
+    <div
+      v-if="timelineEvents.length"
+      id="timeline-container"
+      height="fit-content"
+      width="100%"
+      class="px-1"
+      :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
+    >
+      <v-timeline
+        :density="$vuetify.display.smAndDown ? ($vuetify.display.xs ? 'compact' : 'comfortable') : undefined"
+        justify="center"
+        class="timeline"
+      >
+        <RecipeTimelineItem
+          v-for="(event, index) in timelineEvents"
+          :key="event.id"
+          :event="event"
+          :recipe="recipes.get(event.recipeId)"
+          :show-recipe-cards="showRecipeCards"
+          :width="$vuetify.display.smAndDown ? '100%' : undefined"
+          @update="updateTimelineEvent(index, $event)"
+          @delete="deleteTimelineEvent(index)"
+        />
+      </v-timeline>
+    </div>
+    <v-card
+      v-else-if="!loading"
+      class="mt-2"
+    >
+      <v-card-title class="justify-center pa-9">
+        {{ $t("recipe.timeline-no-events-found-try-adjusting-filters") }}
+      </v-card-title>
+    </v-card>
+    <div
+      v-if="loading"
+      class="mb-3 text-center"
+    >
+      <AppLoader
+        :loading="loading"
+        :waiting-text="$t('general.loading-events')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useThrottleFn, whenever } from "@vueuse/core";
+import RecipeTimelineItem from "./RecipeTimelineItem.vue";
+import { useTimelinePreferences } from "~/composables/use-users/preferences";
+import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
+import { useAsyncKey } from "~/composables/use-utils";
+import { alert } from "~/composables/use-toast";
+import { useUserApi } from "~/composables/api";
+import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
+
+interface Props {
+  modelValue?: boolean;
+  queryFilter: string;
+  maxHeight?: number | string;
+  showRecipeCards?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  maxHeight: undefined,
+  showRecipeCards: false,
+});
+
+const api = useUserApi();
+const i18n = useI18n();
+const preferences = useTimelinePreferences();
+const { eventTypeOptions } = useTimelineEventTypes();
+const loading = ref(true);
+const ready = ref(false);
+
+const page = ref(1);
+const perPage = 32;
+const hasMore = ref(true);
+
+const timelineEvents = ref([] as RecipeTimelineEventOut[]);
+const recipes = new Map<string, Recipe>();
+const filterBadgeCount = computed(() => eventTypeOptions.value.length - preferences.value.types.length);
+const eventTypeFilterState = computed(() => {
+  return eventTypeOptions.value.map((option) => {
+    return {
+      ...option,
+      checked: preferences.value.types.includes(option.value),
+    };
+  });
+});
+const screenBuffer = 4;
+
+whenever(
+  () => props.modelValue,
+  () => {
+    initializeTimelineEvents();
+  },
+);
+
+// Preferences
+function reverseSort() {
+  if (loading.value) {
+    return;
+  }
+
+  preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
+  initializeTimelineEvents();
+}
+
+function toggleEventTypeOption(option: TimelineEventType) {
+  if (loading.value) {
+    return;
+  }
+
+  const index = preferences.value.types.indexOf(option);
+  if (index === -1) {
+    preferences.value.types.push(option);
+  }
+  else {
+    preferences.value.types.splice(index, 1);
+  }
+
+  initializeTimelineEvents();
+}
+
+// Timeline Actions
+async function updateTimelineEvent(index: number, event: RecipeTimelineEventUpdate) {
+  const eventId = timelineEvents.value[index].id;
+  const { response } = await api.recipes.updateTimelineEvent(eventId, event);
+  if (response?.status !== 200) {
+    alert.error(i18n.t("events.something-went-wrong") as string);
+    return;
+  }
+
+  // Update the local event data to reflect the changes in the UI
+  timelineEvents.value[index] = response.data;
+
+  alert.success(i18n.t("events.event-updated") as string);
+}
+
+async function deleteTimelineEvent(index: number) {
+  const { response } = await api.recipes.deleteTimelineEvent(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 getRecipes(recipeIds: string[]): Promise<Recipe[]> {
+  const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+  const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
+  return data?.items || [];
+}
+
+async function updateRecipes(events: RecipeTimelineEventOut[]) {
+  const recipeIds: string[] = [];
+  events.forEach((event) => {
+    if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
+      return;
+    }
+
+    recipeIds.push(event.recipeId);
+  });
+
+  const results = await getRecipes(recipeIds);
+  results.forEach((result) => {
+    if (!result?.id) {
+      return;
+    }
+    recipes.set(result.id, result);
+  });
+}
+
+async function scrollTimelineEvents() {
+  const orderBy = "timestamp";
+  const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc";
+
+  const eventTypeValue = `["${preferences.value.types.join("\", \"")}"]`;
+  const queryFilter = `(${props.queryFilter}) AND eventType IN ${eventTypeValue}`;
+
+  const response = await api.recipes.getAllTimelineEvents(page.value, perPage, { orderBy, orderDirection, queryFilter });
+  page.value += 1;
+  if (!response?.data) {
+    return;
+  }
+
+  const events = response.data.items;
+  if (events.length < perPage) {
+    hasMore.value = false;
+    if (!events.length) {
+      return;
+    }
+  }
+
+  // fetch recipes
+  if (props.showRecipeCards) {
+    await updateRecipes(events);
+  }
+
+  // this is set last so Vue knows to re-render
+  timelineEvents.value.push(...events);
+}
+
+async function initializeTimelineEvents() {
+  loading.value = true;
+  ready.value = false;
+
+  page.value = 1;
+  hasMore.value = true;
+  timelineEvents.value = [];
+  await scrollTimelineEvents();
+
+  ready.value = true;
+  loading.value = false;
+}
+
+const infiniteScroll = useThrottleFn(() => {
+  useAsyncData(useAsyncKey(), async () => {
+    if (!hasMore.value || loading.value) {
+      return;
+    }
+
+    loading.value = true;
+    await scrollTimelineEvents();
+    loading.value = false;
+  });
+}, 500);
+
+// preload events
+initializeTimelineEvents();
+
+onMounted(
+  () => {
+    document.onscroll = () => {
+      // if the inner element is scrollable, let its scroll event handle the infiniteScroll
+      const timelineContainerElement = document.getElementById("timeline-container");
+      if (timelineContainerElement) {
+        const { clientHeight, scrollHeight } = timelineContainerElement;
+
+        // if scrollHeight == clientHeight, the element is not scrollable, so we need to look at the global position
+        // if scrollHeight > clientHeight, it is scrollable and we don't need to do anything here
+        if (scrollHeight > clientHeight) {
+          return;
+        }
+      }
+
+      const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight * screenBuffer);
+      if (bottomOfWindow) {
+        infiniteScroll();
+      }
+    };
+  },
+);
+</script>