ListForm SubFormDialog güncellemeleri

ui/src/services/admin/list-form.service.ts

@@ -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',

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx

@@ -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: '',
+                                  })
                                 }}
                               />
                             )}

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx

@@ -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}
                       >