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

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

@ -163,8 +163,10 @@ 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">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
@ -190,7 +192,9 @@ function ChartTabAxis(props: FormEditProps) {
<FormItem <FormItem
label="Title" label="Title"
invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)} invalid={
!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)
}
errorMessage={errors.argumentAxisDto?.title} errorMessage={errors.argumentAxisDto?.title}
> >
<Field type="text" name="argumentAxisDto.title" component={Input} /> <Field type="text" name="argumentAxisDto.title" component={Input} />
@ -199,7 +203,10 @@ function ChartTabAxis(props: FormEditProps) {
<FormItem <FormItem
label="Hover Mode" label="Hover Mode"
invalid={ invalid={
!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode) !!(
errors.argumentAxisDto?.hoverMode &&
touched.argumentAxisDto?.hoverMode
)
} }
errorMessage={errors.argumentAxisDto?.hoverMode} errorMessage={errors.argumentAxisDto?.hoverMode}
> >
@ -218,7 +225,8 @@ function ChartTabAxis(props: FormEditProps) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label="Argument Type" label="Argument Type"
invalid={ invalid={
@ -248,7 +256,9 @@ function ChartTabAxis(props: FormEditProps) {
<FormItem <FormItem
label="Position" label="Position"
invalid={ invalid={
!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position) !!(
errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
)
} }
errorMessage={errors.argumentAxisDto?.position} errorMessage={errors.argumentAxisDto?.position}
> >
@ -270,7 +280,9 @@ function ChartTabAxis(props: FormEditProps) {
<FormItem <FormItem
label="Width" label="Width"
invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)} invalid={
!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)
}
errorMessage={errors.argumentAxisDto?.width} errorMessage={errors.argumentAxisDto?.width}
> >
<Field type="number" name="argumentAxisDto.width" component={Input} /> <Field type="number" name="argumentAxisDto.width" component={Input} />
@ -302,6 +314,8 @@ function ChartTabAxis(props: FormEditProps) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
</div>
</div>
</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)}
/> />
)} )}

42
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,8 +330,10 @@ 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">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div>
<FormItem <FormItem
label="Enabled" label="Enabled"
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)} invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
@ -385,7 +391,8 @@ function ChartTabCommonSettings(props: FormEditProps) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label="Color" label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)} invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
@ -396,7 +403,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)}
/> />
)} )}
@ -406,7 +413,10 @@ function ChartTabCommonSettings(props: FormEditProps) {
<FormItem <FormItem
label="Argument Format" label="Argument Format"
invalid={ invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat) !!(
errors.tooltipDto?.argumentFormat &&
touched.tooltipDto?.argumentFormat
)
} }
errorMessage={errors.tooltipDto?.argumentFormat} errorMessage={errors.tooltipDto?.argumentFormat}
> >
@ -433,7 +443,11 @@ function ChartTabCommonSettings(props: FormEditProps) {
} }
errorMessage={errors.tooltipDto?.paddingTopBottom} errorMessage={errors.tooltipDto?.paddingTopBottom}
> >
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} /> <Field
type="number"
name="tooltipDto.paddingTopBottom"
component={Input}
/>
</FormItem> </FormItem>
<FormItem <FormItem
@ -446,8 +460,14 @@ function ChartTabCommonSettings(props: FormEditProps) {
} }
errorMessage={errors.tooltipDto?.paddingLeftRight} errorMessage={errors.tooltipDto?.paddingLeftRight}
> >
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} /> <Field
type="number"
name="tooltipDto.paddingLeftRight"
component={Input}
/>
</FormItem> </FormItem>
</div>
</div>
</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)}
/> />
)} )}

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

@ -229,6 +229,8 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
</TabContent> </TabContent>
<TabContent value="series_common"> <TabContent value="series_common">
<Card className="my-2"> <Card className="my-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
@ -265,7 +267,10 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
} }
errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints} errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
> >
<Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} /> <Field
name="commonSeriesSettingsDto.ignoreEmptyPoints"
component={Checkbox}
/>
</FormItem> </FormItem>
<FormItem <FormItem
@ -366,7 +371,8 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
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)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
menuPlacement="auto" menuPlacement="auto"
@ -375,7 +381,8 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label="Axis" label="Axis"
invalid={ invalid={
@ -443,7 +450,7 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
<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)}
/> />
)} )}
@ -485,7 +492,8 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
options={chartSeriesDashStyleOptions} options={chartSeriesDashStyleOptions}
isClearable={true} isClearable={true}
value={chartSeriesDashStyleOptions.filter( value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.dashStyle, (option) =>
option.value === values.commonSeriesSettingsDto.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
@ -503,8 +511,14 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
} }
errorMessage={errors.commonSeriesSettingsDto?.width} errorMessage={errors.commonSeriesSettingsDto?.width}
> >
<Field type="number" name="commonSeriesSettingsDto.width" component={Input} /> <Field
type="number"
name="commonSeriesSettingsDto.width"
component={Input}
/>
</FormItem> </FormItem>
</div>
</div>
</Card> </Card>
</TabContent> </TabContent>
</Tabs> </Tabs>

40
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,6 +40,8 @@ function FormTabColumns(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="my-2">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')} label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
invalid={ invalid={
@ -104,7 +106,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.rowAlternationEnabled" name="columnOptionDto.rowAlternationEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -118,7 +122,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.allowColumnReordering" name="columnOptionDto.allowColumnReordering"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnReordering',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -146,13 +152,19 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.columnFixingEnabled" name="columnOptionDto.columnFixingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div className="my-2">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')} label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled} invalid={
errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
}
errorMessage={errors.columnOptionDto?.rtlEnabled} errorMessage={errors.columnOptionDto?.rtlEnabled}
> >
<Field <Field
@ -171,7 +183,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.columnChooserEnabled" name="columnOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -213,7 +227,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.allowColumnResizing" name="columnOptionDto.allowColumnResizing"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnResizing',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -229,7 +245,9 @@ function FormTabColumns(props: FormEditProps) {
type="text" type="text"
autoComplete="off" autoComplete="off"
name="columnOptionDto.columnResizingMode" name="columnOptionDto.columnResizingMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnResizingMode',
)}
> >
{({ field, form }: FieldProps<ColumnResizeMode>) => ( {({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select <Select
@ -269,7 +287,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="columnOptionDto.columnHidingEnabled" name="columnOptionDto.columnHidingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -287,6 +307,8 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </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>

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

@ -223,7 +223,7 @@ function FormTabDetails(
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.IsSub')} label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm} invalid={errors.isSubForm && touched.isSubForm}
@ -235,6 +235,7 @@ function FormTabDetails(
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.SubFormsListFormType')} label={translate('::ListForms.ListFormEdit.SubFormsListFormType')}

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

@ -41,12 +41,15 @@ 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-3 gap-3">
<Card className="my-2 col-span-2" header="General">
<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="my-2" header="General"> <div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')} label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
invalid={ invalid={
errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding errors.editingOptionDto?.allowAdding &&
touched.editingOptionDto?.allowAdding
} }
errorMessage={errors.editingOptionDto?.allowAdding} errorMessage={errors.editingOptionDto?.allowAdding}
> >
@ -86,9 +89,10 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')} label={translate(
'::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
)}
invalid={ invalid={
errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate && errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
@ -103,11 +107,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDetail')} label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
invalid={ invalid={
errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail errors.editingOptionDto?.allowDetail &&
touched.editingOptionDto?.allowDetail
} }
errorMessage={errors.editingOptionDto?.allowDetail} errorMessage={errors.editingOptionDto?.allowDetail}
> >
@ -117,11 +121,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')} label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
invalid={ invalid={
errors.editingOptionDto?.allowDuplicate && touched.editingOptionDto?.allowDuplicate errors.editingOptionDto?.allowDuplicate &&
touched.editingOptionDto?.allowDuplicate
} }
errorMessage={errors.editingOptionDto?.allowDuplicate} errorMessage={errors.editingOptionDto?.allowDuplicate}
> >
@ -131,7 +135,6 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')} label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={ invalid={
@ -160,6 +163,9 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')} label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={ invalid={
@ -187,7 +193,6 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')} label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={ invalid={
@ -204,7 +209,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')} label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode} invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
@ -230,11 +235,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')} label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
invalid={ invalid={
errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode errors.editingOptionDto?.refreshMode &&
touched.editingOptionDto?.refreshMode
} }
errorMessage={errors.editingOptionDto?.refreshMode} errorMessage={errors.editingOptionDto?.refreshMode}
> >
@ -307,7 +312,8 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
isClearable={true} isClearable={true}
options={editingOptionStartEditActionOptions} options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter( value={editingOptionStartEditActionOptions?.filter(
(option) => option.value === values.editingOptionDto.startEditAction, (option) =>
option.value === values.editingOptionDto.startEditAction,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
@ -330,6 +336,8 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Input} component={Input}
/> />
</FormItem> </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' && (

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

@ -84,8 +84,12 @@ 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"
header={translate('::ListForms.SchedulerOptions.BasicSettings')}
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem <FormItem
label={translate('::App.Listform.ListformField.KeyFieldName')} label={translate('::App.Listform.ListformField.KeyFieldName')}
invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr} invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr}
@ -94,9 +98,7 @@ function FormTabGantt(props: FormEditProps) {
<Field <Field
type="text" type="text"
name="ganttOptionDto.keyExpr" name="ganttOptionDto.keyExpr"
placeholder={translate( placeholder={translate('::App.Listform.ListformField.KeyFieldName')}
'::App.Listform.ListformField.KeyFieldName',
)}
> >
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
@ -175,7 +177,8 @@ function FormTabGantt(props: FormEditProps) {
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AutoExpandAll')} label={translate('::ListForms.ListFormEdit.AutoExpandAll')}
invalid={ invalid={
errors.ganttOptionDto?.autoExpandAll && touched.ganttOptionDto?.autoExpandAll errors.ganttOptionDto?.autoExpandAll &&
touched.ganttOptionDto?.autoExpandAll
} }
errorMessage={errors.ganttOptionDto?.autoExpandAll} errorMessage={errors.ganttOptionDto?.autoExpandAll}
> >
@ -200,10 +203,13 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ScaleType')} label={translate('::ListForms.ListFormEdit.ScaleType')}
invalid={errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType} invalid={
errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType
}
errorMessage={errors.ganttOptionDto?.scaleType} errorMessage={errors.ganttOptionDto?.scaleType}
> >
<Field <Field
@ -228,7 +234,9 @@ function FormTabGantt(props: FormEditProps) {
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.TitleExpr')} label={translate('::ListForms.ListFormEdit.TitleExpr')}
invalid={errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr} invalid={
errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr
}
errorMessage={errors.ganttOptionDto?.titleExpr} errorMessage={errors.ganttOptionDto?.titleExpr}
> >
<Field <Field
@ -253,7 +261,9 @@ function FormTabGantt(props: FormEditProps) {
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.StartExpr')} label={translate('::ListForms.ListFormEdit.StartExpr')}
invalid={errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr} invalid={
errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr
}
errorMessage={errors.ganttOptionDto?.startExpr} errorMessage={errors.ganttOptionDto?.startExpr}
> >
<Field <Field
@ -327,12 +337,16 @@ function FormTabGantt(props: FormEditProps) {
)} )}
</Field> </Field>
</FormItem> </FormItem>
</div>
</div>
</Card> </Card>
<Card className="mt-4"> <Card
<h5 className="mb-4"> className="mt-4"
{translate('::ListForms.SchedulerOptions.InteractionSettings')} header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
</h5> >
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowEditing')} label={translate('::ListForms.ListFormEdit.AllowEditing')}
invalid={ invalid={
@ -391,7 +405,8 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')} label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
invalid={ invalid={
@ -451,6 +466,8 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
</div>
</Card> </Card>
</div> </div>

17
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,6 +36,8 @@ function FormTabPager(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="my-2">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.PageSize')} label={translate('::ListForms.ListFormEdit.PageSize')}
invalid={errors.pageSize && touched.pageSize} invalid={errors.pageSize && touched.pageSize}
@ -50,7 +52,6 @@ function FormTabPager(props: FormEditProps) {
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')} label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible} invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
@ -97,7 +98,9 @@ function FormTabPager(props: FormEditProps) {
> >
<Field <Field
name="pagerOptionDto.showNavigationButtons" name="pagerOptionDto.showNavigationButtons"
placeholder={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')} placeholder={translate(
'::ListForms.ListFormEdit.PagingShowNavigationButtons',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -117,6 +120,8 @@ function FormTabPager(props: FormEditProps) {
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</div>
<div className="my-2">
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.PagingInfoText')} label={translate('::ListForms.ListFormEdit.PagingInfoText')}
invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText} invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
@ -132,7 +137,9 @@ function FormTabPager(props: FormEditProps) {
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.PagingDisplayMode')} label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
invalid={errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode} invalid={
errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode
}
errorMessage={errors.pagerOptionDto?.displayMode} errorMessage={errors.pagerOptionDto?.displayMode}
> >
<Field <Field
@ -225,6 +232,8 @@ function FormTabPager(props: FormEditProps) {
component={Input} component={Input}
/> />
</FormItem> </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')}

25
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,10 +31,13 @@ function FormTabColumns(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>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ShowFieldPanel')} label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
invalid={ invalid={
errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel errors.pivotOptionDto?.showFieldPanel &&
touched.pivotOptionDto?.showFieldPanel
} }
errorMessage={errors.pivotOptionDto?.showFieldPanel} errorMessage={errors.pivotOptionDto?.showFieldPanel}
> >
@ -68,7 +71,9 @@ function FormTabColumns(props: FormEditProps) {
> >
<Field <Field
name="pivotOptionDto.columnChooserEnabled" name="pivotOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')} placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
@ -98,10 +103,13 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
</div>
<div>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')} label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={ invalid={
errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields errors.pivotOptionDto?.showDataFields &&
touched.pivotOptionDto?.showDataFields
} }
errorMessage={errors.pivotOptionDto?.showDataFields} errorMessage={errors.pivotOptionDto?.showDataFields}
> >
@ -138,7 +146,9 @@ function FormTabColumns(props: FormEditProps) {
</FormItem> </FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')} label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight} invalid={
errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight
}
errorMessage={errors.pivotOptionDto?.chartHeight} errorMessage={errors.pivotOptionDto?.chartHeight}
> >
<Field <Field
@ -165,13 +175,16 @@ function FormTabColumns(props: FormEditProps) {
form={form} form={form}
options={chartSeriesTypeOptions} options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter( value={chartSeriesTypeOptions.filter(
(option) => option.value === values.pivotOptionDto.chartCommonSeriesType, (option) =>
option.value === values.pivotOptionDto.chartCommonSeriesType,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </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>

26
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>

49
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>