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>
|
||||||
<TabContent value="database" className="px-2">
|
<TabContent value="database" className="px-2">
|
||||||
<FormTabDatabase onSubmit={onSubmit} />
|
<FormTabDatabase selectCommandColumns={columns} onSubmit={onSubmit} />
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent value="permissions" className="px-2">
|
<TabContent value="permissions" className="px-2">
|
||||||
<FormTabPermissions onSubmit={onSubmit} />
|
<FormTabPermissions onSubmit={onSubmit} />
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { Tabs } from '@/components/ui'
|
||||||
import TabContent from '@/components/ui/Tabs/TabContent'
|
import TabContent from '@/components/ui/Tabs/TabContent'
|
||||||
import TabList from '@/components/ui/Tabs/TabList'
|
import TabList from '@/components/ui/Tabs/TabList'
|
||||||
import TabNav from '@/components/ui/Tabs/TabNav'
|
import TabNav from '@/components/ui/Tabs/TabNav'
|
||||||
|
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { FormEditProps } from './FormEdit'
|
import { FormEditProps } from './FormEdit'
|
||||||
|
|
@ -14,7 +15,7 @@ import FormTabDatabaseUpdate from './FormTabDatabaseUpdate'
|
||||||
import JsonRowOpDialogDatabase from './json-row-operations/JsonRowOpDialogDatabase'
|
import JsonRowOpDialogDatabase from './json-row-operations/JsonRowOpDialogDatabase'
|
||||||
import { JsonRowDialogData } from './json-row-operations/types'
|
import { JsonRowDialogData } from './json-row-operations/types'
|
||||||
|
|
||||||
function FormTabDatabase(props: FormEditProps) {
|
function FormTabDatabase(props: FormEditProps & { selectCommandColumns: DatabaseColumnDto[] }) {
|
||||||
const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
|
const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
|
||||||
const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
|
const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
|
|
@ -76,6 +77,7 @@ function FormTabDatabase(props: FormEditProps) {
|
||||||
setIsOpen={setIsJsonRowOpDialogOpen}
|
setIsOpen={setIsJsonRowOpDialogOpen}
|
||||||
data={jsonRowOpModalData}
|
data={jsonRowOpModalData}
|
||||||
setData={setJsonRowOpModalData}
|
setData={setJsonRowOpModalData}
|
||||||
|
selectCommandColumns={props.selectCommandColumns}
|
||||||
/>
|
/>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,14 @@ import {
|
||||||
} from '@/components/ui'
|
} from '@/components/ui'
|
||||||
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
|
||||||
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
|
import { ListFormEditTabs } from '@/proxy/admin/list-form/options'
|
||||||
|
import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
|
||||||
import { useStoreActions } from '@/store'
|
import { useStoreActions } from '@/store'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||||
import { Dispatch, SetStateAction } from 'react'
|
import { Dispatch, SetStateAction } from 'react'
|
||||||
import { object, string } from 'yup'
|
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 { JsonRowDialogData } from './types'
|
||||||
import {
|
import {
|
||||||
deleteListFormJsonRow,
|
deleteListFormJsonRow,
|
||||||
|
|
@ -38,11 +40,13 @@ function JsonRowOpDialogDatabase({
|
||||||
setIsOpen,
|
setIsOpen,
|
||||||
data,
|
data,
|
||||||
setData,
|
setData,
|
||||||
|
selectCommandColumns,
|
||||||
}: {
|
}: {
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
setIsOpen: Dispatch<SetStateAction<boolean>>
|
setIsOpen: Dispatch<SetStateAction<boolean>>
|
||||||
data: JsonRowDialogData | undefined
|
data: JsonRowDialogData | undefined
|
||||||
setData: Dispatch<SetStateAction<JsonRowDialogData | undefined>>
|
setData: Dispatch<SetStateAction<JsonRowDialogData | undefined>>
|
||||||
|
selectCommandColumns: DatabaseColumnDto[]
|
||||||
}) {
|
}) {
|
||||||
const { setJsonValue } = useStoreActions((a) => a.admin.lists)
|
const { setJsonValue } = useStoreActions((a) => a.admin.lists)
|
||||||
const { translate } = useLocalization()
|
const { translate } = useLocalization()
|
||||||
|
|
@ -152,14 +156,34 @@ function JsonRowOpDialogDatabase({
|
||||||
invalid={errors.fieldName && touched.fieldName}
|
invalid={errors.fieldName && touched.fieldName}
|
||||||
errorMessage={errors.fieldName}
|
errorMessage={errors.fieldName}
|
||||||
>
|
>
|
||||||
<Field
|
{/* Sorgu (Query) tipli Select Command'in kolonlari katalogdan okunamaz ve
|
||||||
autoFocus={true}
|
tabloda olmayan bir parametre adi da yazilabilmeli; liste bu yuzden kisitlamaz. */}
|
||||||
type="text"
|
<Field name="fieldName">
|
||||||
autoComplete="off"
|
{({ field, form }: FieldProps<string>) => (
|
||||||
name="fieldName"
|
<Select
|
||||||
placeholder={translate('::App.ListFormFieldEdit.FieldName')}
|
autoFocus={true}
|
||||||
component={Input}
|
isClearable={true}
|
||||||
/>
|
componentAs={CreatableSelect}
|
||||||
|
field={field}
|
||||||
|
form={form}
|
||||||
|
placeholder={translate('::App.ListFormFieldEdit.FieldName')}
|
||||||
|
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>
|
||||||
<FormItem
|
<FormItem
|
||||||
label={translate('::App.Listform.ListformField.ValueType')}
|
label={translate('::App.Listform.ListformField.ValueType')}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue