Skip to content

Commit

Permalink
Link up the submit page to the mfe stepper
Browse files Browse the repository at this point in the history
  • Loading branch information
@d2fong
d2fong committed Feb 13, 2018
1 parent bc2c0e3 commit e705296
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 159 deletions.
139 changes: 7 additions & 132 deletions src/client/components/multi-form-editor/index.js
View file
@@ -1,8 +1,8 @@

const React = require('react');
const h = require('react-hyperscript');
const MultiStep = require('react-stepzilla').default;
const { Tab, Tabs, TabList, TabPanel } = require('react-tabs');
const { Link } = require('react-router-dom');


const Editor = require('../editor');
Expand Down Expand Up @@ -49,7 +49,7 @@ class Context extends React.Component {
}


class MFE0 extends React.Component {
class MFE extends React.Component {
constructor(props) {
super(props);

Expand All @@ -66,9 +66,7 @@ class MFE0 extends React.Component {
});
}
render() {
const entities = this.state.loaded ? this.state.doc.elementSet.cache.source : [];
console.log(entities);
return (
return (
h('div.multi-form-editor', [
h(Context),
h('div.editor-content', [
Expand Down Expand Up @@ -101,138 +99,15 @@ class MFE0 extends React.Component {
h('div', 'edit step 1'),
h('div', 'edit step 2'),
h('div', 'edit step 3'),
h('div', 'button next')
])
])
])
);
}
}

class MFE1 extends React.Component {

constructor(props) {
super(props);

this.state = {
doc: null,
loaded: false
};
}
propogateModel(doc) {
this.setState({
doc: doc,
loaded: true
});
}
render() {
const entities = this.loaded ? this.state.doc.elementSet.source : [];

return (
h('div.multi-form-editor', [
h('div.editor-content', [
h(Tabs, [
h(TabList, { className: 'editor-toolbar' }, [
h(Tab, [h('div', 'Graph view tab')]),
h(Tab, [h('div', 'Form view tab')]),
h(Tab, [h('div', 'Free Text entry view tab')])
]),
h(TabPanel, { className: 'editor-view-panel' }, [
h(Editor, {
id: this.props.id,
secret: this.props.secret,
propogateModel: (doc) => this.propogateModel(doc)
})
]),
h(TabPanel, [
h('div.form-view-panel', [
'form view'
])
]),
h(TabPanel,[
h('div.text-entry-view-panel', [
'text entry view'
])
])
]),
h('div.editor-stepper', [
h('div', 'button previous'),
h('div', 'edit step 1'),
h('div', 'edit step 2'),
h('div', 'edit step 3'),
h('div', 'button next')
])
]),
h(Context)
])
);
}
}


class MFE2 extends React.Component {

constructor(props) {
super(props);

this.state = {
doc: null,
loaded: false
};
}
propogateModel(doc) {
this.setState({
doc: doc,
loaded: true
});
}
render() {
const entities = this.loaded ? this.state.doc.elementSet.source : [];

return (
h('div.multi-form-editor', [
h('div.editor-context', [
h('div.site-logo', [
h('i.icon.icon-logo.home-logo-icon'),
' Factoid'
])
]),
h('div.editor-content', [
h(Tabs, [
h(TabList, { className: 'editor-toolbar' }, [
h(Tab, [h('div', 'Graph view tab')]),
h(Tab, [h('div', 'Form view tab')]),
h(Tab, [h('div', 'Free Text entry view tab')])
]),
h(TabPanel, { className: 'editor-view-panel' }, [
h(Editor, {
id: this.props.id,
secret: this.props.secret,
propogateModel: (doc) => this.propogateModel(doc)
})
]),
h(TabPanel, [
h('div.form-view-panel', [
'form view'
])
]),
h(TabPanel,[
h('div.text-entry-view-panel', [
'text entry view'
])
h('div', [
h(Link, { className: 'editor-submit', to: `/submit/${this.props.id}/${this.props.secret}`}, 'submit')
])
]),
h('div.editor-stepper', [
h('div', 'button previous'),
h('div', 'edit step 1'),
h('div', 'edit step 2'),
h('div', 'edit step 3'),
h('div', 'button next')
])
])
])
);
}
}

module.exports = {MFE0, MFE1, MFE2};

module.exports = {MFE};
8 changes: 0 additions & 8 deletions src/client/components/multi-form-editor/landing-page.js
View file
Expand Up @@ -5,32 +5,26 @@ const React = require('react');
class LandingPage extends React.Component {
render(){
return h('div.landing-page', [
// main part of landing-page page
h('div.landing-page-center', [
// A row that includes Factoid logo and short description of Factoid
h('div.landing-page-intro-row', [
h('i.landing-page-icon'),
h('div', [
h('h1.landing-page-into-header', 'Factoid'),
h('p.landing-page-intro-desc', 'A project to digitally capture biological data from academic papers')
])
]),
// Links to choose the mode
h('div.landing-page-mode-links', [
h('span.landing-page-mode-link', [ h(Link, { className: 'plain-link', to: '/debug/new-document' }, 'Create new, blank document') ]),
h('span.landing-page-mode-link-seperator', '-'),
h('span.landing-page-mode-link', [ h(Link, { className: 'plain-link', to: '/debug/new-document/fill' }, 'Create new document, filled from text') ])
])
]),
// Footer for the main page
h('div.landing-page-footer', [
h('div.landing-page-section', [
// A more detailed description of Factoid
h('span', 'Factoid is a new bioinformatics technology designed to increase impact of papers by making the genes and interactions that are described by the users easier for others to discover and reuse.'),

h('p'),

// References to some of the used technologies
h('span', 'Factoid utilizes '),
h('span', [ h('a', { className: 'landing-page-link', href: 'http://agathon.sista.arizona.edu:8080/odinweb/', target: '_blank' }, 'REACH') ]),
h('span', ' for extraction of the biomedical information and '),
Expand All @@ -43,7 +37,6 @@ class LandingPage extends React.Component {

h('p'),

// Information about the development team
h('span', 'Factoid is being developed by Gary Bader, Max Franz, Dylan Fong, Jeffrey Wong of the '),
h('span', [ h('a', { className: 'landing-page-link', href: 'http://baderlab.org/', target: '_blank' }, 'Bader Lab') ]),
h('span', ' at the '),
Expand All @@ -60,7 +53,6 @@ class LandingPage extends React.Component {

h('p'),

// Link to Factoid GitHub page
h('a', { className: 'landing-page-link', href: 'https://github.com/PathwayCommons/factoid', target: '_blank' }, [
h('i', { className: 'fa-github fa fa-2x' })
])
Expand Down
28 changes: 9 additions & 19 deletions src/client/router.js
View file
Expand Up @@ -9,8 +9,9 @@ const Debug = require('./components/debug');
const DocumentFiller = require('./components/document-filler');
const ExampleDocument = require('./components/example-document');

const { MFE0, MFE1, MFE2 } = require('./components/multi-form-editor/');
const { MFE } = require('./components/multi-form-editor/');
const LandingPage = require('./components/multi-form-editor/landing-page');
const SubmitPage = require('./components/multi-form-editor/landing-page');

let routes = [
{
Expand All @@ -26,43 +27,32 @@ let routes = [
}
},
{
path: '/edit0/:id',
path: '/edit/:id',
render: props => {
let params = props.match.params;

return h( MFE0, {
return h( MFE, {
id: params.id
} );
}
},
{
path: '/edit0/:id/:secret',
path: '/edit/:id/:secret',
render: props => {
let params = props.match.params;

return h( MFE0, {
return h( MFE, {
id: params.id,
secret: params.secret
} );
}
},
{
path: '/edit1/:id/:secret',
path: 'submit/:id/:secret',
render: props => {
let params = props.match.params;

return h( MFE1, {
id: params.id,
secret: params.secret
} );
}
},
{
path: '/edit2/:id/:secret',
render: props => {
let params = props.match.params;

return h( MFE2, {
return h( SubmitPage, {
id: params.id,
secret: params.secret
} );
Expand All @@ -88,7 +78,7 @@ let routes = [

return h( Redirect, {
to: {
pathname: `/document/${id}/${secret}`
pathname: `/edit0/${id}/${secret}`
}
} );
}
Expand Down

0 comments on commit e705296

Please sign in to comment.