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="text-text mb-4 text-xl font-bold">{{ t("user.favoritesTitle") }}</h1>
    <p v-if="error" class="text-muted mb-4 text-sm">{{ error }}</p>
    <UiTabs v-model="activeTab" :tabs="tabs">
      <template #default>
        <div v-if="loading" class="text-muted py-5">{{ 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 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-3"
          >
            <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="border-border block border-b">
                <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="text-text hover:text-primary mb-2 block h-9 overflow-hidden text-[13px] leading-5 no-underline"
                  >{{ pick(item.product.name, locale) }}</NuxtLink
                >
                <PriceText
                  v-if="item.product.price_minor !== null && item.product.currency"
                  class="text-primary mb-2.5 block"
                  :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="border-border flex items-center gap-3.5 border p-3 max-sm:flex-col max-sm:items-start"
            >
              <img
                v-if="item.shop.logo"
                class="border-border h-14 w-14 rounded-sm border object-cover"
                :src="item.shop.logo"
                :alt="pick(item.shop.name, locale)"
              />
              <span
                v-else
                class="border-border bg-bg text-muted flex h-14 w-14 items-center justify-center rounded-sm border text-lg"
                >{{ pick(item.shop.name, locale).slice(0, 1) }}</span
              >
              <div class="flex min-w-0 flex-1 flex-col gap-1">
                <strong class="text-text text-sm">{{ pick(item.shop.name, locale) }}</strong>
                <span class="text-muted text-xs">{{ item.shop.company }}</span>
              </div>
              <div class="flex gap-2 max-sm:w-full">
                <NuxtLink
                  class="border-border bg-surface text-text inline-flex items-center rounded-md border px-2.5 py-1 text-[13px] font-medium 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>