munch-ease-frontend/src/components/recipes/RecipeSearchBox.vue

<template>
  <div
    class="recipe-search-box"
    @focusout="onFocusOut"
  >
    <input
      v-model="searchTerm"
      type="text"
      :placeholder="placeholderText"
      @keyup.enter="search"
      @keyup.esc="clear"
      @focusin="search"
    >
    <ul
      v-if="dropdownVisible"
      class="dropdown"
    >
      <template v-if="recipes.length">
        <li
          v-for="recipe in recipes"
          :key="recipe.id"
          class="recipe"
          @mousedown="selectRecipe(recipe)"
        >
          <recipe-card :recipe="recipe" />
        </li>
        <li
          v-if="prevCursor || nextCursor"
          class="pager"
        >
          <button
            class="pager-btn"
            :disabled="!prevCursor"
            @mousedown.prevent="loadPrev"
          >
            Prev
          </button>
          <button
            class="pager-btn"
            :disabled="!nextCursor"
            @mousedown.prevent="loadNext"
          >
            Next
          </button>
        </li>
      </template>
      <li
        v-else
        class="empty"
      >
        No recipes found
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onBeforeUnmount, computed } from 'vue'
import { listRecipes } from '@/api/sdk'
import type { Recipe } from '@/domain/types'
import { useAlert } from '@/composables/useAlert'
import { usePagination } from '@/composables/usePagination'
import RecipeCard from './RecipeCard.vue'

const props = withDefaults(defineProps<{ placeholder?: string }>(), {
  placeholder: 'Add a recipe...',
})
const placeholderText: string = props.placeholder ?? 'Add a recipe...'

type RecipeItem = Pick<Recipe, 'id' | 'name' | 'imageUrls'>
const emit = defineEmits<{
  (e: 'select-recipe', recipe: RecipeItem): void
}>()

const searchTerm = ref('')
const pageSize = 10
const { items: recipes, next: nextCursor, prev: prevCursor, load, loadNext: loadNextPage, loadPrev: loadPrevPage, reset } = usePagination<RecipeItem>(
  async (params) => {
    const page = await listRecipes(params)
    return {
      items: (page.items ?? []).map(toRecipeItem),
      next: page.next ?? null,
      prev: page.prev ?? null,
      total: page.total ?? null,
    }
  },
  { pageSize }
)
const dropdownVisible = computed(() => recipes.value.length > 0 || (searchTerm.value.length > 0))

const { show: showAlert, scheduleAutoDismiss } = useAlert()

let debounceId: ReturnType<typeof setTimeout> | null = null

watch(
  searchTerm,
  (newVal) => {
    if (!newVal) {
      recipes.value = []
      if (debounceId) clearTimeout(debounceId)
      return
    }
    if (debounceId) clearTimeout(debounceId)
    debounceId = setTimeout(() => {
      if (newVal === searchTerm.value) {
        search()
      }
    }, 200)
  }
)

async function search() {
  try {
    await load({ q: searchTerm.value })
  } catch {
    // swallow errors and clear suggestions on failures, also notify user
    reset()
    showAlert({ type: 'error', heading: 'Recipe search failed', message: 'Please try again shortly.' })
    scheduleAutoDismiss()
  }
}

async function loadNext() {
  if (!nextCursor.value) return
  try {
    await loadNextPage()
  } catch {
    showAlert({ type: 'error', heading: 'Unable to load more', message: 'Could not fetch the next page.' })
    scheduleAutoDismiss()
  }
}

async function loadPrev() {
  if (!prevCursor.value) return
  try {
    await loadPrevPage()
  } catch {
    showAlert({ type: 'error', heading: 'Unable to load more', message: 'Could not fetch the previous page.' })
    scheduleAutoDismiss()
  }
}

function toRecipeItem(r: Recipe): RecipeItem {
  return { id: r.id, name: r.name, imageUrls: r.imageUrls ?? [] }
}

function selectRecipe(recipe: RecipeItem) {
  emit('select-recipe', recipe)
  searchTerm.value = ''
  recipes.value = []
}

function clear() {
  searchTerm.value = ''
  reset()
}

function onFocusOut() {
  // keep results while focused; on blur, clear all
  reset()
}

onBeforeUnmount(() => {
  if (debounceId) clearTimeout(debounceId)
})
</script>

<style scoped>
.recipe-search-box {
  position: relative;
}

.recipe-search-box input {
  width: calc(100% - 2em);
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.recipe-search-box .dropdown {
  position: absolute;
  top: 100%;
  width: 100%;
  margin: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: scroll;
}

.recipe-search-box .dropdown li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.recipe-search-box .dropdown li:last-child {
  border-bottom: none;
}

.recipe-search-box .dropdown li:hover {
  background-color: #eee;
}

.recipe-search-box .dropdown .pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.recipe-search-box .dropdown .pager-btn {
  width: 48%;
}

.recipe-search-box .dropdown .empty {
  padding: 8px;
  color: #666;
}
</style>