Skip to content

Commit

Permalink
přechod na react-select v2, rozšíření jeho využití na další prvky, zj…
Browse files Browse the repository at this point in the history 
…ednodušení kódů prvků formulářů a opravy `label for=""`, v konstantách obsaženy texty

- kompletní přechod na react-select v2, provedení potřebných změn, nový issue #39
- react-select boxy se používají na dalších místech (výběry kurzu)
- v konstantách je proměnná `TEXTS` obsahující texty používané na více místech aplikace (zatím jen "Nic nenalezeno" pro react-select)
- ve většině formulářových prvků odstraněn atribut `name` pro svou nadbytečnost a duplicitu
- úpravy atributů formulářů `id` a `for` (někde byly špatně, někde chyběly apod.) -> formuláře teď plně všude podporují kliknutí na popisek
  • Loading branch information
@rodlukas
rodlukas committed Aug 7, 2018
1 parent 4183f93 commit b4a04f5
Show file tree
Hide file tree
Showing 10 changed files with 314 additions and 160 deletions.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"react-dev-utils": "^5.0.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-select": "^1.2.1",
"react-select": "2.0.0",
"react-toastify": "^4.1.0",
"reactstrap": "^6.2.0",
"resolve": "1.6.0",
Expand Down
70 changes: 27 additions & 43 deletions frontend/src/forms/FormApplications.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import Select from "react-select"
import ClientService from "../api/services/client"
import SubmitButton from "../components/buttons/SubmitButton"
import CancelButton from "../components/buttons/CancelButton"
import ClientName from "../components/ClientName"
import {TEXTS} from "../global/constants"

export default class FormApplications extends Component {
constructor(props) {
Expand All @@ -13,52 +15,30 @@ export default class FormApplications extends Component {
const {id, course, client, note} = props.application
this.state = {
id: id || '',
course_id: this.isObject ? course.id : null,
client_id: this.isObject ? client.id : null,
course: this.isObject ? course : null,
client: this.isObject ? client : null,
note: note || '',
clients: []
}
this.courses = this.getCoursesArray(props.courses)
}

// pripravi pole s kurzy ve spravnem formatu, aby pak slo rovnou zaslat do API
getCoursesArray(courses) {
let arrayOfCourses = []
courses.map(course => {
return arrayOfCourses.push({
course_id: course.id,
label: course.name})})
return arrayOfCourses
}

// pripravi pole s klienty ve spravnem formatu, aby pak slo rovnou zaslat do API
getClientsArray(clients) {
let arrayOfClients = []
clients.map(client => {
return arrayOfClients.push({
client_id: client.id,
label: client.surname + " " + client.name})})
return arrayOfClients
}

onChange = (e) => {
const target = e.target
const state = this.state
state[target.name] = (target.type === 'checkbox') ? target.checked : target.value
state[target.id] = (target.type === 'checkbox') ? target.checked : target.value
this.setState(state)
}

handleChange = (obj, name) => {
onSelectChange = (obj, name) => {
const state = this.state
// obj muze byt null
state[name] = obj ? obj[name] : null
state[name] = obj
this.setState(state)
}

onSubmit = (e) => {
e.preventDefault()
const {id, course_id, client_id, note} = this.state
const data = {id, course_id, client_id, note}
const {id, course, client, note} = this.state
const data = {id, course_id: course.id, client_id: client.id, note}
let request
if (this.isObject)
request = ApplicationService.update(data)
Expand All @@ -80,48 +60,52 @@ export default class FormApplications extends Component {

getClients = () => {
ClientService.getAll()
.then(clients => this.setState({clients: this.getClientsArray(clients)}))
.then(clients => this.setState({clients}))
}

componentDidMount() {
this.getClients()
}

render() {
const {client_id, clients, course_id, note} = this.state
const {client, clients, course, note} = this.state
return (
<Form onSubmit={this.onSubmit}>
<ModalHeader toggle={this.close}>
{this.isObject ? 'Úprava' : 'Přidání'} zájemce o kurz
</ModalHeader>
<ModalBody>
<FormGroup row>
<Label for="name" sm={3}>
<Label for="client" sm={3}>
Klient
</Label>
<Col sm={9}>
<Select
valueKey={'client_id'}
value={client_id}
onChange={(newValue, name = "client_id") => this.handleChange(newValue, name)}
inputId="client"
value={client}
getOptionLabel={option => <ClientName client={option}/>}
getOptionValue={option => option.id}
onChange={newValue => this.onSelectChange(newValue, "client")}
options={clients}
placeholder={"Vyberte klienta..."}
noResultsText={"Nic nenalezeno"}
noOptionsMessage={() => TEXTS.NO_RESULTS}
required/>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={3}>
<Col id="course" sm={3}>
Kurz
</Col>
<Col sm={9}>
<Select
valueKey={'course_id'}
value={course_id}
onChange={(newValue, name = "course_id") => this.handleChange(newValue, name)}
options={this.courses}
inputId="course"
value={course}
getOptionLabel={(option) => option.name}
getOptionValue={(option) => option.id}
onChange={newValue => this.onSelectChange(newValue, "course")}
options={this.props.courses}
placeholder={"Vyberte kurz..."}
noResultsText={"Nic nenalezeno"}
noOptionsMessage={() => TEXTS.NO_RESULTS}
required/>
</Col>
</FormGroup>
Expand All @@ -130,7 +114,7 @@ export default class FormApplications extends Component {
Poznámka
</Label>
<Col sm={9}>
<Input type="textarea" name="note" id="note" value={note} onChange={this.onChange}/>
<Input type="textarea" id="note" value={note} onChange={this.onChange}/>
</Col>
</FormGroup>
</ModalBody>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/forms/FormClients.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default class FormClients extends Component {

onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value
state[e.target.id] = e.target.value
this.setState(state)
}

Expand Down Expand Up @@ -73,44 +73,44 @@ export default class FormClients extends Component {
Jméno
</Label>
<Col sm={10}>
<Input type="text" name="name" id="name" value={name} onChange={this.onChange} required autoFocus/>
<Input type="text" id="name" value={name} onChange={this.onChange} required autoFocus/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="surname" sm={2}>
Příjmení
</Label>
<Col sm={10}>
<Input type="text" name="surname" id="surname" value={surname} onChange={this.onChange} required/>
<Input type="text" id="surname" value={surname} onChange={this.onChange} required/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="email" sm={2}>
Email
</Label>
<Col sm={10}>
<Input type="email" name="email" id="email" value={email} onChange={this.onChange}/>
<Input type="email" id="email" value={email} onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="phone" sm={2}>
Telefon
</Label>
<Col sm={10}>
<Input type="tel" name="phone" id="phone" value={phone} minLength="9" onChange={this.onChange}/>
<Input type="tel" id="phone" value={phone} minLength="9" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="note" sm={2}>
Poznámka
</Label>
<Col sm={10}>
<Input type="textarea" name="note" id="note" value={note} onChange={this.onChange}/>
<Input type="textarea" id="note" value={note} onChange={this.onChange}/>
</Col>
</FormGroup>
{this.isClient &&
<FormGroup row className="border-top pt-3">
<Label for="note" sm={2} className="text-muted">
<Label sm={2} className="text-muted">
Smazání
</Label>
<Col sm={10}>
Expand Down
89 changes: 47 additions & 42 deletions frontend/src/forms/FormGroups.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, {Component} from "react"
import Select from "react-select"
import {Col, Form, FormGroup, Label, Input, ModalHeader, ModalBody, ModalFooter, Alert, CustomInput} from "reactstrap"
import {Col, Form, FormGroup, Label, Input, ModalHeader, ModalBody, ModalFooter, Alert} from "reactstrap"
import CourseService from "../api/services/course"
import ClientService from "../api/services/client"
import GroupService from "../api/services/group"
import DeleteButton from "../components/buttons/DeleteButton"
import CancelButton from "../components/buttons/CancelButton"
import SubmitButton from "../components/buttons/SubmitButton"

const UNDEF = "undef"
import ClientName from "../components/ClientName"
import {TEXTS} from "../global/constants"

export default class FormGroups extends Component {
constructor(props) {
Expand All @@ -18,42 +18,50 @@ export default class FormGroups extends Component {
this.state = {
id: id || '',
name: name || '',
course_id: this.isGroup ? course.id : UNDEF,
memberships: this.isGroup ? this.getMembersArray(memberships) : [],
course: this.isGroup ? course : null,
memberships: this.isGroup ? this.getMembers(memberships) : [],
clients: [],
courses: []
}
}

// pripravi pole se cleny ve spravnem formatu, aby pak slo rovnou zaslat do API
getMembersArray(memberships) {
let arrayOfMembers = []
memberships.map(membership => {
return arrayOfMembers.push({
client_id: membership.client.id,
label: membership.client.surname + " " + membership.client.name})})
return arrayOfMembers
// pripravi pole se cleny ve spravnem formatu, aby fungoval react-select
getMembers(memberships) {
let members = []
memberships.map(membership =>
members.push(membership.client))
return members
}

// pripravi pole se cleny ve spravnem formatu, aby slo poslat do API
prepareMembersForSubmit(memberships) {
let members = []
memberships.map(membership =>
members.push({client_id: membership.id}))
return members
}

getDataCourses = () => {
CourseService.getAll()
.then(courses => this.setState({courses}))
}

handleChange = (memberships) => {
this.setState({memberships})
onSelectChange = (obj, name) => {
const state = this.state
state[name] = obj
this.setState(state)
}

onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value
state[e.target.id] = e.target.value
this.setState(state)
}

onSubmit = (e) => {
e.preventDefault()
const {id, name, memberships, course_id} = this.state
const data = {id, name, memberships, course_id}
const {id, name, memberships, course} = this.state
const data = {id, name, memberships: this.prepareMembersForSubmit(memberships), course_id: course.id}
let request
if (this.isGroup)
request = GroupService.update(data)
Expand Down Expand Up @@ -83,13 +91,7 @@ export default class FormGroups extends Component {

getClients = () => {
ClientService.getAll()
.then(clients => {
let arrayOfClients = []
clients.map(client => {
return arrayOfClients.push({
client_id: client.id,
label: client.surname + " " + client.name})})
this.setState({clients: arrayOfClients})})
.then(clients => this.setState({clients}))
}

componentDidMount() {
Expand All @@ -98,7 +100,7 @@ export default class FormGroups extends Component {
}

render() {
const {id, name, clients, memberships, courses, course_id} = this.state
const {id, name, clients, memberships, courses, course} = this.state
return (
<Form onSubmit={this.onSubmit}>
<ModalHeader toggle={this.close}>{this.isGroup ? 'Úprava' : 'Přidání'} skupiny: {name}</ModalHeader>
Expand All @@ -112,39 +114,42 @@ export default class FormGroups extends Component {
</Col>
</FormGroup>
<FormGroup row>
<Label for="course_id" sm={2}>
<Label for="course" sm={2}>
Kurz
</Label>
<Col sm={10}>
<CustomInput type="select" name="course_id" id="course_id" value={course_id} onChange={this.onChange} required>
<option disabled value={UNDEF}>
Vyberte kurz...
</option>
{courses.map(course =>
<option key={course.id} value={course.id}>
{course.name}
</option>)}
</CustomInput>
<Select
inputId="course"
value={course}
getOptionLabel={(option) => option.name}
getOptionValue={(option) => option.id}
onChange={newValue => this.onSelectChange(newValue, "course")}
options={courses}
placeholder={"Vyberte kurz..."}
noOptionsMessage={() => TEXTS.NO_RESULTS}
required/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="surname" sm={2}>
<Label for="memberships" sm={2}>
Členové
</Label>
<Col sm={10}>
<Select
valueKey={'client_id'}
inputId="memberships"
value={memberships}
multi={true}
onChange={this.handleChange}
getOptionLabel={option => <ClientName client={option}/>}
getOptionValue={option => option.id}
isMulti={true}
onChange={newValue => this.onSelectChange(newValue, "memberships")}
options={clients}
placeholder={"Vyberte členy skupiny..."}
noResultsText={"Nic nenalezeno"}/>
noOptionsMessage={() => TEXTS.NO_RESULTS}/>
</Col>
</FormGroup>
{this.isGroup &&
<FormGroup row className="border-top pt-3">
<Label for="note" sm={2} className="text-muted">
<Label sm={2} className="text-muted">
Smazání
</Label>
<Col sm={10}>
Expand Down
Loading

0 comments on commit b4a04f5

Please sign in to comment.