Skip to content

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

project stable, starting plaforms

parent c2849a18
Hide whitespace changes
Inline Side-by-side
Showing with 591 additions and 83 deletions
src/views/settings/platforms/TableServerSidePlatforms.js → src/@core/components/datatable/index.js
View file @ 47e589b5
// ** React Imports
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_platforms } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { 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'
// import CustomHeader from './tableHeader'
const DataTableServerSidePlatforms = () => {
const DataTableServerSide = ({allData, total, getData, serverSideColumns, linkAddButton}) => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.Settings)
// ** 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_platforms({
page: currentPage,
perPage: rowsPerPage,
getData({
start: (currentPage - 1) * rowsPerPage,
length: rowsPerPage,
q: searchValue
})
)
}, [dispatch])
// ** Function to handle filter
const handleFilter = e => {
setSearchValue(e.target.value)
const handleFilter = value => {
setSearchValue(value)
setSearchTerm(value)
dispatch(
getData_platforms({
page: currentPage,
perPage: rowsPerPage,
q: e.target.value
getData({
start: (currentPage - 1) * rowsPerPage,
length: rowsPerPage,
q: value
})
)
}
// ** Function to handle Pagination and get data
const handlePagination = page => {
dispatch(
getData_platforms({
getData({
start: (page.selected) * rowsPerPage,
page: page.selected + 1,
perPage: rowsPerPage,
length: rowsPerPage,
q: searchValue
})
)
......@@ -63,9 +66,9 @@ const DataTableServerSidePlatforms = () => {
// ** Function to handle per page
const handlePerPage = e => {
dispatch(
getData_platforms({
page: currentPage,
perPage: parseInt(e.target.value),
getData({
start: 0,
length: parseInt(e.target.value),
q: searchValue
})
)
......@@ -74,8 +77,7 @@ const DataTableServerSidePlatforms = () => {
// ** Custom Pagination
const CustomPagination = () => {
const count = Number((store.total / rowsPerPage).toFixed(0))
const count = Number((total / rowsPerPage).toFixed(0))
return (
<ReactPaginate
previousLabel={''}
......@@ -94,6 +96,9 @@ const DataTableServerSidePlatforms = () => {
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'
......@@ -111,72 +116,46 @@ const DataTableServerSidePlatforms = () => {
const isFiltered = Object.keys(filters).some(function (k) {
return filters[k].length > 0
})
console.log(store)
return store.allDataPlatforms.slice(0, rowsPerPage)
// if (store.data.length > 0) {
// return store.data
// } else if (store.data.length === 0 && isFiltered) {
// return []
// } else {
// return store.allData.slice(0, rowsPerPage)
// }
if (allData.length > 0) {
return allData
} else if (allData.length === 0 && isFiltered) {
return []
} else {
return allData.slice(0, rowsPerPage)
}
}
return (
<Fragment>
<Card>
<CardHeader className='border-bottom'>
<CardTitle tag='h4'>Platforms</CardTitle>
<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={linkAddButton}
handlePerPage={handlePerPage}
rowsPerPage={rowsPerPage}
searchTerm={searchTerm}
handleFilter={handleFilter}
/>
}
/>
</Card>
</Fragment>
)
}
export default memo(DataTableServerSidePlatforms)
export default memo(DataTableServerSide)
src/views/settings/platforms/add/index.js 0 → 100644
View file @ 47e589b5
// ** 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">New 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/platforms/edit/index.js 0 → 100644
View file @ 47e589b5
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// ** Tables
import ProjectsEdit from './main'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
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">
<ProjectsEdit />
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/settings/platforms/edit/main.js 0 → 100644
View file @ 47e589b5
import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom'
// ** Store & Actions
import { getProject, updateProject } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { Alert } from 'reactstrap'
import ProjectCard from './projectCard'
const ProjectsEdit = () => {
// ** States & Vars
const store = useSelector(state => state.projectsettings),
[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(() => {
dispatch(getProject(id))
}, [dispatch])
// ** Update user image on mount or change
useEffect(() => {
if (store.selectedProject !== null || (store.selectedProject !== null && dataProject !== null && store.selectedProject.id !== dataProject.id)) {
return setProjectData(store.selectedProject)
}
}, [store.selectedProject])
return store.selectedProject !== null && store.selectedProject !== undefined ? (
<ProjectCard
selectedProject={store.selectedProject}
onSubmitHandler={onSubmitHandler}
/>
) : (
<Alert color='info'>
<h4 className='alert-heading'>Loading Project</h4>
<div className='alert-body'>
If Project with id: {id} doesn't exist. Check list of all Projects: <Link to='/settings/projects'>Projects List</Link>
</div>
</Alert>
)
}
export default ProjectsEdit
src/views/settings/platforms/edit/plataform.js 0 → 100644
View file @ 47e589b5
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert } from 'reactstrap'
import { Lock, Edit, Trash2 } from 'react-feather'
const ProjectPlatform = () => {
return (
<div clssName='permissions border mt-1'>
<h6 className='py-1 mx-1 mb-0 font-medium-2'>
<Lock size={18} className='mr-25' />
<span className='align-middle'>Platforms</span>
</h6>
<Table borderless striped responsive>
<thead className='thead-light'>
<tr>
<th>Platforms</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr>
<td>IOS</td>
<td>
<CustomInput type='checkbox' id='admin-1' label='' defaultChecked />
</td>
</tr>
<tr>
<td>Android</td>
<td>
<CustomInput type='checkbox' id='staff-1' label='' />
</td>
</tr>
<tr>
<td>Android Tv</td>
<td>
<CustomInput type='checkbox' id='author-1' label='' defaultChecked />
</td>
</tr>
<tr>
<td>Roku</td>
<td>
<CustomInput type='checkbox' id='contributor-1' label='' />
</td>
</tr>
<tr>
<td>STV</td>
<td>
<CustomInput type='checkbox' id='user-1' label='' />
</td>
</tr>
</tbody>
</Table>
</div>
)
}
export default ProjectPlatform
src/views/settings/platforms/edit/projectCard.js 0 → 100644
View file @ 47e589b5
// ** React Imports
import { useState, useEffect, Fragment } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { toast } from 'react-toastify'
import Avatar from '@components/avatar'
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, CardHeader, CardTitle, CardText } from 'reactstrap'
import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
// ** Store & Actions
import { updateProject, resetResults, getProject } from '../../store/actions'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import ProjectPlatform from './plataform'
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
const SuccessProgressToast = () => (
<Fragment>
<div className='toastify-header'>
<div className='title-wrapper'>
<Avatar size='sm' color='success' icon={<Check size={12} />} />
<h6 className='toast-title'>Saved !</h6>
</div>
<small className='text-muted'></small>
</div>
<div className='toastify-body'>
<span role='img' aria-label='toast-text'>
👋 Good job.
</span>
</div>
</Fragment>
)
const ProjectCard = ({ selectedProject, onSubmitHandler }) => {
const store = useSelector(state => state.projectsettings)
const MySwal = withReactContent(Swal)
const handleError = (text) => {
return MySwal.fire({
title: 'Error!',
text,
icon: 'error',
customClass: {
confirmButton: 'btn btn-primary'
},
buttonsStyling: false
})
}
const [dataProject, setProjectData] = useState(null),
{ register, errors, handleSubmit } = useForm(),
dispatch = useDispatch(),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
onSubmit = values => {
if (isObjEmpty(errors)) {
// dispatch(
// updateProject({
// id: values.id,
// app_name: values.app_name,
// customer_name: values.customer_name
// })
// )
onSubmitHandler(values)
}
}
useEffect(() => {
if (selectedProject !== null || (selectedProject !== null && dataProject !== null && selectedProject.id !== dataProject.id)) {
return setProjectData(selectedProject)
}
}, [selectedProject])
useEffect(() => {
if (store.errorMsg !== '') {
handleError(store.errorMsg)
dispatch(resetResults())
}
}, [store.errorMsg])
useEffect(() => {
if (store.saveSucces) {
notifySuccessProgress()
dispatch(resetResults())
}
}, [store.saveSucces])
return (
<Fragment>
<Form
onSubmit={handleSubmit(onSubmit)}
>
<Row>
<Col md='4' sm='12'>
<FormGroup>
<Label for='email'>ID</Label>
<Input
readOnly={true}
type='text'
name='id'
id='id'
innerRef={register({ required: true })}
placeholder='id'
defaultValue={dataProject && dataProject.id}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='app_name'>Project Name</Label>
<Input
type='text'
name='app_name'
id='app_name'
innerRef={register({ required: true })}
placeholder='Project Name'
defaultValue={dataProject && dataProject.app_name}
className={classnames({ 'is-invalid': errors['app_name'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='customer_name'>Client Name</Label>
<Input
type='text'
name='customer_name'
id='customer_name'
innerRef={register({ required: true })}
placeholder='Client Name'
defaultValue={dataProject && dataProject.customer_name}
className={classnames({ 'is-invalid': errors['customer_name'] })}
/>
</FormGroup>
</Col>
{/* <Col md='4' sm='12'>
<FormGroup>
<Label for='email'>Email</Label>
<Input disabled='disabled' type='text' id='email' placeholder='Email' defaultValue={ProjectData && ProjectData.email} />
</FormGroup>
</Col> */}
{/* <Col md='4' sm='12'>
<FormGroup>
<Label for='status'>Status</Label>
<Input type='select' name='status' id='status' defaultValue={ProjectData && ProjectData.status}>
<option value='pending'>Pending</option>
<option value='active'>Active</option>
<option value='inactive'>Inactive</option>
</Input>
</FormGroup>
</Col> */}
<Col sm='6'>
<ProjectPlatform />
</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'>
Save Changes
</Button.Ripple>
{/* <Button.Ripple color='secondary' outline onClick={() => dispatch(getProject(selectedProject.id))} >
Reset
</Button.Ripple> */}
</Col>
</Row>
</Form>
</Fragment>
)
}
export default ProjectCard
\ No newline at end of file
src/views/settings/platforms/index.js
View file @ 47e589b5
......@@ -8,22 +8,21 @@ import Breadcrumbs from '@components/breadcrumbs'
import { Row, Col } from 'reactstrap'
// ** Tables
import TableServerSidePlaforms from './TableServerSidePlatforms'
import DataTable from './table'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Platforms' />
<Row>
<Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Projects' />
<Row>
<Col sm='12'>
<TableServerSidePlaforms />
<DataTable />
</Col>
</Row>
</Fragment>
</Fragment>
)
}
}
export default Tables
src/views/settings/platforms/table.js 0 → 100644
View file @ 47e589b5
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_platforms } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import DataTableServerSide from '@components/datatable'
const DataTable = () => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.projectsettings)
return (
<DataTableServerSide
allData={store.allDataPlatforms}
getData={getData_platforms}
serverSideColumns={serverSideColumns}
linkAddButton='/settings/platforms/add'
total={store.totalPlatforms}
/>
)
}
export default memo(DataTable)
src/views/settings/projects/X_tableHeader.js 0 → 100644
View file @ 47e589b5
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/index.js
View file @ 47e589b5
......@@ -8,7 +8,8 @@ import Breadcrumbs from '@components/breadcrumbs'
import { Row, Col } from 'reactstrap'
// ** Tables
import TableServerSide from './TableServerSide'
// import TableServerSide from './TableServerSide'
import DataTable from './table'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
......@@ -18,11 +19,12 @@ const Tables = () => {
<Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Projects' />
<Row>
<Col sm='12'>
<TableServerSide />
{/* <TableServerSide /> */}
<DataTable />
</Col>
</Row>
</Fragment>
</Fragment>
)
}
}
export default Tables
src/views/settings/projects/table.js 0 → 100644
View file @ 47e589b5
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'
import DataTableServerSide from '@components/datatable'
const DataTable = () => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.projectsettings)
return (
<DataTableServerSide
allData={store.allDataProjects}
getData={getData_projects}
serverSideColumns={serverSideColumns}
linkAddButton='/settings/projects/add'
total={store.totalProjects}
/>
)
}
export default memo(DataTable)
src/views/settings/store/actions/index.js
View file @ 47e589b5
......@@ -144,9 +144,9 @@ export const getData_platforms = params => {
).then(response => {
dispatch({
type: 'GET_DATA_PLATFORMS',
allData: response.data.allData,
allData: response.data.data,
// data: response.data.invoices,
totalPages: response.data.total,
totalPages: response.data.recordsTotal,
params: response.data.params
})
})
......
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