vmall/apps/mall/pages/user/favorites.vue

<script setup lang="ts">
import type { Favorite, Paged, ProductFavorite, ShopFavorite } from "@vmall/shared";
import { t as pick } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { locale, t } = useI18n();
const { $api } = useNuxtApp();

const activeTab = ref<"product" | "shop">("product");
const page = ref(1);
const perPage = 12;
const loading = ref(true);
const error = ref("");
const removingId = ref("");
const emptyPage: Paged<Favorite> = { items: [], total: 0, page: 1, per_page: perPage };
const result = ref<Paged<Favorite>>({ ...emptyPage });
let loadVersion = 0;

const tabs = computed(() => [
  { key: "product", label: t("user.favoriteProductsTab") },
  { key: "shop", label: t("user.favoriteStoresTab") },
]);

const productRows = computed(() =>
  result.value.items.filter((row): row is ProductFavorite => row.kind === "product"),
);
const storeRows = computed(() =>
  result.value.items.filter((row): row is ShopFavorite => row.kind === "shop"),
);

async function load(): Promise<Paged<Favorite> | null> {
  const version = ++loadVersion;
  const requestedKind = activeTab.value;
  const requestedPage = page.value;
  loading.value = true;
  error.value = "";
  try {
    const next = await $api.listFavorites({
      kind: requestedKind,
      page: requestedPage,
      per_page: perPage,
    });
    if (version !== loadVersion || activeTab.value !== requestedKind || page.value !== requestedPage) {
      return null;
    }
    result.value = next;
    return next;
  } catch {
    if (version === loadVersion && activeTab.value === requestedKind && page.value === requestedPage) {
      error.value = t("user.favoriteLoadFailed");
      result.value = { ...emptyPage };
    }
    return null;
  } finally {
    if (version === loadVersion) loading.value = false;
  }
}

watch(activeTab, () => {
  page.value = 1;
});

watch([activeTab, page], () => {
  void load();
}, { immediate: true });

async function removeProductFavorite(productId: string): Promise<void> {
  if (removingId.value) return;
  removingId.value = productId;
  try {
    await $api.removeProductFavorite(productId);
    const next = await load();
    if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
  } catch {
    error.value = t("user.favoriteRemoveFailed");
  } finally {
    removingId.value = "";
  }
}

async function removeStoreFavorite(storeId: string): Promise<void> {
  if (removingId.value) return;
  removingId.value = storeId;
  try {
    await $api.removeShopFavorite(storeId);
    const next = await load();
    if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
  } catch {
    error.value = t("user.favoriteRemoveFailed");
  } finally {
    removingId.value = "";
  }
}
</script>

<template>
  <VCard class="min-h-[560px]">
    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.favoritesTitle") }}</h1>
    <p v-if="error" class="mb-4 text-sm text-muted">{{ error }}</p>
    <UiTabs v-model="activeTab" :tabs="tabs">
      <template #default>
        <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
        <div v-else-if="activeTab === 'product'">
          <UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
          <div v-else class="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
            <VCard v-for="item in productRows" :key="item.id" :padded="false" class="overflow-hidden transition-shadow hover:shadow-md">
              <NuxtLink :to="`/goods/${item.product.slug}`" class="block border-b border-border">
                <img class="block h-[150px] w-full object-contain" :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
              </NuxtLink>
              <div class="p-2.5">
                <NuxtLink :to="`/goods/${item.product.slug}`" class="mb-2 block h-9 overflow-hidden text-[13px] leading-5 text-text no-underline hover:text-primary">{{ pick(item.product.name, locale) }}</NuxtLink>
                <PriceText v-if="item.product.price_minor !== null && item.product.currency" class="mb-2.5 block text-primary" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
                <VBtn size="sm" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</VBtn>
              </div>
            </VCard>
          </div>
        </div>

        <div v-else>
          <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
          <div v-else class="space-y-2.5">
            <article v-for="item in storeRows" :key="item.id" class="flex items-center gap-3.5 border border-border p-3 max-sm:flex-col max-sm:items-start">
              <img v-if="item.shop.logo" class="h-14 w-14 rounded-sm border border-border object-cover" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
              <span v-else class="flex h-14 w-14 items-center justify-center rounded-sm border border-border bg-bg text-lg text-muted">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
              <div class="flex min-w-0 flex-1 flex-col gap-1">
                <strong class="text-sm text-text">{{ pick(item.shop.name, locale) }}</strong>
                <span class="text-xs text-muted">{{ item.shop.company }}</span>
              </div>
              <div class="flex gap-2 max-sm:w-full">
                <NuxtLink class="inline-flex items-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text no-underline" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
                <VBtn size="sm" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</VBtn>
              </div>
            </article>
          </div>
        </div>
        <UiPagination
          v-if="!loading && result.total > result.per_page"
          :page="result.page"
          :total="result.total"
          :per-page="result.per_page"
          @change="page = $event"
        />
      </template>
    </UiTabs>
  </VCard>
</template>