Skip to content

C
cms
Commit 7a5cde5b authored by PDuarte's avatar PDuarte
Browse files
Options

interface for adding project

parent 2e0ee039
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 49 deletions
src/router/routes/Settings.js
View file @ 7a5cde5b
......@@ -16,6 +16,13 @@ const SettingsRoutes = [
navLink: '/settings/projects/edit'
}
},
{
path: '/settings/projects/add',
component: lazy(() => import('../../views/settings/projects/add')),
meta: {
navLink: '/settings/projects/add'
}
},
{
path: '/settings/projects',
component: lazy(() => import('../../views/settings/projects'))
......
src/views/settings/projects/TableServerSide.js
View file @ 7a5cde5b
......@@ -14,6 +14,8 @@ import { ChevronDown } from 'react-feather'
import DataTable from 'react-data-table-component'
import { Card, CardHeader, CardTitle, Input, Label, Row, Col } from 'reactstrap'
import CustomHeader from './tableHeader'
const DataTableServerSide = () => {
// ** Store Vars
const dispatch = useDispatch()
......@@ -23,6 +25,7 @@ const DataTableServerSide = () => {
const [currentPage, setCurrentPage] = useState(1)
const [rowsPerPage, setRowsPerPage] = useState(7)
const [searchValue, setSearchValue] = useState('')
const [searchTerm, setSearchTerm] = useState('')
// ** Get data on mount
useEffect(() => {
......@@ -48,6 +51,7 @@ const DataTableServerSide = () => {
)
}
// ** Function to handle Pagination and get data
const handlePagination = page => {
dispatch(
......@@ -94,6 +98,9 @@ const DataTableServerSide = () => {
previousLinkClassName={'page-link'}
pageLinkClassName={'page-link'}
breakClassName='page-item'
buttons={
['copy']
}
breakLinkClassName='page-link'
containerClassName={
'pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1'
......@@ -128,50 +135,26 @@ const DataTableServerSide = () => {
<CardHeader className='border-bottom'>
<CardTitle tag='h4'>Projects</CardTitle>
</CardHeader>
<Row className='mx-0 mt-1 mb-50'>
<Col sm='6'>
<div className='d-flex align-items-center'>
<Label for='sort-select'>show</Label>
<Input
className='dataTable-select'
type='select'
id='sort-select'
value={rowsPerPage}
onChange={e => handlePerPage(e)}
>
<option value={7}>7</option>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
<option value={75}>75</option>
<option value={100}>100</option>
</Input>
<Label for='sort-select'>entries</Label>
</div>
</Col>
<Col className='d-flex align-items-center justify-content-sm-end mt-sm-0 mt-1' sm='6'>
<Label className='mr-1' for='search-input'>
Search
</Label>
<Input
className='dataTable-filter'
type='text'
bsSize='sm'
id='search-input'
value={searchValue}
onChange={handleFilter}
/>
</Col>
</Row>
<DataTable
noHeader
pagination
subHeader
responsive
paginationServer
className='react-dataTable'
columns={serverSideColumns}
sortIcon={<ChevronDown size={10} />}
paginationComponent={CustomPagination}
data={dataToRender()}
subHeaderComponent={
<CustomHeader
linkAddButton='/settings/projects/add'
handlePerPage={handlePerPage}
rowsPerPage={rowsPerPage}
searchTerm={searchTerm}
handleFilter={handleFilter}
/>
}
/>
</Card>
</Fragment>
......
src/views/settings/projects/add/index.js 0 → 100644
View file @ 7a5cde5b
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Store & Actions
import { addProject } from '../../store/actions'
import { useDispatch } from 'react-redux'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
import { isObjEmpty } from '@utils'
// ** Tables
import ProjectCard from '../edit/projectCard'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
const dispatch = useDispatch()
const onSubmitHandler = values => {
dispatch(
addProject({
id: values.id,
app_name: values.app_name,
customer_name: values.customer_name
})
)
}
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Projects' />
<Row>
<Col sm='12'>
<Link to="/settings/projects">Back to Projects</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div class="card">
<div class="card-header">
<h4 class="card-title">Project</h4>
</div>
<div class="card-body">
<ProjectCard selectedProject={{
id: '<generate>',
app_name: '',
customer_name: ''
}}
onSubmitHandler={onSubmitHandler}
/>
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/settings/projects/edit/main.js
View file @ 7a5cde5b
......@@ -13,9 +13,20 @@ import ProjectCard from './projectCard'
const ProjectsEdit = () => {
// ** States & Vars
const store = useSelector(state => state.projectsettings),
[dataProject, setProjectData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
[dataProject, setProjectData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
const onSubmitHandler = values => {
dispatch(
updateProject({
id: values.id,
app_name: values.app_name,
customer_name: values.customer_name
})
)
}
// ** Function to get user on mount
useEffect(() => {
......@@ -32,7 +43,10 @@ const ProjectsEdit = () => {
return store.selectedProject !== null && store.selectedProject !== undefined ? (
<ProjectCard selectedProject={store.selectedProject} />
<ProjectCard
selectedProject={store.selectedProject}
onSubmitHandler={onSubmitHandler}
/>
) : (
<Alert color='info'>
<h4 className='alert-heading'>Loading Project</h4>
......
src/views/settings/projects/edit/projectCard.js
View file @ 7a5cde5b
......@@ -41,7 +41,7 @@ const SuccessProgressToast = () => (
)
const ProjectCard = ({ selectedProject }) => {
const ProjectCard = ({ selectedProject, onSubmitHandler }) => {
const store = useSelector(state => state.projectsettings)
const MySwal = withReactContent(Swal)
......@@ -62,16 +62,17 @@ const handleError = (text) => {
const [dataProject, setProjectData] = useState(null),
{ register, errors, handleSubmit } = useForm(),
dispatch = useDispatch(),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
onSubmit = values => {
if (isObjEmpty(errors)) {
dispatch(
updateProject({
id: values.id,
app_name: values.app_name,
customer_name: values.customer_name
})
)
// dispatch(
// updateProject({
// id: values.id,
// app_name: values.app_name,
// customer_name: values.customer_name
// })
// )
onSubmitHandler(values)
}
}
......
src/views/settings/projects/tableHeader.js 0 → 100644
View file @ 7a5cde5b
import { Card, CardHeader, CardTitle, CardBody, Input, Row, Col, Label, CustomInput, Button } from 'reactstrap'
import { Link } from 'react-router-dom'
// ** Table Header
const CustomHeader = ({ linkAddButton, handlePerPage, rowsPerPage, handleFilter, searchTerm }) => {
return (
<div className='invoice-list-table-header w-100 mr-1 ml-50 mt-2 mb-75'>
<Row>
<Col xl='6' className='d-flex align-items-center p-0'>
<div className='d-flex align-items-center w-100'>
<Label for='rows-per-page'>Show</Label>
<CustomInput
className='form-control mx-50'
type='select'
id='rows-per-page'
value={rowsPerPage}
onChange={handlePerPage}
style={{
width: '5rem',
padding: '0 0.8rem',
backgroundPosition: 'calc(100% - 3px) 11px, calc(100% - 20px) 13px, 100% 0'
}}
>
<option value='10'>10</option>
<option value='25'>25</option>
<option value='50'>50</option>
</CustomInput>
<Label for='rows-per-page'>Entries</Label>
</div>
</Col>
<Col
xl='6'
className='d-flex align-items-sm-center justify-content-lg-end justify-content-start flex-lg-nowrap flex-wrap flex-sm-row flex-column pr-lg-1 p-0 mt-lg-0 mt-1'
>
<div className='d-flex align-items-center mb-sm-0 mb-1 mr-1'>
<Label className='mb-0' for='search-invoice'>
Search:
</Label>
<Input
id='search-invoice'
className='ml-50 w-100'
type='text'
value={searchTerm}
onChange={e => handleFilter(e.target.value)}
/>
</div>
<Button.Ripple color='primary'>
<Link to={linkAddButton} className="btn-primary">
Add New Project
</Link>
</Button.Ripple>
</Col>
</Row>
</div>
)
}
export default CustomHeader
\ No newline at end of file
src/views/settings/store/actions/index.js
View file @ 7a5cde5b
......@@ -113,6 +113,28 @@ export const updateProject = project => {
}
}
export const addProject = project => {
return (dispatch, getState) => {
axios
.post(`${process.env.REACT_APP_API}/api/projects/${project.id}`, project)
.then(response => {
dispatch({
type: 'ADD_PROJECT',
project
})
})
.then(() => {
dispatch(setSaveSatus(true))
// dispatch(getProject(project.id))
// dispatch(getData_projects())
})
.catch(err => {
dispatch(setErrorMsg(err.response.data.message))
console.log(err.response.data)
})
}
}
// ** Get table Data platforms
export const getData_platforms = params => {
......
src/views/settings/store/reducer/index.js
View file @ 7a5cde5b
......@@ -65,7 +65,10 @@ const settings = (state = initialState, action) => {
}
case 'UPDATE_PROJECT':
return { ...state }
return { ...state }
case 'ADD_PROJECT':
return { ...state }
case 'GET_DATA_PLATFORMS':
return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment