farmcontrol-ui/src/components/Dashboard/common/ExportListButton.jsx

import PropTypes from 'prop-types'
import { useState, useContext } from 'react'
import { Button, Dropdown, Modal } from 'antd'
import ExcelIcon from '../../Icons/ExcelIcon'
import ODataIcon from '../../Icons/ODataIcon'
import CsvIcon from '../../Icons/CsvIcon'
import DownloadIcon from '../../Icons/DownloadIcon'
import OpenAppIcon from '../../Icons/OpenAppIcon'
import ExportIcon from '../../Icons/ExportIcon'
import ODataURL from './ODataURL'
import { ApiServerContext } from '../context/ApiServerContext'

const ExportListButton = ({
  objectType,
  disabled = false,
  size = 'middle',
  ...buttonProps
}) => {
  const [odataModalOpen, setOdataModalOpen] = useState(false)
  const [excelLoading, setExcelLoading] = useState(false)
  const [csvLoading, setCsvLoading] = useState(false)
  const { exportToExcel, exportToCsv } = useContext(ApiServerContext)

  const handleExcelExport = async (mode) => {
    setExcelLoading(true)
    try {
      await exportToExcel(objectType, mode)
    } finally {
      setExcelLoading(false)
    }
  }

  const exportLoading = excelLoading || csvLoading
  const menuItems = [
    {
      key: 'excel',
      label: excelLoading ? 'Exporting...' : 'Excel File',
      icon: <ExcelIcon />,
      disabled: exportLoading,
      children: [
        {
          key: 'excel-download',
          label: 'Download File',
          icon: <DownloadIcon />,
          disabled: exportLoading,
          onClick: () => handleExcelExport('download')
        },
        {
          key: 'excel-open',
          label: 'Open in Excel',
          icon: <OpenAppIcon />,
          disabled: exportLoading,
          onClick: () => handleExcelExport('open')
        }
      ]
    },
    {
      key: 'csv',
      label: csvLoading ? 'Exporting...' : 'CSV File',
      icon: <CsvIcon />,
      disabled: exportLoading,
      onClick: async () => {
        setCsvLoading(true)
        try {
          await exportToCsv(objectType)
        } finally {
          setCsvLoading(false)
        }
      }
    },
    {
      type: 'divider'
    },
    {
      key: 'odata',
      label: 'OData Connection',
      icon: <ODataIcon />,
      onClick: () => setOdataModalOpen(true)
    }
  ]

  return (
    <>
      <Dropdown
        menu={{ items: menuItems }}
        trigger={['hover']}
        disabled={disabled || exportLoading}
      >
        <Button
          icon={<ExportIcon />}
          disabled={disabled || exportLoading}
          size={size}
          loading={exportLoading}
          {...buttonProps}
        />
      </Dropdown>
      <Modal
        open={odataModalOpen}
        destroyOnClose
        width={650}
        onCancel={() => setOdataModalOpen(false)}
        footer={null}
      >
        <ODataURL objectType={objectType} />
      </Modal>
    </>
  )
}

ExportListButton.propTypes = {
  objectType: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(['large', 'middle', 'small'])
}

export default ExportListButton