Chart Series Argument ve Value Field seçimi

ui/src/views/admin/listForm/edit/ChartTabSeries.tsx

@@ -8,6 +8,8 @@ import {
   Select,
   Table,
   Tabs,
+  Notification,
+  toast,
 } from '@/components/ui'
 import TBody from '@/components/ui/Table/TBody'
 import THead from '@/components/ui/Table/THead'
@@ -31,18 +33,22 @@ import {
   chartSeriesSelectionModeOptions,
   chartSeriesDashStyleOptions,
 } from './options'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { JsonRowDialogData } from './json-row-operations/types'
 import JsonRowOpDialogSeries from './json-row-operations/JsonRowOpDialogSeries'
+import CreatableSelect from 'react-select/creatable'
+import { getListFormFields } from '@/services/admin/list-form-field.service'
+import groupBy from 'lodash/groupBy'
 
 const schema = object().shape({
   name: string().required(),
 })
 
-function ChartTabSeries(props: FormEditProps) {
+function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
   const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
   const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
   const { translate } = useLocalization()
+  const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
 
   const listFormValues = useStoreState((s) => s.admin.listFormValues)
   if (!listFormValues) {
@@ -63,6 +69,45 @@ function ChartTabSeries(props: FormEditProps) {
     }))
   }
 
+  const getFields = async () => {
+    if (!props.listFormCode) {
+      return
+    }
+
+    try {
+      const resp = await getListFormFields({
+        listFormCode: props.listFormCode,
+        sorting: 'ListOrderNo',
+        maxResultCount: 1000,
+      })
+      if (resp.data?.items) {
+        const fieldNames = groupBy(resp?.data?.items, 'fieldName')
+        setFieldList(
+          Object.keys(fieldNames).map((a) => ({
+            value: a,
+            label: a,
+          })),
+        )
+      }
+    } catch (error: any) {
+      toast.push(
+        <Notification type="danger" duration={2000}>
+          Alanlar getirilemedi
+          {error.toString()}
+        </Notification>,
+        {
+          placement: 'top-end',
+        },
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (props.listFormCode) {
+      getFields()
+    }
+  }, [props.listFormCode])
+
   return (
     <Formik
       initialValues={listFormValues}
@@ -170,6 +215,7 @@ function ChartTabSeries(props: FormEditProps) {
                   </Table>
                 </Card>
                 <JsonRowOpDialogSeries
+                  listFormCode={listFormValues.listFormCode!}
                   isOpen={isJsonRowOpDialogOpen}
                   setIsOpen={setIsJsonRowOpDialogOpen}
                   data={jsonRowOpModalData}
@@ -272,28 +318,46 @@ function ChartTabSeries(props: FormEditProps) {
 
                   <FormItem
                     label="Argument Field"
-                    invalid={
+                    invalid={errors.commonSeriesSettingsDto?.argumentField && touched.commonSeriesSettingsDto?.argumentField}
-                      !!(
-                        errors.commonSeriesSettingsDto?.argumentField &&
-                        touched.commonSeriesSettingsDto?.argumentField
-                      )
-                    }
                     errorMessage={errors.commonSeriesSettingsDto?.argumentField}
                   >
-                    <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
+                    <Field type="text" name="commonSeriesSettingsDto.argumentField">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          componentAs={CreatableSelect}
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={fieldList}
+                          value={fieldList.find((option) => option.value === values.commonSeriesSettingsDto.argumentField)}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          menuPlacement="auto"
+                          maxMenuHeight={150}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
 
                   <FormItem
                     label="Value Field"
-                    invalid={
+                    invalid={errors.commonSeriesSettingsDto?.valueField && touched.commonSeriesSettingsDto?.valueField}
-                      !!(
-                        errors.commonSeriesSettingsDto?.valueField &&
-                        touched.commonSeriesSettingsDto?.valueField
-                      )
-                    }
                     errorMessage={errors.commonSeriesSettingsDto?.valueField}
                   >
-                    <Field name="commonSeriesSettingsDto.valueField" component={Input} />
+                    <Field type="text" name="valueField">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          componentAs={CreatableSelect}
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={fieldList}
+                          value={fieldList.find((option) => option.value === values.commonSeriesSettingsDto.valueField)}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          menuPlacement="auto"
+                          maxMenuHeight={150}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
 
                   <FormItem

ui/src/views/admin/listForm/edit/FormEdit.tsx

@@ -426,12 +426,11 @@ const FormEdit = () => {
         <TabContent value="extrafilter">
           <FormTabExtraFilters listFormCode={listFormCode} />
         </TabContent>
-
         <TabContent value="commonSettings">
           <ChartTabCommonSettings onSubmit={onSubmit} />
         </TabContent>
         <TabContent value="series">
-          <ChartTabSeries onSubmit={onSubmit} />
+          <ChartTabSeries onSubmit={onSubmit} listFormCode={listFormCode} />
         </TabContent>
         <TabContent value="panes">
           <ChartTabPanes onSubmit={onSubmit} />

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

@@ -15,7 +15,7 @@ import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { boolean, number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
 import {
@@ -31,6 +31,9 @@ import {
   chartSeriesTypeOptions,
 } from '../options'
 import { ChartPanesDto, ChartSeriesDto, ChartValueAxisDto } from '@/proxy/admin/charts/models'
+import { getListFormFields } from '@/services/admin/list-form-field.service'
+import { groupBy } from 'lodash'
+import CreatableSelect from 'react-select/creatable'
 
 const schema = object().shape({
   visible: boolean().notRequired(),
@@ -65,11 +68,13 @@ const schema = object().shape({
 })
 
 function JsonRowOpDialogSeries({
+  listFormCode,
   isOpen,
   setIsOpen,
   data,
   setData,
 }: {
+  listFormCode: string
   isOpen: boolean
   setIsOpen: Dispatch<SetStateAction<boolean>>
   data: JsonRowDialogData | undefined
@@ -77,6 +82,7 @@ function JsonRowOpDialogSeries({
 }) {
   const { translate } = useLocalization()
   const { setJsonValue } = useStoreActions((a) => a.admin)
+  const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
 
   const handleClose = async (e?: any) => {
     if (e) {
@@ -111,6 +117,44 @@ function JsonRowOpDialogSeries({
     }))
   }
 
+  const getFields = async () => {
+    if (!listFormCode) {
+      return
+    }
+
+    try {
+      const resp = await getListFormFields({
+        listFormCode,
+        sorting: 'ListOrderNo',
+        maxResultCount: 1000,
+      })
+      if (resp.data?.items) {
+        const fieldNames = groupBy(resp?.data?.items, 'fieldName')
+        setFieldList(
+          Object.keys(fieldNames).map((a) => ({
+            value: a,
+            label: a,
+          })),
+        )
+      }
+    } catch (error: any) {
+      toast.push(
+        <Notification type="danger" duration={2000}>
+          Alanlar getirilemedi
+          {error.toString()}
+        </Notification>,
+        {
+          placement: 'top-end',
+        },
+      )
+    }
+  }
+  useEffect(() => {
+    if (isOpen && data) {
+      getFields()
+    }
+  }, [isOpen, data])
+
   if (!data) {
     return null
   }
@@ -258,7 +302,23 @@ function JsonRowOpDialogSeries({
                       invalid={errors.argumentField && touched.argumentField}
                       errorMessage={errors.argumentField}
                     >
-                      <Field type="text" name="argumentField" component={Input} />
+                      <Field type="text" name="argumentField">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            componentAs={CreatableSelect}
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList.find(
+                              (option) => option.value === values.argumentField,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            menuPlacement="auto"
+                            maxMenuHeight={150}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -266,7 +326,21 @@ function JsonRowOpDialogSeries({
                       invalid={errors.valueField && touched.valueField}
                       errorMessage={errors.valueField}
                     >
-                      <Field type="text" name="valueField" component={Input} />
+                      <Field type="text" name="valueField">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            componentAs={CreatableSelect}
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList.find((option) => option.value === values.valueField)}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            menuPlacement="auto"
+                            maxMenuHeight={150}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -416,21 +490,13 @@ function JsonRowOpDialogSeries({
                       </FormItem>
 
                       <Card className="my-2" header="Font">
-                        <FormItem
+                        <FormItem label="Color" errorMessage={errors.label?.font?.color}>
-                          label="Color"
-                          errorMessage={errors.label?.font?.color}
-                        >
                           <Field name="label.font.color" component={Input} />
                         </FormItem>
 
                         <FormItem
                           label="Family"
-                          invalid={
+                          invalid={!!(errors.label?.font?.family && touched.label?.font?.family)}
-                            !!(
-                              errors.label?.font?.family &&
-                              touched.label?.font?.family
-                            )
-                          }
                           errorMessage={errors.label?.font?.family}
                         >
                           <Field name="label.font.family" component={Input} />
@@ -438,36 +504,18 @@ function JsonRowOpDialogSeries({
 
                         <FormItem
                           label="Size"
-                          invalid={
+                          invalid={!!(errors.label?.font?.size && touched.label?.font?.size)}
-                            !!(
-                              errors.label?.font?.size &&
-                              touched.label?.font?.size
-                            )
-                          }
                           errorMessage={errors.label?.font?.size}
                         >
-                          <Field
+                          <Field type="number" name="label.font.size" component={Input} />
-                            type="number"
-                            name="label.font.size"
-                            component={Input}
-                          />
                         </FormItem>
 
                         <FormItem
                           label="Weight"
-                          invalid={
+                          invalid={!!(errors.label?.font?.weight && touched.label?.font?.weight)}
-                            !!(
-                              errors.label?.font?.weight &&
-                              touched.label?.font?.weight
-                            )
-                          }
                           errorMessage={errors.label?.font?.weight}
                         >
-                          <Field
+                          <Field type="number" name="label.font.weight" component={Input} />
-                            type="number"
-                            name="label.font.weight"
-                            component={Input}
-                          />
                         </FormItem>
                       </Card>
                     </Card>

ui/src/views/list/Chart.tsx

@@ -42,9 +42,9 @@ const Chart = (props: ChartProps) => {
       gridDto.gridOptions,
       listFormCode,
       searchParams,
-      [],
+      // [],
-      gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
+      // gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
-      gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
+      // gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
     )
 
     const options = {
@@ -74,13 +74,13 @@ const Chart = (props: ChartProps) => {
       valueAxis: gridDto.gridOptions.valueAxisDto,
       tooltip: gridDto.gridOptions.tooltipDto,
 
-      series:
+      series:gridDto.gridOptions.seriesDto,
-        gridDto.gridOptions.seriesDto?.length > 0
+        // gridDto.gridOptions.seriesDto?.length > 0
-          ? gridDto.gridOptions.seriesDto.map((s) => ({
+        //   ? gridDto.gridOptions.seriesDto.map((s) => ({
-              argumentField: 'key',
+        //       argumentField: 'key',
-              valueField: 'summary',
+        //       valueField: 'summary',
-            }))
+        //     }))
-          : undefined,
+        //   : undefined,
       panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
       commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
       commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,