workshopreact

WorkShop WebApplication ดว้ ย React : 251
โคด้ ตอ่ จากด้านบน

</tr>
</thead>
<tbody>

{/* loop ขอ้ มูลทสี่ ่งมาจาก props */}
{data && data.map(e => {

let statusText = 'รอซ่อม'
if (e.status === 1) {

statusText = 'กำ� ลังด�ำเนนิ การ'
} else if (e.status === 2) {

statusText = 'ซ่อมเสรจ็ '
}
return (

<tr key={e.id}>
{/* สว่ นน้ใี ช้ moment เพื่อแปลงวันที่ให้เปน็ รูปแบบท่ีต้องการ */}
<td e="text-center">{moment(e.doc_date).format('YYYY-MM-DD')} {e.doc_time}</td>
<td>{e.detail}</td>
<td className="text-center">{statusText}</td>
<td>{e.location_name}</td>
<td className="text-center">
<Button color="success" size="sm"
onClick={() => buttonRepair(e.id)}>ปฏบิ ัตงิ าน</Button>
</td>

</tr>
)
})}
</tbody>
</Table>
)
}
}

export default WorkTableRepair

สรา้ งหน้าจอบนั ทึกงานซ่อม

สร้างไฟล์ใหม่ไว้ที่ src/pages/WorkFormRepair.js แล้วพิมพโ์ คด้ ดา้ นล่างน้ี

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { browserHistory } from 'react-router'
import { Field, reduxForm } from 'redux-form';
import moment from 'moment'
import { Button } from 'reactstrap';
import { getWork, saveRepair } from '../redux/actions/workActions'
import { getLocation } from '../redux/actions/locationActions'
import { getUser } from '../redux/actions/userActions'
import renderField from '../Utils/renderFields'

มีโค้ดตอ่ ด้านลา่ ง
251

WorkShop WebApplication ด้วย React : 252
โคด้ ตอ่ จากดา้ นบน

class WorkFormRepair extends Component {
//โหลดขอ้ มูลใส่ในฟอรม์ โดยเช็คกอ่ นว่ามกี ารสง่ id มาหรือไม่
//ถา้ สง่ id มาใหส้ ่ัง dispatch get เอาขอ้ มลู งานซอ่ ม
componentDidMount() {
const workId = (this.props.params.id) ? this.props.params.id : 0
this.props.dispatch(getWork(workId)).then(() => {
//เมอ่ื โหลดขอ้ มูลเสร็จกจ็ ะเรยี กข้อมลู สถานทต่ี าม id ท่ีไดจ้ ากงานซอ่ มเพือ่ แสดงชื่อของสถานท่ี
this.props.dispatch(getLocation(this.props.work.data.location_id))
//และเรียกขอ้ มลู ผ้ใู ช id ที่ได้จากงานซอ่ มเพ่อื แสดงช่ือผแู้ จง้ ซอ่ ม
this.props.dispatch(getUser(this.props.work.data.user_id))
this.handleInitialize()
})
}

//กำ� หนด value ให้กบั ฟอรม์ ท่ไี ดจ้ ากการ get ขอ้ มูล
handleInitialize() {

let initData
initData = this.props.work.data
//status เปน็ ตวั เลขตอ้ งแปลงเปน็ ตวั อกั ษร
initData.status = this.props.work.data.status.toString()
this.props.initialize(initData);
}

render() {
const { handleSubmit, work, location, user } = this.props
const { data } = work

//ตอ้ งเชค็ error ทุกๆ data ทเ่ี ราโหลดมาเพอื่ ไม่ให้โปรแกรมข้นึ หน้าจอ error ทีไ่ มเ่ หมาะสม
if (work.isRejected) {

return <div className="alert alert-danger">Error: {data}</div>
}
if (location.isRejected) {

return <div className="alert alert-danger">Error: {location.data}</div>
}
if (user.isRejected) {

return <div className="alert alert-danger">Error: {user.data}</div>
}
if (work.isLoading || location.isLoading || user.isLoading) {

return <div>Loading...</div>
}

const datetime = `${moment(data.doc_date).format('YYYY-MM-DD')} ${data.doc_time}`
const datetimeRepair = (data.status_date) ?

`${moment(data.status_date).format('YYYY-MM-DD')} ${data.status_date}` : ''

return ( มีโค้ดตอ่ ด้านล่าง
<div> 252
<h4>ปฏิบัตงิ านซ่อม</h4>
<form>
<div className="form-group row">
<label className="col-sm-3 col-form-label">สถานะ</label>

WorkShop WebApplication ดว้ ย React : 253

<div className="col-sm-9"> โค้ดตอ่ จากด้านบน
<div className="form-check form-check-inline">
<label className="form-check-label"> มีโคด้ ตอ่ ดา้ นล่าง
<Field
className="form-check-input"
name="status"
component="input"
type="radio"
value='0'
/>{' '}
รอซ่อม
</label>
</div>
<div className="form-check form-check-inline">
<label className="form-check-label">
<Field
className="form-check-input"
name="status"
component="input"
type="radio"
value="1"
/>{' '}กำ� ลงั ดำ� เนินการ
</label>
</div>
<div className="form-check form-check-inline">
<label className="form-check-label">
<Field
className="form-check-input"
name="status"
component="input"
type="radio"
value="2"
/>{' '}ซ่อมเสรจ็
</label>
</div>

</div>
</div>
<div className="form-group row">

<label className="col-sm-3 col-form-label">วันทีแ่ จง้ </label>
<div className="col-sm-9">

<input type="text" readOnly className="form-control-plaintext"
value={datetime} />

</div>
</div>
<div className="form-group row">

<label className="col-sm-3 col-form-label">ผู้แจง้ ซ่อม</label>
<div className="col-sm-9">

<input type="text" readOnly className="form-control-plaintext"
value={user.data.name} />

</div>
</div>

253

WorkShop WebApplication ดว้ ย React : 254

<div className="form-group row"> โค้ดต่อจากดา้ นบน

<label className="col-sm-3 col-form-label">สถานท<ี่ /label>
<div className="col-sm-9">
<input type="text" readOnly className="form-control-plaintext"
value={location.data.name} />
</div>
</div>
<div className="form-group row">
<label className="col-sm-3 col-form-label">ปญั หา</label>
<div className="col-sm-9">
<input type="text" readOnly className="form-control-plaintext"
value={data.detail} />
</div>
</div>
<div className="form-group row">
<label className="col-sm-3 col-form-label">โทรศพั ท์ตดิ ตอ่ </label>
<div className="col-sm-9">
<input type="text" readOnly className="form-control-plaintext"
value={data.phone} />
</div>
</div>
<div className="form-group row">
<label className="col-sm-3 col-form-label">วันที่ซ่อม</label>
<div className="col-sm-9">
<input type="text" readOnly className="form-control-plaintext"
value={datetimeRepair} />
</div>
</div>
<Field name="work_detail" component={renderField} label="การซ่อม" textarea />
<hr />
<Button color="primary" onClick={handleSubmit(this.onSubmit)}>บันทึก</Button>{' '}
<Button color="secondary" onClick={browserHistory.goBack}>ยกเลกิ </Button>
</form>
</div>
)
}

//ฟงั ก์ชนั บนั ทึกข้อมูลการซ่อม
onSubmit = (values) => {

this.props.dispatch(saveRepair(values)).then(() => {
browserHistory.push('/workrepair')

})
}

}

function validate(values) { มีโค้ดต่อด้านลา่ ง 254
const errors = {};
if (!values.work_detail) {
errors.work_detail = 'ตอ้ งกรอกรายละเอียดการซอ่ ม';
}
return errors;

}

const form = reduxForm({ WorkShop WebApplication ด้วย React : 255
form: 'workUser', โคด้ ต่อจากดา้ นบน
validate

})

function mapStateToProps(state) {
return {
work: state.workReducers.work,
location: state.locationReducers.location,
user: state.userReducers.user
}

}

export default connect(mapStateToProps)(form(WorkFormRepair))

ก�ำหนด Route สำ� หรับหน้าจอฟอรม์ บันทกึ การซอ่ ม



แกไ้ ขไฟล์ src/routes.js เปน็ โคด้ ด้านล่างน้คี รบั

import App from './pages/App'
import Home from './pages/Home'
import RequireAuth from './pages/Auth/Authentication'
import RequireAuthAdmin from './pages/Auth/AuthenticationAdmin'
import Signin from './pages/Auth/Signin'
import Signout from './pages/Auth/Signout'
import Work from './pages/Work'
import WorkRepair from './pages/WorkRepair'
import User from './pages/User'
import Location from './pages/Location'
import WorkFormUser from './pages/WorkFormUser'
import WorkDetail from './pages/WorkDetail'
import WorkFormRepair from './pages/WorkFormRepair'

const routes = [{ 255
path: '/',
component: App,
indexRoute: { component: Home },
childRoutes: [
{ path: 'signin', component: Signin },
{ path: 'signout', component: Signout },
{ path: 'work', component: RequireAuth(Work) },
{ path: 'work/new', component: RequireAuth(WorkFormUser) },
{ path: 'work/update/:id', component: RequireAuth(WorkFormUser) },
{ path: 'work/detail/:id', component: RequireAuth(WorkDetail) },
{ path: 'workrepair', component: RequireAuth(RequireAuthAdmin(WorkRepair)) },
{ path: 'work/repair/:id', component: RequireAuth(RequireAuthAdmin(WorkFormRepair)) },
{ path: 'user', component: RequireAuth(RequireAuthAdmin(User))},
{ path: 'location', component: RequireAuth(RequireAuthAdmin(Location))},
]

}] มโี ค้ดตอ่ ดา้ นลา่ ง

WorkShop WebApplication ดว้ ย React : 256
โคด้ ต่อจากด้านบน

export default routes

ตอนน้ีระบบเรากพ็ รอ้ มใชง้ านแล้วครับ ลองดูที่ browser แลว้ ทดลองใชง้ าน กถ็ ือเปน็ อันเสร็จสนิ้ สำ� หรับ Work-
Shop เว็บระบบแจ้งซอ่ ม v. MySQL ไปแล้วนะครบั อาจจะยากไปหนอ่ ยนะครับ แต่ยังไงก็ตอ้ งฝกึ ทำ� หลายๆ คร้ังจะไดเ้ ข้าใจ
การทำ� งานกบั ฐานขอ้ มลู ไดม้ ากขน้ึ

256