|
@@ -1,4 +1,4 @@
|
|
|
-import { Query, Mutation } from 'react-apollo';
|
|
|
+import { Query, Mutation } from 'react-apollo'
|
|
|
import gql from 'graphql-tag'
|
|
|
import { QUERY_PROJECTS } from './ProjectList'
|
|
|
|
|
@@ -21,7 +21,7 @@ const ADD_CHARACTERIZATION = gql`
|
|
|
|
|
|
const QUERY_PROJECT_VERSIONS = gql`
|
|
|
query QUERY_PROJECT_VERSIONS($projectId: ID!) {
|
|
|
- projectVersions(where: {project: {id: $projectId}}) {
|
|
|
+ projectVersions(where: { project: { id: $projectId } }) {
|
|
|
id
|
|
|
name
|
|
|
}
|
|
@@ -40,52 +40,87 @@ class CharacterziationForm extends React.Component {
|
|
|
this.setState({ [event.target.name]: event.target.value })
|
|
|
}
|
|
|
|
|
|
- render() {
|
|
|
+ render () {
|
|
|
return (
|
|
|
<Mutation mutation={ADD_CHARACTERIZATION} variables={this.state}>
|
|
|
{(addCharacterization, { data, error, loading }) => (
|
|
|
- <form onSubmit={async event => {
|
|
|
- event.preventDefault()
|
|
|
- const { data } = await addCharacterization()
|
|
|
- const { createCharacterization } = data
|
|
|
- this.setState({ id: createCharacterization.id })
|
|
|
- }}>
|
|
|
+ <form
|
|
|
+ onSubmit={async event => {
|
|
|
+ event.preventDefault()
|
|
|
+ const { data } = await addCharacterization()
|
|
|
+ const { createCharacterization } = data
|
|
|
+ this.setState({ id: createCharacterization.id })
|
|
|
+ }}
|
|
|
+ >
|
|
|
<fieldset>
|
|
|
- <label htmlFor="name">Characterization name</label>
|
|
|
- <input type="text" name="name" id="name"
|
|
|
- placeholder="Characterization name"
|
|
|
+ <label htmlFor='name'>Characterization name</label>
|
|
|
+ <input
|
|
|
+ type='text'
|
|
|
+ name='name'
|
|
|
+ id='name'
|
|
|
+ placeholder='Characterization name'
|
|
|
value={this.state.name}
|
|
|
onChange={this.toState}
|
|
|
/>
|
|
|
<Query query={QUERY_PROJECTS}>
|
|
|
{({ data, error, loading }) => {
|
|
|
- if (error) return (<p>Error loading project: ${error.message}</p>)
|
|
|
- if (loading) return (<p>Loading data...</p>)
|
|
|
- if (!data || !data.projects.length) return (<p>No project found.</p>)
|
|
|
+ if (error) { return <p>Error loading project: ${error.message}</p> }
|
|
|
+ if (loading) return <p>Loading data...</p>
|
|
|
+ if (!data || !data.projects.length) { return <p>No project found.</p> }
|
|
|
|
|
|
const { projects } = data
|
|
|
- if (!this.state.project && projects.length) this.setState({ project: projects[0].id })
|
|
|
+ if (!this.state.project && projects.length) { this.setState({ project: projects[0].id }) }
|
|
|
return (
|
|
|
<>
|
|
|
- <label htmlFor="project">Project</label>
|
|
|
- <select name="project" id="project" onChange={this.toState}>
|
|
|
- {data.projects.map(project => <option key={project.id} value={project.id}>{project.name}</option>)}
|
|
|
+ <label htmlFor='project'>Project</label>
|
|
|
+ <select
|
|
|
+ name='project'
|
|
|
+ id='project'
|
|
|
+ onChange={this.toState}
|
|
|
+ >
|
|
|
+ {data.projects.map(project => (
|
|
|
+ <option key={project.id} value={project.id}>
|
|
|
+ {project.name}
|
|
|
+ </option>
|
|
|
+ ))}
|
|
|
</select>
|
|
|
- <Query query={QUERY_PROJECT_VERSIONS} variables={{ projectId: this.state.project }}>
|
|
|
+ <Query
|
|
|
+ query={QUERY_PROJECT_VERSIONS}
|
|
|
+ variables={{ projectId: this.state.project }}
|
|
|
+ >
|
|
|
{({ data, error, loading }) => {
|
|
|
- if (error) return (<p>Error loading project version: ${error.message}</p>)
|
|
|
- if (loading) return (<p>Loading data...</p>)
|
|
|
- if (!data || !data.projectVersions.length) return (<p>No project version found.</p>)
|
|
|
+ if (error) {
|
|
|
+ return (
|
|
|
+ <p>
|
|
|
+ Error loading project version: ${error.message}
|
|
|
+ </p>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (loading) return <p>Loading data...</p>
|
|
|
+ if (!data || !data.projectVersions.length) { return <p>No project version found.</p> }
|
|
|
|
|
|
const { projectVersions } = data
|
|
|
- if (!this.state.projectVersion) this.setState({ projectVersion: projectVersions[0].id })
|
|
|
+ if (!this.state.projectVersion) {
|
|
|
+ this.setState({
|
|
|
+ projectVersion: projectVersions[0].id
|
|
|
+ })
|
|
|
+ }
|
|
|
return (
|
|
|
<>
|
|
|
- <label htmlFor="projectVersion"></label>
|
|
|
- <select name="projectVersion" id="projectVersion" onChange={this.toState}>
|
|
|
- {data.projectVersions.map(projectVersion =>
|
|
|
- <option key={projectVersion.id} value={projectVersion.id}>{projectVersion.name}</option>
|
|
|
- )}
|
|
|
+ <label htmlFor='projectVersion' />
|
|
|
+ <select
|
|
|
+ name='projectVersion'
|
|
|
+ id='projectVersion'
|
|
|
+ onChange={this.toState}
|
|
|
+ >
|
|
|
+ {data.projectVersions.map(projectVersion => (
|
|
|
+ <option
|
|
|
+ key={projectVersion.id}
|
|
|
+ value={projectVersion.id}
|
|
|
+ >
|
|
|
+ {projectVersion.name}
|
|
|
+ </option>
|
|
|
+ ))}
|
|
|
</select>
|
|
|
</>
|
|
|
)
|
|
@@ -95,7 +130,7 @@ class CharacterziationForm extends React.Component {
|
|
|
)
|
|
|
}}
|
|
|
</Query>
|
|
|
- <button type="submit">{data ? "Save" : "Add"}</button>
|
|
|
+ <button type='submit'>{data ? 'Save' : 'Add'}</button>
|
|
|
</fieldset>
|
|
|
</form>
|
|
|
)}
|
|
@@ -104,4 +139,4 @@ class CharacterziationForm extends React.Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default CharacterziationForm
|
|
|
+export default CharacterziationForm
|