import Link from 'next/link' import { useState } from 'react' import { useLoading } from 'next-on-rails/utils' import { getInitialResources, useResources, useResourceForm } from 'next-on-rails/resources'
import <%= controller_class_name %>Details from '../../components/<%= plural_table_name %>/details' import <%= controller_class_name %>Form from '../../components/<%= plural_table_name %>/form'
const <%= controller_class_name %>Crud = props => {
const [editMode, setEditMode] = useState(false) const loading = useLoading() const [<%= plural_table_name.camelize(:lower) %>, <%= singular_table_name.camelize(:lower) %>, { show, create, update, destroy }, dispatch] = useResources( '<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= plural_table_name.camelize(:lower) %>[0] ) const clickShow = id => event => { show(id) setEditMode(false) } const clickEdit = id => event => { show(id) setEditMode(true) } const [submitForCreateAction, getCreateActionError] = useResourceForm(create) const [submitForUpdateAction, getUpdateActionError] = useResourceForm(update) const clickDestroy = id => event => destroy(id) const rowBg = id => (<%= singular_table_name.camelize(:lower) %> && <%= singular_table_name.camelize(:lower) %>.id === id ? 'bg-light' : '') return ( <div> <div className="position-absolute">{loading ? 'Loading...' : null}</div> <div className="container pt-4"> <h1 className="mb-5"><%= controller_class_name.titleize %></h1> <div className="row"> <div className="col"> <h3>List <%= controller_class_name.titleize %></h3> {<%= plural_table_name.camelize(:lower) %>.length > 0 ? ( <table className="table"> <thead> <tr> <th>ID</th>
<% attributes_names.each do |attribute_name| -%>
<th><%= attribute_name.titleize %></th>
<% end -%>
<th></th> </tr> </thead> <tbody> {<%= plural_table_name.camelize(:lower) %>.map(<%= singular_table_name.camelize(:lower) %> => ( <tr key={<%= singular_table_name.camelize(:lower) %>.id} className={rowBg(<%= singular_table_name.camelize(:lower) %>.id)}> <td>{<%= singular_table_name.camelize(:lower) %>.id}</td>
<% attributes_names.each do |attribute_name| -%>
<td>{<%= singular_table_name.camelize(:lower) %>.<%= attribute_name.camelize(:lower) %>}</td>
<% end -%>
<td className="text-right"> <div className="btn-group"> <button onClick={clickShow(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info"> Show </button> <button onClick={clickEdit(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info"> Edit </button> <button className="btn btn-sm btn-danger" onClick={clickDestroy(<%= singular_table_name.camelize(:lower) %>.id)}> Delete </button> </div> </td> </tr> ))} </tbody> </table> ) : ( <p>No <%= controller_class_name.titleize %> Found</p> )} </div> <div className="col"> {<%= singular_table_name.camelize(:lower) %> ? ( <React.Fragment> <h3>{`<%= class_name %> #${<%= singular_table_name.camelize(:lower) %>.id}`}</h3> {editMode ? ( <<%= controller_class_name %>Form key={<%= singular_table_name.camelize(:lower) %>.id} <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} submit={submitForUpdateAction} getError={getUpdateActionError} /> ) : ( <<%= controller_class_name %>Details <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} /> )} </React.Fragment> ) : ( <p>No <%= class_name.titleize %> Selected</p> )} </div> </div> <hr /> <div> <h3>Create New <%= class_name.titleize %></h3> <<%= controller_class_name %>Form submit={submitForCreateAction} getError={getCreateActionError} /> </div> <hr /> <ul className="nav"> <li className="nav-item"> <Link href="/<%= plural_table_name %>"> <a className="nav-link">List <%= controller_class_name.titleize %></a> </Link> </li> <li className="nav-item"> <Link href="/"> <a className="nav-link">Go to Home</a> </Link> </li> </ul> </div> </div> )
}
<%= controller_class_name %>Crud.getInitialProps = getInitialResources('<%= plural_table_name.camelize(:lower) %>')
export default <%= controller_class_name %>Crud