diff --git a/frontend/components/newProduct/Step3.js b/frontend/components/newProduct/Step3.js
index 0744ebd..024741d 100644
--- a/frontend/components/newProduct/Step3.js
+++ b/frontend/components/newProduct/Step3.js
@@ -1,4 +1,5 @@
import CloseIcon from '@mui/icons-material/Close'
+import EditIcon from '@mui/icons-material/Edit'
import {
Alert,
Box,
@@ -9,11 +10,10 @@ import {
Typography
} from '@mui/material'
import IconButton from '@mui/material/IconButton'
-import EditIcon from '@mui/icons-material/Edit'
import InputAdornment from '@mui/material/InputAdornment'
import MenuItem from '@mui/material/MenuItem'
import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
import { contentAssociation, getProductContents } from '../../services/product'
import Loading from '../Loading'
@@ -53,6 +53,8 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
const [usedUcds, setUsedUcds] = React.useState([])
const [isLoading, setLoading] = useState(false)
const [formError, setFormError] = React.useState('')
+ const [editableFields, setEditableFields] = useState({})
+ const editFieldRefs = useRef({})
const loadContents = React.useCallback(async () => {
setLoading(true)
@@ -93,7 +95,6 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
if (pc.ucd === value) {
return
}
-
// setLoading(true)
contentAssociation(pc.id, value)
.then(() => {
@@ -102,20 +103,34 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
})
.catch(res => {
setLoading(false)
-
if (res.response.status === 500) {
catchFormError(res.response.data)
}
})
}
+
const handleMouseDownPassword = event => {
event.preventDefault()
}
- const createSelect = (pc) => {
+
+ const handleEditField = (pc, value) => {
+ setEditableFields(prevState => ({
+ ...prevState,
+ [pc.column_name]: value
+ }))
+ }
+
+ const handleCancelEdit = pc => {
+ const updatedEditableFields = { ...editableFields }
+ delete updatedEditableFields[pc.column_name]
+ setEditableFields(updatedEditableFields)
+ }
+
+ const createSelect = pc => {
// Check Available Ucds and Current UCD when pc.ucd is not null
const avoptions = []
let currentUcd = null
- ucds.forEach((ucd) => {
+ ucds.forEach(ucd => {
if (usedUcds.indexOf(ucd.value) === -1 || ucd.value === pc.ucd) {
avoptions.push(ucd)
}
@@ -123,9 +138,9 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
currentUcd = ucd
}
})
-
+
const isOptionSelected = pc.ucd !== null;
-
+
return (
{isOptionSelected ? (
@@ -144,32 +159,56 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
/>
) : (
<>
- onChangeUcd(pc, e.target.value)}
- >
- {avoptions.map((ucd) => (
-
+ ) : (
+
+ onChangeUcd(pc, e.target.value)}
+ >
+ {avoptions.map(ucd => (
+
+ ))}
+
+ handleEditField(pc, '')}
+ onMouseDown={handleMouseDownPassword}
>
- {ucd.name}
-
- ))}
-
- onChangeUcd(pc, pc.ucd || "")}
- onMouseDown={handleMouseDownPassword}
- >
-
-
+
+
+
+ )}
>
)}
)
}
-
+
const createFields = pc => {
return (