261 lines
8.2 KiB
Vue
261 lines
8.2 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>
|
|
<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="accent-primary h-4 w-4" type="checkbox" />
|
|
{{ $t("admin.enabled") }}
|
|
</label>
|
|
<p v-if="formError" class="text-danger my-2 text-sm" 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-muted text-sm">{{ $t("common.loading") }}</p>
|
|
<p v-else-if="errorMessage" class="text-danger my-2 text-sm" 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>
|