erp-platform/ui/src/shared/useListFormCustomDataSource.ts

import DataGrid from 'devextreme-react/data-grid'
import PivotGrid from 'devextreme-react/pivot-grid'
import CustomStore from 'devextreme/data/custom_store'
import { MutableRefObject, useCallback, useState } from 'react'
import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models'
import { GridColumnData } from '../views/list/GridColumnData'
import { dynamicFetch } from '../services/form.service'
import { MULTIVALUE_DELIMITER } from '../constants/app.constant'

const filteredGridPanelColor = 'rgba(10, 200, 10, 0.5)' // kullanici tanimli filtre ile filtrelenmis gridin paneline ait renk

const useListFormCustomDataSource = ({
  gridRef,
  pivotRef,
}: {
  gridRef?: MutableRefObject<DataGrid<any, any> | undefined>
  pivotRef?: MutableRefObject<PivotGrid | undefined>
}) => {
  const createSelectDataSource = useCallback(
    (
      gridOptions: GridOptionsDto,
      listFormCode: string,
      searchParams?: URLSearchParams,
      cols?: GridColumnData[],
      setWidgetGroups?: (widgetGroups: WidgetGroupDto[]) => void,
    ) => {
      return new CustomStore({
        key: gridOptions.keyFieldName,
        useDefaultSearch: true,
        load: async (loadOptions) => {
          const parameters = getLoadOptions(loadOptions, {
            listFormCode,
            filter: '',
            createDeleteQuery: searchParams?.get('createDeleteQuery'),
            group: '',
          })

          // 1. Default filter'ı al
          const defaultFilter = searchParams?.get('filter')
            ? JSON.parse(searchParams.get('filter')!)
            : null

          let combinedFilter: any = parameters.filter

          // 2. Eğer hem default hem de grid filter varsa merge et
          if (defaultFilter && combinedFilter) {
            combinedFilter = [defaultFilter, 'and', combinedFilter]
          } else if (defaultFilter) {
            combinedFilter = defaultFilter
          }
          //editing asamasinda her bir field de yapilan degisiklik load istegi olarak buraya dusuyor.
          //TODO: bu bug halen devam ediyor!!
          //Bunu engellemek icin eklendi.
          //if (!params.hasOwnProperty('requireTotalCount')) {
          //    return;
          //}
          try {
            if (gridRef?.current) {
              //TODO:
            }
            const columns =
              (gridRef?.current?.instance.option('columns') as GridColumnData[]) ?? cols
            // URL'deki filtreyi grid'in mevcut filtrelerinin üzerine uygula
            if (columns?.length && searchParams) {
              const filters: (string[] | string)[] = []
              for (const col of columns) {
                if (col.dataField) {
                  const sValue = searchParams.get(col.dataField)
                  if (sValue) {
                    filters.push([col.dataField, '=', sValue])
                    filters.push('and')
                  }
                }
              }
              if (filters.length) {
                filters.pop() // son and'i sil
                if (parameters.filter) {
                  parameters.filter = [...parameters.filter, 'and', ...filters]
                } else {
                  parameters.filter = filters
                }
              }
            }
            
            if (combinedFilter && combinedFilter.length > 0) {
              parameters.filter = JSON.stringify(combinedFilter)
            } else {
              delete parameters.filter // hiç göndermesin
            }

            //parameters.filter = JSON.stringify(parameters.filter)
            const response = await dynamicFetch('list-form-select/select', 'GET', parameters)

            if (setWidgetGroups) setWidgetGroups(response.data.widgets ?? [])

            // Column format multiValue ise, gelen stringi array yapmaliyiz
            if (columns) {
              columns.forEach((col: any) => {
                // Column multiValue mu?
                if (col.extras?.multiValue) {
                  //console.log('MultiValue:', col.dataField, col.extras?.multiValue)
                  // Multivalue column icin header filter acildiginda gonderilen group querysi sonuclari
                  // "key" field ile geliyor, bunu array yapmamiz lazim, bu group query'nin,
                  // bu field icin olup olmadigini anlayabiliriz
                  const isGroupQuery = parameters?.group?.includes(col.dataField)
                  response.data.data?.forEach((row: any) => {
                    try {
                      if (row[col.dataField]) {
                        // value'yu arraye cevir
                        row[col.dataField] = row[col.dataField]?.split(MULTIVALUE_DELIMITER)
                      }
                      if (isGroupQuery && row.key) {
                        // group query sonucunda gelen key'i arraye cevir
                        row.key = row.key.split(MULTIVALUE_DELIMITER)
                      }
                    } catch (e) {
                      // toast.push(
                      //   <Notification type="danger" duration={2000}>
                      //     {'multiValue Error'}
                      //   </Notification>,
                      //   {
                      //     placement: 'top-end',
                      //   },
                      // )
                      console.log('multiValue Error', e)
                      // JSON parse sirasinde hata olursa data gosterimi devam etsin
                    }
                  })
                }
              })

              //TODO: Bu neden var? Eğer gerekli değilse kaldırılabilir.
              searchParams?.set('createDeleteQuery', 'false')
            }

            // gride filtre uygulanmis ise renklendir
            setGridPanelColor(
              response.data.queryInfos?.isAppliedGridFilter
                ? filteredGridPanelColor
                : 'transparent',
            )

            const retValue = {
              data: response.data.data,
              totalCount: response.data.totalCount,
              summary: response.data.summary,
              groupCount: response.data.groupCount,
              widgets: response.data.widgets,
            }
            return retValue
          } catch (error: any) {
            // toast.push(
            //   <Notification type="danger" duration={2000}>
            //     Select error
            //     {error.toString()}
            //   </Notification>,
            //   {
            //     placement: 'top-end',
            //   },
            // )
            return null
          }
        },
        totalCount: async (loadOptions) => {
          const parameters = getLoadOptions(loadOptions, {
            listFormCode,
            filter: '',
            createDeleteQuery: searchParams?.get('createDeleteQuery'),
            group: '',
          })

          // 1. Default filter'ı al
          const defaultFilter = searchParams?.get('filter')
            ? JSON.parse(searchParams.get('filter')!)
            : null

          let combinedFilter: any = parameters.filter

          // 2. Eğer hem default hem de grid filter varsa merge et
          if (defaultFilter && combinedFilter) {
            combinedFilter = [defaultFilter, 'and', combinedFilter]
          } else if (defaultFilter) {
            combinedFilter = defaultFilter
          }

          if (combinedFilter && combinedFilter.length > 0) {
              parameters.filter = JSON.stringify(combinedFilter)
            } else {
              delete parameters.filter // hiç göndermesin
            }

          try {
            const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
            return response.data.totalCount
          } catch (error: any) {
            // toast.push(
            //   <Notification type="danger" duration={2000}>
            //     TotalCount error
            //     {error.toString()}
            //   </Notification>,
            //   {
            //     placement: 'top-end',
            //   },
            // )
            return null
          }
        },
        // byKey: async (key) => {
        //   const parameters = getLoadOptions(
        //     { key },
        //     { listFormCode, filter: '', createDeleteQuery: '' },
        //   )
 
        //   parameters.filter = JSON.stringify(parameters.filter)
        //   try {
        //     const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
        //     return response.data.data[0]
        //   } catch (error: any) {
        //     // toast.push(
        //     //   <Notification type="danger" duration={2000}>
        //     //     ByKey error
        //     //     {error.toString()}
        //     //   </Notification>,
        //     //   {
        //     //     placement: 'top-end',
        //     //   },
        //     // )
        //     return null
        //   }
        // },
        remove: function (key) {
          if (!gridOptions.deleteServiceAddress) {
            return
          }

          const deleteUrl = getServiceAddress(gridOptions.deleteServiceAddress)

          return dynamicFetch(deleteUrl, 'POST', searchParams, {
            keys: [key],
            listFormCode,
          })
        },
        update: function (key, values) {
          if (!gridOptions.updateServiceAddress) {
            return
          }
          const updateUrl = getServiceAddress(gridOptions.updateServiceAddress)

          return dynamicFetch(updateUrl, 'POST', searchParams, {
            keys: [key],
            data: values,
            listFormCode,
          })
        },
        insert: function (values) {
          if (!gridOptions.insertServiceAddress) {
            return
          }
          const insertUrl = getServiceAddress(gridOptions.insertServiceAddress)

          return dynamicFetch(insertUrl, 'POST', searchParams, { data: values, listFormCode })
        },
        errorHandler: (error: any) => {
          console.log(error.message)
        },
      })
    },
    [],
  )

  return {
    createSelectDataSource,
  }
}

export { useListFormCustomDataSource }