Add SelectFromDictionary

src/components/Table/SelectFromDictionary.tsx

@@ -0,0 +1,23 @@
+import {Select} from 'antd'
+
+const { Option } = Select
+
+interface StandardComponentProps {
+  dictionary: Map<any, any>,
+}
+
+export const SelectFromDictionary = ({dictionary, ...other}: StandardComponentProps) =>{
+  const options: any[] = []
+  dictionary.forEach((value, key) => {
+    options.push(
+      <Option 
+        key={key}
+        value={key}>
+        {value}
+      </Option>)
+  })
+
+  return <Select {...other}>
+  {options}
+</Select>
+}

src/components/Table/index.ts

@@ -1,6 +1,7 @@
+export { Table } from 'antd'
 export { EditableTable } from './EditableTable'
 export { DatePickerWrapper } from './DatePickerWrapper'
-export { Table } from 'antd'
+export { SelectFromDictionary } from './SelectFromDictionary'
 
 export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
 export const formatDate='YYYY.MM.DD HH:mm'
@@ -80,4 +81,4 @@ export const makePaginationObject = (paginationContainer:PaginationContainer, ..
     total: paginationContainer.count ?? paginationContainer.items?.length ?? 0,
     current: page,
   }
-}
+}

src/pages/WellOperations/WellOperationsEditor.jsx

@@ -1,13 +1,12 @@
 import { useState, useEffect } from 'react'
-import { Input, Select } from 'antd'
+import { Input } from 'antd'
 import moment from 'moment'
-import { EditableTable, DatePickerWrapper, numericColumnOptions, makeColumn } from "../../components/Table"
+import { EditableTable, DatePickerWrapper, SelectFromDictionary, numericColumnOptions, makeColumn } from "../../components/Table"
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { WellOperationService} from '../../services/api'
-import { dictionarySectionType, getNameById } from './dictionary'
+import { dictionarySectionType, getByKeyOrReturnKey } from './dictionary'
 
-const { Option } = Select
 const { TextArea } = Input;
 
 const basePageSize = 160;
@@ -16,14 +15,16 @@ const format='YYYY.MM.DD HH:mm'
 export const WellOperationsEditor = ({idWell, idType}) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
   const [paginationTotal, setPaginationTotal] = useState(0)
-  const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState([])
+  const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState(new Map())
   const [operations, setOperations] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
-      const r = await WellOperationService.getCategories(idWell)
+      const categories = await WellOperationService.getCategories(idWell)
-      setDictionaryOperationCategory(r)
+      const dictCategories = new Map()
+      categories?.forEach((item) => dictCategories.set(item.id, item.name))
+      setDictionaryOperationCategory(dictCategories)
     }),[idWell])
 
   const updateOperations = () => invokeWebApiWrapperAsync(
@@ -42,34 +43,18 @@ export const WellOperationsEditor = ({idWell, idType}) => {
 
   useEffect(updateOperations, [idWell, idType, pageNumAndPageSize])
 
-  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, 
+      input:<SelectFromDictionary dictionary={dictionarySectionType}/>,
-      width:105,
+      width:110,
-      render:(_, record)=>getNameById(dictionarySectionType, record.idWellSectionType)
+      render:(_, record)=>getByKeyOrReturnKey(dictionarySectionType, record.idWellSectionType)
     }),
     makeColumn('Операция','idCategory', {
       editable:true,
-      input:SelectorOperationCategory, 
+      input:<SelectFromDictionary dictionary={dictionaryOperationCategory}/>, 
       width:200,
-      render:(_, record)=>getNameById(dictionaryOperationCategory, record.idCategory)
+      render:(_, record)=>getByKeyOrReturnKey(dictionaryOperationCategory, record.idCategory)
     }),
     makeColumn('Доп. инфо','categoryInfo', {editable:true, width:300, input:<TextArea/>}),
     makeColumn('Глубина забоя','wellDepth', numericColumnOptions),

src/pages/WellOperations/dictionary.js

@@ -1,15 +1,14 @@
-export const getNameById = (dictionary, id) => {
+export const dictionarySectionType = new Map([
-  if(!dictionary?.length)
+  [1, 'Пилотный ствол'],
-    return id
+  [2, 'Направление'],
-  const item = dictionary.find(i => i?.id === id)  
+  [3, 'Кондуктор'],
-  return item?.name ?? id
+  [4, 'Эксплуатационная колонна'],
-}
+  [5, 'Транспортный ствол'],
+  [6, 'Хвостовик'],
+])
 
-export const dictionarySectionType = [
+export const getByKeyOrReturnKey = (dictionary, key) => {
-  {id:1, name:'Пилотный ствол'},
+  if(!dictionary)
-  {id:2, name:'Направление'},
+    return key
-  {id:3, name:'Кондуктор'},
+  return dictionary.get(key) ?? key
-  {id:4, name:'Эксплуатационная колонна'},
+}
-  {id:5, name:'Транспортный ствол'},
-  {id:6, name:'Хвостовик'},
-]