Wizard güncellemesi
This commit is contained in:
Sedat ÖZTÜRK
parent
4099ef9079
commit
877d0e7397
2 changed files with 422 additions and 371 deletions
|
|
@ -879,21 +879,11 @@
|
||||||
"RequiredPermissionName": "App.Contact",
|
"RequiredPermissionName": "App.Contact",
|
||||||
"IsDisabled": false
|
"IsDisabled": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"ParentCode": "App.Administration",
|
|
||||||
"Code": "App.Listforms.Wizard",
|
|
||||||
"DisplayName": "App.Listforms.Wizard",
|
|
||||||
"Order": 5,
|
|
||||||
"Url": "/admin/listform/wizard",
|
|
||||||
"Icon": "FcFlashAuto",
|
|
||||||
"RequiredPermissionName": "App.Listforms.Wizard",
|
|
||||||
"IsDisabled": false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.Routes",
|
"Code": "App.Routes",
|
||||||
"DisplayName": "App.Routes",
|
"DisplayName": "App.Routes",
|
||||||
"Order": 6,
|
"Order": 5,
|
||||||
"Url": "/admin/list/App.Routes",
|
"Url": "/admin/list/App.Routes",
|
||||||
"Icon": "FaSynagogue",
|
"Icon": "FaSynagogue",
|
||||||
"RequiredPermissionName": "App.Routes",
|
"RequiredPermissionName": "App.Routes",
|
||||||
|
|
@ -903,7 +893,7 @@
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.Menus",
|
"Code": "App.Menus",
|
||||||
"DisplayName": "App.Menus",
|
"DisplayName": "App.Menus",
|
||||||
"Order": 7,
|
"Order": 6,
|
||||||
"Url": null,
|
"Url": null,
|
||||||
"Icon": "FaSchlix",
|
"Icon": "FaSchlix",
|
||||||
"RequiredPermissionName": null,
|
"RequiredPermissionName": null,
|
||||||
|
|
@ -933,7 +923,7 @@
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.Files",
|
"Code": "App.Files",
|
||||||
"DisplayName": "App.Files",
|
"DisplayName": "App.Files",
|
||||||
"Order": 8,
|
"Order": 7,
|
||||||
"Url": "/admin/files",
|
"Url": "/admin/files",
|
||||||
"Icon": "FcFolder",
|
"Icon": "FcFolder",
|
||||||
"RequiredPermissionName": "App.Files",
|
"RequiredPermissionName": "App.Files",
|
||||||
|
|
@ -943,7 +933,7 @@
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.Reports.Management",
|
"Code": "App.Reports.Management",
|
||||||
"DisplayName": "App.Reports.Management",
|
"DisplayName": "App.Reports.Management",
|
||||||
"Order": 9,
|
"Order": 8,
|
||||||
"Url": null,
|
"Url": null,
|
||||||
"Icon": "FcDocument",
|
"Icon": "FcDocument",
|
||||||
"RequiredPermissionName": null,
|
"RequiredPermissionName": null,
|
||||||
|
|
@ -973,7 +963,7 @@
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.DeveloperKit",
|
"Code": "App.DeveloperKit",
|
||||||
"DisplayName": "App.DeveloperKit",
|
"DisplayName": "App.DeveloperKit",
|
||||||
"Order": 10,
|
"Order": 9,
|
||||||
"Url": null,
|
"Url": null,
|
||||||
"Icon": "FcAndroidOs",
|
"Icon": "FcAndroidOs",
|
||||||
"RequiredPermissionName": null,
|
"RequiredPermissionName": null,
|
||||||
|
|
@ -1059,6 +1049,16 @@
|
||||||
"RequiredPermissionName": "App.SqlQueryManager",
|
"RequiredPermissionName": "App.SqlQueryManager",
|
||||||
"IsDisabled": false
|
"IsDisabled": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"ParentCode": "App.Administration",
|
||||||
|
"Code": "App.Listforms.Wizard",
|
||||||
|
"DisplayName": "App.Listforms.Wizard",
|
||||||
|
"Order": 10,
|
||||||
|
"Url": "/admin/listform/wizard",
|
||||||
|
"Icon": "FcFlashAuto",
|
||||||
|
"RequiredPermissionName": "App.Listforms.Wizard",
|
||||||
|
"IsDisabled": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"ParentCode": "App.Administration",
|
"ParentCode": "App.Administration",
|
||||||
"Code": "App.Forum",
|
"Code": "App.Forum",
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,15 @@ import {
|
||||||
Input,
|
Input,
|
||||||
Notification,
|
Notification,
|
||||||
Select,
|
Select,
|
||||||
|
Steps,
|
||||||
toast,
|
toast,
|
||||||
} from '@/components/ui'
|
} from '@/components/ui'
|
||||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||||
import { ListFormWizardDto } from '@/proxy/admin/list-form/models'
|
import { ListFormWizardDto } from '@/proxy/admin/list-form/models'
|
||||||
import { SelectBoxOption } from '@/types/shared'
|
import { SelectBoxOption } from '@/types/shared'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik, FormikProps } from 'formik'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import CreatableSelect from 'react-select/creatable'
|
import CreatableSelect from 'react-select/creatable'
|
||||||
|
|
@ -47,19 +48,22 @@ const initialValues: ListFormWizardDto = {
|
||||||
keyFieldDbSourceType: DbTypeEnum.Int32, // Select: Enum dbSourceTypeOptions
|
keyFieldDbSourceType: DbTypeEnum.Int32, // Select: Enum dbSourceTypeOptions
|
||||||
}
|
}
|
||||||
|
|
||||||
const listFormValidationSchema = Yup.object().shape({
|
const step1ValidationSchema = Yup.object().shape({
|
||||||
listFormCode: Yup.string().required(),
|
listFormCode: Yup.string().required(),
|
||||||
|
permissionGroupName: Yup.string().required(),
|
||||||
|
menuParentCode: Yup.string().required(),
|
||||||
|
menuIcon: Yup.string(),
|
||||||
languageTextMenuEn: Yup.string(),
|
languageTextMenuEn: Yup.string(),
|
||||||
languageTextMenuTr: Yup.string(),
|
languageTextMenuTr: Yup.string(),
|
||||||
|
languageTextMenuParentEn: Yup.string(),
|
||||||
|
languageTextMenuParentTr: Yup.string(),
|
||||||
|
})
|
||||||
|
|
||||||
|
const step2ValidationSchema = Yup.object().shape({
|
||||||
languageTextTitleEn: Yup.string(),
|
languageTextTitleEn: Yup.string(),
|
||||||
languageTextTitleTr: Yup.string(),
|
languageTextTitleTr: Yup.string(),
|
||||||
languageTextDescEn: Yup.string(),
|
languageTextDescEn: Yup.string(),
|
||||||
languageTextDescTr: Yup.string(),
|
languageTextDescTr: Yup.string(),
|
||||||
languageTextMenuParentEn: Yup.string(),
|
|
||||||
languageTextMenuParentTr: Yup.string(),
|
|
||||||
permissionGroupName: Yup.string().required(),
|
|
||||||
menuParentCode: Yup.string().required(),
|
|
||||||
menuIcon: Yup.string(),
|
|
||||||
dataSourceCode: Yup.string(),
|
dataSourceCode: Yup.string(),
|
||||||
dataSourceConnectionString: Yup.string(),
|
dataSourceConnectionString: Yup.string(),
|
||||||
selectCommandType: Yup.string().required(),
|
selectCommandType: Yup.string().required(),
|
||||||
|
|
@ -68,8 +72,12 @@ const listFormValidationSchema = Yup.object().shape({
|
||||||
keyFieldDbSourceType: Yup.string().required(),
|
keyFieldDbSourceType: Yup.string().required(),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const listFormValidationSchema = step1ValidationSchema.concat(step2ValidationSchema)
|
||||||
|
|
||||||
const Wizard = () => {
|
const Wizard = () => {
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
|
const [currentStep, setCurrentStep] = useState(0)
|
||||||
|
|
||||||
const [isLoadingDataSource, setIsLoadingDataSource] = useState(false)
|
const [isLoadingDataSource, setIsLoadingDataSource] = useState(false)
|
||||||
const [dataSourceList, setDataSourceList] = useState<SelectBoxOption[]>([])
|
const [dataSourceList, setDataSourceList] = useState<SelectBoxOption[]>([])
|
||||||
const [isDataSourceNew, setIsDataSourceNew] = useState(false)
|
const [isDataSourceNew, setIsDataSourceNew] = useState(false)
|
||||||
|
|
@ -106,7 +114,6 @@ const Wizard = () => {
|
||||||
|
|
||||||
const [isLoadingPermissionGroup, setIsLoadingPermissionGroup] = useState(false)
|
const [isLoadingPermissionGroup, setIsLoadingPermissionGroup] = useState(false)
|
||||||
const [permissionGroupList, setPermissionGroupList] = useState<SelectBoxOption[]>([])
|
const [permissionGroupList, setPermissionGroupList] = useState<SelectBoxOption[]>([])
|
||||||
const [isPermissionGroupNew, setIsPermissionGroupNew] = useState(false)
|
|
||||||
const getPermissionGroupList = async () => {
|
const getPermissionGroupList = async () => {
|
||||||
setIsLoadingPermissionGroup(true)
|
setIsLoadingPermissionGroup(true)
|
||||||
const response = await getPermissions('R', '')
|
const response = await getPermissions('R', '')
|
||||||
|
|
@ -128,6 +135,27 @@ const Wizard = () => {
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
const formikRef = useRef<FormikProps<ListFormWizardDto>>(null)
|
||||||
|
|
||||||
|
const handleNext = async () => {
|
||||||
|
if (!formikRef.current) return
|
||||||
|
const errors = await formikRef.current.validateForm()
|
||||||
|
const step1Fields = Object.keys(step1ValidationSchema.fields)
|
||||||
|
const hasStep1Errors = step1Fields.some((f) => errors[f as keyof ListFormWizardDto])
|
||||||
|
// Touch all step 1 fields so errors appear
|
||||||
|
const touchedStep1 = step1Fields.reduce(
|
||||||
|
(acc, key) => ({ ...acc, [key]: true }),
|
||||||
|
{} as Record<string, boolean>,
|
||||||
|
)
|
||||||
|
formikRef.current.setTouched({ ...formikRef.current.touched, ...touchedStep1 })
|
||||||
|
if (!hasStep1Errors) {
|
||||||
|
setCurrentStep(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
setCurrentStep(0)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
|
@ -137,8 +165,16 @@ const Wizard = () => {
|
||||||
defaultTitle={APP_NAME}
|
defaultTitle={APP_NAME}
|
||||||
></Helmet>
|
></Helmet>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<Steps current={currentStep}>
|
||||||
|
<Steps.Item title={translate('::ListForms.Wizard.BasicInfo') || 'Basic Info'} />
|
||||||
|
<Steps.Item title={translate('::ListForms.Wizard.DataSettings') || 'Data Settings'} />
|
||||||
|
</Steps>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 xl:grid-cols-3">
|
<div className="grid lg:grid-cols-2 xl:grid-cols-3">
|
||||||
<Formik
|
<Formik
|
||||||
|
innerRef={formikRef}
|
||||||
initialValues={{ ...initialValues }}
|
initialValues={{ ...initialValues }}
|
||||||
validationSchema={listFormValidationSchema}
|
validationSchema={listFormValidationSchema}
|
||||||
onSubmit={async (values, { setSubmitting }) => {
|
onSubmit={async (values, { setSubmitting }) => {
|
||||||
|
|
@ -172,369 +208,384 @@ const Wizard = () => {
|
||||||
{({ touched, errors, isSubmitting, values }) => (
|
{({ touched, errors, isSubmitting, values }) => (
|
||||||
<Form>
|
<Form>
|
||||||
<FormContainer size="sm">
|
<FormContainer size="sm">
|
||||||
<FormItem
|
{/* ─── Step 1: Basic Info ─────────────────────────────── */}
|
||||||
label="ListForm Code"
|
{currentStep === 0 && (
|
||||||
invalid={errors.listFormCode && touched.listFormCode}
|
<>
|
||||||
errorMessage={errors.listFormCode}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="listFormCode"
|
|
||||||
placeholder="ListForm Code"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
<FormItem
|
|
||||||
label="Permission Group Name"
|
|
||||||
invalid={errors.permissionGroupName && touched.permissionGroupName}
|
|
||||||
errorMessage={errors.permissionGroupName}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field type="text" autoComplete="off" name="permissionGroupName">
|
|
||||||
{({ field, form }: FieldProps<string>) => (
|
|
||||||
<Select
|
|
||||||
componentAs={CreatableSelect}
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
placeholder="Permission Group Name"
|
|
||||||
isClearable={true}
|
|
||||||
isLoading={isLoadingPermissionGroup}
|
|
||||||
options={permissionGroupList}
|
|
||||||
value={
|
|
||||||
values.permissionGroupName
|
|
||||||
? (menuList?.find((o) => o.value === values.permissionGroupName) ?? {
|
|
||||||
label: values.permissionGroupName,
|
|
||||||
value: values.permissionGroupName,
|
|
||||||
})
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
onChange={(option) => {
|
|
||||||
form.setFieldValue(field.name, option?.value)
|
|
||||||
setIsPermissionGroupNew(
|
|
||||||
!!option?.value && !menuList.some((a) => a.value === option?.value),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem>
|
|
||||||
<div className="grid grid-cols-2 gap-1">
|
|
||||||
<FormItem
|
|
||||||
label="Menu Parent Code"
|
|
||||||
invalid={errors.menuParentCode && touched.menuParentCode}
|
|
||||||
errorMessage={errors.menuParentCode}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field type="text" autoComplete="off" name="menuParentCode">
|
|
||||||
{({ field, form }: FieldProps<string>) => (
|
|
||||||
<Select
|
|
||||||
componentAs={CreatableSelect}
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
placeholder="Menu Parent Code"
|
|
||||||
isClearable={true}
|
|
||||||
isLoading={isLoadingMenu}
|
|
||||||
options={menuList}
|
|
||||||
value={
|
|
||||||
values.menuParentCode
|
|
||||||
? (menuList?.find((o) => o.value === values.menuParentCode) ?? {
|
|
||||||
label: values.menuParentCode,
|
|
||||||
value: values.menuParentCode,
|
|
||||||
})
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
onChange={(option) => {
|
|
||||||
form.setFieldValue(field.name, option?.value)
|
|
||||||
setIsMenuNew(
|
|
||||||
!!option?.value && !menuList.some((a) => a.value === option?.value),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem>
|
|
||||||
<FormItem
|
|
||||||
label="Menu Icon"
|
|
||||||
invalid={errors.menuIcon && touched.menuIcon}
|
|
||||||
errorMessage={errors.menuIcon}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="menuIcon"
|
|
||||||
placeholder="Menu Icon"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
</div>
|
|
||||||
{isMenuNew && (
|
|
||||||
<div className="grid grid-cols-2 gap-1">
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Parent Menu Code (En)"
|
label="ListForm Code"
|
||||||
invalid={errors.languageTextMenuParentEn && touched.languageTextMenuParentEn}
|
invalid={errors.listFormCode && touched.listFormCode}
|
||||||
errorMessage={errors.languageTextMenuParentEn}
|
errorMessage={errors.listFormCode}
|
||||||
asterisk={true}
|
asterisk={true}
|
||||||
>
|
>
|
||||||
<Field
|
<Field
|
||||||
type="text"
|
type="text"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
name="languageTextMenuParentEn"
|
name="listFormCode"
|
||||||
placeholder="Parent Menu Code (En)"
|
placeholder="ListForm Code"
|
||||||
component={Input}
|
component={Input}
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Parent Menu Code (Tr)"
|
label="Permission Group Name"
|
||||||
invalid={errors.languageTextMenuParentTr && touched.languageTextMenuParentTr}
|
invalid={errors.permissionGroupName && touched.permissionGroupName}
|
||||||
errorMessage={errors.languageTextMenuParentTr}
|
errorMessage={errors.permissionGroupName}
|
||||||
asterisk={true}
|
asterisk={true}
|
||||||
>
|
>
|
||||||
<Field
|
<Field type="text" autoComplete="off" name="permissionGroupName">
|
||||||
type="text"
|
{({ field, form }: FieldProps<string>) => (
|
||||||
autoComplete="off"
|
<Select
|
||||||
name="languageTextMenuParentTr"
|
componentAs={CreatableSelect}
|
||||||
placeholder="Parent Menu Code (Tr)"
|
field={field}
|
||||||
component={Input}
|
form={form}
|
||||||
/>
|
placeholder="Permission Group Name"
|
||||||
|
isClearable={true}
|
||||||
|
isLoading={isLoadingPermissionGroup}
|
||||||
|
options={permissionGroupList}
|
||||||
|
value={
|
||||||
|
values.permissionGroupName
|
||||||
|
? (permissionGroupList?.find(
|
||||||
|
(o) => o.value === values.permissionGroupName,
|
||||||
|
) ?? {
|
||||||
|
label: values.permissionGroupName,
|
||||||
|
value: values.permissionGroupName,
|
||||||
|
})
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
onChange={(option) => {
|
||||||
|
form.setFieldValue(field.name, option?.value)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
|
||||||
)}
|
<div className="grid grid-cols-2 gap-1">
|
||||||
<div className="grid grid-cols-2 gap-1">
|
<FormItem
|
||||||
<FormItem
|
label="Menu Parent Code"
|
||||||
label="Data Source Code"
|
invalid={errors.menuParentCode && touched.menuParentCode}
|
||||||
invalid={errors.dataSourceCode && touched.dataSourceCode}
|
errorMessage={errors.menuParentCode}
|
||||||
errorMessage={errors.dataSourceCode}
|
asterisk={true}
|
||||||
>
|
>
|
||||||
<Field
|
<Field type="text" autoComplete="off" name="menuParentCode">
|
||||||
type="text"
|
{({ field, form }: FieldProps<string>) => (
|
||||||
autoComplete="off"
|
<Select
|
||||||
name="dataSourceCode"
|
componentAs={CreatableSelect}
|
||||||
placeholder="Data Source Code"
|
field={field}
|
||||||
>
|
form={form}
|
||||||
{({ field, form }: FieldProps<string>) => (
|
placeholder="Menu Parent Code"
|
||||||
<Select
|
isClearable={true}
|
||||||
componentAs={CreatableSelect}
|
isLoading={isLoadingMenu}
|
||||||
field={field}
|
options={menuList}
|
||||||
form={form}
|
value={
|
||||||
placeholder="Data Source Code"
|
values.menuParentCode
|
||||||
isClearable={true}
|
? (menuList?.find((o) => o.value === values.menuParentCode) ?? {
|
||||||
isLoading={isLoadingDataSource}
|
label: values.menuParentCode,
|
||||||
options={dataSourceList}
|
value: values.menuParentCode,
|
||||||
value={
|
})
|
||||||
values.dataSourceCode
|
: null
|
||||||
? (dataSourceList?.find((o) => o.value === values.dataSourceCode) ?? {
|
}
|
||||||
label: values.dataSourceCode,
|
onChange={(option) => {
|
||||||
value: values.dataSourceCode,
|
form.setFieldValue(field.name, option?.value)
|
||||||
})
|
setIsMenuNew(
|
||||||
: null
|
!!option?.value &&
|
||||||
}
|
!menuList.some((a) => a.value === option?.value),
|
||||||
onChange={(option) => {
|
)
|
||||||
form.setFieldValue(field.name, option?.value)
|
}}
|
||||||
setIsDataSourceNew(
|
/>
|
||||||
!!option?.value &&
|
|
||||||
!dataSourceList.some((a) => a.value === option?.value),
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem>
|
|
||||||
{isDataSourceNew && (
|
|
||||||
<FormItem
|
|
||||||
label="Connection String"
|
|
||||||
invalid={
|
|
||||||
errors.dataSourceConnectionString && touched.dataSourceConnectionString
|
|
||||||
}
|
|
||||||
errorMessage={errors.dataSourceConnectionString}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="dataSourceConnectionString"
|
|
||||||
placeholder="Connection String"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-1">
|
|
||||||
<FormItem
|
|
||||||
label="Select Command Type"
|
|
||||||
invalid={errors.selectCommandType && touched.selectCommandType}
|
|
||||||
errorMessage={errors.selectCommandType}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="selectCommandType"
|
|
||||||
placeholder="Select Command Type"
|
|
||||||
component={Input}
|
|
||||||
>
|
|
||||||
{({ field, form }: FieldProps<SelectCommandTypeEnum>) => (
|
|
||||||
<Select
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
options={selectCommandTypeOptions}
|
|
||||||
value={selectCommandTypeOptions.find((o: any) => o.value === field.value)}
|
|
||||||
onChange={(o) => form.setFieldValue(field.name, o?.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</FormItem>
|
|
||||||
<FormItem
|
|
||||||
label="Select Command"
|
|
||||||
invalid={errors.selectCommand && touched.selectCommand}
|
|
||||||
errorMessage={errors.selectCommand}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="selectCommand"
|
|
||||||
placeholder="Select Command"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-1">
|
|
||||||
<FormItem
|
|
||||||
label="Key Field Name"
|
|
||||||
invalid={errors.keyFieldName && touched.keyFieldName}
|
|
||||||
errorMessage={errors.keyFieldName}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="keyFieldName"
|
|
||||||
placeholder="Key Field Name"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
<FormItem
|
|
||||||
label="Key Field Db Source Type"
|
|
||||||
invalid={errors.keyFieldDbSourceType && touched.keyFieldDbSourceType}
|
|
||||||
errorMessage={errors.keyFieldDbSourceType}
|
|
||||||
asterisk={true}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
|
||||||
name="keyFieldDbSourceType"
|
|
||||||
placeholder="Key Field Db Source Type"
|
|
||||||
component={Input}
|
|
||||||
>
|
|
||||||
{({ field, form }: FieldProps<DbTypeEnum>) => (
|
|
||||||
<Select
|
|
||||||
field={field}
|
|
||||||
form={form}
|
|
||||||
options={dbSourceTypeOptions}
|
|
||||||
value={dbSourceTypeOptions?.filter(
|
|
||||||
(o: any) => o.value === values.keyFieldDbSourceType,
|
|
||||||
)}
|
)}
|
||||||
onChange={(o) => form.setFieldValue(field.name, o?.value)}
|
</Field>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem
|
||||||
|
label="Menu Icon"
|
||||||
|
invalid={errors.menuIcon && touched.menuIcon}
|
||||||
|
errorMessage={errors.menuIcon}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="menuIcon"
|
||||||
|
placeholder="Menu Icon"
|
||||||
|
component={Input}
|
||||||
/>
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isMenuNew && (
|
||||||
|
<div className="grid grid-cols-2 gap-1">
|
||||||
|
<FormItem
|
||||||
|
label="Parent Menu Text (En)"
|
||||||
|
invalid={
|
||||||
|
errors.languageTextMenuParentEn && touched.languageTextMenuParentEn
|
||||||
|
}
|
||||||
|
errorMessage={errors.languageTextMenuParentEn}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextMenuParentEn"
|
||||||
|
placeholder="Parent Menu Text (En)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label="Parent Menu Text (Tr)"
|
||||||
|
invalid={
|
||||||
|
errors.languageTextMenuParentTr && touched.languageTextMenuParentTr
|
||||||
|
}
|
||||||
|
errorMessage={errors.languageTextMenuParentTr}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextMenuParentTr"
|
||||||
|
placeholder="Parent Menu Text (Tr)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-1">
|
||||||
|
<FormItem
|
||||||
|
label="Menu Text (En)"
|
||||||
|
invalid={errors.languageTextMenuEn && touched.languageTextMenuEn}
|
||||||
|
errorMessage={errors.languageTextMenuEn}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextMenuEn"
|
||||||
|
placeholder="Menu Text (En)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label="Menu Text (Tr)"
|
||||||
|
invalid={errors.languageTextMenuTr && touched.languageTextMenuTr}
|
||||||
|
errorMessage={errors.languageTextMenuTr}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextMenuTr"
|
||||||
|
placeholder="Menu Text (Tr)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button block className="mt-4" variant="solid" type="button" onClick={handleNext}>
|
||||||
|
{translate('::Next') || 'Next'}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ─── Step 2: Data Settings ───────────────────────────── */}
|
||||||
|
{currentStep === 1 && (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-2 gap-1">
|
||||||
|
<FormItem
|
||||||
|
label="Title (En)"
|
||||||
|
invalid={errors.languageTextTitleEn && touched.languageTextTitleEn}
|
||||||
|
errorMessage={errors.languageTextTitleEn}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextTitleEn"
|
||||||
|
placeholder="Title (En)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label="Title (Tr)"
|
||||||
|
invalid={errors.languageTextTitleTr && touched.languageTextTitleTr}
|
||||||
|
errorMessage={errors.languageTextTitleTr}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextTitleTr"
|
||||||
|
placeholder="Title (Tr)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-1">
|
||||||
|
<FormItem
|
||||||
|
label="Description (En)"
|
||||||
|
invalid={errors.languageTextDescEn && touched.languageTextDescEn}
|
||||||
|
errorMessage={errors.languageTextDescEn}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextDescEn"
|
||||||
|
placeholder="Description (En)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem
|
||||||
|
label="Description (Tr)"
|
||||||
|
invalid={errors.languageTextDescTr && touched.languageTextDescTr}
|
||||||
|
errorMessage={errors.languageTextDescTr}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="languageTextDescTr"
|
||||||
|
placeholder="Description (Tr)"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-1">
|
||||||
|
<FormItem
|
||||||
|
label="Data Source Code"
|
||||||
|
invalid={errors.dataSourceCode && touched.dataSourceCode}
|
||||||
|
errorMessage={errors.dataSourceCode}
|
||||||
|
>
|
||||||
|
<Field type="text" autoComplete="off" name="dataSourceCode">
|
||||||
|
{({ field, form }: FieldProps<string>) => (
|
||||||
|
<Select
|
||||||
|
componentAs={CreatableSelect}
|
||||||
|
field={field}
|
||||||
|
form={form}
|
||||||
|
placeholder="Data Source Code"
|
||||||
|
isClearable={true}
|
||||||
|
isLoading={isLoadingDataSource}
|
||||||
|
options={dataSourceList}
|
||||||
|
value={
|
||||||
|
values.dataSourceCode
|
||||||
|
? (dataSourceList?.find(
|
||||||
|
(o) => o.value === values.dataSourceCode,
|
||||||
|
) ?? {
|
||||||
|
label: values.dataSourceCode,
|
||||||
|
value: values.dataSourceCode,
|
||||||
|
})
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
onChange={(option) => {
|
||||||
|
form.setFieldValue(field.name, option?.value)
|
||||||
|
setIsDataSourceNew(
|
||||||
|
!!option?.value &&
|
||||||
|
!dataSourceList.some((a) => a.value === option?.value),
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
{isDataSourceNew && (
|
||||||
|
<FormItem
|
||||||
|
label="Connection String"
|
||||||
|
invalid={
|
||||||
|
errors.dataSourceConnectionString && touched.dataSourceConnectionString
|
||||||
|
}
|
||||||
|
errorMessage={errors.dataSourceConnectionString}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="text"
|
||||||
|
autoComplete="off"
|
||||||
|
name="dataSourceConnectionString"
|
||||||
|
placeholder="Connection String"
|
||||||
|
component={Input}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
</Field>
|
</div>
|
||||||
</FormItem>
|
|
||||||
</div>
|
<div className="grid grid-cols-2 gap-1">
|
||||||
<div className="grid grid-cols-2 gap-1">
|
<FormItem
|
||||||
<FormItem
|
label="Select Command Type"
|
||||||
label="Menu Text (En)"
|
invalid={errors.selectCommandType && touched.selectCommandType}
|
||||||
invalid={errors.languageTextMenuEn && touched.languageTextMenuEn}
|
errorMessage={errors.selectCommandType}
|
||||||
errorMessage={errors.languageTextMenuEn}
|
asterisk={true}
|
||||||
asterisk={true}
|
>
|
||||||
>
|
<Field type="text" autoComplete="off" name="selectCommandType">
|
||||||
<Field
|
{({ field, form }: FieldProps<SelectCommandTypeEnum>) => (
|
||||||
type="text"
|
<Select
|
||||||
autoComplete="off"
|
field={field}
|
||||||
name="languageTextMenuEn"
|
form={form}
|
||||||
placeholder="Menu Text (En)"
|
options={selectCommandTypeOptions}
|
||||||
component={Input}
|
value={selectCommandTypeOptions.find(
|
||||||
/>
|
(o: any) => o.value === field.value,
|
||||||
</FormItem>
|
)}
|
||||||
<FormItem
|
onChange={(o) => form.setFieldValue(field.name, o?.value)}
|
||||||
label="Menu Text (Tr)"
|
/>
|
||||||
invalid={errors.languageTextMenuTr && touched.languageTextMenuTr}
|
)}
|
||||||
errorMessage={errors.languageTextMenuTr}
|
</Field>
|
||||||
asterisk={true}
|
</FormItem>
|
||||||
>
|
|
||||||
<Field
|
<FormItem
|
||||||
type="text"
|
label="Select Command"
|
||||||
autoComplete="off"
|
invalid={errors.selectCommand && touched.selectCommand}
|
||||||
name="languageTextMenuTr"
|
errorMessage={errors.selectCommand}
|
||||||
placeholder="Menu Text (Tr)"
|
asterisk={true}
|
||||||
component={Input}
|
>
|
||||||
/>
|
<Field
|
||||||
</FormItem>
|
type="text"
|
||||||
</div>
|
autoComplete="off"
|
||||||
<div className="grid grid-cols-2 gap-1">
|
name="selectCommand"
|
||||||
<FormItem
|
placeholder="Select Command"
|
||||||
label="Title (En)"
|
component={Input}
|
||||||
invalid={errors.languageTextTitleEn && touched.languageTextTitleEn}
|
/>
|
||||||
errorMessage={errors.languageTextTitleEn}
|
</FormItem>
|
||||||
asterisk={true}
|
</div>
|
||||||
>
|
|
||||||
<Field
|
<div className="grid grid-cols-2 gap-1">
|
||||||
type="text"
|
<FormItem
|
||||||
autoComplete="off"
|
label="Key Field Name"
|
||||||
name="languageTextTitleEn"
|
invalid={errors.keyFieldName && touched.keyFieldName}
|
||||||
placeholder="Title (En)"
|
errorMessage={errors.keyFieldName}
|
||||||
component={Input}
|
asterisk={true}
|
||||||
/>
|
>
|
||||||
</FormItem>
|
<Field
|
||||||
<FormItem
|
type="text"
|
||||||
label="Title (Tr)"
|
autoComplete="off"
|
||||||
invalid={errors.languageTextTitleTr && touched.languageTextTitleTr}
|
name="keyFieldName"
|
||||||
errorMessage={errors.languageTextTitleTr}
|
placeholder="Key Field Name"
|
||||||
asterisk={true}
|
component={Input}
|
||||||
>
|
/>
|
||||||
<Field
|
</FormItem>
|
||||||
type="text"
|
|
||||||
autoComplete="off"
|
<FormItem
|
||||||
name="languageTextTitleTr"
|
label="Key Field Db Source Type"
|
||||||
placeholder="Title (Tr)"
|
invalid={errors.keyFieldDbSourceType && touched.keyFieldDbSourceType}
|
||||||
component={Input}
|
errorMessage={errors.keyFieldDbSourceType}
|
||||||
/>
|
asterisk={true}
|
||||||
</FormItem>
|
>
|
||||||
</div>
|
<Field type="text" autoComplete="off" name="keyFieldDbSourceType">
|
||||||
<div className="grid grid-cols-2 gap-1">
|
{({ field, form }: FieldProps<DbTypeEnum>) => (
|
||||||
<FormItem
|
<Select
|
||||||
label="Description (En)"
|
field={field}
|
||||||
invalid={errors.languageTextDescEn && touched.languageTextDescEn}
|
form={form}
|
||||||
errorMessage={errors.languageTextDescEn}
|
options={dbSourceTypeOptions}
|
||||||
asterisk={true}
|
value={dbSourceTypeOptions?.filter(
|
||||||
>
|
(o: any) => o.value === values.keyFieldDbSourceType,
|
||||||
<Field
|
)}
|
||||||
type="text"
|
onChange={(o) => form.setFieldValue(field.name, o?.value)}
|
||||||
autoComplete="off"
|
/>
|
||||||
name="languageTextDescEn"
|
)}
|
||||||
placeholder="Description (En)"
|
</Field>
|
||||||
component={Input}
|
</FormItem>
|
||||||
/>
|
</div>
|
||||||
</FormItem>
|
|
||||||
<FormItem
|
<div className="flex gap-2 mt-4">
|
||||||
label="Description (Tr)"
|
<Button block variant="default" type="button" onClick={handleBack}>
|
||||||
invalid={errors.languageTextDescTr && touched.languageTextDescTr}
|
{translate('::Back') || 'Back'}
|
||||||
errorMessage={errors.languageTextDescTr}
|
</Button>
|
||||||
asterisk={true}
|
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||||||
>
|
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||||
<Field
|
</Button>
|
||||||
type="text"
|
</div>
|
||||||
autoComplete="off"
|
</>
|
||||||
name="languageTextDescTr"
|
)}
|
||||||
placeholder="Description (Tr)"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
</FormItem>
|
|
||||||
</div>
|
|
||||||
<Button block className="mt-4" variant="solid" loading={isSubmitting} type="submit">
|
|
||||||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
|
||||||
</Button>
|
|
||||||
</FormContainer>
|
</FormContainer>
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue