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

Pivot ve Chart ile ilgili değişiklikler

Browse source
This commit is contained in:
Sedat Öztürk 2025-09-27 23:25:21 +03:00
parent b3c07ae19f
commit 4d1416d5a1
20 changed files with 1767 additions and 1530 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridPivotOptionDto.cs
View file

@ -4,6 +4,7 @@ public class GridPivotOptionDto
{
/// <summary> pivot grid için eklenmiş sütunlardır.
/// </summary>
public bool ColumnChooserEnabled { get; set; }
public bool AllowFieldDragging { get; set; } = true;
public bool ShowFieldPanel { get; set; } = true;
public bool ShowDataFields { get; set; } = true;

2
api/src/Kurs.Platform.Application/ListForms/ListFormCustomizationAppService.cs
View file

@ -89,7 +89,7 @@ public class ListFormCustomizationAppService : PlatformAppService
{
throw new BadHttpRequestException("Type UI veya Grid olmalıdır");
}
if (input.CustomizationData.IsNullOrWhiteSpace())
if (!(input.CustomizationType == ListFormCustomizationTypeEnum.GridState) && input.CustomizationData.IsNullOrWhiteSpace())
{
throw new BadHttpRequestException("Filter data boş olamaz");
}

2
api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
View file

@ -7526,7 +7526,7 @@
{
"key": "admin.chart",
"path": "/admin/chart/:listFormCode",
"componentPath": "@/views/chart/Chart",
"componentPath": "@/views/list/Chart",
"routeType": "protected",
"authority": []
},

1
ui/src/proxy/form/models.ts
View file

@ -358,6 +358,7 @@ export interface GridColumnOptionDto {
}
export interface GridPivotOptionDto {
columnChooserEnabled: boolean
allowFieldDragging: boolean
showFieldPanel: boolean
showDataFields: boolean

9
ui/src/shared/useListFormCustomDataSource.ts
View file

@ -1,9 +1,9 @@
import DataGrid from 'devextreme-react/data-grid'
import PivotGrid from 'devextreme-react/pivot-grid'
import CustomStore from 'devextreme/data/custom_store'
import { MutableRefObject, useCallback, useState } from 'react'
import { MutableRefObject, useCallback } from 'react'
import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models'
import { GridOptionsDto } from '../proxy/form/models'
import { GridColumnData } from '../views/list/GridColumnData'
import { dynamicFetch } from '../services/form.service'
import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
@ -23,6 +23,8 @@ const useListFormCustomDataSource = ({
listFormCode: string,
searchParams?: URLSearchParams,
cols?: GridColumnData[],
group?: string,
groupSummary?: string
) => {
const store: any = new CustomStore({
key: gridOptions.keyFieldName,
@ -32,7 +34,8 @@ const useListFormCustomDataSource = ({
listFormCode,
filter: '',
createDeleteQuery: searchParams?.get('createDeleteQuery'),
group: '',
group,
groupSummary
})
// 1. Default filter'ı al

2
ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx
View file

@ -29,7 +29,6 @@ function ChartTabAnimation(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
@ -79,7 +78,6 @@ function ChartTabAnimation(props: FormEditProps) {
>
<Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
</FormItem>
</Card>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

866
ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
View file

@ -170,460 +170,470 @@ function ChartTabAnnotations(props: FormEditProps) {
/>
</TabContent>
<TabContent value="annotations_common">
<Card className="my-2">
<FormItem
label="Tooltip Enabled"
invalid={
!!(
errors.commonAnnotationSettingsDto?.tooltipEnabled &&
touched.commonAnnotationSettingsDto?.tooltipEnabled
)
}
errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
>
<Field name="commonAnnotationSettingsDto.tooltipEnabled" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<Card className="my-2" header="General">
<FormItem
label="Tooltip Enabled"
invalid={
!!(
errors.commonAnnotationSettingsDto?.tooltipEnabled &&
touched.commonAnnotationSettingsDto?.tooltipEnabled
)
}
errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
>
<Field
name="commonAnnotationSettingsDto.tooltipEnabled"
component={Checkbox}
/>
</FormItem>
<FormItem
label="Pan Key"
invalid={
!!(
errors.commonAnnotationSettingsDto?.type &&
touched.commonAnnotationSettingsDto?.type
)
}
errorMessage={errors.commonAnnotationSettingsDto?.type}
>
<Field type="text" name="commonAnnotationSettingsDto.type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartAnnotationTypeListOptions}
isClearable={true}
value={chartAnnotationTypeListOptions.filter(
(option) => option.value === values.commonAnnotationSettingsDto.type,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Pan Key"
invalid={
!!(
errors.commonAnnotationSettingsDto?.type &&
touched.commonAnnotationSettingsDto?.type
)
}
errorMessage={errors.commonAnnotationSettingsDto?.type}
>
<Field type="text" name="commonAnnotationSettingsDto.type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartAnnotationTypeListOptions}
isClearable={true}
value={chartAnnotationTypeListOptions.filter(
(option) => option.value === values.commonAnnotationSettingsDto.type,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Pan Key"
invalid={
!!(
errors.commonAnnotationSettingsDto?.series &&
touched.commonAnnotationSettingsDto?.series
)
}
errorMessage={errors.commonAnnotationSettingsDto?.series}
>
<Field type="text" name="commonAnnotationSettingsDto.series">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={SeriesList()}
isClearable={true}
value={SeriesList()?.find(
(option) => option.value === values.commonAnnotationSettingsDto.series,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Pan Key"
invalid={
!!(
errors.commonAnnotationSettingsDto?.series &&
touched.commonAnnotationSettingsDto?.series
)
}
errorMessage={errors.commonAnnotationSettingsDto?.series}
>
<Field type="text" name="commonAnnotationSettingsDto.series">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={SeriesList()}
isClearable={true}
value={SeriesList()?.find(
(option) =>
option.value === values.commonAnnotationSettingsDto.series,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument"
invalid={
!!(
errors.commonAnnotationSettingsDto?.argument &&
touched.commonAnnotationSettingsDto?.argument
)
}
errorMessage={errors.commonAnnotationSettingsDto?.argument}
>
<Field name="commonAnnotationSettingsDto.argument" component={Input} />
</FormItem>
<FormItem
label="Argument"
invalid={
!!(
errors.commonAnnotationSettingsDto?.argument &&
touched.commonAnnotationSettingsDto?.argument
)
}
errorMessage={errors.commonAnnotationSettingsDto?.argument}
>
<Field name="commonAnnotationSettingsDto.argument" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.color &&
touched.commonAnnotationSettingsDto?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.color}
>
<Field name="commonAnnotationSettingsDto.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.color &&
touched.commonAnnotationSettingsDto?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.color}
>
<Field name="commonAnnotationSettingsDto.color" component={Input} />
</FormItem>
<FormItem
label="Value"
invalid={
!!(
errors.commonAnnotationSettingsDto?.value &&
touched.commonAnnotationSettingsDto?.value
)
}
errorMessage={errors.commonAnnotationSettingsDto?.value}
>
<Field name="commonAnnotationSettingsDto.value" component={Input} />
</FormItem>
<FormItem
label="Value"
invalid={
!!(
errors.commonAnnotationSettingsDto?.value &&
touched.commonAnnotationSettingsDto?.value
)
}
errorMessage={errors.commonAnnotationSettingsDto?.value}
>
<Field name="commonAnnotationSettingsDto.value" component={Input} />
</FormItem>
<FormItem
label="Description"
invalid={
!!(
errors.commonAnnotationSettingsDto?.description &&
touched.commonAnnotationSettingsDto?.description
)
}
errorMessage={errors.commonAnnotationSettingsDto?.description}
>
<Field name="commonAnnotationSettingsDto.description" component={Input} />
</FormItem>
<FormItem
label="Description"
invalid={
!!(
errors.commonAnnotationSettingsDto?.description &&
touched.commonAnnotationSettingsDto?.description
)
}
errorMessage={errors.commonAnnotationSettingsDto?.description}
>
<Field name="commonAnnotationSettingsDto.description" component={Input} />
</FormItem>
<FormItem
label="Image"
invalid={
!!(
errors.commonAnnotationSettingsDto?.image &&
touched.commonAnnotationSettingsDto?.image
)
}
errorMessage={errors.commonAnnotationSettingsDto?.image}
>
<Field name="commonAnnotationSettingsDto.image" component={Input} />
</FormItem>
<FormItem
label="Image"
invalid={
!!(
errors.commonAnnotationSettingsDto?.image &&
touched.commonAnnotationSettingsDto?.image
)
}
errorMessage={errors.commonAnnotationSettingsDto?.image}
>
<Field name="commonAnnotationSettingsDto.image" component={Input} />
</FormItem>
<FormItem
label="Text"
invalid={
!!(
errors.commonAnnotationSettingsDto?.text &&
touched.commonAnnotationSettingsDto?.text
)
}
errorMessage={errors.commonAnnotationSettingsDto?.text}
>
<Field name="commonAnnotationSettingsDto.text" component={Input} />
</FormItem>
<FormItem
label="Text"
invalid={
!!(
errors.commonAnnotationSettingsDto?.text &&
touched.commonAnnotationSettingsDto?.text
)
}
errorMessage={errors.commonAnnotationSettingsDto?.text}
>
<Field name="commonAnnotationSettingsDto.text" component={Input} />
</FormItem>
<FormItem
label="Word Wrap"
invalid={
!!(
errors.commonAnnotationSettingsDto?.wordWrap &&
touched.commonAnnotationSettingsDto?.wordWrap
)
}
errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
>
<Field type="text" name="commonAnnotationSettingsDto.wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartWordWrapListOptions}
isClearable={true}
value={chartWordWrapListOptions.filter(
(option) =>
option.value === values.commonAnnotationSettingsDto.wordWrap,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Word Wrap"
invalid={
!!(
errors.commonAnnotationSettingsDto?.wordWrap &&
touched.commonAnnotationSettingsDto?.wordWrap
)
}
errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
>
<Field type="text" name="commonAnnotationSettingsDto.wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartWordWrapListOptions}
isClearable={true}
value={chartWordWrapListOptions.filter(
(option) =>
option.value === values.commonAnnotationSettingsDto.wordWrap,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonAnnotationSettingsDto?.width &&
touched.commonAnnotationSettingsDto?.width
)
}
errorMessage={errors.commonAnnotationSettingsDto?.width}
>
<Field
type="number"
name="commonAnnotationSettingsDto.width"
component={Input}
/>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonAnnotationSettingsDto?.width &&
touched.commonAnnotationSettingsDto?.width
)
}
errorMessage={errors.commonAnnotationSettingsDto?.width}
>
<Field
type="number"
name="commonAnnotationSettingsDto.width"
component={Input}
/>
</FormItem>
<FormItem
label="Height"
invalid={
!!(
errors.commonAnnotationSettingsDto?.height &&
touched.commonAnnotationSettingsDto?.height
)
}
errorMessage={errors.commonAnnotationSettingsDto?.height}
>
<Field
type="number"
name="commonAnnotationSettingsDto.height"
component={Input}
/>
</FormItem>
<FormItem
label="Height"
invalid={
!!(
errors.commonAnnotationSettingsDto?.height &&
touched.commonAnnotationSettingsDto?.height
)
}
errorMessage={errors.commonAnnotationSettingsDto?.height}
>
<Field
type="number"
name="commonAnnotationSettingsDto.height"
component={Input}
/>
</FormItem>
<FormItem
label="X"
invalid={
!!(
errors.commonAnnotationSettingsDto?.x &&
touched.commonAnnotationSettingsDto?.x
)
}
errorMessage={errors.commonAnnotationSettingsDto?.x}
>
<Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
</FormItem>
<FormItem
label="X"
invalid={
!!(
errors.commonAnnotationSettingsDto?.x &&
touched.commonAnnotationSettingsDto?.x
)
}
errorMessage={errors.commonAnnotationSettingsDto?.x}
>
<Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
</FormItem>
<FormItem
label="Y"
invalid={
!!(
errors.commonAnnotationSettingsDto?.y &&
touched.commonAnnotationSettingsDto?.y
)
}
errorMessage={errors.commonAnnotationSettingsDto?.y}
>
<Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
</FormItem>
<FormItem
label="Y"
invalid={
!!(
errors.commonAnnotationSettingsDto?.y &&
touched.commonAnnotationSettingsDto?.y
)
}
errorMessage={errors.commonAnnotationSettingsDto?.y}
>
<Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
</FormItem>
<FormItem
label="Offset X"
invalid={
!!(
errors.commonAnnotationSettingsDto?.offsetX &&
touched.commonAnnotationSettingsDto?.offsetX
)
}
errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
>
<Field
type="number"
name="commonAnnotationSettingsDto.offsetX"
component={Input}
/>
</FormItem>
<FormItem
label="Offset X"
invalid={
!!(
errors.commonAnnotationSettingsDto?.offsetX &&
touched.commonAnnotationSettingsDto?.offsetX
)
}
errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
>
<Field
type="number"
name="commonAnnotationSettingsDto.offsetX"
component={Input}
/>
</FormItem>
<FormItem
label="Offset Y"
invalid={
!!(
errors.commonAnnotationSettingsDto?.offsetY &&
touched.commonAnnotationSettingsDto?.offsetY
)
}
errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
>
<Field
type="number"
name="commonAnnotationSettingsDto.offsetY"
component={Input}
/>
</FormItem>
<FormItem
label="Offset Y"
invalid={
!!(
errors.commonAnnotationSettingsDto?.offsetY &&
touched.commonAnnotationSettingsDto?.offsetY
)
}
errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
>
<Field
type="number"
name="commonAnnotationSettingsDto.offsetY"
component={Input}
/>
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.commonAnnotationSettingsDto?.paddingLeftRight &&
touched.commonAnnotationSettingsDto?.paddingLeftRight
)
}
errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
>
<Field
type="number"
name="commonAnnotationSettingsDto.paddingLeftRight"
component={Input}
/>
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.commonAnnotationSettingsDto?.paddingLeftRight &&
touched.commonAnnotationSettingsDto?.paddingLeftRight
)
}
errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
>
<Field
type="number"
name="commonAnnotationSettingsDto.paddingLeftRight"
component={Input}
/>
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.commonAnnotationSettingsDto?.paddingTopBottom &&
touched.commonAnnotationSettingsDto?.paddingTopBottom
)
}
errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
>
<Field
type="number"
name="commonAnnotationSettingsDto.paddingTopBottom"
component={Input}
/>
</FormItem>
</Card>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.commonAnnotationSettingsDto?.paddingTopBottom &&
touched.commonAnnotationSettingsDto?.paddingTopBottom
)
}
errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
>
<Field
type="number"
name="commonAnnotationSettingsDto.paddingTopBottom"
component={Input}
/>
</FormItem>
</Card>
<Card className="my-2" header="Common Annotations - Border">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.visible &&
touched.commonAnnotationSettingsDto?.border?.visible
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
>
<Field name="commonAnnotationSettingsDto.border.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Border">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.visible &&
touched.commonAnnotationSettingsDto?.border?.visible
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
>
<Field
name="commonAnnotationSettingsDto.border.visible"
component={Checkbox}
/>
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.color &&
touched.commonAnnotationSettingsDto?.border?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
>
<Field
type="text"
name="commonAnnotationSettingsDto.border.color"
component={Input}
/>
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.color &&
touched.commonAnnotationSettingsDto?.border?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
>
<Field
type="text"
name="commonAnnotationSettingsDto.border.color"
component={Input}
/>
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.dashStyle &&
touched.commonAnnotationSettingsDto?.border?.dashStyle
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
>
<Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) =>
option.value === values.commonAnnotationSettingsDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.dashStyle &&
touched.commonAnnotationSettingsDto?.border?.dashStyle
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
>
<Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) =>
option.value ===
values.commonAnnotationSettingsDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
touched.commonAnnotationSettingsDto?.border?.cornerRadius
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
>
<Field
type="number"
name="commonAnnotationSettingsDto.border.cornerRadius"
component={Input}
/>
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
touched.commonAnnotationSettingsDto?.border?.cornerRadius
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
>
<Field
type="number"
name="commonAnnotationSettingsDto.border.cornerRadius"
component={Input}
/>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.width &&
touched.commonAnnotationSettingsDto?.border?.width
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
>
<Field
type="number"
name="commonAnnotationSettingsDto.border.width"
component={Input}
/>
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.commonAnnotationSettingsDto?.border?.width &&
touched.commonAnnotationSettingsDto?.border?.width
)
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
>
<Field
type="number"
name="commonAnnotationSettingsDto.border.width"
component={Input}
/>
</FormItem>
</Card>
<Card className="my-2" header="Common Annotations - Font">
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.color &&
touched.commonAnnotationSettingsDto?.font?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
>
<Field name="commonAnnotationSettingsDto.font.color" component={Input} />
</FormItem>
<Card className="my-2" header="Font">
<FormItem
label="Color"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.color &&
touched.commonAnnotationSettingsDto?.font?.color
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
>
<Field name="commonAnnotationSettingsDto.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.family &&
touched.commonAnnotationSettingsDto?.font?.family
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
>
<Field name="commonAnnotationSettingsDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.family &&
touched.commonAnnotationSettingsDto?.font?.family
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
>
<Field name="commonAnnotationSettingsDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.size &&
touched.commonAnnotationSettingsDto?.font?.size
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
>
<Field
type="number"
name="commonAnnotationSettingsDto.font.size"
component={Input}
/>
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.size &&
touched.commonAnnotationSettingsDto?.font?.size
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
>
<Field
type="number"
name="commonAnnotationSettingsDto.font.size"
component={Input}
/>
</FormItem>
<FormItem
label="Weight"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.weight &&
touched.commonAnnotationSettingsDto?.font?.weight
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
>
<Field
type="number"
name="commonAnnotationSettingsDto.font.weight"
component={Input}
/>
</FormItem>
</Card>
<FormItem
label="Weight"
invalid={
!!(
errors.commonAnnotationSettingsDto?.font?.weight &&
touched.commonAnnotationSettingsDto?.font?.weight
)
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
>
<Field
type="number"
name="commonAnnotationSettingsDto.font.weight"
component={Input}
/>
</FormItem>
</Card>
</div>
</TabContent>
</Tabs>
<div className="mt-4">

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

@ -163,340 +163,353 @@ function ChartTabAxis(props: FormEditProps) {
/>
</TabContent>
<TabContent value="axis_argument">
<Card className="my-2">
<FormItem
label="Visible"
invalid={
!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
}
errorMessage={errors.argumentAxisDto?.visible}
>
<Field name="argumentAxisDto.visible" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<Card className="my-2" header="General">
<FormItem
label="Visible"
invalid={
!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
}
errorMessage={errors.argumentAxisDto?.visible}
>
<Field name="argumentAxisDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Workdays Only"
invalid={
!!(
errors.argumentAxisDto?.workdaysOnly &&
touched.argumentAxisDto?.workdaysOnly
)
}
errorMessage={errors.argumentAxisDto?.workdaysOnly}
>
<Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
</FormItem>
<FormItem
label="Workdays Only"
invalid={
!!(
errors.argumentAxisDto?.workdaysOnly &&
touched.argumentAxisDto?.workdaysOnly
)
}
errorMessage={errors.argumentAxisDto?.workdaysOnly}
>
<Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
</FormItem>
<FormItem
label="Title"
invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
errorMessage={errors.argumentAxisDto?.title}
>
<Field type="text" name="argumentAxisDto.title" component={Input} />
</FormItem>
<FormItem
label="Title"
invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
errorMessage={errors.argumentAxisDto?.title}
>
<Field type="text" name="argumentAxisDto.title" component={Input} />
</FormItem>
<FormItem
label="Hover Mode"
invalid={
!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)
}
errorMessage={errors.argumentAxisDto?.hoverMode}
>
<Field type="text" name="argumentAxisDto.hoverMode">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisHoverModeListOptions}
isClearable={true}
value={chartArgumentAxisHoverModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.hoverMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Hover Mode"
invalid={
!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)
}
errorMessage={errors.argumentAxisDto?.hoverMode}
>
<Field type="text" name="argumentAxisDto.hoverMode">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisHoverModeListOptions}
isClearable={true}
value={chartArgumentAxisHoverModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.hoverMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument Type"
invalid={
!!(
errors.argumentAxisDto?.argumentType &&
touched.argumentAxisDto?.argumentType
)
}
errorMessage={errors.argumentAxisDto?.argumentType}
>
<Field type="text" name="argumentAxisDto.argumentType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisTypeListOptions}
isClearable={true}
value={chartArgumentAxisTypeListOptions.filter(
(option) => option.value === values.argumentAxisDto.argumentType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument Type"
invalid={
!!(
errors.argumentAxisDto?.argumentType &&
touched.argumentAxisDto?.argumentType
)
}
errorMessage={errors.argumentAxisDto?.argumentType}
>
<Field type="text" name="argumentAxisDto.argumentType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisTypeListOptions}
isClearable={true}
value={chartArgumentAxisTypeListOptions.filter(
(option) => option.value === values.argumentAxisDto.argumentType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Position"
invalid={
!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)
}
errorMessage={errors.argumentAxisDto?.position}
>
<Field type="text" name="argumentAxisDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisPositionListOptions}
isClearable={true}
value={chartArgumentAxisPositionListOptions.filter(
(option) => option.value === values.argumentAxisDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Position"
invalid={
!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)
}
errorMessage={errors.argumentAxisDto?.position}
>
<Field type="text" name="argumentAxisDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisPositionListOptions}
isClearable={true}
value={chartArgumentAxisPositionListOptions.filter(
(option) => option.value === values.argumentAxisDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
errorMessage={errors.argumentAxisDto?.width}
>
<Field type="number" name="argumentAxisDto.width" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
errorMessage={errors.argumentAxisDto?.width}
>
<Field type="number" name="argumentAxisDto.width" component={Input} />
</FormItem>
<FormItem
label="Aggregation Interval"
invalid={
!!(
errors.argumentAxisDto?.aggregationInterval &&
touched.argumentAxisDto?.aggregationInterval
)
}
errorMessage={errors.argumentAxisDto?.aggregationInterval}
>
<Field type="text" name="argumentAxisDto.aggregationInterval">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisIntervalListOptions}
isClearable={true}
value={chartArgumentAxisIntervalListOptions.filter(
(option) => option.value === values.argumentAxisDto.aggregationInterval,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<FormItem
label="Aggregation Interval"
invalid={
!!(
errors.argumentAxisDto?.aggregationInterval &&
touched.argumentAxisDto?.aggregationInterval
)
}
errorMessage={errors.argumentAxisDto?.aggregationInterval}
>
<Field type="text" name="argumentAxisDto.aggregationInterval">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisIntervalListOptions}
isClearable={true}
value={chartArgumentAxisIntervalListOptions.filter(
(option) =>
option.value === values.argumentAxisDto.aggregationInterval,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<Card className="my-2" header="Argument Axis - Grid">
<FormItem
label="Visible"
invalid={
!!(
errors.argumentAxisDto?.grid?.visible &&
touched.argumentAxisDto?.grid?.visible
)
}
errorMessage={errors.argumentAxisDto?.grid?.visible}
>
<Field name="argumentAxisDto.grid.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Grid">
<FormItem
label="Visible"
invalid={
!!(
errors.argumentAxisDto?.grid?.visible &&
touched.argumentAxisDto?.grid?.visible
)
}
errorMessage={errors.argumentAxisDto?.grid?.visible}
>
<Field name="argumentAxisDto.grid.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.argumentAxisDto?.grid?.color && touched.argumentAxisDto?.grid?.color
)
}
errorMessage={errors.argumentAxisDto?.grid?.color}
>
<Field type="text" name="argumentAxisDto.grid.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.argumentAxisDto?.grid?.color &&
touched.argumentAxisDto?.grid?.color
)
}
errorMessage={errors.argumentAxisDto?.grid?.color}
>
<Field type="text" name="argumentAxisDto.grid.color" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.argumentAxisDto?.grid?.width && touched.argumentAxisDto?.grid?.width
)
}
errorMessage={errors.argumentAxisDto?.grid?.width}
>
<Field type="number" name="argumentAxisDto.grid.width" component={Input} />
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.argumentAxisDto?.grid?.width &&
touched.argumentAxisDto?.grid?.width
)
}
errorMessage={errors.argumentAxisDto?.grid?.width}
>
<Field type="number" name="argumentAxisDto.grid.width" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Argument Axis - Label">
<FormItem
label="Position"
invalid={
!!(
errors.argumentAxisDto?.label?.displayMode &&
touched.argumentAxisDto?.label?.displayMode
)
}
errorMessage={errors.argumentAxisDto?.label?.displayMode}
>
<Field type="text" name="argumentAxisDto.label.displayMode">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisLabelDisplayModeListOptions}
isClearable={true}
value={chartArgumentAxisLabelDisplayModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.label.displayMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<Card className="my-2" header="Label">
<FormItem
label="Position"
invalid={
!!(
errors.argumentAxisDto?.label?.displayMode &&
touched.argumentAxisDto?.label?.displayMode
)
}
errorMessage={errors.argumentAxisDto?.label?.displayMode}
>
<Field type="text" name="argumentAxisDto.label.displayMode">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisLabelDisplayModeListOptions}
isClearable={true}
value={chartArgumentAxisLabelDisplayModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.label.displayMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Rotation Angle"
invalid={
!!(
errors.argumentAxisDto?.label?.rotationAngle &&
touched.argumentAxisDto?.label?.rotationAngle
)
}
errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
>
<Field
type="number"
name="argumentAxisDto.label.rotationAngle"
component={Input}
/>
</FormItem>
<FormItem
label="Rotation Angle"
invalid={
!!(
errors.argumentAxisDto?.label?.rotationAngle &&
touched.argumentAxisDto?.label?.rotationAngle
)
}
errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
>
<Field
type="number"
name="argumentAxisDto.label.rotationAngle"
component={Input}
/>
</FormItem>
<FormItem
label="Overlapping Behavior"
invalid={
!!(
errors.argumentAxisDto?.label?.overlappingBehavior &&
touched.argumentAxisDto?.label?.overlappingBehavior
)
}
errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
>
<Field type="text" name="argumentAxisDto.label.overlappingBehavior">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
isClearable={true}
value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
(option) =>
option.value === values.argumentAxisDto.label.overlappingBehavior,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<FormItem
label="Overlapping Behavior"
invalid={
!!(
errors.argumentAxisDto?.label?.overlappingBehavior &&
touched.argumentAxisDto?.label?.overlappingBehavior
)
}
errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
>
<Field type="text" name="argumentAxisDto.label.overlappingBehavior">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
isClearable={true}
value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
(option) =>
option.value === values.argumentAxisDto.label.overlappingBehavior,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
</div>
</TabContent>
<TabContent value="axis_common">
<Card className="my-2">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAxisSettingsDto?.visible &&
touched.commonAxisSettingsDto?.visible
)
}
errorMessage={errors.commonAxisSettingsDto?.visible}
>
<Field name="commonAxisSettingsDto.visible" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<Card className="my-2" header="General">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAxisSettingsDto?.visible &&
touched.commonAxisSettingsDto?.visible
)
}
errorMessage={errors.commonAxisSettingsDto?.visible}
>
<Field name="commonAxisSettingsDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Title"
invalid={
!!(
errors.commonAxisSettingsDto?.title && touched.commonAxisSettingsDto?.title
)
}
errorMessage={errors.commonAxisSettingsDto?.title}
>
<Field type="text" name="title" component={Input} />
</FormItem>
<FormItem
label="Title"
invalid={
!!(
errors.commonAxisSettingsDto?.title &&
touched.commonAxisSettingsDto?.title
)
}
errorMessage={errors.commonAxisSettingsDto?.title}
>
<Field type="text" name="title" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonAxisSettingsDto?.width && touched.commonAxisSettingsDto?.width
)
}
errorMessage={errors.commonAxisSettingsDto?.width}
>
<Field type="number" name="commonAxisSettingsDto.width" component={Input} />
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.commonAxisSettingsDto?.width &&
touched.commonAxisSettingsDto?.width
)
}
errorMessage={errors.commonAxisSettingsDto?.width}
>
<Field type="number" name="commonAxisSettingsDto.width" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Common Axis Settings - Grid">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.visible &&
touched.commonAxisSettingsDto?.grid?.visible
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
>
<Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Grid">
<FormItem
label="Visible"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.visible &&
touched.commonAxisSettingsDto?.grid?.visible
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
>
<Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.color &&
touched.commonAxisSettingsDto?.grid?.color
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
>
<Field type="text" name="commonAxisSettingsDto.grid.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.color &&
touched.commonAxisSettingsDto?.grid?.color
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
>
<Field
type="text"
name="commonAxisSettingsDto.grid.color"
component={Input}
/>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.width &&
touched.commonAxisSettingsDto?.grid?.width
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.width}
>
<Field
type="number"
name="commonAxisSettingsDto.grid.width"
component={Input}
/>
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.commonAxisSettingsDto?.grid?.width &&
touched.commonAxisSettingsDto?.grid?.width
)
}
errorMessage={errors.commonAxisSettingsDto?.grid?.width}
>
<Field
type="number"
name="commonAxisSettingsDto.grid.width"
component={Input}
/>
</FormItem>
</Card>
</div>
</TabContent>
</Tabs>
<div className="mt-4">

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

@ -318,206 +318,228 @@ function ChartTabCommonSettings(props: FormEditProps) {
</Card>
</TabContent>
<TabContent value="commonSettings_tooltip">
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
errorMessage={errors.tooltipDto?.enabled as string}
>
<Field name="tooltipDto.keepLabels" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
<Card className="my-2" header="General">
<FormItem
label="Enabled"
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
errorMessage={errors.tooltipDto?.enabled as string}
>
<Field name="tooltipDto.keepLabels" component={Checkbox} />
</FormItem>
<FormItem
label="Shared"
invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
errorMessage={errors.tooltipDto?.shared as string}
>
<Field name="tooltipDto.shared" component={Checkbox} />
</FormItem>
<FormItem
label="Shared"
invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
errorMessage={errors.tooltipDto?.shared as string}
>
<Field name="tooltipDto.shared" component={Checkbox} />
</FormItem>
<FormItem
label="Format"
invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
errorMessage={errors.tooltipDto?.format}
>
<Field type="text" name="tooltipDto.format">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={tooltipFormatListOptions}
isClearable={true}
value={tooltipFormatListOptions.filter(
(option) => option.value === values.tooltipDto.format,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Location"
invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
errorMessage={errors.tooltipDto?.location}
>
<Field type="text" name="tooltipDto.location">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTooltipLocationListOptions}
isClearable={true}
value={chartTooltipLocationListOptions.filter(
(option) => option.value === values.tooltipDto.location,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color" component={Input} />
</FormItem>
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom && touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.tooltipDto?.paddingLeftRight && touched.tooltipDto?.paddingLeftRight
)
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
</FormItem>
</Card>
<div className="font-bold m-3">Tooltip Settings - Font</div>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)}
errorMessage={errors.tooltipDto?.font?.color}
>
<Field name="tooltipDto.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)}
errorMessage={errors.tooltipDto?.font?.family}
>
<Field name="tooltipDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
errorMessage={errors.tooltipDto?.font?.size}
>
<Field type="number" name="tooltipDto.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)}
errorMessage={errors.tooltipDto?.font?.weight}
>
<Field type="number" name="tooltipDto.font.weight" component={Input} />
</FormItem>
<div className="font-bold m-3">Tooltip Settings - Border</div>
<FormItem
label="Visible"
invalid={
!!(errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible)
}
errorMessage={errors.tooltipDto?.border?.visible as string}
>
<Field name="tooltipDto.border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.tooltipDto?.border?.dashStyle && touched.tooltipDto?.border?.dashStyle
)
}
errorMessage={errors.tooltipDto?.border?.dashStyle}
>
<Field type="text" name="tooltipDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.tooltipDto.border.dashStyle,
<FormItem
label="Format"
invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
errorMessage={errors.tooltipDto?.format}
>
<Field type="text" name="tooltipDto.format">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={tooltipFormatListOptions}
isClearable={true}
value={tooltipFormatListOptions.filter(
(option) => option.value === values.tooltipDto.format,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
</Field>
</FormItem>
<FormItem
label="Location"
invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
errorMessage={errors.tooltipDto?.location}
>
<Field type="text" name="tooltipDto.location">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTooltipLocationListOptions}
isClearable={true}
value={chartTooltipLocationListOptions.filter(
(option) => option.value === values.tooltipDto.location,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color" component={Input} />
</FormItem>
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={
!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom &&
touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.tooltipDto?.paddingLeftRight &&
touched.tooltipDto?.paddingLeftRight
)
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Font">
<FormItem
label="Color"
invalid={
!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)
}
errorMessage={errors.tooltipDto?.font?.color}
>
<Field name="tooltipDto.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)
}
errorMessage={errors.tooltipDto?.font?.family}
>
<Field name="tooltipDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
errorMessage={errors.tooltipDto?.font?.size}
>
<Field type="number" name="tooltipDto.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={
!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)
}
errorMessage={errors.tooltipDto?.font?.weight}
>
<Field type="number" name="tooltipDto.font.weight" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Border">
<FormItem
label="Visible"
invalid={
!!(
errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible
)
}
errorMessage={errors.tooltipDto?.border?.visible as string}
>
<Field name="tooltipDto.border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.tooltipDto?.border?.dashStyle &&
touched.tooltipDto?.border?.dashStyle
)
}
errorMessage={errors.tooltipDto?.border?.dashStyle}
>
<Field type="text" name="tooltipDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.tooltipDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)
}
errorMessage={errors.tooltipDto?.border?.width}
>
<Field type="number" name="tooltipDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.tooltipDto?.border?.cornerRadius &&
touched.tooltipDto?.border?.cornerRadius
)
}
errorMessage={errors.tooltipDto?.border?.cornerRadius}
>
<Field
type="number"
name="tooltipDto.border.cornerRadius"
component={Input}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)
}
errorMessage={errors.tooltipDto?.border?.width}
>
<Field type="number" name="tooltipDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.tooltipDto?.border?.cornerRadius &&
touched.tooltipDto?.border?.cornerRadius
)
}
errorMessage={errors.tooltipDto?.border?.cornerRadius}
>
<Field type="number" name="tooltipDto.border.cornerRadius" component={Input} />
</FormItem>
</FormItem>
</Card>
</div>
</TabContent>
<TabContent value="commonSettings_margin">
<Card className="my-2">

554
ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
View file

@ -30,301 +30,303 @@ function ChartTabCrosshair(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
errorMessage={errors.crosshairDto?.enabled as string}
>
<Field name="crosshairDto.enabled" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
<Card className="my-2" header="Crosshair Options">
<FormItem
label="Enabled"
invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
errorMessage={errors.crosshairDto?.enabled as string}
>
<Field name="crosshairDto.enabled" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
errorMessage={errors.crosshairDto?.color}
>
<Field type="text" name="crosshairDto.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
errorMessage={errors.crosshairDto?.color}
>
<Field type="text" name="crosshairDto.color" component={Input} />
</FormItem>
<FormItem
label="Dash Style"
invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
errorMessage={errors.crosshairDto?.dashStyle}
>
<Field type="text" name="crosshairDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
errorMessage={errors.crosshairDto?.dashStyle}
>
<Field type="text" name="crosshairDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
errorMessage={errors.crosshairDto?.width}
>
<Field type="number" name="crosshairDto.width" component={Input} />
</FormItem>
</Card>
<FormItem
label="Width"
invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
errorMessage={errors.crosshairDto?.width}
>
<Field type="number" name="crosshairDto.width" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Crosshair Options - Label">
<FormItem
label="Visible"
invalid={
!!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)
}
errorMessage={errors.crosshairDto?.label?.visible as string}
>
<Field name="crosshairDto.label.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Label Options">
<FormItem
label="Visible"
invalid={
!!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)
}
errorMessage={errors.crosshairDto?.label?.visible as string}
>
<Field name="crosshairDto.label.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Background Color"
invalid={
!!(
errors.crosshairDto?.label?.backgroundColor &&
touched.crosshairDto?.label?.backgroundColor
)
}
errorMessage={errors.crosshairDto?.label?.backgroundColor}
>
<Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
</FormItem>
<FormItem
label="Background Color"
invalid={
!!(
errors.crosshairDto?.label?.backgroundColor &&
touched.crosshairDto?.label?.backgroundColor
)
}
errorMessage={errors.crosshairDto?.label?.backgroundColor}
>
<Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
</FormItem>
<FormItem
label="Format"
invalid={
!!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)
}
errorMessage={errors.crosshairDto?.label?.format}
>
<Field type="text" name="crosshairDto.label.format">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={tooltipFormatListOptions}
isClearable={true}
value={tooltipFormatListOptions.filter(
(option) => option.value === values.crosshairDto.label.format,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Format"
invalid={
!!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)
}
errorMessage={errors.crosshairDto?.label?.format}
>
<Field type="text" name="crosshairDto.label.format">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={tooltipFormatListOptions}
isClearable={true}
value={tooltipFormatListOptions.filter(
(option) => option.value === values.crosshairDto.label.format,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Customize Text"
invalid={
!!(
errors.crosshairDto?.label?.customizeText &&
touched.crosshairDto?.label?.customizeText
)
}
errorMessage={errors.crosshairDto?.label?.customizeText}
>
<Field type="text" name="crosshairDto.label.customizeText" component={Input} />
</FormItem>
</Card>
<FormItem
label="Customize Text"
invalid={
!!(
errors.crosshairDto?.label?.customizeText &&
touched.crosshairDto?.label?.customizeText
)
}
errorMessage={errors.crosshairDto?.label?.customizeText}
>
<Field type="text" name="crosshairDto.label.customizeText" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Crosshair Options - Label - Font">
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.label?.font?.color &&
touched.crosshairDto?.label?.font?.color
)
}
errorMessage={errors.crosshairDto?.label?.font?.color}
>
<Field type="text" name="crosshairDto.label.font.color" component={Input} />
</FormItem>
<Card className="my-2" header="Font Options">
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.label?.font?.color &&
touched.crosshairDto?.label?.font?.color
)
}
errorMessage={errors.crosshairDto?.label?.font?.color}
>
<Field type="text" name="crosshairDto.label.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(
errors.crosshairDto?.label?.font?.family &&
touched.crosshairDto?.label?.font?.family
)
}
errorMessage={errors.crosshairDto?.label?.font?.family}
>
<Field type="text" name="crosshairDto.label.font.family" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(
errors.crosshairDto?.label?.font?.family &&
touched.crosshairDto?.label?.font?.family
)
}
errorMessage={errors.crosshairDto?.label?.font?.family}
>
<Field type="text" name="crosshairDto.label.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.crosshairDto?.label?.font?.size &&
touched.crosshairDto?.label?.font?.size
)
}
errorMessage={errors.crosshairDto?.label?.font?.size}
>
<Field type="number" name="crosshairDto.label.font.size" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.crosshairDto?.label?.font?.size &&
touched.crosshairDto?.label?.font?.size
)
}
errorMessage={errors.crosshairDto?.label?.font?.size}
>
<Field type="number" name="crosshairDto.label.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={
!!(
errors.crosshairDto?.label?.font?.weight &&
touched.crosshairDto?.label?.font?.weight
)
}
errorMessage={errors.crosshairDto?.label?.font?.weight}
>
<Field type="number" name="crosshairDto.label.font.weight" component={Input} />
</FormItem>
</Card>
<FormItem
label="Weight"
invalid={
!!(
errors.crosshairDto?.label?.font?.weight &&
touched.crosshairDto?.label?.font?.weight
)
}
errorMessage={errors.crosshairDto?.label?.font?.weight}
>
<Field type="number" name="crosshairDto.label.font.weight" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
<FormItem
label="Visible"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.visible &&
touched.crosshairDto?.horizontalLine?.visible
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
>
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Label - Horizontal Line">
<FormItem
label="Visible"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.visible &&
touched.crosshairDto?.horizontalLine?.visible
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
>
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.color &&
touched.crosshairDto?.horizontalLine?.color
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.color}
>
<Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.color &&
touched.crosshairDto?.horizontalLine?.color
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.color}
>
<Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.dashStyle &&
touched.crosshairDto?.horizontalLine?.dashStyle
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
>
<Field type="text" name="crosshairDto.horizontalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.dashStyle &&
touched.crosshairDto?.horizontalLine?.dashStyle
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
>
<Field type="text" name="crosshairDto.horizontalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.width &&
touched.crosshairDto?.horizontalLine?.width
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.width}
>
<Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.crosshairDto?.horizontalLine?.width &&
touched.crosshairDto?.horizontalLine?.width
)
}
errorMessage={errors.crosshairDto?.horizontalLine?.width}
>
<Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Crosshair Options - Label - Vertical Line">
<FormItem
label="Visible"
invalid={
!!(
errors.crosshairDto?.verticalLine?.visible &&
touched.crosshairDto?.verticalLine?.visible
)
}
errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
>
<Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
</FormItem>
<Card className="my-2" header="Label - Vertical Line">
<FormItem
label="Visible"
invalid={
!!(
errors.crosshairDto?.verticalLine?.visible &&
touched.crosshairDto?.verticalLine?.visible
)
}
errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
>
<Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.verticalLine?.color &&
touched.crosshairDto?.verticalLine?.color
)
}
errorMessage={errors.crosshairDto?.verticalLine?.color}
>
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(
errors.crosshairDto?.verticalLine?.color &&
touched.crosshairDto?.verticalLine?.color
)
}
errorMessage={errors.crosshairDto?.verticalLine?.color}
>
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.crosshairDto?.verticalLine?.dashStyle &&
touched.crosshairDto?.verticalLine?.dashStyle
)
}
errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
>
<Field type="text" name="crosshairDto.verticalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.verticalLine.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.crosshairDto?.verticalLine?.dashStyle &&
touched.crosshairDto?.verticalLine?.dashStyle
)
}
errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
>
<Field type="text" name="crosshairDto.verticalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.verticalLine.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(
errors.crosshairDto?.verticalLine?.width &&
touched.crosshairDto?.verticalLine?.width
)
}
errorMessage={errors.crosshairDto?.verticalLine?.width}
>
<Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
</FormItem>
</Card>
<FormItem
label="Width"
invalid={
!!(
errors.crosshairDto?.verticalLine?.width &&
touched.crosshairDto?.verticalLine?.width
)
}
errorMessage={errors.crosshairDto?.verticalLine?.width}
>
<Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
</FormItem>
</Card>
</div>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

2
ui/src/views/admin/listForm/edit/ChartTabExport.tsx
View file

@ -27,7 +27,6 @@ function ChartTabExport(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
@ -63,7 +62,6 @@ function ChartTabExport(props: FormEditProps) {
>
<Field type="number" name="exportDto.margin" component={Input} />
</FormItem>
</Card>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

269
ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
View file

@ -45,81 +45,76 @@ function ChartTabLegend(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Tabs defaultValue="legendSettings_general">
<TabList>
<TabNav value="legendSettings_general">General</TabNav>
<TabNav value="legendSettings_border">Border</TabNav>
</TabList>
<TabContent value="legendSettings_general">
<Card className="my-2">
<FormItem
label="Visible"
invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
errorMessage={errors.legendDto?.visible}
>
<Field name="legendDto.visible" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Card className="my-2" header="General">
<FormItem
label="Visible"
invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
errorMessage={errors.legendDto?.visible}
>
<Field name="legendDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Background Color"
invalid={
!!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)
}
errorMessage={errors.legendDto?.backgroundColor}
>
<Field name="legendDto.backgroundColor" component={Input} />
</FormItem>
<FormItem
label="Background Color"
invalid={
!!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)
}
errorMessage={errors.legendDto?.backgroundColor}
>
<Field name="legendDto.backgroundColor" component={Input} />
</FormItem>
<FormItem
label="Title"
invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
errorMessage={errors.legendDto?.title}
>
<Field name="legendDto.title" component={Input} />
</FormItem>
<FormItem
label="Title"
invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
errorMessage={errors.legendDto?.title}
>
<Field name="legendDto.title" component={Input} />
</FormItem>
<FormItem
label="Orientation"
invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
errorMessage={errors.legendDto?.orientation}
>
<Field type="text" name="legendDto.orientation">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendOrientationListOptions}
isClearable={true}
value={chartLegendOrientationListOptions.filter(
(option) => option.value === values.legendDto.orientation,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Position"
invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
errorMessage={errors.legendDto?.position}
>
<Field type="text" name="legendDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendPositionListOptions}
isClearable={true}
value={chartLegendPositionListOptions.filter(
(option) => option.value === values.legendDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Orientation"
invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
errorMessage={errors.legendDto?.orientation}
>
<Field type="text" name="legendDto.orientation">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendOrientationListOptions}
isClearable={true}
value={chartLegendOrientationListOptions.filter(
(option) => option.value === values.legendDto.orientation,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Position"
invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
errorMessage={errors.legendDto?.position}
>
<Field type="text" name="legendDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendPositionListOptions}
isClearable={true}
value={chartLegendPositionListOptions.filter(
(option) => option.value === values.legendDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<div className="flex gap-5">
<FormItem
label="Row Count"
invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
@ -135,80 +130,72 @@ function ChartTabLegend(props: FormEditProps) {
>
<Field type="number" name="legendDto.columnCount" component={Input} />
</FormItem>
</Card>
</TabContent>
<TabContent value="legendSettings_border">
<Card className="my-2">
<FormItem
label="Visible"
invalid={
!!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)
}
errorMessage={errors.legendDto?.border?.visible}
>
<Field name="legendDto.border.visible" component={Checkbox} />
</FormItem>
</div>
</Card>
<Card className="my-2" header="Border">
<FormItem
label="Visible"
invalid={
!!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)
}
errorMessage={errors.legendDto?.border?.visible}
>
<Field name="legendDto.border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)
}
errorMessage={errors.legendDto?.border?.color}
>
<Field name="legendDto.border.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
errorMessage={errors.legendDto?.border?.color}
>
<Field name="legendDto.border.color" component={Input} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle
)
}
errorMessage={errors.legendDto?.border?.dashStyle}
>
<Field type="text" name="legendDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.legendDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle)
}
errorMessage={errors.legendDto?.border?.dashStyle}
>
<Field type="text" name="legendDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.legendDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)
}
errorMessage={errors.legendDto?.border?.width}
>
<Field type="number" name="legendDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)}
errorMessage={errors.legendDto?.border?.width}
>
<Field type="number" name="legendDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.legendDto?.border?.cornerRadius &&
touched.legendDto?.border?.cornerRadius
)
}
errorMessage={errors.legendDto?.border?.cornerRadius}
>
<Field type="number" name="legendDto.border.cornerRadius" component={Input} />
</FormItem>
</Card>
</TabContent>
</Tabs>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.legendDto?.border?.cornerRadius &&
touched.legendDto?.border?.cornerRadius
)
}
errorMessage={errors.legendDto?.border?.cornerRadius}
>
<Field type="number" name="legendDto.border.cornerRadius" component={Input} />
</FormItem>
</Card>
</div>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

252
ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
View file

@ -29,133 +29,143 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
{({ touched, errors, resetForm, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label="Allow Mouse Wheel"
invalid={
!!(
errors.zoomAndPanDto?.allowMouseWheel && touched.zoomAndPanDto?.allowMouseWheel
)
}
errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
>
<Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Card className="my-2" header="General">
<div className="flex gap-5">
<FormItem
label="Allow Mouse Wheel"
invalid={
!!(
errors.zoomAndPanDto?.allowMouseWheel &&
touched.zoomAndPanDto?.allowMouseWheel
)
}
errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
>
<Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
</FormItem>
<FormItem
label="Allow Touch Gestures"
invalid={
!!(
errors.zoomAndPanDto?.allowTouchGestures &&
touched.zoomAndPanDto?.allowTouchGestures
)
}
errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
>
<Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
</FormItem>
<FormItem
label="Allow Touch Gestures"
invalid={
!!(
errors.zoomAndPanDto?.allowTouchGestures &&
touched.zoomAndPanDto?.allowTouchGestures
)
}
errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
>
<Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
</FormItem>
<FormItem
label="Drag To Zoom"
invalid={!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)}
errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
>
<Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
</FormItem>
<FormItem
label="Drag To Zoom"
invalid={
!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)
}
errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
>
<Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
</FormItem>
</div>
<FormItem
label="Argument Axis"
invalid={
!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)
}
errorMessage={errors.zoomAndPanDto?.argumentAxis}
>
<Field type="text" name="zoomAndPanDto.argumentAxis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanAxisOptions}
isClearable={true}
value={chartZoomAndPanAxisOptions.filter(
(option) => option.value === values.zoomAndPanDto.argumentAxis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument Axis"
invalid={
!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)
}
errorMessage={errors.zoomAndPanDto?.argumentAxis}
>
<Field type="text" name="zoomAndPanDto.argumentAxis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanAxisOptions}
isClearable={true}
value={chartZoomAndPanAxisOptions.filter(
(option) => option.value === values.zoomAndPanDto.argumentAxis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Value Axis"
invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
errorMessage={errors.zoomAndPanDto?.valueAxis}
>
<Field type="text" name="zoomAndPanDto.valueAxis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanAxisOptions}
isClearable={true}
value={chartZoomAndPanAxisOptions.filter(
(option) => option.value === values.zoomAndPanDto.valueAxis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Value Axis"
invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
errorMessage={errors.zoomAndPanDto?.valueAxis}
>
<Field type="text" name="zoomAndPanDto.valueAxis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanAxisOptions}
isClearable={true}
value={chartZoomAndPanAxisOptions.filter(
(option) => option.value === values.zoomAndPanDto.valueAxis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Pan Key"
invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
errorMessage={errors.zoomAndPanDto?.panKey}
>
<Field type="text" name="zoomAndPanDto.panKey">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanKeyOptions}
isClearable={true}
value={chartZoomAndPanKeyOptions.filter(
(option) => option.value === values.zoomAndPanDto.panKey,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<FormItem
label="Pan Key"
invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
errorMessage={errors.zoomAndPanDto?.panKey}
>
<Field type="text" name="zoomAndPanDto.panKey">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanKeyOptions}
isClearable={true}
value={chartZoomAndPanKeyOptions.filter(
(option) => option.value === values.zoomAndPanDto.panKey,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<Card className="my-2" header="DragBox Style">
<FormItem
label="Color"
invalid={
!!(
errors.zoomAndPanDto?.dragBoxStyle?.color &&
touched.zoomAndPanDto?.dragBoxStyle?.color
)
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
>
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
</FormItem>
<Card className="my-2" header="Zoom and Pan - DragBox Style">
<FormItem
label="Color"
invalid={
!!(
errors.zoomAndPanDto?.dragBoxStyle?.color &&
touched.zoomAndPanDto?.dragBoxStyle?.color
)
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
>
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
</FormItem>
<FormItem
label="Opacity"
invalid={
!!(
errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
touched.zoomAndPanDto?.dragBoxStyle?.opacity
)
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
>
<Field type="number" name="zoomAndPanDto.dragBoxStyle.opacity" component={Input} />
</FormItem>
</Card>
<FormItem
label="Opacity"
invalid={
!!(
errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
touched.zoomAndPanDto?.dragBoxStyle?.opacity
)
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
>
<Field
type="number"
name="zoomAndPanDto.dragBoxStyle.opacity"
component={Input}
/>
</FormItem>
</Card>
</div>
<div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

10
ui/src/views/admin/listForm/edit/FormEdit.tsx
View file

@ -289,17 +289,17 @@ const FormEdit = () => {
<TabNav value="legendSettings">
{translate('::ListForms.ListFormEdit.TabChartLegend')}
</TabNav>
)}
{visibleTabs.includes('crosshairOptions') && (
<TabNav value="crosshairOptions">
{translate('::ListForms.ListFormEdit.TabChartCrosshair')}
</TabNav>
)}
{visibleTabs.includes('exportSettings') && (
<TabNav value="exportSettings">
{translate('::ListForms.ListFormEdit.TabChartExport')}
</TabNav>
)}
{visibleTabs.includes('crosshairOptions') && (
<TabNav value="crosshairOptions">
{translate('::ListForms.ListFormEdit.TabChartCrosshair')}
</TabNav>
)}
</TabList>
{/* <TabList className="flex-wrap border-b mb-2 bg-slate-50">

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

@ -58,6 +58,20 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.pivotOptionDto?.columnChooserEnabled &&
touched.pivotOptionDto?.columnChooserEnabled
}
errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
>
<Field
name="pivotOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={

69
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
View file

@ -15,7 +15,7 @@ import { SelectBoxOption } from '@/shared/types'
import { useStoreActions, useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { Dispatch, SetStateAction } from 'react'
import { boolean, number, object, string } from 'yup'
import { JsonRowDialogData } from './types'
import {
@ -149,11 +149,16 @@ function JsonRowOpDialogSeries({
visible: true,
width: 2,
label: {
visible: false,
visible: true,
backgroundColor: '#f05b41',
customizeText: '',
format: '',
font: null,
format: 'decimal',
font: {
color: '#FFFFFF',
family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
size: 12,
weight: 400,
},
},
}
}
@ -409,6 +414,62 @@ function JsonRowOpDialogSeries({
>
<Field type="text" name="label.customizeText" component={Input} />
</FormItem>
<Card className="my-2" header="Font">
<FormItem
label="Color"
errorMessage={errors.label?.font?.color}
>
<Field name="label.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(
errors.label?.font?.family &&
touched.label?.font?.family
)
}
errorMessage={errors.label?.font?.family}
>
<Field name="label.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.label?.font?.size &&
touched.label?.font?.size
)
}
errorMessage={errors.label?.font?.size}
>
<Field
type="number"
name="label.font.size"
component={Input}
/>
</FormItem>
<FormItem
label="Weight"
invalid={
!!(
errors.label?.font?.weight &&
touched.label?.font?.weight
)
}
errorMessage={errors.label?.font?.weight}
>
<Field
type="number"
name="label.font.weight"
component={Input}
/>
</FormItem>
</Card>
</Card>
</div>
<div className="text-right mt-4">

22
ui/src/views/list/Chart.tsx
View file

@ -33,7 +33,19 @@ const Chart = (props: ChartProps) => {
useEffect(() => {
if (!gridDto) return
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
console.log(
gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
)
console.log(gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '))
const dataSource = createSelectDataSource(
gridDto.gridOptions,
listFormCode,
searchParams,
[],
gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
)
const options = {
dataSource: dataSource,
@ -62,8 +74,14 @@ const Chart = (props: ChartProps) => {
valueAxis: gridDto.gridOptions.valueAxisDto,
tooltip: gridDto.gridOptions.tooltipDto,
series:
gridDto.gridOptions.seriesDto?.length > 0
? gridDto.gridOptions.seriesDto.map((s) => ({
argumentField: 'key',
valueField: 'summary',
}))
: undefined,
panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
series: gridDto.gridOptions.seriesDto?.length > 0 ? gridDto.gridOptions.seriesDto : undefined,
commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto,

36
ui/src/views/list/List.tsx
View file

@ -29,32 +29,34 @@ const List = () => {
const { states } = useStoreState((state) => state.base.lists)
const { setStates } = useStoreActions((a) => a.base.lists)
useEffect(() => {
const initializeGridAsync = async () => {
// 🔹 Tekrar çağırılabilir metod
const refreshGridDto = async () => {
if (!listFormCode) return
try {
const response = await getList({ listFormCode })
setGridDto(response.data)
} catch (error) {
console.error('GridDto refresh error:', error)
}
}
initializeGridAsync()
.then(() => {
//base içerisine kaydedilen state içerisinden bakılacak
const listFormStates = states.find((a) => a.listFormCode === listFormCode)
if (listFormStates) {
setViewMode(listFormStates.layout || 'grid')
} else {
setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout || 'grid')
}
})
.catch((error) => {
console.error('Hata oluştu:', error)
})
useEffect(() => {
refreshGridDto().then(() => {
//base içerisine kaydedilen state içerisinden bakılacak
const listFormStates = states.find((a) => a.listFormCode === listFormCode)
if (listFormStates) {
setViewMode(listFormStates.layout || 'grid')
} else {
setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout || 'grid')
}
})
}, [listFormCode])
if (!listFormCode) {
return null
}
if (!gridDto) {
if (!gridDto) {
return null
}
@ -109,6 +111,7 @@ const List = () => {
<FaTh className="w-4 h-4" />
</Button>
)}
{gridDto?.gridOptions?.layoutDto.pivot && (
<Button
size="xs"
@ -145,6 +148,7 @@ const List = () => {
searchParams={searchParams}
isSubForm={false}
gridDto={gridDto}
refreshGridDto={refreshGridDto}
/>
) : viewMode === 'card' ? (
<Card

115
ui/src/views/list/Pivot.tsx
View file

@ -2,7 +2,6 @@
import Container from '@/components/shared/Container'
import { DX_CLASSNAMES } from '@/constants/app.constant'
import { GridDto, ListFormCustomizationTypeEnum } from '@/proxy/form/models'
import { getList } from '@/services/form.service'
import {
getListFormCustomization,
postListFormCustomization,
@ -34,21 +33,29 @@ import {
} from './Utils'
import { useFilters } from './useFilters'
import WidgetGroup from '@/components/common/WidgetGroup'
import { Button } from '@/components/ui'
import { FaInfoCircle, FaSyncAlt, FaTrash, FaTrashAlt } from 'react-icons/fa'
import { usePermission } from '@/utils/hooks/usePermission'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePWA } from '@/utils/hooks/usePWA'
interface GridProps {
interface PivotProps {
listFormCode: string
searchParams?: URLSearchParams
isSubForm?: boolean
level?: number
refreshData?: () => Promise<void>
gridDto?: GridDto
refreshGridDto: () => Promise<void>
}
const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)' // kullanici tanimli gridState ile islem gormus gridin paneline ait renk
const Pivot = (props: GridProps) => {
const Pivot = (props: PivotProps) => {
const { listFormCode, searchParams, isSubForm, level, gridDto } = props
const { translate } = useLocalization()
const { checkPermission } = usePermission()
const isPwaMode = usePWA()
const gridRef = useRef<PivotGrid>()
const chartRef = useRef<Chart>(null)
@ -104,6 +111,57 @@ const Pivot = (props: GridProps) => {
}
}
const clearPivotFilters = () => {
const grid = gridRef.current?.instance
if (!grid) return
const ds = grid.getDataSource()
if (ds) {
const fields = ds.fields()
fields.forEach((f: any) => {
f.filterValues = undefined
f.filterType = undefined
})
ds.reload()
}
}
const moveAllFieldsToFilterArea = () => {
const grid = gridRef.current?.instance
if (!grid) return
const ds = grid.getDataSource()
if (!ds) return
const fields = ds.fields()
fields.forEach((field) => {
field.area = 'filter' // tüm alanları filtre alanına taşı
field.areaIndex = undefined
})
ds.fields(fields)
ds.reload() // PivotGrid’i yeniden yükle
grid.repaint() // UI güncelle
}
const resetPivotGridState = async () => {
const grid = gridRef.current?.instance
if (grid) {
// kullaniciya ait kayitli grid state i sil customizationData boşalt silinsin.
await postListFormCustomization({
listFormCode: listFormCode,
customizationType: ListFormCustomizationTypeEnum.GridState,
filterName: `pivot-${gridRef.current?.instance.option('stateStoring')?.storageKey ?? ''}`,
customizationData: '',
})
await props.refreshGridDto()
clearPivotFilters()
moveAllFieldsToFilterArea()
}
}
const customSaveState = useCallback(
(state: any) =>
postListFormCustomization({
@ -249,7 +307,50 @@ const Pivot = (props: GridProps) => {
></Helmet>
)}
{gridDto && columnData && (
<>
<div className="p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 ">
<div className="flex justify-end items-center">
<div className="relative pb-1 flex gap-1 border-b-1">
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={clearPivotFilters}
title="Remove Filter"
>
<FaTrash className="w-3 h-3" />
</Button>
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={resetPivotGridState}
title="Reset Grid State"
>
<FaSyncAlt className="w-3 h-3" />
</Button>
{checkPermission(gridDto?.gridOptions.permissionDto.u) && (
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={() => {
window.open(
ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
':listFormCode',
listFormCode,
),
isPwaMode ? '_self' : '_blank',
)
}}
title="Form Manager"
>
<FaInfoCircle className="w-3 h-3" />
</Button>
)}
</div>
</div>
{gridDto.gridOptions.pivotOptionDto.showChart && (
<Chart ref={chartRef as any}>
<Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
@ -260,6 +361,8 @@ const Pivot = (props: GridProps) => {
</Chart>
)}
<div className="dx-datagrid-header-panel h-1"></div>
<PivotGrid
ref={gridRef as any}
id={'Pivot-' + listFormCode}
@ -292,12 +395,12 @@ const Pivot = (props: GridProps) => {
showFilterFields={gridDto.gridOptions.pivotOptionDto.showFilterFields}
/>
<FieldChooser
enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled}
enabled={gridDto.gridOptions.pivotOptionDto.columnChooserEnabled}
height={500}
/>
<Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
</PivotGrid>
</>
</div>
)}
</Container>
</>

16
ui/src/views/list/useFilters.tsx
View file

@ -103,12 +103,6 @@ const useFilters = ({
const menus = []
menus.push({
text: translate('::ListForms.ListForm.Pivots'),
id: 'openPivotGrid',
icon: 'search',
})
// #region Save/Reset grid state and Filters
if (grdOpt.filterRowDto?.allowUserUiFilterSave || grdOpt.stateStoringDto?.enabled) {
//Kullanicinin filtre islemi yapmasina izin verilmis ise filtreleme menu elemanlarini ekle
@ -126,7 +120,7 @@ const useFilters = ({
menus.push({
text: translate('::ListForms.ListForm.RemoveFilter'),
id: 'clearFilter',
icon: 'clear',
icon: 'close',
})
}
@ -135,7 +129,7 @@ const useFilters = ({
menus.push({
text: translate('::ListForms.ListForm.ResetGridState'),
id: 'resetGridState',
icon: 'return',
icon: 'refresh',
})
}
@ -143,7 +137,7 @@ const useFilters = ({
menus.push({
text: translate('::ListForms.ListForm.Manage'),
id: 'openManage',
icon: 'info',
icon: 'preferences',
})
}
@ -151,7 +145,7 @@ const useFilters = ({
menus.push({
text: translate('::ListForms.ListForm.ImportManager'),
id: 'importManager',
icon: 'import',
icon: 'upload',
})
}
@ -183,8 +177,6 @@ const useFilters = ({
} else if (itemData.id === 'deleteFilter') {
// Kayitli bir filtreyi silmek icin ilgili ekrani ac
setIsDeleteModalOpen(true)
} else if (itemData.id === 'openPivotGrid') {
navigate(ROUTES_ENUM.protected.admin.pivot.replace(':listFormCode', listFormCode))
} else if (itemData.id === 'openManage') {
window.open(
ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(