120 lines
4.2 KiB
Vue
120 lines
4.2 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>
|
|
<VCard class="mx-auto my-10 w-full max-w-[720px]">
|
|
<form @submit.prevent="submit">
|
|
<div v-if="validationError" class="text-danger my-2 text-sm" role="alert">
|
|
{{ validationError }}
|
|
</div>
|
|
<VField :label="$t('product.slug')">
|
|
<VInput id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
|
|
</VField>
|
|
<VField :label="$t('product.nameEn')">
|
|
<VInput id="product-name-en" v-model="nameEn" required />
|
|
</VField>
|
|
<VField :label="$t('product.nameZh')">
|
|
<VInput id="product-name-zh" v-model="nameZh" />
|
|
</VField>
|
|
<VField :label="$t('product.descEn')">
|
|
<textarea
|
|
id="product-description-en"
|
|
v-model="descriptionEn"
|
|
rows="4"
|
|
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
|
|
/>
|
|
</VField>
|
|
<VField :label="$t('product.descZh')">
|
|
<textarea
|
|
id="product-description-zh"
|
|
v-model="descriptionZh"
|
|
rows="4"
|
|
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
|
|
/>
|
|
</VField>
|
|
<VField :label="$t('product.category')">
|
|
<select
|
|
id="product-category"
|
|
v-model="categoryId"
|
|
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
|
|
>
|
|
<option value="">{{ $t("shop.categoryOptional") }}</option>
|
|
<option v-for="category in categories" :key="category.id" :value="category.id">
|
|
{{ localized(category.name, locale) }}
|
|
</option>
|
|
</select>
|
|
</VField>
|
|
<VField :label="$t('product.images')">
|
|
<textarea
|
|
id="product-images"
|
|
v-model="images"
|
|
rows="4"
|
|
:placeholder="$t('shop.imagesHint')"
|
|
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
|
|
/>
|
|
</VField>
|
|
<VBtn variant="primary" type="submit" :disabled="busy">
|
|
{{
|
|
busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct")
|
|
}}
|
|
</VBtn>
|
|
</form>
|
|
</VCard>
|
|
</template>
|