ListForm ve Chart entegre edildi

api/src/Kurs.Platform.DbMigrator/Seeds/ListFormsSeeder.cs

@@ -4800,6 +4800,7 @@ public class ListFormsSeeder : IDataSeedContributor, ITransientDependency
                     LookupQuery = JsonSerializer.Serialize(new LookupDataDto[] {
                         new() { Key=ListFormTypeEnum.Form, Name=ListFormTypeEnum.Form.ToString() },
                         new() { Key=ListFormTypeEnum.List, Name=ListFormTypeEnum.List.ToString() },
+                        new() { Key=ListFormTypeEnum.Chart, Name=ListFormTypeEnum.Chart.ToString() },
                     }),
                 }),
                 ValidationRuleJson = JsonSerializer.Serialize(new ValidationRuleDto[] {

api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json

@@ -12394,8 +12394,8 @@
         {
             "resourceName": "Platform",
             "key": "ListForms.ListFormEdit.TabChartCommon",
-            "en": "Chart Common",
-            "tr": "Grafik Ortak"
+            "en": "Common",
+            "tr": "Ortak"
         },
         {
             "resourceName": "Platform",

api/src/Kurs.Platform.Domain.Shared/Enums/ListFormTypeEnum.cs

@@ -4,4 +4,5 @@ public static class ListFormTypeEnum
 {
     public const string List = "List";
     public const string Form = "Form";
+    public const string Chart = "Chart";
 }

ui/src/proxy/admin/list-form/options.ts

@@ -55,8 +55,8 @@ export const ListFormEditTabs = {
     CommonAxisForm: 'chartAxis.commonAxis',
   },
   ChartPanes: {
-    CommonPanesSettingForm: 'chartPanes.commonSetting',
     PanesJsonRow: 'chartPanes.panes',
+    CommonPanesSettingForm: 'chartPanes.commonSetting',
   },
   ChartAnimationForm: 'chartAnimation',
   ChartAnnotations: {
@@ -89,6 +89,17 @@ export const tabVisibilityConfig: Record<string, string[]> = {
       'fields',
       'editForm',
       'widget',
+      //Chart tabları
+      'commonSettings',
+      'series',
+      'axis',
+      'panes',
+      'animationsOptions',
+      'annotations',
+      'zoomAndPanSettings',
+      'legendSettings',
+      'exportSettings',
+      'crosshairOptions',
     ],
     Form: [
       'details',
@@ -101,20 +112,4 @@ export const tabVisibilityConfig: Record<string, string[]> = {
       'widget',
       'subForms',
     ],
-    Chart: [
-      'details',
-      'database',
-      'permissions',
-      'widget',
-      'commonSettings',
-      'series',
-      'axis',
-      'panes',
-      'animationsOptions',
-      'annotations',
-      'zoomAndPanSettings',
-      'legendSettings',
-      'exportSettings',
-      'crosshairOptions',
-    ],
   }

ui/src/proxy/form/models.ts

@@ -43,6 +43,7 @@ import {
   ChartValueAxisDto,
   ChartZoomAndPanDto,
 } from '../admin/charts/models'
+import { ListViewLayoutType } from '@/views/admin/listForm/edit/types'
 
 //1
 export interface SelectListItem {
@@ -809,7 +810,7 @@ export interface LayoutDto {
   card: boolean
   pivot: boolean
   chart: boolean
-  defaultLayout: 'grid' | 'card' | 'pivot' | 'chart'
+  defaultLayout: ListViewLayoutType
   cardLayoutColumn: number
 }
 

ui/src/store/base.model.ts

@@ -1,3 +1,4 @@
+import { ListViewLayoutType } from '@/views/admin/listForm/edit/types'
 import type { Action } from 'easy-peasy'
 import { action } from 'easy-peasy'
 
@@ -29,7 +30,7 @@ export interface StoreError {
 
 export interface ListState {
   listFormCode: string
-  layout: 'grid' | 'card' | 'pivot'
+  layout: ListViewLayoutType
   cardLayoutColumn?: number
 }
 

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

@@ -261,15 +261,15 @@ const FormEdit = () => {
               {translate('::ListForms.ListFormEdit.TabChartCommon')}
             </TabNav>
           )}
-          {visibleTabs.includes('series') && (
-            <TabNav value="series">{translate('::ListForms.ListFormEdit.TabChartSeries')}</TabNav>
-          )}
           {visibleTabs.includes('axis') && (
             <TabNav value="axis">{translate('::ListForms.ListFormEdit.TabChartAxis')}</TabNav>
           )}
           {visibleTabs.includes('panes') && (
             <TabNav value="panes">{translate('::ListForms.ListFormEdit.TabChartPanes')}</TabNav>
           )}
+          {visibleTabs.includes('series') && (
+            <TabNav value="series">{translate('::ListForms.ListFormEdit.TabChartSeries')}</TabNav>
+          )}
           {visibleTabs.includes('animationsOptions') && (
             <TabNav value="animationsOptions">
               {translate('::ListForms.ListFormEdit.TabChartAnimation')}

ui/src/views/admin/listForm/edit/types.ts

@@ -1,2 +1,3 @@
 export type ChartOperation = '' | 'select' | 'insert' | 'update' | 'delete'
 export type ChartDialogType = '' | 'pane' | 'serie' | 'annotation' | 'axis'
+export type ListViewLayoutType = 'grid' | 'card' | 'pivot' | 'chart'

ui/src/views/chart/Chart.tsx

@@ -1,69 +0,0 @@
-import { CommonProps } from '@/@types/common'
-import { Meta } from '@/@types/routes'
-import { Container } from '@/components/shared'
-import { DX_CLASSNAMES } from '@/constants/app.constant'
-import { useLocalization } from '@/utils/hooks/useLocalization'
-import DxChart from 'devextreme-react/chart'
-import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet'
-import { useParams, useSearchParams } from 'react-router-dom'
-import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
-import CustomStore from 'devextreme/data/custom_store'
-import { GridDto } from '@/proxy/form/models'
-
-interface ChartProps extends CommonProps, Meta {
-  listFormCode: string
-  filter?: string
-  isSubForm?: boolean
-  level?: number
-  refreshData?: () => Promise<void>
-  gridDto?: GridDto
-}
-
-const Chart = (props: ChartProps) => {
-  const { listFormCode, filter, isSubForm, level, gridDto } = props
-  const [gridDataSource, setGridDataSource] = useState<CustomStore<any, any>>()
-  const [searchParams] = useSearchParams()
-  const { createSelectDataSource } = useListFormCustomDataSource({})
-
-  const params = useParams()
-  const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
-
-  const { translate } = useLocalization()
-
-  useEffect(() => {
-    if (!gridDto) return
-
-    const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
-    setGridDataSource(dataSource)
-  }, [gridDto, searchParams])
-
-  // useEffect(() => {
-  //   const getChart = async () => {
-  //     if (!_listFormCode) return
-
-  //     const res = await getListFormByCode(_listFormCode)
-  //     const chartOpt = getChartOptionsDto(_listFormCode, res.data, props?.filter)
-  //     setChartOptions(chartOpt)
-  //   }
-
-  //   getChart()
-  // }, [_listFormCode])
-
-  return (
-    <Container className={DX_CLASSNAMES}>
-      {!isSubForm && gridDto && (
-        <Helmet
-          titleTemplate="%s | Sözsoft Kurs Platform"
-          title={translate('::' + gridDto?.gridOptions?.title)}
-          defaultTitle="Sözsoft Kurs Platform"
-        ></Helmet>
-      )}
-      {_listFormCode && gridDto?.gridOptions && (
-        <DxChart key={'DxChart' + _listFormCode} {...gridDto?.gridOptions}></DxChart>
-      )}
-    </Container>
-  )
-}
-
-export default Chart

ui/src/views/chart/utils.ts

@@ -1,60 +0,0 @@
-// import CustomStore from 'devextreme/data/custom_store'
-// import { ChartDto } from '../../proxy/admin/charts/models'
-// import { getChartSelect } from '../../services/chart.service'
-
-// export function getChartOptionsDto(listFormCode: string, chartDto: ChartDto, filter?: string) {
-//   if (!chartDto || !listFormCode) {
-//     return undefined
-//   }
-
-//   const dataSource = {
-//     store: new CustomStore({
-//       load: () => {
-//         return getChartSelect(listFormCode, filter)
-//       },
-//     }),
-//     filter: null,
-//     paginate: false,
-//   }
-
-//   const options = {
-//     dataSource: dataSource,
-
-//     adjustOnZoom: chartDto.commonDto?.adjustOnZoom ?? true,
-//     containerBackgroundColor: chartDto.commonDto?.containerBackgroundColor ?? '#FFFFFF',
-//     disabled: chartDto.commonDto?.disabled ?? false,
-//     palette: chartDto.commonDto?.palette ?? 'Material',
-//     paletteExtensionMode: chartDto.commonDto?.paletteExtensionMode ?? 'blend',
-//     //theme: s(chartDto.commonDto?.theme, 'generic.light'),
-
-//     title: chartDto.titleDto,
-//     size: chartDto.sizeDto?.useSize ? chartDto.sizeDto : null,
-//     legend: chartDto.legendDto,
-//     margin: chartDto.marginDto,
-//     adaptiveLayout: chartDto.adaptivelayoutDto,
-//     defaultPane: chartDto.commonDto?.defaultPane,
-
-//     scrollBar: chartDto.scrollBarDto,
-//     zoomAndPan: chartDto.zoomAndPanDto,
-//     animation: chartDto.animationDto,
-//     export: chartDto.exportDto,
-//     crosshair: chartDto.crosshairDto,
-//     argumentAxis: chartDto.argumentAxisDto,
-//     valueAxis: chartDto.valueAxisDto,
-//     tooltip: chartDto.tooltipDto,
-
-//     panes: chartDto.panesDto?.length > 0 ? chartDto.panesDto : undefined,
-//     series: chartDto.seriesDto?.length > 0 ? chartDto.seriesDto : undefined,
-//     commonSeriesSettings: chartDto.commonSeriesSettingsDto,
-//     commonPaneSettings: chartDto.commonPaneSettingsDto,
-//     commonAxisSettings: chartDto.commonAxisSettingsDto,
-//     annotations: chartDto.annotationsDto,
-//     commonAnnotationSettings: chartDto.commonAnnotationSettingsDto,
-
-//     loadingIndicator: {
-//       enabled: true,
-//     },
-//   }
-
-//   return options
-// }

ui/src/views/dashboard/WidgetBarChart.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@/components/ui'
-import Chart from '../chart/Chart'
+import Chart from '../list/Chart'
 
 const WidgetBarChart = ({
   chartKey,

ui/src/views/form/SubForms.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
 import { FaChartBar, FaList } from 'react-icons/fa'
 import { useLocation, useNavigate } from 'react-router-dom'
 import Grid from '../list/Grid'
-import Chart from '../chart/Chart'
+import Chart from '../list/Chart'
 import { GridDto, SubFormDto, SubFormTabTypeEnum } from '@/proxy/form/models'
 import FormEdit from './FormEdit'
 import FormNew from './FormNew'

ui/src/views/list/Chart.tsx

@@ -0,0 +1,97 @@
+import { CommonProps } from '@/@types/common'
+import { Meta } from '@/@types/routes'
+import { Container } from '@/components/shared'
+import { DX_CLASSNAMES } from '@/constants/app.constant'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import DxChart from 'devextreme-react/chart'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { useParams, useSearchParams } from 'react-router-dom'
+import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
+import { GridDto } from '@/proxy/form/models'
+
+interface ChartProps extends CommonProps, Meta {
+  listFormCode: string
+  filter?: string
+  isSubForm?: boolean
+  level?: number
+  refreshData?: () => Promise<void>
+  gridDto?: GridDto
+}
+
+const Chart = (props: ChartProps) => {
+  const { listFormCode, filter, isSubForm, level, gridDto } = props
+  const { translate } = useLocalization()
+
+  const [searchParams] = useSearchParams()
+  const [chartOptions, setChartOptions] = useState<any>()
+  const { createSelectDataSource } = useListFormCustomDataSource({})
+
+  const params = useParams()
+  const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
+
+  useEffect(() => {
+    if (!gridDto) return
+
+    const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
+
+    const options = {
+      dataSource: dataSource,
+
+      adjustOnZoom: gridDto.gridOptions.commonDto?.adjustOnZoom ?? true,
+      containerBackgroundColor:
+        gridDto.gridOptions.commonDto?.containerBackgroundColor ?? '#FFFFFF',
+      disabled: gridDto.gridOptions.commonDto?.disabled ?? false,
+      palette: gridDto.gridOptions.commonDto?.palette ?? 'Material',
+      paletteExtensionMode: gridDto.gridOptions.commonDto?.paletteExtensionMode ?? 'blend',
+      //theme: s(chartDto.commonDto?.theme, 'generic.light'),
+
+      title: gridDto.gridOptions.titleDto,
+      size: gridDto.gridOptions.sizeDto?.useSize ? gridDto.gridOptions.sizeDto : null,
+      legend: gridDto.gridOptions.legendDto,
+      margin: gridDto.gridOptions.marginDto,
+      adaptiveLayout: gridDto.gridOptions.adaptivelayoutDto,
+      defaultPane: gridDto.gridOptions.commonDto?.defaultPane,
+
+      scrollBar: gridDto.gridOptions.scrollBarDto,
+      zoomAndPan: gridDto.gridOptions.zoomAndPanDto,
+      animation: gridDto.gridOptions.animationDto,
+      export: gridDto.gridOptions.exportDto,
+      crosshair: gridDto.gridOptions.crosshairDto,
+      argumentAxis: gridDto.gridOptions.argumentAxisDto,
+      valueAxis: gridDto.gridOptions.valueAxisDto,
+      tooltip: gridDto.gridOptions.tooltipDto,
+
+      panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
+      series: gridDto.gridOptions.seriesDto?.length > 0 ? gridDto.gridOptions.seriesDto : undefined,
+      commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
+      commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
+      commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto,
+      annotations: gridDto.gridOptions.annotationsDto,
+      commonAnnotationSettings: gridDto.gridOptions.commonAnnotationSettingsDto,
+
+      loadingIndicator: {
+        enabled: true,
+      },
+    }
+
+    setChartOptions(options)
+  }, [gridDto, searchParams])
+
+  return (
+    <Container className={DX_CLASSNAMES}>
+      {!isSubForm && gridDto && (
+        <Helmet
+          titleTemplate="%s | Sözsoft Kurs Platform"
+          title={translate('::' + gridDto?.gridOptions?.title)}
+          defaultTitle="Sözsoft Kurs Platform"
+        ></Helmet>
+      )}
+      {_listFormCode && chartOptions && (
+        <DxChart key={'DxChart' + _listFormCode} {...chartOptions}></DxChart>
+      )}
+    </Container>
+  )
+}
+
+export default Chart

ui/src/views/list/List.tsx

@@ -2,7 +2,7 @@ import { useLocation, useParams, useSearchParams } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import Container from '@/components/shared/Container'
 import Grid from './Grid'
-import { FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
+import { FaChartArea, FaList, FaTable, FaTh, FaUser } from 'react-icons/fa'
 import { useStoreActions, useStoreState } from '@/store/store'
 import classNames from 'classnames'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -12,6 +12,8 @@ import { Button } from '@/components/ui'
 import Pivot from './Pivot'
 import { getList } from '@/services/form.service'
 import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
+import { ListViewLayoutType } from '../admin/listForm/edit/types'
+import Chart from './Chart'
 
 const List = () => {
   const params = useParams()
@@ -19,7 +21,7 @@ const List = () => {
   const [searchParams] = useSearchParams()
   const listFormCode = params?.listFormCode ?? ''
   const mode = useStoreState((state) => state.theme.mode)
-  const [viewMode, setViewMode] = useState<'grid' | 'card' | 'pivot'>()
+  const [viewMode, setViewMode] = useState<ListViewLayoutType>()
 
   const [gridDto, setGridDto] = useState<GridDto>()
   const MenuIcon = useCurrentMenuIcon('w-5 h-5')
@@ -120,6 +122,20 @@ const List = () => {
               <FaTable className="w-4 h-4" />
             </Button>
           )}
+
+          {gridDto?.gridOptions?.layoutDto.chart && (
+            <Button
+              size="xs"
+              variant={viewMode === 'chart' ? 'solid' : 'default'}
+              onClick={() => {
+                setViewMode('chart')
+                setStates({ listFormCode, layout: 'chart' })
+              }}
+              title="Pivot Görünümü"
+            >
+              <FaChartArea className="w-4 h-4" />
+            </Button>
+          )}
         </div>
       </div>
 
@@ -144,6 +160,13 @@ const List = () => {
           isSubForm={false}
           gridDto={gridDto}
         />
+      ) : viewMode === 'chart' ? (
+        <Chart
+          listFormCode={listFormCode}
+          filter={searchParams.toString()}
+          isSubForm={true}
+          gridDto={gridDto}
+        />
       ) : null}
     </Container>
   )