редактор секций скважины

src/components/factory.ts

@@ -5,10 +5,11 @@ export const RegExpIsFloat = /^[-+]?\d+\.?\d?$/
   поддерживаются все базовые свойства из описания https://ant.design/components/table/#Column
   плю дополнительные для колонок EditableTable:
   editable - редактируемая колонка, bool
-  input - react компонента редактора (<Inpet/>, <InpetNumber/>, <DatePicker/>...)
+  input - react компонента редактора (<Input/>, <InputNumber/>, <DatePicker/>...)
   isRequired - значение может быть пустым,
   formItemClass - css класс для <FormItem/>, если требуется
   formItemRules - массив правил валидации значений https://ant.design/components/form/#Rule, 
+  initialValue - дефолтное значение при добавлении новой строки
  */
 export const makeColumn = (title:string, key:string, other?:any) => ({
   title: title,
@@ -45,3 +46,13 @@ export const makeColumnsPlanFact = (title:string, key:string|string[], columsOth
     ]
   }
 }
+
+// const makePaginationObject = (paginationContainer, ...other) =>{
+//   let page = 1 + Math.floor(paginationContainer.skip/paginationContainer.take);
+//   return {
+//     ...other,
+//     pageSize: paginationContainer.take,
+//     total: paginationContainer.total,
+//     current: page,
+//   }
+// }

src/pages/Deposit.jsx

@@ -52,13 +52,11 @@ export default function Deposit() {
     <Overlay  
       width={32} 
       anchor={[cluster.latitude, cluster.longitude]} 
-      key={`${cluster.latitude}  ${cluster.longitude}`}
+      key={`${cluster.latitude}  ${cluster.longitude}`}>
-      >
         <Link to={`/cluster/${cluster.id}`}>
           <img width={40} src={pointer} alt="+"/>
           <span>{cluster.caption}</span>
         </Link>
-        
     </Overlay >)
 
   return (

src/pages/WellStat.jsx

@@ -4,78 +4,126 @@ import {makeColumn, makeColumnsPlanFact, RegExpIsFloat} from '../components/fact
 import {WellSectionService} from '../services/api'
 import notify from '../components/notify'
 import { EditableTable } from '../components/EditableTable';
+import { Input } from 'antd'
 
-const columns = [
+const TypeSelector = <Input list={'sectionTypeList'}/>
-  makeColumn('Конструкция секции', 'sectionType', {editable:true}),
+
-  makeColumnsPlanFact('Глубина, м', 'wellDepth', {editable:true, formItemRules:[
+const DataListSectionTypes = <datalist id="sectionTypeList">
+  <option value="Пилотный ствол">Пилотный ствол</option>
+  <option value="Направление">Направление</option>
+  <option value="Кондуктор">Кондуктор</option>
+  <option value="Эксплуатационная колонна">Эксплуатационная колонна</option>
+  <option value="Транспортный ствол">Транспортный ствол</option>
+  <option value="Хвостовик">Хвостовик</option>
+</datalist>
+
+const numericColumnOptions = {
+  editable: true,
+  initialValue: 0,
+  formItemRules: [
     {
       required: true,
       message: `Введите число`,
-      pattern: RegExpIsFloat
+      pattern: RegExpIsFloat,
-    }]}),
+    },
-  makeColumnsPlanFact('Период, д',  'buildDays', {editable:true}),
+  ],
-  makeColumnsPlanFact('Механическая скорость проходки, м/час', 'rateOfPenetration', {editable:true}),
+};
-  makeColumnsPlanFact('Рейсовая скорость, м/час', 'routeSpeed', {editable:true}),
+  
-  makeColumnsPlanFact('Скорость подъема КНБК', 'bhaUpSpeed', {editable:true}),
+const columns = [
-  makeColumnsPlanFact('Скорость спуска КНБК', 'bhaDownSpeed', {editable:true}),
+  makeColumn('Конструкция секции', 'sectionType', {editable:true, input:TypeSelector}),
-  makeColumnsPlanFact('Скорость спуска обсадной колонны', 'casingDownSpeed', {editable:true}),
+  makeColumnsPlanFact('Глубина, м', 'wellDepth', numericColumnOptions),
+  makeColumnsPlanFact('Период, д',  'buildDays', numericColumnOptions),
+  makeColumnsPlanFact('Механическая скорость проходки, м/час', 'rateOfPenetration', numericColumnOptions),
+  makeColumnsPlanFact('Рейсовая скорость, м/час', 'routeSpeed', numericColumnOptions),
+  makeColumnsPlanFact('Скорость подъема КНБК', 'bhaUpSpeed', numericColumnOptions),
+  makeColumnsPlanFact('Скорость спуска КНБК', 'bhaDownSpeed', numericColumnOptions),
+  makeColumnsPlanFact('Скорость спуска обсадной колонны', 'casingDownSpeed', numericColumnOptions),
 ]
 
-// const data = [{
+const runAsyncFunc = async (funcAsync, setShowLoader, errorNotifyText) => {  
-//   key:1,
+  if(setShowLoader)
-//   sectionType: 'загагулина',
-//   wellDepthPlan: 1,
-//   wellDepthFact: 1,
-//   buildDaysPlan: 1,
-//   buildDaysFact: 1,
-//   rateOfPenetrationPlan: 4,
-//   rateOfPenetrationFact: 3,
-//   routeSpeedPlan: 2,
-//   routeSpeedFact: 1,
-//   bhaUpSpeedPlan: 1,
-//   bhaUpSpeedFact: 1,
-//   bhaDownSpeedPlan: 1,
-//   bhaDownSpeedFact: 1,
-//   casingDownSpeedPlan: 1,
-//   casingDownSpeedFact: 1,
-//   }]
-
-export default function WellStat({idWell}){
-  const [showLoader, setShowLoader] = useState(false)
-  const [data, setData] = useState({})
-  
-  useEffect(()=>{
-    const update = async()=>{
     setShowLoader(true)
   try{
-        const data = await WellSectionService.getAll(idWell,0,1024)
+    await funcAsync()
-        setData(data);
   } catch (ex) {
+    if(process.env.NODE_ENV === 'development')
       console.log(ex)
-        notify(`Не удалось загрузить секции по скважине "${idWell}"`, 'error')
+    if(errorNotifyText)
+      notify(errorNotifyText, 'error')
   } finally{
+    if(setShowLoader)
       setShowLoader(false)
   }
 }
-    update();
+
+export default function WellStat({idWell}){
+  const [showLoader, setShowLoader] = useState(false)
+  const [items, setItems] = useState([])
+  
+  const addKeysAndUpdateStateData = (items) =>{
+    const keyedItems = items?.map(item => ({...item, key:item.id}))??[]
+    setItems(keyedItems)
+  }
+
+  useEffect(() => {
+    runAsyncFunc(
+      async () => {
+        const paginationContainer = await WellSectionService.getAll(idWell, 0, 1024)
+        addKeysAndUpdateStateData(paginationContainer.items)
+      },
+      setShowLoader, 
+      `Не удалось загрузить секции по скважине "${idWell}"`)
   } ,[idWell])
 
-  const onChange = (newData) =>{
+  const onAdd = (item) => {
-    setData(newData)
+    runAsyncFunc(      
+      async () => {
+        const updatedItems = await WellSectionService.insert(idWell, [item])
+        const newItems = [...items, ...updatedItems]
+        addKeysAndUpdateStateData(newItems)
+      },
+      setShowLoader, 
+      `Не удалось добавить секцию в скважину "${idWell}"`)    
+  }
+
+  const onEdit = (item) => {
+    runAsyncFunc(      
+      async () => {
+        const updatedItem = await WellSectionService.update(idWell, item.id, item)    
+        const newItems = [...items]
+        const index = newItems.findIndex((i) => item.key === i.key)    
+        newItems.splice(index, 1, updatedItem)
+        addKeysAndUpdateStateData(newItems)
+      },
+      setShowLoader, 
+      `Не удалось изменить секцию в скважине "${idWell}"`)    
+  }
+  
+  const onDelete = (item) =>{
+    runAsyncFunc(      
+      async () => {
+        await WellSectionService.delete(idWell, [item.id])    
+        const newItems = [...items]
+        const index = newItems.findIndex((i) => item.key === i.key)    
+        newItems.splice(index, 1)
+        addKeysAndUpdateStateData(newItems)
+      },
+      setShowLoader, 
+      `Не удалось удалить секцию из скважины "${idWell}"`)
   }
 
   return(
     <LoaderPortal show={showLoader}>
       <EditableTable
         columns={columns}
-        dataSource={data.items}
+        dataSource={items}
         size={'small'}
         bordered
         pagination={false}
-        onChange={onChange}
+        onRowAdd={onAdd}
-        onRowAdd={()=>{}}
+        onRowEdit={onEdit}
-        onRowEdit={()=>{}}
+        onRowDelete={onDelete}
-        onRowDelete={()=>{}}
       />
+      {DataListSectionTypes}
     </LoaderPortal>)
 }

src/services/api/services/DataService.ts

@@ -36,7 +36,8 @@ approxPointsCount: number = 1024,
     }
 
     /**
-     * @param idWell 
+     * Возвращает диапазон дат сохраненных данных.
+     * @param idWell id скважины
      * @returns DatesRangeDto Success
      * @throws ApiError
      */

src/services/api/services/MessageService.ts

@@ -15,11 +15,11 @@ export class MessageService {
      * @param categoryids список категорий
      * @param begin дата начала
      * @param end окончание
-     * @param searchString 
+     * @param searchString Строка поиска
      * @returns MessageDtoPaginationContainer Success
      * @throws ApiError
      */
-    public static async getMessage(
+    public static async getMessages(
 idWell: number,
 skip: number,
 take: number = 32,
@@ -44,7 +44,8 @@ searchString?: string,
     }
 
     /**
-     * @param idWell 
+     * Выдает список сообщений по скважине
+     * @param idWell id скважины
      * @returns DatesRangeDto Success
      * @throws ApiError
      */

src/services/api/services/WellSectionService.ts

@@ -6,18 +6,33 @@ import { request as __request } from '../core/request';
 
 export class WellSectionService {
 
+    /**
+     * @param idWell 
+     * @returns string Success
+     * @throws ApiError
+     */
+    public static async getTypes(
+idWell: string,
+): Promise<Array<string>> {
+        const result = await __request({
+            method: 'GET',
+            path: `/api/well/${idWell}/sections/types`,
+        });
+        return result.body;
+    }
+
     /**
      * @param idWell 
      * @param skip 
      * @param take 
-     * @returns any Success
+     * @returns WellSectionDto Success
      * @throws ApiError
      */
     public static async getAll(
 idWell: number,
 skip: number,
 take: number = 32,
-): Promise<any> {
+): Promise<Array<WellSectionDto>> {
         const result = await __request({
             method: 'GET',
             path: `/api/well/${idWell}/sections`,
@@ -32,13 +47,13 @@ take: number = 32,
     /**
      * @param idWell 
      * @param requestBody 
-     * @returns any Success
+     * @returns WellSectionDto Success
      * @throws ApiError
      */
     public static async insert(
 idWell: number,
 requestBody?: Array<WellSectionDto>,
-): Promise<any> {
+): Promise<Array<WellSectionDto>> {
         const result = await __request({
             method: 'POST',
             path: `/api/well/${idWell}/sections`,
@@ -48,15 +63,15 @@ requestBody?: Array<WellSectionDto>,
     }
 
     /**
-     * @param idSection 
      * @param idWell 
-     * @returns any Success
+     * @param idSection 
+     * @returns WellSectionDto Success
      * @throws ApiError
      */
     public static async get(
-idSection: number,
 idWell: number,
-): Promise<any> {
+idSection: number,
+): Promise<WellSectionDto> {
         const result = await __request({
             method: 'GET',
             path: `/api/well/${idWell}/sections/${idSection}`,
@@ -65,38 +80,38 @@ idWell: number,
     }
 
     /**
-     * @param id 
      * @param idWell 
+     * @param idSection 
      * @param requestBody 
-     * @returns any Success
+     * @returns WellSectionDto Success
      * @throws ApiError
      */
-    public static async put(
+    public static async update(
-id: number,
 idWell: number,
+idSection: number,
 requestBody?: WellSectionDto,
-): Promise<any> {
+): Promise<WellSectionDto> {
         const result = await __request({
             method: 'PUT',
-            path: `/api/well/${idWell}/sections/${id}`,
+            path: `/api/well/${idWell}/sections/${idSection}`,
             body: requestBody,
         });
         return result.body;
     }
 
     /**
-     * @param id 
      * @param idWell 
-     * @returns any Success
+     * @param idSection 
+     * @returns number Success
      * @throws ApiError
      */
     public static async delete(
-id: number,
 idWell: number,
-): Promise<any> {
+idSection: number,
+): Promise<number> {
         const result = await __request({
             method: 'DELETE',
-            path: `/api/well/${idWell}/sections/${id}`,
+            path: `/api/well/${idWell}/sections/${idSection}`,
         });
         return result.body;
     }