fix WellOperationsEditor

src/pages/WellOperations.jsx

@@ -38,10 +38,10 @@ export default function WellOperations({idWell}) {
               <div>sss</div>
             </Route>
             <Route path={`${rootPath}/plan`}>
-              <WellOperationsEditor idWell={idWell}/>
+              <WellOperationsEditor idWell={idWell} idType={0}/>
             </Route>
             <Route path={`${rootPath}/fact`}>
-              <div>sss</div>
+              <WellOperationsEditor idWell={idWell} idType={1}/>
             </Route>
             <Route path={rootPath}>
               <Redirect to={`${rootPath}/tvd`}/>

src/pages/WellOperationsEditor.jsx

@@ -1,13 +1,21 @@
 import { useState, useEffect } from 'react'
-import { Input, DatePicker } from 'antd'
+import { Input, DatePicker, Select } from 'antd'
 import { EditableTable } from "../components/EditableTable"
 import LoaderPortal from '../components/LoaderPortal'
 import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../components/factory'
 import { WellOperationService} from '../services/api'
+import moment from 'moment'
+
+const { Option } = Select
+const { TextArea } = Input;
+
+const basePageSize = 160;
+const format='YYYY.MM.DD HH:mm'
 
 const numericColumnOptions = {
   editable: true,
   initialValue: 0,
+  width:100,
   formItemRules: [
     {
       required: true,
@@ -17,41 +25,54 @@ const numericColumnOptions = {
   ],
 };
 
-const TypeSelector = <Input list={'sectionTypeList'}/>
-
-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 columns = [
-  makeColumn('Конструкция секции','wellSectionTypeName', {editable:true, input:TypeSelector}),
-  makeColumn('Операция','categoryName', {editable:true, input:TypeSelector}),
-  makeColumn('Доп. инфо','info', {editable:true}),
-  makeColumn('Глубина забоя','wellDepth', numericColumnOptions),
-  makeColumn('Время начала','startDate', {editable:true, input:<DatePicker/>}),
-  makeColumn('Продолжительность','durationHours', numericColumnOptions),
-  makeColumn('Комментарий','comment', {editable:true}),
+const dictionarySectionType = [
+  {id:1, name:'Пилотный ствол'},
+  {id:2, name:'Направление'},
+  {id:3, name:'Кондуктор'},
+  {id:4, name:'Эксплуатационная колонна'},
+  {id:5, name:'Транспортный ствол'},
+  {id:6, name:'Хвостовик'},
 ]
 
-const basePageSize = 32;
+const getNameById = (dictionary, id) => {
+  if(!dictionary?.length)
+    return id
+  const item = dictionary.find(i => i?.id === id)  
+  return item?.name ?? id
+}
 
-export default function WellOperationsEditor({idWell, type}){
+const DatePickerWrapper = ({value, onChange, ...other}) => {
+  return <DatePicker
+    allowClear={false}
+    defaultValue={moment()}
+    value={moment.utc(value).local()}
+    format={format}
+    showTime
+    onChange={(date) => onChange(date)}
+    {...other}
+  />
+}
+
+export default function WellOperationsEditor({idWell, idType}){
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
   const [paginationTotal, setPaginationTotal] = useState(0)
+  const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState([])
   const [operations, setOperations] = useState([])
   const [showLoader, setShowLoader] = useState(false)
+  
+  useEffect(() => invokeWebApiWrapperAsync(
+    async () => {
+      const r = await WellOperationService.getCategories(idWell)
+      setDictionaryOperationCategory(r)
+    }),[idWell])
 
   const updateOperations = () => invokeWebApiWrapperAsync(
     async () => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
       const take = pageNumAndPageSize.pageSize
-      const paginatedOperations = await WellOperationService.getOperations(idWell, type, undefined, undefined, undefined, undefined, skip, take )
-      setOperations(paginatedOperations?.items??[])
+      const paginatedOperations = await WellOperationService.getOperations(idWell, idType, undefined, undefined, undefined, undefined, skip, take )
+      const operations = paginatedOperations?.items ?? []
+      setOperations(operations)
       const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0      
       setPaginationTotal(total)
     },
@@ -59,22 +80,73 @@ export default function WellOperationsEditor({idWell, type}){
     'Не удалось загрузить список операций по скважине'
   )
 
-  useEffect(updateOperations, [idWell, type, pageNumAndPageSize])
+  useEffect(updateOperations, [idWell, idType, pageNumAndPageSize])
 
-  const onAdd = (newOperation) => {
+  const SelectorSectionType = <Select>
+    {dictionarySectionType.map(item =><Option 
+      key={item.id}
+      value={item.id}>
+        {item.name}
+      </Option>)}
+  </Select>
 
+  const SelectorOperationCategory = <Select>
+    {dictionaryOperationCategory.map(item =><Option 
+      key={item.id}
+      value={item.id}>
+        {item.name}
+      </Option>)}
+  </Select>
+
+  const columns = [
+    makeColumn('Конструкция секции','idWellSectionType', {
+      editable:true,
+      input:SelectorSectionType, 
+      width:105,
+      render:(_, record)=>getNameById(dictionarySectionType, record.idWellSectionType)
+    }),
+    makeColumn('Операция','idCategory', {
+      editable:true,
+      input:SelectorOperationCategory, 
+      width:200,
+      render:(_, record)=>getNameById(dictionaryOperationCategory, record.idCategory)
+    }),
+    makeColumn('Доп. инфо','categoryInfo', {editable:true, width:300, input:<TextArea/>}),
+    makeColumn('Глубина забоя','wellDepth', {...numericColumnOptions}),
+    makeColumn('Время начала','startDate', {
+      editable:true, 
+      width:200, 
+      input:<DatePickerWrapper/>,
+      render:(_, record) => moment.utc(record.startDate).local().format(format)
+    }),
+    makeColumn('Часы','durationHours', {...numericColumnOptions}),
+    makeColumn('Комментарий','comment', {editable:true, input:<TextArea/>}),
+  ]
+
+  const onAdd = async (operation) => {
+    operation.idType = idType
+    await WellOperationService.insertRange(idWell, [operation])
+    updateOperations()
   }
 
-  const onEdit= (newOperation) => {
-
+  const onEdit= async (operation) => {
+    if(!operation.id)
+      return
+    operation.idType = idType
+    await WellOperationService.update(idWell, operation.id, operation)
+    updateOperations()
   }
 
-  const onDelete= (newOperation) => {
-
+  const onDelete= async (operation) => {
+    if(!operation.id)
+      return
+    await WellOperationService.delete(idWell, operation.id)
+    updateOperations()
   }
 
   return <LoaderPortal show={showLoader}>
     <EditableTable
+      size='small'
       columns={columns}
       dataSource={operations}
       onRowAdd={onAdd}
@@ -88,6 +160,5 @@ export default function WellOperationsEditor({idWell, type}){
         onChange: (page, pageSize) => setPageNumAndPageSize({current: page, pageSize: pageSize})
       }}
       />
-    {DataListSectionTypes}
   </LoaderPortal> 
 }