Skip to content

Commit

Permalink
chore: vee-validate removed (#298)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmbanan666
hmbanan666 authored Feb 13, 2025
1 parent 9ae3296 commit 956da22
Show file tree
Hide file tree
Showing 39 changed files with 1,028 additions and 1,356 deletions.
108 changes: 51 additions & 57 deletions apps/web-app/app/components/form/CreateChannelPaymentMethod.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,44 @@
<template>
<form class="space-y-3" @submit="onSubmit">
<UiFormField v-slot="{ componentField }" name="name">
<UiFormItem>
<div>
<UiFormLabel>{{ $t('center.data.name') }}</UiFormLabel>
<UiFormMessage />
</div>
<UiFormControl>
<UiInput v-bind="componentField" />
</UiFormControl>
</UiFormItem>
</UiFormField>
<UForm
:schema="channelPaymentMethodCreateSchema"
:state="state"
class="flex flex-col gap-3"
@submit="onSubmit"
>
<UFormField :label="$t('center.data.name')" name="name">
<UInput
v-model="state.name"
size="xl"
class="w-full items-center justify-center"
/>
</UFormField>

<UiFormField v-slot="{ componentField }" name="type">
<UiFormItem>
<div>
<UiFormLabel>{{ $t('center.data.type') }}</UiFormLabel>
<UiFormMessage />
</div>
<UiSelect v-bind="componentField">
<UiFormControl>
<UiSelectTrigger>
<UiSelectValue :placeholder="$t('common.select')" />
</UiSelectTrigger>
</UiFormControl>
<UFormField :label="$t('center.data.type')" name="type">
<USelect
v-model="state.type"
:items="getLocalizedPaymentMethodTypesForSelect()"
:placeholder="$t('common.select')"
size="xl"
class="w-full"
/>
</UFormField>

<UiSelectContent>
<UiSelectGroup>
<UiSelectItem
v-for="type in getLocalizedPaymentMethodTypesForSelect()"
:key="type.value"
:value="type.value"
>
{{ type.label }}
</UiSelectItem>
</UiSelectGroup>
</UiSelectContent>
</UiSelect>
</UiFormItem>
</UiFormField>

<UiButton type="submit" variant="secondary">
<UButton
type="submit"
variant="solid"
color="primary"
size="xl"
class="mt-3 w-full justify-center items-center"
>
{{ $t('center.create.title') }}
</UiButton>
</form>
</UButton>
</UForm>
</template>

<script setup lang="ts">
import type { ChannelPaymentMethodCreateSchema } from '@next-orders/core/shared/services/channel'
import type { FormSubmitEvent } from '@nuxt/ui'
import { channelPaymentMethodCreateSchema } from '@next-orders/core/shared/services/channel'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { useToast } from '~/components/ui/toast'
const { isOpened } = defineProps<{
isOpened: boolean
Expand All @@ -59,41 +47,47 @@ const { isOpened } = defineProps<{
const emit = defineEmits(['success'])
const { t } = useI18n()
const { toast } = useToast()
const toast = useToast()
const { refresh: refreshChannelData } = await useChannel()
const formSchema = toTypedSchema(channelPaymentMethodCreateSchema)
const { handleSubmit, handleReset } = useForm({
validationSchema: formSchema,
const state = ref<Partial<ChannelPaymentMethodCreateSchema>>({
name: undefined,
type: undefined,
})
function resetState() {
state.value = {
name: undefined,
type: undefined,
}
}
watch(
() => isOpened,
() => {
handleReset()
resetState()
},
)
const onSubmit = handleSubmit(async (values, { resetForm }) => {
async function onSubmit(event: FormSubmitEvent<ChannelPaymentMethodCreateSchema>) {
const { data, error } = await useAsyncData(
'create-payment-method',
() => $fetch('/api/channel/payment-method', {
method: 'POST',
body: values,
body: event.data,
}),
)
if (error.value) {
console.error(error.value)
toast({ title: t('error.title'), description: '...' })
toast.add({ title: t('error.title'), description: '...' })
}
if (data.value) {
await refreshChannelData()
emit('success')
toast({ title: t('toast.payment-method-created'), description: t('toast.updating-data') })
resetForm()
toast.add({ title: t('toast.payment-method-created'), description: t('toast.updating-data') })
resetState()
}
})
}
</script>
70 changes: 40 additions & 30 deletions apps/web-app/app/components/form/CreateMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
<template>
<form class="space-y-3" @submit="onSubmit">
<UiFormField v-slot="{ componentField }" name="name">
<UiFormItem>
<div>
<UiFormLabel>{{ $t('center.data.name') }}</UiFormLabel>
<UiFormMessage />
</div>
<UiFormControl>
<UiInput v-bind="componentField" />
</UiFormControl>
</UiFormItem>
</UiFormField>
<UForm
:schema="menuCreateSchema"
:state="state"
class="flex flex-col gap-3"
@submit="onSubmit"
>
<UFormField :label="$t('center.data.name')" name="name">
<UInput
v-model="state.name"
size="xl"
class="w-full items-center justify-center"
/>
</UFormField>

<UiButton type="submit" variant="secondary">
<UButton
type="submit"
variant="solid"
color="primary"
size="xl"
class="mt-3 w-full justify-center items-center"
>
{{ $t('center.create.title') }}
</UiButton>
</form>
</UButton>
</UForm>
</template>

<script setup lang="ts">
import type { MenuCreateSchema } from '@next-orders/core/shared/services/menu'
import type { FormSubmitEvent } from '@nuxt/ui'
import { menuCreateSchema } from '@next-orders/core/shared/services/menu'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { useToast } from '~/components/ui/toast'
const { isOpened } = defineProps<{
isOpened: boolean
Expand All @@ -31,41 +37,45 @@ const { isOpened } = defineProps<{
const emit = defineEmits(['success'])
const { t } = useI18n()
const { toast } = useToast()
const toast = useToast()
const { refresh: refreshChannelData } = await useChannel()
const formSchema = toTypedSchema(menuCreateSchema)
const { handleSubmit, handleReset } = useForm({
validationSchema: formSchema,
const state = ref<Partial<MenuCreateSchema>>({
name: undefined,
})
function resetState() {
state.value = {
name: undefined,
}
}
watch(
() => isOpened,
() => {
handleReset()
resetState()
},
)
const onSubmit = handleSubmit(async (values, { resetForm }) => {
async function onSubmit(event: FormSubmitEvent<MenuCreateSchema>) {
const { data, error } = await useAsyncData(
'create-menu',
() => $fetch('/api/menu', {
method: 'POST',
body: values,
body: event.data,
}),
)
if (error.value) {
console.error(error.value)
toast({ title: t('error.title'), description: '...' })
toast.add({ title: t('error.title'), description: '...' })
}
if (data.value) {
await refreshChannelData()
emit('success')
toast({ title: t('toast.menu-created'), description: t('toast.updating-data') })
resetForm()
toast.add({ title: t('toast.menu-created'), description: t('toast.updating-data') })
resetState()
}
})
}
</script>
73 changes: 42 additions & 31 deletions apps/web-app/app/components/form/CreateMenuCategory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
<template>
<form class="space-y-3" @submit="onSubmit">
<UiFormField v-slot="{ componentField }" name="name">
<UiFormItem>
<div>
<UiFormLabel>{{ $t('center.data.name') }}</UiFormLabel>
<UiFormMessage />
</div>
<UiFormControl>
<UiInput v-bind="componentField" />
</UiFormControl>
</UiFormItem>
</UiFormField>
<UForm
:schema="menuCategoryCreateSchema"
:state="state"
class="flex flex-col gap-3"
@submit="onSubmit"
>
<UFormField :label="$t('center.data.name')" name="name">
<UInput
v-model="state.name"
size="xl"
class="w-full items-center justify-center"
/>
</UFormField>

<UiButton type="submit" variant="secondary">
<UButton
type="submit"
variant="solid"
color="primary"
size="xl"
class="mt-3 w-full justify-center items-center"
>
{{ $t('center.create.title') }}
</UiButton>
</form>
</UButton>
</UForm>
</template>

<script setup lang="ts">
import type { MenuCategoryCreateSchema } from '@next-orders/core/shared/services/menu'
import type { FormSubmitEvent } from '@nuxt/ui'
import { menuCategoryCreateSchema } from '@next-orders/core/shared/services/menu'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { useToast } from '~/components/ui/toast'
const { isOpened, menuId } = defineProps<{
isOpened: boolean
Expand All @@ -32,42 +38,47 @@ const { isOpened, menuId } = defineProps<{
const emit = defineEmits(['success'])
const { t } = useI18n()
const { toast } = useToast()
const toast = useToast()
const { refresh: refreshChannelData } = await useChannel()
const formSchema = toTypedSchema(menuCategoryCreateSchema)
const { handleSubmit, handleReset, setFieldValue } = useForm({
validationSchema: formSchema,
const state = ref<Partial<MenuCategoryCreateSchema>>({
name: undefined,
menuId,
})
function resetState() {
state.value = {
name: undefined,
menuId,
}
}
watch(
() => isOpened,
() => {
handleReset()
setFieldValue('menuId', menuId)
resetState()
},
)
const onSubmit = handleSubmit(async (values, { resetForm }) => {
async function onSubmit(event: FormSubmitEvent<MenuCategoryCreateSchema>) {
const { data, error } = await useAsyncData(
'create-menu-category',
() => $fetch('/api/category', {
method: 'POST',
body: values,
body: event.data,
}),
)
if (error.value) {
console.error(error.value)
toast({ title: t('error.title'), description: '...' })
toast.add({ title: t('error.title'), description: '...' })
}
if (data.value) {
await refreshChannelData()
emit('success')
toast({ title: t('toast.category-created'), description: t('toast.updating-data') })
resetForm()
toast.add({ title: t('toast.category-created'), description: t('toast.updating-data') })
resetState()
}
})
}
</script>
Loading

0 comments on commit 956da22

Please sign in to comment.