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

ListForm daki Color seçenekli sütunlar

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-12-01 15:06:59 +03:00
parent 5f5bf81a6b
commit f18818d16a
14 changed files with 278 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -264,7 +264,16 @@ function ChartTabAnnotations(props: FormEditProps) {
}
errorMessage={errors.commonAnnotationSettingsDto?.color}
>
<Field name="commonAnnotationSettingsDto.color" component={Input} />
<Field name="commonAnnotationSettingsDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -502,11 +511,16 @@ function ChartTabAnnotations(props: FormEditProps) {
}
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
>
<Field
type="text"
name="commonAnnotationSettingsDto.border.color"
component={Input}
/>
<Field name="commonAnnotationSettingsDto.border.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -583,7 +597,16 @@ function ChartTabAnnotations(props: FormEditProps) {
}
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
>
<Field name="commonAnnotationSettingsDto.font.color" component={Input} />
<Field name="commonAnnotationSettingsDto.font.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -328,7 +328,16 @@ function ChartTabAxis(props: FormEditProps) {
}
errorMessage={errors.argumentAxisDto?.grid?.color}
>
<Field type="text" name="argumentAxisDto.grid.color" component={Input} />
<Field name="argumentAxisDto.grid.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -485,11 +494,16 @@ function ChartTabAxis(props: FormEditProps) {
}
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
>
<Field
type="text"
name="commonAxisSettingsDto.grid.color"
component={Input}
/>
<Field name="commonAxisSettingsDto.grid.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -17,7 +17,7 @@ import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'fo
import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import { ListFormEditTabs, themeOptions } from '@/proxy/admin/list-form/options'
import { ListFormEditTabs, themeOptions, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
import { object } from 'yup'
import {
chartPaletteOptions,
@ -382,7 +382,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color" component={Input} />
<Field name="tooltipDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -440,7 +449,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
}
errorMessage={errors.tooltipDto?.font?.color}
>
<Field name="tooltipDto.font.color" component={Input} />
<Field name="tooltipDto.font.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -617,7 +635,16 @@ function ChartTabCommonSettings(props: FormEditProps) {
invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
errorMessage={errors.scrollBarDto?.color}
>
<Field name="scrollBarDto.color" component={Input} />
<Field name="scrollBarDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -44,7 +44,16 @@ function ChartTabCrosshair(props: FormEditProps) {
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
errorMessage={errors.crosshairDto?.color}
>
<Field type="text" name="crosshairDto.color" component={Input} />
<Field name="crosshairDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -98,7 +107,16 @@ function ChartTabCrosshair(props: FormEditProps) {
}
errorMessage={errors.crosshairDto?.label?.backgroundColor}
>
<Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
<Field name="crosshairDto.label.backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -149,7 +167,16 @@ function ChartTabCrosshair(props: FormEditProps) {
}
errorMessage={errors.crosshairDto?.label?.font?.color}
>
<Field type="text" name="crosshairDto.label.font.color" component={Input} />
<Field name="crosshairDto.label.font.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -205,7 +232,7 @@ function ChartTabCrosshair(props: FormEditProps) {
>
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Color"
invalid={
@ -216,7 +243,16 @@ function ChartTabCrosshair(props: FormEditProps) {
}
errorMessage={errors.crosshairDto?.horizontalLine?.color}
>
<Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
<Field name="crosshairDto.horizontalLine.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -283,7 +319,16 @@ function ChartTabCrosshair(props: FormEditProps) {
}
errorMessage={errors.crosshairDto?.verticalLine?.color}
>
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
<Field name="crosshairDto.verticalLine.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -1,5 +1,5 @@
import { Button, Card, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'
import { Field, Form, Formik } from 'formik'
import { Field, FieldProps, Form, Formik } from 'formik'
import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
@ -44,7 +44,16 @@ function ChartTabExport(props: FormEditProps) {
invalid={errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor}
errorMessage={errors.exportDto?.backgroundColor}
>
<Field type="text" name="exportDto.backgroundColor" component={Input} />
<Field name="exportDto.backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -55,6 +55,7 @@ function ChartTabLegend(props: FormEditProps) {
<Field name="legendDto.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Background Color"
invalid={
@ -62,7 +63,16 @@ function ChartTabLegend(props: FormEditProps) {
}
errorMessage={errors.legendDto?.backgroundColor}
>
<Field name="legendDto.backgroundColor" component={Input} />
<Field name="legendDto.backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -148,9 +158,18 @@ function ChartTabLegend(props: FormEditProps) {
invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
errorMessage={errors.legendDto?.border?.color}
>
<Field name="legendDto.border.color" component={Input} />
<Field name="legendDto.border.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Dash Style"
invalid={

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

@ -4,7 +4,7 @@ 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 { Field, Form, Formik } from 'formik'
import { Field, FieldProps, Form, Formik } from 'formik'
import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
import { FormEditProps } from '../../listForm/edit/FormEdit'
import { useStoreState } from '@/store/store'
@ -57,7 +57,16 @@ function ChartTabPanes(props: FormEditProps) {
}
errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
>
<Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
<Field name="commonPaneSettingsDto.backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
</Card>
<Card className="my-2" bodyClass="p-0">

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

@ -438,7 +438,16 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
}
errorMessage={errors.commonSeriesSettingsDto?.color}
>
<Field name="commonSeriesSettingsDto.color" component={Input} />
<Field name="commonSeriesSettingsDto.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -145,7 +145,16 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
>
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
<Field name="zoomAndPanDto.dragBoxStyle.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -262,13 +262,22 @@ function JsonRowOpDialogAnnotation({
>
<Field name="argument" component={Input} />
</FormItem>
<FormItem
label="Color"
invalid={errors.color && touched.color}
errorMessage={errors.color}
>
<Field type="text" name="color" component={Input} />
<Field name="color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -390,7 +399,16 @@ function JsonRowOpDialogAnnotation({
invalid={errors.border?.color && touched.border?.color}
errorMessage={errors.border?.color}
>
<Field type="text" name="border.color" component={Input} />
<Field name="border.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -305,7 +305,16 @@ function JsonRowOpDialogAxis({
invalid={errors.grid?.color && touched.grid?.color}
errorMessage={errors.grid?.color}
>
<Field type="text" name="grid.color" component={Input} />
<Field name="grid.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -326,7 +335,16 @@ function JsonRowOpDialogAxis({
invalid={errors.breakStyle?.color && touched.breakStyle?.color}
errorMessage={errors.breakStyle?.color}
>
<Field type="text" name="breakStyle.color" component={Input} />
<Field name="breakStyle.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -12,7 +12,7 @@ import {
import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
import { useStoreActions } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik'
import { Field, FieldProps, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { number, object, string } from 'yup'
import { JsonRowDialogData } from './types'
@ -131,7 +131,16 @@ function JsonRowOpDialogPane({
invalid={errors.backgroundColor && touched.backgroundColor}
errorMessage={errors.backgroundColor}
>
<Field type="text" name="backgroundColor" component={Input} />
<Field name="backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem

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

@ -398,7 +398,16 @@ function JsonRowOpDialogSeries({
invalid={errors.color && touched.color}
errorMessage={errors.color}
>
<Field type="text" name="color" component={Input} />
<Field name="color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -448,7 +457,16 @@ function JsonRowOpDialogSeries({
invalid={errors.label?.backgroundColor && touched.label?.backgroundColor}
errorMessage={errors.label?.backgroundColor}
>
<Field type="text" name="label.backgroundColor" component={Input} />
<Field name="label.backgroundColor">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem
@ -482,7 +500,16 @@ function JsonRowOpDialogSeries({
<Card className="my-2" header="Font">
<FormItem label="Color">
<Field name="label.font.color" component={Input} />
<Field name="label.font.color">
{({ field, form }: FieldProps) => (
<Input
{...field}
type="color"
className='!h-10 !p-0 !m-0 !border-0'
onChange={(e) => form.setFieldValue(field.name, e.target.value)}
/>
)}
</Field>
</FormItem>
<FormItem label="Family">

42
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
View file

@ -328,48 +328,6 @@ function JsonRowOpDialogWidget({
component={Input}
/>
</FormItem>
{/* <FormItem
label="Color"
invalid={errors.color && touched.color}
errorMessage={errors.color}
>
<Field type="text" autoComplete="off" name="color" placeholder="Color">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
options={widgetColorOptions}
value={widgetColorOptions?.filter(
(option: any) => option.value === values.color,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Icon"
invalid={errors.icon && touched.icon}
errorMessage={errors.icon}
>
<Field type="text" autoComplete="off" name="icon" placeholder="Icon">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
isClearable={true}
options={widgetIconOptions}
value={widgetIconOptions?.filter(
(option: any) => option.value === values.icon,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem> */}
</div>
<div className="text-right mt-4">
<Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>