diff options
Diffstat (limited to 'animism-align/frontend/views/media')
8 files changed, 120 insertions, 21 deletions
diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/views/media/components/media.form.js index 9b93788..1463041 100644 --- a/animism-align/frontend/views/media/components/media.form.js +++ b/animism-align/frontend/views/media/components/media.form.js @@ -16,6 +16,7 @@ const newMedia = () => ({ title: '', author: '', pre_title: '', + post_title: '', translated_title: '', date: '', source: '', @@ -38,9 +39,11 @@ export default class MediaForm extends Component { constructor(props) { super(props) + this.handleKeyDown = this.handleKeyDown.bind(this) this.handleSelect = this.handleSelect.bind(this) this.handleChange = this.handleChange.bind(this) this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } @@ -57,6 +60,21 @@ export default class MediaForm extends Component { ...data }, }) + window.addEventListener('keydown', this.handleKeyDown) + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown) + } + + handleKeyDown(e) { + // console.log(e, e.keyCode) + if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) { + if (e) { + e.preventDefault() + } + this.handleSubmit() + } } handleChange(e) { @@ -78,7 +96,13 @@ export default class MediaForm extends Component { }) } + handleSettingsChangeEvent(e) { + const { name, value } = e.target + this.handleSettingsChange(name, value) + } + handleSettingsChange(name, value) { + console.log(name, value) if (name !== 'multiple') { value = { [name]: value } } @@ -94,11 +118,13 @@ export default class MediaForm extends Component { } handleSubmit(e) { - e.preventDefault() + if (e) { + e.preventDefault() + } const { isNew, onSubmit } = this.props const { data } = this.state const requiredKeys = "author title date".split(" ") - const validKeys = "type tag url title author pre_title translated_title date source medium start_ts settings".split(" ") + const validKeys = "type tag url title author pre_title post_title translated_title date source medium start_ts settings".split(" ") const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) const errorFields = requiredKeys.filter(key => !validData[key]) if (errorFields.length) { @@ -167,7 +193,13 @@ export default class MediaForm extends Component { <TextInput title="Title Prefix" name="pre_title" - required + data={data} + onChange={this.handleChange} + autoComplete="off" + /> + <TextInput + title="Title Suffix" + name="post_title" data={data} onChange={this.handleChange} autoComplete="off" @@ -175,7 +207,6 @@ export default class MediaForm extends Component { <TextInput title="Translated Title" name="translated_title" - required data={data} onChange={this.handleChange} autoComplete="off" @@ -205,6 +236,20 @@ export default class MediaForm extends Component { autoComplete="off" /> <TextArea + title="Citation" + name="bibliography" + placeholder="Use if special HTML formatting needed" + data={data.settings} + onChange={this.handleSettingsChangeEvent} + /> + <Checkbox + label="Hide in list of works" + name="hide_in_bibliography" + checked={data.settings.hide_in_bibliography} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <TextArea title="Description" name="description" data={data} @@ -217,7 +262,7 @@ export default class MediaForm extends Component { {!!errorFields.size && <label> <span></span> - <span>Please complete the required fields =)</span> + <span>Please complete the required fields</span> </label> } </form> diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/views/media/components/media.formImage.js index abd0f94..4a97112 100644 --- a/animism-align/frontend/views/media/components/media.formImage.js +++ b/animism-align/frontend/views/media/components/media.formImage.js @@ -86,19 +86,23 @@ export default class MediaImageForm extends Component { // when we upload an image, if the image already exists in this "position" // on the record, we should also delete it if (this.props.data.settings[tag] && this.props.data.settings[tag].id) { - return actions.upload.destroy(this.props.data.settings[tag]) - .then(() => { - return this.uploadTaggedSize(image, tag, fn) - }) - .catch(() => { - console.log('error deleting the image') - return this.uploadTaggedSize(image, tag, fn) + return new Promise((resolve, reject) => { + actions.upload.destroy(this.props.data.settings[tag]) + .then(() => { + console.log('destroy successful') + this.uploadTaggedSize(image, tag, fn).then(data => resolve(data)) + }) + .catch(() => { + console.log('error deleting the image') + this.uploadTaggedSize(image, tag, fn).then(data => resolve(data)) + }) }) } return this.uploadTaggedSize(image, tag, fn) } uploadTaggedSize(image, tag, fn) { + console.log('uploading size', tag) const uploadData = { image, tag, diff --git a/animism-align/frontend/views/media/components/media.menu.js b/animism-align/frontend/views/media/components/media.menu.js index 3d7e86a..153a5c1 100644 --- a/animism-align/frontend/views/media/components/media.menu.js +++ b/animism-align/frontend/views/media/components/media.menu.js @@ -28,7 +28,7 @@ const MediaIndexMenu = () => ([ ]) const MediaShowMenu = connect(mapStateToProps)((props) => ([ - <MenuButton key='back' name="back" />, + <MenuButton key='back' name="back" href="/media/" />, <MenuButton key='edit' name="edit" href={"/media/" + props.match.params.id + "/edit/"} />, <MenuButton key='delete' name="delete" onClick={() => { const { res: media } = props.media.show @@ -41,9 +41,18 @@ const MediaShowMenu = connect(mapStateToProps)((props) => ([ ])) const MediaNewMenu = (props) => ([ - <MenuButton key='back' name="back" />, + <MenuButton key='back' name="back" href="/media/" />, ]) -const MediaEditMenu = (props) => ([ - <MenuButton key='back' name="back" />, -]) +const MediaEditMenu = connect(mapStateToProps)((props) => ([ + <MenuButton key='back' name="back" href="/media/" />, + <MenuButton key='copy' name="copy" href={"/media/" + props.match.params.id + '/copy/'} label="Make a copy" />, + <MenuButton key='delete' name="delete" onClick={() => { + const { res: media } = props.media.show + if (confirm("Really delete this media?")) { + actions.media.destroy(media).then(() => { + history.push('/media/') + }) + } + }} />, +])) diff --git a/animism-align/frontend/views/media/containers/media.edit.js b/animism-align/frontend/views/media/containers/media.edit.js index 8c353d9..143cdfe 100644 --- a/animism-align/frontend/views/media/containers/media.edit.js +++ b/animism-align/frontend/views/media/containers/media.edit.js @@ -36,7 +36,7 @@ class MediaEdit extends Component { } return ( <div className='row formContainer'> - <MediaMenu /> + <MediaMenu mediaActions={this.props.mediaActions} /> <MediaForm data={show.res} onSubmit={this.handleSubmit.bind(this)} @@ -51,7 +51,7 @@ const mapStateToProps = state => ({ }) const mapDispatchToProps = dispatch => ({ - // searchActions: bindActionCreators({ ...searchActions }, dispatch), + // mediaActions: bindActionCreators({ ...mediaActions }, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(MediaEdit) diff --git a/animism-align/frontend/views/media/containers/media.index.js b/animism-align/frontend/views/media/containers/media.index.js index bff781e..a865522 100644 --- a/animism-align/frontend/views/media/containers/media.index.js +++ b/animism-align/frontend/views/media/containers/media.index.js @@ -72,7 +72,10 @@ class MediaIndex extends Component { <div className="row"> <MediaMenu /> <div className={'results ' + options.thumbnailSize}> - {order.map(id => <MediaItem key={id} data={lookup[id]} />)} + <h2>Images</h2> + {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)} + <h2>Video</h2> + {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)} </div> </div> {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} diff --git a/animism-align/frontend/views/media/containers/media.new.js b/animism-align/frontend/views/media/containers/media.new.js index e740c0c..80879cb 100644 --- a/animism-align/frontend/views/media/containers/media.new.js +++ b/animism-align/frontend/views/media/containers/media.new.js @@ -9,6 +9,34 @@ import MediaForm from '../components/media.form' import MediaMenu from '../components/media.menu' class MediaNew extends Component { + state = { + loading: true, + initialData: {}, + } + + componentDidMount() { + // console.log(this.props.match.params.id) + if (this.props.match.params && this.props.match.params.id) { + actions.media.show(this.props.match.params.id) + .then(data => { + const { id, ...initialData } = data.res + delete initialData.settings.video + delete initialData.settings.crop + delete initialData.settings.display + delete initialData.settings.fullsize + delete initialData.settings.thumbnail + delete initialData.settings.bibliography + console.log("copying", id) + this.setState({ + loading: false, + initialData, + }) + }) + } else { + this.setState({ loading: false }) + } + } + handleSubmit(data) { console.log(data) actions.media.create(data) @@ -24,12 +52,17 @@ class MediaNew extends Component { } render() { + if (this.state.loading) { + return ( + <div className='row formContainer' /> + ) + } return ( <div className='row formContainer'> <MediaMenu /> <MediaForm isNew - data={{}} + data={this.state.initialData} onSubmit={this.handleSubmit.bind(this)} /> </div> diff --git a/animism-align/frontend/views/media/media.container.js b/animism-align/frontend/views/media/media.container.js index 41fed4b..97a5b08 100644 --- a/animism-align/frontend/views/media/media.container.js +++ b/animism-align/frontend/views/media/media.container.js @@ -16,6 +16,7 @@ class Container extends Component { render() { return ( <div className='media'> + <Route exact path='/media/:id/copy/' component={MediaNew} /> <Route exact path='/media/:id/edit/' component={MediaEdit} /> <Route exact path='/media/new/' component={MediaNew} /> <Route exact path='/media/' component={MediaIndex} /> diff --git a/animism-align/frontend/views/media/media.css b/animism-align/frontend/views/media/media.css index 701cf44..a2d95c8 100644 --- a/animism-align/frontend/views/media/media.css +++ b/animism-align/frontend/views/media/media.css @@ -8,6 +8,10 @@ margin-bottom: 1rem; margin-right: 1rem; } +.results h2 { + display: block; + width: 100%; +} .media .results .meta > div { max-width: 100%; } |