asb_cloud_front/src/pages/Documents/DocumentsTemplate.jsx

import { useState, useEffect } from "react"
import { DatePicker, Button, Input } from "antd"
import moment from "moment"
import { FileService } from "../../services/api"
import {
  invokeWebApiWrapperAsync,
  download,
  formatBytes,
} from "../../components/factory"
import { EditableTable, makePaginationObject } from "../../components/Table"
import UploadForm from "../../components/UploadForm"
import LoaderPortal from "../../components/LoaderPortal"
import {UserView} from  '../../components/UserView'

const pageSize = 12
const { RangePicker } = DatePicker
const { Search } = Input

export default function DocumentsTemplate({ idCategory, idWell }) {
  const [page, setPage] = useState(1)
  const [filterDataRange, setFilterDataRange] = useState([])
  const [filterCompaniesIds, setFilterCompany] = useState([])
  const [filterFileName, setFilterFileName] = useState('')
  const [pagination, setPagination] = useState(null)
  const [files, setFiles] = useState([])
  const [showLoader, setShowLoader] = useState(false)

  const uploadUrl = `/api/well/${idWell}/files/?idCategory=${idCategory}`

  const handleFileDownload = async (_, row) => {
    invokeWebApiWrapperAsync(
      async () => {
        await download(`/api/well/${idWell}/files/${row.id}`)
      },
      setShowLoader,
      `Не удалось скачать файл ${row}`
    )
  }

  const handleUploadComplete = () => {
    update()
  }

  const handleFileDelete = async (file) => {
    await FileService.delete(idWell, file.id)
    update()
  }

  const hanleCompanySearch = (value, _) => {
    setFilterCompany(value)
  }

  const hanleFileNameSearch = (value, _) => {
    setFilterFileName(value)
  }

  const columns = [
    {
      title: "Документ",
      key: "document",
      dataIndex: "name",
      render: (name, row) => (
        <Button type="link" onClick={(ev) => handleFileDownload(ev, row)} download={name}>
          {name}
        </Button>),
    },
    {
      title: "Дата загрузки",
      key: "uploadDate",
      dataIndex: "uploadDate",
      render: item =>
        moment.utc(item).local().format("DD MMM YYYY, HH:mm:ss"),
    },
    {
      title: "Размер",
      key: "size",
      dataIndex: "size",
      render: item => formatBytes(item)
    },
    {
      title: "Автор",
      key: "author",
      dataIndex: "author",
      render: item => <UserView user={item}/>
    },
    {
      title: "Компания",
      key: "company",
      dataIndex: "company",
    },
  ]

  const addKeysAndUpdateFiles = (items) => {
    const mappedFiles = items?.map((fileInfo) => ({
      key: fileInfo.id,
      begin: fileInfo.date,
      ...fileInfo,
    }))
    setFiles(mappedFiles ?? [])
  }

  const update = () => {
    let begin = null
    let end = null
    if (filterDataRange?.length > 1) {
      begin = filterDataRange[0].toISOString()
      end = filterDataRange[1].toISOString()
    }

    invokeWebApiWrapperAsync(
      async () => {
        const paginatedFiles = await FileService.getFilesInfo(
          idWell,          
          idCategory,
          filterCompaniesIds,
          filterFileName,
          begin,
          end,
          (page - 1) * pageSize,
          pageSize,
        )
        if (!paginatedFiles) return
        addKeysAndUpdateFiles(paginatedFiles?.items)

        const newPagination = makePaginationObject(paginatedFiles)
        setPagination(newPagination)
      },
      setShowLoader,
      `Не удалось загрузить файлы по скважине "${idWell}"`
    )
  }

  useEffect(update, [idWell, idCategory, page, filterDataRange, filterCompaniesIds, filterFileName])

  const companies = [...new Set(files.map(file=>file.company))]
    .filter(company=>company)

  const DataListCompanies = <datalist id="listCompanies">
    {companies.map((company)=><option key={company} value={company}>{company}</option>)}
  </datalist>

  const filenames = [...new Set(files.map(file=>file.name))]
    .filter(name=>name)

  const DataListFileNames = <datalist id="listFileNames">
    {filenames.map((name)=><option key={name} value={name}>{name}</option>)}
  </datalist>

  return (
    <LoaderPortal show={showLoader}>
      <div style={{margin:16, display:'flex'}}>
        <div>
          <span>Фильтр по дате</span>
          <div>
            <RangePicker showTime onChange={setFilterDataRange} />
          </div>
        </div>        
        &nbsp;
        <div>
          <span>Фильтр по компании</span>
          <Search
            list='listCompanies'
            placeholder="Фильтр по компании"
            onSearch={hanleCompanySearch}/>
          {DataListCompanies}
        </div>        
        &nbsp;
        <div>
          <span>Фильтр по имени файла</span>
          <Search
            list='listFileNames'
            placeholder="Фильтр по имени файла"
            onSearch={hanleFileNameSearch}/>
          {DataListFileNames}
        </div>
        &nbsp;&nbsp;
        <div>
          <span>Загрузка</span>
          <UploadForm
            url={uploadUrl}
            onUploadStart={() => setShowLoader(true)}
            onUploadComplete={handleUploadComplete}/>
        </div>
      </div>

      <EditableTable
        columns={columns}
        dataSource={files}
        size={"small"}
        pagination={{
          ...pagination,
          showSizeChanger: false,
          onChange: (page) => setPage(page),
        }}
        onRowDelete={handleFileDelete}
        rowKey={(record) => record.id}
      />
    </LoaderPortal>
  )
}