ChartEdit komponentlere bölündü
This commit is contained in:
Sedat ÖZTÜRK
parent
56afb103df
commit
50389fa6a4
37 changed files with 4289 additions and 3988 deletions
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)");
|
||||
|
||||
|
|
@ -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),
|
||||
|
|
@ -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)");
|
||||
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
{
|
||||
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))
|
||||
{
|
||||
await WriteBadRequestAsync(context);
|
||||
return;
|
||||
}
|
||||
|
||||
var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
|
||||
if (result == false)
|
||||
if (!result)
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
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);
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ export const ListFormEditTabs = {
|
|||
GroupForm: 'group',
|
||||
SelectForm: 'select',
|
||||
ColumnForm: 'column',
|
||||
PivotForm: 'pivot',
|
||||
PagerForm: 'pager',
|
||||
StateForm: 'state',
|
||||
SubForm: 'subForm',
|
||||
|
|
|
|||
|
|
@ -234,6 +234,7 @@ export interface ChartDto extends AuditedEntityDto<string> {
|
|||
}
|
||||
|
||||
export interface ChartEditDto extends ChartDto {
|
||||
editType: string
|
||||
dataSourceJson?: string
|
||||
dataSourceDto: ChartDataSourceDto
|
||||
dataSourceCode?: string
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
69
ui/src/views/admin/chart/edit/ChartTabAnimation.tsx
Normal file
69
ui/src/views/admin/chart/edit/ChartTabAnimation.tsx
Normal 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
558
ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx
Normal 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
440
ui/src/views/admin/chart/edit/ChartTabAxis.tsx
Normal 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
586
ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx
Normal 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
302
ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx
Normal 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
83
ui/src/views/admin/chart/edit/ChartTabDatabase.tsx
Normal 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
87
ui/src/views/admin/chart/edit/ChartTabDetails.tsx
Normal 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
48
ui/src/views/admin/chart/edit/ChartTabExport.tsx
Normal 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
176
ui/src/views/admin/chart/edit/ChartTabLegend.tsx
Normal 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
127
ui/src/views/admin/chart/edit/ChartTabPanes.tsx
Normal 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
98
ui/src/views/admin/chart/edit/ChartTabPermissions.tsx
Normal 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
366
ui/src/views/admin/chart/edit/ChartTabSeries.tsx
Normal 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
142
ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx
Normal 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
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,16 +40,6 @@ 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={
|
||||
|
|
@ -119,9 +104,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.rowAlternationEnabled"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -135,9 +118,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.allowColumnReordering"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionAllowColumnReordering',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -165,17 +146,13 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.columnFixingEnabled"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
|
||||
invalid={
|
||||
errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
|
||||
}
|
||||
invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled}
|
||||
errorMessage={errors.columnOptionDto?.rtlEnabled}
|
||||
>
|
||||
<Field
|
||||
|
|
@ -194,9 +171,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.columnChooserEnabled"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -238,9 +213,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.allowColumnResizing"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionAllowColumnResizing',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -256,9 +229,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
type="text"
|
||||
autoComplete="off"
|
||||
name="columnOptionDto.columnResizingMode"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionColumnResizingMode',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
|
||||
>
|
||||
{({ field, form }: FieldProps<ColumnResizeMode>) => (
|
||||
<Select
|
||||
|
|
@ -298,9 +269,7 @@ function FormTabColumns(props: FormEditProps) {
|
|||
>
|
||||
<Field
|
||||
name="columnOptionDto.columnHidingEnabled"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -318,146 +287,6 @@ function FormTabColumns(props: FormEditProps) {
|
|||
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>
|
||||
|
||||
<Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
|
||||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
|
|
|
|||
|
|
@ -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,10 +198,21 @@ function FormTabDetails(props: FormEditProps) {
|
|||
name="description"
|
||||
placeholder={translate('::ListForms.ListFormEdit.DetailsDescription')}
|
||||
component={Input}
|
||||
rows={6}
|
||||
textArea={true}
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.DetailsWidth')}
|
||||
invalid={errors.width && touched.width}
|
||||
|
|
@ -188,7 +241,9 @@ function FormTabDetails(props: FormEditProps) {
|
|||
component={Input}
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
|
||||
invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
|
||||
|
|
@ -230,49 +285,7 @@ function FormTabDetails(props: FormEditProps) {
|
|||
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')}
|
||||
>
|
||||
{({ 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>
|
||||
</div>
|
||||
|
||||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||||
|
|
|
|||
|
|
@ -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,12 +40,6 @@ 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}
|
||||
|
|
@ -64,8 +54,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
|
||||
invalid={
|
||||
errors.editingOptionDto?.allowAdding &&
|
||||
touched.editingOptionDto?.allowAdding
|
||||
errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
|
||||
}
|
||||
errorMessage={errors.editingOptionDto?.allowAdding}
|
||||
>
|
||||
|
|
@ -133,9 +122,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
</FormItem>
|
||||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
|
||||
invalid={
|
||||
errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
|
||||
}
|
||||
invalid={errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons}
|
||||
errorMessage={errors.editingOptionDto?.useIcons}
|
||||
>
|
||||
<Field
|
||||
|
|
@ -154,9 +141,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
>
|
||||
<Field
|
||||
name="editingOptionDto.selectTextOnEditStart"
|
||||
placeholder={translate(
|
||||
'::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
|
||||
)}
|
||||
placeholder={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
|
||||
component={Checkbox}
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -188,8 +173,7 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
<FormItem
|
||||
label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
|
||||
invalid={
|
||||
errors.editingOptionDto?.refreshMode &&
|
||||
touched.editingOptionDto?.refreshMode
|
||||
errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
|
||||
}
|
||||
errorMessage={errors.editingOptionDto?.refreshMode}
|
||||
>
|
||||
|
|
@ -407,11 +391,6 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
|
|||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</TabContent>
|
||||
<TabContent value="tabForm">
|
||||
<FormTabEditForm listFormCode={props.listFormCode} />
|
||||
</TabContent>
|
||||
</Tabs>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
173
ui/src/views/admin/listForm/edit/FormTabPivots.tsx
Normal file
173
ui/src/views/admin/listForm/edit/FormTabPivots.tsx
Normal 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
|
||||
|
|
@ -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' },
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import {
|
|||
setGridPanelColor,
|
||||
} from './Utils'
|
||||
import { useFilters } from './useFilters'
|
||||
import WidgetGroup from '@/components/common/WidgetGroup'
|
||||
|
||||
interface GridProps {
|
||||
listFormCode: string
|
||||
|
|
@ -236,6 +237,9 @@ const Pivot = (props: GridProps) => {
|
|||
}, [columnData])
|
||||
|
||||
return (
|
||||
<>
|
||||
<WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
|
||||
|
||||
<Container className={DX_CLASSNAMES}>
|
||||
{!isSubForm && (
|
||||
<Helmet
|
||||
|
|
@ -246,12 +250,12 @@ const Pivot = (props: GridProps) => {
|
|||
)}
|
||||
{gridDto && columnData && (
|
||||
<>
|
||||
{gridDto.gridOptions.columnOptionDto.showChart && (
|
||||
{gridDto.gridOptions.pivotOptionDto.showChart && (
|
||||
<Chart ref={chartRef as any}>
|
||||
<Size height={gridDto.gridOptions.columnOptionDto.chartHeight} />
|
||||
<Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
|
||||
<Tooltip enabled={true}></Tooltip>
|
||||
<CommonSeriesSettings
|
||||
type={gridDto.gridOptions.columnOptionDto.chartCommonSeriesType}
|
||||
type={gridDto.gridOptions.pivotOptionDto.chartCommonSeriesType}
|
||||
/>
|
||||
</Chart>
|
||||
)}
|
||||
|
|
@ -280,12 +284,12 @@ const Pivot = (props: GridProps) => {
|
|||
></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}
|
||||
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}
|
||||
|
|
@ -296,6 +300,7 @@ const Pivot = (props: GridProps) => {
|
|||
</>
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue