feat: three nuxt frontends, demo seed, rounding + money-exponent + rate-cast fixes, archived specs
This commit is contained in:
Chengdong Zhang
@@ -0,0 +1,238 @@
|
||||
<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>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<h1 class="page-title">{{ $t("nav.currencies") }}</h1>
|
||||
</div>
|
||||
<section class="card create-card">
|
||||
<h2>{{ $t("admin.currencyFormTitle") }}</h2>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label for="currency-code">{{ $t("admin.currencyCode") }}</label>
|
||||
<input id="currency-code" v-model="form.code" maxlength="3" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-name-en">{{ $t("admin.currencyNameEn") }}</label>
|
||||
<input id="currency-name-en" v-model="form.nameEn" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-name-zh">{{ $t("admin.currencyNameZh") }}</label>
|
||||
<input id="currency-name-zh" v-model="form.nameZh" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-symbol">{{ $t("admin.symbol") }}</label>
|
||||
<input id="currency-symbol" v-model="form.symbol" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-exponent">{{ $t("admin.exponent") }}</label>
|
||||
<input id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-rate">{{ $t("admin.rate") }}</label>
|
||||
<input id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
|
||||
</div>
|
||||
</div>
|
||||
<label class="checkbox-field">
|
||||
<input v-model="form.enabled" type="checkbox" />
|
||||
{{ $t("admin.enabled") }}
|
||||
</label>
|
||||
<p v-if="formError" class="error-text" role="alert">{{ formError }}</p>
|
||||
<button class="btn primary" type="button" :disabled="creating" @click="createCurrency">
|
||||
{{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
|
||||
</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="currencies.length === 0" class="card muted">{{ $t("common.empty") }}</div>
|
||||
<div v-else class="table-wrap card">
|
||||
<table class="table">
|
||||
<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>
|
||||
<input v-model="rateDrafts[currency.code]" class="rate-input" type="number" min="0" step="any" />
|
||||
</td>
|
||||
<td><span v-if="currency.is_base" class="badge blue">{{ $t("admin.baseCurrency") }}</span><span v-else class="muted">—</span></td>
|
||||
<td><span class="badge" :class="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</span></td>
|
||||
<td class="action-row">
|
||||
<button class="btn sm primary" type="button" :disabled="savingCode === currency.code" @click="saveRate(currency)">
|
||||
{{ savingCode === currency.code ? $t("common.loading") : $t("admin.updateRate") }}
|
||||
</button>
|
||||
<button class="btn sm" type="button" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
|
||||
{{ currency.enabled ? $t("admin.suspend") : $t("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)); }
|
||||
.checkbox-field { align-items: center; display: flex; gap: 8px; margin: 2px 0 16px; }
|
||||
.checkbox-field input { width: auto; }
|
||||
.table-wrap { overflow-x: auto; padding: 0; }
|
||||
.table { min-width: 1080px; }
|
||||
.rate-input { min-width: 110px; }
|
||||
.action-row { display: flex; gap: 8px; }
|
||||
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
Reference in New Issue
Block a user