Skip to content

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

save project-platforms

parent aead0649
Show whitespace changes
Inline Side-by-side
Showing with 84 additions and 236 deletions
src/views/settings/projects/X_TableServerSide.js deleted 100644 → 0
View file @ aead0649
// ** React Imports
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_projects } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux'
// ** Third Party Components
import ReactPaginate from 'react-paginate'
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()
const store = useSelector(state => state.projectsettings)
// ** States
const [currentPage, setCurrentPage] = useState(1)
const [rowsPerPage, setRowsPerPage] = useState(7)
const [searchValue, setSearchValue] = useState('')
const [searchTerm, setSearchTerm] = useState('')
// ** Get data on mount
useEffect(() => {
dispatch(
getData_projects({
start: (currentPage - 1) * rowsPerPage,
length: rowsPerPage,
q: searchValue
})
)
}, [dispatch])
// ** Function to handle filter
const handleFilter = value => {
setSearchValue(value)
setSearchTerm(value)
dispatch(
getData_projects({
start: (currentPage - 1) * rowsPerPage,
length: rowsPerPage,
q: value
})
)
}
// ** Function to handle Pagination and get data
const handlePagination = page => {
dispatch(
getData_projects({
start: (page.selected) * rowsPerPage,
page: page.selected + 1,
length: rowsPerPage,
q: searchValue
})
)
setCurrentPage(page.selected + 1)
}
// ** Function to handle per page
const handlePerPage = e => {
dispatch(
getData_projects({
start: 0,
length: parseInt(e.target.value),
q: searchValue
})
)
setRowsPerPage(parseInt(e.target.value))
}
// ** Custom Pagination
const CustomPagination = () => {
const count = Number((store.totalProjects / rowsPerPage).toFixed(0))
return (
<ReactPaginate
previousLabel={''}
nextLabel={''}
breakLabel='...'
pageCount={count || 1}
marginPagesDisplayed={2}
pageRangeDisplayed={2}
activeClassName='active'
forcePage={currentPage !== 0 ? currentPage - 1 : 0}
onPageChange={page => handlePagination(page)}
pageClassName={'page-item'}
nextLinkClassName={'page-link'}
nextClassName={'page-item next'}
previousClassName={'page-item prev'}
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'
}
/>
)
}
// ** Table data to render
const dataToRender = () => {
const filters = {
q: searchValue
}
const isFiltered = Object.keys(filters).some(function (k) {
return filters[k].length > 0
})
if (store.allDataProjects.length > 0) {
return store.allDataProjects
} else if (store.allDataProjects.length === 0 && isFiltered) {
return []
} else {
return store.allDataProjects.slice(0, rowsPerPage)
}
}
return (
<Fragment>
<Card>
<CardHeader className='border-bottom'>
<CardTitle tag='h4'>Projects</CardTitle>
</CardHeader>
<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>
)
}
export default memo(DataTableServerSide)
src/views/settings/projects/X_tableHeader.js deleted 100644 → 0
View file @ aead0649
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/projects/edit/main.js
View file @ 61546266
......@@ -18,11 +18,16 @@ const ProjectsEdit = () => {
{ id } = useParams()
const onSubmitHandler = values => {
console.log('**')
// console.log(project)
console.log(values)
console.log('**')
dispatch(
updateProject({
id: values.id,
app_name: values.app_name,
customer_name: values.customer_name
customer_name: values.customer_name,
platforms: values.platforms
})
)
......
src/views/settings/projects/edit/plataform.js
View file @ 61546266
import { Fragment, useState, useEffect, memo } from 'react'
import { Fragment, useState, useEffect, useRef, memo } from 'react'
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, UncontrolledButtonDropdown } from 'reactstrap'
// ** Store & Actions
......@@ -9,15 +9,19 @@ import { getData_platforms } from '../../store/actions'
import { Lock, Edit, Trash2 } from 'react-feather'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import { circle } from 'leaflet'
const ProjectPlatform = ({dataElement, store}) => {
const ProjectPlatform = ({dataElement, setElement, store}) => {
const dispatch = useDispatch(),
{ register, errors, handleSubmit } = useForm()
const [plataforms, setPlataforms] = useState(null)
const [plataforms, setPlataforms] = useState(null),
[selectedOption, setSelectedOption] = useState(null),
platformsIDs = [0]
console.log(dataElement)
console.log(store)
// console.log(dataElement)
// console.log(store)
// ** Function to get user on mount
useEffect(() => {
......@@ -35,6 +39,23 @@ const ProjectPlatform = ({dataElement, store}) => {
}, [store.allDataPlatforms])
const handleGridChange = (value, index, field) => {
// console.log([value, index, field])
const newData = dataElement.platforms.map((platform, i) => {
if (i === index) {
if (field === 'menu_orientation') platform.pivot.menu_orientation = value
if (field === 'locked') platform.pivot.locked = value
if (field === 'menu_start_status') platform.pivot.menu_start_status = value
if (field === 'min_version') platform.pivot.min_version = value
}
})
setElement(
{
...dataElement
})
}
return !!dataElement ? (
<div clssName='permissions border mt-1'>
<h6 className='py-1 mx-1 mb-0 font-medium-2'>
......@@ -55,17 +76,28 @@ return !!dataElement ? (
<tbody>
{
!!dataElement && !!dataElement.platforms && dataElement.platforms.map(platform => {
!!dataElement && !!dataElement.platforms && dataElement.platforms.map((platform, index) => {
const plataformsOptions = platform.pivot,
locked = plataformsOptions.locked
platformsIDs.push(`${platform.id}`)
return (
<tr key={platform.id}>
<td>{platform.name}</td>
<td>
<CustomInput type='checkbox' id='locked' label='' defaultChecked={locked ? 'true' : ''} />
<CustomInput key={platform.id}
name={`locked${platform.id}`}
type='checkbox'
id={`locked${platform.id}`}
label='' defaultChecked={locked ? 'true' : ''}
onChange={(e) => handleGridChange(e.target.checked ? 1 : 0, index, 'locked')}
/>
</td>
<td>
<Input type='select' name='menu_orientation' id='menu_orientation' defaultValue={plataformsOptions && plataformsOptions.menu_orientation}>
<Input type='select' name='menu_orientation'
id='menu_orientation'
defaultValue={plataformsOptions && plataformsOptions.menu_orientation}
onChange={(e) => handleGridChange(e.target.value, index, 'menu_orientation')}
>
<option value='default'>default</option>
<option value='left'>left</option>
<option value='right'>right</option>
......@@ -82,6 +114,7 @@ return !!dataElement ? (
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.min_version}
className={classnames({ 'is-invalid': errors['min_version'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'min_version')}
/>
</td>
<td>
......@@ -93,6 +126,7 @@ return !!dataElement ? (
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.menu_start_status}
className={classnames({ 'is-invalid': errors['menu_start_status'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'menu_start_status')}
/>
</td>
</tr>
......@@ -110,9 +144,11 @@ return !!dataElement ? (
<Col md='4' sm='4'>
<FormGroup>
<Label for='addoption'>Add Platforms</Label>
<Input type='select' name='addoption' id='addoption' >
<Input type='select' name='addoption' id='addoption' onChange={(e) => setSelectedOption(e.target.value)}>>
<option></option>
{!!plataforms && plataforms.map(option => {
return <option key={option.id} value='{option.name}'>{option.name}</option>
return <option key={option.id} value={`${option.id}.${option.name}`}>{option.name}</option>
})}
</Input>
</FormGroup>
......@@ -120,7 +156,31 @@ return !!dataElement ? (
<Col md='3' sm='4'>
<FormGroup>
<Label for='addoptionbutton'>&nbsp;</Label>
<Button.Ripple color='secondary' name="addoptionbutton" outline onClick={() => {}} >
<Button.Ripple color='secondary' name="addoptionbutton" outline asyncOptions={e => console.log(e.getOptions)
} onClick={() => {
if (!selectedOption) return
const plataform = selectedOption.split('.')
if (platformsIDs.indexOf(plataform[0]) > 0) return
const elementAdded = dataElement.platforms.push({
name:plataform[1],
id: plataform[0],
key: plataform[0],
pivot:{
locked: 0,
menu_orientation: "default",
menu_start_status: null,
min_version: 0
}
})
setElement(
{
...dataElement,
elementAdded
}
)
}} >
add
</Button.Ripple>
</FormGroup>
......
src/views/settings/projects/edit/projectCard.js
View file @ 61546266
......@@ -72,7 +72,12 @@ const handleError = (text) => {
// customer_name: values.customer_name
// })
// )
onSubmitHandler(values)
const submitProject = {
...dataProject,
app_name: values.app_name,
customer_name: values.customer_name
}
onSubmitHandler(submitProject)
}
}
......@@ -164,7 +169,7 @@ return (
</Col> */}
<Col sm='12'>
<ProjectPlatform dataElement={dataProject} store={store} />
<ProjectPlatform dataElement={dataProject} setElement={setProjectData} store={store} />
</Col>
<Col className='d-flex flex-sm-row flex-column mt-2' sm='12'>
<Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
......
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