franjsco/tick3t
1
0
Fork 0
mirror of https://github.com/franjsco/tick3t synced 2025-01-30 10:14:46 +01:00
Code Issues Releases Wiki Activity

add form

Browse Source
This commit is contained in:
frab1t 2019-05-08 16:29:14 +02:00
parent 831403612f
commit 0630079027
1 changed files with 175 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/containers/OpenTicket/OpenTicket.js
View File

@ -1,9 +1,16 @@
import React, { Component } from 'react';
import {
Row,
Col,
Form,
FormGroup,
Label,
Input,
Button
} from 'reactstrap';
import Card from '../../components/Card';
import InsertForm from '../../components/InsertForm';
import MessageCard from '../MessageCard';
import DropDown from '../../components/DropDown';
class OpenTicket extends Component {
constructor(props) {
@ -17,13 +24,35 @@ class OpenTicket extends Component {
email: '',
type: '',
subject: '',
message: ''
message: '',
categories: [],
categoriesLoaded: false
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
fetch("http://localhost:3001/categories", {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
})
.then((res) => {
return res.json();
})
.then((json) => {
this.setState({
categories: json
});
})
.catch((err) => {
this.setState({
ticketErr: err.message
});
});
}
handleInputChange(event) {
const target = event.target;
const name = target.name;
@ -68,41 +97,151 @@ class OpenTicket extends Component {
render() {
if (this.state.ticketId) {
return (
<MessageCard
title="Ticket Created"
message={`Ticket ID: ${this.state.ticketId}`} />
<Card title="Ticket Created">
<p>{`Ticket ID: ${this.state.ticketId}`}</p>
</Card>
);
} else if (this.state.ticketErr) {
return (
<MessageCard
title="Error"
message={this.state.ticketErr} />
<Card title="Error">
<p>{this.state.ticketErr}</p>
</Card>
);
}
return (
<div>
<Card
align="left"
title="Open Ticket"
body={
<InsertForm
handleInputChange={this.handleInputChange}
handleSubmit={this.handleSubmit}
firstName={this.state.firstName}
lastName={this.state.lastName}
email={this.state.email}
type={this.state.type}
subject={this.state.subject}
message={this.state.message}
/>
}
/>
>
<Form onSubmit={this.handleSubmit}>
<Row form>
<Col md={6}>
<FormGroup>
<Label
className="font-weight-bold"
for="firstName"
>
First Name
</Label>
</div>
<Input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleInputChange}
placeholder="Jon"
/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label
className="font-weight-bold"
for="lastName"
>
Last Name
</Label>
<Input
name="lastName"
type="text"
value={this.state.lastName}
onChange={this.handleInputChange}
placeholder="Snow"
/>
</FormGroup>
</Col>
</Row>
<Row form>
<Col md={12}>
<FormGroup>
<Label
className="font-weight-bold"
for="email"
>
Email
</Label>
<Input name="email"
type="email"
value={this.state.email}
onChange={this.handleInputChange}
placeholder="example@mail.com"
/>
</FormGroup>
</Col>
</Row>
<Row form>
<Col md={12}>
<FormGroup>
<Label
className="font-weight-bold"
for="type"
>
Type
</Label>
<DropDown options={this.state.categories} />
</FormGroup>
</Col>
</Row>
<Row form>
<Col sm={12}>
<FormGroup>
<Label
className="font-weight-bold"
for="subject"
>
Subject
</Label>
<Input
name="subject"
type="text"
value={this.state.subject}
onChange={this.handleInputChange}
placeholder="Subject"
/>
</FormGroup>
</Col>
</Row>
<Row form>
<Col sm={12}>
<FormGroup>
<Label
className="font-weight-bold"
for="message"
>
Message
</Label>
<Input
name="message"
type="textarea"
value={this.state.message}
onChange={this.handleInputChange}
placeholder="Message"
/>
</FormGroup>
</Col>
</Row>
<Row form>
<Col align="center" md={{ size: 8, offset: 2 }}>
<FormGroup>
<Button type="submit" color="primary">Open Ticket</Button>
</FormGroup>
</Col>
</Row>
</Form>
</Card>
);
}
}