21 changed files with 521 additions and 66 deletions
@ -0,0 +1,217 @@
|
||||
import React, { Component } from 'react' |
||||
import styled from 'styled-components' |
||||
import { connect } from 'react-redux' |
||||
import { Redirect, Link } from 'react-router-dom' |
||||
|
||||
import { updateCalendar, createCalendar, deleteCalendar } from '../actions/calendar' |
||||
import store from '../store' |
||||
import HorizontalInput from './parts/HorizontalInput' |
||||
import HorizontalDate from './parts/HorizontalDate' |
||||
import HorizontalCheckbox from './parts/HorizontalCheckbox' |
||||
|
||||
const StyledCalendarForm = styled.div` |
||||
padding: 1rem; |
||||
background: #fafafa; |
||||
`;
|
||||
|
||||
|
||||
class CalendarForm extends Component { |
||||
|
||||
state = { |
||||
id: null, |
||||
service_id: "", |
||||
start_date: "", |
||||
end_date: "", |
||||
monday: false, |
||||
tuesday: false, |
||||
wednesday: false, |
||||
thursday: false, |
||||
friday: false, |
||||
saturday: false, |
||||
sunday: false, |
||||
} |
||||
|
||||
constructor() { |
||||
super() |
||||
this.handleChange = this.handleChange.bind(this) |
||||
this.handleSubmit = this.handleSubmit.bind(this) |
||||
this.handleDelete = this.handleDelete.bind(this) |
||||
this.renderForm = this.renderForm.bind(this) |
||||
} |
||||
|
||||
handleChange(evt) { |
||||
let updated = {} |
||||
updated[evt.target.name] = evt.target.value |
||||
this.setState(updated) |
||||
} |
||||
|
||||
handleSubmit() { |
||||
const { id } = this.state |
||||
let body = {...this.state} |
||||
delete body.id |
||||
if (id !== null) { |
||||
store.dispatch(updateCalendar(id, body)) |
||||
} else { |
||||
store.dispatch(createCalendar(body)) |
||||
} |
||||
this.setState({justSubmit: true}) |
||||
} |
||||
|
||||
handleDelete() { |
||||
const { id } = this.state |
||||
store.dispatch(deleteCalendar(id)) |
||||
this.setState({justSubmit: true}) |
||||
} |
||||
|
||||
componentWillMount() { |
||||
const { props } = this |
||||
const { serviceId } = props.match.params |
||||
const { results } = props.calendar |
||||
const ones = results.filter(ele => ele.service_id === serviceId) |
||||
if (ones.length > 0) { |
||||
this.setState(ones[0]) |
||||
} |
||||
} |
||||
|
||||
renderForm() { |
||||
const one = this.state |
||||
const { fetching } = this.props.calendar |
||||
return ( |
||||
<StyledCalendarForm> |
||||
<h1 className="title">{one.name} </h1> |
||||
<div className="content"> |
||||
<HorizontalInput |
||||
label="Calendar ID" |
||||
type="text" |
||||
fieldName="service_id" |
||||
value={one.service_id || ''} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalDate |
||||
label="Start Date" |
||||
type="text" |
||||
fieldName="start_date" |
||||
value={one.start_date || ''} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalDate |
||||
key="end_date" |
||||
label="End Date" |
||||
type="text" |
||||
fieldName="end_date" |
||||
value={one.end_date || ''} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Monday" |
||||
label="Monday" |
||||
type="text" |
||||
fieldName="monday" |
||||
value={one.monday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Tuesday" |
||||
label="Tuesday" |
||||
type="text" |
||||
fieldName="tuesday" |
||||
value={one.tuesday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Wednesday" |
||||
label="Wednesday" |
||||
type="text" |
||||
fieldName="wednesday" |
||||
value={one.wednesday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Thursday" |
||||
label="Thursday" |
||||
type="text" |
||||
fieldName="thursday" |
||||
value={one.thursday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Friday" |
||||
label="Friday" |
||||
type="text" |
||||
fieldName="friday" |
||||
value={one.friday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Saturday" |
||||
label="Saturday" |
||||
type="text" |
||||
fieldName="saturday" |
||||
value={one.saturday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
<HorizontalCheckbox |
||||
key="Sunday" |
||||
label="Sunday" |
||||
type="text" |
||||
fieldName="sunday" |
||||
value={one.sunday || false} |
||||
handleChange={this.handleChange} /> |
||||
|
||||
</div> |
||||
|
||||
<div className="field is-grouped"> |
||||
<div className="control"> |
||||
<button className="button is-link" |
||||
onClick={this.handleSubmit} |
||||
disabled={fetching}> |
||||
Save</button> |
||||
</div> |
||||
{one.id !== null && <div className="control"> |
||||
<button className="button is-danger" |
||||
onClick={this.handleDelete} |
||||
disabled={fetching}> |
||||
DELETE</button> |
||||
</div>} |
||||
<div className="control"> |
||||
<Link to={`/calendar`} className="button is-text">Cancel</Link> |
||||
</div> |
||||
</div> |
||||
</StyledCalendarForm> |
||||
) |
||||
} |
||||
|
||||
render () { |
||||
const one = this.state |
||||
const { fetching } = this.props.calendar |
||||
// redirect to view page if no data
|
||||
const { serviceId } = this.props.match.params |
||||
// this is a create form
|
||||
if (serviceId === undefined) { |
||||
if (one.justSubmit === true && !fetching) { |
||||
return <Redirect to={`/calendar`} /> |
||||
} |
||||
return this.renderForm() |
||||
} |
||||
|
||||
if (one.id === null && serviceId.length > 0) |
||||
return <Redirect to={`/calendar`} /> |
||||
|
||||
// redirect to calendar list if submitted
|
||||
if (one.justSubmit === true && !fetching) { |
||||
return <Redirect to={`/calendar`} /> |
||||
} |
||||
return this.renderForm() |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
const mapStateToProps = state => ({ |
||||
calendar: state.calendar |
||||
}) |
||||
|
||||
const connectCalendarFom = connect( |
||||
mapStateToProps, |
||||
)(CalendarForm) |
||||
export default connectCalendarFom |
||||
@ -0,0 +1,112 @@
|
||||
import React, { Component } from 'react' |
||||
import styled from 'styled-components' |
||||
import { connect } from 'react-redux' |
||||
import { Link } from 'react-router-dom' |
||||
|
||||
import { getCalendar } from '../actions/calendar' |
||||
import store from '../store' |
||||
|
||||
|
||||
const StyledBox = styled.div` |
||||
padding: 1rem; |
||||
background: #fafafa; |
||||
` |
||||
|
||||
const GapBox = styled.span` |
||||
margin-right: 5px; |
||||
color: ${props => props.checked ? 'green' : 'gray'};; |
||||
` |
||||
|
||||
const FakeRow = styled.nav` |
||||
padding-top: 5px; |
||||
padding-bottom: 5px; |
||||
background: white; |
||||
margin-bottom: 1rem; |
||||
` |
||||
|
||||
|
||||
const CheckboxIcon = (props) => ( |
||||
<GapBox checked={props.checked}> |
||||
{props.checked === true && <span><i className="fas fa-check-square"></i></span>} |
||||
{props.checked !== true && <span><i className="fas fa-square"></i></span>} |
||||
</GapBox> |
||||
) |
||||
|
||||
class CalendarList extends Component { |
||||
|
||||
componentWillMount() { |
||||
const { count } = this.props.calendar |
||||
if (count === 0) |
||||
store.dispatch(getCalendar()) |
||||
} |
||||
|
||||
render() { |
||||
const { results } = this.props.calendar |
||||
const { match } = this.props |
||||
return ( |
||||
<StyledBox> |
||||
<h1 className="title">Service</h1> |
||||
<div className="columns"> |
||||
<div className="column is-12"> |
||||
<nav className="level is-mobile"> |
||||
<p className="level-item has-text-centered"> |
||||
<Link className="link is-info" to={`${match.url}/new`}> |
||||
<i className="fas fa-plus" /> New service |
||||
</Link> |
||||
</p> |
||||
</nav> |
||||
{results && Object.keys(results).map(i => ( |
||||
<FakeRow className="level panel" key={i}> |
||||
<div className="level-item has-text-centered"> |
||||
<div> |
||||
<p className="heading">Service ID</p> |
||||
<p className="title"><Link to={`${match.url}/${results[i].service_id}`}>{results[i].service_id}</Link></p> |
||||
</div> |
||||
</div> |
||||
<div className="level-item has-text-centered"> |
||||
<div> |
||||
<p className="heading">Start</p> |
||||
<p className="title">{results[i].start_date}</p> |
||||
</div> |
||||
</div> |
||||
<div className="level-item has-text-centered"> |
||||
<div> |
||||
<p className="heading">End</p> |
||||
<p className="title">{results[i].end_date}</p> |
||||
</div> |
||||
</div> |
||||
<div className="level-item has-text-centered"> |
||||
<div> |
||||
<p className="heading">M T W Th F Sa Su</p> |
||||
<p className="title"> |
||||
<CheckboxIcon disabled={true} checked={results[i].monday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].tuesday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].wednesday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].thursday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].friday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].saturday} /> |
||||
<CheckboxIcon disabled={true} checked={results[i].sunday} /> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</FakeRow> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</StyledBox> |
||||
) |
||||
} |
||||
} |
||||
|
||||
const mapStateToProps = state => ({ |
||||
calendar: state.calendar |
||||
}) |
||||
const connectCalendarList = connect( |
||||
mapStateToProps, |
||||
{}, |
||||
)(CalendarList) |
||||
|
||||
export default styled(connectCalendarList)` |
||||
color: palevioletred; |
||||
font-weight: bold; |
||||
` |
||||
@ -0,0 +1,30 @@
|
||||
import React from 'react' |
||||
|
||||
const HorizontalInput = (props) => ( |
||||
<div className="field is-horizontal"> |
||||
<div className="field-label is-normal"> |
||||
{/* <label for={`id_${props.fieldName}`} className="label">{props.label}</label> */} |
||||
</div> |
||||
<div className="field-body"> |
||||
<div className="field"> |
||||
<input |
||||
className="is-checkradio has-background-color is-info" |
||||
id={`id_${props.fieldName}`} |
||||
type="checkbox" |
||||
name={props.fieldName} |
||||
defaultChecked={props.value} |
||||
onChange={(evt) => { |
||||
let res = { |
||||
target: { |
||||
name: evt.target.name, |
||||
value: evt.target.checked |
||||
} |
||||
} |
||||
return props.handleChange(res)}} /> |
||||
<label htmlFor={`id_${props.fieldName}`}>{props.label}</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
export default HorizontalInput |
||||
@ -0,0 +1,30 @@
|
||||
import React from 'react' |
||||
import Flatpickr from 'react-flatpickr' |
||||
import 'flatpickr/dist/themes/airbnb.css' |
||||
|
||||
|
||||
const HorizontalDate = (props) => ( |
||||
<div className="field is-horizontal"> |
||||
<div className="field-label is-normal"> |
||||
<label className="label">{props.label}</label> |
||||
</div> |
||||
<div className="field-body"> |
||||
<div className="field"> |
||||
<p className="control"> |
||||
<Flatpickr |
||||
className="input" |
||||
defaultValue={props.value} |
||||
onChange={(date) => { |
||||
let evt = { |
||||
target: { |
||||
name: props.fieldName, |
||||
value: date[0].toISOString('YYYY-MM-DD').slice(0, 10) |
||||
}} |
||||
return props.handleChange(evt)}} /> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
export default HorizontalDate |
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react' |
||||
|
||||
const HorizontalInput = (props) => ( |
||||
<div className="field is-horizontal"> |
||||
<div className="field-label is-normal"> |
||||
<label className="label">{props.label}</label> |
||||
</div> |
||||
<div className="field-body"> |
||||
<div className="field"> |
||||
<p className="control"> |
||||
<input className="input" type={props.type || 'text'} |
||||
name={props.fieldName} |
||||
onChange={props.handleChange} |
||||
defaultValue={props.value} /> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
|
||||
export default HorizontalInput |
||||
Loading…
Reference in new issue