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

<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>