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"]): "green" | "red" {
  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>
  <VPage :title="$t('nav.shops')">
    <VCard class="mb-5">
      <h2 class="mb-4 text-base font-semibold">{{ $t("admin.createShop") }}</h2>
      <div class="grid gap-3 md:grid-cols-3">
        <VField :label="$t('admin.shopNameEn')">
          <VInput id="shop-name-en" v-model="nameEn" required />
        </VField>
        <VField :label="$t('admin.shopNameZh')">
          <VInput id="shop-name-zh" v-model="nameZh" required />
        </VField>
        <VField :label="$t('admin.shopSlug')">
          <VInput id="shop-slug" v-model="slug" required />
        </VField>
      </div>
      <p v-if="createError" class="my-2 text-sm text-danger" role="alert">{{ createError }}</p>
      <VBtn variant="primary" :disabled="creating" @click="createShop">
        {{ creating ? $t("common.loading") : $t("common.create") }}
      </VBtn>
    </VCard>
    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
    <VCard v-else-if="shops.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
    <div v-else class="overflow-x-auto"><div class="min-w-[720px]"><VTable>
      <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 class="rounded bg-bg px-1.5 py-0.5">{{ shop.slug }}</code></td>
          <td><VBadge :tone="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</VBadge></td>
          <td>{{ formatDate(shop.created_at) }}</td>
          <td>
            <VBtn :variant="shop.status === 'active' ? 'danger' : 'default'" size="sm" :disabled="updatingId === shop.id" @click="setStatus(shop)">
              {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
            </VBtn>
          </td>
        </tr>
      </tbody>
    </VTable></div></div>
  </VPage>
</template>