Commit ebec8a01 authored by Alexandros Georgantas's avatar Alexandros Georgantas

refactor(book builder): finalized include in toc feature and clean up

parent d38b38e7
......@@ -36,6 +36,7 @@ const {
BOOK_COMPONENT_UPLOADING_UPDATED,
BOOK_COMPONENT_LOCK_UPDATED,
BOOK_COMPONENT_TYPE_UPDATED,
BOOK_COMPONENT_TOC_UPDATED,
} = require('./consts')
const { pubsubManager } = pubsweetServer
......@@ -241,7 +242,7 @@ const addBookComponents = async (_, { input }, ctx, info) => {
throw new Error(e)
}
}
// TODO: Pending implementation
const renameBookComponent = async (_, { input }, ctx) => {
const { id, title } = input
const pubsub = await pubsubManager.getPubsub()
......@@ -388,7 +389,7 @@ const updateWorkflowState = async (_, { input }, ctx) => {
}
}
// TODO: Pending implementation
const unlockBookComponent = async (_, { input }, ctx) => {
try {
const pubsub = await pubsubManager.getPubsub()
......@@ -413,7 +414,7 @@ const unlockBookComponent = async (_, { input }, ctx) => {
}
}
// TODO: Pending implementation
const lockBookComponent = async (_, { input }, ctx) => {
try {
const pubsub = await pubsubManager.getPubsub()
......@@ -447,7 +448,7 @@ const lockBookComponent = async (_, { input }, ctx) => {
}
}
// TODO: Pending implementation
const updateContent = async (_, { input }, ctx) => {
const { id, content, workflowStages, uploading } = input
const pubsub = await pubsubManager.getPubsub()
......@@ -597,17 +598,19 @@ const updateComponentType = async (_, { input }, ctx) => {
const toggleIncludeInTOC = async (_, { input }, ctx) => {
try {
const { id } = input
const pubsub = await pubsubManager.getPubsub()
const currentSate = await BookComponentState.query().where(
'bookComponentId',
id,
)
await BookComponentState.query()
.patch({ includeInTOC: !currentSate.includeInTOC })
.findById(currentSate.id)
const up = await BookComponentState.query()
.patch({ includeInToc: !currentSate[0].includeInToc })
.findById(currentSate[0].id)
const updatedBookComponent = await BookComponent.findById(id)
pubsub.publish(BOOK_COMPONENT_TYPE_UPDATED, {
bookComponentTypeUpdated: updatedBookComponent,
pubsub.publish(BOOK_COMPONENT_TOC_UPDATED, {
bookComponentTOCToggled: updatedBookComponent,
})
return updatedBookComponent
} catch (e) {
......@@ -639,7 +642,6 @@ module.exports = {
},
BookComponent: {
async title(bookComponent, _, ctx) {
// console.log('bokk', bookComponent)
let { title } = bookComponent
if (!title) {
const bookComponentTranslation = await BookComponentTranslation.query()
......@@ -654,11 +656,10 @@ module.exports = {
},
async bookTitle(bookComponent, _, ctx) {
const book = await Book.findById(bookComponent.bookId)
// console.log('book', book, bookComponent)
const bookTranslation = await BookTranslation.query()
.where('bookId', book.id)
.andWhere('languageIso', 'en')
// console.log('booktit', bookTranslation)
return bookTranslation[0].title
},
async nextBookComponent(bookComponent, _, ctx) {
......@@ -787,7 +788,7 @@ module.exports = {
async includeInTOC(bookComponent, _, ctx) {
const state = await bookComponent.getBookComponentState()
return state.includeInTOC
return state.includeInToc
},
},
Subscription: {
......@@ -857,5 +858,11 @@ module.exports = {
return pubsub.asyncIterator(BOOK_COMPONENT_TYPE_UPDATED)
},
},
bookComponentTOCToggled: {
subscribe: async () => {
const pubsub = await pubsubManager.getPubsub()
return pubsub.asyncIterator(BOOK_COMPONENT_TOC_UPDATED)
},
},
},
}
......@@ -49,7 +49,7 @@ const updateBookComponentOrder = async (
pubsub.publish(BOOK_COMPONENT_ORDER_UPDATED, {
bookComponentOrderUpdated: book,
})
console.log('reorder 1', book)
} else {
sourceDivision.bookComponents.splice(found, 1)
await Division.query().patchAndFetchById(sourceDivision.id, {
......@@ -78,12 +78,12 @@ const updateBookComponentOrder = async (
pubsub.publish(BOOK_COMPONENT_ORDER_UPDATED, {
bookComponentOrderUpdated: book,
})
console.log('reorder 2', book)
}
return Book.findById(bookComponent.bookId)
},
)
console.log('res', bookTransaction)
return bookTransaction
}
......
......@@ -35,7 +35,7 @@ const getTemplates = async (_, { ascending, sortKey }, ctx) => {
}
const getTemplate = async (_, { id }, ctx) => {
const template = await Template.findById(id)
console.log('template', template)
return template
}
......@@ -188,7 +188,7 @@ const createTemplate = async (_, { input }, ctx) => {
// TODO:
const updateTemplate = async (_, { input }, ctx) => {
console.log('input', input)
const {
id,
name,
......@@ -458,15 +458,15 @@ module.exports = {
},
Template: {
async files(template, _, ctx) {
console.log('template1', template)
const files = await template.getFiles()
console.log('files', files)
return files
},
async thumbnail(template, _, ctx) {
console.log('template2', template)
const thumbnail = await template.getThumbnail()
console.log('thum', thumbnail)
return thumbnail
},
},
......
......@@ -78,6 +78,7 @@ export class BookBuilder extends React.Component {
addBookComponents,
currentUser,
deleteBookComponent,
toggleIncludeInTOC,
updateApplicationParameters,
updateBookComponentPagination,
updateBookComponentOrder,
......@@ -152,6 +153,7 @@ export class BookBuilder extends React.Component {
addBookComponent={addBookComponent}
applicationParameter={applicationParameter}
onWorkflowUpdate={onWorkflowUpdate}
toggleIncludeInTOC={toggleIncludeInTOC}
addBookComponents={addBookComponents}
setState={setState}
onWarning={onWarning}
......
......@@ -36,6 +36,8 @@ import {
updateBookMetadataMutation,
bookMetadataSubscription,
bookRenamedSubscription,
toggleIncludeInTOCMutation,
bookComponentIncludeInTOCSubscription,
} from './queries'
const mapper = {
......@@ -53,6 +55,7 @@ const mapper = {
titleChangeSubscription,
productionEditorChangeSubscription,
componentTypeChangeSubscription,
bookComponentIncludeInTOCSubscription,
addTeamMemberSubscription,
updateBookMetadataMutation,
bookMetadataSubscription,
......@@ -60,6 +63,7 @@ const mapper = {
unlockBookComponentMutation,
createBookComponentsMutation,
deleteBookComponentMutation,
toggleIncludeInTOCMutation,
updateBookComponentPaginationMutation,
updatedBookComponentOrderMutation,
updateBookComponentWorkflowStateMutation,
......@@ -78,6 +82,7 @@ const mapProps = args => ({
addBookComponent: args.createBookComponentMutation.addBookComponent,
addBookComponents: args.createBookComponentsMutation.addBookComponents,
deleteBookComponent: args.deleteBookComponentMutation.deleteBookComponent,
toggleIncludeInTOC: args.toggleIncludeInTOCMutation.toggleIncludeInTOC,
updateBookComponentPagination:
args.updateBookComponentPaginationMutation.updateBookComponentPagination,
updateBookComponentOrder:
......@@ -274,6 +279,7 @@ const Connected = props => {
addBookComponent,
addBookComponents,
deleteBookComponent,
toggleIncludeInTOC,
updateBookComponentPagination,
updateBookComponentOrder,
updateComponentType,
......@@ -301,6 +307,7 @@ const Connected = props => {
addBookComponents={addBookComponents}
applicationParameter={applicationParameter}
state={state}
toggleIncludeInTOC={toggleIncludeInTOC}
setState={setState}
onTeamManager={onTeamManager}
onError={onError}
......
......@@ -116,7 +116,6 @@ const orderChangeSubscription = props => {
const { refetch } = getBookQuery
const { pauseUpdates } = statefull
const triggerRefetch = () => {
console.log('reorder sub')
if (pauseUpdates) return
refetch()
}
......@@ -138,7 +137,13 @@ const COMPONENT_TYPE_UPDATED_SUBSCRIPTION = gql`
}
}
`
const INCLUDE_IN_TOC_UPDATED_SUBSCRIPTION = gql`
subscription IncludeInTOCUpdated {
bookComponentTOCToggled {
id
}
}
`
const componentTypeChangeSubscription = props => {
const { render, getBookQuery, statefull } = props
const { pauseUpdates } = statefull
......@@ -158,6 +163,25 @@ const componentTypeChangeSubscription = props => {
)
}
const bookComponentIncludeInTOCSubscription = props => {
const { render, getBookQuery, statefull } = props
const { pauseUpdates } = statefull
const { refetch } = getBookQuery
const triggerRefetch = () => {
if (pauseUpdates) return
refetch()
}
return (
<Subscription
onSubscriptionData={triggerRefetch}
subscription={INCLUDE_IN_TOC_UPDATED_SUBSCRIPTION}
>
{render}
</Subscription>
)
}
const bookComponentAddedSubscription = props => {
const { render, getBookQuery, getBookBuilderRulesQuery, statefull } = props
const { pauseUpdates } = statefull
......@@ -355,4 +379,5 @@ export {
componentTypeChangeSubscription,
addTeamMemberSubscription,
bookMetadataSubscription,
bookComponentIncludeInTOCSubscription,
}
......@@ -4,6 +4,7 @@ export { default as getBookTeamsQuery } from './getBookTeams'
export { default as createBookComponentMutation } from './createBookComponent'
export { default as createBookComponentsMutation } from './createBookComponents'
export { default as deleteBookComponentMutation } from './deleteBookComponent'
export { default as toggleIncludeInTOCMutation } from './toggleIncludeInTOC'
export {
default as updateBookComponentPaginationMutation,
} from './updatePagination'
......@@ -27,6 +28,7 @@ export {
addTeamMemberSubscription,
bookMetadataSubscription,
bookRenamedSubscription,
bookComponentIncludeInTOCSubscription,
} from './bookBuilderSubscriptions'
export { default as findUserMutation } from './findUsers'
export { default as updateTeamMutation } from './updateTeam'
......
import React from 'react'
import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
const TOGGLE_INCLUDE_IN_TOC = gql`
mutation ToggleIncludeInTOC($input: UpdateBookComponentInput!) {
toggleIncludeInTOC(input: $input) {
id
}
}
`
const toggleIncludeInTOCMutation = props => {
const { render } = props
return (
<Mutation mutation={TOGGLE_INCLUDE_IN_TOC}>
{(toggleIncludeInTOC, toggleIncludeInTOCResult) =>
render({ toggleIncludeInTOC, toggleIncludeInTOCResult })
}
</Mutation>
)
}
export default toggleIncludeInTOCMutation
......@@ -18,7 +18,7 @@ const Container = styled.div`
border-left: ${({ noBorder }) => (noBorder.left ? 0 : '')};
`
const AlignmentBox = ({ active, id, noBorder, onClick }) => {
console.log('act', active)
return (
<Container
active={active}
......
......@@ -25,7 +25,7 @@ const AlignmentTool = ({ data, onClickAlignmentBox, componentType }) => {
}
const leftData = find(data, { id: 'left' })
const rightData = find(data, { id: 'right' })
console.log('data', data)
const noBorderRight = { right: true }
const noBorderLeft = { left: true }
......
......@@ -28,6 +28,15 @@ const StyledButton = styled(ButtonWithoutLabel)`
includeInTOC ? 'visible' : 'hidden'};
}
}
&:hover {
#Line {
stroke: ${({ includeInTOC }) => (includeInTOC ? th('colorPrimary') : '')};
}
#Line_2 {
stroke: ${({ includeInTOC }) => (includeInTOC ? 'white' : '')};
}
}
`
const BookComponentContainer = styled.div`
display: flex;
......@@ -203,6 +212,7 @@ const BookComponent = ({
uploading,
updatePagination,
updateWorkflowState,
toggleIncludeInTOC,
updateBookComponentContent,
updateComponentType,
updateApplicationParameters,
......@@ -218,6 +228,17 @@ const BookComponent = ({
})
}
const onToggleIncludeInTOC = id => {
toggleIncludeInTOC({
variables: {
input: {
id,
},
},
})
}
const onAddComponentType = value => {
updateApplicationParameters({
variables: {
......@@ -335,7 +356,14 @@ const BookComponent = ({
<ButtonWithoutLabel onClick={goToEditor} icon={previewIcon} />
)} */}
</ActionsLeft>
<StyledButton icon={tocIcon} includeInTOC={includeInTOC} />
<StyledButton
icon={tocIcon}
includeInTOC={includeInTOC}
onClick={e => {
e.preventDefault()
onToggleIncludeInTOC(id)
}}
/>
<BookComponentTitle
applicationParameter={applicationParameter}
bookComponentId={id}
......
......@@ -169,6 +169,7 @@ class Division extends React.Component {
divisionId,
onWarning,
showModal,
toggleIncludeInTOC,
onWorkflowUpdate,
onAdminUnlock,
showModalToggle,
......@@ -209,6 +210,7 @@ class Division extends React.Component {
bookId={bookId}
onAdminUnlock={onAdminUnlock}
onWorkflowUpdate={onWorkflowUpdate}
toggleIncludeInTOC={toggleIncludeInTOC}
currentUser={currentUser}
canDrag={reorderingAllowed}
componentType={componentType}
......@@ -224,8 +226,6 @@ class Division extends React.Component {
key={id}
lock={lock}
no={i}
onEndDrag={() => console.log('hello')}
onMove={() => console.log('hello')}
outerContainer={outerContainer}
pagination={pagination}
provided={provided}
......
......@@ -212,6 +212,7 @@ class DivisionsArea extends Component {
onAdminUnlock,
updateBookComponentContent,
updateBookComponentUploading,
toggleIncludeInTOC,
outerContainer,
showModal,
showModalToggle,
......@@ -220,10 +221,11 @@ class DivisionsArea extends Component {
uploading,
rules,
} = this.props
const { divisions } = this.state
const { canReorderBookComponent } = rules
const renderDivision = (reorderingAllowed, bookComponents, label, id) => {
return (
<Division
add={addBookComponent}
......@@ -233,6 +235,7 @@ class DivisionsArea extends Component {
bookId={bookId}
currentUser={currentUser}
deleteBookComponent={deleteBookComponent}
toggleIncludeInTOC={toggleIncludeInTOC}
divisionId={id}
history={history}
key={id}
......
......@@ -88,7 +88,7 @@ const UploadFileButton = ({
})
})
.catch(error => {
console.log('error', error)
updateBookComponentUploading({
variables: {
input: {
......
......@@ -134,11 +134,11 @@ class UploadFilesButton extends React.Component {
})
})
.catch(error => {
console.log('error', error)
console.error('error', error)
const stuckedBookComponents = filter(addBookComponents, {
uploading: true,
})
console.log('str', stuckedBookComponents)
console.error('str', stuckedBookComponents)
Promise.all(
map(stuckedBookComponents, async bookComponent => {
update({
......@@ -160,7 +160,7 @@ class UploadFilesButton extends React.Component {
})
.catch(async error => {
self.setState({ counter: 0, uploading: false })
console.log('error', error)
console.error('error', error)
})
})
}
......
......@@ -129,7 +129,7 @@ class MetadataModal extends React.Component {
renderBody() {
const { data, hideModal } = this.props
const { onConfirm, book } = data
console.log('props', this.props)
return (
<div>
<Formik
......
......@@ -132,7 +132,7 @@ const Book = props => {
onArchiveBook,
} = props
const { authors, isPublished, archived } = book
console.log('book', book)
const { canRenameBooks, canDeleteBooks, canArchiveBooks } = bookRule
return (
......
......@@ -253,7 +253,7 @@ class AddBookModal extends React.Component {
render() {
const { isOpen, hideModal } = this.props
console.log('props', this.props)
const body = this.renderBody()
return (
......
......@@ -63,7 +63,7 @@ class BookComponentState extends Base {
},
trackChangesEnabled: booleanDefaultFalse,
uploading: booleanDefaultFalse,
includeInTOC: booleanDefaultFalse,
includeInToc: booleanDefaultFalse,
runningHeadersRight: string,
runningHeadersLeft: string,
// left loose on purpose to allow for configurability
......
......@@ -2,5 +2,5 @@ exports.up = async knex =>
knex.schema.table('book_component_state', table => {
table.string('runningHeadersRight')
table.string('runningHeadersLeft')
table.boolean('includeInTOC').defaultTo(false)
table.boolean('includeInToc').defaultTo(false)
})
......@@ -16,7 +16,6 @@ class UploadFilesButton extends React.Component {
const { updateFilesList, setFieldValue, setFieldTouched } = this.props
const originalFiles = event.target.files
console.log('orig', originalFiles)
updateFilesList(originalFiles, setFieldValue, setFieldTouched)
}
......
......@@ -22,7 +22,6 @@ class UploadThumbnail extends React.Component {
const { updateThumbnail, setFieldValue, setFieldTouched } = this.props
const originalFiles = event.target.files
console.log('orig', originalFiles)
updateThumbnail(originalFiles[0], setFieldValue, setFieldTouched)
}
......
......@@ -18,7 +18,7 @@ const mapProps = args => {
const Composed = adopt(mapper, mapProps)
const Connected = props => {
console.log('props', props)
// const { data, isOpen } = props
const { data, isOpen, hideModal } = props
const { templateId } = data
......
......@@ -36,8 +36,6 @@ const Input = styled.input`
outline: 0;
border-bottom: 1px dashed
${({ errors, errorId, touched }) => {
console.log('asdfasdf', errorId)
console.log('asdfasdf', errors)
return errors[errorId] && touched[errorId]
? th('colorError')
: th('colorText')
......@@ -202,7 +200,7 @@ const Image = styled.img`
class TemplateModal extends React.Component {
constructor(props) {
super(props)
console.log('props in tem', props)
const { data, template } = props
const { mode } = data
this.updateFileList = this.updateFileList.bind(this)
......@@ -243,7 +241,7 @@ class TemplateModal extends React.Component {
for (let i = 0; i < fileList.length; i += 1) {
selectedFiles.push(fileList.item(i))
}
console.log('selectedFIles', selectedFiles)
this.setState({ files: selectedFiles })
setFieldValue('files', selectedFiles)
setFieldTouched('files', true)
......@@ -257,7 +255,7 @@ class TemplateModal extends React.Component {
const { thumbnail, mode } = this.state
const reader = new FileReader()
reader.readAsDataURL(file)
console.log('thumb', thumbnail)
reader.onloadend = function(e) {
let newState
if (mode === 'update') {
......@@ -281,13 +279,12 @@ class TemplateModal extends React.Component {
const tempFiles = cloneDeep(files)
const tempDeleted = cloneDeep(deleteFiles)
const fileIndex = findIndex(tempFiles, { name: filename })
if (mode === 'update' && tempFiles[fileIndex].id) {
const { id } = tempFiles[fileIndex]
tempDeleted.push(id)
files.splice(fileIndex, 1)
newState = {
deleteFiles: tempDeleted,
files,
......@@ -298,7 +295,6 @@ class TemplateModal extends React.Component {
files,
}
}
setFieldValue('files', files)
this.setState(newState)
......@@ -385,14 +381,14 @@ class TemplateModal extends React.Component {
trimSize,
}
}
return (
<Formik
initialValues={initialValues}
onSubmit={(values, { setSubmitting }) => {
const { name, author, trimSize, files, thumbnail, target } = values
const { deleteFiles, deleteThumbnail, mode } = this.state
let data
if (mode === 'create') {
data = {
......@@ -415,7 +411,7 @@ class TemplateModal extends React.Component {
target: target ? target.value : undefined,
}
}
onConfirm(data)
setSubmitting(false)
}}
......@@ -498,7 +494,9 @@ class TemplateModal extends React.Component {
errorId="name"
errors={errors}
touched={touched}
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
onKeyPress={e => {
e.key === 'Enter' && e.preventDefault()
}}
name="name"
onBlur={handleBlur}
onChange={handleChange}
......@@ -516,7 +514,9 @@ class TemplateModal extends React.Component {
errorId="author"
errors={errors}
touched={touched}
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
onKeyPress={e => {
e.key === 'Enter' && e.preventDefault()
}}
name="author"
onBlur={handleBlur}
onChange={handleChange}
......@@ -533,7 +533,9 @@ class TemplateModal extends React.Component {
<Input
errorId="trimSize"
touched={touched}
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}
onKeyPress={e => {
e.key === 'Enter' && e.preventDefault()
}}
errors={errors}
name="trimSize"
onBlur={handleBlur}
......@@ -591,7 +593,7 @@ class TemplateModal extends React.Component {
const { isOpen, hideModal, data } = this.props
const { headerText } = data
const body = this.renderBody()
return (
<FormModal
headerText={headerText}
......
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