diff --git a/backend/core/views/product_content.py b/backend/core/views/product_content.py index f1c0113..18b6648 100644 --- a/backend/core/views/product_content.py +++ b/backend/core/views/product_content.py @@ -1,8 +1,6 @@ from core.models import ProductContent from core.serializers import ProductContentSerializer from rest_framework import viewsets -from rest_framework.response import Response -from rest_framework.decorators import action class ProductContentViewSet(viewsets.ModelViewSet): queryset = ProductContent.objects.all() @@ -13,17 +11,3 @@ class ProductContentViewSet(viewsets.ModelViewSet): "order", ] ordering = ["id"] - - @action(detail=True, methods=['patch']) - def update_alias(self, request, pk=None): - product_content = self.get_object() - alias = request.data.get('alias') - - if alias is not None: - product_content.alias = alias - product_content.save() - - serializer = self.get_serializer(product_content) - return Response(serializer.data) - else: - return Response({'error': 'Alias value is required.'}, status=400) diff --git a/backend/pzserver/urls.py b/backend/pzserver/urls.py index 6276584..9bbc18f 100644 --- a/backend/pzserver/urls.py +++ b/backend/pzserver/urls.py @@ -43,7 +43,6 @@ route.register(r"products", ProductViewSet, basename="products") route.register(r"product-contents", ProductContentViewSet, basename="product_contents") route.register(r"product-files", ProductFileViewSet, basename="product_files") -route.register(r"product-contents", ProductContentViewSet, basename="product_contents") from rest_framework.authtoken import views diff --git a/frontend/components/newProduct/Step3.js b/frontend/components/newProduct/Step3.js index 8d9b29b..4b6e041 100644 --- a/frontend/components/newProduct/Step3.js +++ b/frontend/components/newProduct/Step3.js @@ -49,22 +49,25 @@ const ucds = [ } ] export function InputReadOnly({ name, value, onClear }) { - return ( - - - - - ) - } : null} + InputProps={ + onClear !== undefined + ? { + endAdornment: ( + + + + + + ) + } + : null + } /> ) @@ -78,7 +81,7 @@ InputReadOnly.propTypes = { export function InputUcd({ pc, options, onChange, onChangeInputType }) { const [value, setValue] = useState('') - const handleChange = (e) => { + const handleChange = e => { setValue(e.target.value) onChange(pc, e.target.value) } @@ -87,28 +90,15 @@ export function InputUcd({ pc, options, onChange, onChangeInputType }) { } return ( - - + + {options.map(ucd => ( - + {ucd.name} ))} - + @@ -123,7 +113,6 @@ InputUcd.propTypes = { } export function InputAlias({ pc, onChange, onChangeInputType }) { - const [value, setValue] = useState('') // Using lodash debounce to Delay search by 600ms @@ -134,7 +123,7 @@ export function InputAlias({ pc, onChange, onChangeInputType }) { [] ) - const handleChange = (e) => { + const handleChange = e => { setValue(e.target.value) delayedEdit(pc, e.target.value) } @@ -150,12 +139,8 @@ export function InputAlias({ pc, onChange, onChangeInputType }) { return ( - + ) }} - > - - + > + @@ -181,18 +163,15 @@ export function InputAlias({ pc, onChange, onChangeInputType }) { InputAlias.propTypes = { pc: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, - onChangeInputType: PropTypes.func.isRequired, + onChangeInputType: PropTypes.func.isRequired } - export default function NewProductStep3({ productId, onNext, onPrev }) { - const [productColumns, setProductColumns] = React.useState([]) const [usedUcds, setUsedUcds] = React.useState([]) const [isLoading, setLoading] = useState(false) const [formError, setFormError] = React.useState('') - const [inputsType, setInputsType] = useState([]) - + const [inputsType] = useState([]) const loadContents = React.useCallback(async () => { setLoading(true) @@ -249,23 +228,20 @@ export default function NewProductStep3({ productId, onNext, onPrev }) { onPrev(productId) } - const onClear = (pc) => { - console.log("onClear: ", pc) + const onClear = pc => { changeProductContent(pc, null, null) } const onSelectUcd = (pc, ucd) => { - console.log("onSelectUcd: ", pc, ucd) changeProductContent(pc, ucd, getAliasByUcd(ucd)) } const onChangeAlias = (pc, alias) => { - console.log("onChangeAlias: ", pc, alias) changeProductContent(pc, null, alias) } - const getAliasByUcd = (ucd) => { - const result = ucds.find(o => o.value === ucd); + const getAliasByUcd = ucd => { + const result = ucds.find(o => o.value === ucd) return result ? result.name : null } @@ -288,24 +264,25 @@ export default function NewProductStep3({ productId, onNext, onPrev }) { return true } - const handleChangeInputType = column_name => { - if (inputsType.indexOf(column_name) === -1) { - inputsType.push(column_name) + function handleChangeInputType(columnName) { + if (inputsType.indexOf(columnName) === -1) { + inputsType.push(columnName) } else { - inputsType.splice(inputsType.indexOf(column_name), 1); + inputsType.splice(inputsType.indexOf(columnName), 1) } loadContents(productId) } const createFields = pc => { - const avoptions = getAvailableUcds() if (pc.ucd !== null || pc.alias !== null) { return ( onClear(pc)} /> + value={pc.ucd !== null ? getAliasByUcd(pc.ucd) : pc.alias} + onClear={() => onClear(pc)} + /> ) } @@ -326,11 +303,11 @@ export default function NewProductStep3({ productId, onNext, onPrev }) { pc={pc} options={avoptions} onChange={onSelectUcd} - onChangeInputType={handleChangeInputType} /> + onChangeInputType={handleChangeInputType} + /> ) } - const catchFormError = data => { let msg = 'There was a failure, please try again later, if the problem persists, please contact support.' @@ -370,7 +347,6 @@ export default function NewProductStep3({ productId, onNext, onPrev }) { autoComplete="off" > {productColumns.map(pc => { - return ( theme.zIndex.drawer + 1 }} - open={isLoading} - > - - - ) -} -InputUcd.propTypes = { - isLoading: PropTypes.bool.isRequired -} - -export default function InputAlias({ }) { - - return ( - theme.zIndex.drawer + 1 }} - open={isLoading} - > - - - ) -} -InputAlias.propTypes = { - isLoading: PropTypes.bool.isRequired -} - - -export default function NewProductStep3({ productId, onNext, onPrev }) { - const ucds = [ - { - name: 'ID', - value: 'meta.id;meta.main' - }, - { - name: 'RA', - value: 'pos.eq.ra;meta.main' - }, - { - name: 'Dec', - value: 'pos.eq.dec;meta.main' - }, - { - name: 'z', - value: 'src.redshift' - }, - { - name: 'z_err', - value: 'stat.error;src.redshift' - }, - { - name: 'z_flag', - value: 'stat.rank' - }, - { - name: 'survey', - value: 'meta.curation' - } - ] - - const [productColumns, setProductColumns] = React.useState([]) - 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) - try { - const response = await getProductContents(productId) - setProductColumns(response.results) - - // const aliases = {} - // response.results.forEach(row => { - // if (row.alias) { - // aliases[row.column_name] = row.alias - // } - // }) - // setEditableFields(aliases) - - setLoading(false) - } catch (error) { - setLoading(false) - if (error.response && error.response.status === 500) { - catchFormError(error.response.data) - } - } - }, [productId]) - - useEffect(() => { - loadContents() - }, [loadContents]) - - useEffect(() => { - const useducds = [] - productColumns.forEach(row => { - if (row.ucd !== null) { - useducds.push(row.ucd) - } - }) - setUsedUcds(useducds) - }, [productColumns]) - - const handleSubmit = () => { - onNext(productId) - } - const handlePrev = () => { - onPrev(productId) - } - - const onSelectUcd = (pc, value) => { - const ucd = ucds.find(o => o.value === value); - onChangeProductContent(pc, ucd.value, ucd.name) - } - - // Using lodash debounce to Delay search by 600ms - // Exemplo: https://www.upbeatcode.com/react/how-to-use-lodash-in-react/ - // eslint-disable-next-line react-hooks/exhaustive-deps - const delayedEdit = useCallback( - debounce((pc, alias) => onChangeProductContent(pc, null, alias), 600), - [] - ) - - const onChangeAlias = (pc, alias) => { - // console.log('onChangeAlias: ', pc.column_name, value) - delayedEdit(pc, alias) - } - - const onChangeProductContent = (pc, ucd, alias) => { - if (pc.ucd === ucd && pc.alias === alias) { - return - } - // setLoading(true) - contentAssociation(pc.id, ucd, alias) - .then(() => { - // setLoading(false) - loadContents(productId) - }) - .catch(res => { - setLoading(false) - if (res.response.status === 500) { - catchFormError(res.response.data) - } - }) - } - - const handleEdit = (pc) => { - setEditableFields(prevState => ({ - ...prevState, - [pc.column_name]: pc.value - })) - } - - const handleCancelEdit = pc => { - console.log("handleCancelEdit: ", pc.column_name) - // const updatedEditableFields = { ...editableFields } - // delete updatedEditableFields[pc.column_name] - // setEditableFields(updatedEditableFields) - onChangeProductContent(pc, null, null) - } - - const createSelect = pc => { - // Check Available Ucds and Current UCD when pc.ucd is not null - const avoptions = [] - let currentUcd = null - ucds.forEach(ucd => { - if (usedUcds.indexOf(ucd.value) === -1 || ucd.value === pc.ucd) { - avoptions.push(ucd) - } - if (ucd.value === pc.ucd) { - currentUcd = ucd - } - }) - - const isOptionSelected = pc.ucd !== null - - return ( - - {isOptionSelected ? ( - - onChangeProductContent(pc, null, null)}> - - - - ), - }} - /> - ) : ( - <> - {pc.column_name in editableFields ? ( - - onChangeAlias(pc, e.target.value)} - // onBlur={(e) => { - // console.log("onBlur: ", `${pc.column_name}:${e.target.value}`) - // // console.log(`${pc.column_name}: ${editableFields[pc.column_name]}`) - // // onChangeAlias(pc, editableFields[pc.column_name]) - // }} - // onKeyPress={event => { - // if (event.key === 'Enter') { - // console.log("onKeyPress Enter: ", `${pc.column_name}: ${editableFields[pc.column_name]}`) - // editFieldRefs.current[pc.column_name].blur() - // } - // }} - InputProps={{ - endAdornment: ( - - handleCancelEdit(pc)}> - - - - ) - }} - // inputRef={ref => { - // editFieldRefs.current[pc.column_name] = ref - // }} - autoFocus - /> - - ) : ( - - onSelectUcd(pc, e.target.value)} - // onChange={e => onChangeProductContent(pc, e.target.value)} - > - {avoptions.map(ucd => ( - - {ucd.name} - - ))} - - handleEdit(pc)} - > - - - - )} - - )} - - ) - } - - const createFields = pc => { - return ( - - - - - {createSelect(pc)} - - ) - } - - const catchFormError = data => { - let msg = - 'There was a failure, please try again later, if the problem persists, please contact support.' - if (data.error) { - msg = data.error - } - setFormError(msg) - } - - const handleFormError = () => { - return ( - - {formError} - - ) - } - - return ( - - {isLoading && } - - Please associate the column names of your file with those expected by - the tool. - - - It is okay to leave columns unassociated. - - - Skip this step if the data is not tabular. - - - - {productColumns.map(pc => { - return createFields(pc) - })} - - {formError !== '' && handleFormError()} - - - - - - - ) -} - -NewProductStep3.propTypes = { - productId: PropTypes.number, - onNext: PropTypes.func.isRequired, - onPrev: PropTypes.func.isRequired -}