141 lines
3.6 KiB
JavaScript
141 lines
3.6 KiB
JavaScript
import { TreeSelect } from 'antd'
|
|
import React, { useEffect, useState, useCallback } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import axios from 'axios'
|
|
import config from '../../../config'
|
|
|
|
import FilamentStockDisplay from './FilamentStockDisplay'
|
|
|
|
const FilamentStockSelect = ({ onChange, filter, useFilter, value }) => {
|
|
const [filamentStocksTreeData, setFilamentStocksTreeData] = useState([])
|
|
const [filamentStocksData, setFilamentStocksData] = useState([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [defaultValue, setDefaultValue] = useState(value)
|
|
|
|
const getFilamentStockTitle = (filamentStock) => {
|
|
return (
|
|
<FilamentStockDisplay filamentStock={filamentStock} showCopy={false} />
|
|
)
|
|
}
|
|
|
|
const fetchFilamentStocksData = async (property, filter) => {
|
|
setLoading(true)
|
|
try {
|
|
const response = await axios.get(`${config.backendUrl}/filamentstocks`, {
|
|
params: {
|
|
...filter,
|
|
property
|
|
},
|
|
headers: {
|
|
Accept: 'application/json'
|
|
},
|
|
withCredentials: true
|
|
})
|
|
setLoading(false)
|
|
return response.data
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
|
|
const generateFilamentStockTreeNodes = useCallback(
|
|
async (node = null, filter = null) => {
|
|
if (!node) {
|
|
return
|
|
}
|
|
|
|
const filamentStockData = await fetchFilamentStocksData(null, filter)
|
|
setFilamentStocksData(filamentStockData)
|
|
|
|
for (const filamentStock of filamentStockData) {
|
|
const newNode = {
|
|
id: filamentStock._id,
|
|
pId: node.id,
|
|
value: filamentStock._id,
|
|
key: filamentStock._id,
|
|
title: getFilamentStockTitle(filamentStock),
|
|
isLeaf: true
|
|
}
|
|
|
|
setFilamentStocksTreeData((prev) => {
|
|
const filtered = prev.filter((node) => node.id !== newNode.id)
|
|
return [...filtered, newNode]
|
|
})
|
|
}
|
|
},
|
|
[]
|
|
)
|
|
|
|
const handleFilamentStocksTreeLoad = useCallback(
|
|
async (node) => {
|
|
if (node) {
|
|
await generateFilamentStockTreeNodes(node)
|
|
} else {
|
|
await generateFilamentStockTreeNodes({ id: 0 })
|
|
}
|
|
},
|
|
[generateFilamentStockTreeNodes]
|
|
)
|
|
|
|
const handleOnChange = (value, selectedOptions) => {
|
|
const filamentStockObject = filamentStocksData.filter(
|
|
(filamentStock) => filamentStock._id === value
|
|
)[0]
|
|
|
|
onChange(filamentStockObject, selectedOptions)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (value?._id != null) {
|
|
setDefaultValue(value)
|
|
}
|
|
}, [value])
|
|
|
|
useEffect(() => {
|
|
if (defaultValue != undefined) {
|
|
const newNode = {
|
|
id: defaultValue._id,
|
|
pId: 0,
|
|
value: defaultValue._id,
|
|
key: defaultValue._id,
|
|
title: getFilamentStockTitle(defaultValue),
|
|
isLeaf: true
|
|
}
|
|
setFilamentStocksTreeData([newNode])
|
|
} else {
|
|
setFilamentStocksTreeData([])
|
|
}
|
|
if (useFilter === true) {
|
|
generateFilamentStockTreeNodes({ id: 0 }, filter)
|
|
} else {
|
|
handleFilamentStocksTreeLoad(null)
|
|
}
|
|
}, [useFilter, defaultValue, filter])
|
|
|
|
return (
|
|
<TreeSelect
|
|
treeDataSimpleMode
|
|
value={defaultValue?._id}
|
|
loadData={handleFilamentStocksTreeLoad}
|
|
treeData={filamentStocksTreeData}
|
|
onChange={handleOnChange}
|
|
loading={loading}
|
|
placeholder='Select a filament stock'
|
|
/>
|
|
)
|
|
}
|
|
|
|
FilamentStockSelect.propTypes = {
|
|
onChange: PropTypes.func.isRequired,
|
|
value: PropTypes.object,
|
|
filter: PropTypes.object,
|
|
useFilter: PropTypes.bool
|
|
}
|
|
|
|
FilamentStockSelect.defaultProps = {
|
|
filter: {},
|
|
useFilter: false
|
|
}
|
|
|
|
export default FilamentStockSelect
|