report fix
This commit is contained in:
hamid zarghami
@@ -0,0 +1,4 @@
|
||||
export enum ContactScope {
|
||||
APPLICATION = "application",
|
||||
RESTAURANT = "restaurant",
|
||||
}
|
||||
@@ -13,6 +13,8 @@ import * as Yup from 'yup';
|
||||
import { useCreateReport } from './hooks/useReportData';
|
||||
import { toast } from '@/components/Toast';
|
||||
import { extractErrorMessage } from '@/lib/func';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { ContactScope } from './enum/Enum';
|
||||
|
||||
type Props = object;
|
||||
|
||||
@@ -28,10 +30,12 @@ function ReportIndex({ }: Props) {
|
||||
initialValues: {
|
||||
subject: '',
|
||||
content: '',
|
||||
scope: ContactScope.RESTAURANT,
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
subject: Yup.string().required('این فیلد اجباری است'),
|
||||
content: Yup.string().required('این فیلد اجباری است'),
|
||||
scope: Yup.string().oneOf([ContactScope.APPLICATION, ContactScope.RESTAURANT]).required('این فیلد اجباری است'),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
createReport(values, {
|
||||
@@ -62,7 +66,7 @@ function ReportIndex({ }: Props) {
|
||||
<div className="flex lg:justify-center lg:items-center flex-1 bg-inherit">
|
||||
<div className="w-full lg:w-fit lg:h-fit lg:min-w-3/4 lg:min-h-3/4 flex flex-col-reverse lg:grid lg:gap-8 lg:bg-container lg:grid-cols-2 lg:p-8 lg:rounded-container lg:justify-around lg:items-center bg-inherit">
|
||||
<form className='flex-1 bg-inherit flex flex-col justify-between items-end' onSubmit={formik.handleSubmit}>
|
||||
<div className='bg-inherit lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
|
||||
<div className='bg-inherit pb-4 lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
|
||||
<div className="bg-inherit flex flex-col h-full">
|
||||
<div className='w-full px-4 mt-10'>
|
||||
<h2 className='text-sm2 font-medium'>{t('FormHeading')}</h2>
|
||||
@@ -70,6 +74,7 @@ function ReportIndex({ }: Props) {
|
||||
</div>
|
||||
<InputField
|
||||
className='w-full mt-6 px-4 bg-inherit'
|
||||
inputClassName='text-xs!'
|
||||
type='text'
|
||||
placeholder={t('InputTitle.Placeholder')}
|
||||
labelText={t('InputTitle.Label')}
|
||||
@@ -82,9 +87,11 @@ function ReportIndex({ }: Props) {
|
||||
aria-errormessage={formik.touched.subject && formik.errors.subject ? formik.errors.subject : undefined}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<div className='relative bg-inherit mt-6 flex-1'>
|
||||
<textarea
|
||||
className={`w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0 ${formik.touched.content && formik.errors.content
|
||||
className={`w-full text-xs! px-4 py-2.5 leading-6 outline-0 border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0 ${formik.touched.content && formik.errors.content
|
||||
? 'border-invalid'
|
||||
: 'border-border'
|
||||
}`}
|
||||
@@ -104,6 +111,30 @@ function ReportIndex({ }: Props) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-4 px-4 bg-inherit'>
|
||||
<h3 className='text-sm2 font-medium leading-5'>{t('InputScope.Label')}</h3>
|
||||
<RadioGroup
|
||||
value={formik.values.scope}
|
||||
onValueChange={(value) => {
|
||||
formik.setFieldValue('scope', value as ContactScope);
|
||||
}}
|
||||
className='flex flex-col gap-3 mt-2'
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<RadioGroupItem value={ContactScope.RESTAURANT} id={`scope-${ContactScope.RESTAURANT}`} />
|
||||
<label className='flex items-center gap-2 cursor-pointer' htmlFor={`scope-${ContactScope.RESTAURANT}`}>
|
||||
<span className='text-xs mt-0.5'>{t('InputScope.Options.Restaurant')}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<RadioGroupItem value={ContactScope.APPLICATION} id={`scope-${ContactScope.APPLICATION}`} />
|
||||
<label className='flex items-center gap-2 cursor-pointer' htmlFor={`scope-${ContactScope.APPLICATION}`}>
|
||||
<span className='text-xs mt-0.5'>{t('InputScope.Options.Application')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className='w-full px-4 mt-6'
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { ContactScope } from '../enum/Enum';
|
||||
|
||||
export type CreateReportType = {
|
||||
subject: string;
|
||||
content: string;
|
||||
scope: ContactScope;
|
||||
};
|
||||
|
||||
@@ -9,17 +9,18 @@ type Props = {
|
||||
labelText?: React.ReactNode;
|
||||
value?: string;
|
||||
valid?: boolean
|
||||
inputClassName?: string;
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
|
||||
|
||||
|
||||
const InputField = React.forwardRef<HTMLInputElement, Props>(
|
||||
({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }, ref) => {
|
||||
({ onChange, htmlFor, labelText, children, valid = true, className, inputClassName, ...inputProps }, ref) => {
|
||||
return (
|
||||
<div
|
||||
spellCheck={false}
|
||||
<div
|
||||
spellCheck={false}
|
||||
className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
|
||||
<label
|
||||
className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
|
||||
className='absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-white'
|
||||
htmlFor={htmlFor}>
|
||||
{labelText}
|
||||
</label>
|
||||
@@ -29,8 +30,9 @@ const InputField = React.forwardRef<HTMLInputElement, Props>(
|
||||
ref={ref}
|
||||
onChange={onChange}
|
||||
className={clsx(
|
||||
inputProps['aria-errormessage'] && '!text-red-300',
|
||||
'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
|
||||
inputProps['aria-errormessage'] && 'text-red-300!',
|
||||
'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!',
|
||||
inputClassName
|
||||
)}
|
||||
name={htmlFor}
|
||||
{...inputProps} />
|
||||
|
||||
@@ -23,7 +23,7 @@ function PasswordField({ onChange, htmlFor, labelText, children, valid = true, c
|
||||
spellCheck={false}
|
||||
className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
|
||||
<label
|
||||
className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
|
||||
className='absolute start-2 bg-white -top-2.5 px-2 text-[12px] text-foreground'
|
||||
htmlFor={htmlFor}>
|
||||
{labelText}
|
||||
</label>
|
||||
@@ -33,8 +33,8 @@ function PasswordField({ onChange, htmlFor, labelText, children, valid = true, c
|
||||
type={state ? 'text' : 'password'}
|
||||
onChange={onChange}
|
||||
className={clsx(
|
||||
inputProps['aria-errormessage'] && '!text-red-300',
|
||||
'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
|
||||
inputProps['aria-errormessage'] && 'text-red-300!',
|
||||
'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!'
|
||||
)}
|
||||
name={htmlFor}
|
||||
{...inputProps} />
|
||||
|
||||
@@ -11,6 +11,13 @@
|
||||
"Label": "توضیحات",
|
||||
"Placeholder": "توضیحات خود را وارد کنید"
|
||||
},
|
||||
"InputScope": {
|
||||
"Label": "حوزه",
|
||||
"Options": {
|
||||
"Restaurant": "رستوران",
|
||||
"Application": "اپلیکیشن"
|
||||
}
|
||||
},
|
||||
"ButtonSubmit": "ثبت"
|
||||
},
|
||||
"Cart": {
|
||||
|
||||
Reference in New Issue
Block a user