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

ChartEdit komponentlere bölündü

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-09-25 17:40:16 +03:00
parent 56afb103df
commit 50389fa6a4
37 changed files with 4289 additions and 3988 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api/src/Kurs.Platform.Application.Contracts/Charts/Dto/ChartDto.cs
View file

@ -9,6 +9,8 @@ namespace Kurs.Platform.Charts.Dto
{
public class ChartEditDto : ChartDto
{
public string EditType { get; set; }
/// <summary> Chart'a ait sorguların tutulduğu Json veri yapısı
/// </summary>
[JsonIgnore]

16
api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
View file

@ -32,20 +32,4 @@ public class GridColumnOptionDto
public bool ColumnHidingEnabled { get; set; } = false;
public bool FocusedRowEnabled { get; set; } = false;
public bool ShowColumnHeaders { get; set; } = true;
/// <summary> pivot grid için eklenmiş sütunlardır.
/// </summary>
public bool AllowFieldDragging { get; set; } = true;
public bool ShowFieldPanel { get; set; } = true;
public bool ShowDataFields { get; set; } = true;
public bool ShowColumnFields { get; set; } = true;
public bool ShowRowFields { get; set; } = true;
public bool ShowFilterFields { get; set; } = true;
/// <summary> pivot grid üzerinde küçük Chart özellikleri
/// </summary>
public bool ShowChart { get; set; } = false;
public int ChartHeight { get; set; } = 320;
public string ChartCommonSeriesType { get; set; } = "bar";
}

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

@ -122,6 +122,19 @@ public class GridOptionsDto : AuditedEntityDto<Guid>
set { ColumnOptionJson = JsonSerializer.Serialize(value); }
}
[JsonIgnore]
public string PivotOptionJson { get; set; }
public GridPivotOptionDto PivotOptionDto
{
get
{
if (!string.IsNullOrEmpty(PivotOptionJson))
return JsonSerializer.Deserialize<GridPivotOptionDto>(PivotOptionJson);
return new GridPivotOptionDto();
}
set { PivotOptionJson = JsonSerializer.Serialize(value); }
}
[JsonIgnore]
public string PagerOptionJson { get; set; }
public GridPagerOptionDto PagerOptionDto

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

@ -0,0 +1,20 @@
namespace Kurs.Platform.ListForms;
public class GridPivotOptionDto
{
/// <summary> pivot grid için eklenmiş sütunlardır.
/// </summary>
public bool AllowFieldDragging { get; set; } = true;
public bool ShowFieldPanel { get; set; } = true;
public bool ShowDataFields { get; set; } = true;
public bool ShowColumnFields { get; set; } = true;
public bool ShowRowFields { get; set; } = true;
public bool ShowFilterFields { get; set; } = true;
/// <summary> pivot grid üzerinde küçük Chart özellikleri
/// </summary>
public bool ShowChart { get; set; } = false;
public int ChartHeight { get; set; } = 320;
public string ChartCommonSeriesType { get; set; } = "bar";
}

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

@ -43,6 +43,7 @@ public class ListFormEditTabs
public const string GroupForm = "group";
public const string SelectForm = "select";
public const string ColumnForm = "column";
public const string PivotForm = "pivot";
public const string PagerForm = "pager";
public const string StateForm = "state";
public const string SubFormJsonRow = "subForm";

5
api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
View file

@ -130,10 +130,13 @@ public class ListFormsAppService : CrudAppService<
{
item.ColumnOptionJson = JsonSerializer.Serialize(input.ColumnOptionDto);
}
else if (input.EditType == ListFormEditTabs.PivotForm)
{
item.PivotOptionJson = JsonSerializer.Serialize(input.PivotOptionDto);
}
else if (input.EditType == ListFormEditTabs.PagerForm)
{
item.PagerOptionJson = JsonSerializer.Serialize(input.PagerOptionDto);
//item.PageSize = input.PageSize;
}
else if (input.EditType == ListFormEditTabs.StateForm)
{

1
api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
View file

@ -1,7 +1,6 @@
using AutoMapper;
using Kurs.Platform.Entities;
using Kurs.Platform.ListForms.Customization;
using Kurs.Platform.ListForms.ImportManager;
using Kurs.Platform.ListForms.Select;
using Kurs.Platform.Queries;

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

@ -12408,12 +12408,6 @@
"en": "Selection",
"tr": "Seçme"
},
{
"resourceName": "Platform",
"key": "ListForms.ListFormEdit.TabColumnsPivots",
"en": "Columns & Pivots",
"tr": "Sütunlar & Pivotlar"
},
{
"resourceName": "Platform",
"key": "ListForms.ListFormEdit.TabColumns",

1
api/src/Kurs.Platform.Domain/Entities/ListForm.cs
View file

@ -31,6 +31,7 @@ public class ListForm : FullAuditedEntity<Guid>
public string DefaultFilter { get; set; } // Her sorgunun sonuna eklenecek default WHERE condition
public string ColumnOptionJson { get; set; }
public string PivotOptionJson { get; set; }
public string FilterRowJson { get; set; } // Filtre ayarlari, Json olarak tutulur, donus sinifi FilterRowDto
public string HeaderFilterJson { get; set; } // Header filtreleme ayarlari, Json olarak tutulur
public string FilterPanelJson { get; set; } // Filtre paneli Json verileri

5
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.Designer.cs → api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.Designer.cs generated
View file

@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
namespace Kurs.Platform.Migrations
{
[DbContext(typeof(PlatformDbContext))]
[Migration("20250922114945_Initial")]
[Migration("20250925111605_Initial")]
partial class Initial
{
/// <inheritdoc />
@ -2893,6 +2893,9 @@ namespace Kurs.Platform.Migrations
b.Property<string>("PermissionJson")
.HasColumnType("nvarchar(max)");
b.Property<string>("PivotOptionJson")
.HasColumnType("nvarchar(max)");
b.Property<string>("SearchPanelJson")
.HasColumnType("nvarchar(max)");

1
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.cs → api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.cs
View file

@ -1209,6 +1209,7 @@ namespace Kurs.Platform.Migrations
Height = table.Column<int>(type: "int", nullable: true),
DefaultFilter = table.Column<string>(type: "nvarchar(max)", nullable: true),
ColumnOptionJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
PivotOptionJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
FilterRowJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
HeaderFilterJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
FilterPanelJson = table.Column<string>(type: "nvarchar(max)", nullable: true),

3
api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
View file

@ -2890,6 +2890,9 @@ namespace Kurs.Platform.Migrations
b.Property<string>("PermissionJson")
.HasColumnType("nvarchar(max)");
b.Property<string>("PivotOptionJson")
.HasColumnType("nvarchar(max)");
b.Property<string>("SearchPanelJson")
.HasColumnType("nvarchar(max)");

80
api/src/Kurs.Platform.HttpApi.Host/Extensions/CaptchaMiddleware.cs
View file

@ -29,30 +29,86 @@ public class CaptchaMiddleware : IMiddleware, ITransientDependency
public async Task InvokeAsync(HttpContext context, RequestDelegate next)
{
var attribute = context.GetEndpoint()?.Metadata?.Any(a => a is CaptchaAttribute);
//var endpoint = context.Features.Get<IEndpointFeature>()?.Endpoint;
//var attribute = endpoint?.Metadata.GetMetadata<CaptchaAttribute>();
if (attribute == true)
{
context.Request.EnableBuffering();
var requestBody = await new StreamReader(context.Request.Body).ReadToEndAsync();
var jsonDocument = JsonDocument.Parse(requestBody);
if (jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
string requestBody;
using (var reader = new StreamReader(context.Request.Body, leaveOpen: true))
{
var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
if (result == false)
requestBody = await reader.ReadToEndAsync();
context.Request.Body.Position = 0; // Body tekrar okunabilsin
}
if (string.IsNullOrWhiteSpace(requestBody))
{
await WriteBadRequestAsync(context);
return;
}
try
{
using var jsonDocument = JsonDocument.Parse(requestBody);
if (!jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
{
context.Response.Clear();
context.Response.ContentType = "text/plain";
context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
await WriteBadRequestAsync(context);
return;
}
var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
if (!result)
{
await WriteBadRequestAsync(context);
return;
}
}
context.Request.Body.Position = 0;
catch (JsonException)
{
await WriteBadRequestAsync(context);
return;
}
}
await next(context);
}
private async Task WriteBadRequestAsync(HttpContext context)
{
context.Response.Clear();
context.Response.ContentType = "text/plain";
context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
}
// public async Task InvokeAsync(HttpContext context, RequestDelegate next)
// {
// var attribute = context.GetEndpoint()?.Metadata?.Any(a => a is CaptchaAttribute);
// //var endpoint = context.Features.Get<IEndpointFeature>()?.Endpoint;
// //var attribute = endpoint?.Metadata.GetMetadata<CaptchaAttribute>();
// if (attribute == true)
// {
// context.Request.EnableBuffering();
// var requestBody = await new StreamReader(context.Request.Body).ReadToEndAsync();
// var jsonDocument = JsonDocument.Parse(requestBody);
// if (jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
// {
// var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
// if (result == false)
// {
// context.Response.Clear();
// context.Response.ContentType = "text/plain";
// context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
// await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
// return;
// }
// }
// context.Request.Body.Position = 0;
// }
// await next(context);
// }
}

1
ui/src/proxy/admin/list-form/models.ts
View file

@ -74,6 +74,7 @@ export const ListFormEditTabs = {
GroupForm: 'group',
SelectForm: 'select',
ColumnForm: 'column',
PivotForm: 'pivot',
PagerForm: 'pager',
StateForm: 'state',
SubForm: 'subForm',

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

@ -234,6 +234,7 @@ export interface ChartDto extends AuditedEntityDto<string> {
}
export interface ChartEditDto extends ChartDto {
editType: string
dataSourceJson?: string
dataSourceDto: ChartDataSourceDto
dataSourceCode?: string

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

@ -331,6 +331,9 @@ export interface GridColumnOptionDto {
columnHidingEnabled: boolean
focusedRowEnabled: boolean
showColumnHeaders: boolean
}
export interface GridPivotOptionDto {
allowFieldDragging: boolean
showFieldPanel: boolean
showDataFields: boolean
@ -455,6 +458,8 @@ export interface GridOptionsDto extends AuditedEntityDto<string> {
selectionDto: SelectionDto
columnOptionJson?: string
columnOptionDto: GridColumnOptionDto
pivotOptionJson?: string
pivotOptionDto: GridPivotOptionDto
pagerOptionJson?: string
pagerOptionDto: GridPagerOptionDto
editingOptionJson?: string

3092
ui/src/views/admin/chart/ChartEdit.tsx
View file

File diff suppressed because it is too large Load diff

69
ui/src/views/admin/chart/edit/ChartTabAnimation.tsx Normal file
View file

@ -0,0 +1,69 @@
import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
import { ChartEditDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { chartEasingListOptions } from './../options'
interface ChartTabAnimationProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabAnimation = ({ values, errors, touched }: ChartTabAnimationProps) => {
return (
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
errorMessage={errors.animationDto?.enabled as string}
>
<Field name="animationDto.enabled" component={Checkbox} />
</FormItem>
<FormItem
label="Easing"
invalid={!!(errors.animationDto?.easing && touched.animationDto?.easing)}
errorMessage={errors.animationDto?.easing}
>
<Field type="text" name="animationDto.easing">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartEasingListOptions}
isClearable={true}
value={chartEasingListOptions.filter(
(option) => option.value === values.animationDto.easing,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Duration"
invalid={!!(errors.animationDto?.duration && touched.animationDto?.duration)}
errorMessage={errors.animationDto?.duration as string}
>
<Field type="number" name="animationDto.duration" component={Input} />
</FormItem>
<FormItem
label="Max Point Count Supported"
invalid={
!!(
errors.animationDto?.maxPointCountSupported &&
touched.animationDto?.maxPointCountSupported
)
}
errorMessage={errors.animationDto?.maxPointCountSupported as string}
>
<Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
</FormItem>
</Card>
)
}
export default ChartTabAnimation

558
ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx Normal file
View file

@ -0,0 +1,558 @@
import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import TBody from '@/components/ui/Table/TBody'
import THead from '@/components/ui/Table/THead'
import Td from '@/components/ui/Table/Td'
import Th from '@/components/ui/Table/Th'
import Tr from '@/components/ui/Table/Tr'
import { ChartEditDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
import {
chartAnnotationTypeListOptions,
chartSeriesDashStyleOptions,
chartWordWrapListOptions,
} from './../options'
import { ChartDialogType } from './../types'
import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
interface ChartTabAnnotationsProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
chartValues: ChartEditDto
setDatabaseOperationsModalData: (data: DatabaseOperation) => void
setConfirmDelete: (data: ConfirmDelete) => void
SeriesList: () => SelectBoxOption[] | undefined
}
const ChartTabAnnotations = ({
values,
errors,
touched,
chartValues,
setDatabaseOperationsModalData,
setConfirmDelete,
SeriesList,
}: ChartTabAnnotationsProps) => {
return (
<Tabs defaultValue="annotations_general">
<TabList>
<TabNav value="annotations_general">General</TabNav>
<TabNav value="annotations_common">Common Pane</TabNav>
</TabList>
<TabContent value="annotations_general">
<Card className="my-2" bodyClass="p-0">
<Table compact>
<THead>
<Tr>
<Th>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Add"
icon={<FaFileMedical />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index: -1,
isOpen: 'annotation',
operation: 'insert',
})
}}
/>
</Th>
<Th>Type</Th>
<Th>Name</Th>
<Th>Text</Th>
<Th>Series</Th>
<Th>Value</Th>
<Th>Width</Th>
</Tr>
</THead>
<TBody>
{chartValues.annotationsDto.map((row, index) => (
<Tr key={index}>
<Td>
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Edit"
icon={<FaEdit />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index,
isOpen: 'annotation',
operation: 'update',
annotationsValues: chartValues.annotationsDto[index],
})
}}
/>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Delete"
icon={<FaTrash />}
onClick={async (e) => {
e.preventDefault()
setConfirmDelete({
isOpen: true,
id: values.id ?? '',
fieldName: 'annotation',
index,
})
}}
/>
</div>
</Td>
<Td>{row.type}</Td>
<Td>{row.name}</Td>
<Td>{row.text}</Td>
<Td>{row.series}</Td>
<Td>{row.value}</Td>
<Td>{row.width}</Td>
</Tr>
))}
</TBody>
</Table>
</Card>
</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>
<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="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="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="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="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="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="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 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 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>
<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="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>
<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>
<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="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>
</TabContent>
</Tabs>
)
}
export default ChartTabAnnotations

440
ui/src/views/admin/chart/edit/ChartTabAxis.tsx Normal file
View file

@ -0,0 +1,440 @@
import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
import TBody from '@/components/ui/Table/TBody'
import THead from '@/components/ui/Table/THead'
import Td from '@/components/ui/Table/Td'
import Th from '@/components/ui/Table/Th'
import Tr from '@/components/ui/Table/Tr'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import { ChartEditDto, ChartValueAxisDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
import {
chartArgumentAxisHoverModeListOptions,
chartArgumentAxisIntervalListOptions,
chartArgumentAxisLabelDisplayModeListOptions,
chartArgumentAxisLabelOverlappingBehaviorListOptions,
chartArgumentAxisPositionListOptions,
chartArgumentAxisTypeListOptions,
} from './../options'
import { ChartDialogType } from './../types'
import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
interface ChartTabAxisProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
chartValues: ChartEditDto
setDatabaseOperationsModalData: (data: DatabaseOperation) => void
setConfirmDelete: (data: ConfirmDelete) => void
}
const ChartTabAxis = ({
values,
errors,
touched,
chartValues,
setDatabaseOperationsModalData,
setConfirmDelete,
}: ChartTabAxisProps) => {
return (
<Tabs defaultValue="axis_value">
<TabList>
<TabNav value="axis_value">Value Axis</TabNav>
<TabNav value="axis_argument">Argument Axis Options</TabNav>
<TabNav value="axis_common">Common Axis Settings</TabNav>
</TabList>
<TabContent value="axis_value">
<Card className="my-2" bodyClass="p-0">
<Table compact>
<THead>
<Tr>
<Th>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Add"
icon={<FaPlus />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index: -1,
isOpen: 'axis',
operation: 'insert',
})
}}
/>
</Th>
<Th>Value Type</Th>
<Th>Position</Th>
<Th>Type</Th>
<Th>Name</Th>
<Th>Title</Th>
<Th>Visible</Th>
</Tr>
</THead>
<TBody>
{chartValues.valueAxisDto.map((row, index) => (
<Tr key={index}>
<Td>
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Edit"
icon={<FaEdit />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index,
isOpen: 'axis',
operation: 'update',
axisValues: chartValues.valueAxisDto[index],
})
}}
/>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Delete"
icon={<FaTrash />}
onClick={async (e) => {
e.preventDefault()
setConfirmDelete({
isOpen: true,
id: values.id ?? '',
fieldName: 'axis',
index,
})
}}
/>
</div>
</Td>
<Td>{row.valueType}</Td>
<Td>{row.position}</Td>
<Td>{row.type}</Td>
<Td>{row.name}</Td>
<Td>{row.title}</Td>
<Td>{row.visible}</Td>
</Tr>
))}
</TBody>
</Table>
</Card>
</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>
<FormItem
label="Workdays Only"
invalid={
!!(errors.argumentAxisDto?.workdaysOnly && touched.argumentAxisDto?.workdaysOnly)
}
errorMessage={errors.argumentAxisDto?.workdaysOnly}
>
<Field name="argumentAxisDto.visible" 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="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="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="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>
<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>
<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>
<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>
</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>
<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>
<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>
<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>
</TabContent>
</Tabs>
)
}
export default ChartTabAxis

586
ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx Normal file
View file

@ -0,0 +1,586 @@
import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import { ChartEditDto } from '@/proxy/charts/models'
import { IdentityRoleDto } from '@/proxy/admin/models'
import {
chartArgumentAxisPositionListOptions,
chartPaletteExtensionModeOptions,
chartPaletteOptions,
chartSeriesDashStyleOptions,
chartTitleHorizantalAlignmentListOptions,
chartTitleTextOverFlowListOptions,
chartTitleVerticalAlignmentListOptions,
chartTitleWordWrapListOptions,
chartTooltipLocationListOptions,
} from './../options'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
interface ChartTabCommonSettingsProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabCommonSettings = ({ values, errors, touched }: ChartTabCommonSettingsProps) => {
return (
<Tabs defaultValue="commonSettings_general">
<TabList className="flex-wrap">
<TabNav value="commonSettings_general">General</TabNav>
<TabNav value="commonSettings_adaptiveLayouts">Adaptive Layout Settings</TabNav>
<TabNav value="commonSettings_title">Title Settings</TabNav>
<TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
<TabNav value="commonSettings_margin">Margin Settings</TabNav>
<TabNav value="commonSettings_size">Size Settings</TabNav>
<TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
</TabList>
<TabContent value="commonSettings_general">
<Card className="my-2">
<FormItem
label="Disabled"
invalid={!!(errors.commonDto?.disabled && touched.commonDto?.disabled)}
errorMessage={errors.commonDto?.disabled}
>
<Field name="commonDto.disabled" component={Checkbox} />
</FormItem>
<FormItem
label="Adjust On Zoom"
invalid={!!(errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom)}
errorMessage={errors.commonDto?.adjustOnZoom as string}
>
<Field name="commonDto.adjustOnZoom" component={Checkbox} />
</FormItem>
<FormItem
label="Container BackgroundColor"
invalid={
!!(
errors.commonDto?.containerBackgroundColor &&
touched.commonDto?.containerBackgroundColor
)
}
errorMessage={errors.commonDto?.containerBackgroundColor}
>
<Field name="commonDto.containerBackgroundColor" component={Input} />
</FormItem>
<FormItem
label="Default Pane"
invalid={!!(errors.commonDto?.defaultPane && touched.commonDto?.defaultPane)}
errorMessage={errors.commonDto?.defaultPane}
>
<Field type="text" name="commonDto.defaultPane" component={Input} />
</FormItem>
<FormItem
label="Theme"
invalid={!!(errors.commonDto?.theme && touched.commonDto?.theme)}
errorMessage={errors.commonDto?.theme}
>
<Field type="text" name="commonDto.theme">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={themeOptions}
isClearable={true}
value={themeOptions.filter((option) => option.value === values.commonDto.theme)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Palette"
invalid={!!(errors.commonDto?.palette && touched.commonDto?.palette)}
errorMessage={errors.commonDto?.palette}
>
<Field type="text" name="commonDto.palette">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartPaletteOptions}
isClearable={true}
value={chartPaletteOptions.filter(
(option) => option.value === values.commonDto.palette,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Palette Extension Mode"
invalid={
!!(errors.commonDto?.paletteExtensionMode && touched.commonDto?.paletteExtensionMode)
}
errorMessage={errors.commonDto?.paletteExtensionMode}
>
<Field type="text" name="commonDto.paletteExtensionMode">
{({ field, form }: FieldProps<any>) => (
<Select
field={field}
form={form}
options={chartPaletteExtensionModeOptions}
isClearable={true}
value={chartPaletteExtensionModeOptions.filter(
(option) => option.value === values.commonDto.paletteExtensionMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
</TabContent>
<TabContent value="commonSettings_adaptiveLayouts">
<Card className="my-2">
<FormItem
label="Keep Labels"
invalid={
!!(errors.adaptivelayoutDto?.keepLabels && touched.adaptivelayoutDto?.keepLabels)
}
errorMessage={errors.adaptivelayoutDto?.keepLabels as string}
>
<Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width)}
errorMessage={errors.adaptivelayoutDto?.width}
>
<Field type="number" name="adaptivelayoutDto.width" component={Input} />
</FormItem>
<FormItem
label="Height"
invalid={!!(errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height)}
errorMessage={errors.adaptivelayoutDto?.height}
>
<Field type="number" name="adaptivelayoutDto.height" component={Input} />
</FormItem>
</Card>
</TabContent>
<TabContent value="commonSettings_title">
<Card className="my-2">
<FormItem
label="Text"
invalid={!!(errors.titleDto?.text && touched.titleDto?.text)}
errorMessage={errors.titleDto?.text}
>
<Field name="titleDto.text" component={Input} />
</FormItem>
<FormItem
label="Subtitle"
invalid={!!(errors.titleDto?.subtitle && touched.titleDto?.subtitle)}
errorMessage={errors.titleDto?.subtitle}
>
<Field name="titleDto.subtitle" component={Input} />
</FormItem>
<FormItem
label="Vertical Alignment"
invalid={!!(errors.titleDto?.verticalAlignment && touched.titleDto?.verticalAlignment)}
errorMessage={errors.titleDto?.verticalAlignment}
>
<Field type="text" name="titleDto.verticalAlignment">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleVerticalAlignmentListOptions}
isClearable={true}
value={chartTitleVerticalAlignmentListOptions.filter(
(option) => option.value === values.titleDto.verticalAlignment,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Horizontal Alignment"
invalid={
!!(errors.titleDto?.horizontalAlignment && touched.titleDto?.horizontalAlignment)
}
errorMessage={errors.titleDto?.horizontalAlignment}
>
<Field type="text" name="titleDto.horizontalAlignment">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleHorizantalAlignmentListOptions}
isClearable={true}
value={chartTitleHorizantalAlignmentListOptions.filter(
(option) => option.value === values.titleDto.horizontalAlignment,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Text Overflow"
invalid={!!(errors.titleDto?.textOverflow && touched.titleDto?.textOverflow)}
errorMessage={errors.titleDto?.textOverflow}
>
<Field type="text" name="titleDto.textOverflow">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleTextOverFlowListOptions}
isClearable={true}
value={chartTitleTextOverFlowListOptions.filter(
(option) => option.value === values.titleDto.textOverflow,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Word Wrap"
invalid={!!(errors.titleDto?.wordWrap && touched.titleDto?.wordWrap)}
errorMessage={errors.titleDto?.wordWrap}
>
<Field type="text" name="titleDto.wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleWordWrapListOptions}
isClearable={true}
value={chartTitleWordWrapListOptions.filter(
(option) => option.value === values.titleDto.wordWrap,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</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>
<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,
)}
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} />
</FormItem>
</TabContent>
<TabContent value="commonSettings_margin">
<Card className="my-2">
<FormItem
label="Bottom"
invalid={!!(errors.marginDto?.bottom && touched.marginDto?.bottom)}
errorMessage={errors.marginDto?.bottom}
>
<Field type="number" name="marginDto.bottom" component={Input} />
</FormItem>
<FormItem
label="Top"
invalid={!!(errors.marginDto?.top && touched.marginDto?.top)}
errorMessage={errors.marginDto?.top}
>
<Field type="number" name="marginDto.top" component={Input} />
</FormItem>
<FormItem
label="Right"
invalid={!!(errors.marginDto?.right && touched.marginDto?.right)}
errorMessage={errors.marginDto?.right}
>
<Field type="number" name="marginDto.right" component={Input} />
</FormItem>
<FormItem
label="Left"
invalid={!!(errors.marginDto?.left && touched.marginDto?.left)}
errorMessage={errors.marginDto?.left}
>
<Field type="number" name="marginDto.left" component={Input} />
</FormItem>
</Card>
</TabContent>
<TabContent value="commonSettings_size">
<Card className="my-2">
<FormItem
label="Use Size"
invalid={!!(errors.sizeDto?.useSize && touched.sizeDto?.useSize)}
errorMessage={errors.sizeDto?.useSize as string}
>
<Field name="sizeDto.useSize" component={Checkbox} />
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.sizeDto?.width && touched.sizeDto?.width)}
errorMessage={errors.sizeDto?.width}
>
<Field type="number" name="sizeDto.width" component={Input} />
</FormItem>
<FormItem
label="Height"
invalid={!!(errors.sizeDto?.height && touched.sizeDto?.height)}
errorMessage={errors.sizeDto?.height}
>
<Field type="number" name="sizeDto.height" component={Input} />
</FormItem>
</Card>
</TabContent>
<TabContent value="commonSettings_scrollbar">
<Card className="my-2">
<FormItem
label="Visible"
invalid={!!(errors.scrollBarDto?.visible && touched.scrollBarDto?.visible)}
errorMessage={errors.scrollBarDto?.visible as string}
>
<Field name="scrollBarDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
errorMessage={errors.scrollBarDto?.color}
>
<Field name="scrollBarDto.color" component={Input} />
</FormItem>
<FormItem
label="Position"
invalid={!!(errors.scrollBarDto?.position && touched.scrollBarDto?.position)}
errorMessage={errors.scrollBarDto?.position}
>
<Field type="text" name="commonDto.position">
{({ field, form }: FieldProps<IdentityRoleDto>) => (
<Select
field={field}
form={form}
options={chartArgumentAxisPositionListOptions}
isClearable={true}
value={chartArgumentAxisPositionListOptions.filter(
(option) => option.value === values.scrollBarDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Offset"
invalid={!!(errors.scrollBarDto?.offset && touched.scrollBarDto?.offset)}
errorMessage={errors.scrollBarDto?.offset}
>
<Field type="number" name="scrollBarDto.offset" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={!!(errors.scrollBarDto?.width && touched.scrollBarDto?.width)}
errorMessage={errors.scrollBarDto?.width}
>
<Field type="number" name="scrollBarDto.width" component={Input} />
</FormItem>
</Card>
</TabContent>
</Tabs>
)
}
export default ChartTabCommonSettings

302
ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx Normal file
View file

@ -0,0 +1,302 @@
import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
import { ChartEditDto } from '@/proxy/charts/models'
import { tooltipFormatListOptions } from '@/shared/options'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { chartSeriesDashStyleOptions } from './../options'
interface ChartTabCrosshairProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabCrosshair = ({ values, errors, touched }: ChartTabCrosshairProps) => {
return (
<>
<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>
<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="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>
<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="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>
<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="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>
<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="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>
<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="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>
</>
)
}
export default ChartTabCrosshair

83
ui/src/views/admin/chart/edit/ChartTabDatabase.tsx Normal file
View file

@ -0,0 +1,83 @@
import { Checkbox, FormItem, Input, Select } from '@/components/ui'
import { ChartEditDto } from '@/proxy/charts/models'
import { DataSourceTypeEnum } from '@/proxy/form/models'
import { SelectBoxOption } from '@/shared/types'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
interface ChartTabDatabaseProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
dataSourceList: SelectBoxOption[]
}
const ChartTabDatabase = ({ values, errors, touched, dataSourceList }: ChartTabDatabaseProps) => {
const { translate } = useLocalization()
return (
<>
<FormItem
label={translate('::ListForms.ListFormEdit.IsTenant')}
invalid={!!(errors.isTenant && touched.isTenant)}
errorMessage={errors.isTenant as string}
>
<Field
name="isTenant"
placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.IsBranch')}
invalid={!!(errors.isBranch && touched.isBranch)}
errorMessage={errors.isBranch as string}
>
<Field
name="isBranch"
placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
invalid={!!(errors.isOrganizationUnit && touched.isOrganizationUnit)}
errorMessage={errors.isOrganizationUnit as string}
>
<Field
name="isOrganizationUnit"
placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
component={Checkbox}
/>
</FormItem>
<FormItem
label="Data Source Code"
invalid={!!(errors.dataSourceCode && touched.dataSourceCode)}
errorMessage={errors.dataSourceCode}
>
<Field name="dataSourceCode">
{({ field, form }: FieldProps<DataSourceTypeEnum>) => (
<Select
field={field}
form={form}
options={dataSourceList}
value={dataSourceList?.filter((option) => option.value === values.dataSourceCode)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="DataSource Query"
invalid={!!(errors.dataSourceDto?.query && touched.dataSourceDto?.query)}
errorMessage={errors.dataSourceDto?.query}
>
<Field type="text" name="dataSourceDto.query" component={Input} textArea={true} />
</FormItem>
</>
)
}
export default ChartTabDatabase

87
ui/src/views/admin/chart/edit/ChartTabDetails.tsx Normal file
View file

@ -0,0 +1,87 @@
import { FormItem, Input, Select } from '@/components/ui'
import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
import { ChartEditDto } from '@/proxy/charts/models'
import { LanguageInfo } from '@/proxy/config/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
interface ChartTabDetailsProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
langOptions: SelectBoxOption[]
roleList: SelectBoxOption[]
userList: SelectBoxOption[]
}
const ChartTabDetails = ({
values,
errors,
touched,
langOptions,
roleList,
userList,
}: ChartTabDetailsProps) => {
return (
<>
<FormItem
label="Chart Code"
invalid={errors.chartCode && touched.chartCode}
errorMessage={errors.chartCode}
>
<Field type="text" name="chartCode" component={Input} />
</FormItem>
<FormItem
label="Culture Name"
invalid={errors.cultureName && touched.cultureName}
errorMessage={errors.cultureName}
>
<Field type="text" name="cultureName">
{({ field, form }: FieldProps<LanguageInfo>) => (
<Select
field={field}
form={form}
options={langOptions}
isClearable={true}
value={langOptions.filter((option) => option.value === values.cultureName)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem label="Role" invalid={errors.roleId && touched.roleId} errorMessage={errors.roleId}>
<Field type="text" name="roleId">
{({ field, form }: FieldProps<IdentityRoleDto>) => (
<Select
field={field}
form={form}
options={roleList}
isClearable={true}
value={roleList.filter((option) => option.value === values.roleId)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem label="User" invalid={errors.userId && touched.userId} errorMessage={errors.userId}>
<Field type="text" name="userId">
{({ field, form }: FieldProps<IdentityUserDto>) => (
<Select
field={field}
form={form}
options={userList}
isClearable={true}
value={userList.filter((option) => option.value === values.userId)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</>
)
}
export default ChartTabDetails

48
ui/src/views/admin/chart/edit/ChartTabExport.tsx Normal file
View file

@ -0,0 +1,48 @@
import { Card, Checkbox, FormItem, Input } from '@/components/ui'
import { ChartEditDto } from '@/proxy/charts/models'
import { Field, FormikErrors, FormikTouched } from 'formik'
interface ChartTabExportProps {
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabExport = ({ errors, touched }: ChartTabExportProps) => {
return (
<Card className="my-2">
<FormItem
label="Enabled"
invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
errorMessage={errors.exportDto?.enabled as string}
>
<Field name="exportDto.enabled" component={Checkbox} />
</FormItem>
<FormItem
label="Printing Enabled"
invalid={!!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)}
errorMessage={errors.exportDto?.printingEnabled as string}
>
<Field name="exportDto.printingEnabled" component={Checkbox} />
</FormItem>
<FormItem
label="Background Color"
invalid={!!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)}
errorMessage={errors.exportDto?.backgroundColor}
>
<Field type="text" name="exportDto.backgroundColor" component={Input} />
</FormItem>
<FormItem
label="Margin"
invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
errorMessage={errors.exportDto?.margin}
>
<Field type="number" name="exportDto.margin" component={Input} />
</FormItem>
</Card>
)
}
export default ChartTabExport

176
ui/src/views/admin/chart/edit/ChartTabLegend.tsx Normal file
View file

@ -0,0 +1,176 @@
import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import { ChartEditDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import {
chartLegendOrientationListOptions,
chartLegendPositionListOptions,
chartSeriesDashStyleOptions,
} from './../options'
interface ChartTabLegendProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabLegend = ({ values, errors, touched }: ChartTabLegendProps) => {
return (
<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>
<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="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="Row Count"
invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
errorMessage={errors.legendDto?.rowCount}
>
<Field type="number" name="legendDto.rowCount" component={Input} />
</FormItem>
<FormItem
label="Column Count"
invalid={!!(errors.legendDto?.columnCount && touched.legendDto?.columnCount)}
errorMessage={errors.legendDto?.columnCount}
>
<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>
<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="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>
)
}
export default ChartTabLegend

127
ui/src/views/admin/chart/edit/ChartTabPanes.tsx Normal file
View file

@ -0,0 +1,127 @@
import { Button, Card, FormItem, Input, Table } from '@/components/ui'
import TBody from '@/components/ui/Table/TBody'
import THead from '@/components/ui/Table/THead'
import Td from '@/components/ui/Table/Td'
import Th from '@/components/ui/Table/Th'
import Tr from '@/components/ui/Table/Tr'
import { ChartEditDto } from '@/proxy/charts/models'
import { Field, FormikErrors, FormikTouched } from 'formik'
import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
interface ChartTabPanesProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
chartValues: ChartEditDto
setDatabaseOperationsModalData: (data: DatabaseOperation) => void
setConfirmDelete: (data: ConfirmDelete) => void
}
const ChartTabPanes = ({
values,
errors,
touched,
chartValues,
setDatabaseOperationsModalData,
setConfirmDelete,
}: ChartTabPanesProps) => {
return (
<>
<Card className="my-2">
<FormItem
label="Background Color"
invalid={
!!(
errors.commonPaneSettingsDto?.backgroundColor &&
touched.commonPaneSettingsDto?.backgroundColor
)
}
errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
>
<Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
</FormItem>
</Card>
<Card className="my-2" bodyClass="p-0">
<Table compact>
<THead>
<Tr>
<Th>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Add"
icon={<FaFileMedical />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index: -1,
isOpen: 'pane',
operation: 'insert',
})
}}
/>
</Th>
<Th>Name</Th>
<Th>Background Color</Th>
<Th>Height</Th>
</Tr>
</THead>
<TBody>
{chartValues.panesDto.map((row, index) => (
<Tr key={index}>
<Td>
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Edit"
icon={<FaEdit />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index,
isOpen: 'pane',
operation: 'update',
panesValues: chartValues.panesDto[index],
})
}}
/>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Delete"
icon={<FaTrash />}
onClick={async (e) => {
e.preventDefault()
setConfirmDelete({
isOpen: true,
id: values.id ?? '',
fieldName: 'pane',
index,
})
}}
/>
</div>
</Td>
<Td>{row.name}</Td>
<Td>{row.backgroundColor}</Td>
<Td>{row.height}</Td>
</Tr>
))}
</TBody>
</Table>
</Card>
</>
)
}
export default ChartTabPanes

98
ui/src/views/admin/chart/edit/ChartTabPermissions.tsx Normal file
View file

@ -0,0 +1,98 @@
import { FormItem, Select } from '@/components/ui'
import { MenuDto } from '@/proxy/menus/models'
import { ChartEditDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
interface ChartTabPermissionsProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
permissionOptions: SelectBoxOption[]
}
const ChartTabPermissions = ({
values,
errors,
touched,
permissionOptions,
}: ChartTabPermissionsProps) => {
return (
<>
<FormItem
label="Create"
invalid={!!(errors.permissionDto?.c && touched.permissionDto?.c)}
errorMessage={errors.permissionDto?.c}
>
<Field name="permissionDto.c">
{({ field, form }: FieldProps<MenuDto>) => (
<Select
field={field}
form={form}
options={permissionOptions}
isClearable={true}
value={permissionOptions.filter((option) => option.value === values.permissionDto.c)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Read"
invalid={!!(errors.permissionDto?.r && touched.permissionDto?.r)}
errorMessage={errors.permissionDto?.r}
>
<Field name="permissionDto.r">
{({ field, form }: FieldProps<MenuDto>) => (
<Select
field={field}
form={form}
options={permissionOptions}
isClearable={true}
value={permissionOptions.filter((option) => option.value === values.permissionDto.r)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Update"
invalid={!!(errors.permissionDto?.u && touched.permissionDto?.u)}
errorMessage={errors.permissionDto?.u}
>
<Field name="permissionDto.u">
{({ field, form }: FieldProps<MenuDto>) => (
<Select
field={field}
form={form}
options={permissionOptions}
isClearable={true}
value={permissionOptions.filter((option) => option.value === values.permissionDto.u)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Delete"
invalid={!!(errors.permissionDto?.d && touched.permissionDto?.d)}
errorMessage={errors.permissionDto?.d}
>
<Field name="permissionDto.d">
{({ field, form }: FieldProps<MenuDto>) => (
<Select
field={field}
form={form}
options={permissionOptions}
isClearable={true}
value={permissionOptions.filter((option) => option.value === values.permissionDto.d)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</>
)
}
export default ChartTabPermissions

366
ui/src/views/admin/chart/edit/ChartTabSeries.tsx Normal file
View file

@ -0,0 +1,366 @@
import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
import TBody from '@/components/ui/Table/TBody'
import THead from '@/components/ui/Table/THead'
import Td from '@/components/ui/Table/Td'
import Th from '@/components/ui/Table/Th'
import Tr from '@/components/ui/Table/Tr'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import {
ChartAnnotationDto,
ChartEditDto,
ChartPanesDto,
ChartSeriesDto,
ChartValueAxisDto,
} from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
import {
chartSeriesDashStyleOptions,
chartSeriesSelectionModeOptions,
chartSeriesTypeOptions,
} from './../options'
import { ChartDialogType, ChartOperation } from './../types'
import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
interface ChartTabSeriesProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
chartValues: ChartEditDto
setDatabaseOperationsModalData: (data: DatabaseOperation) => void
setConfirmDelete: (data: ConfirmDelete) => void
valueAxisList: () => SelectBoxOption[] | undefined
valuePaneList: () => SelectBoxOption[] | undefined
}
const ChartTabSeries = ({
values,
errors,
touched,
chartValues,
setDatabaseOperationsModalData,
setConfirmDelete,
valueAxisList,
valuePaneList,
}: ChartTabSeriesProps) => {
return (
<Tabs defaultValue="series_general">
<TabList>
<TabNav value="series_general">General</TabNav>
<TabNav value="series_common">Common Series Settings</TabNav>
</TabList>
<TabContent value="series_general">
<Card className="my-2" bodyClass="p-0">
<Table compact>
<THead>
<Tr>
<Th>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Add"
icon={<FaPlus />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index: -1,
isOpen: 'serie',
operation: 'insert',
})
}}
/>
</Th>
<Th>Type</Th>
<Th>Name</Th>
<Th>Argument Field</Th>
<Th>Value Field</Th>
<Th>Pane</Th>
<Th>Axis</Th>
</Tr>
</THead>
<TBody>
{chartValues.seriesDto.map((row, index) => (
<Tr key={index}>
<Td>
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Edit"
icon={<FaEdit />}
onClick={async (e) => {
e.preventDefault()
setDatabaseOperationsModalData({
id: values.id ?? '',
index,
isOpen: 'serie',
operation: 'update',
seriesValues: chartValues.seriesDto[index],
})
}}
/>
<Button
shape="circle"
variant="plain"
type="button"
size="xs"
title="Delete"
icon={<FaTrash />}
onClick={async (e) => {
e.preventDefault()
setConfirmDelete({
isOpen: true,
id: values.id ?? '',
fieldName: 'serie',
index,
})
}}
/>
</div>
</Td>
<Td>{row.type}</Td>
<Td>{row.name}</Td>
<Td>{row.argumentField}</Td>
<Td>{row.valueField}</Td>
<Td>{row.pane}</Td>
<Td>{row.axis}</Td>
</Tr>
))}
</TBody>
</Table>
</Card>
</TabContent>
<TabContent value="series_common">
<Card className="my-2">
<FormItem
label="Visible"
invalid={
!!(
errors.commonSeriesSettingsDto?.visible && touched.commonSeriesSettingsDto?.visible
)
}
errorMessage={errors.commonSeriesSettingsDto?.visible}
>
<Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Show In Legend"
invalid={
!!(
errors.commonSeriesSettingsDto?.showInLegend &&
touched.commonSeriesSettingsDto?.showInLegend
)
}
errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
>
<Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
</FormItem>
<FormItem
label="Ignore Empty Points"
invalid={
!!(
errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
touched.commonSeriesSettingsDto?.ignoreEmptyPoints
)
}
errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
>
<Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} />
</FormItem>
<FormItem
label="Type"
invalid={
!!(errors.commonSeriesSettingsDto?.type && touched.commonSeriesSettingsDto?.type)
}
errorMessage={errors.commonSeriesSettingsDto?.type}
>
<Field type="text" name="commonSeriesSettingsDto.type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesTypeOptions}
isClearable={true}
value={chartSeriesTypeOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.type,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Selection Mode"
invalid={
!!(
errors.commonSeriesSettingsDto?.selectionMode &&
touched.commonSeriesSettingsDto?.selectionMode
)
}
errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
>
<Field type="text" name="commonSeriesSettingsDto.selectionMode">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesSelectionModeOptions}
isClearable={true}
value={chartSeriesSelectionModeOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.selectionMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Argument Field"
invalid={
!!(
errors.commonSeriesSettingsDto?.argumentField &&
touched.commonSeriesSettingsDto?.argumentField
)
}
errorMessage={errors.commonSeriesSettingsDto?.argumentField}
>
<Field name="commonSeriesSettingsDto.argumentField" component={Input} />
</FormItem>
<FormItem
label="Value Field"
invalid={
!!(
errors.commonSeriesSettingsDto?.valueField &&
touched.commonSeriesSettingsDto?.valueField
)
}
errorMessage={errors.commonSeriesSettingsDto?.valueField}
>
<Field name="commonSeriesSettingsDto.valueField" component={Input} />
</FormItem>
<FormItem
label="Axis"
invalid={
!!(errors.commonSeriesSettingsDto?.axis && touched.commonSeriesSettingsDto?.axis)
}
errorMessage={errors.commonSeriesSettingsDto?.axis}
>
<Field type="text" name="commonSeriesSettingsDto.axis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={valueAxisList()}
isClearable={true}
value={valueAxisList()?.find(
(option) => option.value === values.commonSeriesSettingsDto.axis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Pane"
invalid={
!!(errors.commonSeriesSettingsDto?.pane && touched.commonSeriesSettingsDto?.pane)
}
errorMessage={errors.commonSeriesSettingsDto?.pane}
>
<Field type="text" name="commonSeriesSettingsDto.pane">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={valuePaneList()}
isClearable={true}
value={valuePaneList()?.find(
(option) => option.value === values.commonSeriesSettingsDto.pane,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Color"
invalid={
!!(errors.commonSeriesSettingsDto?.color && touched.commonSeriesSettingsDto?.color)
}
errorMessage={errors.commonSeriesSettingsDto?.color}
>
<Field name="commonSeriesSettingsDto.color" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.commonSeriesSettingsDto?.cornerRadius &&
touched.commonSeriesSettingsDto?.cornerRadius
)
}
errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
>
<Field type="number" name="commonSeriesSettingsDto.cornerRadius" component={Input} />
</FormItem>
<FormItem
label="Type"
invalid={
!!(
errors.commonSeriesSettingsDto?.dashStyle &&
touched.commonSeriesSettingsDto?.dashStyle
)
}
errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
>
<Field type="text" name="commonSeriesSettingsDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.commonSeriesSettingsDto.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(errors.commonSeriesSettingsDto?.width && touched.commonSeriesSettingsDto?.width)
}
errorMessage={errors.commonSeriesSettingsDto?.width}
>
<Field type="number" name="commonSeriesSettingsDto.width" component={Input} />
</FormItem>
</Card>
</TabContent>
</Tabs>
)
}
export default ChartTabSeries

142
ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx Normal file
View file

@ -0,0 +1,142 @@
import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
import { ChartEditDto } from '@/proxy/charts/models'
import { SelectBoxOption } from '@/shared/types'
import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
import { chartZoomAndPanAxisOptions, chartZoomAndPanKeyOptions } from './../options'
interface ChartTabZoomAndPanProps {
values: ChartEditDto
errors: FormikErrors<ChartEditDto>
touched: FormikTouched<ChartEditDto>
}
const ChartTabZoomAndPan = ({ values, errors, touched }: ChartTabZoomAndPanProps) => {
return (
<>
<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>
<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="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="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="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>
</>
)
}
export default ChartTabZoomAndPan

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

@ -34,6 +34,8 @@ import { Container } from '@/components/shared'
import { ROUTES_ENUM } from '@/routes/route.constant'
import FormTabWidgets from './FormTabWidgets'
import FormTabExtraFilters from './FormTabExtraFilters'
import FormTabEditForm from './FormTabEditForm'
import FormTabPivots from './FormTabPivots'
export interface FormEditProps {
onSubmit: (
@ -185,16 +187,18 @@ const FormEdit = () => {
<TabNav value="search">{translate('::ListForms.ListFormEdit.TabSearch')}</TabNav>
<TabNav value="group">{translate('::ListForms.ListFormEdit.TabGrouping')}</TabNav>
<TabNav value="select">{translate('::ListForms.ListFormEdit.TabSelection')}</TabNav>
<TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumnsPivots')}</TabNav>
<TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumns')}</TabNav>
<TabNav value="pivots">{translate('::ListForms.ListFormEdit.TabPivots')}</TabNav>
<TabNav value="pager">{translate('::ListForms.ListFormEdit.TabPaging')}</TabNav>
<TabNav value="state">{translate('::ListForms.ListFormEdit.TabState')}</TabNav>
<TabNav value="extrafilter">{translate('::ListForms.ListFormEdit.ExtraFilters')}</TabNav>
<TabNav value="fields">{translate('::ListForms.ListFormEdit.TabFields')}</TabNav>
<TabNav value="customization">
{translate('::ListForms.ListFormEdit.TabCustomization')}
</TabNav>
<TabNav value="editForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
<TabNav value="subForms">{translate('::ListForms.ListFormEdit.TabSubForms')}</TabNav>
<TabNav value="widget">{translate('::ListForms.ListFormEdit.TabWidgets')}</TabNav>
<TabNav value="extrafilter">{translate('::ListForms.ListFormEdit.ExtraFilters')}</TabNav>
</TabList>
<TabContent value="details">
<FormTabDetails onSubmit={onSubmit} />
@ -211,6 +215,9 @@ const FormEdit = () => {
<TabContent value="edit">
<FormTabEdit listFormCode={listFormCode} onSubmit={onSubmit} />
</TabContent>
<TabContent value="editForm">
<FormTabEditForm listFormCode={listFormCode} />
</TabContent>
<TabContent value="filterRow">
<FormTabFilters onSubmit={onSubmit} />
</TabContent>
@ -226,6 +233,9 @@ const FormEdit = () => {
<TabContent value="columns">
<FormTabColumns onSubmit={onSubmit} />
</TabContent>
<TabContent value="pivots">
<FormTabPivots onSubmit={onSubmit} />
</TabContent>
<TabContent value="pager">
<FormTabPager onSubmit={onSubmit} />
</TabContent>

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

@ -17,11 +17,6 @@ import { Field, FieldProps, Form, Formik } from 'formik'
import * as Yup from 'yup'
import { FormEditProps } from './FormEdit'
import { columnChooserModeOptions, columnResizingModeOptions } from './options'
import { SelectBoxOption } from '@/shared/types'
import { chartSeriesTypeOptions } from '../../chart/options'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import TabContent from '@/components/ui/Tabs/TabContent'
const validationSchema = Yup.object().shape({})
@ -45,419 +40,253 @@ function FormTabColumns(props: FormEditProps) {
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<Tabs defaultValue="tabColumns">
<TabList className="flex-wrap my-3">
<TabNav value="tabColumns">
{translate('::ListForms.ListFormEdit.TabColumns')}
</TabNav>
<TabNav value="tabPivots">
{translate('::ListForms.ListFormEdit.TabPivots')}
</TabNav>
</TabList>
<TabContent value="tabColumns">
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
invalid={
errors.columnOptionDto?.showColumnHeaders &&
touched.columnOptionDto?.showColumnHeaders
}
errorMessage={errors.columnOptionDto?.showColumnHeaders}
>
<Field
name="columnOptionDto.showColumnHeaders"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
invalid={
errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
}
errorMessage={errors.columnOptionDto?.showBorders}
>
<Field
name="columnOptionDto.showBorders"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
invalid={
errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
}
errorMessage={errors.columnOptionDto?.showRowLines}
>
<Field
name="columnOptionDto.showRowLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
invalid={
errors.columnOptionDto?.showColumnLines &&
touched.columnOptionDto?.showColumnLines
}
errorMessage={errors.columnOptionDto?.showColumnLines}
>
<Field
name="columnOptionDto.showColumnLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
invalid={
errors.columnOptionDto?.rowAlternationEnabled &&
touched.columnOptionDto?.rowAlternationEnabled
}
errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
>
<Field
name="columnOptionDto.rowAlternationEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
invalid={
errors.columnOptionDto?.showColumnHeaders &&
touched.columnOptionDto?.showColumnHeaders
}
errorMessage={errors.columnOptionDto?.showColumnHeaders}
>
<Field
name="columnOptionDto.showColumnHeaders"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
invalid={
errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
}
errorMessage={errors.columnOptionDto?.showBorders}
>
<Field
name="columnOptionDto.showBorders"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
invalid={
errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
}
errorMessage={errors.columnOptionDto?.showRowLines}
>
<Field
name="columnOptionDto.showRowLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
invalid={
errors.columnOptionDto?.showColumnLines &&
touched.columnOptionDto?.showColumnLines
}
errorMessage={errors.columnOptionDto?.showColumnLines}
>
<Field
name="columnOptionDto.showColumnLines"
placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
invalid={
errors.columnOptionDto?.rowAlternationEnabled &&
touched.columnOptionDto?.rowAlternationEnabled
}
errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
>
<Field
name="columnOptionDto.rowAlternationEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
invalid={
errors.columnOptionDto?.allowColumnReordering &&
touched.columnOptionDto?.allowColumnReordering
}
errorMessage={errors.columnOptionDto?.allowColumnReordering}
>
<Field
name="columnOptionDto.allowColumnReordering"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
invalid={
errors.columnOptionDto?.columnAutoWidth &&
touched.columnOptionDto?.columnAutoWidth
}
errorMessage={errors.columnOptionDto?.columnAutoWidth}
>
<Field
name="columnOptionDto.columnAutoWidth"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
invalid={
errors.columnOptionDto?.columnFixingEnabled &&
touched.columnOptionDto?.columnFixingEnabled
}
errorMessage={errors.columnOptionDto?.columnFixingEnabled}
>
<Field
name="columnOptionDto.columnFixingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled}
errorMessage={errors.columnOptionDto?.rtlEnabled}
>
<Field
name="columnOptionDto.rtlEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.columnOptionDto?.columnChooserEnabled &&
touched.columnOptionDto?.columnChooserEnabled
}
errorMessage={errors.columnOptionDto?.columnChooserEnabled}
>
<Field
name="columnOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
invalid={
errors.columnOptionDto?.columnChooserMode &&
touched.columnOptionDto?.columnChooserMode
}
errorMessage={errors.columnOptionDto?.columnChooserMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnChooserMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
>
{({ field, form }: FieldProps<ColumnChooserMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnChooserModeOptions}
value={columnChooserModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnChooserMode,
)}
component={Checkbox}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
invalid={
errors.columnOptionDto?.allowColumnReordering &&
touched.columnOptionDto?.allowColumnReordering
}
errorMessage={errors.columnOptionDto?.allowColumnReordering}
>
<Field
name="columnOptionDto.allowColumnReordering"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnReordering',
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
invalid={
errors.columnOptionDto?.allowColumnResizing &&
touched.columnOptionDto?.allowColumnResizing
}
errorMessage={errors.columnOptionDto?.allowColumnResizing}
>
<Field
name="columnOptionDto.allowColumnResizing"
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
invalid={
errors.columnOptionDto?.columnResizingMode &&
touched.columnOptionDto?.columnResizingMode
}
errorMessage={errors.columnOptionDto?.columnResizingMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnResizingMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
>
{({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnResizingModeOptions}
value={columnResizingModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnResizingMode,
)}
component={Checkbox}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
invalid={
errors.columnOptionDto?.columnAutoWidth &&
touched.columnOptionDto?.columnAutoWidth
}
errorMessage={errors.columnOptionDto?.columnAutoWidth}
>
<Field
name="columnOptionDto.columnAutoWidth"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
invalid={
errors.columnOptionDto?.columnFixingEnabled &&
touched.columnOptionDto?.columnFixingEnabled
}
errorMessage={errors.columnOptionDto?.columnFixingEnabled}
>
<Field
name="columnOptionDto.columnFixingEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
invalid={
errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
}
errorMessage={errors.columnOptionDto?.rtlEnabled}
>
<Field
name="columnOptionDto.rtlEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.columnOptionDto?.columnChooserEnabled &&
touched.columnOptionDto?.columnChooserEnabled
}
errorMessage={errors.columnOptionDto?.columnChooserEnabled}
>
<Field
name="columnOptionDto.columnChooserEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
invalid={
errors.columnOptionDto?.columnChooserMode &&
touched.columnOptionDto?.columnChooserMode
}
errorMessage={errors.columnOptionDto?.columnChooserMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnChooserMode"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
>
{({ field, form }: FieldProps<ColumnChooserMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnChooserModeOptions}
value={columnChooserModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnChooserMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
invalid={
errors.columnOptionDto?.allowColumnResizing &&
touched.columnOptionDto?.allowColumnResizing
}
errorMessage={errors.columnOptionDto?.allowColumnResizing}
>
<Field
name="columnOptionDto.allowColumnResizing"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionAllowColumnResizing',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
invalid={
errors.columnOptionDto?.columnResizingMode &&
touched.columnOptionDto?.columnResizingMode
}
errorMessage={errors.columnOptionDto?.columnResizingMode}
>
<Field
type="text"
autoComplete="off"
name="columnOptionDto.columnResizingMode"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnResizingMode',
)}
>
{({ field, form }: FieldProps<ColumnResizeMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={columnResizingModeOptions}
value={columnResizingModeOptions?.filter(
(option) => option.value === values.columnOptionDto.columnResizingMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
invalid={
errors.columnOptionDto?.hoverStateEnabled &&
touched.columnOptionDto?.hoverStateEnabled
}
errorMessage={errors.columnOptionDto?.hoverStateEnabled}
>
<Field
name="columnOptionDto.hoverStateEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
invalid={
errors.columnOptionDto?.columnHidingEnabled &&
touched.columnOptionDto?.columnHidingEnabled
}
errorMessage={errors.columnOptionDto?.columnHidingEnabled}
>
<Field
name="columnOptionDto.columnHidingEnabled"
placeholder={translate(
'::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
)}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
invalid={
errors.columnOptionDto?.focusedRowEnabled &&
touched.columnOptionDto?.focusedRowEnabled
}
errorMessage={errors.columnOptionDto?.focusedRowEnabled}
>
<Field
name="columnOptionDto.focusedRowEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
component={Checkbox}
/>
</FormItem>
</TabContent>
<TabContent value="tabPivots">
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
invalid={
errors.columnOptionDto?.showFieldPanel &&
touched.columnOptionDto?.showFieldPanel
}
errorMessage={errors.columnOptionDto?.showFieldPanel}
>
<Field
name="columnOptionDto.showFieldPanel"
placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
invalid={
errors.columnOptionDto?.allowFieldDragging &&
touched.columnOptionDto?.allowFieldDragging
}
errorMessage={errors.columnOptionDto?.allowFieldDragging}
>
<Field
name="columnOptionDto.allowFieldDragging"
placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={
errors.columnOptionDto?.showRowFields &&
touched.columnOptionDto?.showRowFields
}
errorMessage={errors.columnOptionDto?.showRowFields}
>
<Field
name="columnOptionDto.showColumnFields"
placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowRowFields')}
invalid={
errors.columnOptionDto?.showRowFields &&
touched.columnOptionDto?.showRowFields
}
errorMessage={errors.columnOptionDto?.showRowFields}
>
<Field
name="columnOptionDto.showRowFields"
placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={
errors.columnOptionDto?.showDataFields &&
touched.columnOptionDto?.showDataFields
}
errorMessage={errors.columnOptionDto?.showDataFields}
>
<Field
name="columnOptionDto.showDataFields"
placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
invalid={
errors.columnOptionDto?.showFilterFields &&
touched.columnOptionDto?.showFilterFields
}
errorMessage={errors.columnOptionDto?.showFilterFields}
>
<Field
name="columnOptionDto.showFilterFields"
placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowChart')}
invalid={
errors.columnOptionDto?.showChart && touched.columnOptionDto?.showChart
}
errorMessage={errors.columnOptionDto?.showChart}
>
<Field
name="columnOptionDto.showChart"
placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={
errors.columnOptionDto?.chartHeight && touched.columnOptionDto?.chartHeight
}
errorMessage={errors.columnOptionDto?.chartHeight}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.chartHeight"
placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
errors.columnOptionDto?.chartCommonSeriesType &&
touched.columnOptionDto?.chartCommonSeriesType
}
errorMessage={errors.columnOptionDto?.chartCommonSeriesType}
>
<Field type="text" name="columnOptionDto.chartCommonSeriesType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter(
(option) =>
option.value === values.columnOptionDto.chartCommonSeriesType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</TabContent>
</Tabs>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
invalid={
errors.columnOptionDto?.hoverStateEnabled &&
touched.columnOptionDto?.hoverStateEnabled
}
errorMessage={errors.columnOptionDto?.hoverStateEnabled}
>
<Field
name="columnOptionDto.hoverStateEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
invalid={
errors.columnOptionDto?.columnHidingEnabled &&
touched.columnOptionDto?.columnHidingEnabled
}
errorMessage={errors.columnOptionDto?.columnHidingEnabled}
>
<Field
name="columnOptionDto.columnHidingEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
invalid={
errors.columnOptionDto?.focusedRowEnabled &&
touched.columnOptionDto?.focusedRowEnabled
}
errorMessage={errors.columnOptionDto?.focusedRowEnabled}
>
<Field
name="columnOptionDto.focusedRowEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
component={Checkbox}
/>
</FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

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

@ -83,6 +83,84 @@ function FormTabDetails(props: FormEditProps) {
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ListFormType')}
invalid={errors.listFormType && touched.listFormType}
errorMessage={errors.listFormType}
>
<Field
type="text"
autoComplete="off"
name="listFormType"
placeholder={translate('::ListForms.ListFormEdit.ListFormType')}
>
{({ field, form }: FieldProps<SelectBox>) => (
<Select
field={field}
form={form}
isClearable={true}
options={listFormTypeOptions}
value={listFormTypeOptions?.filter(
(option) => option.value === values.listFormType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
{values.listFormType === 'List' && (
<>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
invalid={errors.layoutDto?.defaultLayout && touched.layoutDto?.defaultLayout}
errorMessage={errors.layoutDto?.defaultLayout}
>
<Field
type="text"
autoComplete="off"
name="layoutDto.defaultLayout"
placeholder={translate(
'::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout',
)}
>
{({ field, form }: FieldProps<SelectBox>) => (
<Select
field={field}
form={form}
isClearable={true}
options={listFormDefaultLayoutOptions}
value={listFormDefaultLayoutOptions?.filter(
(option) => option.value === values.layoutDto.defaultLayout,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn')}
invalid={
errors.layoutDto?.cardLayoutColumn && touched.layoutDto?.cardLayoutColumn
}
errorMessage={errors.layoutDto?.cardLayoutColumn}
>
<Field
type="number"
className="w-20"
autoComplete="off"
name="layoutDto.cardLayoutColumn"
placeholder={translate(
'::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn',
)}
component={Input}
/>
</FormItem>
</>
)}
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsTitle')}
invalid={errors.title && touched.title}
@ -109,42 +187,6 @@ function FormTabDetails(props: FormEditProps) {
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm}
errorMessage={errors.isSubForm}
>
<Field
name="isSubForm"
placeholder={translate('::ListForms.ListFormEdit.IsSub')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ListFormType')}
invalid={errors.listFormType && touched.listFormType}
errorMessage={errors.listFormType}
>
<Field
type="text"
autoComplete="off"
name="listFormType"
placeholder={translate('::ListForms.ListFormEdit.ListFormType')}
>
{({ field, form }: FieldProps<SelectBox>) => (
<Select
field={field}
form={form}
isClearable={true}
options={listFormTypeOptions}
value={listFormTypeOptions?.filter(
(option) => option.value === values.listFormType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsDescription')}
invalid={errors.description && touched.description}
@ -156,123 +198,94 @@ function FormTabDetails(props: FormEditProps) {
name="description"
placeholder={translate('::ListForms.ListFormEdit.DetailsDescription')}
component={Input}
rows={6}
textArea={true}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsWidth')}
invalid={errors.width && touched.width}
errorMessage={errors.width}
label={translate('::ListForms.ListFormEdit.IsSub')}
invalid={errors.isSubForm && touched.isSubForm}
errorMessage={errors.isSubForm}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="width"
placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsHeight')}
invalid={errors.width && touched.width}
errorMessage={errors.width}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="height"
placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
errorMessage={errors.layoutDto?.grid}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.grid"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
name="isSubForm"
placeholder={translate('::ListForms.ListFormEdit.IsSub')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
invalid={errors.layoutDto?.card && touched.layoutDto?.card}
errorMessage={errors.layoutDto?.card}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.card"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
invalid={errors.layoutDto?.card && touched.layoutDto?.card}
errorMessage={errors.layoutDto?.card}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.pivot"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
invalid={errors.layoutDto?.defaultLayout && touched.layoutDto?.defaultLayout}
errorMessage={errors.layoutDto?.defaultLayout}
>
<Field
type="text"
autoComplete="off"
name="layoutDto.defaultLayout"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
<div className="flex gap-2">
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsWidth')}
invalid={errors.width && touched.width}
errorMessage={errors.width}
>
{({ field, form }: FieldProps<SelectBox>) => (
<Select
field={field}
form={form}
isClearable={true}
options={listFormDefaultLayoutOptions}
value={listFormDefaultLayoutOptions?.filter(
(option) => option.value === values.layoutDto.defaultLayout,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<Field
className="w-20"
type="number"
autoComplete="off"
name="width"
placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsHeight')}
invalid={errors.width && touched.width}
errorMessage={errors.width}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="height"
placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
component={Input}
/>
</FormItem>
</div>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn')}
invalid={errors.layoutDto?.cardLayoutColumn && touched.layoutDto?.cardLayoutColumn}
errorMessage={errors.layoutDto?.cardLayoutColumn}
>
<Field
type="number"
className="w-20"
autoComplete="off"
name="layoutDto.cardLayoutColumn"
placeholder={translate(
'::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn',
)}
component={Input}
/>
</FormItem>
<div className="flex gap-2">
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
errorMessage={errors.layoutDto?.grid}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.grid"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
invalid={errors.layoutDto?.card && touched.layoutDto?.card}
errorMessage={errors.layoutDto?.card}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.card"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
invalid={errors.layoutDto?.card && touched.layoutDto?.card}
errorMessage={errors.layoutDto?.card}
>
<Field
className="w-20"
autoComplete="off"
name="layoutDto.pivot"
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
component={Checkbox}
/>
</FormItem>
</div>
<Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

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

@ -9,9 +9,6 @@ import {
Select,
Tabs,
} from '@/components/ui'
import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav'
import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
@ -24,7 +21,6 @@ import {
import { Field, FieldProps, Form, Formik } from 'formik'
import { object } from 'yup'
import { FormEditProps } from './FormEdit'
import FormTabEditForm from './FormTabEditForm'
import {
editingOptionModeOptions,
editingOptionNewRowPositionOptions,
@ -44,374 +40,357 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
return (
<Container>
<Tabs defaultValue="tabEdit">
<TabList className="flex-wrap">
<TabNav value="tabEdit">{translate('::ListForms.ListFormEdit.Editing')}</TabNav>
<TabNav value="tabForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
</TabList>
<TabContent value="tabEdit">
<Formik
initialValues={listFormValues}
validationSchema={schema}
onSubmit={async (values, formikHelpers) => {
await props.onSubmit(ListFormEditTabs.Edit.EditForm, values, formikHelpers)
}}
>
{({ touched, errors, values, isSubmitting }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
invalid={
errors.editingOptionDto?.allowAdding &&
touched.editingOptionDto?.allowAdding
}
errorMessage={errors.editingOptionDto?.allowAdding}
>
<Field
name="editingOptionDto.allowAdding"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
invalid={
errors.editingOptionDto?.allowUpdating &&
touched.editingOptionDto?.allowUpdating
}
errorMessage={errors.editingOptionDto?.allowUpdating}
>
<Field
name="editingOptionDto.allowUpdating"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={
errors.editingOptionDto?.allowDeleting &&
touched.editingOptionDto?.allowDeleting
}
errorMessage={errors.editingOptionDto?.allowDeleting}
>
<Field
name="editingOptionDto.allowDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
invalid={
errors.editingOptionDto?.allowAllDeleting &&
touched.editingOptionDto?.allowAllDeleting
}
errorMessage={errors.editingOptionDto?.allowAllDeleting}
>
<Field
name="editingOptionDto.allowAllDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={
errors.editingOptionDto?.confirmDelete &&
touched.editingOptionDto?.confirmDelete
}
errorMessage={errors.editingOptionDto?.confirmDelete}
>
<Field
name="editingOptionDto.confirmDelete"
placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
invalid={
errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
}
errorMessage={errors.editingOptionDto?.useIcons}
>
<Field
name="editingOptionDto.useIcons"
placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={
errors.editingOptionDto?.selectTextOnEditStart &&
touched.editingOptionDto?.selectTextOnEditStart
}
errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
>
<Field
name="editingOptionDto.selectTextOnEditStart"
placeholder={translate(
'::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
<Formik
initialValues={listFormValues}
validationSchema={schema}
onSubmit={async (values, formikHelpers) => {
await props.onSubmit(ListFormEditTabs.Edit.EditForm, values, formikHelpers)
}}
>
{({ touched, errors, values, isSubmitting }) => (
<Form>
<FormContainer size="sm">
<Card className="my-2">
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
invalid={
errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
}
errorMessage={errors.editingOptionDto?.allowAdding}
>
<Field
name="editingOptionDto.allowAdding"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
invalid={
errors.editingOptionDto?.allowUpdating &&
touched.editingOptionDto?.allowUpdating
}
errorMessage={errors.editingOptionDto?.allowUpdating}
>
<Field
name="editingOptionDto.allowUpdating"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
invalid={
errors.editingOptionDto?.allowDeleting &&
touched.editingOptionDto?.allowDeleting
}
errorMessage={errors.editingOptionDto?.allowDeleting}
>
<Field
name="editingOptionDto.allowDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
invalid={
errors.editingOptionDto?.allowAllDeleting &&
touched.editingOptionDto?.allowAllDeleting
}
errorMessage={errors.editingOptionDto?.allowAllDeleting}
>
<Field
name="editingOptionDto.allowAllDeleting"
placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
invalid={
errors.editingOptionDto?.confirmDelete &&
touched.editingOptionDto?.confirmDelete
}
errorMessage={errors.editingOptionDto?.confirmDelete}
>
<Field
name="editingOptionDto.confirmDelete"
placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
invalid={errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons}
errorMessage={errors.editingOptionDto?.useIcons}
>
<Field
name="editingOptionDto.useIcons"
placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
invalid={
errors.editingOptionDto?.selectTextOnEditStart &&
touched.editingOptionDto?.selectTextOnEditStart
}
errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
>
<Field
name="editingOptionDto.selectTextOnEditStart"
placeholder={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
errorMessage={errors.editingOptionDto?.mode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.mode"
placeholder={translate('::ListForms.ListFormEdit.EditingMode')}
>
{({ field, form }: FieldProps<GridsEditMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionModeOptions}
value={editingOptionModeOptions?.filter(
(option) => option.value === values.editingOptionDto.mode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
invalid={
errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
}
errorMessage={errors.editingOptionDto?.refreshMode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.refreshMode"
placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
>
{({ field, form }: FieldProps<GridsEditRefreshMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionRefreshModeOptions}
value={editingOptionRefreshModeOptions?.filter(
(option) => option.value === values.editingOptionDto.refreshMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
invalid={
errors.editingOptionDto?.newRowPosition &&
touched.editingOptionDto?.newRowPosition
}
errorMessage={errors.editingOptionDto?.newRowPosition}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.newRowPosition"
placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
>
{({ field, form }: FieldProps<NewRowPosition>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionNewRowPositionOptions}
value={editingOptionNewRowPositionOptions?.filter(
(option) => option.value === values.editingOptionDto.newRowPosition,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
invalid={
errors.editingOptionDto?.startEditAction &&
touched.editingOptionDto?.startEditAction
}
errorMessage={errors.editingOptionDto?.startEditAction}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.startEditAction"
placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
>
{({ field, form }: FieldProps<StartEditAction>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter(
(option) => option.value === values.editingOptionDto.startEditAction,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
invalid={
errors.editingOptionDto?.editColumnName &&
touched.editingOptionDto?.editColumnName
}
errorMessage={errors.editingOptionDto?.editColumnName}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.editColumnName"
placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
component={Input}
/>
</FormItem>
{values.editingOptionDto.mode === 'popup' && (
<>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
invalid={
errors.editingOptionDto?.popup?.showTitle &&
touched.editingOptionDto?.popup?.showTitle
}
errorMessage={errors.editingOptionDto?.popup?.showTitle}
>
<Field
name="editingOptionDto.popup.showTitle"
placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingMode')}
invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
errorMessage={errors.editingOptionDto?.mode}
label={translate('::ListForms.ListFormEdit.EditingTitle')}
invalid={
errors.editingOptionDto?.popup?.title &&
touched.editingOptionDto?.popup?.title
}
errorMessage={errors.editingOptionDto?.popup?.title}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.mode"
placeholder={translate('::ListForms.ListFormEdit.EditingMode')}
>
{({ field, form }: FieldProps<GridsEditMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionModeOptions}
value={editingOptionModeOptions?.filter(
(option) => option.value === values.editingOptionDto.mode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
invalid={
errors.editingOptionDto?.refreshMode &&
touched.editingOptionDto?.refreshMode
}
errorMessage={errors.editingOptionDto?.refreshMode}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.refreshMode"
placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
>
{({ field, form }: FieldProps<GridsEditRefreshMode>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionRefreshModeOptions}
value={editingOptionRefreshModeOptions?.filter(
(option) => option.value === values.editingOptionDto.refreshMode,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
invalid={
errors.editingOptionDto?.newRowPosition &&
touched.editingOptionDto?.newRowPosition
}
errorMessage={errors.editingOptionDto?.newRowPosition}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.newRowPosition"
placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
>
{({ field, form }: FieldProps<NewRowPosition>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionNewRowPositionOptions}
value={editingOptionNewRowPositionOptions?.filter(
(option) => option.value === values.editingOptionDto.newRowPosition,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
invalid={
errors.editingOptionDto?.startEditAction &&
touched.editingOptionDto?.startEditAction
}
errorMessage={errors.editingOptionDto?.startEditAction}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.startEditAction"
placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
>
{({ field, form }: FieldProps<StartEditAction>) => (
<Select
field={field}
form={form}
isClearable={true}
options={editingOptionStartEditActionOptions}
value={editingOptionStartEditActionOptions?.filter(
(option) => option.value === values.editingOptionDto.startEditAction,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
invalid={
errors.editingOptionDto?.editColumnName &&
touched.editingOptionDto?.editColumnName
}
errorMessage={errors.editingOptionDto?.editColumnName}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.editColumnName"
placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
name="editingOptionDto.popup.title"
placeholder={translate('::ListForms.ListFormEdit.EditingTitle')}
component={Input}
/>
</FormItem>
{values.editingOptionDto.mode === 'popup' && (
<>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
invalid={
errors.editingOptionDto?.popup?.showTitle &&
touched.editingOptionDto?.popup?.showTitle
}
errorMessage={errors.editingOptionDto?.popup?.showTitle}
>
<Field
name="editingOptionDto.popup.showTitle"
placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingTitle')}
invalid={
errors.editingOptionDto?.popup?.title &&
touched.editingOptionDto?.popup?.title
}
errorMessage={errors.editingOptionDto?.popup?.title}
>
<Field
type="text"
autoComplete="off"
name="editingOptionDto.popup.title"
placeholder={translate('::ListForms.ListFormEdit.EditingTitle')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingWidth')}
invalid={
errors.editingOptionDto?.popup?.width &&
touched.editingOptionDto?.popup?.width
}
errorMessage={errors.editingOptionDto?.popup?.width}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.popup.width"
placeholder={translate('::ListForms.ListFormEdit.EditingWidth')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingHeight')}
invalid={
errors.editingOptionDto?.popup?.height &&
touched.editingOptionDto?.popup?.height
}
errorMessage={errors.editingOptionDto?.popup?.height}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.popup.height"
placeholder={translate('::ListForms.ListFormEdit.EditingHeight')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
invalid={
errors.editingOptionDto?.popup?.fullScreen &&
touched.editingOptionDto?.popup?.fullScreen
}
errorMessage={errors.editingOptionDto?.popup?.fullScreen}
>
<Field
name="editingOptionDto.popup.fullScreen"
placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
invalid={
errors.editingOptionDto?.popup?.hideOnOutsideClick &&
touched.editingOptionDto?.popup?.hideOnOutsideClick
}
errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
>
<Field
name="editingOptionDto.popup.hideOnOutsideClick"
placeholder={translate(
'::ListForms.ListFormEdit.EditingHideOnOutsideClick',
)}
component={Checkbox}
/>
</FormItem>
</>
)}
<FormItem
label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
label={translate('::ListForms.ListFormEdit.EditingWidth')}
invalid={
errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
errors.editingOptionDto?.popup?.width &&
touched.editingOptionDto?.popup?.width
}
errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
errorMessage={errors.editingOptionDto?.popup?.width}
>
<Field
name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.popup.width"
placeholder={translate('::ListForms.ListFormEdit.EditingWidth')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingHeight')}
invalid={
errors.editingOptionDto?.popup?.height &&
touched.editingOptionDto?.popup?.height
}
errorMessage={errors.editingOptionDto?.popup?.height}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.popup.height"
placeholder={translate('::ListForms.ListFormEdit.EditingHeight')}
component={Input}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
invalid={
errors.editingOptionDto?.popup?.fullScreen &&
touched.editingOptionDto?.popup?.fullScreen
}
errorMessage={errors.editingOptionDto?.popup?.fullScreen}
>
<Field
name="editingOptionDto.popup.fullScreen"
placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
invalid={
errors.editingOptionDto?.popup?.hideOnOutsideClick &&
touched.editingOptionDto?.popup?.hideOnOutsideClick
}
errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
>
<Field
name="editingOptionDto.popup.hideOnOutsideClick"
placeholder={translate(
'::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
'::ListForms.ListFormEdit.EditingHideOnOutsideClick',
)}
component={Checkbox}
/>
</FormItem>
<Button block variant="solid" loading={isSubmitting}>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button>
</Card>
</FormContainer>
</Form>
)}
</Formik>
</TabContent>
<TabContent value="tabForm">
<FormTabEditForm listFormCode={props.listFormCode} />
</TabContent>
</Tabs>
</>
)}
<FormItem
label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
invalid={
errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
}
errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
>
<Field
name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
placeholder={translate(
'::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
)}
component={Checkbox}
/>
</FormItem>
<Button block variant="solid" loading={isSubmitting}>
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button>
</Card>
</FormContainer>
</Form>
)}
</Formik>
</Container>
)
}

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

@ -0,0 +1,173 @@
import { Container } from '@/components/shared'
import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik'
import * as Yup from 'yup'
import { FormEditProps } from './FormEdit'
import { SelectBoxOption } from '@/shared/types'
import { chartSeriesTypeOptions } from '../../chart/options'
const validationSchema = Yup.object().shape({})
function FormTabColumns(props: FormEditProps) {
const { translate } = useLocalization()
const listFormValues = useStoreState((s) => s.admin.listFormValues)
if (!listFormValues) {
return null
}
return (
<Container className="grid xl:grid-cols-2">
<Formik
initialValues={listFormValues}
validationSchema={validationSchema}
onSubmit={async (values, formikHelpers) => {
await props.onSubmit(ListFormEditTabs.PivotForm, values, formikHelpers)
}}
>
{({ touched, errors, isSubmitting, values }) => (
<Form>
<FormContainer size="sm">
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
invalid={
errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel
}
errorMessage={errors.pivotOptionDto?.showFieldPanel}
>
<Field
name="pivotOptionDto.showFieldPanel"
placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
invalid={
errors.pivotOptionDto?.allowFieldDragging &&
touched.pivotOptionDto?.allowFieldDragging
}
errorMessage={errors.pivotOptionDto?.allowFieldDragging}
>
<Field
name="pivotOptionDto.allowFieldDragging"
placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showColumnFields"
placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowRowFields')}
invalid={
errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
}
errorMessage={errors.pivotOptionDto?.showRowFields}
>
<Field
name="pivotOptionDto.showRowFields"
placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowDataFields')}
invalid={
errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields
}
errorMessage={errors.pivotOptionDto?.showDataFields}
>
<Field
name="pivotOptionDto.showDataFields"
placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
invalid={
errors.pivotOptionDto?.showFilterFields &&
touched.pivotOptionDto?.showFilterFields
}
errorMessage={errors.pivotOptionDto?.showFilterFields}
>
<Field
name="pivotOptionDto.showFilterFields"
placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ShowChart')}
invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
errorMessage={errors.pivotOptionDto?.showChart}
>
<Field
name="pivotOptionDto.showChart"
placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
component={Checkbox}
/>
</FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.ChartHeight')}
invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight}
errorMessage={errors.pivotOptionDto?.chartHeight}
>
<Field
className="w-20"
type="number"
autoComplete="off"
name="editingOptionDto.chartHeight"
placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
component={Input}
/>
</FormItem>
<FormItem
label="Type"
invalid={
errors.pivotOptionDto?.chartCommonSeriesType &&
touched.pivotOptionDto?.chartCommonSeriesType
}
errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
>
<Field type="text" name="pivotOptionDto.chartCommonSeriesType">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesTypeOptions}
value={chartSeriesTypeOptions.filter(
(option) => option.value === values.pivotOptionDto.chartCommonSeriesType,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
</Button>
</FormContainer>
</Form>
)}
</Formik>
</Container>
)
}
export default FormTabColumns

1
ui/src/views/admin/listForm/edit/options.ts
View file

@ -26,7 +26,6 @@ import {
} from '../../../../proxy/admin/list-form-field/models'
import { enumToList } from '../../../../utils/enumUtils'
import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
import { SelectBoxOption } from '@/shared/types'
export const sortModeOptions = [
{ value: 'none', label: 'None' },

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

@ -33,6 +33,7 @@ import {
setGridPanelColor,
} from './Utils'
import { useFilters } from './useFilters'
import WidgetGroup from '@/components/common/WidgetGroup'
interface GridProps {
listFormCode: string
@ -236,66 +237,70 @@ const Pivot = (props: GridProps) => {
}, [columnData])
return (
<Container className={DX_CLASSNAMES}>
{!isSubForm && (
<Helmet
titleTemplate="%s | Sözsoft Kurs Platform"
title={translate('::' + gridDto?.gridOptions.title)}
defaultTitle="Sözsoft Kurs Platform"
></Helmet>
)}
{gridDto && columnData && (
<>
{gridDto.gridOptions.columnOptionDto.showChart && (
<Chart ref={chartRef as any}>
<Size height={gridDto.gridOptions.columnOptionDto.chartHeight} />
<Tooltip enabled={true}></Tooltip>
<CommonSeriesSettings
type={gridDto.gridOptions.columnOptionDto.chartCommonSeriesType}
/>
</Chart>
)}
<>
<WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
<PivotGrid
ref={gridRef as any}
id={'Pivot-' + listFormCode}
allowFiltering={gridDto.gridOptions.filterRowDto.visible}
allowSorting={gridDto.gridOptions.sortMode !== 'none'}
allowSortingBySummary={gridDto.gridOptions.sortMode !== 'none'}
height={gridDto.gridOptions.height || '100%'}
width={gridDto.gridOptions.width || '100%'}
showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
onCellPrepared={onCellPrepared}
>
<HeaderFilter
allowSelectAll={gridDto.gridOptions.selectionDto.allowSelectAll}
width={gridDto.gridOptions.headerFilterDto.width}
height={gridDto.gridOptions.headerFilterDto.height}
<Container className={DX_CLASSNAMES}>
{!isSubForm && (
<Helmet
titleTemplate="%s | Sözsoft Kurs Platform"
title={translate('::' + gridDto?.gridOptions.title)}
defaultTitle="Sözsoft Kurs Platform"
></Helmet>
)}
{gridDto && columnData && (
<>
{gridDto.gridOptions.pivotOptionDto.showChart && (
<Chart ref={chartRef as any}>
<Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
<Tooltip enabled={true}></Tooltip>
<CommonSeriesSettings
type={gridDto.gridOptions.pivotOptionDto.chartCommonSeriesType}
/>
</Chart>
)}
<PivotGrid
ref={gridRef as any}
id={'Pivot-' + listFormCode}
allowFiltering={gridDto.gridOptions.filterRowDto.visible}
allowSorting={gridDto.gridOptions.sortMode !== 'none'}
allowSortingBySummary={gridDto.gridOptions.sortMode !== 'none'}
height={gridDto.gridOptions.height || '100%'}
width={gridDto.gridOptions.width || '100%'}
showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
onCellPrepared={onCellPrepared}
>
<Search
enabled={gridDto.gridOptions.headerFilterDto.allowSearch}
timeout={gridDto.gridOptions.headerFilterDto.searchTimeout}
></Search>
</HeaderFilter>
<FieldPanel
allowFieldDragging={gridDto.gridOptions.columnOptionDto.allowFieldDragging}
visible={gridDto.gridOptions.columnOptionDto.showFieldPanel}
showDataFields={gridDto.gridOptions.columnOptionDto.showDataFields}
showColumnFields={gridDto.gridOptions.columnOptionDto.showColumnFields}
showRowFields={gridDto.gridOptions.columnOptionDto.showRowFields}
showFilterFields={gridDto.gridOptions.columnOptionDto.showFilterFields}
/>
<FieldChooser
enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled}
height={500}
/>
<Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
</PivotGrid>
</>
)}
</Container>
<HeaderFilter
allowSelectAll={gridDto.gridOptions.selectionDto.allowSelectAll}
width={gridDto.gridOptions.headerFilterDto.width}
height={gridDto.gridOptions.headerFilterDto.height}
>
<Search
enabled={gridDto.gridOptions.headerFilterDto.allowSearch}
timeout={gridDto.gridOptions.headerFilterDto.searchTimeout}
></Search>
</HeaderFilter>
<FieldPanel
allowFieldDragging={gridDto.gridOptions.pivotOptionDto.allowFieldDragging}
visible={gridDto.gridOptions.pivotOptionDto.showFieldPanel}
showDataFields={gridDto.gridOptions.pivotOptionDto.showDataFields}
showColumnFields={gridDto.gridOptions.pivotOptionDto.showColumnFields}
showRowFields={gridDto.gridOptions.pivotOptionDto.showRowFields}
showFilterFields={gridDto.gridOptions.pivotOptionDto.showFilterFields}
/>
<FieldChooser
enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled}
height={500}
/>
<Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
</PivotGrid>
</>
)}
</Container>
</>
)
}