vmall/apps/admin/pages/points-products.vue

<script setup lang="ts">
import type { IntegralProduct, IntegralProductInput } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

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

const products = ref<IntegralProduct[]>([]);
const loading = ref(true);
const saving = ref(false);
const actionId = ref("");
const error = ref("");
const notice = ref("");
const editingId = ref("");

const form = reactive({
  nameEn: "",
  nameZh: "",
  image: "",
  pointsPrice: 0,
  stock: 0,
  position: 0,
  recommend: false,
  published: false,
});

function localizedName(name: Record<string, string>): string {
  return name[locale.value] ?? name.en ?? "";
}

function resetForm(): void {
  editingId.value = "";
  form.nameEn = "";
  form.nameZh = "";
  form.image = "";
  form.pointsPrice = 0;
  form.stock = 0;
  form.position = 0;
  form.recommend = false;
  form.published = false;
}

async function load(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    products.value = await $api.admin.listPointsProducts();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : t("common.error");
  } finally {
    loading.value = false;
  }
}

function payload(): IntegralProductInput {
  return {
    name: { en: form.nameEn.trim(), zh: form.nameZh.trim() },
    image: form.image.trim() || null,
    points_price: Number(form.pointsPrice),
    stock: Number(form.stock),
    position: Number(form.position),
    recommend: form.recommend,
    published: form.published,
  };
}

async function submit(): Promise<void> {
  error.value = "";
  notice.value = "";
  const body = payload();
  if (!body.name.en || !body.name.zh) {
    error.value = t("admin.pointsNameRequired");
    return;
  }
  if (!(body.points_price > 0)) {
    error.value = t("admin.pointsPriceInvalid");
    return;
  }
  if (body.stock < 0) {
    error.value = t("admin.pointsStockInvalid");
    return;
  }
  saving.value = true;
  try {
    if (editingId.value) {
      await $api.admin.updatePointsProduct(editingId.value, body);
    } else {
      await $api.admin.createPointsProduct(body);
    }
    notice.value = t("admin.pointsProductSaved");
    resetForm();
    await load();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : t("common.error");
  } finally {
    saving.value = false;
  }
}

function edit(product: IntegralProduct): void {
  editingId.value = product.id;
  form.nameEn = product.name.en ?? "";
  form.nameZh = product.name.zh ?? "";
  form.image = product.image ?? "";
  form.pointsPrice = product.points_price;
  form.stock = product.stock;
  form.position = product.position;
  form.recommend = product.recommend;
  form.published = product.published;
}

async function togglePublished(product: IntegralProduct): Promise<void> {
  actionId.value = product.id;
  error.value = "";
  try {
    await $api.admin.setPointsProductPublished(product.id, !product.published);
    await load();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : t("common.error");
  } finally {
    actionId.value = "";
  }
}

onMounted(() => void load());
</script>

<template>
  <VPage :title="$t('admin.pointsProductManagement')">
    <p v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</p>
    <p v-if="notice" class="text-sm text-muted" role="status">{{ notice }}</p>

    <VCard class="mb-5">
      <h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("admin.editPointsProduct") : $t("admin.newPointsProduct") }}</h2>
      <div class="grid gap-3 md:grid-cols-3">
        <VField :label="$t('admin.pointsNameEn')"><VInput id="pp-name-en" v-model="form.nameEn" /></VField>
        <VField :label="$t('admin.pointsNameZh')"><VInput id="pp-name-zh" v-model="form.nameZh" /></VField>
        <VField :label="$t('admin.pointsImage')"><VInput id="pp-image" v-model="form.image" /></VField>
        <VField :label="$t('admin.pointsPrice')"><VInput id="pp-price" v-model.number="form.pointsPrice" min="1" step="1" type="number" /></VField>
        <VField :label="$t('admin.pointsStock')"><VInput id="pp-stock" v-model.number="form.stock" min="0" step="1" type="number" /></VField>
        <VField :label="$t('admin.pointsPosition')"><VInput id="pp-position" v-model.number="form.position" step="1" type="number" /></VField>
      </div>
      <label class="my-2 flex items-center gap-2 text-sm">
        <input v-model="form.recommend" class="h-4 w-4 accent-primary" type="checkbox" />
        {{ $t("admin.pointsRecommend") }}
      </label>
      <label class="mb-4 flex items-center gap-2 text-sm">
        <input v-model="form.published" class="h-4 w-4 accent-primary" type="checkbox" />
        {{ $t("admin.pointsPublished") }}
      </label>
      <div class="flex gap-2">
        <VBtn variant="primary" :disabled="saving" @click="submit">
          {{ saving ? $t("common.loading") : $t("admin.savePointsProduct") }}
        </VBtn>
        <VBtn v-if="editingId" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
      </div>
    </VCard>

    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
    <VCard v-else-if="products.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
    <div v-else class="overflow-x-auto"><div class="min-w-[900px]"><VTable>
      <thead>
        <tr>
          <th>{{ $t("admin.pointsNameEn") }}</th>
          <th>{{ $t("admin.pointsPrice") }}</th>
          <th>{{ $t("admin.pointsStock") }}</th>
          <th>{{ $t("admin.pointsPosition") }}</th>
          <th>{{ $t("admin.pointsRecommend") }}</th>
          <th>{{ $t("common.status") }}</th>
          <th>{{ $t("common.actions") }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ localizedName(product.name) }}</td>
          <td>{{ product.points_price }}</td>
          <td>{{ product.stock }}</td>
          <td>{{ product.position }}</td>
          <td>{{ product.recommend ? $t("common.yes") : $t("common.no") }}</td>
          <td><VBadge :tone="product.published ? 'green' : 'orange'">
            {{ product.published ? $t("admin.publishedOn") : $t("admin.publishedOff") }}
          </VBadge></td>
          <td><div class="flex gap-2">
            <VBtn size="sm" @click="edit(product)">{{ $t("common.edit") }}</VBtn>
            <VBtn size="sm" variant="primary" :disabled="actionId === product.id" @click="togglePublished(product)">
              {{ product.published ? $t("product.unpublish") : $t("product.publish") }}
            </VBtn>
          </div></td>
        </tr>
      </tbody>
    </VTable></div></div>
  </VPage>
</template>