erp-platform/ui/src/views/list/Card.tsx

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { GridDto } from '@/proxy/form/models'
import { captionize } from 'devextreme/core/utils/inflector'
import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
import { Pagination, Select } from '@/components/ui'
import classNames from 'classnames'
import { getList } from '@/services/form.service'
import { FaInbox } from 'react-icons/fa'
import FormDevExpress from '../form/FormDevExpress'
import { GroupItem, SimpleItem } from 'devextreme/ui/form'
import { Form as FormDx } from 'devextreme-react/form'
import FormButtons from '../form/FormButtons'
import { useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import CustomStore from 'devextreme/data/custom_store'
import { PermissionResults } from '../form/types'
import { usePermission } from '@/utils/hooks/usePermission'
import { useLocalization } from '@/utils/hooks/useLocalization'

interface CardProps {
  listFormCode: string
  searchParams?: URLSearchParams
}

type Option = {
  value: number
  label: string
}

const CardItem = ({
  isSubForm,
  row,
  gridDto,
  listFormCode,
  dataSource,
  refreshData,
}: {
  isSubForm?: boolean
  row: any
  gridDto: GridDto
  listFormCode: string
  dataSource: CustomStore
  refreshData: () => void
}) => {
  const [formData, setFormData] = useState(row)
  const refForm = useRef<FormDx>(null)
  const navigate = useNavigate()
  const { checkPermission } = usePermission()
  const { translate } = useLocalization()

  const keyField = gridDto.gridOptions.keyFieldName
  const rowId = row[keyField!]

  const formItems: GroupItem[] = useMemo(() => {
    if (!gridDto) return []

    const items: SimpleItem[] = gridDto.columnFormats
      .filter((col) => col.visible && col.listOrderNo > 0)
      .sort((a, b) => a.listOrderNo - b.listOrderNo)
      .slice(0, 10)
      .map((col) => ({
        dataField: col.fieldName,
        label: { text: captionize(col.captionName || col.fieldName!) },
      }))

    return [
      {
        itemType: 'group',
        colCount: 1,
        items: items,
      },
    ]
  }, [gridDto])

  const permissionResults: PermissionResults = {
    c:
      gridDto?.gridOptions.editingOptionDto.allowAdding === true &&
      checkPermission(gridDto?.gridOptions.permissionDto.c),
    r: checkPermission(gridDto?.gridOptions.permissionDto.r),
    u:
      gridDto?.gridOptions.editingOptionDto.allowUpdating === true &&
      checkPermission(gridDto?.gridOptions.permissionDto.u),
    d:
      gridDto?.gridOptions.editingOptionDto.allowDeleting === true &&
      checkPermission(gridDto?.gridOptions.permissionDto.d),
    e: checkPermission(gridDto?.gridOptions.permissionDto.e),
    i: checkPermission(gridDto?.gridOptions.permissionDto.i),
  }

  const onActionEdit = () => {
    navigate(
      ROUTES_ENUM.protected.admin.formEdit
        .replace(':listFormCode', listFormCode)
        .replace(':id', rowId!),
    )
  }

  const onActionNew = () => {
    navigate(ROUTES_ENUM.protected.admin.formNew.replace(':listFormCode', listFormCode))
  }

  return (
    <div className="bg-white dark:bg-neutral-800 border dark:border-neutral-700 flex flex-col groupp p-2">
      <div className={`flex items-center mb-2 ${isSubForm ? 'justify-center' : 'justify-between'}`}>
        {!isSubForm && <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>}
        {permissionResults && (
          <FormButtons
            isSubForm={true}
            mode="view"
            listFormCode={listFormCode}
            id={rowId}
            gridDto={gridDto}
            commandColumnData={{ buttons: [] }}
            dataSource={dataSource}
            permissions={permissionResults}
            handleSubmit={() => ({})}
            refreshData={refreshData}
            getSelectedRowKeys={() => [rowId]}
            getSelectedRowsData={() => [row]}
            getFilter={() => null}
            onActionEdit={onActionEdit}
            onActionNew={onActionNew}
          />
        )}
      </div>
      <div className="flex-grow">
        <FormDevExpress
          mode="view"
          refForm={refForm}
          formData={formData}
          formItems={formItems}
          setFormData={setFormData}
        />
      </div>
    </div>
  )
}

const Card = ({ listFormCode, searchParams }: CardProps) => {
  const { createSelectDataSource } = useListFormCustomDataSource({})
  const [gridDto, setGridDto] = useState<GridDto>()
  const [data, setData] = useState<any[]>([])
  const [totalCount, setTotalCount] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [pageSizeOptions, setPageSizeOptions] = useState<Option[]>([])
  const [dataSource, setDataSource] = useState<CustomStore>()

  const onPageSizeSelect = ({ value }: Option) => {
    setPageSize(value)
    setCurrentPage(1)
  }

  const onPageChange = (page: number) => {
    setCurrentPage(page)
  }

  useEffect(() => {
    getList({ listFormCode }).then((res: any) => setGridDto(res.data))
  }, [listFormCode])

  useEffect(() => {
    if (gridDto) {
      const store = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
      setDataSource(store)
    }
  }, [gridDto, listFormCode, searchParams, createSelectDataSource])

  const loadData = useCallback(() => {
    if (!dataSource) return

    const loadOptions = {
      skip: (currentPage - 1) * pageSize,
      take: pageSize,
      requireTotalCount: true,
    }

    dataSource.load(loadOptions).then((res: any) => {
      setData(res.data)
      setTotalCount(res.totalCount || 0)
    })
  }, [dataSource, currentPage, pageSize])

  useEffect(() => {
    if (dataSource) {
      loadData()
    }
  }, [dataSource, loadData])

  useEffect(() => {
    if (!gridDto) return

    const pagerOptions = gridDto.gridOptions.pagerOptionDto
    const allowedSizes = pagerOptions?.allowedPageSizes
      ?.split(',')
      .map((s) => Number(s.trim()))
      .filter((n) => !isNaN(n) && n > 0) || [20, 50, 100]

    setPageSizeOptions(allowedSizes.map((size) => ({ value: size, label: `${size} page` })))
  }, [gridDto, listFormCode, searchParams])

  if (!gridDto) return null

  return (
    <>
      {data.length === 0 && (
        <div className="flex flex-col items-center justify-center p-10 bg-gray-50 dark:bg-neutral-800/50 rounded-md border-2 border-dashed border-gray-200 dark:border-neutral-700">
          <div className="text-center">
            <FaInbox className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
            <p className="mt-4 text-lg font-semibold text-gray-700 dark:text-gray-300">
              Kayıt Bulunamadı
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              Görüntülenecek herhangi bir veri yok.
            </p>
          </div>
        </div>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
        {dataSource &&
          data.map((row, idx) => {
            const keyField = gridDto.gridOptions.keyFieldName
            const rowId = row[keyField!]

            return (
              <CardItem
                isSubForm={true}
                key={rowId || idx}
                row={row}
                gridDto={gridDto}
                listFormCode={listFormCode}
                dataSource={dataSource}
                refreshData={loadData}
              />
            )
          })}
      </div>

      {gridDto.gridOptions.pagerOptionDto?.visible && totalCount > pageSize && (
        <div className={classNames('flex items-center justify-between border-t-1 gap-4 mt-4')}>
          <div className="flex items-center gap-2">
            <span className="text-xs text-gray-600 dark:text-gray-300">
              Toplam {totalCount} kayıt
            </span>
            <Select
              size="xs"
              menuPlacement="top"
              value={pageSizeOptions.find((o) => o.value === pageSize)}
              options={pageSizeOptions}
              onChange={(selected) => onPageSizeSelect(selected as Option)}
            />
          </div>
          <Pagination
            currentPage={currentPage}
            total={totalCount}
            pageSize={pageSize}
            onChange={onPageChange}
          />
        </div>
      )}
    </>
  )
}

export default Card