Форма добавления категории перенесена в заголовок блока программы бурения

Кнопка сброса ошибки перенесена после статуса

src/pages/DrillingProgram/CategoryAdder.jsx

@@ -1,12 +1,18 @@
-import { Button, Select } from 'antd'
+import { Form, Select } from 'antd'
 import { FileAddOutlined } from '@ant-design/icons'
 import { memo, useCallback, useEffect, useState } from 'react'
 
-import { DrillingProgramService } from '@api'
+import Poprompt from '@components/Poprompt'
 import { invokeWebApiWrapperAsync } from '@components/factory'
+import { DrillingProgramService } from '@api'
 
 import '@styles/drilling_program.less'
 
+const catSelectorRules = [{
+    required: true,
+    message: 'Пожалуйста, выберите категории'
+}]
+
 export const CategoryAdder = memo(({ categories, idWell, onUpdate, className, ...other }) => {
     const [options, setOptions] = useState([])
     const [value, setValue] = useState([])
@@ -24,20 +30,37 @@ export const CategoryAdder = memo(({ categories, idWell, onUpdate, className, ..
         `Не удалось установить список доступных категорий для добавления`
     ), [categories])
 
-    const onAddClick = useCallback(() => invokeWebApiWrapperAsync(
+    const onFinish = useCallback(({ categories }) => invokeWebApiWrapperAsync(
         async () => {
-            await DrillingProgramService.addParts(idWell, value)
+            if (!categories) return
+            await DrillingProgramService.addParts(idWell, categories)
             setValue([])
             onUpdate?.()
         },
         setShowLoader,
         `Не удалось добавить новые категорий программы бурения`,
         `Добавление категорий программы бурения`
-    ), [onUpdate, idWell, value])
+    ), [onUpdate, idWell])
 
     return (
-        <div className={`category_adder ${className ?? ''}`} {...other}>
+        <Poprompt
+            buttonProps={{
+                icon: <FileAddOutlined />,
+                loading: showLoader,
+            }}
+            placement={'topLeft'}
+            text={'Добавить категорию'}
+            onDone={onFinish}
+            {...other}
+        >
+            <Form.Item
+                name={'categories'}
+                label={'Категории:'}
+                className={`category_adder ${className ?? ''}`}
+                rules={catSelectorRules}
+            >
                 <Select
+                    style={{ width: '300px' }}
                     allowClear
                     className={'adder_select'}
                     mode={'multiple'}
@@ -46,15 +69,8 @@ export const CategoryAdder = memo(({ categories, idWell, onUpdate, className, ..
                     onChange={setValue}
                     loading={showCatLoader}
                 />
-            <Button
+            </Form.Item>
-                onClick={onAddClick}
+        </Poprompt>
-                loading={showLoader}
-                icon={<FileAddOutlined />}
-                disabled={!value || value.length <= 0}
-            >
-                Добавить
-            </Button>
-        </div>
     )
 })
 

src/pages/DrillingProgram/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Layout } from 'antd'
+import { Button, Layout, Menu } from 'antd'
 import {
   CheckOutlined,
   CloseOutlined,
@@ -57,8 +57,6 @@ export const DrillingProgram = memo(({ idWell }) => {
   const state = stateString[stateId]
   const StateIcon = state.icon
 
-  console.log(parts)
-
   const updateData = useCallback(async () => await invokeWebApiWrapperAsync(
     async () => {
       const data = await DrillingProgramService.getState(idWell)
@@ -100,13 +98,11 @@ export const DrillingProgram = memo(({ idWell }) => {
             <h3>Программа бурения</h3>
             {permissionToEdit && (
               <div>
-                <Button
+                <CategoryAdder
-                  icon={<ReloadOutlined />}
+                  idWell={idWell}
-                  disabled={[idStateNotInitialized, idStateApproving, idStateUnknown].includes(stateId)}
+                  categories={categories}
-                  loading={stateId === idStateCreating}
+                  onUpdate={updateData}
-                >
+                />
-                  Сформировать заново
-                </Button>
               </div>
             )}
           </div>
@@ -117,10 +113,20 @@ export const DrillingProgram = memo(({ idWell }) => {
                 <div className={'m-10'}>Размер: {program?.size}</div>
                 <div className={'m-10'}>Загружен: {formatDate(program?.uploadDate)}</div>
               </>
-            ) : (
+            ) : stateId === idStateError ? (
-              <h3 className={`program_status ${stateId === idStateError ? 'error' : ''}`}>
+              <>
+                <h3 className={'program_status error'}>
                   <StateIcon className={'m-10'} />
-                {(stateId === idStateError && error?.message) ? error.message : state.text}
+                  {error?.message ?? state.text}
+                </h3>
+                <Button icon={<ReloadOutlined />}>
+                  Сбросить статус ошибки
+                </Button>
+              </>
+            ) : (
+              <h3 className={'program_status'}>
+                <StateIcon className={'m-10'} />
+                {state.text}
               </h3>
             )}
           </div>
@@ -139,12 +145,6 @@ export const DrillingProgram = memo(({ idWell }) => {
 
         {permissionToEdit && (
           <>
-            <CategoryAdder
-              idWell={idWell}
-              categories={categories}
-              onUpdate={updateData}
-            />
-
             <CategoryEditor
               idWell={idWell}
               visible={editorVisible}