diff --git a/src/api.js b/src/api.js index 0976d9f9bc..ddbf367952 100644 --- a/src/api.js +++ b/src/api.js @@ -45,6 +45,7 @@ class APIClient { } get = (endpoint, params = {}) => this.http.get(endpoint, { params }); + post = (endpoint, data) => this.http.post(endpoint, data); } export default new APIClient(); diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx index 831cc0c243..58581f059b 100644 --- a/src/pages/Organizations/views/Organization.add.jsx +++ b/src/pages/Organizations/views/Organization.add.jsx @@ -3,19 +3,128 @@ import { PageSection, PageSectionVariants, Title, + Form, + FormGroup, + TextInput, + ActionGroup, + Toolbar, + ToolbarGroup, + Button, + Gallery, + Select, + SelectOption, + Card, + CardBody, } from '@patternfly/react-core'; -const { light, medium } = PageSectionVariants; +import { API_ORGANIZATIONS } from '../../../endpoints'; +import api from '../../../api'; +const { light } = PageSectionVariants; -const OrganizationView = () => ( - - - Organization Add - - - This is the add view - - -); +class OrganizationAdd extends React.Component { -export default OrganizationView; + state = { + name: '', + description: '', + instanceGroups: '', + ansible_environment: 'default', + post_endpoint: API_ORGANIZATIONS, + }; + + onSelectChange = (value, _) => { + this.setState({ ansible_environment: value }); + }; + + envs = [ // Placeholder for Ansible Environment Dropdown + { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true }, + { ansible_environment: '1', label: '1', disabled: false }, + { ansible_environment: '2', label: '2', disabled: false }, + { ansible_environment: '3', label: '3', disabled: false } + ]; + resetForm = () => { + this.setState({ + ...this.state, + name: '', + description: '' + }) + } + handleChange = (_, evt) => { + this.setState({ [evt.target.name]: evt.target.value }); + } + onSubmit = async () => { + const data = Object.assign({}, { ...this.state }); + await api.post(API_ORGANIZATIONS, data); + this.resetForm(); + } + render() { + const { name } = this.state; + const enabled = name.length > 0; // TODO: add better form validation + return ( + + + Organization Add + + + + +
+ + + + + + + + {/* LOOKUP MODAL PLACEHOLDER */} + + + + + + + + + + + + + + + + + +
+
+
+
+
+ ); + } +} + +export default OrganizationAdd;