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

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 { useLocalization } from '@/utils/hooks/useLocalization'
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 {
chartPaletteOptions,
@ -95,7 +99,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input
{...field}
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)}
/>
)}
@ -326,8 +330,10 @@ function ChartTabCommonSettings(props: FormEditProps) {
</Card>
</TabContent>
<TabContent value="commonSettings_tooltip">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
<Card className="my-2" header="General">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
<Card className="my-2 col-span-2" header="General">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div>
<FormItem
label="Enabled"
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
@ -385,7 +391,8 @@ function ChartTabCommonSettings(props: FormEditProps) {
)}
</Field>
</FormItem>
</div>
<div>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
@ -396,7 +403,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input
{...field}
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)}
/>
)}
@ -406,7 +413,10 @@ function ChartTabCommonSettings(props: FormEditProps) {
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
!!(
errors.tooltipDto?.argumentFormat &&
touched.tooltipDto?.argumentFormat
)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
@ -433,7 +443,11 @@ function ChartTabCommonSettings(props: FormEditProps) {
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
<Field
type="number"
name="tooltipDto.paddingTopBottom"
component={Input}
/>
</FormItem>
<FormItem
@ -446,8 +460,14 @@ function ChartTabCommonSettings(props: FormEditProps) {
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
<Field
type="number"
name="tooltipDto.paddingLeftRight"
component={Input}
/>
</FormItem>
</div>
</div>
</Card>
<Card className="my-2" header="Font">
@ -463,7 +483,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input
{...field}
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)}
/>
)}
@ -649,7 +669,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
<Input
{...field}
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)}
/>
)}

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

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

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

@ -29,7 +29,7 @@ function FormTabColumns(props: FormEditProps) {
}
return (
<Container className="grid xl:grid-cols-2">
<Container>
<Formik
initialValues={listFormValues}
validationSchema={validationSchema}
@ -40,6 +40,8 @@ function FormTabColumns(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
invalid={
@ -104,7 +106,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.rowAlternationEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
)}
component={Checkbox}
/>
</FormItem>
@ -118,7 +122,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.allowColumnReordering"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnReordering',
)}
component={Checkbox}
/>
</FormItem>
@ -146,13 +152,19 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.columnFixingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
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}
invalid={
errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
}
errorMessage={errors.columnOptionDto?.rtlEnabled}
>
<Field
@ -171,7 +183,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox}
/>
</FormItem>
@ -213,7 +227,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.allowColumnResizing"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnResizing',
)}
component={Checkbox}
/>
</FormItem>
@ -229,7 +245,9 @@ function FormTabColumns(props: FormEditProps) {
type="text"
autoComplete="off"
name="columnOptionDto.columnResizingMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnResizingMode',
)}
>
{({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select
@ -269,7 +287,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="columnOptionDto.columnHidingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
)}
component={Checkbox}
/>
</FormItem>
@ -287,6 +307,8 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
</div>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{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')}
component={Input}
textArea={true}
rows={6}
rows={4}
/>
</FormItem>
<FormItem
@ -96,7 +96,7 @@ function FormTabDatabaseDelete({
)}
component={Input}
textArea={true}
rows={6}
rows={4}
/>
</FormItem>
<FormItem
@ -111,7 +111,7 @@ function FormTabDatabaseDelete({
placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteAfterCommand')}
component={Input}
textArea={true}
rows={6}
rows={4}
/>
</FormItem>
</div>

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

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

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

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

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

@ -223,7 +223,7 @@ function FormTabDetails(
component={Checkbox}
/>
</FormItem>
</div>
<FormItem
label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm}
@ -235,6 +235,7 @@ function FormTabDetails(
component={Checkbox}
/>
</FormItem>
</div>
<FormItem
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 }) => (
<Form>
<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">
<Card className="my-2" header="General">
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
invalid={
errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
errors.editingOptionDto?.allowAdding &&
touched.editingOptionDto?.allowAdding
}
errorMessage={errors.editingOptionDto?.allowAdding}
>
@ -86,9 +89,10 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
label={translate(
'::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
)}
invalid={
errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
@ -103,11 +107,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
invalid={
errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail
errors.editingOptionDto?.allowDetail &&
touched.editingOptionDto?.allowDetail
}
errorMessage={errors.editingOptionDto?.allowDetail}
>
@ -117,11 +121,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
invalid={
errors.editingOptionDto?.allowDuplicate && touched.editingOptionDto?.allowDuplicate
errors.editingOptionDto?.allowDuplicate &&
touched.editingOptionDto?.allowDuplicate
}
errorMessage={errors.editingOptionDto?.allowDuplicate}
>
@ -131,7 +135,6 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={
@ -160,6 +163,9 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
</div>
<div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={
@ -187,7 +193,6 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={
@ -204,7 +209,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Checkbox}
/>
</FormItem>
</div>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
@ -230,11 +235,11 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
invalid={
errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
errors.editingOptionDto?.refreshMode &&
touched.editingOptionDto?.refreshMode
}
errorMessage={errors.editingOptionDto?.refreshMode}
>
@ -307,7 +312,8 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
isClearable={true}
options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter(
(option) => option.value === values.editingOptionDto.startEditAction,
(option) =>
option.value === values.editingOptionDto.startEditAction,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
@ -330,6 +336,8 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
component={Input}
/>
</FormItem>
</div>
</div>
</Card>
<Card className="my-2" header="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>
<FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Card className="mt-4">
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5>
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.BasicSettings')}
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem
label={translate('::App.Listform.ListformField.KeyFieldName')}
invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr}
@ -94,9 +98,7 @@ function FormTabGantt(props: FormEditProps) {
<Field
type="text"
name="ganttOptionDto.keyExpr"
placeholder={translate(
'::App.Listform.ListformField.KeyFieldName',
)}
placeholder={translate('::App.Listform.ListformField.KeyFieldName')}
>
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
@ -175,7 +177,8 @@ function FormTabGantt(props: FormEditProps) {
<FormItem
label={translate('::ListForms.ListFormEdit.AutoExpandAll')}
invalid={
errors.ganttOptionDto?.autoExpandAll && touched.ganttOptionDto?.autoExpandAll
errors.ganttOptionDto?.autoExpandAll &&
touched.ganttOptionDto?.autoExpandAll
}
errorMessage={errors.ganttOptionDto?.autoExpandAll}
>
@ -200,10 +203,13 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
</div>
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.ScaleType')}
invalid={errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType}
invalid={
errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType
}
errorMessage={errors.ganttOptionDto?.scaleType}
>
<Field
@ -228,7 +234,9 @@ function FormTabGantt(props: FormEditProps) {
<FormItem
label={translate('::ListForms.ListFormEdit.TitleExpr')}
invalid={errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr}
invalid={
errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr
}
errorMessage={errors.ganttOptionDto?.titleExpr}
>
<Field
@ -253,7 +261,9 @@ function FormTabGantt(props: FormEditProps) {
<FormItem
label={translate('::ListForms.ListFormEdit.StartExpr')}
invalid={errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr}
invalid={
errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr
}
errorMessage={errors.ganttOptionDto?.startExpr}
>
<Field
@ -327,12 +337,16 @@ function FormTabGantt(props: FormEditProps) {
)}
</Field>
</FormItem>
</div>
</div>
</Card>
<Card className="mt-4">
<h5 className="mb-4">
{translate('::ListForms.SchedulerOptions.InteractionSettings')}
</h5>
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowEditing')}
invalid={
@ -391,7 +405,8 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
</div>
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
invalid={
@ -451,6 +466,8 @@ function FormTabGantt(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
</div>
</div>
</Card>
</div>

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

@ -25,7 +25,7 @@ function FormTabPager(props: FormEditProps) {
}
return (
<Container className="grid xl:grid-cols-2">
<Container>
<Formik
initialValues={listFormValues}
validationSchema={validationSchema}
@ -36,6 +36,8 @@ function FormTabPager(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.PageSize')}
invalid={errors.pageSize && touched.pageSize}
@ -50,7 +52,6 @@ function FormTabPager(props: FormEditProps) {
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
@ -97,7 +98,9 @@ function FormTabPager(props: FormEditProps) {
>
<Field
name="pagerOptionDto.showNavigationButtons"
placeholder={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
placeholder={translate(
'::ListForms.ListFormEdit.PagingShowNavigationButtons',
)}
component={Checkbox}
/>
</FormItem>
@ -117,6 +120,8 @@ function FormTabPager(props: FormEditProps) {
component={Input}
/>
</FormItem>
</div>
<div className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.PagingInfoText')}
invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
@ -132,7 +137,9 @@ function FormTabPager(props: FormEditProps) {
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
invalid={errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode}
invalid={
errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode
}
errorMessage={errors.pagerOptionDto?.displayMode}
>
<Field
@ -225,6 +232,8 @@ function FormTabPager(props: FormEditProps) {
component={Input}
/>
</FormItem>
</div>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit">
{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 (
<Container className="grid xl:grid-cols-2">
<Container>
<Formik
initialValues={listFormValues}
validationSchema={validationSchema}
@ -31,10 +31,13 @@ function FormTabColumns(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
invalid={
errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel
errors.pivotOptionDto?.showFieldPanel &&
touched.pivotOptionDto?.showFieldPanel
}
errorMessage={errors.pivotOptionDto?.showFieldPanel}
>
@ -68,7 +71,9 @@ function FormTabColumns(props: FormEditProps) {
>
<Field
name="pivotOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox}
/>
</FormItem>
@ -98,10 +103,13 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
</div>
<div>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={
errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields
errors.pivotOptionDto?.showDataFields &&
touched.pivotOptionDto?.showDataFields
}
errorMessage={errors.pivotOptionDto?.showDataFields}
>
@ -138,7 +146,9 @@ function FormTabColumns(props: FormEditProps) {
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight}
invalid={
errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight
}
errorMessage={errors.pivotOptionDto?.chartHeight}
>
<Field
@ -165,13 +175,16 @@ function FormTabColumns(props: FormEditProps) {
form={form}
options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter(
(option) => option.value === values.pivotOptionDto.chartCommonSeriesType,
(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">
{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 }) => (
<Form>
<FormContainer size="sm">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Card className="mt-4">
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.BasicSettings')}
>
<FormItem
label={translate('::ListForms.SchedulerOptions.TextExpr')}
invalid={
@ -181,9 +182,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem>
</Card>
<Card className="mt-4">
<h5 className="mb-4">{translate('::ListForms.SchedulerOptions.ViewSettings')}</h5>
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.ViewSettings')}
>
<FormItem label={translate('::ListForms.SchedulerOptions.DefaultView')}>
<Field name="schedulerOptionDto.defaultView">
{({ field, form }: FieldProps) => (
@ -273,11 +275,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem>
</Card>
<Card className="mt-4">
<h5 className="mb-4">
{translate('::ListForms.SchedulerOptions.RecurrenceSettings')}
</h5>
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.RecurrenceSettings')}
>
<FormItem
label={translate('::ListForms.SchedulerOptions.RecurrenceRuleExpr')}
invalid={
@ -329,11 +330,10 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem>
</Card>
<Card className="mt-4">
<h5 className="mb-4">
{translate('::ListForms.SchedulerOptions.InteractionSettings')}
</h5>
<Card
className="mt-4"
header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
>
<FormItem label={translate('::ListForms.SchedulerOptions.ShowAllDayPanel')}>
<Field name="schedulerOptionDto.showAllDayPanel" component={Checkbox} />
</FormItem>
@ -363,7 +363,6 @@ function FormTabScheduler(props: FormEditProps) {
</FormItem>
</Card>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button>{' '}

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

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

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

@ -63,7 +63,7 @@ function FormFieldTabCssOptions({
/>
</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')}
</Button>
</FormContainer>

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

@ -70,7 +70,7 @@ function FormFieldTabCustomization({
</Field>
</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')}
</Button>
</FormContainer>

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

@ -133,7 +133,7 @@ function FormFieldTabDetails({
</FormItem>
</Card>
</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')}
</Button>
</Form>

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

@ -84,7 +84,7 @@ function FormFieldTabFiltering({
/>
</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')}
</Button>
</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 { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { SelectBoxOption } from '@/types/shared'
const schema = object().shape({
columnGroupingDto: object()
@ -25,12 +26,21 @@ function FormFieldTabGroupSummary({
listFormCode,
initialValues,
onSubmit,
fields,
}: {
listFormCode: string
initialValues: ColumnFormatEditDto
fields: ColumnFormatEditDto[]
} & FormFieldEditProps) {
const { translate } = useLocalization()
const fieldList: SelectBoxOption[] = fields.length
? fields.map((field) => ({
value: field.fieldName,
label: `${field.fieldName}`,
}))
: []
return (
<Container className="grid xl:grid-cols-2">
<Formik
@ -121,13 +131,25 @@ function FormFieldTabGroupSummary({
>
<Field
type="text"
autoComplete="off"
autoFocus={true}
name="columnGroupSummaryDto.showInColumn"
placeholder={translate(
'::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

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

@ -61,7 +61,7 @@ function FormFieldTabGrouping({
/>
</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')}
</Button>
</FormContainer>

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

@ -65,7 +65,7 @@ function FormFieldTabHeadering({
/>
</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')}
</Button>
</FormContainer>

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

@ -234,7 +234,7 @@ function FormFieldTabJoinOptions({
</FormItem>
</Card>
</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')}
</Button>
</Form>

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

@ -458,7 +458,7 @@ function FormFieldTabLookup({
</FormItem>
</Card>
</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')}
</Button>
</Form>

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

@ -113,7 +113,7 @@ function FormFieldTabOptions({
</Card>
</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')}
</Button>
</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} />
</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')}
</Button>
</FormContainer>

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

@ -214,7 +214,7 @@ function FormFieldTabPivotSetting({
</FormItem>
</Card>
</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')}
</Button>
</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 { FormFieldEditProps } from './FormFields'
import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { SelectBoxOption } from '@/types/shared'
import { useState } from 'react'
const schema = object().shape({
columnTotalSummaryDto: object()
@ -25,12 +27,21 @@ function FormFieldTabTotalSummary({
listFormCode,
initialValues,
onSubmit,
fields,
}: {
listFormCode: string
initialValues: ColumnFormatEditDto
fields: ColumnFormatEditDto[]
} & FormFieldEditProps) {
const { translate } = useLocalization()
const fieldList: SelectBoxOption[] = fields.length
? fields.map((field) => ({
value: field.fieldName,
label: `${field.fieldName}`,
}))
: []
return (
<Container className="grid xl:grid-cols-2">
<Formik
@ -66,12 +77,16 @@ function FormFieldTabTotalSummary({
</Field>
</FormItem>
<FormItem label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}>
<FormItem
label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
>
<Field
type="text"
autoComplete="off"
name="columnTotalSummaryDto.valueFormat"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat',
)}
>
{({ field, form }: FieldProps<any>) => (
<Select
@ -100,7 +115,9 @@ function FormFieldTabTotalSummary({
type="text"
autoComplete="off"
name="columnTotalSummaryDto.displayFormat"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat')}
placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat',
)}
component={Input}
/>
</FormItem>
@ -115,11 +132,25 @@ function FormFieldTabTotalSummary({
>
<Field
type="text"
autoComplete="off"
autoFocus={true}
name="columnTotalSummaryDto.showInColumn"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn')}
component={Input}
placeholder={translate(
'::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
@ -139,12 +170,14 @@ function FormFieldTabTotalSummary({
>
<Field
name="columnTotalSummaryDto.alignByColumn"
placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn')}
placeholder={translate(
'::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn',
)}
component={Checkbox}
/>
</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')}
</Button>
</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} />
</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')}
</Button>
</FormContainer>

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

@ -505,7 +505,7 @@ function FormFields({
</Table>
</div>
<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>
</AdaptableCard>