vmall/apps/admin/pages/currencies.vue

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

definePageMeta({ middleware: "auth" });

interface NewCurrencyForm {
  code: string;
  nameEn: string;
  nameZh: string;
  symbol: string;
  exponent: number;
  rateToBase: string;
  enabled: boolean;
}

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

const currencies = ref<Currency[]>([]);
const rateDrafts = reactive<Record<string, string>>({});
const loading = ref(true);
const errorMessage = ref("");
const formError = ref("");
const savingCode = ref<string | null>(null);
const creating = ref(false);
const form = reactive<NewCurrencyForm>({
  code: "",
  nameEn: "",
  nameZh: "",
  symbol: "",
  exponent: 2,
  rateToBase: "1",
  enabled: true,
});

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

async function loadCurrencies(): Promise<void> {
  loading.value = true;
  errorMessage.value = "";
  try {
    currencies.value = await $api.admin.listCurrencies();
    for (const currency of currencies.value) {
      rateDrafts[currency.code] = currency.rate_to_base;
    }
  } catch (error: unknown) {
    errorMessage.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    loading.value = false;
  }
}

async function saveRate(currency: Currency): Promise<void> {
  // v-model on type=number inputs yields a number; the API contract wants a string.
  const rate = String(rateDrafts[currency.code] ?? currency.rate_to_base);
  savingCode.value = currency.code;
  errorMessage.value = "";
  try {
    await $api.admin.setRate(currency.code, rate);
    await loadCurrencies();
  } catch (error: unknown) {
    errorMessage.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    savingCode.value = null;
  }
}

async function toggleEnabled(currency: Currency): Promise<void> {
  savingCode.value = currency.code;
  errorMessage.value = "";
  try {
    await upsert({
      code: currency.code,
      name: currency.name,
      symbol: currency.symbol,
      exponent: currency.exponent,
      rate_to_base: currency.rate_to_base,
      enabled: !currency.enabled,
    });
    await loadCurrencies();
  } catch (error: unknown) {
    errorMessage.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    savingCode.value = null;
  }
}

async function upsert(body: CurrencyUpsertBody): Promise<void> {
  await $api.admin.upsertCurrency(body);
}

async function createCurrency(): Promise<void> {
  // type=number v-model yields a number at runtime; normalize before use.
  const rateInput = String(form.rateToBase).trim();
  formError.value = "";
  const code = form.code.trim().toUpperCase();
  if (!/^[A-Z]{3}$/.test(code)) {
    formError.value = t("admin.codeInvalid");
    return;
  }
  if (!form.nameEn.trim() || !form.nameZh.trim() || !form.symbol.trim() || !rateInput) {
    formError.value = t("common.required");
    return;
  }
  if (!Number.isInteger(form.exponent) || form.exponent < 0 || form.exponent > 6) {
    formError.value = t("common.error");
    return;
  }

  creating.value = true;
  try {
    await upsert({
      code,
      name: { en: form.nameEn.trim(), zh: form.nameZh.trim() },
      symbol: form.symbol.trim(),
      exponent: form.exponent,
      rate_to_base: rateInput,
      enabled: form.enabled,
    });
    form.code = "";
    form.nameEn = "";
    form.nameZh = "";
    form.symbol = "";
    form.exponent = 2;
    form.rateToBase = "1";
    form.enabled = true;
    await loadCurrencies();
  } catch (error: unknown) {
    formError.value = error instanceof Error ? error.message : t("common.error");
  } finally {
    creating.value = false;
  }
}

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

<template>
  <VPage :title="$t('nav.currencies')">
    <VCard class="mb-5">
      <h2 class="mb-4 text-base font-semibold">{{ $t("admin.currencyFormTitle") }}</h2>
      <div class="grid gap-3 md:grid-cols-3">
        <VField :label="$t('admin.currencyCode')">
          <VInput id="currency-code" v-model="form.code" maxlength="3" required />
        </VField>
        <VField :label="$t('admin.currencyNameEn')">
          <VInput id="currency-name-en" v-model="form.nameEn" required />
        </VField>
        <VField :label="$t('admin.currencyNameZh')">
          <VInput id="currency-name-zh" v-model="form.nameZh" required />
        </VField>
        <VField :label="$t('admin.symbol')">
          <VInput id="currency-symbol" v-model="form.symbol" required />
        </VField>
        <VField :label="$t('admin.exponent')">
          <VInput id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
        </VField>
        <VField :label="$t('admin.rate')">
          <VInput id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
        </VField>
      </div>
      <label class="my-0 mb-4 flex items-center gap-2 text-sm">
        <input v-model="form.enabled" class="h-4 w-4 accent-primary" type="checkbox" />
        {{ $t("admin.enabled") }}
      </label>
      <p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
      <VBtn variant="primary" :disabled="creating" @click="createCurrency">
        {{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
      </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="currencies.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
    <div v-else class="overflow-x-auto">
      <div class="min-w-[1080px]"><VTable>
        <thead>
          <tr>
            <th>{{ $t("common.currency") }}</th>
            <th>{{ $t("admin.currencyNameEn") }}</th>
            <th>{{ $t("admin.symbol") }}</th>
            <th>{{ $t("admin.exponent") }}</th>
            <th>{{ $t("admin.rate") }}</th>
            <th>{{ $t("admin.baseCurrency") }}</th>
            <th>{{ $t("admin.enabled") }}</th>
            <th>{{ $t("common.actions") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="currency in currencies" :key="currency.code">
            <td><strong>{{ currency.code }}</strong></td>
            <td>{{ localizedName(currency.name) }}</td>
            <td>{{ currency.symbol }}</td>
            <td>{{ currency.exponent }}</td>
            <td><VInput v-model="rateDrafts[currency.code]" class="min-w-[110px]" type="number" min="0" step="any" /></td>
            <td>
              <VBadge v-if="currency.is_base" tone="blue">{{ $t("admin.baseCurrency") }}</VBadge>
              <span v-else class="text-muted">—</span>
            </td>
            <td><VBadge :tone="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</VBadge></td>
            <td><div class="flex gap-2">
              <VBtn size="sm" variant="primary" :disabled="savingCode === currency.code" @click="saveRate(currency)">
                {{ savingCode === currency.code ? $t("common.loading") : $t("admin.updateRate") }}
              </VBtn>
              <VBtn size="sm" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
                {{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
              </VBtn>
            </div></td>
          </tr>
        </tbody>
      </VTable></div>
    </div>
  </VPage>
</template>