interface for adding project

src/router/routes/Settings.js

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

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

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

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

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

+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

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

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