239 lines
8.3 KiB
Vue
239 lines
8.3 KiB
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>
|
|
<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>
|