sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

listForm komponent style güncellemeleri

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-06-25 10:30:07 +03:00
parent b1bd573905
commit 876844b078
29 changed files with 1949 additions and 1773 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

276
ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
View file

@ -163,145 +163,159 @@ function ChartTabAxis(props: FormEditProps) {
/> />
</TabContent> </TabContent>
<TabContent value="axis_argument"> <TabContent value="axis_argument">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<Card className="my-2" header="General"> <Card className="my-2 col-span-2" header="General">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label="Visible" <div>
invalid={ <FormItem
!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible) label="Visible"
} invalid={
errorMessage={errors.argumentAxisDto?.visible} !!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
> }
<Field name="argumentAxisDto.visible" component={Checkbox} /> errorMessage={errors.argumentAxisDto?.visible}
</FormItem> >
<Field name="argumentAxisDto.visible" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Workdays Only" label="Workdays Only"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.workdaysOnly && errors.argumentAxisDto?.workdaysOnly &&
touched.argumentAxisDto?.workdaysOnly touched.argumentAxisDto?.workdaysOnly
) )
} }
errorMessage={errors.argumentAxisDto?.workdaysOnly} errorMessage={errors.argumentAxisDto?.workdaysOnly}
> >
<Field name="argumentAxisDto.workdaysOnly" component={Checkbox} /> <Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Title" label="Title"
invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)} invalid={
errorMessage={errors.argumentAxisDto?.title} !!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)
> }
<Field type="text" name="argumentAxisDto.title" component={Input} /> errorMessage={errors.argumentAxisDto?.title}
</FormItem> >
<Field type="text" name="argumentAxisDto.title" component={Input} />
</FormItem>
<FormItem <FormItem
label="Hover Mode" label="Hover Mode"
invalid={ invalid={
!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode) !!(
} errors.argumentAxisDto?.hoverMode &&
errorMessage={errors.argumentAxisDto?.hoverMode} touched.argumentAxisDto?.hoverMode
> )
<Field type="text" name="argumentAxisDto.hoverMode"> }
{({ field, form }: FieldProps<SelectBoxOption>) => ( errorMessage={errors.argumentAxisDto?.hoverMode}
<Select >
field={field} <Field type="text" name="argumentAxisDto.hoverMode">
form={form} {({ field, form }: FieldProps<SelectBoxOption>) => (
options={chartArgumentAxisHoverModeListOptions} <Select
isClearable={true} field={field}
value={chartArgumentAxisHoverModeListOptions.filter( form={form}
(option) => option.value === values.argumentAxisDto.hoverMode, options={chartArgumentAxisHoverModeListOptions}
isClearable={true}
value={chartArgumentAxisHoverModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.hoverMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)} </div>
</Field> <div>
</FormItem> <FormItem
label="Argument Type"
<FormItem invalid={
label="Argument Type" !!(
invalid={ errors.argumentAxisDto?.argumentType &&
!!( touched.argumentAxisDto?.argumentType
errors.argumentAxisDto?.argumentType && )
touched.argumentAxisDto?.argumentType }
) errorMessage={errors.argumentAxisDto?.argumentType}
} >
errorMessage={errors.argumentAxisDto?.argumentType} <Field type="text" name="argumentAxisDto.argumentType">
> {({ field, form }: FieldProps<SelectBoxOption>) => (
<Field type="text" name="argumentAxisDto.argumentType"> <Select
{({ field, form }: FieldProps<SelectBoxOption>) => ( field={field}
<Select form={form}
field={field} options={chartArgumentAxisTypeListOptions}
form={form} isClearable={true}
options={chartArgumentAxisTypeListOptions} value={chartArgumentAxisTypeListOptions.filter(
isClearable={true} (option) => option.value === values.argumentAxisDto.argumentType,
value={chartArgumentAxisTypeListOptions.filter( )}
(option) => option.value === values.argumentAxisDto.argumentType, onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Position" label="Position"
invalid={ invalid={
!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position) !!(
} errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
errorMessage={errors.argumentAxisDto?.position} )
> }
<Field type="text" name="argumentAxisDto.position"> errorMessage={errors.argumentAxisDto?.position}
{({ field, form }: FieldProps<SelectBoxOption>) => ( >
<Select <Field type="text" name="argumentAxisDto.position">
field={field} {({ field, form }: FieldProps<SelectBoxOption>) => (
form={form} <Select
options={chartArgumentAxisPositionListOptions} field={field}
isClearable={true} form={form}
value={chartArgumentAxisPositionListOptions.filter( options={chartArgumentAxisPositionListOptions}
(option) => option.value === values.argumentAxisDto.position, isClearable={true}
value={chartArgumentAxisPositionListOptions.filter(
(option) => option.value === values.argumentAxisDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)} invalid={
errorMessage={errors.argumentAxisDto?.width} !!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)
> }
<Field type="number" name="argumentAxisDto.width" component={Input} /> errorMessage={errors.argumentAxisDto?.width}
</FormItem> >
<Field type="number" name="argumentAxisDto.width" component={Input} />
</FormItem>
<FormItem <FormItem
label="Aggregation Interval" label="Aggregation Interval"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.aggregationInterval && errors.argumentAxisDto?.aggregationInterval &&
touched.argumentAxisDto?.aggregationInterval touched.argumentAxisDto?.aggregationInterval
) )
} }
errorMessage={errors.argumentAxisDto?.aggregationInterval} errorMessage={errors.argumentAxisDto?.aggregationInterval}
> >
<Field type="text" name="argumentAxisDto.aggregationInterval"> <Field type="text" name="argumentAxisDto.aggregationInterval">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisIntervalListOptions} options={chartArgumentAxisIntervalListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisIntervalListOptions.filter( value={chartArgumentAxisIntervalListOptions.filter(
(option) => (option) =>
option.value === values.argumentAxisDto.aggregationInterval, option.value === values.argumentAxisDto.aggregationInterval,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)} </div>
</Field> </div>
</FormItem>
</Card> </Card>
<Card className="my-2" header="Grid"> <Card className="my-2" header="Grid">
@ -333,7 +347,7 @@ function ChartTabAxis(props: FormEditProps) {
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)} )}
@ -499,7 +513,7 @@ function ChartTabAxis(props: FormEditProps) {
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)} )}

256
ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
View file

@ -17,7 +17,11 @@ import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'fo
import { FormEditProps } from '../../listForm/edit/FormEdit' import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store' import { useStoreState } from '@/store/store'
import { ListFormEditTabs, themeOptions, tooltipFormatListOptions } from '@/proxy/admin/list-form/options' import {
ListFormEditTabs,
themeOptions,
tooltipFormatListOptions,
} from '@/proxy/admin/list-form/options'
import { object } from 'yup' import { object } from 'yup'
import { import {
chartPaletteOptions, chartPaletteOptions,
@ -95,7 +99,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)} )}
@ -326,128 +330,144 @@ function ChartTabCommonSettings(props: FormEditProps) {
</Card> </Card>
</TabContent> </TabContent>
<TabContent value="commonSettings_tooltip"> <TabContent value="commonSettings_tooltip">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
<Card className="my-2" header="General"> <Card className="my-2 col-span-2" header="General">
<FormItem <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
label="Enabled" <div>
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)} <FormItem
errorMessage={errors.tooltipDto?.enabled as string} label="Enabled"
> invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
<Field name="tooltipDto.keepLabels" component={Checkbox} /> errorMessage={errors.tooltipDto?.enabled as string}
</FormItem> >
<Field name="tooltipDto.keepLabels" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Shared" label="Shared"
invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)} invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
errorMessage={errors.tooltipDto?.shared as string} errorMessage={errors.tooltipDto?.shared as string}
> >
<Field name="tooltipDto.shared" component={Checkbox} /> <Field name="tooltipDto.shared" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Format" label="Format"
invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)} invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
errorMessage={errors.tooltipDto?.format} errorMessage={errors.tooltipDto?.format}
> >
<Field type="text" name="tooltipDto.format"> <Field type="text" name="tooltipDto.format">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={tooltipFormatListOptions} options={tooltipFormatListOptions}
isClearable={true} isClearable={true}
value={tooltipFormatListOptions.filter( value={tooltipFormatListOptions.filter(
(option) => option.value === values.tooltipDto.format, (option) => option.value === values.tooltipDto.format,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Location" label="Location"
invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)} invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
errorMessage={errors.tooltipDto?.location} errorMessage={errors.tooltipDto?.location}
> >
<Field type="text" name="tooltipDto.location"> <Field type="text" name="tooltipDto.location">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartTooltipLocationListOptions} options={chartTooltipLocationListOptions}
isClearable={true} isClearable={true}
value={chartTooltipLocationListOptions.filter( value={chartTooltipLocationListOptions.filter(
(option) => option.value === values.tooltipDto.location, (option) => option.value === values.tooltipDto.location,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
</FormItem>
</div>
<div>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument Format"
invalid={
!!(
errors.tooltipDto?.argumentFormat &&
touched.tooltipDto?.argumentFormat
)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={
!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom &&
touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field
type="number"
name="tooltipDto.paddingTopBottom"
component={Input}
/> />
)} </FormItem>
</Field>
</FormItem>
<FormItem <FormItem
label="Color" label="Padding Left/Right"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)} invalid={
errorMessage={errors.tooltipDto?.color} !!(
> errors.tooltipDto?.paddingLeftRight &&
<Field name="tooltipDto.color"> touched.tooltipDto?.paddingLeftRight
{({ field, form }: FieldProps) => ( )
<Input }
{...field} errorMessage={errors.tooltipDto?.paddingLeftRight}
type="color" >
className='!h-10 !p-0 !m-0 !border-0' <Field
onChange={(e) => form.setFieldValue(field.name, e.target.value)} type="number"
name="tooltipDto.paddingLeftRight"
component={Input}
/> />
)} </FormItem>
</Field> </div>
</FormItem> </div>
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={
!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom &&
touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.tooltipDto?.paddingLeftRight &&
touched.tooltipDto?.paddingLeftRight
)
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
</FormItem>
</Card> </Card>
<Card className="my-2" header="Font"> <Card className="my-2" header="Font">
@ -463,7 +483,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)} )}
@ -649,7 +669,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)} )}

534
ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
View file

@ -229,282 +229,296 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
</TabContent> </TabContent>
<TabContent value="series_common"> <TabContent value="series_common">
<Card className="my-2"> <Card className="my-2">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label="Visible" <div>
invalid={ <FormItem
!!( label="Visible"
errors.commonSeriesSettingsDto?.visible && invalid={
touched.commonSeriesSettingsDto?.visible !!(
) errors.commonSeriesSettingsDto?.visible &&
} touched.commonSeriesSettingsDto?.visible
errorMessage={errors.commonSeriesSettingsDto?.visible} )
> }
<Field name="commonSeriesSettingsDto.visible" component={Checkbox} /> errorMessage={errors.commonSeriesSettingsDto?.visible}
</FormItem> >
<Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Show In Legend" label="Show In Legend"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.showInLegend && errors.commonSeriesSettingsDto?.showInLegend &&
touched.commonSeriesSettingsDto?.showInLegend touched.commonSeriesSettingsDto?.showInLegend
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.showInLegend} errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
> >
<Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} /> <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Ignore Empty Points" label="Ignore Empty Points"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.ignoreEmptyPoints && errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
touched.commonSeriesSettingsDto?.ignoreEmptyPoints touched.commonSeriesSettingsDto?.ignoreEmptyPoints
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints} errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
> >
<Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} /> <Field
</FormItem> name="commonSeriesSettingsDto.ignoreEmptyPoints"
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label="Type" label="Type"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.type && errors.commonSeriesSettingsDto?.type &&
touched.commonSeriesSettingsDto?.type touched.commonSeriesSettingsDto?.type
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.type} errorMessage={errors.commonSeriesSettingsDto?.type}
> >
<Field type="text" name="commonSeriesSettingsDto.type"> <Field type="text" name="commonSeriesSettingsDto.type">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesTypeOptions} options={chartSeriesTypeOptions}
isClearable={true} isClearable={true}
value={chartSeriesTypeOptions.filter( value={chartSeriesTypeOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.type, (option) => option.value === values.commonSeriesSettingsDto.type,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Selection Mode" label="Selection Mode"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.selectionMode && errors.commonSeriesSettingsDto?.selectionMode &&
touched.commonSeriesSettingsDto?.selectionMode touched.commonSeriesSettingsDto?.selectionMode
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.selectionMode} errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
> >
<Field type="text" name="commonSeriesSettingsDto.selectionMode"> <Field type="text" name="commonSeriesSettingsDto.selectionMode">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesSelectionModeOptions} options={chartSeriesSelectionModeOptions}
isClearable={true} isClearable={true}
value={chartSeriesSelectionModeOptions.filter( value={chartSeriesSelectionModeOptions.filter(
(option) => (option) =>
option.value === values.commonSeriesSettingsDto.selectionMode, option.value === values.commonSeriesSettingsDto.selectionMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Argument Field" label="Argument Field"
invalid={ invalid={
errors.commonSeriesSettingsDto?.argumentField && errors.commonSeriesSettingsDto?.argumentField &&
touched.commonSeriesSettingsDto?.argumentField touched.commonSeriesSettingsDto?.argumentField
} }
errorMessage={errors.commonSeriesSettingsDto?.argumentField} errorMessage={errors.commonSeriesSettingsDto?.argumentField}
> >
<Field type="text" name="commonSeriesSettingsDto.argumentField"> <Field type="text" name="commonSeriesSettingsDto.argumentField">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
componentAs={CreatableSelect} componentAs={CreatableSelect}
field={field} field={field}
form={form} form={form}
isClearable={true} isClearable={true}
options={fieldList} options={fieldList}
value={fieldList.find( value={fieldList.find(
(option) => (option) =>
option.value === values.commonSeriesSettingsDto.argumentField, option.value === values.commonSeriesSettingsDto.argumentField,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
menuPlacement="auto"
maxMenuHeight={150}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
menuPlacement="auto" </FormItem>
maxMenuHeight={150}
/>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Value Field" label="Value Field"
invalid={ invalid={
errors.commonSeriesSettingsDto?.valueField && errors.commonSeriesSettingsDto?.valueField &&
touched.commonSeriesSettingsDto?.valueField touched.commonSeriesSettingsDto?.valueField
} }
errorMessage={errors.commonSeriesSettingsDto?.valueField} errorMessage={errors.commonSeriesSettingsDto?.valueField}
> >
<Field type="text" name="valueField"> <Field type="text" name="valueField">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
componentAs={CreatableSelect} componentAs={CreatableSelect}
field={field} field={field}
form={form} form={form}
isClearable={true} isClearable={true}
options={fieldList} options={fieldList}
value={fieldList.find( value={fieldList.find(
(option) => option.value === values.commonSeriesSettingsDto.valueField, (option) =>
option.value === values.commonSeriesSettingsDto.valueField,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
menuPlacement="auto"
maxMenuHeight={150}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
menuPlacement="auto" </FormItem>
maxMenuHeight={150} </div>
/> <div>
)} <FormItem
</Field> label="Axis"
</FormItem> invalid={
!!(
<FormItem errors.commonSeriesSettingsDto?.axis &&
label="Axis" touched.commonSeriesSettingsDto?.axis
invalid={ )
!!( }
errors.commonSeriesSettingsDto?.axis && errorMessage={errors.commonSeriesSettingsDto?.axis}
touched.commonSeriesSettingsDto?.axis >
) <Field type="text" name="commonSeriesSettingsDto.axis">
} {({ field, form }: FieldProps<SelectBoxOption>) => (
errorMessage={errors.commonSeriesSettingsDto?.axis} <Select
> field={field}
<Field type="text" name="commonSeriesSettingsDto.axis"> form={form}
{({ field, form }: FieldProps<SelectBoxOption>) => ( options={valueAxisList()}
<Select isClearable={true}
field={field} value={valueAxisList()?.find(
form={form} (option) => option.value === values.commonSeriesSettingsDto.axis,
options={valueAxisList()} )}
isClearable={true} onChange={(option) => form.setFieldValue(field.name, option?.value)}
value={valueAxisList()?.find( />
(option) => option.value === values.commonSeriesSettingsDto.axis,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Pane" label="Pane"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.pane && errors.commonSeriesSettingsDto?.pane &&
touched.commonSeriesSettingsDto?.pane touched.commonSeriesSettingsDto?.pane
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.pane} errorMessage={errors.commonSeriesSettingsDto?.pane}
> >
<Field type="text" name="commonSeriesSettingsDto.pane"> <Field type="text" name="commonSeriesSettingsDto.pane">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={valuePaneList()} options={valuePaneList()}
isClearable={true} isClearable={true}
value={valuePaneList()?.find( value={valuePaneList()?.find(
(option) => option.value === values.commonSeriesSettingsDto.pane, (option) => option.value === values.commonSeriesSettingsDto.pane,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.color && errors.commonSeriesSettingsDto?.color &&
touched.commonSeriesSettingsDto?.color touched.commonSeriesSettingsDto?.color
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.color} errorMessage={errors.commonSeriesSettingsDto?.color}
> >
<Field name="commonSeriesSettingsDto.color"> <Field name="commonSeriesSettingsDto.color">
{({ field, form }: FieldProps) => ( {({ field, form }: FieldProps) => (
<Input <Input
{...field} {...field}
type="color" type="color"
className='!h-10 !p-0 !m-0 !border-0' className="!h-10 !p-0 !m-0 !border-0"
onChange={(e) => form.setFieldValue(field.name, e.target.value)} onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/> />
)}
</Field>
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.commonSeriesSettingsDto?.cornerRadius &&
touched.commonSeriesSettingsDto?.cornerRadius
)
}
errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
>
<Field
type="number"
name="commonSeriesSettingsDto.cornerRadius"
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
!!(
errors.commonSeriesSettingsDto?.dashStyle &&
touched.commonSeriesSettingsDto?.dashStyle
)
}
errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
>
<Field type="text" name="commonSeriesSettingsDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Width" label="Corner Radius"
invalid={ invalid={
!!( !!(
errors.commonSeriesSettingsDto?.width && errors.commonSeriesSettingsDto?.cornerRadius &&
touched.commonSeriesSettingsDto?.width touched.commonSeriesSettingsDto?.cornerRadius
) )
} }
errorMessage={errors.commonSeriesSettingsDto?.width} errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
> >
<Field type="number" name="commonSeriesSettingsDto.width" component={Input} /> <Field
</FormItem> type="number"
name="commonSeriesSettingsDto.cornerRadius"
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
!!(
errors.commonSeriesSettingsDto?.dashStyle &&
touched.commonSeriesSettingsDto?.dashStyle
)
}
errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
>
<Field type="text" name="commonSeriesSettingsDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) =>
option.value === values.commonSeriesSettingsDto.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonSeriesSettingsDto?.width &&
touched.commonSeriesSettingsDto?.width
)
}
errorMessage={errors.commonSeriesSettingsDto?.width}
>
<Field
type="number"
name="commonSeriesSettingsDto.width"
component={Input}
/>
</FormItem>
</div>
</div>
</Card> </Card>
</TabContent> </TabContent>
</Tabs> </Tabs>

514
ui/src/views/admin/listForm/edit/FormTabColumns.tsx
View file

@ -29,7 +29,7 @@ function FormTabColumns(props: FormEditProps) {
} }
return ( return (
<Container className="grid xl:grid-cols-2"> <Container>
<Formik <Formik
initialValues={listFormValues} initialValues={listFormValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -40,253 +40,275 @@ function FormTabColumns(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => ( {({ touched, errors, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')} <div className="my-2">
invalid={ <FormItem
errors.columnOptionDto?.showColumnHeaders && label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
touched.columnOptionDto?.showColumnHeaders invalid={
} errors.columnOptionDto?.showColumnHeaders &&
errorMessage={errors.columnOptionDto?.showColumnHeaders} touched.columnOptionDto?.showColumnHeaders
> }
<Field errorMessage={errors.columnOptionDto?.showColumnHeaders}
name="columnOptionDto.showColumnHeaders" >
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')} <Field
component={Checkbox} name="columnOptionDto.showColumnHeaders"
/> placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
</FormItem> component={Checkbox}
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
invalid={
errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
}
errorMessage={errors.columnOptionDto?.showBorders}
>
<Field
name="columnOptionDto.showBorders"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
invalid={
errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
}
errorMessage={errors.columnOptionDto?.showRowLines}
>
<Field
name="columnOptionDto.showRowLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
invalid={
errors.columnOptionDto?.showColumnLines &&
touched.columnOptionDto?.showColumnLines
}
errorMessage={errors.columnOptionDto?.showColumnLines}
>
<Field
name="columnOptionDto.showColumnLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
invalid={
errors.columnOptionDto?.rowAlternationEnabled &&
touched.columnOptionDto?.rowAlternationEnabled
}
errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
>
<Field
name="columnOptionDto.rowAlternationEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
invalid={
errors.columnOptionDto?.allowColumnReordering &&
touched.columnOptionDto?.allowColumnReordering
}
errorMessage={errors.columnOptionDto?.allowColumnReordering}
>
<Field
name="columnOptionDto.allowColumnReordering"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
invalid={
errors.columnOptionDto?.columnAutoWidth &&
touched.columnOptionDto?.columnAutoWidth
}
errorMessage={errors.columnOptionDto?.columnAutoWidth}
>
<Field
name="columnOptionDto.columnAutoWidth"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
invalid={
errors.columnOptionDto?.columnFixingEnabled &&
touched.columnOptionDto?.columnFixingEnabled
}
errorMessage={errors.columnOptionDto?.columnFixingEnabled}
>
<Field
name="columnOptionDto.columnFixingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled}
errorMessage={errors.columnOptionDto?.rtlEnabled}
>
<Field
name="columnOptionDto.rtlEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.columnOptionDto?.columnChooserEnabled &&
touched.columnOptionDto?.columnChooserEnabled
}
errorMessage={errors.columnOptionDto?.columnChooserEnabled}
>
<Field
name="columnOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
invalid={
errors.columnOptionDto?.columnChooserMode &&
touched.columnOptionDto?.columnChooserMode
}
errorMessage={errors.columnOptionDto?.columnChooserMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnChooserMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
>
{({ field, form }: FieldProps<ColumnChooserMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnChooserModeOptions}
value={columnChooserModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnChooserMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
<FormItem invalid={
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')} errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
invalid={ }
errors.columnOptionDto?.allowColumnResizing && errorMessage={errors.columnOptionDto?.showBorders}
touched.columnOptionDto?.allowColumnResizing >
} <Field
errorMessage={errors.columnOptionDto?.allowColumnResizing} name="columnOptionDto.showBorders"
> placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
<Field component={Checkbox}
name="columnOptionDto.allowColumnResizing"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
invalid={
errors.columnOptionDto?.columnResizingMode &&
touched.columnOptionDto?.columnResizingMode
}
errorMessage={errors.columnOptionDto?.columnResizingMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnResizingMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
>
{({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnResizingModeOptions}
value={columnResizingModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnResizingMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
<FormItem invalid={
label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')} errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
invalid={ }
errors.columnOptionDto?.hoverStateEnabled && errorMessage={errors.columnOptionDto?.showRowLines}
touched.columnOptionDto?.hoverStateEnabled >
} <Field
errorMessage={errors.columnOptionDto?.hoverStateEnabled} name="columnOptionDto.showRowLines"
> placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
<Field component={Checkbox}
name="columnOptionDto.hoverStateEnabled" />
placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')} </FormItem>
component={Checkbox} <FormItem
/> label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
</FormItem> invalid={
<FormItem errors.columnOptionDto?.showColumnLines &&
label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')} touched.columnOptionDto?.showColumnLines
invalid={ }
errors.columnOptionDto?.columnHidingEnabled && errorMessage={errors.columnOptionDto?.showColumnLines}
touched.columnOptionDto?.columnHidingEnabled >
} <Field
errorMessage={errors.columnOptionDto?.columnHidingEnabled} name="columnOptionDto.showColumnLines"
> placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
<Field component={Checkbox}
name="columnOptionDto.columnHidingEnabled" />
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')} </FormItem>
component={Checkbox} <FormItem
/> label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
</FormItem> invalid={
<FormItem errors.columnOptionDto?.rowAlternationEnabled &&
label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')} touched.columnOptionDto?.rowAlternationEnabled
invalid={ }
errors.columnOptionDto?.focusedRowEnabled && errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
touched.columnOptionDto?.focusedRowEnabled >
} <Field
errorMessage={errors.columnOptionDto?.focusedRowEnabled} name="columnOptionDto.rowAlternationEnabled"
> placeholder={translate(
<Field '::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
name="columnOptionDto.focusedRowEnabled" )}
placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')} component={Checkbox}
component={Checkbox} />
/> </FormItem>
</FormItem> <FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
invalid={
errors.columnOptionDto?.allowColumnReordering &&
touched.columnOptionDto?.allowColumnReordering
}
errorMessage={errors.columnOptionDto?.allowColumnReordering}
>
<Field
name="columnOptionDto.allowColumnReordering"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnReordering',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
invalid={
errors.columnOptionDto?.columnAutoWidth &&
touched.columnOptionDto?.columnAutoWidth
}
errorMessage={errors.columnOptionDto?.columnAutoWidth}
>
<Field
name="columnOptionDto.columnAutoWidth"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
invalid={
errors.columnOptionDto?.columnFixingEnabled &&
touched.columnOptionDto?.columnFixingEnabled
}
errorMessage={errors.columnOptionDto?.columnFixingEnabled}
>
<Field
name="columnOptionDto.columnFixingEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
)}
component={Checkbox}
/>
</FormItem>
</div>
<div className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
invalid={
errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
}
errorMessage={errors.columnOptionDto?.rtlEnabled}
>
<Field
name="columnOptionDto.rtlEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.columnOptionDto?.columnChooserEnabled &&
touched.columnOptionDto?.columnChooserEnabled
}
errorMessage={errors.columnOptionDto?.columnChooserEnabled}
>
<Field
name="columnOptionDto.columnChooserEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
invalid={
errors.columnOptionDto?.columnChooserMode &&
touched.columnOptionDto?.columnChooserMode
}
errorMessage={errors.columnOptionDto?.columnChooserMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnChooserMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
>
{({ field, form }: FieldProps<ColumnChooserMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnChooserModeOptions}
value={columnChooserModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnChooserMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
invalid={
errors.columnOptionDto?.allowColumnResizing &&
touched.columnOptionDto?.allowColumnResizing
}
errorMessage={errors.columnOptionDto?.allowColumnResizing}
>
<Field
name="columnOptionDto.allowColumnResizing"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnResizing',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
invalid={
errors.columnOptionDto?.columnResizingMode &&
touched.columnOptionDto?.columnResizingMode
}
errorMessage={errors.columnOptionDto?.columnResizingMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnResizingMode"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnResizingMode',
)}
>
{({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnResizingModeOptions}
value={columnResizingModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnResizingMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
invalid={
errors.columnOptionDto?.hoverStateEnabled &&
touched.columnOptionDto?.hoverStateEnabled
}
errorMessage={errors.columnOptionDto?.hoverStateEnabled}
>
<Field
name="columnOptionDto.hoverStateEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
invalid={
errors.columnOptionDto?.columnHidingEnabled &&
touched.columnOptionDto?.columnHidingEnabled
}
errorMessage={errors.columnOptionDto?.columnHidingEnabled}
>
<Field
name="columnOptionDto.columnHidingEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
invalid={
errors.columnOptionDto?.focusedRowEnabled &&
touched.columnOptionDto?.focusedRowEnabled
}
errorMessage={errors.columnOptionDto?.focusedRowEnabled}
>
<Field
name="columnOptionDto.focusedRowEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
component={Checkbox}
/>
</FormItem>
</div>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2"> <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

6
ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
View file

@ -79,7 +79,7 @@ function FormTabDatabaseDelete({
placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -96,7 +96,7 @@ function FormTabDatabaseDelete({
)} )}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -111,7 +111,7 @@ function FormTabDatabaseDelete({
placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteAfterCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteAfterCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
</div> </div>

6
ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
View file

@ -78,7 +78,7 @@ function FormTabDatabaseInsert({
placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -95,7 +95,7 @@ function FormTabDatabaseInsert({
)} )}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -110,7 +110,7 @@ function FormTabDatabaseInsert({
placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertAfterCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertAfterCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
</div> </div>

6
ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
View file

@ -78,7 +78,7 @@ function FormTabDatabaseUpdate({
placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -95,7 +95,7 @@ function FormTabDatabaseUpdate({
)} )}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
@ -110,7 +110,7 @@ function FormTabDatabaseUpdate({
placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateAfterCommand')} placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateAfterCommand')}
component={Input} component={Input}
textArea={true} textArea={true}
rows={6} rows={4}
/> />
</FormItem> </FormItem>
</div> </div>

23
ui/src/views/admin/listForm/edit/FormTabDetails.tsx
View file

@ -223,18 +223,19 @@ function FormTabDetails(
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm}
errorMessage={errors.isSubForm}
>
<Field
name="isSubForm"
placeholder={translate('::ListForms.ListFormEdit.IsSub')}
component={Checkbox}
/>
</FormItem>
</div> </div>
<FormItem
label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm}
errorMessage={errors.isSubForm}
>
<Field
name="isSubForm"
placeholder={translate('::ListForms.ListFormEdit.IsSub')}
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.SubFormsListFormType')} label={translate('::ListForms.ListFormEdit.SubFormsListFormType')}

576
ui/src/views/admin/listForm/edit/FormTabEdit.tsx
View file

@ -41,295 +41,303 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
{({ touched, errors, values, isSubmitting }) => ( {({ touched, errors, values, isSubmitting }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<Card className="my-2" header="General"> <Card className="my-2 col-span-2" header="General">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')} <div>
invalid={ <FormItem
errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
} invalid={
errorMessage={errors.editingOptionDto?.allowAdding} errors.editingOptionDto?.allowAdding &&
> touched.editingOptionDto?.allowAdding
<Field }
name="editingOptionDto.allowAdding" errorMessage={errors.editingOptionDto?.allowAdding}
placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')} >
component={Checkbox} <Field
/> name="editingOptionDto.allowAdding"
</FormItem> placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
<FormItem component={Checkbox}
label={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
invalid={
errors.editingOptionDto?.addPageUrl &&
touched.editingOptionDto?.addPageUrl
}
errorMessage={errors.editingOptionDto?.addPageUrl}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.addPageUrl"
placeholder={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowUpdating')}
invalid={
errors.editingOptionDto?.allowUpdating &&
touched.editingOptionDto?.allowUpdating
}
errorMessage={errors.editingOptionDto?.allowUpdating}
>
<Field
name="editingOptionDto.allowUpdating"
placeholder={translate('::ListForms.ListFormEdit.AllowUpdating')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
invalid={
errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
}
errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
>
<Field
name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
placeholder={translate(
'::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
invalid={
errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail
}
errorMessage={errors.editingOptionDto?.allowDetail}
>
<Field
name="editingOptionDto.allowDetail"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
invalid={
errors.editingOptionDto?.allowDuplicate && touched.editingOptionDto?.allowDuplicate
}
errorMessage={errors.editingOptionDto?.allowDuplicate}
>
<Field
name="editingOptionDto.allowDuplicate"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={
errors.editingOptionDto?.allowDeleting &&
touched.editingOptionDto?.allowDeleting
}
errorMessage={errors.editingOptionDto?.allowDeleting}
>
<Field
name="editingOptionDto.allowDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
invalid={
errors.editingOptionDto?.allowAllDeleting &&
touched.editingOptionDto?.allowAllDeleting
}
errorMessage={errors.editingOptionDto?.allowAllDeleting}
>
<Field
name="editingOptionDto.allowAllDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={
errors.editingOptionDto?.confirmDelete &&
touched.editingOptionDto?.confirmDelete
}
errorMessage={errors.editingOptionDto?.confirmDelete}
>
<Field
name="editingOptionDto.confirmDelete"
placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
invalid={
errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
}
errorMessage={errors.editingOptionDto?.useIcons}
>
<Field
name="editingOptionDto.useIcons"
placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={
errors.editingOptionDto?.selectTextOnEditStart &&
touched.editingOptionDto?.selectTextOnEditStart
}
errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
>
<Field
name="editingOptionDto.selectTextOnEditStart"
placeholder={translate(
'::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
errorMessage={errors.editingOptionDto?.mode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.mode"
placeholder={translate('::SidePanel.Mode')}
>
{({ field, form }: FieldProps<GridsEditMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionModeOptions}
value={editingOptionModeOptions?.filter(
(option) => option.value === values.editingOptionDto.mode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
invalid={
<FormItem errors.editingOptionDto?.addPageUrl &&
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')} touched.editingOptionDto?.addPageUrl
invalid={ }
errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode errorMessage={errors.editingOptionDto?.addPageUrl}
} >
errorMessage={errors.editingOptionDto?.refreshMode} <Field
> type="text"
<Field autoComplete="off"
type="text" name="editingOptionDto.addPageUrl"
autoComplete="off" placeholder={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
name="editingOptionDto.refreshMode" component={Input}
placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
>
{({ field, form }: FieldProps<GridsEditRefreshMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionRefreshModeOptions}
value={editingOptionRefreshModeOptions?.filter(
(option) => option.value === values.editingOptionDto.refreshMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.AllowUpdating')}
<FormItem invalid={
label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')} errors.editingOptionDto?.allowUpdating &&
invalid={ touched.editingOptionDto?.allowUpdating
errors.editingOptionDto?.newRowPosition && }
touched.editingOptionDto?.newRowPosition errorMessage={errors.editingOptionDto?.allowUpdating}
} >
errorMessage={errors.editingOptionDto?.newRowPosition} <Field
> name="editingOptionDto.allowUpdating"
<Field placeholder={translate('::ListForms.ListFormEdit.AllowUpdating')}
type="text" component={Checkbox}
autoComplete="off"
name="editingOptionDto.newRowPosition"
placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
>
{({ field, form }: FieldProps<NewRowPosition>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionNewRowPositionOptions}
value={editingOptionNewRowPositionOptions?.filter(
(option) => option.value === values.editingOptionDto.newRowPosition,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate(
<FormItem '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
label={translate('::ListForms.ListFormEdit.EditingStartEditAction')} )}
invalid={ invalid={
errors.editingOptionDto?.startEditAction && errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.startEditAction touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
} }
errorMessage={errors.editingOptionDto?.startEditAction} errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
> >
<Field <Field
type="text" name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
autoComplete="off" placeholder={translate(
name="editingOptionDto.startEditAction" '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
>
{({ field, form }: FieldProps<StartEditAction>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter(
(option) => option.value === values.editingOptionDto.startEditAction,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} component={Checkbox}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
<FormItem invalid={
label={translate('::ListForms.ListFormEdit.EditingEditColumnName')} errors.editingOptionDto?.allowDetail &&
invalid={ touched.editingOptionDto?.allowDetail
errors.editingOptionDto?.editColumnName && }
touched.editingOptionDto?.editColumnName errorMessage={errors.editingOptionDto?.allowDetail}
} >
errorMessage={errors.editingOptionDto?.editColumnName} <Field
> name="editingOptionDto.allowDetail"
<Field placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
type="text" component={Checkbox}
autoComplete="off" />
name="editingOptionDto.editColumnName" </FormItem>
placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')} <FormItem
component={Input} label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
/> invalid={
</FormItem> errors.editingOptionDto?.allowDuplicate &&
touched.editingOptionDto?.allowDuplicate
}
errorMessage={errors.editingOptionDto?.allowDuplicate}
>
<Field
name="editingOptionDto.allowDuplicate"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={
errors.editingOptionDto?.allowDeleting &&
touched.editingOptionDto?.allowDeleting
}
errorMessage={errors.editingOptionDto?.allowDeleting}
>
<Field
name="editingOptionDto.allowDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
invalid={
errors.editingOptionDto?.allowAllDeleting &&
touched.editingOptionDto?.allowAllDeleting
}
errorMessage={errors.editingOptionDto?.allowAllDeleting}
>
<Field
name="editingOptionDto.allowAllDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
component={Checkbox}
/>
</FormItem>
</div>
<div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={
errors.editingOptionDto?.confirmDelete &&
touched.editingOptionDto?.confirmDelete
}
errorMessage={errors.editingOptionDto?.confirmDelete}
>
<Field
name="editingOptionDto.confirmDelete"
placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
invalid={
errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
}
errorMessage={errors.editingOptionDto?.useIcons}
>
<Field
name="editingOptionDto.useIcons"
placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={
errors.editingOptionDto?.selectTextOnEditStart &&
touched.editingOptionDto?.selectTextOnEditStart
}
errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
>
<Field
name="editingOptionDto.selectTextOnEditStart"
placeholder={translate(
'::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
)}
component={Checkbox}
/>
</FormItem>
</div>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
errorMessage={errors.editingOptionDto?.mode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.mode"
placeholder={translate('::SidePanel.Mode')}
>
{({ field, form }: FieldProps<GridsEditMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionModeOptions}
value={editingOptionModeOptions?.filter(
(option) => option.value === values.editingOptionDto.mode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
invalid={
errors.editingOptionDto?.refreshMode &&
touched.editingOptionDto?.refreshMode
}
errorMessage={errors.editingOptionDto?.refreshMode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.refreshMode"
placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
>
{({ field, form }: FieldProps<GridsEditRefreshMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionRefreshModeOptions}
value={editingOptionRefreshModeOptions?.filter(
(option) => option.value === values.editingOptionDto.refreshMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
invalid={
errors.editingOptionDto?.newRowPosition &&
touched.editingOptionDto?.newRowPosition
}
errorMessage={errors.editingOptionDto?.newRowPosition}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.newRowPosition"
placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
>
{({ field, form }: FieldProps<NewRowPosition>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionNewRowPositionOptions}
value={editingOptionNewRowPositionOptions?.filter(
(option) => option.value === values.editingOptionDto.newRowPosition,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
invalid={
errors.editingOptionDto?.startEditAction &&
touched.editingOptionDto?.startEditAction
}
errorMessage={errors.editingOptionDto?.startEditAction}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.startEditAction"
placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
>
{({ field, form }: FieldProps<StartEditAction>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter(
(option) =>
option.value === values.editingOptionDto.startEditAction,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
invalid={
errors.editingOptionDto?.editColumnName &&
touched.editingOptionDto?.editColumnName
}
errorMessage={errors.editingOptionDto?.editColumnName}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.editColumnName"
placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
component={Input}
/>
</FormItem>
</div>
</div>
</Card> </Card>
<Card className="my-2" header="Popup"> <Card className="my-2" header="Popup">
{values.editingOptionDto.mode === 'popup' && ( {values.editingOptionDto.mode === 'popup' && (

703
ui/src/views/admin/listForm/edit/FormTabGantt.tsx
View file

@ -84,373 +84,390 @@ function FormTabGantt(props: FormEditProps) {
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Card className="mt-4"> <Card
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5> className="mt-4"
<FormItem header={translate('::ListForms.SchedulerOptions.BasicSettings')}
label={translate('::App.Listform.ListformField.KeyFieldName')} >
invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr} <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
errorMessage={errors.ganttOptionDto?.keyExpr} <div>
> <FormItem
<Field label={translate('::App.Listform.ListformField.KeyFieldName')}
type="text" invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr}
name="ganttOptionDto.keyExpr" errorMessage={errors.ganttOptionDto?.keyExpr}
placeholder={translate( >
'::App.Listform.ListformField.KeyFieldName', <Field
)} type="text"
> name="ganttOptionDto.keyExpr"
{({ field, form }: FieldProps<SelectBoxOption>) => ( placeholder={translate('::App.Listform.ListformField.KeyFieldName')}
<Select >
field={field} {({ field, form }: FieldProps<SelectBoxOption>) => (
form={form} <Select
isClearable={true} field={field}
options={fieldList} form={form}
value={fieldList?.filter( isClearable={true}
(option) => option.value === values.ganttOptionDto.keyExpr, options={fieldList}
value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.keyExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ParentIdExpr')} label={translate('::ListForms.ListFormEdit.ParentIdExpr')}
invalid={ invalid={
errors.ganttOptionDto?.parentIdExpr && touched.ganttOptionDto?.parentIdExpr errors.ganttOptionDto?.parentIdExpr && touched.ganttOptionDto?.parentIdExpr
} }
errorMessage={errors.ganttOptionDto?.parentIdExpr} errorMessage={errors.ganttOptionDto?.parentIdExpr}
> >
<Field <Field
type="text" type="text"
name="ganttOptionDto.parentIdExpr" name="ganttOptionDto.parentIdExpr"
placeholder={translate('::ListForms.ListFormEdit.ParentIdExpr')} placeholder={translate('::ListForms.ListFormEdit.ParentIdExpr')}
> >
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
isClearable={true} isClearable={true}
options={fieldList} options={fieldList}
value={fieldList?.filter( value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.parentIdExpr, (option) => option.value === values.ganttOptionDto.parentIdExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.HasItemsExpr')}
invalid={
errors.ganttOptionDto?.hasItemsExpr && touched.ganttOptionDto?.hasItemsExpr
}
errorMessage={errors.ganttOptionDto?.hasItemsExpr}
>
<Field
type="text"
autoComplete="off"
name="ganttOptionDto.hasItemsExpr"
placeholder={translate('::ListForms.ListFormEdit.HasItemsExpr')}
component={Input}
/> />
)} </FormItem>
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.HasItemsExpr')} label={translate('::ListForms.ListFormEdit.RootValue')}
invalid={ invalid={
errors.ganttOptionDto?.hasItemsExpr && touched.ganttOptionDto?.hasItemsExpr !!(errors.ganttOptionDto?.rootValue && touched.ganttOptionDto?.rootValue)
} }
errorMessage={errors.ganttOptionDto?.hasItemsExpr} errorMessage={errors.ganttOptionDto?.rootValue as string}
> >
<Field <Field
type="text" type="text"
autoComplete="off" autoComplete="off"
name="ganttOptionDto.hasItemsExpr" name="ganttOptionDto.rootValue"
placeholder={translate('::ListForms.ListFormEdit.HasItemsExpr')} placeholder={translate('::ListForms.ListFormEdit.RootValue')}
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.RootValue')} label={translate('::ListForms.ListFormEdit.AutoExpandAll')}
invalid={ invalid={
!!(errors.ganttOptionDto?.rootValue && touched.ganttOptionDto?.rootValue) errors.ganttOptionDto?.autoExpandAll &&
} touched.ganttOptionDto?.autoExpandAll
errorMessage={errors.ganttOptionDto?.rootValue as string} }
> errorMessage={errors.ganttOptionDto?.autoExpandAll}
<Field >
type="text" <Field
autoComplete="off" name="ganttOptionDto.autoExpandAll"
name="ganttOptionDto.rootValue" placeholder={translate('::ListForms.ListFormEdit.AutoExpandAll')}
placeholder={translate('::ListForms.ListFormEdit.RootValue')} component={Checkbox}
component={Input} />
/> </FormItem>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AutoExpandAll')} label={translate('::ListForms.ListFormEdit.RecursiveSelection')}
invalid={ invalid={
errors.ganttOptionDto?.autoExpandAll && touched.ganttOptionDto?.autoExpandAll errors.ganttOptionDto?.recursiveSelection &&
} touched.ganttOptionDto?.recursiveSelection
errorMessage={errors.ganttOptionDto?.autoExpandAll} }
> errorMessage={errors.ganttOptionDto?.recursiveSelection}
<Field >
name="ganttOptionDto.autoExpandAll" <Field
placeholder={translate('::ListForms.ListFormEdit.AutoExpandAll')} name="ganttOptionDto.recursiveSelection"
component={Checkbox} placeholder={translate('::ListForms.ListFormEdit.RecursiveSelection')}
/> component={Checkbox}
</FormItem> />
</FormItem>
<FormItem </div>
label={translate('::ListForms.ListFormEdit.RecursiveSelection')} <div>
invalid={ <FormItem
errors.ganttOptionDto?.recursiveSelection && label={translate('::ListForms.ListFormEdit.ScaleType')}
touched.ganttOptionDto?.recursiveSelection invalid={
} errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType
errorMessage={errors.ganttOptionDto?.recursiveSelection} }
> errorMessage={errors.ganttOptionDto?.scaleType}
<Field >
name="ganttOptionDto.recursiveSelection" <Field
placeholder={translate('::ListForms.ListFormEdit.RecursiveSelection')} type="text"
component={Checkbox} name="ganttOptionDto.scaleType"
/> placeholder={translate('::ListForms.ListFormEdit.ScaleType')}
</FormItem> >
{({ field, form }: FieldProps<GanttScaleType>) => (
<FormItem <Select
label={translate('::ListForms.ListFormEdit.ScaleType')} field={field}
invalid={errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType} form={form}
errorMessage={errors.ganttOptionDto?.scaleType} isClearable={true}
> options={gantScaleOptions}
<Field value={gantScaleOptions?.filter(
type="text" (option) => option.value === values.ganttOptionDto.scaleType,
name="ganttOptionDto.scaleType" )}
placeholder={translate('::ListForms.ListFormEdit.ScaleType')} onChange={(option) => form.setFieldValue(field.name, option?.value)}
> />
{({ field, form }: FieldProps<GanttScaleType>) => (
<Select
field={field}
form={form}
isClearable={true}
options={gantScaleOptions}
value={gantScaleOptions?.filter(
(option) => option.value === values.ganttOptionDto.scaleType,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.TitleExpr')} label={translate('::ListForms.ListFormEdit.TitleExpr')}
invalid={errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr} invalid={
errorMessage={errors.ganttOptionDto?.titleExpr} errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr
> }
<Field errorMessage={errors.ganttOptionDto?.titleExpr}
type="text" >
name="ganttOptionDto.titleExpr" <Field
placeholder={translate('::ListForms.ListFormEdit.TitleExpr')} type="text"
> name="ganttOptionDto.titleExpr"
{({ field, form }: FieldProps<SelectBoxOption>) => ( placeholder={translate('::ListForms.ListFormEdit.TitleExpr')}
<Select >
field={field} {({ field, form }: FieldProps<SelectBoxOption>) => (
form={form} <Select
isClearable={true} field={field}
options={fieldList} form={form}
value={fieldList?.filter( isClearable={true}
(option) => option.value === values.ganttOptionDto.titleExpr, options={fieldList}
value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.titleExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.StartExpr')} label={translate('::ListForms.ListFormEdit.StartExpr')}
invalid={errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr} invalid={
errorMessage={errors.ganttOptionDto?.startExpr} errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr
> }
<Field errorMessage={errors.ganttOptionDto?.startExpr}
type="text" >
name="ganttOptionDto.startExpr" <Field
placeholder={translate('::ListForms.ListFormEdit.StartExpr')} type="text"
> name="ganttOptionDto.startExpr"
{({ field, form }: FieldProps<SelectBoxOption>) => ( placeholder={translate('::ListForms.ListFormEdit.StartExpr')}
<Select >
field={field} {({ field, form }: FieldProps<SelectBoxOption>) => (
form={form} <Select
isClearable={true} field={field}
options={fieldList} form={form}
value={fieldList?.filter( isClearable={true}
(option) => option.value === values.ganttOptionDto.startExpr, options={fieldList}
value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.startExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EndExpr')} label={translate('::ListForms.ListFormEdit.EndExpr')}
invalid={errors.ganttOptionDto?.endExpr && touched.ganttOptionDto?.endExpr} invalid={errors.ganttOptionDto?.endExpr && touched.ganttOptionDto?.endExpr}
errorMessage={errors.ganttOptionDto?.endExpr} errorMessage={errors.ganttOptionDto?.endExpr}
> >
<Field <Field
type="text" type="text"
name="ganttOptionDto.endExpr" name="ganttOptionDto.endExpr"
placeholder={translate('::ListForms.ListFormEdit.EndExpr')} placeholder={translate('::ListForms.ListFormEdit.EndExpr')}
> >
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
isClearable={true} isClearable={true}
options={fieldList} options={fieldList}
value={fieldList?.filter( value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.endExpr, (option) => option.value === values.ganttOptionDto.endExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)}
</Field>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ProgressExpr')} label={translate('::ListForms.ListFormEdit.ProgressExpr')}
invalid={ invalid={
errors.ganttOptionDto?.progressExpr && touched.ganttOptionDto?.progressExpr errors.ganttOptionDto?.progressExpr && touched.ganttOptionDto?.progressExpr
} }
errorMessage={errors.ganttOptionDto?.progressExpr} errorMessage={errors.ganttOptionDto?.progressExpr}
> >
<Field <Field
type="text" type="text"
name="ganttOptionDto.progressExpr" name="ganttOptionDto.progressExpr"
placeholder={translate('::ListForms.ListFormEdit.ProgressExpr')} placeholder={translate('::ListForms.ListFormEdit.ProgressExpr')}
> >
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
isClearable={true} isClearable={true}
options={fieldList} options={fieldList}
value={fieldList?.filter( value={fieldList?.filter(
(option) => option.value === values.ganttOptionDto.progressExpr, (option) => option.value === values.ganttOptionDto.progressExpr,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
/> </FormItem>
)} </div>
</Field> </div>
</FormItem>
</Card> </Card>
<Card className="mt-4"> <Card
<h5 className="mb-4"> className="mt-4"
{translate('::ListForms.SchedulerOptions.InteractionSettings')} header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
</h5> >
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label={translate('::ListForms.ListFormEdit.AllowEditing')} <div>
invalid={ <FormItem
errors.ganttOptionDto?.allowEditing && touched.ganttOptionDto?.allowEditing label={translate('::ListForms.ListFormEdit.AllowEditing')}
} invalid={
errorMessage={errors.ganttOptionDto?.allowEditing} errors.ganttOptionDto?.allowEditing && touched.ganttOptionDto?.allowEditing
> }
<Field errorMessage={errors.ganttOptionDto?.allowEditing}
name="ganttOptionDto.allowEditing" >
placeholder={translate('::ListForms.ListFormEdit.AllowEditing')} <Field
component={Checkbox} name="ganttOptionDto.allowEditing"
/> placeholder={translate('::ListForms.ListFormEdit.AllowEditing')}
</FormItem> component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowTaskAdding')} label={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
invalid={ invalid={
errors.ganttOptionDto?.allowTaskAdding && errors.ganttOptionDto?.allowTaskAdding &&
touched.ganttOptionDto?.allowTaskAdding touched.ganttOptionDto?.allowTaskAdding
} }
errorMessage={errors.ganttOptionDto?.allowTaskAdding} errorMessage={errors.ganttOptionDto?.allowTaskAdding}
> >
<Field <Field
name="ganttOptionDto.allowTaskAdding" name="ganttOptionDto.allowTaskAdding"
placeholder={translate('::ListForms.ListFormEdit.AllowTaskAdding')} placeholder={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowTaskUpdating')} label={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
invalid={ invalid={
errors.ganttOptionDto?.allowTaskUpdating && errors.ganttOptionDto?.allowTaskUpdating &&
touched.ganttOptionDto?.allowTaskUpdating touched.ganttOptionDto?.allowTaskUpdating
} }
errorMessage={errors.ganttOptionDto?.allowTaskUpdating} errorMessage={errors.ganttOptionDto?.allowTaskUpdating}
> >
<Field <Field
name="ganttOptionDto.allowTaskUpdating" name="ganttOptionDto.allowTaskUpdating"
placeholder={translate('::ListForms.ListFormEdit.AllowTaskUpdating')} placeholder={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowTaskDeleting')} label={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
invalid={ invalid={
errors.ganttOptionDto?.allowTaskDeleting && errors.ganttOptionDto?.allowTaskDeleting &&
touched.ganttOptionDto?.allowTaskDeleting touched.ganttOptionDto?.allowTaskDeleting
} }
errorMessage={errors.ganttOptionDto?.allowTaskDeleting} errorMessage={errors.ganttOptionDto?.allowTaskDeleting}
> >
<Field <Field
name="ganttOptionDto.allowTaskDeleting" name="ganttOptionDto.allowTaskDeleting"
placeholder={translate('::ListForms.ListFormEdit.AllowTaskDeleting')} placeholder={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
invalid={
errors.ganttOptionDto?.allowDependencyAdding &&
touched.ganttOptionDto?.allowDependencyAdding
}
errorMessage={errors.ganttOptionDto?.allowDependencyAdding}
>
<Field
name="ganttOptionDto.allowDependencyAdding"
placeholder={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')} label={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
invalid={ invalid={
errors.ganttOptionDto?.allowDependencyAdding && errors.ganttOptionDto?.allowDependencyDeleting &&
touched.ganttOptionDto?.allowDependencyAdding touched.ganttOptionDto?.allowDependencyDeleting
} }
errorMessage={errors.ganttOptionDto?.allowDependencyAdding} errorMessage={errors.ganttOptionDto?.allowDependencyDeleting}
> >
<Field <Field
name="ganttOptionDto.allowDependencyAdding" name="ganttOptionDto.allowDependencyDeleting"
placeholder={translate('::ListForms.ListFormEdit.AllowDependencyAdding')} placeholder={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')} label={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
invalid={ invalid={
errors.ganttOptionDto?.allowDependencyDeleting && errors.ganttOptionDto?.allowResourceAdding &&
touched.ganttOptionDto?.allowDependencyDeleting touched.ganttOptionDto?.allowResourceAdding
} }
errorMessage={errors.ganttOptionDto?.allowDependencyDeleting} errorMessage={errors.ganttOptionDto?.allowResourceAdding}
> >
<Field <Field
name="ganttOptionDto.allowDependencyDeleting" name="ganttOptionDto.allowResourceAdding"
placeholder={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')} placeholder={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowResourceAdding')} label={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
invalid={ invalid={
errors.ganttOptionDto?.allowResourceAdding && errors.ganttOptionDto?.allowResourceDeleting &&
touched.ganttOptionDto?.allowResourceAdding touched.ganttOptionDto?.allowResourceDeleting
} }
errorMessage={errors.ganttOptionDto?.allowResourceAdding} errorMessage={errors.ganttOptionDto?.allowResourceDeleting}
> >
<Field <Field
name="ganttOptionDto.allowResourceAdding" name="ganttOptionDto.allowResourceDeleting"
placeholder={translate('::ListForms.ListFormEdit.AllowResourceAdding')} placeholder={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<FormItem </div>
label={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
invalid={
errors.ganttOptionDto?.allowResourceDeleting &&
touched.ganttOptionDto?.allowResourceDeleting
}
errorMessage={errors.ganttOptionDto?.allowResourceDeleting}
>
<Field
name="ganttOptionDto.allowResourceDeleting"
placeholder={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
component={Checkbox}
/>
</FormItem>
</Card> </Card>
</div> </div>

383
ui/src/views/admin/listForm/edit/FormTabPager.tsx
View file

@ -25,7 +25,7 @@ function FormTabPager(props: FormEditProps) {
} }
return ( return (
<Container className="grid xl:grid-cols-2"> <Container>
<Formik <Formik
initialValues={listFormValues} initialValues={listFormValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -36,195 +36,204 @@ function FormTabPager(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => ( {({ touched, errors, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label={translate('::ListForms.ListFormEdit.PageSize')} <div className="my-2">
invalid={errors.pageSize && touched.pageSize} <FormItem
errorMessage={errors.pageSize} label={translate('::ListForms.ListFormEdit.PageSize')}
> invalid={errors.pageSize && touched.pageSize}
<Field errorMessage={errors.pageSize}
type="number" >
className="w-20" <Field
autoComplete="off" type="number"
name="pageSize" className="w-20"
placeholder={translate('::ListForms.ListFormEdit.PageSize')} autoComplete="off"
component={Input} name="pageSize"
/> placeholder={translate('::ListForms.ListFormEdit.PageSize')}
</FormItem> component={Input}
<FormItem
label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
errorMessage={errors.pagerOptionDto?.visible}
>
<Field
name="pagerOptionDto.visible"
placeholder={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
invalid={
errors.pagerOptionDto?.showPageSizeSelector &&
touched.pagerOptionDto?.showPageSizeSelector
}
errorMessage={errors.pagerOptionDto?.showPageSizeSelector}
>
<Field
name="pagerOptionDto.showPageSizeSelector"
placeholder={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingShowInfo')}
invalid={errors.pagerOptionDto?.showInfo && touched.pagerOptionDto?.showInfo}
errorMessage={errors.pagerOptionDto?.showInfo}
>
<Field
name="pagerOptionDto.showInfo"
placeholder={translate('::ListForms.ListFormEdit.PagingShowInfo')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
invalid={
errors.pagerOptionDto?.showNavigationButtons &&
touched.pagerOptionDto?.showNavigationButtons
}
errorMessage={errors.pagerOptionDto?.showNavigationButtons}
>
<Field
name="pagerOptionDto.showNavigationButtons"
placeholder={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
invalid={
errors.pagerOptionDto?.allowedPageSizes &&
touched.pagerOptionDto?.allowedPageSizes
}
errorMessage={errors.pagerOptionDto?.allowedPageSizes}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.allowedPageSizes"
placeholder={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingInfoText')}
invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
errorMessage={errors.pagerOptionDto?.infoText}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.infoText"
placeholder={translate('::ListForms.ListFormEdit.PagingInfoText')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
invalid={errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode}
errorMessage={errors.pagerOptionDto?.displayMode}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.displayMode"
placeholder={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
>
{({ field, form }: FieldProps<PagerDisplayMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={pagerDisplayModeOptions}
value={pagerDisplayModeOptions?.filter(
(option) => option.value === values.pagerOptionDto.displayMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
<FormItem invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
label={translate('::ListForms.ListFormEdit.PagingScrollingMode')} errorMessage={errors.pagerOptionDto?.visible}
invalid={ >
errors.pagerOptionDto?.scrollingMode && touched.pagerOptionDto?.scrollingMode <Field
} name="pagerOptionDto.visible"
errorMessage={errors.pagerOptionDto?.scrollingMode} placeholder={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
> component={Checkbox}
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.scrollingMode"
placeholder={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
>
{({ field, form }: FieldProps<ScrollMode | 'virtual'>) => (
<Select
field={field}
form={form}
isClearable={true}
options={pagerScrollingModeOptions}
value={pagerScrollingModeOptions?.filter(
(option) => option.value === values.pagerOptionDto.scrollingMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
<FormItem invalid={
label={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')} errors.pagerOptionDto?.showPageSizeSelector &&
invalid={ touched.pagerOptionDto?.showPageSizeSelector
errors.pagerOptionDto?.loadPanelEnabled && }
touched.pagerOptionDto?.loadPanelEnabled errorMessage={errors.pagerOptionDto?.showPageSizeSelector}
} >
errorMessage={errors.pagerOptionDto?.loadPanelEnabled} <Field
> name="pagerOptionDto.showPageSizeSelector"
<Field placeholder={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
type="text" component={Checkbox}
autoComplete="off"
name="pagerOptionDto.loadPanelEnabled"
placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
>
{({ field, form }: FieldProps<boolean | 'auto'>) => (
<Select
field={field}
form={form}
isClearable={true}
options={loadPanelEnabledOptions}
value={loadPanelEnabledOptions?.filter(
(option) => option.value === values.pagerOptionDto.loadPanelEnabled,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.PagingShowInfo')}
<FormItem invalid={errors.pagerOptionDto?.showInfo && touched.pagerOptionDto?.showInfo}
label={translate('::ListForms.ListFormEdit.PagingLoadPanelText')} errorMessage={errors.pagerOptionDto?.showInfo}
invalid={ >
errors.pagerOptionDto?.loadPanelText && touched.pagerOptionDto?.loadPanelText <Field
} name="pagerOptionDto.showInfo"
errorMessage={errors.pagerOptionDto?.loadPanelText} placeholder={translate('::ListForms.ListFormEdit.PagingShowInfo')}
> component={Checkbox}
<Field />
type="text" </FormItem>
autoComplete="off" <FormItem
name="pagerOptionDto.loadPanelText" label={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelText')} invalid={
component={Input} errors.pagerOptionDto?.showNavigationButtons &&
/> touched.pagerOptionDto?.showNavigationButtons
</FormItem> }
errorMessage={errors.pagerOptionDto?.showNavigationButtons}
>
<Field
name="pagerOptionDto.showNavigationButtons"
placeholder={translate(
'::ListForms.ListFormEdit.PagingShowNavigationButtons',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
invalid={
errors.pagerOptionDto?.allowedPageSizes &&
touched.pagerOptionDto?.allowedPageSizes
}
errorMessage={errors.pagerOptionDto?.allowedPageSizes}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.allowedPageSizes"
placeholder={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
component={Input}
/>
</FormItem>
</div>
<div className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.PagingInfoText')}
invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
errorMessage={errors.pagerOptionDto?.infoText}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.infoText"
placeholder={translate('::ListForms.ListFormEdit.PagingInfoText')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
invalid={
errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode
}
errorMessage={errors.pagerOptionDto?.displayMode}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.displayMode"
placeholder={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
>
{({ field, form }: FieldProps<PagerDisplayMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={pagerDisplayModeOptions}
value={pagerDisplayModeOptions?.filter(
(option) => option.value === values.pagerOptionDto.displayMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
invalid={
errors.pagerOptionDto?.scrollingMode && touched.pagerOptionDto?.scrollingMode
}
errorMessage={errors.pagerOptionDto?.scrollingMode}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.scrollingMode"
placeholder={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
>
{({ field, form }: FieldProps<ScrollMode | 'virtual'>) => (
<Select
field={field}
form={form}
isClearable={true}
options={pagerScrollingModeOptions}
value={pagerScrollingModeOptions?.filter(
(option) => option.value === values.pagerOptionDto.scrollingMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
invalid={
errors.pagerOptionDto?.loadPanelEnabled &&
touched.pagerOptionDto?.loadPanelEnabled
}
errorMessage={errors.pagerOptionDto?.loadPanelEnabled}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.loadPanelEnabled"
placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
>
{({ field, form }: FieldProps<boolean | 'auto'>) => (
<Select
field={field}
form={form}
isClearable={true}
options={loadPanelEnabledOptions}
value={loadPanelEnabledOptions?.filter(
(option) => option.value === values.pagerOptionDto.loadPanelEnabled,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
invalid={
errors.pagerOptionDto?.loadPanelText && touched.pagerOptionDto?.loadPanelText
}
errorMessage={errors.pagerOptionDto?.loadPanelText}
>
<Field
type="text"
autoComplete="off"
name="pagerOptionDto.loadPanelText"
placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
component={Input}
/>
</FormItem>
</div>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

295
ui/src/views/admin/listForm/edit/FormTabPivots.tsx
View file

@ -20,7 +20,7 @@ function FormTabColumns(props: FormEditProps) {
} }
return ( return (
<Container className="grid xl:grid-cols-2"> <Container>
<Formik <Formik
initialValues={listFormValues} initialValues={listFormValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -31,147 +31,160 @@ function FormTabColumns(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => ( {({ touched, errors, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<FormItem <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
label={translate('::ListForms.ListFormEdit.ShowFieldPanel')} <div>
invalid={ <FormItem
errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
} invalid={
errorMessage={errors.pivotOptionDto?.showFieldPanel} errors.pivotOptionDto?.showFieldPanel &&
> touched.pivotOptionDto?.showFieldPanel
<Field }
name="pivotOptionDto.showFieldPanel" errorMessage={errors.pivotOptionDto?.showFieldPanel}
placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')} >
component={Checkbox} <Field
/> name="pivotOptionDto.showFieldPanel"
</FormItem> placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
<FormItem component={Checkbox}
label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
invalid={
errors.pivotOptionDto?.allowFieldDragging &&
touched.pivotOptionDto?.allowFieldDragging
}
errorMessage={errors.pivotOptionDto?.allowFieldDragging}
>
<Field
name="pivotOptionDto.allowFieldDragging"
placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.pivotOptionDto?.columnChooserEnabled &&
touched.pivotOptionDto?.columnChooserEnabled
}
errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
>
<Field
name="pivotOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showColumnFields"
placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowRowFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showRowFields"
placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={
errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields
}
errorMessage={errors.pivotOptionDto?.showDataFields}
>
<Field
name="pivotOptionDto.showDataFields"
placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
invalid={
errors.pivotOptionDto?.showFilterFields &&
touched.pivotOptionDto?.showFilterFields
}
errorMessage={errors.pivotOptionDto?.showFilterFields}
>
<Field
name="pivotOptionDto.showFilterFields"
placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowChart')}
invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
errorMessage={errors.pivotOptionDto?.showChart}
>
<Field
name="pivotOptionDto.showChart"
placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight}
errorMessage={errors.pivotOptionDto?.chartHeight}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.chartHeight"
placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
errors.pivotOptionDto?.chartCommonSeriesType &&
touched.pivotOptionDto?.chartCommonSeriesType
}
errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
>
<Field type="text" name="pivotOptionDto.chartCommonSeriesType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter(
(option) => option.value === values.pivotOptionDto.chartCommonSeriesType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} </FormItem>
</Field> <FormItem
</FormItem> label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
invalid={
errors.pivotOptionDto?.allowFieldDragging &&
touched.pivotOptionDto?.allowFieldDragging
}
errorMessage={errors.pivotOptionDto?.allowFieldDragging}
>
<Field
name="pivotOptionDto.allowFieldDragging"
placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.pivotOptionDto?.columnChooserEnabled &&
touched.pivotOptionDto?.columnChooserEnabled
}
errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
>
<Field
name="pivotOptionDto.columnChooserEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showColumnFields"
placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowRowFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showRowFields"
placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
component={Checkbox}
/>
</FormItem>
</div>
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={
errors.pivotOptionDto?.showDataFields &&
touched.pivotOptionDto?.showDataFields
}
errorMessage={errors.pivotOptionDto?.showDataFields}
>
<Field
name="pivotOptionDto.showDataFields"
placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
invalid={
errors.pivotOptionDto?.showFilterFields &&
touched.pivotOptionDto?.showFilterFields
}
errorMessage={errors.pivotOptionDto?.showFilterFields}
>
<Field
name="pivotOptionDto.showFilterFields"
placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowChart')}
invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
errorMessage={errors.pivotOptionDto?.showChart}
>
<Field
name="pivotOptionDto.showChart"
placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={
errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight
}
errorMessage={errors.pivotOptionDto?.chartHeight}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.chartHeight"
placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
errors.pivotOptionDto?.chartCommonSeriesType &&
touched.pivotOptionDto?.chartCommonSeriesType
}
errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
>
<Field type="text" name="pivotOptionDto.chartCommonSeriesType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter(
(option) =>
option.value === values.pivotOptionDto.chartCommonSeriesType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</div>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2"> <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

35
ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
View file

@ -82,10 +82,11 @@ function FormTabScheduler(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => ( {({ touched, errors, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<Card className="mt-4"> <Card
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5> className="mt-4"
header={translate('::ListForms.SchedulerOptions.BasicSettings')}
>
<FormItem <FormItem
label={translate('::ListForms.SchedulerOptions.TextExpr')} label={translate('::ListForms.SchedulerOptions.TextExpr')}
invalid={ invalid={
@ -181,9 +182,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem> </FormItem>
</Card> </Card>
<Card className="mt-4"> <Card
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.ViewSettings')}</h5> className="mt-4"
header={translate('::ListForms.SchedulerOptions.ViewSettings')}
>
<FormItem label={translate('::ListForms.SchedulerOptions.DefaultView')}> <FormItem label={translate('::ListForms.SchedulerOptions.DefaultView')}>
<Field name="schedulerOptionDto.defaultView"> <Field name="schedulerOptionDto.defaultView">
{({ field, form }: FieldProps) => ( {({ field, form }: FieldProps) => (
@ -273,11 +275,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem> </FormItem>
</Card> </Card>
<Card className="mt-4"> <Card
<h5 className="mb-4"> className="mt-4"
{translate('::ListForms.SchedulerOptions.RecurrenceSettings')} header={translate('::ListForms.SchedulerOptions.RecurrenceSettings')}
</h5> >
<FormItem <FormItem
label={translate('::ListForms.SchedulerOptions.RecurrenceRuleExpr')} label={translate('::ListForms.SchedulerOptions.RecurrenceRuleExpr')}
invalid={ invalid={
@ -329,11 +330,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem> </FormItem>
</Card> </Card>
<Card className="mt-4"> <Card
<h5 className="mb-4"> className="mt-4"
{translate('::ListForms.SchedulerOptions.InteractionSettings')} header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
</h5> >
<FormItem label={translate('::ListForms.SchedulerOptions.ShowAllDayPanel')}> <FormItem label={translate('::ListForms.SchedulerOptions.ShowAllDayPanel')}>
<Field name="schedulerOptionDto.showAllDayPanel" component={Checkbox} /> <Field name="schedulerOptionDto.showAllDayPanel" component={Checkbox} />
</FormItem> </FormItem>
@ -363,7 +363,6 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2"> <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button>{' '} </Button>{' '}

4
ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
View file

@ -25,9 +25,11 @@ function FormFieldEdit({
listFormCode, listFormCode,
item, item,
onSubmit, onSubmit,
fields
}: { }: {
listFormCode: string listFormCode: string
item: ColumnFormatEditDto | null item: ColumnFormatEditDto | null
fields: ColumnFormatEditDto[]
} & FormFieldEditProps) { } & FormFieldEditProps) {
const { translate } = useLocalization() const { translate } = useLocalization()
@ -128,6 +130,7 @@ function FormFieldEdit({
listFormCode={listFormCode} listFormCode={listFormCode}
initialValues={item} initialValues={item}
onSubmit={onSubmit} onSubmit={onSubmit}
fields={fields}
/> />
</TabContent> </TabContent>
<TabContent value="totalSummary"> <TabContent value="totalSummary">
@ -135,6 +138,7 @@ function FormFieldEdit({
listFormCode={listFormCode} listFormCode={listFormCode}
initialValues={item} initialValues={item}
onSubmit={onSubmit} onSubmit={onSubmit}
fields={fields}
/> />
</TabContent> </TabContent>
<TabContent value="joinOptions"> <TabContent value="joinOptions">

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
View file

@ -63,7 +63,7 @@ function FormFieldTabCssOptions({
/> />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
View file

@ -70,7 +70,7 @@ function FormFieldTabCustomization({
</Field> </Field>
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
View file

@ -133,7 +133,7 @@ function FormFieldTabDetails({
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</Form> </Form>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
View file

@ -84,7 +84,7 @@ function FormFieldTabFiltering({
/> />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

28
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
View file

@ -7,6 +7,7 @@ import { bool, object, string } from 'yup'
import { columnSummaryTypeListOptions } from '../options' import { columnSummaryTypeListOptions } from '../options'
import { FormFieldEditProps } from './FormFields' import { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options' import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { SelectBoxOption } from '@/types/shared'
const schema = object().shape({ const schema = object().shape({
columnGroupingDto: object() columnGroupingDto: object()
@ -25,12 +26,21 @@ function FormFieldTabGroupSummary({
listFormCode, listFormCode,
initialValues, initialValues,
onSubmit, onSubmit,
fields,
}: { }: {
listFormCode: string listFormCode: string
initialValues: ColumnFormatEditDto initialValues: ColumnFormatEditDto
fields: ColumnFormatEditDto[]
} & FormFieldEditProps) { } & FormFieldEditProps) {
const { translate } = useLocalization() const { translate } = useLocalization()
const fieldList: SelectBoxOption[] = fields.length
? fields.map((field) => ({
value: field.fieldName,
label: `${field.fieldName}`,
}))
: []
return ( return (
<Container className="grid xl:grid-cols-2"> <Container className="grid xl:grid-cols-2">
<Formik <Formik
@ -121,13 +131,25 @@ function FormFieldTabGroupSummary({
> >
<Field <Field
type="text" type="text"
autoComplete="off" autoFocus={true}
name="columnGroupSummaryDto.showInColumn" name="columnGroupSummaryDto.showInColumn"
placeholder={translate( placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn', '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
)} )}
component={Input} >
/> {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
options={fieldList}
value={fieldList.filter(
(option) => option.value === values.columnGroupSummaryDto?.showInColumn,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem> </FormItem>
<FormItem <FormItem

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
View file

@ -61,7 +61,7 @@ function FormFieldTabGrouping({
/> />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
View file

@ -65,7 +65,7 @@ function FormFieldTabHeadering({
/> />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
View file

@ -234,7 +234,7 @@ function FormFieldTabJoinOptions({
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</Form> </Form>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
View file

@ -458,7 +458,7 @@ function FormFieldTabLookup({
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</Form> </Form>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
View file

@ -113,7 +113,7 @@ function FormFieldTabOptions({
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</Form> </Form>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
View file

@ -159,7 +159,7 @@ function FormFieldTabPermissions({
<Field name="permissionDto.i" component={Checkbox} /> <Field name="permissionDto.i" component={Checkbox} />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
View file

@ -214,7 +214,7 @@ function FormFieldTabPivotSetting({
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</Form> </Form>

51
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
View file

@ -7,6 +7,8 @@ import { bool, object, string } from 'yup'
import { columnSummaryTypeListOptions } from '../options' import { columnSummaryTypeListOptions } from '../options'
import { FormFieldEditProps } from './FormFields' import { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options' import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { SelectBoxOption } from '@/types/shared'
import { useState } from 'react'
const schema = object().shape({ const schema = object().shape({
columnTotalSummaryDto: object() columnTotalSummaryDto: object()
@ -25,12 +27,21 @@ function FormFieldTabTotalSummary({
listFormCode, listFormCode,
initialValues, initialValues,
onSubmit, onSubmit,
fields,
}: { }: {
listFormCode: string listFormCode: string
initialValues: ColumnFormatEditDto initialValues: ColumnFormatEditDto
fields: ColumnFormatEditDto[]
} & FormFieldEditProps) { } & FormFieldEditProps) {
const { translate } = useLocalization() const { translate } = useLocalization()
const fieldList: SelectBoxOption[] = fields.length
? fields.map((field) => ({
value: field.fieldName,
label: `${field.fieldName}`,
}))
: []
return ( return (
<Container className="grid xl:grid-cols-2"> <Container className="grid xl:grid-cols-2">
<Formik <Formik
@ -66,12 +77,16 @@ function FormFieldTabTotalSummary({
</Field> </Field>
</FormItem> </FormItem>
<FormItem label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}> <FormItem
label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
>
<Field <Field
type="text" type="text"
autoComplete="off" autoComplete="off"
name="columnTotalSummaryDto.valueFormat" name="columnTotalSummaryDto.valueFormat"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')} placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat',
)}
> >
{({ field, form }: FieldProps<any>) => ( {({ field, form }: FieldProps<any>) => (
<Select <Select
@ -100,7 +115,9 @@ function FormFieldTabTotalSummary({
type="text" type="text"
autoComplete="off" autoComplete="off"
name="columnTotalSummaryDto.displayFormat" name="columnTotalSummaryDto.displayFormat"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat')} placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat',
)}
component={Input} component={Input}
/> />
</FormItem> </FormItem>
@ -115,11 +132,25 @@ function FormFieldTabTotalSummary({
> >
<Field <Field
type="text" type="text"
autoComplete="off" autoFocus={true}
name="columnTotalSummaryDto.showInColumn" name="columnTotalSummaryDto.showInColumn"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn')} placeholder={translate(
component={Input} '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
/> )}
>
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
options={fieldList}
value={fieldList.filter(
(option) => option.value === values.columnTotalSummaryDto?.showInColumn,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem> </FormItem>
<FormItem <FormItem
@ -139,12 +170,14 @@ function FormFieldTabTotalSummary({
> >
<Field <Field
name="columnTotalSummaryDto.alignByColumn" name="columnTotalSummaryDto.alignByColumn"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn')} placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
View file

@ -355,7 +355,7 @@ function FormFieldTabValidationRules({
<Field name="trim" placeholder="Trim" component={Checkbox} /> <Field name="trim" placeholder="Trim" component={Checkbox} />
</FormItem> </FormItem>
<Button block variant="solid" loading={isLoading} type="submit"> <Button className="mt-1" block variant="solid" loading={isLoading} type="submit">
{isLoading ? translate('::SavingWithThreeDot') : translate('::Save')} {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button> </Button>
</FormContainer> </FormContainer>

2
ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
View file

@ -505,7 +505,7 @@ function FormFields({
</Table> </Table>
</div> </div>
<div className="2xl:col-span-3 lg:col-span-3 xl:col-span-2"> <div className="2xl:col-span-3 lg:col-span-3 xl:col-span-2">
<FormFieldEdit listFormCode={listFormCode} item={row} onSubmit={onSubmit} /> <FormFieldEdit listFormCode={listFormCode} item={row} onSubmit={onSubmit} fields={fields} />
</div> </div>
</div> </div>
</AdaptableCard> </AdaptableCard>