asb_cloud_front/src/pages/DrillingProgram/index.jsx

import { Button, Layout } from 'antd'
import { CloseOutlined, FileWordOutlined, LoadingOutlined } from '@ant-design/icons'
import { memo, useCallback, useEffect, useState } from 'react'

import { Flex } from '@components/Grid'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import { arrayOrDefault, formatDate } from '@utils'
import { DrillingProgramService } from '@api'

import CategoryAdder from './CategoryAdder'
import CategoryRender from './CategoryRender'
import CategoryEditor from './CategoryEditor'
import CategoryHistory from './CategoryHistory'

import '@styles/drilling_program.less'

const stateString = {
  0: 'Не настроена',
  1: 'Согласовывается',
  2: 'Формируется',
  [-1]: 'Неизвестно',
}

export const DrillingProgram = memo(({ idWell }) => {
  const [selectedCategory, setSelectedCategory] = useState()
  const [historyVisible, setHistoryVisible] = useState(false)
  const [editorVisible, setEditorVisible] = useState(false)
  const [showLoader, setShowLoader] = useState(false)
  const [categories, setCategories] = useState([])
  const [data, setData] = useState({})

  const updateData = useCallback(async () => await invokeWebApiWrapperAsync(
    async () => {
      const data = await DrillingProgramService.getState(idWell)
      const categories = arrayOrDefault(await DrillingProgramService.getCategories(idWell))
      setData(data)
      setCategories(categories.filter(cat => {
        if (cat?.id && (cat.name || cat.shortName))
          if (data?.parts.findIndex((val) => val.idFileCategory === cat.id) < 0)
            return true
        return false
      }))
    },
    setShowLoader,
    `Не удалось загрузить название скважины "${idWell}"`
  ), [idWell])

  useEffect(() => updateData(), [updateData])

  const onCategoryEdit = (catId) => {
    setSelectedCategory(catId)
    setEditorVisible(!!catId)
  }

  const onCategoryHistory = (catId) => {
    setSelectedCategory(catId)
    setHistoryVisible(!!catId)
  }

  const onEditorClosed = useCallback(() => {
    setEditorVisible(false)
    updateData()
  }, [updateData])

  return (
    <LoaderPortal show={showLoader}>
      <Layout style={{ backgroundColor: 'white' }}>
        {data && (
          <div className={'drilling_program'}>
            <div className={'program_header'}>
              <h3>Программа бурения</h3>
            </div>
            <Flex style={{ justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'white' }}>
              {data?.idState === 3 ? (
                <>
                  <Button type={'link'} icon={<FileWordOutlined />} style={{ marginLeft: '10px' }}>{data.program.name}</Button>
                  <div style={{ margin: '10px' }}>Размер: {data.program.size}</div>
                  <div style={{ margin: '10px' }}>Загружен: {formatDate(data.program.uploadDate)}</div>
                </>
              ) : (
                <h3 style={{ margin: '10px'}}>
                  {data?.idState <= 0 ? (
                    <CloseOutlined style={{ margin: '10px' }} />
                  ) : (
                    <LoadingOutlined style={{ margin: '10px' }} />
                  )}
                  {stateString[data?.idState ?? -1]}
                </h3>
              )}
            </Flex>
          </div>
        )}

        {data?.parts?.map?.((part, idx) => part && (
          <CategoryRender
            key={`${idx}`}
            idWell={idWell}
            partData={part}
            onEdit={onCategoryEdit}
            onUpdate={updateData}
            onHistory={onCategoryHistory}
          />
        ))}

        <CategoryAdder
          idWell={idWell}
          categories={categories}
          onUpdate={updateData}
        />

        <CategoryEditor
          idWell={idWell}
          visible={editorVisible}
          onClosed={onEditorClosed}
          category={data?.parts?.find((part) => part.idFileCategory === selectedCategory) ?? {}}
        />

        <CategoryHistory
          idWell={idWell}
          idCategory={selectedCategory}
          onClose={() => setHistoryVisible(false)}
          visible={historyVisible}
        />
      </Layout>
    </LoaderPortal>
  )
})

export default DrillingProgram