Skip to content

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

refactory locations part 2

parent c29fe800
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1142 additions and 531 deletions
.env
View file @ 3f3bdf7e
......@@ -3,3 +3,4 @@ REACT_APP_BASENAME=/cms
REACT_APP_API="http://192.168.99.100:8001/cms"
REACT_APP_API1="http://134.209.18.22/cmsapi"
REACT_APP_IMAGERY="http://192.168.99.100:8001/imagery"
REACT_APP_IMAGERY1="http://134.209.18.22/imagery"
src/navigation/horizontal/settings.js
View file @ 3f3bdf7e
......@@ -23,14 +23,14 @@ export default [
title: 'Page types',
icon: <HardDrive />,
navLink: '/settings/pagetypes'
},
{
id: 'locationsDash',
title: 'locations',
icon: <Globe />,
navLink: '/settings/locations'
}
// {
// id: 'locationsDash',
// title: 'locations',
// icon: <Globe />,
// navLink: '/settings/locations'
// },
// {
// id: 'contriesDash',
// title: 'Contries',
// icon: <Flag />,
......
src/router/routes/Settings.js
View file @ 3f3bdf7e
......@@ -42,6 +42,11 @@ const SettingsRoutes = [
component: lazy(() => import('../../views/settings/locations')),
exact: true
},
{
path: '/settings/locations/add',
component: lazy(() => import('../../views/settings/locations/add')),
exact: true
},
{
path: '/settings/contries',
component: lazy(() => import('../../views/settings/contries')),
......
src/views/settings/locations/TableAdvSearch.js deleted 100644 → 0
View file @ c29fe800
This diff is collapsed.
src/views/settings/locations/TableServerSide.js deleted 100644 → 0
View file @ c29fe800
// ** React Imports
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from '../data'
// ** Store & Actions
import { getData } 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'
const DataTableServerSide = () => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.dataTables)
// ** States
const [currentPage, setCurrentPage] = useState(1)
const [rowsPerPage, setRowsPerPage] = useState(7)
const [searchValue, setSearchValue] = useState('')
// ** Get data on mount
useEffect(() => {
dispatch(
getData({
page: currentPage,
perPage: rowsPerPage,
q: searchValue
})
)
}, [dispatch])
// ** Function to handle filter
const handleFilter = e => {
setSearchValue(e.target.value)
dispatch(
getData({
page: currentPage,
perPage: rowsPerPage,
q: e.target.value
})
)
}
// ** Function to handle Pagination and get data
const handlePagination = page => {
dispatch(
getData({
page: page.selected + 1,
perPage: rowsPerPage,
q: searchValue
})
)
setCurrentPage(page.selected + 1)
}
// ** Function to handle per page
const handlePerPage = e => {
dispatch(
getData({
page: currentPage,
perPage: parseInt(e.target.value),
q: searchValue
})
)
setRowsPerPage(parseInt(e.target.value))
}
// ** Custom Pagination
const CustomPagination = () => {
const count = Number((store.total / 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'
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.data.length > 0) {
return store.data
} else if (store.data.length === 0 && isFiltered) {
return []
} else {
return store.allData.slice(0, rowsPerPage)
}
}
return (
<Fragment>
<Card>
<CardHeader className='border-bottom'>
<CardTitle tag='h4'>Server Side</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
paginationServer
className='react-dataTable'
columns={serverSideColumns}
sortIcon={<ChevronDown size={10} />}
paginationComponent={CustomPagination}
data={dataToRender()}
/>
</Card>
</Fragment>
)
}
export default memo(DataTableServerSide)
src/views/settings/locations/add/index.js 0 → 100644
View file @ 3f3bdf7e
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Store & Actions
import { addlocation } from '../../store/actions'
import { useDispatch, useSelector } from 'react-redux'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// module settings
import moduleSettings from '../module'
// ** Tables
import ElementCard from '../card'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
const dispatch = useDispatch()
const storeNavbar = useSelector(state => state.navbar)
const onSubmitHandler = (values, uploadFile) => {
dispatch(
addlocation({
projectid: values.projectid,
title: values.title,
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id,
textual: values.textual,
availability: values.availability,
genres: values.genres,
subgenres: values.subgenres,
data: uploadFile
}
)
)
}
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Assets' breadCrumbParent='Assets' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
{storeNavbar.projectCurrent === null ? <div>
Select Project
</div> : <ElementCard selectedElement={{
id: '<generate>',
projectid: storeNavbar.projectCurrent.value,
title: '',
parentid: null,
parenttype: null,
external_id: '',
textual: [],
genres: [],
subgenres: [],
availability: [],
imagery: []
}}
onSubmitHandler={onSubmitHandler}
/>
}
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/settings/locations/card/MapTooltip.js 0 → 100644
View file @ 3f3bdf7e
import { useState } from 'react'
import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap'
import {
Circle,
CircleMarker,
MapContainer,
Marker,
Polygon,
Popup,
Rectangle,
TileLayer,
Tooltip
} from 'react-leaflet'
import { EditControl } from "react-leaflet-draw"
const center = [51.505, -0.09]
const multiPolygon = [
[
[51.51, -0.12],
[51.51, -0.13],
[51.53, -0.13]
],
[
[51.51, -0.05],
[51.51, -0.07],
[51.53, -0.07]
]
]
const rectangle = [
[51.49, -0.08],
[51.5, -0.06]
]
const MapTooltip = () => {
const [clicked, setClicked] = useState(0)
const onClickCircle = () => {
setClicked(clicked + 1)
}
const clickedText = clicked === 0 ? 'Click this Circle to change the Tooltip text' : `Circle click: ${clicked}`
return (
<Card>
<CardHeader>
<CardTitle tag='h4'>Map</CardTitle>
</CardHeader>
<CardBody>
<MapContainer center={center} zoom={13} className='leaflet-map'>
<TileLayer
attribution='&ampcopy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
<Circle center={center} fillColor='blue' onClick={onClickCircle} radius={200}>
<Tooltip>{clickedText}</Tooltip>
</Circle>
<CircleMarker center={[51.51, -0.12]} color='red' radius={20}>
<Tooltip>Tooltip for CircleMarker</Tooltip>
</CircleMarker>
<Marker position={[51.51, -0.09]}>
<Popup>Popup for Marker</Popup>
<Tooltip>Tooltip for Marker</Tooltip>
</Marker>
<Polygon color='purple' positions={multiPolygon}>
<Tooltip sticky>sticky Tooltip for Polygon</Tooltip>
</Polygon>
<Rectangle bounds={rectangle} color='black'>
<Tooltip direction='bottom' offset={[0, 20]} opacity={1} permanent>
permanent Tooltip for Rectangle
</Tooltip>
</Rectangle>
</MapContainer>
</CardBody>
</Card>
)
}
export default MapTooltip
src/views/settings/locations/card/index.js 0 → 100644
View file @ 3f3bdf7e
This diff is collapsed.
src/views/settings/locations/data.js 0 → 100644
View file @ 3f3bdf7e
// ** React Imports
import { Link } from 'react-router-dom'
// ** Store & Actions
import { getProject, cleanProject } from '../store/actions'
import { store } from '@store/storeConfig/store'
// ** Custom Components
import Avatar from '@components/avatar'
// ** Third Party Components
import axios from 'axios'
import { MoreVertical, Edit, FileText, Archive, Trash } from 'react-feather'
import { Badge, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
import moduleSettings from './module'
// ** Vars
const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary']
const status = {
1: { title: 'Current', color: 'light-primary' },
2: { title: 'Professional', color: 'light-success' },
3: { title: 'Rejected', color: 'light-danger' },
4: { title: 'Resigned', color: 'light-warning' },
5: { title: 'Applied', color: 'light-info' }
}
export let data
// ** Get initial Data
axios.get('/api/datatables/initial-data').then(response => {
data = response.data
})
// ** Table Zero Config Column
export const basicColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
maxWidth: '100px'
},
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '225px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '310px'
},
{
name: 'Position',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'Age',
selector: 'age',
sortable: true,
minWidth: '100px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '175px'
}
]
// ** Expandable table component
const ExpandableTable = ({ data }) => {
return (
<div className='expandable-content p-2'>
<p>
<span className='font-weight-bold'>City:</span> {data.city}
</p>
<p>
<span className='font-weight-bold'>Experience:</span> {data.experience}
</p>
<p className='m-0'>
<span className='font-weight-bold'>Post:</span> {data.post}
</p>
</div>
)
}
// ** Table Common Column
export const columns = [
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '250px',
cell: row => (
<div className='d-flex align-items-center'>
{row.avatar === '' ? (
<Avatar color={`light-${states[row.status]}`} content={row.full_name} initials />
) : (
<Avatar img={require(`@src/assets/images/portrait/small/avatar-s-${row.avatar}`).default} />
)}
<div className='user-info text-truncate ml-1'>
<span className='d-block font-weight-bold text-truncate'>{row.full_name}</span>
<small>{row.post}</small>
</div>
</div>
)
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '250px'
},
{
name: 'Date',
selector: 'start_date',
sortable: true,
minWidth: '150px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '150px'
},
{
name: 'Age',
selector: 'age',
sortable: true,
minWidth: '100px'
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Intl Column
export const multiLingColumns = [
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '200px'
},
{
name: 'Position',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Server Side Column
export const serverSideColumns = [
{
name: 'Location ID',
selector: 'id',
sortable: true,
minWidth: '225px'
},
{
name: 'Location Name',
selector: 'name',
sortable: true,
minWidth: '225px',
cell: row => (
<div className='d-flex justify-content-left align-items-center'>
<div className='d-flex flex-column'>
<Link
to={`${moduleSettings.baseURL}/edit/${row.id}`}
className='user-name text-truncate mb-0'
onClick={() => store.dispatch(cleanProject(row.id))}
>
<span className='font-weight-bold'>{row.name}</span>
</Link>
<small className='text-truncate text-muted mb-0'>@{row.name}</small>
</div>
</div>
)
},
{
name: 'Order',
selector: 'order',
sortable: true,
minWidth: '225px'
}
]
// ** Table Adv Search Column
export const advSearchColumns = [
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '200px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '250px'
},
{
name: 'Post',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'City',
selector: 'city',
sortable: true,
minWidth: '150px'
},
{
name: 'Date',
selector: 'start_date',
sortable: true,
minWidth: '150px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '100px'
}
]
export default ExpandableTable
src/views/settings/locations/edit/index.js 0 → 100644
View file @ 3f3bdf7e
// ** 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 ElementEdit from './main'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import moduleSettings from '../module'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Assets' breadCrumbParent='Assets' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">{moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementEdit />
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/settings/locations/edit/main.js 0 → 100644
View file @ 3f3bdf7e
import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom'
// ** Store & Actions
import { getasset, updateasset } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { Alert } from 'reactstrap'
import ElementCard from '../card'
// module settings
import moduleSettings from '../module'
import { Upload } from 'react-feather'
import _ from 'lodash'
const ElementEdit = () => {
// ** States & Vars
const store = useSelector(state => state.assets),
[dataElement, setElementData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
const onSubmitHandler = (values, uploadFile) => {
// console.log(values)
// console.log(uploadFile)
dispatch(
updateasset({
...dataElement,
idproject: values.idproject,
title: values.title,
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id,
genres: values.genres,
subgenres: values.subgenres,
data: uploadFile
})
)
}
// ** Function to get user on mount
useEffect(() => {
dispatch(getasset(id))
}, [dispatch])
// ** Update user image on mount or change
useEffect(() => {
if (store.selectedAsset !== null || (store.selectedAsset !== null && dataElement !== null && store.selectedAsset.id !== dataElement.id)) {
return setElementData(store.selectedAsset)
}
}, [store.selectedAsset])
return store.selectedAsset !== null && store.selectedAsset !== undefined ? (
<ElementCard
selectedElement={store.selectedAsset}
onSubmitHandler={onSubmitHandler}
/>
) : (
<Alert color='info'>
<h4 className='alert-heading'>Loading {moduleSettings.mainTitleSingle}</h4>
<div className='alert-body'>
If {moduleSettings.mainTitleSingle} with id: {id} doesn't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
</div>
</Alert>
)
}
export default ElementEdit
src/views/settings/locations/index.js
View file @ 3f3bdf7e
......@@ -8,8 +8,7 @@ import Breadcrumbs from '@components/breadcrumbs'
import { Row, Col } from 'reactstrap'
// ** Tables
import TableServerSide from './TableServerSide'
import TableAdvSearch from './TableAdvSearch'
import DataTable from './table'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
......@@ -17,13 +16,10 @@ import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Datatables' breadCrumbParent='Home' breadCrumbActive='Datatables Advance' />
<Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Location' />
<Row>
<Col sm='12'>
<TableServerSide />
</Col>
<Col sm='12'>
<TableAdvSearch />
<DataTable />
</Col>
</Row>
</Fragment>
......
src/views/settings/locations/module.js 0 → 100644
View file @ 3f3bdf7e
const moduleSettings = {
mainTitle: 'Locations',
mainTitleSingle: 'Location',
apiBaseURL: '/api/locations',
baseURL: '/settings/locations',
newElement: {
slug: 0,
type: 0
},
elementsOption: {
}
}
export default moduleSettings
\ No newline at end of file
src/views/settings/locations/table.js 0 → 100644
View file @ 3f3bdf7e
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_locations } 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
cardTitle='Geo Locations'
allData={store.allDataLocations}
getData={getData_locations}
serverSideColumns={serverSideColumns}
linkAddButton='/settings/locations/add'
total={store.totalLocations}
/>
)
}
export default memo(DataTable)
src/views/settings/store/actions/index.js
View file @ 3f3bdf7e
......@@ -174,3 +174,39 @@ export const addPlatform = platform => {
})
}
}
// ** Get table Data locations
export const getData_locations = params => {
return async dispatch => {
await axios.get(`${process.env.REACT_APP_API}/api/locations`, {params}
).then(response => {
dispatch({
type: 'GET_DATA_LOCATIONS',
allData: response.data.data,
// data: response.data.invoices,
totalPages: response.data.recordsTotal,
params: response.data.params
})
})
}
}
export const addlocation = location => {
return (dispatch, getState) => {
axios
.post(`${process.env.REACT_APP_API}/api/locations`, location)
.then(response => {
dispatch({
type: 'ADD_LOCATION',
platform
})
})
.then(() => {
dispatch(setSaveSatus(true))
})
.catch(err => {
dispatch(setErrorMsg(err.response.data.message))
console.log(err.response.data)
})
}
}
src/views/settings/store/reducer/index.js
View file @ 3f3bdf7e
......@@ -19,6 +19,12 @@ const initialState = {
allDataPlatforms: [],
selectedPlatform: null,
dataLocations: [],
totalLocations: 1,
paramsLocations: {},
allDataLocations: [],
selectedLocation: null,
dataPagetypes: [],
totalPagetypes: 1,
paramsPagetypes: {},
......@@ -101,6 +107,18 @@ const settings = (state = initialState, action) => {
return { ...state }
case 'GET_DATA_LOCATIONS':
return {
...state,
allDataLocations: action.allData,
dataLocations: action.data,
totalLocations: action.totalPages,
paramsLocations: action.params
}
case 'ADD_LOCATION':
return { ...state }
default:
return state
}
......
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