111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { t as localized } from "@vmall/shared";
|
|
import type { Category, Product, ProductUpsertBody } from "@vmall/shared";
|
|
|
|
const props = defineProps<{
|
|
product?: Product;
|
|
categories: Category[];
|
|
busy?: boolean;
|
|
}>();
|
|
const emit = defineEmits<{ submit: [body: ProductUpsertBody] }>();
|
|
const { t: translate, locale } = useI18n();
|
|
|
|
const slug = ref("");
|
|
const nameEn = ref("");
|
|
const nameZh = ref("");
|
|
const descriptionEn = ref("");
|
|
const descriptionZh = ref("");
|
|
const categoryId = ref("");
|
|
const images = ref("");
|
|
const validationError = ref("");
|
|
|
|
function resetFromProduct(product: Product | undefined): void {
|
|
slug.value = product?.slug ?? "";
|
|
nameEn.value = product?.name.en ?? "";
|
|
nameZh.value = product?.name.zh ?? "";
|
|
descriptionEn.value = product?.description.en ?? "";
|
|
descriptionZh.value = product?.description.zh ?? "";
|
|
categoryId.value = product?.category_id ?? "";
|
|
images.value = product?.images.join("\n") ?? "";
|
|
validationError.value = "";
|
|
}
|
|
|
|
watch(() => props.product, resetFromProduct, { immediate: true });
|
|
|
|
function submit(): void {
|
|
const cleanSlug = slug.value.trim();
|
|
if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(cleanSlug)) {
|
|
validationError.value = translate("shop.slugInvalid");
|
|
return;
|
|
}
|
|
if (!nameEn.value.trim()) {
|
|
validationError.value = translate("shop.productNameRequired");
|
|
return;
|
|
}
|
|
validationError.value = "";
|
|
const body: ProductUpsertBody = {
|
|
category_id: categoryId.value || null,
|
|
slug: cleanSlug,
|
|
name: { en: nameEn.value.trim(), zh: nameZh.value.trim() },
|
|
description: { en: descriptionEn.value.trim(), zh: descriptionZh.value.trim() },
|
|
images: images.value
|
|
.split("\n")
|
|
.map((image) => image.trim())
|
|
.filter((image) => image.length > 0),
|
|
};
|
|
emit("submit", body);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form class="card form-narrow product-form" @submit.prevent="submit">
|
|
<div v-if="validationError" class="error-text" role="alert">{{ validationError }}</div>
|
|
<div class="field">
|
|
<label for="product-slug">{{ $t("product.slug") }}</label>
|
|
<input id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-name-en">{{ $t("product.nameEn") }}</label>
|
|
<input id="product-name-en" v-model="nameEn" required />
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-name-zh">{{ $t("product.nameZh") }}</label>
|
|
<input id="product-name-zh" v-model="nameZh" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-description-en">{{ $t("product.descEn") }}</label>
|
|
<textarea id="product-description-en" v-model="descriptionEn" rows="4" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-description-zh">{{ $t("product.descZh") }}</label>
|
|
<textarea id="product-description-zh" v-model="descriptionZh" rows="4" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-category">{{ $t("product.category") }}</label>
|
|
<select id="product-category" v-model="categoryId">
|
|
<option value="">{{ $t("shop.categoryOptional") }}</option>
|
|
<option v-for="category in categories" :key="category.id" :value="category.id">
|
|
{{ localized(category.name, locale) }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="product-images">{{ $t("product.images") }}</label>
|
|
<textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" />
|
|
</div>
|
|
<button class="btn primary" type="submit" :disabled="busy">
|
|
{{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.product-form {
|
|
max-width: 720px;
|
|
margin: 0;
|
|
}
|
|
.product-form textarea {
|
|
resize: vertical;
|
|
}
|
|
</style>
|