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

listForm ve Chart birleştirildi

Browse source
This commit is contained in:
Sedat Öztürk 2025-09-27 02:40:39 +03:00
parent 04cf4328cb
commit e74484fbc2
20 changed files with 426 additions and 297 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,8 @@ public class ListFormAutoMapperProfile : Profile
CreateMap<ExtraFilterEditDto, ExtraFilterDto>()
.ForMember(dest => dest.Items, opt => opt.MapFrom(src => src.Items));
CreateMap<ExtraFilterEditDto, ExtraFilter>().ReverseMap();
CreateMap<ChartSeriesDto, ChartSeries>();
CreateMap<ChartSeriesDto, ChartSeries>().ReverseMap();
CreateMap<ChartLabelDto, ChartLabel>();
CreateMap<ChartValueAxisDto, ChartValueAxis>();
CreateMap<ChartAxisGridDto, ChartAxisGrid>();

15
api/src/Kurs.Platform.Domain/Queries/Break.cs
View file

@ -1,16 +1,25 @@
using System.Collections.Generic;
using System.Text.Json.Serialization;
using Volo.Abp.Domain.Values;
namespace Kurs.Platform.Queries;
/// <summary>
/// Break tanımı
/// </summary>
public class Break : ValueObject
{
public int EndValue { get; set; }
public int StartValue { get; set; }
[JsonPropertyName("StartValue")]
public int StartValue { get; private set; }
[JsonPropertyName("EndValue")]
public int EndValue { get; private set; }
protected Break() { } // Json buradan set edecek
protected override IEnumerable<object> GetAtomicValues()
{
yield return EndValue;
yield return StartValue;
yield return EndValue;
}
}

17
api/src/Kurs.Platform.Domain/Queries/BreakStyle.cs
View file

@ -1,13 +1,24 @@
using System.Collections.Generic;
using System.Text.Json.Serialization;
using Volo.Abp.Domain.Values;
namespace Kurs.Platform.Queries;
/// <summary>
/// Break style tanımı
/// </summary>
public class BreakStyle : ValueObject
{
public string Color { get; private set; } = "#ababab";
public string Line { get; private set; } = "waved";
public int Width { get; private set; } = 5;
[JsonPropertyName("Color")]
public string Color { get; private set; }
[JsonPropertyName("Line")]
public string Line { get; private set; }
[JsonPropertyName("Width")]
public int Width { get; private set; }
protected BreakStyle() { }
protected override IEnumerable<object> GetAtomicValues()
{

20
api/src/Kurs.Platform.Domain/Queries/ChartAxisGrid.cs
View file

@ -1,22 +1,24 @@
using System.Collections.Generic;
using System.Text.Json.Serialization;
using Volo.Abp.Domain.Values;
namespace Kurs.Platform.Queries;
/// <summary>
/// Grid tanımı
/// </summary>
public class ChartAxisGrid : ValueObject
{
public string Color { get; private set; } = "#d3d3d3";
[JsonPropertyName("Color")]
public string Color { get; private set; }
[JsonPropertyName("Visible")]
public bool Visible { get; private set; }
public int Width { get; private set; } = 1;
private ChartAxisGrid() { } // EF Core için gerekli
[JsonPropertyName("Width")]
public int Width { get; private set; }
public ChartAxisGrid(string color, bool visible, int width)
{
Color = string.IsNullOrWhiteSpace(color) ? "#d3d3d3" : color;
Visible = visible;
Width = width > 0 ? width : 1;
}
protected ChartAxisGrid() { }
protected override IEnumerable<object> GetAtomicValues()
{

3
api/src/Kurs.Platform.Domain/Queries/ChartFont.cs
View file

@ -10,6 +10,9 @@ public class ChartFont : ValueObject
public int Size { get; private set; } = 12;
public int Weight { get; private set; } = 400;
// EF Core + JSON için korumalı ctor
protected ChartFont() { }
protected override IEnumerable<object> GetAtomicValues()
{
yield return Color;

3
api/src/Kurs.Platform.Domain/Queries/ChartLabel.cs
View file

@ -11,6 +11,9 @@ public class ChartLabel : ValueObject
public bool Visible { get; private set; }
public string Format { get; private set; }
// EF Core + JSON için korumalı ctor
protected ChartLabel() { }
protected override IEnumerable<object> GetAtomicValues()
{
yield return BackgroundColor;

25
api/src/Kurs.Platform.Domain/Queries/ChartSeries.cs
View file

@ -1,32 +1,55 @@
using System.Collections.Generic;
using System.Text.Json.Serialization;
using Volo.Abp.Domain.Values;
namespace Kurs.Platform.Queries;
public class ChartSeries : ValueObject
{
[JsonPropertyName("ArgumentField")]
public string ArgumentField { get; private set; } = "arg";
[JsonPropertyName("Axis")]
public string Axis { get; private set; }
[JsonPropertyName("BarOverlapGroup")]
public string BarOverlapGroup { get; private set; }
[JsonPropertyName("BarPadding")]
public int BarPadding { get; private set; }
[JsonPropertyName("BarWidth")]
public int BarWidth { get; private set; }
[JsonPropertyName("Color")]
public string Color { get; private set; }
[JsonPropertyName("CornerRadius")]
public int CornerRadius { get; private set; } = 0;
[JsonPropertyName("DashStyle")]
public string DashStyle { get; private set; } = "solid";
[JsonPropertyName("IgnoreEmptyPoints")]
public bool IgnoreEmptyPoints { get; private set; } = false;
[JsonPropertyName("Name")]
public string Name { get; private set; }
[JsonPropertyName("Pane")]
public string Pane { get; private set; }
[JsonPropertyName("RangeValue1Field")]
public string RangeValue1Field { get; private set; } = "val1";
[JsonPropertyName("RangeValue2Field")]
public string RangeValue2Field { get; private set; } = "val2";
[JsonPropertyName("SelectionMode")]
public string SelectionMode { get; private set; } = "none";
[JsonPropertyName("ShowInLegend")]
public bool ShowInLegend { get; private set; } = true;
[JsonPropertyName("Type")]
public string Type { get; private set; }
[JsonPropertyName("ValueField")]
public string ValueField { get; private set; }
[JsonPropertyName("Visible")]
public bool Visible { get; private set; } = true;
[JsonPropertyName("Width")]
public int Width { get; private set; } = 2;
[JsonPropertyName("Label")]
public ChartLabel Label { get; private set; }
// EF Core + JSON için korumalı ctor
public ChartSeries() { }
protected override IEnumerable<object> GetAtomicValues()
{
yield return ArgumentField;

72
api/src/Kurs.Platform.Domain/Queries/ChartValueAxis.cs
View file

@ -1,53 +1,61 @@
using System.Collections.Generic;
using System.Linq;
using System.Text.Json.Serialization;
using Volo.Abp.Domain.Values;
namespace Kurs.Platform.Queries;
public class ChartValueAxis : ValueObject
{
[JsonPropertyName("Grid")]
public ChartAxisGrid Grid { get; private set; }
[JsonPropertyName("Name")]
public string Name { get; private set; }
public string Position { get; private set; } = "left";
[JsonPropertyName("Position")]
public string Position { get; private set; }
[JsonPropertyName("Title")]
public string Title { get; private set; }
public string ValueType { get; private set; } = "numeric";
public bool Visible { get; private set; } = true;
public int Width { get; private set; } = 1;
[JsonPropertyName("ValueType")]
public string ValueType { get; private set; }
[JsonPropertyName("Visible")]
public bool Visible { get; private set; }
[JsonPropertyName("Width")]
public int Width { get; private set; }
[JsonPropertyName("Breaks")]
public IReadOnlyCollection<Break> Breaks { get; private set; }
[JsonPropertyName("BreakStyle")]
public BreakStyle BreakStyle { get; private set; }
[JsonPropertyName("Type")]
public string Type { get; private set; }
public bool AutoBreaksEnabled { get; private set; } = true;
public int MaxAutoBreakCount { get; private set; } = 2;
public ChartValueAxis(
ChartAxisGrid grid,
string name,
string position,
string title,
string valueType,
bool visible,
int width,
IEnumerable<Break> breaks,
BreakStyle breakStyle,
string type,
bool autoBreaksEnabled,
int maxAutoBreakCount)
[JsonPropertyName("AutoBreaksEnabled")]
public bool AutoBreaksEnabled { get; private set; }
[JsonPropertyName("MaxAutoBreakCount")]
public int MaxAutoBreakCount { get; private set; }
// 🔑 Bunu bırak yeterli
[JsonConstructor]
protected ChartValueAxis()
{
Grid = grid;
Name = name;
Position = position ?? "left";
Title = title;
ValueType = valueType ?? "numeric";
Visible = visible;
Width = width > 0 ? width : 1;
Breaks = breaks?.ToList() ?? [];
BreakStyle = breakStyle;
Type = type;
AutoBreaksEnabled = autoBreaksEnabled;
MaxAutoBreakCount = maxAutoBreakCount;
Breaks = [];
Position = "left";
ValueType = "numeric";
Visible = true;
Width = 1;
AutoBreaksEnabled = true;
MaxAutoBreakCount = 2;
}
protected override IEnumerable<object> GetAtomicValues()
{
yield return Grid;

4
ui/src/proxy/admin/charts/models.ts
View file

@ -257,7 +257,7 @@ export interface ChartFontDto {
export interface ChartLabelDto {
backgroundColor?: string
customizeText?: string
font: ChartFontDto
font?: ChartFontDto | null
visible: boolean
format?: string
}
@ -285,9 +285,9 @@ export interface ChartOptionsRequestDto {
}
export interface ChartPanesDto {
name: string
backgroundColor?: string
height: number
name?: string
}
export interface ChartScrollBarDto {

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

@ -47,8 +47,8 @@ export interface ListFormJsonRowDto {
itemExtraFilter?: ExtraFilterEditDto
itemChartAnnotation?: ChartAnnotationDto
itemChartPane?: ChartPanesDto
itemChartSerie?: ChartSeriesDto
itemChartPanes?: ChartPanesDto
itemChartSeries?: ChartSeriesDto
itemChartValueAxis?: ChartValueAxisDto
}

2
ui/src/store/admin.model.ts
View file

@ -12,7 +12,7 @@ export interface AdminStoreActions {
setListFormValues: Action<AdminStoreModel, GridOptionsEditDto>
setJsonValue: Action<
AdminStoreModel,
{ field: keyof GridOptionsEditDto; data: FieldsDefaultValueDto[] }
{ field: keyof GridOptionsEditDto; data: any[] }
>
getListFormValues: Thunk<AdminStoreActions, string | undefined, Injections>
// onSetLang: ThunkOn<AdminModel, Injections, StoreModel>

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

@ -33,6 +33,7 @@ import {
import { ChartSeriesDto } from '@/proxy/admin/charts/models'
import { JsonRowDialogData } from './json-row-operations/types'
import { useState } from 'react'
import JsonRowOpDialogAnnotation from './json-row-operations/JsonRowOpDialogAnnotation'
const schema = object().shape({
name: string().required(),
@ -93,7 +94,7 @@ function ChartTabAnnotations(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
operation: 'create',
id: values.id ?? '',
id: listFormValues.id ?? '',
index: -1,
})
setIsJsonRowOpDialogOpen(true)
@ -124,9 +125,9 @@ function ChartTabAnnotations(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
operation: 'update',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
chartAnnotationValues: values.annotationsDto[index],
chartAnnotationValues: listFormValues.annotationsDto[index],
})
setIsJsonRowOpDialogOpen(true)
}}
@ -142,7 +143,7 @@ function ChartTabAnnotations(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAnnotations.GeneralJsonRow,
operation: 'delete',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
})
setIsJsonRowOpDialogOpen(true)
@ -161,6 +162,12 @@ function ChartTabAnnotations(props: FormEditProps) {
</TBody>
</Table>
</Card>
<JsonRowOpDialogAnnotation
isOpen={isJsonRowOpDialogOpen}
setIsOpen={setIsJsonRowOpDialogOpen}
data={jsonRowOpModalData}
setData={setJsonRowOpModalData}
/>
</TabContent>
<TabContent value="annotations_common">
<Card className="my-2">

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

@ -87,7 +87,7 @@ function ChartTabAxis(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
operation: 'create',
id: values.id ?? '',
id: listFormValues.id ?? '',
index: -1,
})
setIsJsonRowOpDialogOpen(true)
@ -118,9 +118,9 @@ function ChartTabAxis(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
operation: 'update',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
chartValueAxisValues: values.valueAxisDto[index],
chartValueAxisValues: listFormValues.valueAxisDto[index],
})
setIsJsonRowOpDialogOpen(true)
}}
@ -136,7 +136,7 @@ function ChartTabAxis(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartAxis.ValueAxisJsonRow,
operation: 'delete',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
})
setIsJsonRowOpDialogOpen(true)

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

@ -16,6 +16,8 @@ import { useState } from 'react'
import JsonRowOpDialogPane from './json-row-operations/JsonRowOpDialogPane'
const schema = object().shape({
height: string().required('Height Required'),
name: string().required('Name Required'),
backgroundColor: string().notRequired(),
})
@ -75,7 +77,7 @@ function ChartTabPanes(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
operation: 'create',
id: values.id ?? '',
id: listFormValues.id ?? '',
index: -1,
})
setIsJsonRowOpDialogOpen(true)
@ -103,9 +105,9 @@ function ChartTabPanes(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
operation: 'update',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
chartPaneValues: values.panesDto[index],
chartPaneValues: listFormValues.panesDto[index],
})
setIsJsonRowOpDialogOpen(true)
}}
@ -121,7 +123,7 @@ function ChartTabPanes(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartPanes.PanesJsonRow,
operation: 'delete',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
})
setIsJsonRowOpDialogOpen(true)

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

@ -101,7 +101,7 @@ function ChartTabSeries(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
operation: 'create',
id: values.id ?? '',
id: listFormValues.id ?? '',
index: -1,
})
setIsJsonRowOpDialogOpen(true)
@ -132,9 +132,9 @@ function ChartTabSeries(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
operation: 'update',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
chartSeriesValues: values.seriesDto[index],
chartSeriesValues: listFormValues.seriesDto[index],
})
setIsJsonRowOpDialogOpen(true)
}}
@ -150,7 +150,7 @@ function ChartTabSeries(props: FormEditProps) {
setJsonRowOpModalData({
tabName: ListFormEditTabs.ChartSeries.GeneralJsonRow,
operation: 'delete',
id: values.id ?? '',
id: listFormValues.id ?? '',
index,
})
setIsJsonRowOpDialogOpen(true)

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

@ -45,7 +45,6 @@ function FormFieldTabPivotSetting({
initialValues={initialValues}
validationSchema={schema}
onSubmit={async (values, formikHelpers) => {
//console.log(values)
await onSubmit(ListFormFieldEditTabs.PivotSettingsForm, values, formikHelpers)
}}
>

432
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
View file

@ -79,7 +79,7 @@ function JsonRowOpDialogAnnotation({
if (data) {
const resp = await getListFormJsonRow(data.id, data.tabName)
setJsonValue({ field: 'panesDto', data: resp.data })
setJsonValue({ field: 'annotationsDto', data: resp.data })
}
setData(undefined)
@ -92,7 +92,7 @@ function JsonRowOpDialogAnnotation({
return (
<Dialog
id="paneOperation"
id="annotationOperation"
isOpen={isOpen}
preventScroll={true}
onClose={handleClose}
@ -182,234 +182,252 @@ function JsonRowOpDialogAnnotation({
<TabNav value="annotations_border">Border</TabNav>
</TabList>
<TabContent value="annotations_general">
<FormItem
label="Tooltip Enabled"
invalid={errors.tooltipEnabled && touched.tooltipEnabled}
errorMessage={errors.tooltipEnabled}
>
<Field name="tooltipEnabled" component={Checkbox} />
</FormItem>
<div className="p-2">
<FormItem
label="Tooltip Enabled"
invalid={errors.tooltipEnabled && touched.tooltipEnabled}
errorMessage={errors.tooltipEnabled}
>
<Field name="tooltipEnabled" component={Checkbox} />
</FormItem>
<FormItem
label="Type"
invalid={errors.type && touched.type}
errorMessage={errors.type}
>
<Field type="text" name="type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartAnnotationTypeListOptions}
isClearable={true}
value={chartAnnotationTypeListOptions.filter(
(option) => option.value === values.type,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Type"
invalid={errors.type && touched.type}
errorMessage={errors.type}
>
<Field type="text" name="type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartAnnotationTypeListOptions}
isClearable={true}
value={chartAnnotationTypeListOptions.filter(
(option) => option.value === values.type,
)}
onChange={(option) =>
form.setFieldValue(field.name, option?.value)
}
/>
)}
</Field>
</FormItem>
<FormItem
label="Series"
invalid={errors.series && touched.series}
errorMessage={errors.series}
>
<Field type="text" name="type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
// options={SeriesList()}
// value={SeriesList()?.find(
// (option) => option.value === values.series,
// )}
// onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Series"
invalid={errors.series && touched.series}
errorMessage={errors.series}
>
<Field type="text" name="type">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
// options={SeriesList()}
// value={SeriesList()?.find(
// (option) => option.value === values.series,
// )}
// onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Name"
invalid={errors.name && touched.name}
errorMessage={errors.name}
>
<Field type="text" name="name" component={Input} />
</FormItem>
<FormItem
label="Name"
invalid={errors.name && touched.name}
errorMessage={errors.name}
>
<Field type="text" name="name" component={Input} />
</FormItem>
<FormItem
label="Text"
invalid={errors.text && touched.text}
errorMessage={errors.text}
>
<Field type="text" name="text" component={Input} />
</FormItem>
<FormItem
label="Text"
invalid={errors.text && touched.text}
errorMessage={errors.text}
>
<Field type="text" name="text" component={Input} />
</FormItem>
<FormItem
label="Value"
invalid={errors.value && touched.value}
errorMessage={errors.value}
>
<Field type="text" name="value" component={Input} />
</FormItem>
<FormItem
label="Value"
invalid={errors.value && touched.value}
errorMessage={errors.value}
>
<Field type="text" name="value" component={Input} />
</FormItem>
<FormItem
label="Argument"
invalid={errors.argument && touched.argument}
errorMessage={errors.argument}
>
<Field name="argument" component={Input} />
</FormItem>
<FormItem
label="Argument"
invalid={errors.argument && touched.argument}
errorMessage={errors.argument}
>
<Field name="argument" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={errors.color && touched.color}
errorMessage={errors.color}
>
<Field type="text" name="color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={errors.color && touched.color}
errorMessage={errors.color}
>
<Field type="text" name="color" component={Input} />
</FormItem>
<FormItem
label="Word Wrap"
invalid={errors.wordWrap && touched.wordWrap}
errorMessage={errors.wordWrap}
>
<Field type="text" name="wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleWordWrapListOptions}
isClearable={true}
value={chartTitleWordWrapListOptions.filter(
(option) => option.value === values.wordWrap,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Word Wrap"
invalid={errors.wordWrap && touched.wordWrap}
errorMessage={errors.wordWrap}
>
<Field type="text" name="wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTitleWordWrapListOptions}
isClearable={true}
value={chartTitleWordWrapListOptions.filter(
(option) => option.value === values.wordWrap,
)}
onChange={(option) =>
form.setFieldValue(field.name, option?.value)
}
/>
)}
</Field>
</FormItem>
<FormItem
label="Description"
invalid={errors.description && touched.description}
errorMessage={errors.description}
>
<Field type="text" name="description" component={Input} />
</FormItem>
<FormItem
label="Description"
invalid={errors.description && touched.description}
errorMessage={errors.description}
>
<Field type="text" name="description" component={Input} />
</FormItem>
<FormItem
label="Image"
invalid={errors.image && touched.image}
errorMessage={errors.image}
>
<Field type="text" name="image" component={Input} />
</FormItem>
<FormItem
label="Image"
invalid={errors.image && touched.image}
errorMessage={errors.image}
>
<Field type="text" name="image" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={errors.width && touched.width}
errorMessage={errors.width}
>
<Field type="number" name="width" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={errors.width && touched.width}
errorMessage={errors.width}
>
<Field type="number" name="width" component={Input} />
</FormItem>
<FormItem
label="Height"
invalid={errors.height && touched.height}
errorMessage={errors.height}
>
<Field type="number" name="height" component={Input} />
</FormItem>
<FormItem
label="Height"
invalid={errors.height && touched.height}
errorMessage={errors.height}
>
<Field type="number" name="height" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={errors.paddingLeftRight && touched.paddingLeftRight}
errorMessage={errors.paddingLeftRight}
>
<Field type="number" name="paddingLeftRight" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={errors.paddingLeftRight && touched.paddingLeftRight}
errorMessage={errors.paddingLeftRight}
>
<Field type="number" name="paddingLeftRight" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={errors.paddingTopBottom && touched.paddingTopBottom}
errorMessage={errors.paddingTopBottom}
>
<Field type="number" name="paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={errors.paddingTopBottom && touched.paddingTopBottom}
errorMessage={errors.paddingTopBottom}
>
<Field type="number" name="paddingTopBottom" component={Input} />
</FormItem>
<FormItem label="X" invalid={errors.x && touched.x} errorMessage={errors.x}>
<Field type="number" name="x" component={Input} />
</FormItem>
<FormItem
label="X"
invalid={errors.x && touched.x}
errorMessage={errors.x}
>
<Field type="number" name="x" component={Input} />
</FormItem>
<FormItem label="Y" invalid={errors.y && touched.y} errorMessage={errors.y}>
<Field type="number" name="y" component={Input} />
</FormItem>
<FormItem
label="Y"
invalid={errors.y && touched.y}
errorMessage={errors.y}
>
<Field type="number" name="y" component={Input} />
</FormItem>
<FormItem
label="OffsetX"
invalid={errors.offsetX && touched.offsetX}
errorMessage={errors.offsetX}
>
<Field type="number" name="offsetX" component={Input} />
</FormItem>
<FormItem
label="OffsetX"
invalid={errors.offsetX && touched.offsetX}
errorMessage={errors.offsetX}
>
<Field type="number" name="offsetX" component={Input} />
</FormItem>
<FormItem
label="OffsetY"
invalid={errors.offsetY && touched.offsetY}
errorMessage={errors.offsetY}
>
<Field type="number" name="offsetY" component={Input} />
</FormItem>
<FormItem
label="OffsetY"
invalid={errors.offsetY && touched.offsetY}
errorMessage={errors.offsetY}
>
<Field type="number" name="offsetY" component={Input} />
</FormItem>
</div>
</TabContent>
<TabContent value="annotations_border">
<FormItem
label="Visible"
invalid={errors.border?.visible && touched.border?.visible}
errorMessage={errors.border?.visible}
>
<Field name="border.visible" component={Checkbox} />
</FormItem>
<div className="p-2">
<FormItem
label="Visible"
invalid={errors.border?.visible && touched.border?.visible}
errorMessage={errors.border?.visible}
>
<Field name="border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={errors.border?.color && touched.border?.color}
errorMessage={errors.border?.color}
>
<Field type="text" name="border.color" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={errors.border?.color && touched.border?.color}
errorMessage={errors.border?.color}
>
<Field type="text" name="border.color" component={Input} />
</FormItem>
<FormItem
label="Dash Style"
invalid={errors.border?.dashStyle && touched.border?.dashStyle}
errorMessage={errors.border?.dashStyle}
>
<Field type="text" name="border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={errors.border?.dashStyle && touched.border?.dashStyle}
errorMessage={errors.border?.dashStyle}
>
<Field type="text" name="border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.border.dashStyle,
)}
onChange={(option) =>
form.setFieldValue(field.name, option?.value)
}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={errors.border?.width && touched.border?.width}
errorMessage={errors.border?.width}
>
<Field type="number" name="border.width" component={Input} />
</FormItem>
<FormItem
label="Width"
invalid={errors.border?.width && touched.border?.width}
errorMessage={errors.border?.width}
>
<Field type="number" name="border.width" component={Input} />
</FormItem>
</div>
</TabContent>
</Tabs>
</div>

37
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAxis.tsx
View file

@ -14,9 +14,9 @@ import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
import { SelectBoxOption } from '@/shared/types'
import { useStoreActions } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldArray, FieldProps, Form, Formik, FormikProps } from 'formik'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { getIn, number, object, string } from 'yup'
import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
import { Dispatch, SetStateAction } from 'react'
import * as Yup from 'yup'
import { JsonRowDialogData } from './types'
import {
deleteListFormJsonRow,
@ -36,10 +36,30 @@ import {
} from '../options'
import { BreakDto } from '@/proxy/admin/charts/models'
const schema = object().shape({
name: string().required('Name Required'),
backgroundColor: string().notRequired(),
height: number().notRequired(),
const schema = Yup.object().shape({
visible: Yup.boolean().notRequired(),
valueType: Yup.string().notRequired(),
type: Yup.string().notRequired(),
position: Yup.string().notRequired(),
name: Yup.string().required('Name Required'),
title: Yup.string().notRequired(),
width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
grid: Yup.object().shape({
color: Yup.string().notRequired(),
visible: Yup.boolean().notRequired(),
width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
}),
breakStyle: Yup.object().shape({
color: Yup.string().notRequired(),
line: Yup.string().notRequired(),
width: Yup.number().min(0, 'Width must be greater than or equal to 0').notRequired(),
}),
breaks: Yup.array().of(
Yup.object().shape({
startValue: Yup.number().required(),
endValue: Yup.number().required(),
}),
),
})
function JsonRowOpDialogAxis({
@ -63,7 +83,8 @@ function JsonRowOpDialogAxis({
if (data) {
const resp = await getListFormJsonRow(data.id, data.tabName)
setJsonValue({ field: 'axisDto', data: resp.data })
setJsonValue({ field: 'valueAxisDto', data: resp.data })
}
setData(undefined)

6
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogPane.tsx
View file

@ -10,7 +10,6 @@ import {
toast,
} from '@/components/ui'
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
import { SelectBoxOption } from '@/shared/types'
import { useStoreActions, useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik'
@ -76,20 +75,19 @@ function JsonRowOpDialogPane({
<Formik
initialValues={
data.chartPaneValues ?? {
name: '',
backgroundColor: '',
height: 200,
name: '',
}
}
validationSchema={schema}
onSubmit={async (values, { setSubmitting }) => {
console.log('submit', values)
setSubmitting(true)
try {
const input: ListFormJsonRowDto = {
index: data.index,
fieldName: data.tabName,
itemChartPane: values,
itemChartPanes: values,
}
if (data.index === -1) {
await postListFormJsonRow(data.id, input)

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

@ -16,7 +16,7 @@ import { useStoreActions } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { number, object, string } from 'yup'
import { boolean, number, object, string } from 'yup'
import { JsonRowDialogData } from './types'
import {
deleteListFormJsonRow,
@ -32,7 +32,33 @@ import {
} from '../options'
const schema = object().shape({
visible: boolean().notRequired(),
showInLegend: boolean().notRequired(),
ignoreEmptyPoints: boolean().notRequired(),
type: string().notRequired(),
name: string().required('Name Required'),
argumentField: string().notRequired(),
valueField: string().notRequired(),
axis: string().notRequired(),
pane: string().notRequired(),
dashStyle: string().notRequired(),
color: string().notRequired(),
selectionMode: string().notRequired(),
width: number().notRequired(),
cornerRadius: number().notRequired(),
label: object().shape({
visible: boolean().notRequired(),
backgroundColor: string().notRequired(),
customizeText: string().notRequired(),
format: string().notRequired(),
font: object().notRequired(),
}),
barOverlapGroup: string().notRequired(),
barPadding: number().notRequired(),
barWidth: number().notRequired(),
rangeValue1Field: string().notRequired(),
rangeValue2Field: string().notRequired(),
backgroundColor: string().notRequired(),
height: number().notRequired(),
})
@ -58,7 +84,7 @@ function JsonRowOpDialogSeries({
if (data) {
const resp = await getListFormJsonRow(data.id, data.tabName)
setJsonValue({ field: 'panesDto', data: resp.data })
setJsonValue({ field: 'seriesDto', data: resp.data })
}
setData(undefined)
@ -104,7 +130,6 @@ function JsonRowOpDialogSeries({
<Formik
initialValues={
data.chartSeriesValues ?? {
id: '',
argumentField: '',
axis: '',
barOverlapGroup: '',
@ -137,11 +162,10 @@ function JsonRowOpDialogSeries({
onSubmit={async (values, { setSubmitting }) => {
setSubmitting(true)
try {
console.log(values)
const input: ListFormJsonRowDto = {
index: data.index,
fieldName: data.tabName,
itemChartSerie: values,
itemChartSeries: values,
}
if (data.index === -1) {
await postListFormJsonRow(data.id, input)
@ -280,7 +304,7 @@ function JsonRowOpDialogSeries({
</FormItem>
<FormItem
label="Type"
label="Dash Style"
invalid={errors.dashStyle && touched.dashStyle}
errorMessage={errors.dashStyle}
>