Skip to content

Commit

Permalink
Query Node Editor fixes (#97)
Browse files Browse the repository at this point in the history 
* QueryNodeEditor related fixes

* Fix FormQueryNodeEditor being recreated on every edit
  • Loading branch information
@rs22
rs22 authored and Robert Schmid committed Mar 27, 2018
1 parent 0e54ff6 commit 94941d2
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 216 deletions.
5 changes: 3 additions & 2 deletions frontend/lib/js/api/apiHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,9 @@ export const transformElementsToApi = (conceptGroup) => conceptGroup.map(concept
: [];

return {
id: concept.id,
type: 'CONCEPT',
ids: concept.ids,
type: 'CONCEPT_LIST',
label: concept.label,
tables,
};
});
Expand Down
250 changes: 123 additions & 127 deletions frontend/lib/js/external-forms/form-concept-group/FormConceptGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ import {
CATEGORY_TREE_NODE
} from '../../common/constants/dndTypes';

import {
createConnectedFormQueryNodeEditor
} from '../form-query-node-editor';
import { FormQueryNodeEditor } from '../form-query-node-editor';

import FormConceptNode from './FormConceptNode';
import FormConceptNodeDropzone from './FormConceptNodeDropzone';
Expand Down Expand Up @@ -181,130 +179,128 @@ const switchFilterMode = (value, valueIdx, conceptIdx, tableIdx, filterIdx, mode
];
}

export const FormConceptGroup = (props: PropsType) => {
const FormQueryNodeEditor = createConnectedFormQueryNodeEditor(props.formType, props.name);

return (
<div className="externalForms__concept-group">
<DropzoneList
label={props.label}
className="externalForms__dropzone-list"
itemClassName="externalForms__dropzone-list__item"
dropzoneClassName="externalForms__dropzone"
dropzoneText={props.attributeDropzoneText}
acceptedDropTypes={[CATEGORY_TREE_NODE]}
onDelete={(i) => props.input.onChange(removeValue(props.input.value, i))}
onDrop={(dropzoneProps, monitor) => {
const item = monitor.getItem();
export const FormConceptGroup = (props: PropsType) => (
<div className="externalForms__concept-group">
<DropzoneList
label={props.label}
className="externalForms__dropzone-list"
itemClassName="externalForms__dropzone-list__item"
dropzoneClassName="externalForms__dropzone"
dropzoneText={props.attributeDropzoneText}
acceptedDropTypes={[CATEGORY_TREE_NODE]}
onDelete={(i) => props.input.onChange(removeValue(props.input.value, i))}
onDrop={(dropzoneProps, monitor) => {
const item = monitor.getItem();

return props.input.onChange(
addConcept(
addValue(props.input.value, props.newValue),
props.input.value.length, // Assuming the last index has increased after addValue
item
)
);
}}
items={
props.input.value.map((row, i) =>
<div>
{ props.renderRowPrefix ? props.renderRowPrefix(props.input, row, i) : null }
<DynamicInputGroup
className="externalForms__concept-group__input-group"
key={i}
onAddClick={() => props.input.onChange(addConcept(props.input.value, i, null))}
onRemoveClick={j => props.input.onChange(
props.input.value && props.input.value[i].concepts.length === 1
? removeValue(props.input.value, i)
: removeConcept(props.input.value, i, j))
}
items={
row.concepts.map((concept, j) =>
concept
? <FormConceptNode
key={j}
valueIdx={i}
conceptIdx={j}
conceptNode={concept}
name={props.name}
hasActiveFilters={nodeHasActiveFilters(concept)}
onFilterClick={() =>
props.input.onChange(
setConceptProperties(props.input.value, i, j, { isEditing: true })
)
}
/>
: <FormConceptNodeDropzone
dropzoneText={props.conceptDropzoneText}
onDrop={(dropzoneProps, monitor) => {
const item = monitor.getItem();

return props.input.onChange(setConcept(props.input.value, i, j, item));
}}
/>
)
}
/>
</div>
)
}
/>
<FormQueryNodeEditor
datasetId={props.datasetId}
onCloseModal={(valueIdx, conceptIdx) =>
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, { isEditing: false })
)
}
onUpdateLabel={(valueIdx, conceptIdx, label) =>
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, { label })
)
}
onDropConcept={(valueIdx, conceptIdx, concept) => {
const node = props.input.value[valueIdx].concepts[conceptIdx];
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, {
ids: [...concept.ids, ...node.ids]
})
)
}}
onRemoveConcept={(valueIdx, conceptIdx, conceptId) => {
const node = props.input.value[valueIdx].concepts[conceptIdx];
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, {
ids: node.ids.filter(id => id !== conceptId)
})
return props.input.onChange(
addConcept(
addValue(props.input.value, props.newValue),
props.input.value.length, // Assuming the last index has increased after addValue
item
)
}}
onToggleTable={(valueIdx, conceptIdx, tableIdx, isExcluded) =>
props.input.onChange(
toggleTable(props.input.value, valueIdx, conceptIdx, tableIdx, isExcluded)
)
}
onSetFilterValue={(valueIdx, conceptIdx, tableIdx, filterIdx, filterValue) =>
props.input.onChange(
setFilterValue(
props.input.value,
valueIdx,
conceptIdx,
tableIdx,
filterIdx,
filterValue
)
)
}
onSwitchFilterMode={(valueIdx, conceptIdx, tableIdx, filterIdx, mode) =>
props.input.onChange(
switchFilterMode(props.input.value, valueIdx, conceptIdx, tableIdx, filterIdx, mode)
)
}
onResetAllFilters={(valueIdx, conceptIdx) =>
props.input.onChange(
resetAllFilters(props.input.value, valueIdx, conceptIdx)
);
}}
items={
props.input.value.map((row, i) =>
<div>
{ props.renderRowPrefix ? props.renderRowPrefix(props.input, row, i) : null }
<DynamicInputGroup
className="externalForms__concept-group__input-group"
key={i}
onAddClick={() => props.input.onChange(addConcept(props.input.value, i, null))}
onRemoveClick={j => props.input.onChange(
props.input.value && props.input.value[i].concepts.length === 1
? removeValue(props.input.value, i)
: removeConcept(props.input.value, i, j))
}
items={
row.concepts.map((concept, j) =>
concept
? <FormConceptNode
key={j}
valueIdx={i}
conceptIdx={j}
conceptNode={concept}
name={props.name}
hasActiveFilters={nodeHasActiveFilters(concept)}
onFilterClick={() =>
props.input.onChange(
setConceptProperties(props.input.value, i, j, { isEditing: true })
)
}
/>
: <FormConceptNodeDropzone
dropzoneText={props.conceptDropzoneText}
onDrop={(dropzoneProps, monitor) => {
const item = monitor.getItem();

return props.input.onChange(setConcept(props.input.value, i, j, item));
}}
/>
)
}
/>
</div>
)
}
/>
<FormQueryNodeEditor
formType={props.formType}
fieldName={props.name}
datasetId={props.datasetId}
onCloseModal={(valueIdx, conceptIdx) =>
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, { isEditing: false })
)
}
onUpdateLabel={(valueIdx, conceptIdx, label) =>
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, { label })
)
}
onDropConcept={(valueIdx, conceptIdx, concept) => {
const node = props.input.value[valueIdx].concepts[conceptIdx];
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, {
ids: [...concept.ids, ...node.ids]
})
)
}}
onRemoveConcept={(valueIdx, conceptIdx, conceptId) => {
const node = props.input.value[valueIdx].concepts[conceptIdx];
props.input.onChange(
setConceptProperties(props.input.value, valueIdx, conceptIdx, {
ids: node.ids.filter(id => id !== conceptId)
})
)
}}
onToggleTable={(valueIdx, conceptIdx, tableIdx, isExcluded) =>
props.input.onChange(
toggleTable(props.input.value, valueIdx, conceptIdx, tableIdx, isExcluded)
)
}
onSetFilterValue={(valueIdx, conceptIdx, tableIdx, filterIdx, filterValue) =>
props.input.onChange(
setFilterValue(
props.input.value,
valueIdx,
conceptIdx,
tableIdx,
filterIdx,
filterValue
)
}
/>
</div>
);
};
)
}
onSwitchFilterMode={(valueIdx, conceptIdx, tableIdx, filterIdx, mode) =>
props.input.onChange(
switchFilterMode(props.input.value, valueIdx, conceptIdx, tableIdx, filterIdx, mode)
)
}
onResetAllFilters={(valueIdx, conceptIdx) =>
props.input.onChange(
resetAllFilters(props.input.value, valueIdx, conceptIdx)
)
}
/>
</div>
);

0 comments on commit 94941d2

Please sign in to comment.