Starting from Monday (10th of May 2021), 2 Factor Authentication enforcement will be enabled. If 2FA is not configured within 48h, you will not be able to perform any action on GitLab until 2FA is configured. Please click here to learn how to do that.

Commit 4ad04a80 authored by Andy Nicholson's avatar Andy Nicholson
Browse files

feat(*): step 4 integration work into wizard container

parent 5fabeb27
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { th, grid } from '@pubsweet/ui-toolkit'
import PropTypes from 'prop-types'
......@@ -40,13 +40,24 @@ const HeadingWrapper = styled.div`
const DraggableMultiLevels = props => {
const [levelsList, setLevelsList] = useState([...props.levelsList])
useEffect(() => {
// eslint-disable-next-line no-console
console.log('DraggableMultiLevels:: useEffect')
// eslint-disable-next-line no-console
console.log(levelsList)
// call the data update callback
props.dataUpdateCallback(levelsList)
}, [levelsList])
// Only used in a stand-alone story - see StepThree for another onDragEndFunc
//
const onDragEndFunc = result => {
const { destination, source, draggableId } = result
if (!destination) return
// eslint-disable-next-line no-console
console.log(
`source droppableId ${source.droppableId} dest droppableId ${destination.droppableId}`,
`DraggableMultiLevels :: source droppableId ${source.droppableId} dest droppableId ${destination.droppableId}`,
)
if (
......@@ -92,7 +103,7 @@ const DraggableMultiLevels = props => {
const processDeleteEvent = (event, deleteId, index) => {
// eslint-disable-next-line no-console
console.log(`delete ID ${deleteId}, index ${index}`)
console.log(`DraggableMultiLevels :: delete ID ${deleteId}, index ${index}`)
let destArray = []
destArray = props.levelsList[index].elements
remove(destArray, ({ id }) => id === deleteId)
......@@ -197,7 +208,8 @@ DraggableMultiLevels.propTypes = {
levelsList: PropTypes.array.isRequired,
levelsNumber: PropTypes.number.isRequired,
noContext: PropTypes.bool.isRequired,
canDeleteCallback: PropTypes.func,
dataUpdateCallback: PropTypes.func,
}
export default DraggableMultiLevels
......@@ -65,6 +65,7 @@ const DraggableTextbookRowAddable = props => (
setOpen={props.setOpenHandler}
showLevelIndication={props.showLevelIndication}
title={props.title}
topBorder={props.topBorder}
/>
{props.isAddable && props.endBlock !== true && (
<ButtonWrapper>
......
......@@ -121,6 +121,18 @@ const NestedExampleStructure = props => {
elements: [],
}
// The fixed textbook row like "end block" which closes off a Level 2 hierarchy.
const endBlock = [
{
title: '',
endBlock: true,
level: 3,
elements: [],
open: true,
handleOpen: false,
},
]
if (level === 1) {
if (levelsNumber > 2)
setNestedRowsList([
......@@ -128,27 +140,36 @@ const NestedExampleStructure = props => {
newEntryLevelOne,
newEntryLevelTwo,
newEntryLevelThree,
endBlock[0],
])
else
setNestedRowsList([
...nestedRowsList,
newEntryLevelOne,
newEntryLevelTwo,
endBlock[0],
])
}
if (level === 2) {
const list = nestedRowsList
if (levelsNumber > 2) {
// Find the first index that moves up a level.
let newStartIndex = list.length
for (let i = index + 1; i < list.length; i += 1) {
if (list[i].level <= list[index].level) {
newStartIndex = i
break
}
// Find the first index that moves up a level.
let newStartIndex = list.length
for (let i = index + 1; i < list.length; i += 1) {
if (list[i].level <= list[index].level) {
newStartIndex = i
break
}
list.splice(newStartIndex, 0, newEntryLevelTwo, newEntryLevelThree)
} else list.splice(index + 1, 0, newEntryLevelTwo)
}
if (levelsNumber === 3) {
list.splice(
newStartIndex,
0,
newEntryLevelTwo,
newEntryLevelThree,
endBlock[0],
)
} else list.splice(newStartIndex, 0, newEntryLevelTwo, endBlock[0])
setNestedRowsList([...list])
}
if (level === 3) {
......@@ -156,6 +177,9 @@ const NestedExampleStructure = props => {
list.splice(index + 1, 0, newEntryLevelThree)
setNestedRowsList([...list])
}
// eslint-disable-next-line no-console
console.log(nestedRowsList)
}
const onDeleteClickHandler = (event, index, level) => {
......@@ -200,8 +224,6 @@ const NestedExampleStructure = props => {
}
const onChangeHeadingFunc = (event, index) => {
// eslint-disable-next-line no-console
console.log(`Changing heading to ${event.target.value} on ${index}`)
nestedRowsList[index].heading = event.target.value
setNestedRowsList([...nestedRowsList])
......@@ -210,7 +232,8 @@ const NestedExampleStructure = props => {
const renderNestedRowsList = list =>
list.map(
(elem, index1) =>
elem.open && (
elem.open &&
elem.endBlock !== true && (
<DraggableTextbookRowAddable
editableHeading
endBlock={false}
......@@ -235,7 +258,8 @@ const NestedExampleStructure = props => {
open={elem.open}
setOpenHandler={setOpenHandler}
showLevelIndication={false}
title={`${elem.title} ${index1 + 1}`}
title={`${elem.title}`}
topBorder={false}
undraggable={false}
/>
),
......
......@@ -296,6 +296,7 @@ const NestedExampleStructureWithElements = props => {
setOpenHandler={setOpenHandler}
showLevelIndication={false}
title={`${elem.title}`}
topBorder
undraggable={false}
/>
)}
......
......@@ -42,8 +42,7 @@ const StepThree = props => {
console.log(
`Step Three :: source droppableId ${source.droppableId} dest droppableId ${destination.droppableId}`,
)
// eslint-disable-next-line no-console
console.log(props.sourceRowsList)
if (
destination.droppableId === source.droppableId &&
destination.index === source.index
......@@ -70,22 +69,20 @@ const StepThree = props => {
destArray = props.levelsList[destIndexInt].elements
srcArray = props.levelsList[srcIndexInt].elements
// eslint-disable-next-line no-console
console.log(destArray)
// eslint-disable-next-line no-console
console.log(srcArray)
// Moving from RHS source list of elements, or within list on LHS.
if (source.droppableId === 'droppable-sourceList-1') {
movingElem = clone(
props.sourceRowsList.find(({ id }) => id === draggableId),
)
isMovingFromSourceList = true
// eslint-disable-next-line no-console
console.log(props.sourceRowsList)
// Update the ID of this new element
const movingElemId = movingElem.id
movingElem.id = `${movingElemId}-${uuidv4()}`
} else {
// eslint-disable-next-line no-console
console.log(srcArray)
movingElem = srcArray.find(({ id }) => id === draggableId)
isMovingFromSourceList = false
}
......@@ -99,7 +96,9 @@ const StepThree = props => {
destArray.splice(destination.index, 0, movingElem)
// eslint-disable-next-line no-console
console.log(destArray)
console.log(props.levelsList)
// call the data update callback
props.dataUpdateCallback(props.levelsList)
// eslint-disable-next-line no-console
console.log(
......@@ -116,6 +115,7 @@ const StepThree = props => {
<StructureWrapper>
<DragDropContext onDragEnd={onDragEndFunc}>
<DraggableMultiLevels
dataUpdateCallback={props.dataUpdateCallback}
levelsList={props.levelsList}
levelsNumber={props.levelsNumber + 1}
noContext={props.noContext}
......@@ -150,6 +150,8 @@ StepThree.propTypes = {
/** For ContextlessDraggableStructuralElements */
sourceRowsList: PropTypes.array.isRequired,
structuralElementsTitle: PropTypes.string.isRequired,
dataUpdateCallback: PropTypes.func,
}
export default StepThree
import React from 'react'
import StepThree from './StepThree'
export const threeLevels = args => <StepThree {...args} />
export const threeLevels = args => (
// eslint-disable-next-line no-console
<StepThree {...args} dataUpdateCallback={() => console.log('update')} />
)
const defaultContentElement = [
{
......@@ -97,7 +100,10 @@ const twoLevelsList = [
},
]
export const twoLevels = args => <StepThree {...args} />
export const twoLevels = args => (
// eslint-disable-next-line no-console
<StepThree {...args} dataUpdateCallback={() => console.log('update')} />
)
twoLevels.args = {
title: 'STEP 3: Structural Elements: openers and closers',
......@@ -111,7 +117,10 @@ twoLevels.args = {
levelsNumber: 2,
}
export const threeLevelsWithElements = args => <StepThree {...args} />
export const threeLevelsWithElements = args => (
// eslint-disable-next-line no-console
<StepThree {...args} dataUpdateCallback={() => console.log('update')} />
)
const exampleElements2 = [
{ title: 'Introduction', type: 'opener', id: 'intro-1-XYZ' },
......
......@@ -63,14 +63,14 @@ const TextbookRow = props => {
<TextWrapper level={props.level} marginLeftpx={marginLeftpx}>
{props.endBlock !== true &&
props.handleOpen === true &&
props.level !== props.maxLevels && (
props.level <= props.maxLevels && (
<Icon onClick={e => props.setOpen(props.index, true)}>
chevron-down
</Icon>
)}
{props.endBlock !== true &&
props.handleOpen === false &&
props.level !== props.maxLevels && (
props.level <= props.maxLevels && (
<Icon onClick={e => props.setOpen(props.index, false)}>
chevron-up
</Icon>
......
......@@ -178,6 +178,8 @@ const WizardContainer = props => {
elements: [defaultContentElement[0]],
heading: '',
},
endBlock[0],
]
// The 2 level example of an array of textbook rows
const startingItemsTwoLevels = [
......@@ -197,6 +199,8 @@ const WizardContainer = props => {
elements: [defaultContentElement[0]],
heading: '',
},
endBlock[0],
]
const buttonState = buttonNumber => {
......@@ -292,17 +296,12 @@ const WizardContainer = props => {
}
useEffect(() => {
// If levels number changes, change the example structure textbook rows for Step 3.
// If levels number changes on Step 1, change the example structure textbook rows for Step 3.
levelsNumber === 3
? setExampleTextbookStructure(startingItems)
: setExampleTextbookStructure(startingItemsTwoLevels)
}, [levelsNumber])
useEffect(() => {
// Add in the end block for Step 3
exampleTextbookStructure.push(endBlock[0])
}, [exampleTextbookStructure])
return (
<>
{stepState === 'stepZero' && (
......@@ -345,6 +344,7 @@ const WizardContainer = props => {
<StepTwo
bodytext="Now write the outline of your textbook. Add levels to your textbook as needed."
dataUpdateCallback={rowsList => {
// set the data structure for Step 4
setCurrentTextbookStructure(rowsList)
}}
exampleItems={
......@@ -362,6 +362,56 @@ const WizardContainer = props => {
{stepState === 'stepThree' && (
<StepThree
bodytext="Text about the structural elements of the main content within a textbook: openers and closers. Drop and drag the elements that should be included in each level."
dataUpdateCallback={rowsList => {
// Copy the elements. Step 4 uses the first level 1,2,3 and endBlock row's elements to pre-populate every other row
// See NestedExampleStructureWithElements , inside StepFour
// Elements are the SAME for every specific level textbook row
const level1elems = rowsList.find(({ level }) => level === 1)
.elements
const level2elems = rowsList.find(({ level }) => level === 2)
.elements
const level3elems = rowsList.find(({ level }) => level === 3)
.elements
const endBlockelems = rowsList.find(
({ endBlock }) => endBlock === true,
).elements
// Update currentTextbookStructure
// Copy over elements from Step 3 into each row of each level type, or endBlock
currentTextbookStructure.forEach((element, index) => {
if (
currentTextbookStructure[index].level === 1 &&
currentTextbookStructure[index].endBlock !== true
)
currentTextbookStructure[index].elements = level1elems
if (
currentTextbookStructure[index].level === 2 &&
currentTextbookStructure[index].endBlock !== true
)
currentTextbookStructure[index].elements = level2elems
if (
currentTextbookStructure[index].level === 3 &&
currentTextbookStructure[index].endBlock !== true
)
currentTextbookStructure[index].elements = level3elems
if (
currentTextbookStructure[index].level === 3 &&
currentTextbookStructure[index].endBlock === true
)
currentTextbookStructure[index].elements = endBlockelems
})
// eslint-disable-next-line no-console
console.log(
'WizardContainer in dataUpdateCallback from Step Three::',
)
// eslint-disable-next-line no-console
console.log(rowsList)
}}
levelsList={exampleTextbookStructure}
levelsNumber={levelsNumber}
noContext
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment