handleChange(a)}\r\n />\r\n )\r\n}\r\n","import React from 'react'\r\n\r\nconst StepList = props => {\r\n return (\r\n \r\n {\r\n props.contentData &&\r\n props.contentData.steps.map((el, i) => {\r\n return
props.controller.unsafeSetStepIndex(i)}>
{(props.moduleIndex >= 10 ? props.moduleIndex : '0' + props.moduleIndex) + '' + (i >= 10 ? i : '0' + i)}{` ${el.type || ''}`}\r\n
\r\n
\r\n
\r\n
\r\n \r\n })\r\n }\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default HTMLField","import React, {useState, useEffect} from 'react'\r\nimport _ from 'lodash'\r\nimport HTMLField from './HTMLField'\r\n\r\nconst StepEditForm = props => {\r\n //content comes from AJAX load, step is based on selectedStep props\r\n const [commitStatus, setCommitStatus] = useState('not-started');\r\n const [openStatus, setOpenStatus] = useState({});\r\n\r\n const step = ((props.contentData || {}).steps || [])[props.stepIndex];\r\n\r\n\r\n const setValue = (propertyPath, value, obj) => {\r\n console.log('setting', propertyPath, obj)\r\n\r\n // https://medium.com/data-scraper-tips-tricks/safely-read-write-in-deeply-nested-objects-js-a1d9ddd168c6\r\n\r\n // this is a super simple parsing, you will want to make this more complex to handle correctly any path\r\n // it will split by the dots at first and then simply pass along the array (on next iterations)\r\n let properties = Array.isArray(propertyPath) ? propertyPath : propertyPath.split(\".\")\r\n\r\n // Not yet at the last property so keep digging\r\n if (properties.length > 1) {\r\n // The property doesn't exists OR is not an object (and so we overwritte it) so we create it\r\n if (!obj.hasOwnProperty(properties[0]) || typeof obj[properties[0]] !== \"object\") obj[properties[0]] = {}\r\n // We iterate.\r\n return setValue(properties.slice(1), value, obj[properties[0]])\r\n // This is the last property - the one where to set the value\r\n } else {\r\n // We set the value to the last property\r\n obj[properties[0]] = value\r\n return true // this is the end\r\n }\r\n\r\n }\r\n\r\n const getValue = (propertyPath, obj) => {\r\n console.log('searching', propertyPath, obj)\r\n // https://medium.com/data-scraper-tips-tricks/safely-read-write-in-deeply-nested-objects-js-a1d9ddd168c6\r\n\r\n // this is a super simple parsing, you will want to make this more complex to handle correctly any path\r\n // it will split by the dots at first and then simply pass along the array (on next iterations)\r\n let properties = Array.isArray(propertyPath) ? propertyPath : propertyPath.split(\".\")\r\n\r\n // Not yet at the last property so keep digging\r\n if (properties.length > 1) {\r\n // The property doesn't exists OR is not an object (and so we overwritte it) so we create it\r\n if (!obj.hasOwnProperty(properties[0]) || typeof obj[properties[0]] !== \"object\") obj[properties[0]] = {}\r\n // We iterate.\r\n return getValue(properties.slice(1), obj[properties[0]])\r\n // This is the last property - the one where to set the value\r\n } else {\r\n return obj[properties[0]] // this is the end\r\n }\r\n\r\n }\r\n\r\n const generateInputAndLabel = (data, key) => {\r\n return \r\n \r\n {genericInput(data, key)}\r\n \r\n \r\n }\r\n\r\n const generateInputNoLabel = (data, key) => {\r\n return \r\n \r\n {genericInput(data, key)}\r\n \r\n \r\n }\r\n\r\n const toggleOpen = (keys) => {\r\n let temp = _.cloneDeep(openStatus);\r\n let cv = getValue(keys, temp);\r\n if (cv === undefined) cv = {};\r\n if (cv.editorOpen === undefined) cv.editorOpen = true;\r\n cv.editorOpen = !cv.editorOpen;\r\n console.log('toggling', keys, cv.editorOpen);\r\n setValue(keys, cv, temp)\r\n setOpenStatus(temp);\r\n }\r\n\r\n const insertMember = (keys) => {\r\n console.log('inserting ', keys)\r\n let tempStep = _.cloneDeep(step);\r\n let parentAddress = _.cloneDeep(keys);\r\n parentAddress.splice(parentAddress.length - 1);\r\n let cloneMe = _.cloneDeep(getValue(keys, tempStep));\r\n console.log('inserting clone of', cloneMe);\r\n let parent = _.cloneDeep(getValue(parentAddress, tempStep));\r\n console.log('into', parent)\r\n parent.splice(keys[keys.length - 1], 0, cloneMe);\r\n setValue(parentAddress, parent, tempStep);\r\n let tempContent = _.cloneDeep(props.contentData);\r\n tempContent.steps[props.stepIndex] = tempStep;\r\n props.controller.setContentData(tempContent);\r\n props.controller.forceRender();\r\n }\r\n\r\n const removeMember = (keys) => {\r\n console.log('removing ', keys)\r\n let tempStep = _.cloneDeep(step);\r\n let parentAddress = _.cloneDeep(keys);\r\n parentAddress.splice(parentAddress.length - 1);\r\n let parent = _.cloneDeep(getValue(parentAddress, tempStep));\r\n console.log('into', parent)\r\n parent.splice(keys[keys.length - 1], 1);\r\n setValue(parentAddress, parent, tempStep);\r\n let tempContent = _.cloneDeep(props.contentData);\r\n tempContent.steps[props.stepIndex] = tempStep;\r\n props.controller.setContentData(tempContent);\r\n props.controller.forceRender();\r\n }\r\n\r\n const genericInput = (data, keys, parentIsArray) => {\r\n if (typeof data === 'string') {\r\n if (/<\\/?[a-z][\\s\\S]*>/i.test(data)) {\r\n // contains HTML\r\n return \r\n {keys[keys.length - 1]} \r\n \r\n handleFormChange(keys, value)}/>\r\n \r\n
\r\n\r\n }\r\n return \r\n {keys[keys.length - 1]} \r\n\r\n \r\n \r\n
\r\n }\r\n if (typeof data === 'number') {\r\n return \r\n {keys[keys.length - 1]} \r\n\r\n \r\n \r\n
\r\n }\r\n if (typeof data === 'boolean') {\r\n return \r\n {keys[keys.length - 1]} \r\n\r\n \r\n \r\n
\r\n }\r\n if (typeof data === 'object') {\r\n //check if array\r\n if (Array.isArray(data)) {\r\n //add plus button\r\n return \r\n toggleOpen(keys)}>{keys[keys.length - 1]} \r\n\r\n \r\n {recursiveDecodeObject(data, keys, true)}\r\n \r\n \r\n }\r\n if (parentIsArray) {\r\n return \r\n toggleOpen(keys)}>{keys[keys.length - 1]}\r\n insertMember(keys)}>+
\r\n removeMember(keys)}>-
\r\n\r\n \r\n {recursiveDecodeObject(data, keys)}\r\n \r\n\r\n \r\n }\r\n //break out into loop\r\n return \r\n toggleOpen(keys)}>{keys[keys.length - 1]} \r\n\r\n \r\n {recursiveDecodeObject(data, keys)}\r\n \r\n \r\n }\r\n }\r\n\r\n const recursiveDecodeObject = (data, keys, parentIsArray = false) => {\r\n if (typeof data !== 'object') return <>;\r\n // console.log('decoding ', data);\r\n if (!keys) {\r\n return Object.keys(data).map(key => {\r\n let temp = [];\r\n temp.push(key);\r\n return genericInput(data[key], temp)\r\n })\r\n } else {\r\n return Object.keys(data).map(key => {\r\n let temp = _.cloneDeep(keys);\r\n temp.push(key);\r\n return genericInput(data[key], temp, parentIsArray)\r\n })\r\n }\r\n\r\n }\r\n\r\n const handleFormChange = (keys, value) => {\r\n console.log('keys, val', keys, value);\r\n let tempStep = _.cloneDeep(step);\r\n if (!setValue(keys, value, tempStep)) {\r\n console.log('setvalue error');\r\n }\r\n\r\n let tempContent = _.cloneDeep(props.contentData);\r\n tempContent.steps[props.stepIndex] = tempStep;\r\n props.controller.setContentData(tempContent);\r\n props.controller.forceRender();\r\n\r\n }\r\n\r\n const handleFormChangeCheckbox = (keys) => {\r\n console.log('keys, val', keys);\r\n\r\n let tempStep = _.cloneDeep(step);\r\n if (!setValue(keys, !getValue(keys, tempStep), tempStep)) {\r\n console.log('setvalue error');\r\n }\r\n\r\n let tempContent = _.cloneDeep(props.contentData);\r\n\r\n tempContent.steps[props.stepIndex] = tempStep;\r\n props.controller.setContentData(tempContent);\r\n props.controller.forceRender();\r\n\r\n }\r\n\r\n\r\n const commitChanges = () => {\r\n props.commitChanges();\r\n }\r\n\r\n return (\r\n \r\n {step &&\r\n\r\n
\r\n
\r\n \r\n {recursiveDecodeObject(step)}\r\n \r\n
\r\n
{props.saving.message}
\r\n
\r\n\r\n }\r\n
\r\n\r\n
\r\n
\r\n Course Editor\r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n AppData.modules.map((mod, modIndex) => {\r\n return
\r\n
{props.controller.setModuleIndex(modIndex)}}>\r\n {modIndex >= 10 ? modIndex : '0' + modIndex} {`${mod.name}`}\r\n
\r\n {\r\n (props.moduleIndex === modIndex) &&\r\n
\r\n }\r\n
\r\n })\r\n }\r\n
\r\n\r\n
\r\n {/*
\r\n
setMode('forms')}>Forms
\r\n
setMode('raw')}>Raw
\r\n
*/}\r\n {\r\n mode === 'raw' &&\r\n
\r\n }\r\n {\r\n mode === 'forms' &&\r\n AppData.modules[props.moduleIndex] &&\r\n props.stepIndex !== -1 &&\r\n\r\n \r\n
\r\n\r\n {confirmCommit &&
\r\n
\r\n
\r\n
\r\n Please enter a brief commit message explaining the changes you have made.\r\n
\r\n\r\n
\r\n
\r\n Changes Made:\r\n
\r\n