62 lines
2.7 KiB
Vue
62 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<NuxtUiButton icon="i-heroicons-plus-20-solid" color="blue" label="Add Product"
|
|
@click="() => modalShown = true" />
|
|
<NuxtUiModal v-model="modalShown" :prevent-close="true">
|
|
<NuxtUiCard>
|
|
<template #header>
|
|
<div class="text-xl font-semibold">
|
|
Form Add Product
|
|
</div>
|
|
</template>
|
|
|
|
<NuxtUiForm @submit="execute" :schema="productSchema" :state="formState">
|
|
<NuxtUiFormGroup label="Product Code" name="product_code" required>
|
|
<NuxtUiInput v-model="formState.product_code" placeholder="Enter product code" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<NuxtUiFormGroup label="Product Name" name="product_name" required>
|
|
<NuxtUiInput v-model="formState.product_name" placeholder="Enter product name" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<NuxtUiFormGroup label="Product Category" name="product_category_id">
|
|
<DashboardDatasetProductCategoryInput v-model="formState.product_category_id" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<NuxtUiFormGroup label="Stock" name="stock">
|
|
<NuxtUiInput v-model="formState.stock" type="number" placeholder="Enter stock amount" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<NuxtUiFormGroup label="Buying Price" name="buying_price">
|
|
<NuxtUiInput v-model="formState.buying_price" type="number" placeholder="Enter buying price" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<NuxtUiFormGroup label="Selling Price" name="selling_price">
|
|
<NuxtUiInput v-model="formState.selling_price" type="number"
|
|
placeholder="Enter selling price" />
|
|
</NuxtUiFormGroup>
|
|
|
|
<div class="flex justify-end mt-4 space-x-2">
|
|
<NuxtUiButton type="button" color="red" :loading="status === 'pending'"
|
|
@click="() => modalShown = false">Cancel
|
|
</NuxtUiButton>
|
|
<NuxtUiButton type="submit" color="primary" :loading="status === 'pending'">Save</NuxtUiButton>
|
|
</div>
|
|
</NuxtUiForm>
|
|
</NuxtUiCard>
|
|
</NuxtUiModal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
const modalShown = ref<boolean>(false)
|
|
const emit = defineEmits(['created'])
|
|
const {
|
|
data, error, execute, formState, status, productSchema
|
|
} = useAddProduct()
|
|
watch(status, newVal => {
|
|
if (newVal === 'success') {
|
|
emit('created')
|
|
modalShown.value = false
|
|
}
|
|
})
|
|
</script> |