project stable, starting plaforms

src/views/settings/platforms/TableServerSidePlatforms.js → src/@core/components/datatable/index.js

 // ** 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

+// ** 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

+// ** 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

+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

+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

+// ** 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

@@ -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

+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

+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

@@ -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

+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

@@ -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
       })
     })