Refactor MerchantStore component for improved form handling and validation
- Remove unnecessary keys from form fields in the stall creation dialog to simplify the structure. - Ensure the description field is now required, enhancing validation for store creation. - Update the dialog button to type "button" for better clarity in user interactions. - Streamline the handling of the description field in the API request, ensuring it defaults to an empty string if not provided. These changes enhance the user experience during store creation by improving form validation and simplifying the component structure.
This commit is contained in:
parent
c3e599b3e4
commit
4ce12bcbd3
1 changed files with 5 additions and 6 deletions
|
|
@ -449,13 +449,13 @@
|
||||||
</div> <!-- End of main container -->
|
</div> <!-- End of main container -->
|
||||||
|
|
||||||
<!-- Create Stall Dialog -->
|
<!-- Create Stall Dialog -->
|
||||||
<Dialog v-model:open="showStallDialog" :key="dialogKey">
|
<Dialog v-model:open="showStallDialog">
|
||||||
<DialogContent class="sm:max-w-2xl">
|
<DialogContent class="sm:max-w-2xl">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Create New Store</DialogTitle>
|
<DialogTitle>Create New Store</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<form @submit="onSubmit" class="space-y-6 py-4" :key="formKey" autocomplete="off">
|
<form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
|
||||||
<!-- Basic Store Info -->
|
<!-- Basic Store Info -->
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<FormField v-slot="{ componentField }" name="name">
|
<FormField v-slot="{ componentField }" name="name">
|
||||||
|
|
@ -466,7 +466,6 @@
|
||||||
placeholder="Enter your store name"
|
placeholder="Enter your store name"
|
||||||
:disabled="isCreatingStall"
|
:disabled="isCreatingStall"
|
||||||
v-bind="componentField"
|
v-bind="componentField"
|
||||||
:key="`store-name-${formKey}`"
|
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
/>
|
/>
|
||||||
|
|
@ -486,7 +485,6 @@
|
||||||
placeholder="Describe your store and products"
|
placeholder="Describe your store and products"
|
||||||
:disabled="isCreatingStall"
|
:disabled="isCreatingStall"
|
||||||
v-bind="componentField"
|
v-bind="componentField"
|
||||||
:key="`store-description-${formKey}`"
|
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
/>
|
/>
|
||||||
|
|
@ -644,6 +642,7 @@
|
||||||
|
|
||||||
<div class="flex justify-end space-x-2 pt-4">
|
<div class="flex justify-end space-x-2 pt-4">
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
@click="closeStallDialog"
|
@click="closeStallDialog"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
:disabled="isCreatingStall"
|
:disabled="isCreatingStall"
|
||||||
|
|
@ -752,7 +751,7 @@ const countries = ref([
|
||||||
// Stall form schema
|
// Stall form schema
|
||||||
const stallFormSchema = toTypedSchema(z.object({
|
const stallFormSchema = toTypedSchema(z.object({
|
||||||
name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
|
name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
|
||||||
description: z.string().max(500, "Description must be less than 500 characters").optional(),
|
description: z.string().max(500, "Description must be less than 500 characters"),
|
||||||
currency: z.string().min(1, "Currency is required"),
|
currency: z.string().min(1, "Currency is required"),
|
||||||
wallet: z.string().optional(),
|
wallet: z.string().optional(),
|
||||||
selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
|
selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
|
||||||
|
|
@ -1264,7 +1263,7 @@ const createStall = async (formData: any) => {
|
||||||
currency,
|
currency,
|
||||||
shipping_zones: selectedZoneData,
|
shipping_zones: selectedZoneData,
|
||||||
config: {
|
config: {
|
||||||
description: description || undefined
|
description: description || ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue