78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
import React from 'react'
|
|
import { Editor } from 'draft-js'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { EditorSubmitButton, EditorCancelButton } from './button'
|
|
import TagColorPreview from './tagColorPreview'
|
|
import { DocumentList } from './list'
|
|
import helpers from '../modules/helpers'
|
|
|
|
const ChooseAnnotationModal = ({notes, tags, annotationNote, annotationTag, modalEditorState, onSubmitClick, selectAnnotationNote, selectAnnotationTag, clearAnnotationTag, userErrors}) =>
|
|
<div className='modal fade' id='annotate_modal' tabIndex='-1' role='dialog'>
|
|
<div className='modal-dialog modal-lg' role='document'>
|
|
<div className='modal-content'>
|
|
<div className='modal-header'>
|
|
<h5 className='modal-title' id='exampleModalLabel'>Select a note</h5>
|
|
<button id='select_annotation_modal_close' type="button" className="close" data-dismiss="modal">
|
|
<i className='fas fa-times'></i>
|
|
</button>
|
|
</div>
|
|
<div className='modal-body'>
|
|
<div className='row'>
|
|
<div className='col-md-3'>
|
|
<DocumentList docs={notes} currentDocument={annotationNote} onDocumentClick={selectAnnotationNote} docType={'notes'}/>
|
|
</div>
|
|
<div className='col-md-8 offset-md-1'>
|
|
<Editor editorState={modalEditorState} readOnly={true} />
|
|
</div>
|
|
</div>
|
|
<div className='row'>
|
|
<div id='annotation_tag_dropdown' className='col-md-2'>
|
|
<button className={annotationNote.id ? 'btn btn-primary dropdown-toggle caret-off' : 'btn btn-primary dropdown-toggle caret-off disabled'} data-toggle='dropdown' type='button'><i className='fas fa-chevron-down'></i>Tags</button>
|
|
<div className='dropdown-menu'>
|
|
{tags.map(tag =>
|
|
<div key={tag.id} className='dropdown-item' onClick={()=>selectAnnotationTag(tag)}>
|
|
<TagColorPreview color={tag.color}/>
|
|
<a className='select_annotation_tag'>{tag.title}</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div id='annotation_tag_preview' className='col-md-8 offset-md-1'>
|
|
{annotationTag.id &&
|
|
<div id='selected_annotation_tag'>
|
|
<TagColorPreview color={annotationTag.color}/>
|
|
{annotationTag.title}
|
|
<a id='clear_anntation_tag' onClick={clearAnnotationTag}>
|
|
<i className='fas fa-times'></i>
|
|
</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div className='row'>
|
|
<div id='user_errors' className='col-md-12'>
|
|
{userErrors.map(error =>
|
|
<div key={error} className='user_error_message'>{error}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='modal-footer'>
|
|
<EditorCancelButton />
|
|
<EditorSubmitButton onClick={onSubmitClick} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
ChooseAnnotationModal.propTypes = {
|
|
notes: PropTypes.arrayOf(PropTypes.object),
|
|
annotationNote: PropTypes.object,
|
|
annotationTag: PropTypes.object,
|
|
onSubmitClick: PropTypes.func,
|
|
selectAnnotationNote: PropTypes.func,
|
|
selectAnnotationTag: PropTypes.func,
|
|
}
|
|
|
|
export default ChooseAnnotationModal |