\n);\n\nElementRowColumn.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string\n};\n\nexport default ElementRowColumn;\n","import cx from \"classnames\";\nimport * as PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { ElementShape } from \"./shapes\";\nimport AccordionArrow from \"./AccordionArrow\";\nimport ElementRowColumn from \"./ElementRowColumn\";\n\nclass ElementRowDetails extends React.Component {\n static propTypes = {\n element: ElementShape.isRequired,\n open: PropTypes.bool.isRequired\n };\n\n /**\n * Gets the content to render for the given \"column\" of this row's `Element`.\n *\n * If no `content` is provided, `columnName` is assumed to be a key for a property\n * on this components `Element` prop, and used as such to get a value.\n *\n * @param {string} columnName\n * @param {string|React.ReactNode} content\n *\n * @return {JSX}\n */\n getElementColumnRenderContent(\n columnName,\n content = this.props.element[columnName]\n ) {\n return (\n \n {content}\n \n );\n }\n\n /**\n * Creates a dasherised HTML class to identify the element\n *\n * @return {string}\n */\n getElementRowClass() {\n return `record-row--${this.props.element.name\n .replace(/\\s+/g, \"-\")\n .toLowerCase()}`;\n }\n\n render() {\n // Element Name, the Element Display Order number.\n return (\n \n {this.getElementColumnRenderContent(\"name\")}\n {this.getElementColumnRenderContent(\"order_within_parent\")}\n \n \n );\n }\n}\n\nexport default ElementRowDetails;\n","import cx from \"classnames\";\nimport * as PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst OrderControls = props => (\n
\n \n \n
\n);\n\nOrderControls.propTypes = {\n className: PropTypes.string,\n onMoveUpArrowClick: PropTypes.func.isRequired,\n onMoveDownArrowClick: PropTypes.func.isRequired\n};\n\nexport default OrderControls;\n","import * as PropTypes from \"prop-types\";\nimport React, { Component } from \"react\";\nimport Collapsible from \"react-collapsible\";\nimport { GroupedElementShape } from \"../../shapes\";\nimport ElementRowDetails from \"../../ElementRowDetails\";\nimport ElementRowRequirements from \"../ElementRowRequirements/ElementRowRequirements\";\n\nclass ElementRow extends Component {\n state = {\n open: false\n };\n\n /**\n * Handles when the `Collapsible` starts opening.\n */\n handleCollapsibleOpening = () => this.setState({ open: true });\n\n /**\n * Handles when the `Collapsible` starts closing.\n */\n handleCollapsibleClosing = () => this.setState({ open: false });\n\n render() {\n return (\n \n }\n\n onOpening={this.handleCollapsibleOpening}\n onClosing={this.handleCollapsibleClosing}\n >\n \n \n );\n }\n}\n\nElementRow.propTypes = {\n groupedElement: GroupedElementShape.isRequired,\n rowsPerHeader: PropTypes.number,\n onMoveRequirementUp: PropTypes.func.isRequired,\n onMoveRequirementDown: PropTypes.func.isRequired,\n onMoveQuestionUp: PropTypes.func.isRequired,\n onMoveQuestionDown: PropTypes.func.isRequired\n};\n\nElementRow.defaultProps = {\n rowsPerHeader: 0\n};\n\nexport default ElementRow;\n","import * as PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { GroupedRequirementShape } from \"../../shapes\";\nimport RequirementHeader from \"../RequirementHeader/RequirementHeader\";\nimport RequirementRow from \"../RequirementRow/RequirementRow\";\n\nclass ElementRowRequirements extends React.Component {\n static propTypes = {\n groupedRequirements: PropTypes.arrayOf(GroupedRequirementShape).isRequired,\n rowsPerHeader: PropTypes.number,\n onMoveRequirementUp: PropTypes.func.isRequired,\n onMoveRequirementDown: PropTypes.func.isRequired,\n onMoveQuestionUp: PropTypes.func.isRequired,\n onMoveQuestionDown: PropTypes.func.isRequired\n };\n\n static defaultProps = {\n rowsPerHeader: 0\n };\n\n /**\n * Checks if a `RequirementHeader` component should be added to the list of `RequirementRow`s,\n * based on the index of the current `Requirement` being rendered, compared with the value of `rowsPerHeader`.\n *\n * @param {number} index\n *\n * @return {boolean}\n */\n shouldAddRequirementRowHeader(index) {\n if (this.props.rowsPerHeader === false) {\n return false;\n }\n\n if (index === 0) {\n return true;\n }\n\n return index % this.props.rowsPerHeader === 0;\n }\n\n render() {\n return (\n
\n );\n }\n}\n\nexport default ElementRowRequirements;\n","import * as PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { ElementShape, QuestionShape, RequirementShape } from \"../shapes\";\nimport ElementRow from \"./ElementRow/ElementRow\";\n\nclass OrderManager extends React.Component {\n static propTypes = {\n elements: PropTypes.arrayOf(ElementShape).isRequired,\n requirements: PropTypes.arrayOf(RequirementShape).isRequired,\n questions: PropTypes.arrayOf(QuestionShape).isRequired\n };\n\n state = {\n elements: this.props.elements,\n requirements: this.props.requirements,\n questions: this.props.questions\n };\n\n /**\n * Handles when a `Requirement` is moved up.\n */\n handleMoveRequirementUp = ({ requirement }) => this.moveRequirementOnState(requirement, -1);\n\n /**\n * Handles when a `Requirement` is moved down.\n */\n handleMoveRequirementDown = ({ requirement }) => this.moveRequirementOnState(requirement, +1);\n\n /**\n * Handles when a `Question` is moved up.\n */\n handleMoveQuestionUp = ({ question }) => this.moveQuestionOnState(question, -1);\n\n /**\n * Handles when a `Question` is moved down.\n */\n handleMoveQuestionDown = ({ question }) => this.moveQuestionOnState(question, +1);\n\n /**\n * @inheritDoc\n *\n * @override\n */\n componentDidMount() {\n /*\n Submission is done by mapping each question & requirement into an input,\n with the name being the record type & id, & the value being their position.\n\n The naming structure should result in a `params` containing two hashes,\n named `questions` & `requirements`, with the key being the record id, like so:\n\n {\n \"questions\" => { \"1\" => \"1\", \"2\" => \"2\", \"3\" => \"1\", ... },\n \"requirements\" => { \"1\" => \"1\", \"2\" => \"2\", \"3\" => \"3\", ... }\n }\n */\n $(\"#save-order-form\").on(\"submit\", event =>\n $(event.target)\n .append(\n ...this.state.requirements.map(requirement =>\n $(\"\")\n .attr(\"name\", `requirements[${requirement.id}]`)\n .attr(\"value\", JSON.stringify({ order_within_parent: requirement.order_within_parent, edited: requirement[\"edited\"]}))\n .attr(\"type\", \"hidden\")\n ),\n ...this.state.questions.map(question =>\n $(\"\")\n .attr(\"name\", `questions[${question.id}]`)\n .attr(\"value\", JSON.stringify({ order_within_parent: question.order_within_parent, edited: question[\"edited\"]}))\n .attr(\"type\", \"hidden\")\n )\n )\n );\n\n /*\n When `#discard-order-button` is clicked, we reset everything by just\n copying the props to the state, since they should be structurally 1:1.\n */\n $(\"#discard-order-button\").on(\"click\", () => this.setState({ ...this.props }));\n }\n\n /**\n * Gets all the `Question`s that belong to the given `requirement` from the `state`.\n *\n * @param {Object} requirement\n *\n * @return {Array