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

<template>
  <div>
    <v-app-bar
      v-if="!disableToolbar"
      color="transparent"
      :absolute="false"
      flat
      class="mt-n1 flex-sm-wrap rounded position-relative w-100 left-0 top-0"
    >
      <slot name="title">
        <v-icon
          v-if="title"
          size="large"
          start
        >
          {{ displayTitleIcon }}
        </v-icon>
        <v-toolbar-title class="headline">
          {{ title }}
        </v-toolbar-title>
      </slot>
      <v-spacer />
      <v-btn
        :icon="$vuetify.display.xs"
        variant="text"
        :disabled="recipes.length === 0"
        @click="navigateRandom"
      >
        <v-icon :start="!$vuetify.display.xs">
          {{ $globals.icons.diceMultiple }}
        </v-icon>
        {{ $vuetify.display.xs ? null : $t("general.random") }}
      </v-btn>
      <v-menu
        v-if="!disableSort"
        offset-y
        start
      >
        <template #activator="{ props }">
          <v-btn
            variant="text"
            :icon="$vuetify.display.xs"
            v-bind="props"
            :loading="sortLoading"
          >
            <v-icon :start="!$vuetify.display.xs">
              {{ preferences.sortIcon }}
            </v-icon>
            {{ $vuetify.display.xs ? null : $t("general.sort") }}
          </v-btn>
        </template>
        <v-list>
          <v-list-item @click="sortRecipes(EVENTS.az)">
            <div class="d-flex align-center flex-nowrap">
              <v-icon class="mr-2" inline>
                {{ $globals.icons.orderAlphabeticalAscending }}
              </v-icon>
              <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
            </div>
          </v-list-item>
          <v-list-item @click="sortRecipes(EVENTS.rating)">
            <div class="d-flex align-center flex-nowrap">
              <v-icon class="mr-2" inline>
                {{ $globals.icons.star }}
              </v-icon>
              <v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
            </div>
          </v-list-item>
          <v-list-item @click="sortRecipes(EVENTS.created)">
            <div class="d-flex align-center flex-nowrap">
              <v-icon class="mr-2" inline>
                {{ $globals.icons.newBox }}
              </v-icon>
              <v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
            </div>
          </v-list-item>
          <v-list-item @click="sortRecipes(EVENTS.updated)">
            <div class="d-flex align-center flex-nowrap">
              <v-icon class="mr-2" inline>
                {{ $globals.icons.update }}
              </v-icon>
              <v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
            </div>
          </v-list-item>
          <v-list-item @click="sortRecipes(EVENTS.lastMade)">
            <div class="d-flex align-center flex-nowrap">
              <v-icon class="mr-2" inline>
                {{ $globals.icons.chefHat }}
              </v-icon>
              <v-list-item-title>{{ $t("general.last-made") }}</v-list-item-title>
            </div>
          </v-list-item>
        </v-list>
      </v-menu>
      <ContextMenu
        v-if="!$vuetify.display.smAndDown"
        :items="[
          {
            title: $t('general.toggle-view'),
            icon: $globals.icons.eye,
            event: 'toggle-dense-view',
          },
        ]"
        @toggle-dense-view="toggleMobileCards()"
      />
    </v-app-bar>
    <div v-if="recipes && ready">
      <div class="mt-2">
        <v-row v-if="!useMobileCards">
          <v-col
            v-for="recipe in recipes"
            :key="recipe.id!"
            :sm="6"
            :md="6"
            :lg="4"
            :xl="3"
          >
            <RecipeCard
              :name="recipe.name!"
              :description="recipe.description!"
              :slug="recipe.slug!"
              :rating="recipe.rating!"
              :image="recipe.image!"
              :tags="recipe.tags!"
              :recipe-id="recipe.id!"
              @click="handleRecipeNavigation"
            />
          </v-col>
        </v-row>
        <v-row
          v-else
          dense
        >
          <v-col
            v-for="recipe in recipes"
            :key="recipe.id!"
            cols="12"
            :sm="singleColumn ? '12' : '12'"
            :md="singleColumn ? '12' : '6'"
            :lg="singleColumn ? '12' : '4'"
            :xl="singleColumn ? '12' : '3'"
          >
            <RecipeCardMobile
              :name="recipe.name!"
              :description="recipe.description!"
              :slug="recipe.slug!"
              :rating="recipe.rating!"
              :image="recipe.image!"
              :tags="recipe.tags!"
              :recipe-id="recipe.id!"
              @selected="handleRecipeNavigation"
            />
          </v-col>
        </v-row>
      </div>
      <v-card v-intersect="infiniteScroll" />
      <v-fade-transition>
        <AppLoader
          v-if="loading"
          :loading="loading"
        />
      </v-fade-transition>
    </div>
  </div>
</template>

<script lang="ts">
import { useThrottleFn } from "@vueuse/core";
import RecipeCard from "./RecipeCard.vue";
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state";
import { useLazyRecipes } from "~/composables/recipes";
import type { Recipe } from "~/lib/api/types/recipe";
import { useUserSortPreferences } from "~/composables/use-users/preferences";
import type { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
import { useRecipeListState } from "~/composables/recipe-page/use-recipe-list-state";

const REPLACE_RECIPES_EVENT = "replaceRecipes";
const APPEND_RECIPES_EVENT = "appendRecipes";

export default defineNuxtComponent({
  components: {
    RecipeCard,
    RecipeCardMobile,
  },
  props: {
    disableToolbar: {
      type: Boolean,
      default: false,
    },
    disableSort: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    singleColumn: {
      type: Boolean,
      default: false,
    },
    recipes: {
      type: Array as () => Recipe[],
      default: () => [],
    },
    query: {
      type: Object as () => RecipeSearchQuery,
      default: null,
    },
  },
  setup(props, context) {
    const { $vuetify } = useNuxtApp();
    const preferences = useUserSortPreferences();

    const EVENTS = {
      az: "az",
      rating: "rating",
      created: "created",
      updated: "updated",
      lastMade: "lastMade",
      shuffle: "shuffle",
    };

    const $auth = useMealieAuth();
    const { $globals } = useNuxtApp();
    const { isOwnGroup } = useLoggedInState();
    const useMobileCards = computed(() => {
      return $vuetify.display.smAndDown.value || preferences.value.useMobileCards;
    });

    const displayTitleIcon = computed(() => {
      return props.icon || $globals.icons.tags;
    });

    const state = reactive({
      sortLoading: false,
    });

    const route = useRoute();
    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");

    const recipeListState = useRecipeListState(props.query);

    const page = ref(recipeListState.state.page || 1);
    const perPage = 32;
    const hasMore = ref(recipeListState.state.hasMore);
    const ready = ref(false);
    const loading = ref(false);

    const { fetchMore, getRandom } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
    const router = useRouter();

    const queryFilter = computed(() => {
      return props.query.queryFilter || null;

      // TODO: allow user to filter out null values when ordering by a value that may be null (such as lastMade)

      // const orderBy = props.query?.orderBy || preferences.value.orderBy;
      // const orderByFilter = preferences.value.filterNull && orderBy ? `${orderBy} IS NOT NULL` : null;

      // if (props.query.queryFilter && orderByFilter) {
      //   return `(${props.query.queryFilter}) AND ${orderByFilter}`;
      // } else if (props.query.queryFilter) {
      //   return props.query.queryFilter;
      // } else {
      //   return orderByFilter;
      // }
    });

    async function fetchRecipes(pageCount = 1) {
      const orderDir = props.query?.orderDirection || preferences.value.orderDirection;
      const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last";
      return await fetchMore(
        page.value,
        perPage * pageCount,
        props.query?.orderBy || preferences.value.orderBy,
        orderDir,
        orderByNullPosition,
        props.query,
        // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by
        queryFilter.value,
      );
    }

    // Save scroll position
    const throttledScrollSave = useThrottleFn(() => {
      recipeListState.saveScrollPosition();
    }, 1000);

    onMounted(async () => {
      window.addEventListener("scroll", throttledScrollSave);

      // cached state with scroll position
      if (recipeListState.hasValidState() && recipeListState.isQueryMatch(props.query)) {
        // Restore from cached state
        page.value = recipeListState.state.page;
        hasMore.value = recipeListState.state.hasMore;
        ready.value = recipeListState.state.ready;

        // Emit cached recipes
        context.emit(REPLACE_RECIPES_EVENT, recipeListState.state.recipes);

        // Restore scroll position after recipes are rendered
        nextTick(() => {
          recipeListState.restoreScrollPosition();
        });
      }
      else {
        // Initialize fresh recipes
        await initRecipes();
      }
      ready.value = true;
    });

    let lastQuery: string | undefined = JSON.stringify(props.query);
    watch(
      () => props.query,
      async (newValue: RecipeSearchQuery | undefined) => {
        const newValueString = JSON.stringify(newValue);
        if (lastQuery !== newValueString) {
          lastQuery = newValueString;

          // Save scroll position before query change
          recipeListState.saveScrollPosition();

          ready.value = false;
          await initRecipes();
          ready.value = true;
        }
      },
    );

    async function initRecipes() {
      page.value = 1;
      hasMore.value = true;

      // we double-up the first call to avoid a bug with large screens that render
      // the entire first page without scrolling, preventing additional loading
      const newRecipes = await fetchRecipes(page.value + 1);
      if (newRecipes.length < perPage) {
        hasMore.value = false;
      }

      // since we doubled the first call, we also need to advance the page
      page.value = page.value + 1;

      // Save state after fetching recipes
      recipeListState.saveState({
        recipes: newRecipes,
        page: page.value,
        hasMore: hasMore.value,
        ready: true,
      });

      context.emit(REPLACE_RECIPES_EVENT, newRecipes);
    }

    const infiniteScroll = useThrottleFn(async () => {
      if (!hasMore.value || loading.value) {
        return;
      }

      loading.value = true;
      page.value = page.value + 1;

      const newRecipes = await fetchRecipes();
      if (newRecipes.length < perPage) {
        hasMore.value = false;
      }
      if (newRecipes.length) {
        // Update cached state with new recipes
        const allRecipes = [...(recipeListState.state.recipes || []), ...newRecipes] as Recipe[];
        recipeListState.saveState({
          recipes: allRecipes,
          page: page.value,
          hasMore: hasMore.value,
        });

        context.emit(APPEND_RECIPES_EVENT, newRecipes);
      }

      loading.value = false;
    }, 500);

    async function sortRecipes(sortType: string) {
      if (state.sortLoading || loading.value) {
        return;
      }

      function setter(
        orderBy: string,
        ascIcon: string,
        descIcon: string,
        defaultOrderDirection = "asc",
        filterNull = false,
      ) {
        if (preferences.value.orderBy !== orderBy) {
          preferences.value.orderBy = orderBy;
          preferences.value.orderDirection = defaultOrderDirection;
          preferences.value.filterNull = filterNull;
        }
        else {
          preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
        }
        preferences.value.sortIcon = preferences.value.orderDirection === "asc" ? ascIcon : descIcon;
      }

      switch (sortType) {
        case EVENTS.az:
          setter(
            "name",
            $globals.icons.sortAlphabeticalAscending,
            $globals.icons.sortAlphabeticalDescending,
            "asc",
            false,
          );
          break;
        case EVENTS.rating:
          setter("rating", $globals.icons.sortAscending, $globals.icons.sortDescending, "desc", true);
          break;
        case EVENTS.created:
          setter(
            "created_at",
            $globals.icons.sortCalendarAscending,
            $globals.icons.sortCalendarDescending,
            "desc",
            false,
          );
          break;
        case EVENTS.updated:
          setter("updated_at", $globals.icons.sortClockAscending, $globals.icons.sortClockDescending, "desc", false);
          break;
        case EVENTS.lastMade:
          setter(
            "last_made",
            $globals.icons.sortCalendarAscending,
            $globals.icons.sortCalendarDescending,
            "desc",
            true,
          );
          break;
        default:
          console.log("Unknown Event", sortType);
          return;
      }

      // reset pagination
      page.value = 1;
      hasMore.value = true;

      state.sortLoading = true;
      loading.value = true;

      // fetch new recipes
      const newRecipes = await fetchRecipes();

      // Update cached state
      recipeListState.saveState({
        recipes: newRecipes,
        page: page.value,
        hasMore: hasMore.value,
        ready: true,
      });

      context.emit(REPLACE_RECIPES_EVENT, newRecipes);

      state.sortLoading = false;
      loading.value = false;
    }

    async function navigateRandom() {
      const recipe = await getRandom(props.query, queryFilter.value);
      if (!recipe?.slug) {
        return;
      }

      router.push(`/g/${groupSlug.value}/r/${recipe.slug}`);
    }

    function toggleMobileCards() {
      preferences.value.useMobileCards = !preferences.value.useMobileCards;
    }

    // Save scroll position when component is unmounted or when navigating away
    onBeforeUnmount(() => {
      recipeListState.saveScrollPosition();
      window.removeEventListener("scroll", throttledScrollSave);
    });

    // Save scroll position when navigating to recipe pages
    function handleRecipeNavigation() {
      recipeListState.saveScrollPosition();
    }

    return {
      ...toRefs(state),
      displayTitleIcon,
      EVENTS,
      infiniteScroll,
      ready,
      loading,
      navigateRandom,
      preferences,
      sortRecipes,
      toggleMobileCards,
      useMobileCards,
      handleRecipeNavigation,
    };
  },
});
</script>

<style>
.transparent {
  opacity: 1;
}
</style>