make it better
This commit is contained in:
pawan-dot
parent
e3c16102d5
commit
6fc6d8b36f
4
.env
4
.env
@ -1,2 +1,2 @@
|
||||
PORT=3000
|
||||
CHOKIDAR_USEPOLLING=true
|
||||
PORT = 3000
|
||||
CHOKIDAR_USEPOLLING = true
|
||||
BIN
.gitignore
vendored
BIN
.gitignore
vendored
Binary file not shown.
@ -25,7 +25,7 @@
|
||||
"test:cov": "npm test -- --coverage --watchAll=false",
|
||||
"test:debug": "react-scripts --inspect-brk test --runInBand",
|
||||
"heroku-postbuild": "npm run build"
|
||||
},
|
||||
},
|
||||
"config": {
|
||||
"coreui_library_short_version": "4.1"
|
||||
},
|
||||
@ -51,7 +51,9 @@
|
||||
"react": "^17.0.2",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-date-picker": "^8.4.0",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-paginate": "^8.1.3",
|
||||
"react-redux": "^7.2.6",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-spinners": "^0.11.0",
|
||||
@ -60,7 +62,7 @@
|
||||
"simplebar-react": "^2.3.6",
|
||||
"sweetalert": "^2.1.2",
|
||||
"sweetalert2": "^11.4.0",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack": "4.44.2",
|
||||
"xlsx": "^0.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
79
src/App.js
79
src/App.js
@ -6,6 +6,8 @@ import './scss/style.scss'
|
||||
import ForgotPassword from './views/pages/register/ForgotPassword'
|
||||
import NewRegister from './views/pages/register/NewRegister'
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import { isAutheticated } from './auth';
|
||||
|
||||
|
||||
const loading = (
|
||||
<div className="pt-3 text-center">
|
||||
@ -22,33 +24,72 @@ const Register = React.lazy(() => import('./views/pages/register/Change_password
|
||||
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<React.Suspense fallback={loading}>
|
||||
<Switch>
|
||||
< Route exact path="/" name="Login Page" render={(props) => <Login {...props} />} />
|
||||
const App = () => {
|
||||
|
||||
<Route exact path="/forgot" name="Forgot Page" render={(props) => <ForgotPassword {...props} />} />
|
||||
<Route exact path="/newRegister" name="Register Page" render={(props) => <NewRegister {...props} />} />
|
||||
const [userdata, setUserData] = useState(null)
|
||||
const token = isAutheticated();
|
||||
|
||||
<Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
|
||||
<Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
let existanceData = localStorage.getItem("authToken");
|
||||
if (!existanceData) {
|
||||
// console.log(existanceData.userData)
|
||||
setUserData(false)
|
||||
} else {
|
||||
try {
|
||||
console.log('requesting user data from server')
|
||||
let response = await axios.get(`/api/v1/user/details`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
//console.log(response)
|
||||
const data = response.data
|
||||
if (data.success) {
|
||||
|
||||
setUserData(data.user);
|
||||
} else {
|
||||
setUserData(false)
|
||||
}
|
||||
|
||||
}
|
||||
catch (err) {
|
||||
setUserData(false)
|
||||
console.log(err);
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
getUser()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<React.Suspense fallback={loading}>
|
||||
<Switch>
|
||||
< Route exact path="/" name="Login Page" render={(props) => <Login {...props} />} />
|
||||
|
||||
<Route exact path="/forgot" name="Forgot Page" render={(props) => <ForgotPassword {...props} />} />
|
||||
<Route exact path="/newRegister" name="Register Page" render={(props) => <NewRegister {...props} />} />
|
||||
|
||||
<Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
|
||||
<Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
|
||||
|
||||
|
||||
{/* localStorage.getItem('authToken') ? */}
|
||||
<Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
|
||||
{/* < ProtectedRoute path="/" name="Home" render={(props) => <DefaultLayout {...props} />} /> */}
|
||||
{/* localStorage.getItem('authToken') ? */}
|
||||
<Route path="/" name="Home" render={(props) => (
|
||||
userdata && userdata?._id ? <DefaultLayout {...props} /> :
|
||||
userdata === false ? <Login {...props} /> : <div></div>
|
||||
)} />
|
||||
{/* < ProtectedRoute path="/" name="Home" render={(props) => <DefaultLayout {...props} />} /> */}
|
||||
|
||||
|
||||
|
||||
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
//@coreui/coreui-free-react-admin-template@4.1.1
|
||||
export default App
|
||||
|
||||
39
src/_nav.js
39
src/_nav.js
@ -14,6 +14,8 @@ import {
|
||||
cilSpeedometer,
|
||||
cilStar,
|
||||
cilUser,
|
||||
|
||||
|
||||
} from '@coreui/icons'
|
||||
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
|
||||
|
||||
@ -44,6 +46,43 @@ const _nav = [
|
||||
icon: <CIcon icon={cilNewspaper} customClassName="nav-icon" />,
|
||||
to: '/news',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Events',
|
||||
icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
|
||||
to: '/event',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Offers',
|
||||
icon: <CIcon icon={cilMoney} customClassName="nav-icon" />,
|
||||
to: '/offer',
|
||||
},
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Banners',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/banner',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'CMS',
|
||||
icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
|
||||
to: '/cms',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Customer Feedback',
|
||||
icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
|
||||
to: '/feedback',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Users',
|
||||
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
to: '/users',
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
@ -5,6 +5,7 @@ export const isAutheticated = () => {
|
||||
if (localStorage.getItem("authToken")) {
|
||||
|
||||
return (localStorage.getItem("authToken"));
|
||||
//console.log(localStorage.getItem("authToken"))
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ const AppHeader = () => {
|
||||
<CIcon icon={cilMenu} size="lg" />
|
||||
</CHeaderToggler>
|
||||
<CHeaderBrand className="mx-auto d-md-none" to="/">
|
||||
<h1>Courier</h1>
|
||||
<h1>CMP</h1>
|
||||
</CHeaderBrand>
|
||||
<CHeaderNav className="d-none d-md-flex me-auto">
|
||||
<CNavItem>
|
||||
|
||||
@ -13,6 +13,31 @@ import AddNews from "./views/News/AddNews"
|
||||
import EditNews from "./views/News/EditNews"
|
||||
import News from "./views/News/News"
|
||||
import ViewNews from "./views/News/ViewNews"
|
||||
//Events
|
||||
import Event from './views/Events/Event'
|
||||
import EditEvent from './views/Events/EditEvent'
|
||||
import AddEvent from './views/Events/AddEvent'
|
||||
import ViewEvent from './views/Events/ViewEvent'
|
||||
//offers Route
|
||||
import Offer from './views/Offers/Offer'
|
||||
import AddOffer from './views/Offers/AddOffer'
|
||||
import EditOffer from './views/Offers/EditOffer'
|
||||
import ViewOffer from './views/Offers/ViewOffer'
|
||||
//Banner
|
||||
import Banner from './views/Banners/Banner'
|
||||
import ViewBanner from './views/Banners/ViewBanner'
|
||||
import EditBanner from './views/Banners/EditBanner'
|
||||
import AddBanner from './views/Banners/AddBanner'
|
||||
//cms
|
||||
import CMS from './views/CMS/cms'
|
||||
import CMSView from './views/CMS/ViewCms'
|
||||
import CMSEdit from './views/CMS/EditCms'
|
||||
//cms
|
||||
import Feedback from './views/Feedback/feedback'
|
||||
import ViewFeedback from './views/Feedback/ViewFeedback'
|
||||
//cms
|
||||
import Users from './views/Users/users'
|
||||
import ViewUsers from './views/Users/ViewUsers'
|
||||
|
||||
// DashBoard
|
||||
const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
|
||||
@ -42,8 +67,37 @@ const routes = [
|
||||
{ path: '/addNews', name: 'addNews', component: AddNews },
|
||||
{ path: '/news/edit/:id', name: 'EditNews', component: EditNews },
|
||||
{ path: '/news', name: 'news', component: News },
|
||||
//Events route
|
||||
{ path: '/event/view/:id', name: 'ViewEvent', component: ViewEvent },
|
||||
{ path: '/addevent', name: 'AddEvent', component: AddEvent },
|
||||
{ path: '/event/edit/:id', name: 'EditEvent', component: EditEvent },
|
||||
{ path: '/event', name: 'Event', component: Event },
|
||||
|
||||
//Offers route
|
||||
{ path: '/offer/view/:id', name: 'Viewoffer', component: ViewOffer },
|
||||
{ path: '/addOffer', name: 'AddOffer', component: AddOffer },
|
||||
{ path: '/offer/edit/:id', name: 'EditOffer', component: EditOffer },
|
||||
{ path: '/offer', name: 'offer', component: Offer },
|
||||
|
||||
//BANNERS
|
||||
{ path: '/banner/view/:id', name: 'ViewBanner', component: ViewBanner },
|
||||
{ path: '/addbanner', name: 'AddBanner', component: AddBanner },
|
||||
{ path: '/banner/edit/:id', name: 'EditBanner', component: EditBanner },
|
||||
{ path: '/banner', name: 'Banner', component: Banner },
|
||||
//CMS
|
||||
{ path: '/cms/view/:id', name: 'CMS', component: CMSView },
|
||||
{ path: '/cms/edit/:id', name: 'CMS', component: CMSEdit },
|
||||
{ path: '/cms', name: 'CMS', component: CMS },
|
||||
//CMS
|
||||
{ path: '/feedback/view/:id', name: 'ViewFeedback', component: ViewFeedback },
|
||||
{ path: '/feedback', name: 'Feedback', component: Feedback },
|
||||
|
||||
//Users
|
||||
{ path: '/users/view/:id', name: 'ViewUsers', component: ViewUsers },
|
||||
{ path: '/users', name: 'users', component: Users },
|
||||
|
||||
//dashboard
|
||||
|
||||
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
|
||||
]
|
||||
|
||||
|
||||
48
src/store.js
48
src/store.js
@ -1,31 +1,31 @@
|
||||
// import { createStore } from 'redux'
|
||||
import { createStore } from 'redux'
|
||||
|
||||
// const initialState = {
|
||||
// sidebarShow: true,
|
||||
// }
|
||||
const initialState = {
|
||||
sidebarShow: true,
|
||||
}
|
||||
|
||||
// const changeState = (state = initialState, { type, ...rest }) => {
|
||||
// switch (type) {
|
||||
// case 'set':
|
||||
// return { ...state, ...rest }
|
||||
// default:
|
||||
// return state
|
||||
// }
|
||||
// }
|
||||
const changeState = (state = initialState, { type, ...rest }) => {
|
||||
switch (type) {
|
||||
case 'set':
|
||||
return { ...state, ...rest }
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
// const store = createStore(changeState)
|
||||
// export default store
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { newCategoryReducer, AllcategoryReducer } from "./reducers/categoryReducer.js";
|
||||
import { loginReducer } from "./reducers/directoryReducer.js";
|
||||
const store = createStore(changeState)
|
||||
export default store
|
||||
// import { configureStore } from "@reduxjs/toolkit";
|
||||
// import { newCategoryReducer, AllcategoryReducer } from "./reducers/categoryReducer.js";
|
||||
// import { loginReducer } from "./reducers/directoryReducer.js";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
// const store = configureStore({
|
||||
// reducer: {
|
||||
|
||||
newCategory: newCategoryReducer,
|
||||
AllCategory: AllcategoryReducer,
|
||||
// newCategory: newCategoryReducer,
|
||||
// AllCategory: AllcategoryReducer,
|
||||
|
||||
},
|
||||
});
|
||||
// },
|
||||
// });
|
||||
|
||||
export default store;
|
||||
// export default store;
|
||||
219
src/views/Banners/AddBanner.js
Normal file
219
src/views/Banners/AddBanner.js
Normal file
@ -0,0 +1,219 @@
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilNotes, cilCalendar } from '@coreui/icons'
|
||||
const AddBanner = () => {
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [subTitle, setSubTitle] = useState("");
|
||||
const [section, setSection] = useState("");
|
||||
|
||||
const [startDate, setStartDate] = useState(new Date());
|
||||
const [endDate, setEndDate] = useState(new Date());
|
||||
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("subTitle", subTitle);
|
||||
myForm.set("section", section);
|
||||
myForm.set("startDate", startDate);
|
||||
myForm.set("endDate", endDate);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.post(
|
||||
`/api/banner/create`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Banner Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Add Banner</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setSubTitle(e.target.value)}
|
||||
value={subTitle}
|
||||
placeholder="sub title" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilNotes} />
|
||||
</CInputGroupText>
|
||||
|
||||
<select
|
||||
name="section"
|
||||
value={section}
|
||||
onChange={(e) => setSection(e.target.value)}
|
||||
className="form-control input-field"
|
||||
>
|
||||
|
||||
<option value="1">--select--</option>
|
||||
<option value="home">home</option>
|
||||
<option value="news">news</option>
|
||||
<option value="events">events</option>
|
||||
<option value="offers">offers</option>
|
||||
<option value="category">category</option>
|
||||
<option value="directory">directory</option>
|
||||
{/* <option value="6">--select--</option> */}
|
||||
|
||||
</select>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
Start Date*
|
||||
<CIcon icon={cilCalendar} />
|
||||
</CInputGroupText>
|
||||
{/* <DatePicker selected={startDate} /> */}
|
||||
|
||||
<CFormInput type="date"
|
||||
required
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
value={startDate}
|
||||
placeholder="Start Date" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
<CInputGroupText>
|
||||
End Date*
|
||||
<CIcon icon={cilCalendar} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="date"
|
||||
startDate
|
||||
required
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
value={endDate}
|
||||
placeholder="EndDate" />
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup> */}
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddBanner
|
||||
166
src/views/Banners/Banner.js
Normal file
166
src/views/Banners/Banner.js
Normal file
@ -0,0 +1,166 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function banner() {
|
||||
const [banner, setBanner] = useState([])
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getEvent = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/banner/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(res.data)
|
||||
setBanner(res.data.banner)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getEvent();
|
||||
}, [getEvent]);
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/banner/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(res)
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Banner Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-BANNER</h4>
|
||||
<Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Banner</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Image</th>
|
||||
<th>Section</th>
|
||||
<th>Added On</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{banner && banner.map((item, index) =>
|
||||
<tr>
|
||||
<td>{item?.title}</td>
|
||||
<td>
|
||||
<img src={`${item?.image.url}`} width="50" alt="" /></td>
|
||||
<td>{item?.section}</td>
|
||||
<td>
|
||||
{/* {item?.addedOn} */}
|
||||
{new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/banner/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/banner/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default banner;
|
||||
238
src/views/Banners/EditBanner.js
Normal file
238
src/views/Banners/EditBanner.js
Normal file
@ -0,0 +1,238 @@
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilNotes, cilCalendar } from '@coreui/icons'
|
||||
const EditBanner = () => {
|
||||
const { id } = useParams();
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [subTitle, setSubTitle] = useState("");
|
||||
const [section, setSection] = useState("");
|
||||
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
//fetch one Offer
|
||||
useEffect(async () => {
|
||||
const res = await axios.get(`/api/banner/getOne/${id}`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
// console.log(res.data.banner)
|
||||
// console.log(res.data.banner.startDate)
|
||||
setTitle(res.data.banner.title)
|
||||
setSubTitle(res.data.banner.subTitle)
|
||||
setSection(res.data.banner.section)
|
||||
setStartDate(new Date(res.data.banner.startDate).toLocaleDateString())
|
||||
setEndDate(new Date(res.data.banner.endDate).toLocaleDateString())
|
||||
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("subTitle", subTitle);
|
||||
myForm.set("section", section);
|
||||
myForm.set("startDate", startDate);
|
||||
myForm.set("endDate", endDate);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.put(
|
||||
`/api/banner/update/${id}`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Banner Updated Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Edit Banner</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setSubTitle(e.target.value)}
|
||||
value={subTitle}
|
||||
placeholder="sub title" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilNotes} />
|
||||
|
||||
</CInputGroupText>
|
||||
|
||||
<select
|
||||
name="section"
|
||||
value={section}
|
||||
onChange={(e) => setSection(e.target.value)}
|
||||
className="form-control input-field"
|
||||
>
|
||||
|
||||
<option value="1">--select--</option>
|
||||
<option value="home">home</option>
|
||||
<option value="news">news</option>
|
||||
<option value="events">events</option>
|
||||
<option value="offers">offers</option>
|
||||
<option value="category">category</option>
|
||||
<option value="directory">directory</option>
|
||||
{/* <option value="6">--select--</option> */}
|
||||
|
||||
</select>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
Start Date*
|
||||
<CIcon icon={cilCalendar} />
|
||||
</CInputGroupText>
|
||||
{/* <DatePicker selected={startDate} /> */}
|
||||
|
||||
<CFormInput type="date"
|
||||
required
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
value={startDate}
|
||||
placeholder="Start Date" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
<CInputGroupText>
|
||||
End Date*
|
||||
<CIcon icon={cilCalendar} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="date"
|
||||
startDate
|
||||
required
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
value={endDate}
|
||||
placeholder="EndDate" />
|
||||
</CInputGroup>
|
||||
{/* <CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup> */}
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditBanner
|
||||
128
src/views/Banners/ViewBanner.js
Normal file
128
src/views/Banners/ViewBanner.js
Normal file
@ -0,0 +1,128 @@
|
||||
|
||||
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewBanner() {
|
||||
const [banner, setBanner] = useState([])
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getBanner = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/banner/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setBanner(res.data.banner)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getBanner();
|
||||
}, [getBanner]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-BANNER</h4>
|
||||
<Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add New Banner</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
<tr><th>Id</th><td>{banner?._id}</td></tr>
|
||||
<tr><th>Title</th><td>{banner?.title}</td></tr>
|
||||
<tr> <th>Sub Title</th><td>{banner?.subTitle}</td></tr>
|
||||
|
||||
<tr> <th>Image</th> <td>
|
||||
<img src={`${banner.image?.url}`} width="50" alt="" />
|
||||
</td></tr>
|
||||
<tr><th>Section</th><td>{banner?.section}</td></tr>
|
||||
<tr><th>Start Date</th> <td>
|
||||
{new Date(`${banner?.startDate}`).toDateString()}
|
||||
</td></tr>
|
||||
<tr><th>End Date</th><td>
|
||||
{new Date(`${banner?.endDate}`).toDateString()}</td></tr>
|
||||
<tr><th>Added On</th><td>
|
||||
{new Date(`${banner?.addedOn}`).toDateString()}<span> , {`${formatAMPM(banner?.addedOn)}`}</span>
|
||||
</td></tr>
|
||||
<tr> <th>Updated At</th><td>
|
||||
{new Date(`${banner?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(banner?.updatedAt)}`}</span>
|
||||
</td></tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewBanner;
|
||||
125
src/views/CMS/EditCms.js
Normal file
125
src/views/CMS/EditCms.js
Normal file
@ -0,0 +1,125 @@
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import swal from 'sweetalert';
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
const EditCms = () => {
|
||||
const { id } = useParams()
|
||||
const token = isAutheticated();
|
||||
// console.log(token, id)
|
||||
let history = useHistory();
|
||||
const [state, setState] = useState({
|
||||
About_Us: "",
|
||||
Terms_and_Conditions: "",
|
||||
Privacy_Policy: "",
|
||||
|
||||
loading: false,
|
||||
|
||||
});
|
||||
const { loading } = state;
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
changeState({ ...state, [e.target.name]: e.target.value })
|
||||
|
||||
}
|
||||
const fetchRestriction = useCallback(async () => {
|
||||
const res = await axios.get(`/api/restriction/getOne/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
// console.log(res.data.CmpRes)
|
||||
setState(res.data.CmpRestriction)
|
||||
changeState({ loading: false });
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRestriction();
|
||||
}, [fetchRestriction]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
|
||||
changeState({ loading: true });
|
||||
let res = await axios.put(
|
||||
`/api/restriction/update/${id}`,
|
||||
{
|
||||
...state,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//if (res.status === 200) window.location.reload();
|
||||
// console.log(res.data)
|
||||
// console.log(res.status == 200)
|
||||
if (res.data.success == true) {
|
||||
changeState({ loading: false });
|
||||
swal("Edit CMP-Condition successfully!");
|
||||
history.goBack()
|
||||
}
|
||||
};
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="shadow-sm w-75 p-3 mb-5 bg-body rounded form-floating justify-content-center">
|
||||
<form>
|
||||
<h4>EDIT-CMS</h4>
|
||||
|
||||
<div className="mb-3 ">
|
||||
<label htmlFor="exampleFormControlTextarea1" className="form-label">About Us*</label>
|
||||
<textarea
|
||||
className="form-control" id="exampleFormControlTextarea1" name="About_Us"
|
||||
value={state.About_Us}
|
||||
required
|
||||
onChange={handleChange}
|
||||
rows="3">
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div className="mb-3 ">
|
||||
<label htmlFor="exampleFormControlTextarea1" className="form-label">Terms and Conditions*</label>
|
||||
<textarea className="form-control" id="exampleFormControlTextarea1" name="Terms_and_Conditions"
|
||||
value={state.Terms_and_Conditions}
|
||||
required
|
||||
onChange={handleChange}
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
<div className="mb-3 ">
|
||||
<label htmlFor="exampleFormControlTextarea1" className="form-label">Privacy Policy*</label>
|
||||
<textarea className="form-control" id="exampleFormControlTextarea1" name="Privacy_Policy"
|
||||
value={state.Privacy_Policy}
|
||||
required
|
||||
onChange={handleChange}
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" className=" mt-1 btn btn-success" onClick={handleSubmit}>
|
||||
<ClipLoader loading={state.loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button type="button" className="mt-1 mx-2 btn btn-warning" onClick={onCancel}>Cancel</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditCms
|
||||
127
src/views/CMS/ViewCms.js
Normal file
127
src/views/CMS/ViewCms.js
Normal file
@ -0,0 +1,127 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewOffer() {
|
||||
const [cmsRes, setCmsRes] = useState([])
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const token = isAutheticated();
|
||||
|
||||
const getOffer = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/restriction/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
//console.log(res.data)
|
||||
setCmsRes(res.data.CmpRestriction)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getOffer();
|
||||
}, [getOffer]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-CMS</h4>
|
||||
{/* <Link to="/"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Edit Restriction</button></Link> */}
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
{/* <th>Id</th> */}
|
||||
<tr><th>About Us</th>
|
||||
<td>{cmsRes?.About_Us}</td>
|
||||
</tr>
|
||||
<tr> <th>Terms and Conditions</th>
|
||||
<td>{cmsRes?.Terms_and_Conditions}</td>
|
||||
</tr>
|
||||
<tr><th>Privacy Policy</th>
|
||||
<td>{cmsRes?.Privacy_Policy}</td>
|
||||
</tr>
|
||||
<tr><th>Added On</th>
|
||||
<td>
|
||||
{new Date(`${cmsRes?.createdAt}`).toDateString()}<span> , {`${formatAMPM(cmsRes?.createdAt)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><th>Updated At</th>
|
||||
<td>
|
||||
{new Date(`${cmsRes?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(cmsRes?.updatedAt)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewOffer;
|
||||
|
||||
245
src/views/CMS/cms.js
Normal file
245
src/views/CMS/cms.js
Normal file
@ -0,0 +1,245 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function cms() {
|
||||
const [cmsRes, setCmsRes] = useState([])
|
||||
|
||||
const token = isAutheticated();
|
||||
|
||||
const getRestriction = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/restriction/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.CmpRestriction[0])
|
||||
setCmsRes(res.data.CmpRestriction[0])
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getRestriction();
|
||||
}, [getRestriction]);
|
||||
|
||||
|
||||
// console.log(cmsRes)
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-CMS</h4>
|
||||
{/* <Link to="/addEvent"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Event</button></Link> */}
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
|
||||
<th>About Us</th>
|
||||
<th>Terms and Conditions</th>
|
||||
<th>Privacy Policy</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>{cmsRes?.About_Us}</td>
|
||||
<td>{cmsRes?.Terms_and_Conditions}</td>
|
||||
<td>{cmsRes?.Privacy_Policy}</td>
|
||||
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/cms/view/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/cms/edit/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
{/* <button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* second table */}
|
||||
|
||||
{/* <div className="table-responsive table-shoot mt-4">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
|
||||
<th>Terms and Conditions</th>
|
||||
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>{cmsRes?.Terms_and_Conditions}</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/cms/view/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/cms/edit/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
{/* <button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button> */}
|
||||
{/* </td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* end second table */}
|
||||
|
||||
{/* third table */}
|
||||
{/* <div className="table-responsive table-shoot mt-4">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
|
||||
<th>Privacy Policy</th>
|
||||
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>{cmsRes?.Privacy_Policy}</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/cms/view/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/cms/edit/${cmsRes._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
{/* <button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button> */}
|
||||
{/* </td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div> */}
|
||||
|
||||
|
||||
{/* end third table */}
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default cms;
|
||||
@ -142,7 +142,7 @@ function Products() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
className=" mx-1 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
@ -150,7 +150,7 @@ function Products() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
className="mx-1 mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
|
||||
@ -12,8 +12,10 @@ import { useHistory } from "react-router-dom";
|
||||
|
||||
const Add_Business = () => {
|
||||
const [categoryName, setCategoryName] = useState([]);
|
||||
const [image, setImage] = useState();
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const token = isAutheticated();
|
||||
|
||||
let history = useHistory();
|
||||
const [state, setState] = useState({
|
||||
@ -32,6 +34,7 @@ const Add_Business = () => {
|
||||
LinkedinUrl: "",
|
||||
FacebookUrl: "",
|
||||
InstagramUrl: ""
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -54,7 +57,7 @@ const Add_Business = () => {
|
||||
},
|
||||
});
|
||||
|
||||
console.log(res.data.category);
|
||||
// console.log(res.data.category);
|
||||
setCategoryName(res.data.category)
|
||||
if (res.status === 200) changeState({ ...res.data });
|
||||
}, [token]);
|
||||
@ -70,19 +73,43 @@ const Add_Business = () => {
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(name || description || phone || email || Bname || Sname || city)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
const myForm = new FormData();
|
||||
myForm.set('name', state.name)
|
||||
myForm.set('phone', state.phone)
|
||||
myForm.set('email', state.email)
|
||||
myForm.set('Bname', state.Bname)
|
||||
myForm.set('Sname', state.Sname)
|
||||
myForm.set('country', state.country)
|
||||
myForm.set('city', state.city)
|
||||
myForm.set('description', state.description)
|
||||
|
||||
myForm.set('category', state.category)
|
||||
|
||||
myForm.set('status', state.status)
|
||||
|
||||
myForm.set('Glocation', state.Glocation)
|
||||
myForm.set('LinkedinUrl', state.Glocation)
|
||||
myForm.set('FacebookUrl', state.FacebookUrl)
|
||||
myForm.set('InstagramUrl', state.InstagramUrl)
|
||||
myForm.set("image", image);
|
||||
// if (!(name || description || phone || email || Bname || Sname || city)) {
|
||||
// alert("Please fill required field ");
|
||||
// return;
|
||||
// }
|
||||
// const myForm = new FormData();
|
||||
// myForm.set("image", image);
|
||||
|
||||
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.post(
|
||||
`/api/directory/create/`,
|
||||
{
|
||||
...state,
|
||||
},
|
||||
|
||||
myForm
|
||||
,
|
||||
{
|
||||
headers: {
|
||||
"content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
@ -312,6 +339,30 @@ const Add_Business = () => {
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Bisuness Image
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="file"
|
||||
//name="image"
|
||||
accept="image/*"
|
||||
// value={image}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
// onChange={handleChange}
|
||||
onChange={(e) => setImage(e.target.files[0])}
|
||||
placeholder="Bisuness Image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
@ -360,6 +411,12 @@ const Add_Business = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
@ -461,4 +518,26 @@ const Add_Business = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Add_Business
|
||||
export default Add_Business
|
||||
|
||||
|
||||
//const myForm = new FormData();
|
||||
// myForm.set('name', state.name)
|
||||
// myForm.set('phone', state.phone)
|
||||
// myForm.set('email', state.email)
|
||||
// myForm.set('Bname', state.Bname)
|
||||
// myForm.set('Sname', state.Sname)
|
||||
// myForm.set('country', state.country)
|
||||
// myForm.set('city', state.city)
|
||||
// myForm.set('description', state.description)
|
||||
|
||||
// myForm.set('category', state.category)
|
||||
|
||||
// myForm.set('status', state.status)
|
||||
|
||||
// myForm.set('Glocation', state.Glocation)
|
||||
// myForm.set('LinkedinUrl', state.Glocation)
|
||||
// myForm.set('FacebookUrl', state.FacebookUrl)
|
||||
// myForm.set('InstagramUrl', state.InstagramUrl)
|
||||
// myForm.set("image", image);
|
||||
// changeState({ loading: true });
|
||||
|
||||
@ -5,78 +5,78 @@ import { Link } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
const Bisuness = () => {
|
||||
const [bisuness, setBisuness] = useState([])
|
||||
const [bisuness, setBisuness] = useState([])
|
||||
|
||||
|
||||
|
||||
const { token } = isAutheticated();
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/directory/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.directory)
|
||||
setBisuness(res.data.directory)
|
||||
// changeState({
|
||||
// ...res.data,
|
||||
// pages: Math.ceil(res.data.totalProducts / limit),
|
||||
// });
|
||||
}, [token]);
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/directory/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.directory)
|
||||
setBisuness(res.data.directory)
|
||||
// changeState({
|
||||
// ...res.data,
|
||||
// pages: Math.ceil(res.data.totalProducts / limit),
|
||||
// });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/directory/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res)
|
||||
let res = await axios.delete(`/api/directory/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res)
|
||||
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Directory Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Directory Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStatus = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
let res = await axios.get(`/api/product/setStatus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
const toggleStatus = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
let res = await axios.get(`/api/product/setStatus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">Bisuness-Directory</h4>
|
||||
<Link to="/add_bisuness"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Bisuness</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">Bisuness-Directory</h4>
|
||||
<Link to="/add_bisuness"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Bisuness</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
@ -84,17 +84,17 @@ const Bisuness = () => {
|
||||
<li className="breadcrumb-item">Commerce - Products</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show{" "}
|
||||
@ -113,7 +113,7 @@ const Bisuness = () => {
|
||||
</label>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
{/* <div className="col-sm-12 col-md-6">
|
||||
<div className="dropdown d-block">
|
||||
<a href="/comproducts/add">
|
||||
<button
|
||||
@ -126,78 +126,78 @@ const Bisuness = () => {
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>City</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bisuness.map((item) =>
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>City</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bisuness.map((item) =>
|
||||
|
||||
<tr>
|
||||
<td>{item?.name} </td>
|
||||
<td>{item?.category}</td>
|
||||
<td>{item?.city}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-${status ? "danger" : "success"
|
||||
} btn-sm waves-effect waves-light btn-table ml-1`}
|
||||
onClick={() => toggleStatus('_id')}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
<Link to={`/view_bisuness/${item._id}`}>
|
||||
<tr>
|
||||
<td>{item?.name} </td>
|
||||
<td>{item?.category}</td>
|
||||
<td>{item?.city}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-${status ? "danger" : "success"
|
||||
} btn-sm waves-effect waves-light btn-table ml-1`}
|
||||
onClick={() => toggleStatus('_id')}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
<Link to={`/view_bisuness/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-info btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`/bisuness/edit/${item._id}`}>
|
||||
<Link to={`/bisuness/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-1"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-1"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
className="mx-1 mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-1"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div className="row mt-20">
|
||||
{/* <div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
@ -276,17 +276,17 @@ const Bisuness = () => {
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Bisuness
|
||||
@ -10,7 +10,8 @@ import { useHistory } from "react-router-dom";
|
||||
|
||||
const EditBisuness = () => {
|
||||
const [categoryName, setCategoryName] = useState([]);
|
||||
const { token } = isAutheticated();
|
||||
const [image, setImage] = useState();
|
||||
const token = isAutheticated();
|
||||
|
||||
let history = useHistory();
|
||||
const [state, setState] = useState({
|
||||
@ -93,19 +94,34 @@ const EditBisuness = () => {
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(name || description || phone || email || Bname || Sname || city)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
const myForm = new FormData();
|
||||
myForm.set('name', state.name)
|
||||
myForm.set('phone', state.phone)
|
||||
myForm.set('email', state.email)
|
||||
myForm.set('Building_Name', state.Building_Name)
|
||||
myForm.set('Street_Name', state.Street_Name)
|
||||
myForm.set('country', state.country)
|
||||
myForm.set('city', state.city)
|
||||
myForm.set('description', state.description)
|
||||
|
||||
myForm.set('category', state.category)
|
||||
|
||||
myForm.set('status', state.status)
|
||||
|
||||
myForm.set('Glocation', state.Glocation)
|
||||
myForm.set('LinkedinUrl', state.Glocation)
|
||||
myForm.set('FacebookUrl', state.FacebookUrl)
|
||||
myForm.set('InstagramUrl', state.InstagramUrl)
|
||||
myForm.set("image", image);
|
||||
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.put(
|
||||
`/api/directory/update/${id}`,
|
||||
{
|
||||
...state,
|
||||
},
|
||||
myForm,
|
||||
{
|
||||
headers: {
|
||||
"content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
@ -125,7 +141,7 @@ const EditBisuness = () => {
|
||||
|
||||
|
||||
|
||||
// console.log(state)
|
||||
console.log(image)
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
@ -332,6 +348,29 @@ const EditBisuness = () => {
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Bisuness Image
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="file"
|
||||
//name="image"
|
||||
accept="image/*"
|
||||
// value={image}
|
||||
className="mt-0 my-3 form-control input-field"
|
||||
// onChange={handleChange}
|
||||
onChange={(e) => setImage(e.target.files[0])}
|
||||
placeholder="Bisuness Image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
|
||||
@ -25,7 +25,7 @@ const View_Bisuness = () => {
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(res.data.directory.name)
|
||||
console.log(res.data.directory)
|
||||
setBisuness(res.data.directory)
|
||||
// changeState({
|
||||
// ...res.data,
|
||||
@ -66,52 +66,37 @@ const View_Bisuness = () => {
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>email</th>
|
||||
<th>phone</th>
|
||||
<th>Building_Name</th>
|
||||
<th>Street_Name</th>
|
||||
<th>city</th>
|
||||
<th>description</th>
|
||||
<th>Status</th>
|
||||
<th>Google Location</th>
|
||||
<th>LinkedinUrl</th>
|
||||
<th>FacebookUrl</th>
|
||||
<th>intagramUrl</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr><th>Name</th><td>{bisuness?.name} </td></tr>
|
||||
<tr><th>Bisuness image</th><td>
|
||||
<img src={`${bisuness.image?.url}`} width="50" alt="" />
|
||||
</td></tr>
|
||||
<tr><th>Category</th><td>{bisuness?.category}</td></tr>
|
||||
<tr><th>email</th> <td>{bisuness?.email}</td></tr>
|
||||
<tr><th>phone</th> <td>{bisuness?.phone}</td></tr>
|
||||
<tr><th>Building_Name</th><td>{bisuness?.Building_Name}</td></tr>
|
||||
<tr><th>Street_Name</th><td>{bisuness?.Street_Name}</td></tr>
|
||||
<tr><th>city</th> <td>{bisuness?.city}</td></tr>
|
||||
<tr><th>description</th> <td>{bisuness?.description}</td></tr>
|
||||
<tr><th>Status</th><td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${bisuness?.status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{bisuness?.status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><th>Google Location</th><td>{bisuness?.Glocation}</td></tr>
|
||||
<tr><th>LinkedinUrl</th> <td>{bisuness?.LinkedinUrl}</td></tr>
|
||||
<tr> <th>FacebookUrl</th><td>{bisuness?.FacebookUrl}</td></tr>
|
||||
<tr><th>intagramUrl</th> <td>{bisuness?.InstagramUrl}</td></tr>
|
||||
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>{bisuness?.name} </td>
|
||||
<td>{bisuness?.category}</td>
|
||||
<td>{bisuness?.email}</td>
|
||||
<td>{bisuness?.phone}</td>
|
||||
<td>{bisuness?.Building_Name}</td>
|
||||
<td>{bisuness?.Street_Name}</td>
|
||||
<td>{bisuness?.city}</td>
|
||||
<td>{bisuness?.description}</td>
|
||||
|
||||
<td>
|
||||
<span
|
||||
className={`badge rounded-pill bg-${bisuness?.status ? "success" : "danger"
|
||||
} font-size-10`}
|
||||
>
|
||||
{bisuness?.status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>{bisuness?.Glocation}</td>
|
||||
<td>{bisuness?.LinkedinUrl}</td>
|
||||
<td>{bisuness?.FacebookUrl}</td>
|
||||
<td>{bisuness?.InstagramUrl}</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
|
||||
164
src/views/Events/AddEvent.js
Normal file
164
src/views/Events/AddEvent.js
Normal file
@ -0,0 +1,164 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
|
||||
const AddEvent = () => {
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("location", location);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.post(
|
||||
`/api/event/create`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Event Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Add Event</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAudioDescription} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddEvent
|
||||
178
src/views/Events/EditEvent.js
Normal file
178
src/views/Events/EditEvent.js
Normal file
@ -0,0 +1,178 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
|
||||
const EditEvent = () => {
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
//fetch one image
|
||||
useEffect(async () => {
|
||||
const res = await axios.get(`/api/event/getOne/${id}`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
// console.log(res.data)
|
||||
setTitle(res.data.Event.title)
|
||||
setDescription(res.data.Event.description)
|
||||
setLocation(res.data.Event.location)
|
||||
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("location", location);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.put(
|
||||
`/api/event/update/${id}`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Event Edit Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Edit Event</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAudioDescription} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditEvent
|
||||
166
src/views/Events/Event.js
Normal file
166
src/views/Events/Event.js
Normal file
@ -0,0 +1,166 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function Event() {
|
||||
const [event, setEvent] = useState([])
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getEvent = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/event/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
setEvent(res.data.Event)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getEvent();
|
||||
}, [getEvent]);
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/event/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(res)
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Event Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Event</h4>
|
||||
<Link to="/addEvent"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Event</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Image</th>
|
||||
<th>Location</th>
|
||||
<th>Added On</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{event && event.map((item, index) =>
|
||||
<tr>
|
||||
<td>{item?.title}</td>
|
||||
<td>
|
||||
<img src={`${item?.image.url}`} width="50" alt="" /></td>
|
||||
<td>{item?.location}</td>
|
||||
<td>
|
||||
{/* {item?.addedOn} */}
|
||||
{new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/event/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/event/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className="mx-1 mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Event;
|
||||
122
src/views/Events/ViewEvent.js
Normal file
122
src/views/Events/ViewEvent.js
Normal file
@ -0,0 +1,122 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewEvent() {
|
||||
const [event, setEvent] = useState([])
|
||||
const { id } = useParams();
|
||||
console.log(id)
|
||||
const token = isAutheticated();
|
||||
|
||||
const getEvent = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/event/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.Event)
|
||||
setEvent(res.data.Event)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getEvent();
|
||||
}, [getEvent]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Event</h4>
|
||||
<Link to="/addNews"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Event</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
<tr><th>Id</th> <td>{event?._id}</td></tr>
|
||||
<tr><th>Title</th> <td>{event?.title}</td></tr>
|
||||
|
||||
<tr><th>Image</th><td>
|
||||
<img src={`${event.image?.url}`} width="50" alt="" />
|
||||
</td></tr>
|
||||
<tr><th>Description</th><td>{event?.description}</td></tr>
|
||||
<tr><th>Location</th><td>{event?.location}</td></tr>
|
||||
<tr><th>Added On</th><td>
|
||||
{new Date(`${event?.addedOn}`).toDateString()}<span> , {`${formatAMPM(event?.addedOn)}`}</span>
|
||||
</td></tr>
|
||||
<tr><th>Updated At</th>
|
||||
<td>
|
||||
{new Date(`${event?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(event?.updatedAt)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewEvent;
|
||||
25
src/views/Feedback/Pagination.js
Normal file
25
src/views/Feedback/Pagination.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
|
||||
const pageNumbers = [];
|
||||
|
||||
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<ul className='ml-3 pagination '>
|
||||
{pageNumbers.map(number => (
|
||||
<li key={number} className='page-item'>
|
||||
<Link onClick={() => paginate(number)} to="/feedback" className='page-link'>
|
||||
{number}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pagination;
|
||||
123
src/views/Feedback/ViewFeedback.js
Normal file
123
src/views/Feedback/ViewFeedback.js
Normal file
@ -0,0 +1,123 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewFeedback() {
|
||||
const [user, setUser] = useState([])
|
||||
|
||||
|
||||
const [feedback, setFeedback] = useState([])
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const token = isAutheticated();
|
||||
|
||||
const getFeedback = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/feedback/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
setFeedback(res.data.feedback)
|
||||
|
||||
let resp = await axios.get(
|
||||
`/api/v1/admin/user/${feedback.user}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
setUser(resp.data.user)
|
||||
|
||||
|
||||
}, [token, feedback.user]);
|
||||
|
||||
useEffect(() => {
|
||||
getFeedback();
|
||||
}, [getFeedback]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Customer feedback</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
<tr><th>User_Id</th><td>{user?._id}</td></tr>
|
||||
<tr><th>Name</th><td>{feedback?.name}</td></tr>
|
||||
<tr><th>email</th><td>{user?.email}</td>
|
||||
</tr>
|
||||
<tr><th>Image</th> <td>
|
||||
<img src={`${user.avatar?.url}`} width="50" alt="" />
|
||||
</td></tr>
|
||||
<tr><th>Description</th><td>{feedback?.description}</td></tr>
|
||||
|
||||
<tr><th>Pnone No.</th><td>{user?.phone}</td></tr>
|
||||
<tr><th>Feedback Given At</th> <td>
|
||||
{new Date(`${feedback?.createdAt}`).toDateString()}<span> , {`${formatAMPM(feedback?.createdAt)}`}</span>
|
||||
</td></tr>
|
||||
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
</div >
|
||||
</div >
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div >
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewFeedback;
|
||||
146
src/views/Feedback/feedback.js
Normal file
146
src/views/Feedback/feedback.js
Normal file
@ -0,0 +1,146 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import Pagination from "./Pagination";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function feedback() {
|
||||
const [feedback, setFeedback] = useState([])
|
||||
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [postsPerPage] = useState(10);
|
||||
const token = isAutheticated();
|
||||
|
||||
const getRestriction = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/feedback/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data.feedback)
|
||||
setFeedback(res.data.feedback)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getRestriction();
|
||||
}, [getRestriction]);
|
||||
|
||||
|
||||
// console.log(cmsRes)
|
||||
|
||||
// Get current posts
|
||||
//pagination
|
||||
const indexOfLastPost = currentPage * postsPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - postsPerPage;
|
||||
const currentPosts = feedback.slice(indexOfFirstPost, indexOfLastPost);
|
||||
|
||||
// Change page
|
||||
const paginate = pageNumber => setCurrentPage(pageNumber);
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Feedback</h4>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Given At</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentPosts && currentPosts.map((item, index) =>
|
||||
<tr>
|
||||
|
||||
<td>{item?.name}</td>
|
||||
<td>{item?.description}</td>
|
||||
|
||||
<td>
|
||||
|
||||
{new Date(`${item?.createdAt}`).toDateString()}<span> , {`${formatAMPM(item?.createdAt)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/feedback/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
<Pagination postsPerPage={postsPerPage}
|
||||
totalPosts={feedback.length}
|
||||
paginate={paginate} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default feedback;
|
||||
@ -39,7 +39,6 @@ const EditNews = () => {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
// console.log(res.data.news.title)
|
||||
setTitle(res.data.news.title)
|
||||
setDescription(res.data.news.description)
|
||||
|
||||
|
||||
@ -119,7 +119,7 @@ function News() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
className=" mx-1 mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
@ -128,7 +128,7 @@ function News() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
className=" mx-1 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
@ -136,7 +136,7 @@ function News() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className=" btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
className="mx-1 mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
|
||||
@ -83,34 +83,35 @@ function ViewNews() {
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Title</th>
|
||||
<td>{news?._id}</td>
|
||||
</tr>
|
||||
<tr><th>Title</th>
|
||||
<td>{news?.title}</td>
|
||||
</tr>
|
||||
|
||||
<tr> <th>Image</th>
|
||||
<td>
|
||||
<img src={`${news.image?.url}`} width="50" alt="" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr> <th>Description</th>
|
||||
<td>{news?.description}</td>
|
||||
</tr>
|
||||
<tr><th>Added On</th>
|
||||
<td>
|
||||
{new Date(`${news?.addedOn}`).toDateString()}<span> , {`${formatAMPM(news?.addedOn)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr> <th>Updated At</th>
|
||||
<td>
|
||||
{new Date(`${news?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(news?.updatedAt)}`}</span>
|
||||
</td>
|
||||
|
||||
<th>Image</th>
|
||||
<th>Description</th>
|
||||
<th>Added On</th>
|
||||
<th>Updated At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{news &&
|
||||
<tr>
|
||||
<td>{news?._id}</td>
|
||||
<td>{news?.title}</td>
|
||||
<td>
|
||||
<img src={`${news.image?.url}`} width="50" alt="" />
|
||||
</td>
|
||||
|
||||
<td>{news?.description}</td>
|
||||
<td>
|
||||
{new Date(`${news?.addedOn}`).toDateString()}<span> , {`${formatAMPM(news?.addedOn)}`}</span>
|
||||
</td>
|
||||
<td>
|
||||
{new Date(`${news?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(news?.updatedAt)}`}</span>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
215
src/views/Offers/AddOffer.js
Normal file
215
src/views/Offers/AddOffer.js
Normal file
@ -0,0 +1,215 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
|
||||
const AddOffer = () => {
|
||||
const token = isAutheticated();
|
||||
let history = useHistory();
|
||||
//console.log(token)
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [bisunessName, setBisunessName] = useState([]);
|
||||
const [sendBisunessName, setSendBisunessName] = useState('');
|
||||
|
||||
const [description, setDescription] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const changeState = (newState) =>
|
||||
setBisunessName((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const handleChange = (e) => {
|
||||
changeState({ ...bisunessName, [e.target.name]: e.target.value })
|
||||
|
||||
};
|
||||
const fetchBusuness = useCallback(async () => {
|
||||
const res = await axios.get(`/api/directory/getAll`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
// console.log(res.data.directory);
|
||||
setBisunessName(res.data.directory)
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(async () => {
|
||||
fetchBusuness();
|
||||
|
||||
}, [fetchBusuness]);
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("bisunessName", sendBisunessName);
|
||||
myForm.set("location", location);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.post(
|
||||
`/api/offer/create`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Event Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
// console.log(bisunessName)
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Add New Offer</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAudioDescription} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBell} />
|
||||
</CInputGroupText>
|
||||
|
||||
<select
|
||||
name="bisunessName"
|
||||
value={sendBisunessName}
|
||||
// onChange={handleChange}
|
||||
// //onChange={(e) => setBisunessName(e.target.value)}
|
||||
onChange={(e) => setSendBisunessName(e.target.value)}
|
||||
className="form-control input-field"
|
||||
>
|
||||
|
||||
<option value="1">--select--</option>
|
||||
{bisunessName.map(item =>
|
||||
<option>{item?.name}</option>
|
||||
|
||||
)}
|
||||
</select>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddOffer
|
||||
224
src/views/Offers/EditOffer.js
Normal file
224
src/views/Offers/EditOffer.js
Normal file
@ -0,0 +1,224 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilPencil, cilSettings, cilLockLocked, cilUser, cilBell, cilLocationPin, cilAudioDescription } from '@coreui/icons'
|
||||
const EditOffer = () => {
|
||||
const { id } = useParams();
|
||||
const token = isAutheticated();
|
||||
// console.log(token)
|
||||
let history = useHistory();
|
||||
const [image, setImage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [bisunessName, setBisunessName] = useState([]);
|
||||
const [sendBisunessName, setSendBisunessName] = useState('');
|
||||
|
||||
const [description, setDescription] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
//fetch one Offer
|
||||
useEffect(async () => {
|
||||
const res = await axios.get(`/api/offer/getOne/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data)
|
||||
setTitle(res.data.offer.title)
|
||||
setDescription(res.data.offer.description)
|
||||
setLocation(res.data.offer.location)
|
||||
setSendBisunessName(res.data.offer.bisunessName)
|
||||
|
||||
}, [id]);
|
||||
const fetchBusuness = useCallback(async () => {
|
||||
const res = await axios.get(`/api/directory/getAll`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
|
||||
// console.log(res.data.directory);
|
||||
setBisunessName(res.data.directory)
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(async () => {
|
||||
fetchBusuness();
|
||||
|
||||
}, [fetchBusuness]);
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const myForm = new FormData();
|
||||
|
||||
myForm.set("title", title);
|
||||
myForm.set("description", description);
|
||||
myForm.set("bisunessName", sendBisunessName);
|
||||
myForm.set("location", location);
|
||||
myForm.set("image", image);
|
||||
setLoading({ loading: true });
|
||||
// console.log(image)
|
||||
let res = await axios.put(
|
||||
`/api/offer/update/${id}`, myForm,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": 'multipart/form-data',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
if (res.data) {
|
||||
swal("success!", "Event Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
|
||||
};
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
// console.log(bisunessName)
|
||||
return (
|
||||
<>
|
||||
<div className="bg-light min-vh-70 d-flex flex-row ">
|
||||
<CContainer>
|
||||
<CRow className="align-left w-140">
|
||||
<CCol md={19} lg={27} xl={16}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h3 className="mb-4 justify-content-center">Edit Offer</h3>
|
||||
<div>
|
||||
<div>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPencil} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
value={title}
|
||||
placeholder="Title" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAudioDescription} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
value={description}
|
||||
placeholder="Description" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilBell} />
|
||||
</CInputGroupText>
|
||||
|
||||
<select
|
||||
name="bisunessName"
|
||||
value={sendBisunessName}
|
||||
// onChange={handleChange}
|
||||
// //onChange={(e) => setBisunessName(e.target.value)}
|
||||
onChange={(e) => setSendBisunessName(e.target.value)}
|
||||
className="form-control input-field"
|
||||
>
|
||||
|
||||
<option value="1">--select--</option>
|
||||
{bisunessName.map(item =>
|
||||
<option>{item?.name}</option>
|
||||
|
||||
)}
|
||||
</select>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text"
|
||||
required
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
value={location}
|
||||
placeholder="Location" />
|
||||
</CInputGroup>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
|
||||
{/* <CIcon icon={cilLockLocked} /> */}
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CInputGroup>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" ml-2 btn btn-warning btn-cancel waves-effect waves-light"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditOffer
|
||||
162
src/views/Offers/Offer.js
Normal file
162
src/views/Offers/Offer.js
Normal file
@ -0,0 +1,162 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function Offer() {
|
||||
const [offer, setOffer] = useState([])
|
||||
|
||||
const token = isAutheticated();
|
||||
|
||||
const getOffer = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/offer/getAll`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
setOffer(res.data.offer)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getOffer();
|
||||
}, [getOffer]);
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/offer/delete/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
console.log(res)
|
||||
if (res.data.success == true) {
|
||||
swal("success!", "Offer Deleted Successfully!", "success");
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Offers</h4>
|
||||
<Link to="/addOffer"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add New Offer</button></Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Image</th>
|
||||
<th>Business Name</th>
|
||||
<th>Location</th>
|
||||
<th>Added On</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{offer && offer.map((item, index) =>
|
||||
<tr>
|
||||
<td>{item?.title}</td>
|
||||
|
||||
<td>
|
||||
<img src={`${item?.image.url}`} width="50" alt="" /></td>
|
||||
<td>{item?.bisunessName}</td>
|
||||
<td>{item?.location}</td>
|
||||
<td>
|
||||
{/* {item?.addedOn} */}
|
||||
{new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/offer/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/offer/edit/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-1 mt-1 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(`${item._id}`)}
|
||||
className="mx-1 mt-1 btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
id="sa-params"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Offer;
|
||||
137
src/views/Offers/ViewOffer.js
Normal file
137
src/views/Offers/ViewOffer.js
Normal file
@ -0,0 +1,137 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewOffer() {
|
||||
const [offer, setOffer] = useState([])
|
||||
const { id } = useParams();
|
||||
console.log(id)
|
||||
const token = isAutheticated();
|
||||
|
||||
const getOffer = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/offer/getOne/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setOffer(res.data.offer)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getOffer();
|
||||
}, [getOffer]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-Offers</h4>
|
||||
<Link to="/addOffer"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add New Offer</button></Link>
|
||||
{/* <div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">CMD-App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">CMD-Category</li>
|
||||
</ol>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
<tr> <th>Id</th>
|
||||
<td>{offer?._id}</td>
|
||||
</tr>
|
||||
<tr><th>Title</th>
|
||||
<td>{offer?.title}</td>
|
||||
</tr>
|
||||
|
||||
<tr><th>Image</th>
|
||||
<td>
|
||||
<img src={`${offer.image?.url}`} width="50" alt="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr><th>Bisuness Name</th>
|
||||
<td> {offer?.bisunessName}</td>
|
||||
</tr>
|
||||
<tr><th>Description</th>
|
||||
<td>{offer?.description}</td>
|
||||
</tr>
|
||||
<tr><th>Location</th>
|
||||
<td>{offer?.location}</td>
|
||||
</tr>
|
||||
<tr><th>Added On</th>
|
||||
<td>
|
||||
{new Date(`${offer?.addedOn}`).toDateString()}<span> , {`${formatAMPM(offer?.addedOn)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><th>Updated At</th>
|
||||
<td>
|
||||
{new Date(`${offer?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(offer?.updatedAt)}`}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewOffer;
|
||||
25
src/views/Users/Pagination.js
Normal file
25
src/views/Users/Pagination.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
const Pagination = ({ userPerPage, totalUsers, paginate }) => {
|
||||
const pageNumbers = [];
|
||||
|
||||
for (let i = 1; i <= Math.ceil(totalUsers / userPerPage); i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<ul className='ml-3 pagination '>
|
||||
{pageNumbers.map(number => (
|
||||
<li key={number} className='page-item'>
|
||||
<Link onClick={() => paginate(number)} to="/users" className='page-link'>
|
||||
{number}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pagination;
|
||||
131
src/views/Users/ViewUsers.js
Normal file
131
src/views/Users/ViewUsers.js
Normal file
@ -0,0 +1,131 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function ViewUsers() {
|
||||
const [user, setUser] = useState([])
|
||||
const { id } = useParams();
|
||||
// console.log(id)
|
||||
const token = isAutheticated();
|
||||
|
||||
const getUserDetails = useCallback(async () => {
|
||||
|
||||
|
||||
let resp = await axios.get(
|
||||
`/api/v1/admin/user/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
setUser(resp.data.user)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getUserDetails();
|
||||
}, [getUserDetails]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP-User Details</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
|
||||
<tr>
|
||||
<th>User_Id</th>
|
||||
|
||||
<td>{user?._id}</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr><th>Name</th>
|
||||
<td>{user?.name}</td></tr>
|
||||
|
||||
<tr><th>email</th>
|
||||
<td>{user?.email}</td></tr>
|
||||
|
||||
<tr><th>Image</th>
|
||||
<td>
|
||||
<img src={`${user.avatar?.url}`} width="50" alt="" />
|
||||
</td></tr>
|
||||
|
||||
{/* <th>Description</th> */}
|
||||
<tr><th>Pnone No.</th>
|
||||
<td>{user?.phone}</td></tr>
|
||||
<tr><th>Role</th>
|
||||
<td>{user?.role}</td></tr>
|
||||
<tr><th>Register At</th>
|
||||
|
||||
<td>
|
||||
{new Date(`${user?.createdAt}`).toDateString()}<span> , {`${formatAMPM(user?.createdAt)}`}</span>
|
||||
</td></tr>
|
||||
<tr><th>Profile Updated At</th>
|
||||
<td>
|
||||
{new Date(`${user?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(user?.updatedAt)}`}</span>
|
||||
</td></tr>
|
||||
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewUsers;
|
||||
|
||||
153
src/views/Users/users.js
Normal file
153
src/views/Users/users.js
Normal file
@ -0,0 +1,153 @@
|
||||
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import Pagination from "./Pagination";
|
||||
import { Link } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
// import { API } from "../../data";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function users() {
|
||||
const [users, setUsers] = useState([])
|
||||
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [userPerPage] = useState(10);
|
||||
const token = isAutheticated();
|
||||
|
||||
const getAllUsers = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/v1/admin/users`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res.data)
|
||||
setUsers(res.data.users)
|
||||
|
||||
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
getAllUsers();
|
||||
}, [getAllUsers]);
|
||||
|
||||
|
||||
// console.log(cmsRes)
|
||||
|
||||
// Get current posts
|
||||
//pagination
|
||||
const indexOfLastUser = currentPage * userPerPage;
|
||||
const indexOfFirstUser = indexOfLastUser - userPerPage;
|
||||
const currentUser = users.slice(indexOfFirstUser, indexOfLastUser);
|
||||
|
||||
// Change page
|
||||
const paginate = pageNumber => setCurrentPage(pageNumber);
|
||||
|
||||
//change time formate
|
||||
function formatAMPM(date) {
|
||||
var hours = new Date(date).getHours();
|
||||
var minutes = new Date(date).getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" main-content">
|
||||
<div className=" my-3 page-content">
|
||||
<div className="container-fluid">
|
||||
{/* <!-- start page title --> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<h4 className="mb-3">CMP - All Users</h4>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
|
||||
</div>
|
||||
<div className="table-responsive table-shoot">
|
||||
<table className="table table-centered table-nowrap mb-0">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
|
||||
<th>Name</th>
|
||||
<th>email</th>
|
||||
<th>Profile Image</th>
|
||||
<th>Phone No.</th>
|
||||
<th>Register At</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentUser && currentUser.map((item, index) =>
|
||||
<tr>
|
||||
|
||||
<td>{item?.name}</td>
|
||||
<td>{item?.email}</td>
|
||||
<td>
|
||||
<img src={`${item.avatar?.url}`} width="50" alt="" />
|
||||
</td>
|
||||
<td>{item?.phone}</td>
|
||||
|
||||
|
||||
<td>
|
||||
|
||||
{new Date(`${item?.createdAt}`).toDateString()}<span> , {`${formatAMPM(item?.createdAt)}`}</span>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td>
|
||||
<Link to={`/users/view/${item._id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
<Pagination userPerPage={userPerPage}
|
||||
totalUsers={users.length}
|
||||
paginate={paginate} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default users;
|
||||
@ -15,11 +15,13 @@ import {
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
|
||||
const Login = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [auth, setAuth] = useState({
|
||||
email: "",
|
||||
password: ""
|
||||
@ -31,24 +33,19 @@ const Login = () => {
|
||||
};
|
||||
|
||||
const Login = async () => {
|
||||
const res = await axios.post("/api/user/login/", auth);
|
||||
setLoading({ loading: true })
|
||||
const res = await axios.post("/api/v1/user/login/", auth);
|
||||
if (res.data.success == true) {
|
||||
localStorage.setItem("authToken", res.data.token)
|
||||
console.log(res.data)
|
||||
localStorage.setItem("auth", JSON.stringify({
|
||||
user: res.data.user,
|
||||
token: res.data.token,
|
||||
|
||||
|
||||
}));
|
||||
history.push('/dashboard')
|
||||
setLoading(false);
|
||||
window.location.reload()
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
if (res.data.status === "blocked")
|
||||
alert(res.data.message)
|
||||
else
|
||||
alert("Invalid Credentials");
|
||||
alert("Invalid Credentials");
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
@ -82,7 +79,9 @@ const Login = () => {
|
||||
|
||||
|
||||
<CButton color="primary" className="px-4" onClick={Login}>
|
||||
Login
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Login"}
|
||||
|
||||
</CButton>
|
||||
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import Swal from 'sweetalert2'
|
||||
@ -22,15 +23,16 @@ const Register = () => {
|
||||
const [oldPassword, setOldPassword] = useState();
|
||||
const [newPassword, setNewPassword] = useState();
|
||||
const [confirmPassword, setConfirmPassword] = useState();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const history = useHistory();
|
||||
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const token = localStorage.getItem("authToken")
|
||||
//console.log(token)
|
||||
setLoading({ loading: true })
|
||||
if (newPassword == confirmPassword) {
|
||||
let res = await axios.put('/api/user/update/password',
|
||||
let res = await axios.put('/api/v1/user/password/update',
|
||||
{
|
||||
oldPassword
|
||||
, newPassword,
|
||||
@ -40,8 +42,9 @@ const Register = () => {
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
})
|
||||
console.log(res)
|
||||
if (res) {
|
||||
|
||||
// console.log(res.data.success)
|
||||
if (res.data.success == true) {
|
||||
Swal.fire({
|
||||
title: 'Done',
|
||||
text: 'Password Changed',
|
||||
@ -52,10 +55,12 @@ const Register = () => {
|
||||
}).then(() => {
|
||||
history.push('/dashboard')
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
setLoading(false);
|
||||
} else {
|
||||
alert('new password and confirm password are not matched')
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
}
|
||||
@ -98,7 +103,10 @@ const Register = () => {
|
||||
/>
|
||||
</CInputGroup>
|
||||
<div className="d-grid">
|
||||
<CButton color="success" onClick={handleSubmit}>Submit</CButton>
|
||||
<CButton color="success" onClick={handleSubmit}>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Submit"}
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user