ListFormEdit database AddField selectBox hale getirildi.
This commit is contained in:
parent
36546d0c2d
commit
6c669d4c14
3 changed files with 37 additions and 11 deletions
|
|
@ -384,7 +384,7 @@ const FormEdit = () => {
|
|||
/>
|
||||
</TabContent>
|
||||
<TabContent value="database" className="px-2">
|
||||
<FormTabDatabase onSubmit={onSubmit} />
|
||||
<FormTabDatabase selectCommandColumns={columns} onSubmit={onSubmit} />
|
||||
</TabContent>
|
||||
<TabContent value="permissions" className="px-2">
|
||||
<FormTabPermissions onSubmit={onSubmit} />
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Tabs } from '@/components/ui'
|
|||
import TabContent from '@/components/ui/Tabs/TabContent'
|
||||
import TabList from '@/components/ui/Tabs/TabList'
|
||||
import TabNav from '@/components/ui/Tabs/TabNav'
|
||||
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { useState } from 'react'
|
||||
import { FormEditProps } from './FormEdit'
|
||||
|
|
@ -14,7 +15,7 @@ import FormTabDatabaseUpdate from './FormTabDatabaseUpdate'
|
|||
import JsonRowOpDialogDatabase from './json-row-operations/JsonRowOpDialogDatabase'
|
||||
import { JsonRowDialogData } from './json-row-operations/types'
|
||||
|
||||
function FormTabDatabase(props: FormEditProps) {
|
||||
function FormTabDatabase(props: FormEditProps & { selectCommandColumns: DatabaseColumnDto[] }) {
|
||||
const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
|
||||
const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
|
||||
const { translate } = useLocalization()
|
||||
|
|
@ -76,6 +77,7 @@ function FormTabDatabase(props: FormEditProps) {
|
|||
setIsOpen={setIsJsonRowOpDialogOpen}
|
||||
data={jsonRowOpModalData}
|
||||
setData={setJsonRowOpModalData}
|
||||
selectCommandColumns={props.selectCommandColumns}
|
||||
/>
|
||||
</Container>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ import {
|
|||
} from '@/components/ui'
|
||||
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
||||
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
|
||||
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
|
||||
import { useStoreActions } from '@/store'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||
import { Dispatch, SetStateAction } from 'react'
|
||||
import { object, string } from 'yup'
|
||||
import { customValueTypeOptions, dbSourceTypeOptions } from '../options'
|
||||
import CreatableSelect from 'react-select/creatable'
|
||||
import { customValueTypeOptions, dbSourceTypeOptions, sqlDataTypeToDbType } from '../options'
|
||||
import { JsonRowDialogData } from './types'
|
||||
import {
|
||||
deleteListFormJsonRow,
|
||||
|
|
@ -38,11 +40,13 @@ function JsonRowOpDialogDatabase({
|
|||
setIsOpen,
|
||||
data,
|
||||
setData,
|
||||
selectCommandColumns,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>
|
||||
data: JsonRowDialogData | undefined
|
||||
setData: Dispatch<SetStateAction<JsonRowDialogData | undefined>>
|
||||
selectCommandColumns: DatabaseColumnDto[]
|
||||
}) {
|
||||
const { setJsonValue } = useStoreActions((a) => a.admin.lists)
|
||||
const { translate } = useLocalization()
|
||||
|
|
@ -152,14 +156,34 @@ function JsonRowOpDialogDatabase({
|
|||
invalid={errors.fieldName && touched.fieldName}
|
||||
errorMessage={errors.fieldName}
|
||||
>
|
||||
<Field
|
||||
{/* Sorgu (Query) tipli Select Command'in kolonlari katalogdan okunamaz ve
|
||||
tabloda olmayan bir parametre adi da yazilabilmeli; liste bu yuzden kisitlamaz. */}
|
||||
<Field name="fieldName">
|
||||
{({ field, form }: FieldProps<string>) => (
|
||||
<Select
|
||||
autoFocus={true}
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
name="fieldName"
|
||||
isClearable={true}
|
||||
componentAs={CreatableSelect}
|
||||
field={field}
|
||||
form={form}
|
||||
placeholder={translate('::App.ListFormFieldEdit.FieldName')}
|
||||
component={Input}
|
||||
options={selectCommandColumns.map((column) => ({
|
||||
value: column.columnName,
|
||||
label: `${column.columnName} (${column.dataType})`,
|
||||
}))}
|
||||
value={field.value ? { value: field.value, label: field.value } : null}
|
||||
onChange={(option: any) => {
|
||||
form.setFieldValue(field.name, option?.value ?? '')
|
||||
const column = selectCommandColumns.find(
|
||||
(c) => c.columnName === option?.value,
|
||||
)
|
||||
if (column) {
|
||||
form.setFieldValue('fieldDbType', sqlDataTypeToDbType(column.dataType))
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={translate('::App.Listform.ListformField.ValueType')}
|
||||
|
|
|
|||
Loading…
Reference in a new issue