ListForm SubFormDialog güncellemeleri
This commit is contained in:
Sedat Öztürk
parent
84b9f65107
commit
96cd6dfd80
3 changed files with 174 additions and 25 deletions
|
|
@ -1,7 +1,15 @@
|
|||
import { ListFormJsonRowDto } from '../../proxy/admin/list-form/models'
|
||||
import { PagedAndSortedResultRequestDto, PagedResultDto } from '../../proxy'
|
||||
import { FieldsDefaultValueDto, GridOptionsEditDto } from '../../proxy/form/models'
|
||||
import apiService from '../api.service'
|
||||
|
||||
export const getListForms = (input: PagedAndSortedResultRequestDto) =>
|
||||
apiService.fetchData<PagedResultDto<GridOptionsEditDto>>({
|
||||
method: 'GET',
|
||||
url: `/api/admin/list-forms`,
|
||||
params: input,
|
||||
})
|
||||
|
||||
export const getListFormByCode = (listFormCode: string) =>
|
||||
apiService.fetchData<GridOptionsEditDto>({
|
||||
method: 'GET',
|
||||
|
|
|
|||
|
|
@ -10,21 +10,24 @@ import {
|
|||
} from '@/components/ui'
|
||||
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
||||
import { SelectBoxOption } from '@/types/shared'
|
||||
import { useStoreActions } from '@/store'
|
||||
import { useStoreActions, useStoreState } from '@/store'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Field, FieldArray, FieldProps, Form, Formik } from 'formik'
|
||||
import { Dispatch, SetStateAction } from 'react'
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
||||
import { FaCalendarPlus, FaCalendarMinus } from 'react-icons/fa'
|
||||
import { boolean, object, string } from 'yup'
|
||||
import { dbSourceTypeOptions, tabTypeOptions } from '../options'
|
||||
import { JsonRowDialogData } from './types'
|
||||
import {
|
||||
deleteListFormJsonRow,
|
||||
getListForms,
|
||||
getListFormJsonRow,
|
||||
postListFormJsonRow,
|
||||
putListFormJsonRow,
|
||||
} from '@/services/admin/list-form.service'
|
||||
import { SubFormDto, SubFormRelationDto } from '@/proxy/form/models'
|
||||
import { ColumnFormatEditDto } from '@/proxy/admin/list-form-field/models'
|
||||
import { getListFormFields } from '@/services/admin/list-form-field.service'
|
||||
|
||||
const schema = object().shape({
|
||||
tabTitle: string().required(),
|
||||
|
|
@ -45,7 +48,87 @@ function JsonRowOpDialogSubForm({
|
|||
setData: Dispatch<SetStateAction<JsonRowDialogData | undefined>>
|
||||
}) {
|
||||
const { setJsonValue } = useStoreActions((a) => a.admin.lists)
|
||||
const listFormValues = useStoreState((s) => s.admin.lists.values)
|
||||
const { translate } = useLocalization()
|
||||
const [listFormOptions, setListFormOptions] = useState<SelectBoxOption[]>([])
|
||||
const [parentFields, setParentFields] = useState<ColumnFormatEditDto[]>([])
|
||||
const [childFields, setChildFields] = useState<ColumnFormatEditDto[]>([])
|
||||
const [isLoadingListForms, setIsLoadingListForms] = useState(false)
|
||||
const [isLoadingChildFields, setIsLoadingChildFields] = useState(false)
|
||||
|
||||
const parentFieldOptions = parentFields.map((field) => ({
|
||||
value: field.fieldName,
|
||||
label: `${field.fieldName} (${dbSourceTypeOptions.find((option) => option.value === field.sourceDbType)?.label ?? field.sourceDbType})`,
|
||||
}))
|
||||
|
||||
const childFieldOptions = childFields.map((field) => ({
|
||||
value: field.fieldName,
|
||||
label: field.fieldName,
|
||||
}))
|
||||
|
||||
const loadChildFields = async (listFormCode?: string) => {
|
||||
if (!listFormCode) {
|
||||
setChildFields([])
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoadingChildFields(true)
|
||||
try {
|
||||
const resp = await getListFormFields({
|
||||
listFormCode,
|
||||
sorting: 'ListOrderNo',
|
||||
maxResultCount: 1000,
|
||||
})
|
||||
setChildFields(resp.data?.items ?? [])
|
||||
} catch {
|
||||
setChildFields([])
|
||||
} finally {
|
||||
setIsLoadingChildFields(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !listFormValues?.listFormCode) {
|
||||
return
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
setIsLoadingListForms(true)
|
||||
try {
|
||||
const [listFormsResp, parentFieldsResp] = await Promise.all([
|
||||
getListForms({ sorting: 'ListFormCode', maxResultCount: 1000 }),
|
||||
getListFormFields({
|
||||
listFormCode: listFormValues.listFormCode!,
|
||||
sorting: 'ListOrderNo',
|
||||
maxResultCount: 1000,
|
||||
}),
|
||||
])
|
||||
|
||||
setListFormOptions(
|
||||
(listFormsResp.data?.items ?? [])
|
||||
.filter((item) => item.listFormCode)
|
||||
.map((item) => ({
|
||||
value: item.listFormCode,
|
||||
label: `${item.listFormCode}${item.title ? ` - ${translate(`::${item.title}`)}` : ''}`,
|
||||
})),
|
||||
)
|
||||
setParentFields(parentFieldsResp.data?.items ?? [])
|
||||
} catch {
|
||||
setListFormOptions([])
|
||||
setParentFields([])
|
||||
} finally {
|
||||
setIsLoadingListForms(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadData()
|
||||
}, [isOpen, listFormValues?.listFormCode])
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadChildFields(data?.subFormValues?.code)
|
||||
}
|
||||
}, [isOpen, data?.subFormValues?.code])
|
||||
|
||||
const handleClose = async (e?: any) => {
|
||||
if (e) {
|
||||
|
|
@ -76,7 +159,7 @@ function JsonRowOpDialogSubForm({
|
|||
onRequestClose={handleClose}
|
||||
>
|
||||
{(data.operation === 'create' || data.operation === 'update') && (
|
||||
<Formik
|
||||
<Formik
|
||||
initialValues={
|
||||
data.subFormValues ?? {
|
||||
tabTitle: '',
|
||||
|
|
@ -142,6 +225,32 @@ function JsonRowOpDialogSubForm({
|
|||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Code"
|
||||
invalid={errors.code && touched.code}
|
||||
errorMessage={errors.code}
|
||||
>
|
||||
<Field type="text" autoComplete="off" name="code" placeholder="Code">
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
isLoading={isLoadingListForms}
|
||||
options={listFormOptions}
|
||||
value={listFormOptions.find(
|
||||
(option) => option.value === values.code,
|
||||
)}
|
||||
onChange={(option) => {
|
||||
form.setFieldValue(field.name, option?.value ?? '')
|
||||
form.setFieldValue('relation', [])
|
||||
loadChildFields(option?.value)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Tab Type"
|
||||
invalid={errors.tabType && touched.tabType}
|
||||
|
|
@ -163,20 +272,6 @@ function JsonRowOpDialogSubForm({
|
|||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Code"
|
||||
invalid={errors.code && touched.code}
|
||||
errorMessage={errors.code}
|
||||
>
|
||||
<Field
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name="code"
|
||||
placeholder="Code"
|
||||
component={Input}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="isRefresh"
|
||||
invalid={errors.isRefresh && touched.isRefresh}
|
||||
|
|
@ -204,9 +299,31 @@ function JsonRowOpDialogSubForm({
|
|||
type="text"
|
||||
autoComplete="off"
|
||||
name={`relation.${index}.parentFieldName`}
|
||||
component={Input}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SubFormsRelation.ParentFieldName')}
|
||||
/>
|
||||
>
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
options={parentFieldOptions}
|
||||
value={parentFieldOptions.find(
|
||||
(option) => option.value === item?.parentFieldName,
|
||||
)}
|
||||
onChange={(option) => {
|
||||
const selectedField = parentFields.find(
|
||||
(parentField) => parentField.fieldName === option?.value,
|
||||
)
|
||||
|
||||
form.setFieldValue(field.name, option?.value ?? '')
|
||||
form.setFieldValue(
|
||||
`relation.${index}.dbType`,
|
||||
selectedField?.sourceDbType ?? '',
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="w-4/12 ml-2">
|
||||
|
|
@ -214,9 +331,24 @@ function JsonRowOpDialogSubForm({
|
|||
type="text"
|
||||
autoComplete="off"
|
||||
name={`relation.${index}.childFieldName`}
|
||||
component={Input}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SubFormsRelation.ChildFieldName')}
|
||||
/>
|
||||
>
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
isLoading={isLoadingChildFields}
|
||||
options={childFieldOptions}
|
||||
value={childFieldOptions.find(
|
||||
(option) => option.value === item?.childFieldName,
|
||||
)}
|
||||
onChange={(option) =>
|
||||
form.setFieldValue(field.name, option?.value ?? '')
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="w-3/12 ml-2">
|
||||
|
|
@ -231,6 +363,7 @@ function JsonRowOpDialogSubForm({
|
|||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
isDisabled={true}
|
||||
options={dbSourceTypeOptions}
|
||||
value={dbSourceTypeOptions?.find(
|
||||
(option: any) =>
|
||||
|
|
@ -264,7 +397,11 @@ function JsonRowOpDialogSubForm({
|
|||
title="Add"
|
||||
icon={<FaCalendarPlus />}
|
||||
onClick={() => {
|
||||
arrayHelpers.insert(index + 1, '')
|
||||
arrayHelpers.insert(index + 1, {
|
||||
parentFieldName: '',
|
||||
childFieldName: '',
|
||||
dbType: '',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -279,7 +416,11 @@ function JsonRowOpDialogSubForm({
|
|||
title="Add"
|
||||
icon={<FaCalendarPlus />}
|
||||
onClick={() => {
|
||||
arrayHelpers.push('')
|
||||
arrayHelpers.push({
|
||||
parentFieldName: '',
|
||||
childFieldName: '',
|
||||
dbType: '',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ function JsonRowOpDialogWidget({
|
|||
<div className="flex-1 overflow-y-auto p-1">
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
<FormItem
|
||||
label="Column Gap (Sütun Boşluğu)"
|
||||
label="Column Gap"
|
||||
invalid={errors.colGap && touched.colGap}
|
||||
errorMessage={errors.colGap}
|
||||
>
|
||||
|
|
@ -156,7 +156,7 @@ function JsonRowOpDialogWidget({
|
|||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Column Span (Sütun Genişliği)"
|
||||
label="Column Span"
|
||||
invalid={errors.colSpan && touched.colSpan}
|
||||
errorMessage={errors.colSpan}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue