asb_cloud_front/src/pages/DrillingProgram/index.jsx

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

import LoaderPortal from '@components/LoaderPortal'
import { downloadFile, 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 idStateNotInitialized = 0
const idStateApproving = 1
const idStateCreating = 2
const idStateReady = 3
const idStateError = 4
const idStateUnknown = -1

const stateString = {
  [idStateNotInitialized]: { icon: CloseOutlined, text: 'Не настроена' },
  [idStateApproving]: { icon: LoadingOutlined, text: 'Согласовывается' },
  [idStateCreating]: { icon: LoadingOutlined, text: 'Формируется' },
  [idStateReady]: { icon: CheckOutlined, text: 'Сформирована' },
  [idStateError]: { icon: WarningOutlined, text: 'Ошибка формирования' },
  [idStateUnknown]: { icon: WarningOutlined, text: 'Неизвестно' },
}

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 {
    idState,
    permissionToEdit,
    parts,
    program,
    error,
  } = data

  const stateId = idState ?? idStateUnknown
  const state = stateString[stateId]
  const StateIcon = state.icon

  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' }}>
        <div className={'drilling_program'}>
          <div className={'program_header'}>
            <h3>Программа бурения</h3>
            {permissionToEdit && (
              <div>
                <CategoryAdder
                  idWell={idWell}
                  categories={categories}
                  onUpdate={updateData}
                />
              </div>
            )}
          </div>
          <div className={'program_content'}>
            {stateId === idStateReady ? (
              <>
                <Button
                  type={'link'}
                  icon={<FileWordOutlined />}
                  style={{ marginLeft: '10px' }}
                  onClick={() => downloadFile(program)}
                >
                  {program?.name}
                </Button>
                <div className={'m-10'}>Размер: {program?.size}</div>
                <div className={'m-10'}>Загружен: {formatDate(program?.uploadDate)}</div>
              </>
            ) : stateId === idStateError ? (
              <>
                <h3 className={'program_status error'}>
                  <StateIcon className={'m-10'} />
                  {error?.message ?? state.text}
                </h3>
                <Button icon={<ReloadOutlined />}>
                  Сбросить статус ошибки
                </Button>
              </>
            ) : (
              <h3 className={'program_status'}>
                <StateIcon className={'m-10'} />
                {state.text}
              </h3>
            )}
          </div>
        </div>

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

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

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

export default DrillingProgram