vmall/apps/admin/pages/shops.vue

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

definePageMeta({ middleware: "auth" });

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

const shops = ref<Shop[]>([]);
const loading = ref(true);
const errorMessage = ref("");
const createError = ref("");
const creating = ref(false);
const updatingId = ref<string | null>(null);
const nameEn = ref("");
const nameZh = ref("");
const slug = ref("");

function localizedName(name: LocalizedText): string {
  return name[locale.value] ?? name.en ?? Object.values(name)[0] ?? "";
}

function formatDate(value: string): string {
  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}

function statusClass(status: Shop["status"]): string {
  return status === "active" ? "green" : "red";
}

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

async function createShop(): Promise<void> {
  createError.value = "";
  if (!nameEn.value.trim() || !nameZh.value.trim() || !slug.value.trim()) {
    createError.value = t("common.required");
    return;
  }

  creating.value = true;
  try {
    await $api.admin.createShop(
      { en: nameEn.value.trim(), zh: nameZh.value.trim() },
      slug.value.trim(),
    );
    nameEn.value = "";
    nameZh.value = "";
    slug.value = "";
    await loadShops();
  } catch (error: unknown) {
    createError.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    creating.value = false;
  }
}

async function setStatus(shop: Shop): Promise<void> {
  updatingId.value = shop.id;
  errorMessage.value = "";
  const nextStatus = shop.status === "active" ? "suspended" : "active";
  try {
    await $api.admin.setShopStatus(shop.id, nextStatus);
    await loadShops();
  } catch (error: unknown) {
    errorMessage.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    updatingId.value = null;
  }
}

onMounted(() => {
  void loadShops();
});
</script>

<template>
  <div class="page">
    <div class="page-head">
      <h1 class="page-title">{{ $t("nav.shops") }}</h1>
    </div>
    <section class="card create-card">
      <h2>{{ $t("admin.createShop") }}</h2>
      <div class="form-grid">
        <div class="field">
          <label for="shop-name-en">{{ $t("admin.shopNameEn") }}</label>
          <input id="shop-name-en" v-model="nameEn" type="text" required />
        </div>
        <div class="field">
          <label for="shop-name-zh">{{ $t("admin.shopNameZh") }}</label>
          <input id="shop-name-zh" v-model="nameZh" type="text" required />
        </div>
        <div class="field">
          <label for="shop-slug">{{ $t("admin.shopSlug") }}</label>
          <input id="shop-slug" v-model="slug" type="text" required />
        </div>
      </div>
      <p v-if="createError" class="error-text" role="alert">{{ createError }}</p>
      <button class="btn primary" type="button" :disabled="creating" @click="createShop">
        {{ creating ? $t("common.loading") : $t("common.create") }}
      </button>
    </section>
    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
    <div v-else-if="shops.length === 0" class="card muted">{{ $t("common.empty") }}</div>
    <div v-else class="table-wrap card">
      <table class="table">
        <thead>
          <tr>
            <th>{{ $t("admin.shopNameEn") }}</th>
            <th>{{ $t("admin.shopSlug") }}</th>
            <th>{{ $t("admin.shopStatus") }}</th>
            <th>{{ $t("admin.created") }}</th>
            <th>{{ $t("common.actions") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="shop in shops" :key="shop.id">
            <td>{{ localizedName(shop.name) }}</td>
            <td><code>{{ shop.slug }}</code></td>
            <td><span class="badge" :class="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</span></td>
            <td>{{ formatDate(shop.created_at) }}</td>
            <td>
              <button class="btn sm" :class="{ danger: shop.status === 'active' }" type="button" :disabled="updatingId === shop.id" @click="setStatus(shop)">
                {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
              </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)); }
.table-wrap { overflow-x: auto; padding: 0; }
.table { min-width: 720px; }
code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
</style>