vmall/apps/mall/pages/index.vue

<script setup lang="ts">
import type { Category, Product, Paged, Sku } from "@vmall/shared";
import { t as localized } from "@vmall/shared";

const { $api } = useNuxtApp();
const { locale } = useI18n();
const route = useRoute();
const router = useRouter();

const categories = ref<Category[]>([]);
const result = ref<Paged<Product> | null>(null);
const search = ref(typeof route.query.q === "string" ? route.query.q : "");
const categoryId = ref(typeof route.query.category_id === "string" ? route.query.category_id : "");
const page = ref(Number(route.query.page) > 0 ? Number(route.query.page) : 1);
const loading = ref(false);
const error = ref("");

function errorMessage(value: unknown): string {
  return value instanceof Error ? value.message : $t("mall.loadFailed");
}

function lowestSku(product: Product): Sku | null {
  const active = (product.skus ?? []).filter((sku) => sku.active && sku.stock > 0);
  return active.reduce<Sku | null>((lowest, sku) => {
    if (!lowest || sku.price_minor < lowest.price_minor) return sku;
    return lowest;
  }, null) ?? (product.skus ?? []).find((sku) => sku.active) ?? null;
}

async function loadCategories(): Promise<void> {
  try {
    categories.value = await $api.listCategories();
  } catch (value) {
    error.value = errorMessage(value);
  }
}

async function loadProducts(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    result.value = await $api.listProducts({
      page: page.value,
      per_page: 12,
      category_id: categoryId.value || undefined,
      q: search.value.trim() || undefined,
    });
  } catch (value) {
    error.value = errorMessage(value);
    result.value = null;
  } finally {
    loading.value = false;
  }
}

async function applyFilters(): Promise<void> {
  page.value = 1;
  await router.replace({ query: {
    ...(search.value.trim() ? { q: search.value.trim() } : {}),
    ...(categoryId.value ? { category_id: categoryId.value } : {}),
    page: "1",
  } });
  await loadProducts();
}

async function changePage(nextPage: number): Promise<void> {
  const pages = Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12)));
  if (nextPage < 1 || nextPage > pages) return;
  page.value = nextPage;
  await router.replace({ query: { ...route.query, page: String(nextPage) } });
  await loadProducts();
}

onMounted(async () => {
  await Promise.all([loadCategories(), loadProducts()]);
});

const totalPages = computed(() => Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12))));
</script>

<template>
  <section>
    <div class="page-head">
      <h1 class="page-title">{{ $t("mall.catalogTitle") }}</h1>
    </div>

    <form class="card filters" @submit.prevent="applyFilters">
      <div class="field search-field">
        <label for="product-search">{{ $t("common.search") }}</label>
        <input id="product-search" v-model="search" type="search" :placeholder="$t('mall.searchPlaceholder')">
      </div>
      <div class="field category-field">
        <label for="product-category">{{ $t("mall.filter") }}</label>
        <select id="product-category" v-model="categoryId">
          <option value="">{{ $t("mall.allCategories") }}</option>
          <option v-for="category in categories" :key="category.id" :value="category.id">
            {{ localized(category.name, locale) }}
          </option>
        </select>
      </div>
      <button class="btn primary filter-button" type="submit">{{ $t("common.search") }}</button>
    </form>
    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
    <p v-if="loading" class="muted" aria-live="polite">{{ $t("common.loading") }}</p>
    <div v-else-if="result && result.items.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
    <div v-else-if="result" class="grid products">
      <article v-for="product in result.items" :key="product.id" class="card product-card">
        <NuxtLink :to="`/products/${product.id}`">
          <img v-if="product.images[0]" :src="product.images[0]" :alt="localized(product.name, locale)">
          <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
        </NuxtLink>
        <div class="body">
          <div class="name">{{ localized(product.name, locale) }}</div>
          <div v-if="lowestSku(product)" class="price">
            <PriceText :amount-minor="lowestSku(product)!.price_minor" :currency="lowestSku(product)!.currency" />
          </div>
          <div v-else class="muted">{{ $t("mall.unavailable") }}</div>
          <NuxtLink class="btn sm mt" :to="`/products/${product.id}`">{{ $t("mall.viewDetails") }}</NuxtLink>
        </div>
      </article>
    </div>

    <div v-if="result && result.items.length > 0" class="row between pagination">
      <button class="btn" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
      <span class="muted">{{ $t("common.page") }} {{ page }} / {{ totalPages }}</span>
      <button class="btn" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
    </div>
  </section>
</template>

<style scoped>
.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 20px; }
.filters .field { margin: 0; }
.search-field { flex: 1; }
.category-field { min-width: 210px; }
.filter-button { white-space: nowrap; }
.image-placeholder { aspect-ratio: 1; display: grid; place-items: center; background: #eef1f5; color: var(--muted); }
.pagination { margin-top: 20px; }
.empty-state { text-align: center; }
@media (max-width: 640px) {
  .filters { align-items: stretch; flex-direction: column; }
  .category-field { min-width: 0; }
}
</style>