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>
  <div class="page">
    <h1 class="page-title">{{ $t("admin.pointsProductManagement") }}</h1>
    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
    <p v-if="notice" class="muted" role="status">{{ notice }}</p>

    <section class="card create-card">
      <h2>{{ editingId ? $t("admin.editPointsProduct") : $t("admin.newPointsProduct") }}</h2>
      <div class="form-grid">
        <div class="field">
          <label for="pp-name-en">{{ $t("admin.pointsNameEn") }}</label>
          <input id="pp-name-en" v-model="form.nameEn" type="text" />
        </div>
        <div class="field">
          <label for="pp-name-zh">{{ $t("admin.pointsNameZh") }}</label>
          <input id="pp-name-zh" v-model="form.nameZh" type="text" />
        </div>
        <div class="field">
          <label for="pp-image">{{ $t("admin.pointsImage") }}</label>
          <input id="pp-image" v-model="form.image" type="text" />
        </div>
        <div class="field">
          <label for="pp-price">{{ $t("admin.pointsPrice") }}</label>
          <input id="pp-price" v-model.number="form.pointsPrice" min="1" step="1" type="number" />
        </div>
        <div class="field">
          <label for="pp-stock">{{ $t("admin.pointsStock") }}</label>
          <input id="pp-stock" v-model.number="form.stock" min="0" step="1" type="number" />
        </div>
        <div class="field">
          <label for="pp-position">{{ $t("admin.pointsPosition") }}</label>
          <input id="pp-position" v-model.number="form.position" step="1" type="number" />
        </div>
      </div>
      <label class="checkbox-field">
        <input v-model="form.recommend" type="checkbox" />
        {{ $t("admin.pointsRecommend") }}
      </label>
      <label class="checkbox-field">
        <input v-model="form.published" type="checkbox" />
        {{ $t("admin.pointsPublished") }}
      </label>
      <div class="action-row">
        <button class="btn primary" type="button" :disabled="saving" @click="submit">
          {{ saving ? $t("common.loading") : $t("admin.savePointsProduct") }}
        </button>
        <button v-if="editingId" class="btn" type="button" @click="resetForm">
          {{ $t("common.cancel") }}
        </button>
      </div>
    </section>

    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
    <div v-else-if="products.length === 0" class="card muted">{{ $t("common.empty") }}</div>
    <div v-else class="table-wrap card">
      <table class="table">
        <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>
              <span class="badge" :class="product.published ? 'green' : 'orange'">
                {{ product.published ? $t("admin.publishedOn") : $t("admin.publishedOff") }}
              </span>
            </td>
            <td class="action-row">
              <button class="btn sm" type="button" @click="edit(product)">
                {{ $t("common.edit") }}
              </button>
              <button
                class="btn sm primary"
                type="button"
                :disabled="actionId === product.id"
                @click="togglePublished(product)"
              >
                {{ product.published ? $t("product.unpublish") : $t("product.publish") }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.create-card {
  margin-bottom: 20px;
}
.create-card h2 {
  font-size: 16px;
  margin: 0 0 16px;
}
.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.checkbox-field {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
}
.checkbox-field input {
  width: auto;
}
.action-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.table-wrap {
  overflow-x: auto;
  padding: 0;
}
.table {
  min-width: 900px;
}
@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>