add product
This commit is contained in:
pawan-dot
parent
2d1d8a380d
commit
6606e405d3
@ -49,6 +49,7 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-date-picker": "^8.4.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-redux": "^7.2.6",
|
||||
"react-router-dom": "^5.3.0",
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
|
||||
@ -321,6 +321,12 @@ const _nav = [
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'User Logs',
|
||||
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
to: '/loginUser',
|
||||
},
|
||||
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
|
||||
68
src/components/User/DailyLoggedUserData.js
Normal file
68
src/components/User/DailyLoggedUserData.js
Normal file
@ -0,0 +1,68 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom';
|
||||
const DailyLoggedUser = (item) => {
|
||||
const [user, setUser] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setUser(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//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 (
|
||||
<>
|
||||
|
||||
|
||||
<tr>
|
||||
<th scope="row">{user?._id}</th>
|
||||
<td>{user?.name}</td>
|
||||
|
||||
<td>{new Date(`${user?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(user?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DailyLoggedUser
|
||||
94
src/components/User/LoginUser.js
Normal file
94
src/components/User/LoginUser.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom'
|
||||
import DailyLoggedUser from './DailyLoggedUserData'
|
||||
const LoginUser = () => {
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [users, setUsers] = useState([])
|
||||
const [count, setCount] = useState()
|
||||
|
||||
|
||||
// console.log(id)
|
||||
|
||||
useEffect(async () => {
|
||||
|
||||
await axios.get(
|
||||
`/api/user/DailyLoginUserInCafe/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
// console.log(response.data)
|
||||
|
||||
|
||||
setUsers(response.data.Daily)
|
||||
// let countNo = [];
|
||||
// countNo.push(response.data.Daily)
|
||||
|
||||
// const a = (1 + countNo.length)
|
||||
// setCount(a)
|
||||
// let counter = 0;
|
||||
// for (let i = 0; i <= count.length; i++) {
|
||||
// counter++;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
// console.log(count);
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='mb-4'>
|
||||
|
||||
<Link to="/monthlylogin"><button type="button" className="btn btn-warning float-end mb-3 ml-4"> Last Month Visit Users</button></Link>
|
||||
|
||||
<Link to="/specificDateLoginUser"><button type="button" className="btn btn-info float-end mb-3 "> Specific Date Visit</button></Link>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div><span className='mb-3 fs-4 fw-bolder'>Daily Cafe Visit User <button className="btn btn-dark mb-2 mr-3 ">{`Total Users ${users.length}`}</button></span>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{users && users.map((item, index) =>
|
||||
<DailyLoggedUser item={item} key={index} />
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
<div>
|
||||
</div>
|
||||
</div >
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginUser
|
||||
68
src/components/User/MonthUserData.js
Normal file
68
src/components/User/MonthUserData.js
Normal file
@ -0,0 +1,68 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
const MonthUserDara = (item) => {
|
||||
const [loginUser, setLoginUser] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setLoginUser(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//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 (
|
||||
<>
|
||||
{loginUser &&
|
||||
<tr>
|
||||
|
||||
<th scope="row">{loginUser?._id}</th>
|
||||
<td>{loginUser?.name}</td>
|
||||
{ }
|
||||
<td>{new Date(`${loginUser?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(loginUser?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MonthUserDara
|
||||
74
src/components/User/MothlyLoginUser.js
Normal file
74
src/components/User/MothlyLoginUser.js
Normal file
@ -0,0 +1,74 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import MonthUserData from './MonthUserData';
|
||||
const MothlyLoginUser = () => {
|
||||
// const [users, setUsers] = useState(false);
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const [monthlyUsers, setMonthlyUsers] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [mcount, setMcount] = useState()
|
||||
// console.log(id)
|
||||
useEffect(async () => {
|
||||
|
||||
await axios.get(
|
||||
`/api/user/DailyLoginUserInCafe/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
// console.log(response.data.MonthlyUser)
|
||||
|
||||
setMonthlyUsers(response.data.MonthlyUser)
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}, [])
|
||||
//change time formate
|
||||
|
||||
// console.log(monthlyUsers.length)
|
||||
// const a = console.log(a)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span className='mb-3 fs-4 fw-bolder'>Mothaly Cafe Visit User </span>
|
||||
<button className="btn btn-dark mb-2 float-end">{`Total Users ${monthlyUsers.length}`}</button>
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{monthlyUsers && monthlyUsers.map((item, index) =>
|
||||
<MonthUserData item={item} key={index} />
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MothlyLoginUser
|
||||
79
src/components/User/SpecificDate.js
Normal file
79
src/components/User/SpecificDate.js
Normal file
@ -0,0 +1,79 @@
|
||||
import React, { useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import DatePicker from 'react-date-picker';
|
||||
import SpecificDateData from './SpecificDateData';
|
||||
const SpecificDate = () => {
|
||||
const id = localStorage.getItem('ownerId')
|
||||
const token = localStorage.getItem("authToken")
|
||||
const [specificUsers, setSpecificUsers] = useState([])
|
||||
const [value, setOnChange] = useState(new Date());
|
||||
|
||||
const handleChange = (e) => {
|
||||
|
||||
axios.post(
|
||||
`/api/user/getUsersInCafeSpecificDate/${id}`,
|
||||
{ date: e },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data)
|
||||
|
||||
setSpecificUsers(response.data.unique)
|
||||
|
||||
// console.log(users)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.message)
|
||||
})
|
||||
}
|
||||
console.log(value)
|
||||
console.log(specificUsers.length)
|
||||
return (
|
||||
<> <div className='mb-4'>
|
||||
<span className='fs-6 fw-bolder mb-0'>Specific Date Visit's : <DatePicker onChange={(e) => { setOnChange(e); handleChange(e) }} value={value} /></span>
|
||||
<button className="btn btn-dark float-end mr-4">{`Total Users ${specificUsers.length}`}</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div><span className='mb-3 fs-4 fw-bolder'>Specific Date Visit User In Cafe </span>
|
||||
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead className="thead-dark ">
|
||||
<tr>
|
||||
<th scope="col"> User ID</th>
|
||||
<th scope="col">User Name</th>
|
||||
<th scope="col">Login Time </th>
|
||||
{/* <th scope="col">Handle</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{specificUsers && specificUsers.map((item, index) =>
|
||||
<SpecificDateData item={item} key={index} />
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
<div>
|
||||
</div>
|
||||
</div >
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default SpecificDate
|
||||
67
src/components/User/SpecificDateData.js
Normal file
67
src/components/User/SpecificDateData.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
const SpecificDateData = (item) => {
|
||||
const [specificDate, setSpecificDate] = useState(false);
|
||||
const token = localStorage.getItem("authToken")
|
||||
|
||||
const id = item.item;
|
||||
// console.log(id)
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
|
||||
// console.log(id);
|
||||
await axios.get(
|
||||
`/api/user/getUser/${id}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
||||
},
|
||||
).then(function (response) {
|
||||
console.log(response.data.user)
|
||||
|
||||
setSpecificDate(response.data.user)
|
||||
// console.log(user)
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error.response)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
getData()
|
||||
}, [item])
|
||||
//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 (
|
||||
<>
|
||||
{specificDate &&
|
||||
<tr>
|
||||
|
||||
<th scope="row">{specificDate?._id}</th>
|
||||
<td>{specificDate?.name}</td>
|
||||
{ }
|
||||
<td>{new Date(`${specificDate?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(specificDate?.cafeLoginTime)}`}</span></td>
|
||||
{/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
|
||||
{/* <td>@mdo</td> */}
|
||||
</tr>
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpecificDateData
|
||||
@ -1,6 +1,6 @@
|
||||
// export const API = "https://mantur-server.herokuapp.com";
|
||||
// export const API = "https://api.tellytell.com";
|
||||
// export const API = "http://localhost:5000";
|
||||
export const API = "http://localhost:5000";
|
||||
// export const API = "https://popstoreeee.herokuapp.com";
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
// import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
// import "bootstrap/dist/js/bootstrap.js";
|
||||
|
||||
// import "bootstrap";
|
||||
// import "bootstrap/dist/css/bootstrap.css";
|
||||
// import "bootstrap/dist/js/bootstrap.js";
|
||||
import 'react-app-polyfill/stable'
|
||||
import 'core-js'
|
||||
import React from 'react'
|
||||
@ -15,8 +10,8 @@ import store from './store'
|
||||
import axios from 'axios'
|
||||
|
||||
const setupAxios = () => {
|
||||
axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
|
||||
//axios.defaults.baseURL = 'http://localhost:5000'
|
||||
// axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
|
||||
axios.defaults.baseURL = 'http://localhost:5000'
|
||||
axios.defaults.headers = {
|
||||
'Cache-Control': 'no-cache,no-store',
|
||||
'Pragma': 'no-cache',
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import React from 'react'
|
||||
import Products from './views/Commerce/Products'
|
||||
import EditProducts from './views/Commerce/Editproducts'
|
||||
import LoginUser from './components/User/LoginUser'
|
||||
|
||||
//user logged property
|
||||
import MothlyLoginUser from './components/User/MothlyLoginUser'
|
||||
import SpecificDate from './components/User/SpecificDate'
|
||||
import AddProduct from './views/Commerce/AddProduct'
|
||||
// import EditProducts from './views/Commerce/Editproducts'
|
||||
|
||||
const AirwaysBill = React.lazy(() => import('./views/AirwaysBill/AirwaysBill'))
|
||||
const EditBill = React.lazy(() => import('./views/AirwaysBill/EditBill'))
|
||||
@ -68,14 +75,21 @@ const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
|
||||
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
|
||||
|
||||
const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
{ path: '/register', name: 'Change Password', component: Register },
|
||||
{ path: '/edit', name: 'Change Password', component: EditProfile },
|
||||
{ path: '/profile', name: 'Change Password', component: Profile },
|
||||
|
||||
//product route
|
||||
{ path: '/addproduct', name: 'Product Edit', component: AddProduct },
|
||||
{ path: '/comproducts/edit/:id', name: 'Product Edit', component: EditProducts },
|
||||
{ path: '/comproducts', name: 'Courier Products', component: Products },
|
||||
|
||||
//user
|
||||
{ path: '/specificDateLoginUser', name: ' Monthly Logged in User', component: SpecificDate },
|
||||
{ path: '/monthlylogin', name: ' Monthly Logged in User', component: MothlyLoginUser },
|
||||
{ path: '/loginUser', name: 'Logged in User', component: LoginUser },
|
||||
,
|
||||
////
|
||||
{ path: '/courier', name: 'Courier', component: Courier },
|
||||
|
||||
300
src/views/Commerce/AddProduct.js
Normal file
300
src/views/Commerce/AddProduct.js
Normal file
@ -0,0 +1,300 @@
|
||||
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 Footer from "../../Footer";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import swal from 'sweetalert';
|
||||
|
||||
const AddProduct = () => {
|
||||
const { token } = isAutheticated();
|
||||
let history = useHistory();
|
||||
const [state, setstate] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
status: "",
|
||||
tax: "",
|
||||
price: "",
|
||||
taxes: [],
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const { title, description, status, tax, price, taxes, loading } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setstate((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const fetchTax = useCallback(async () => {
|
||||
let res = await axios.get(`${API}/api/tax/view_tax`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 200) changeState({ taxes: res.data });
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTax();
|
||||
}, [fetchTax]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!(title || description || tax || price)) {
|
||||
alert("Please fill required field ");
|
||||
return;
|
||||
}
|
||||
changeState({ loading: true });
|
||||
|
||||
let res = await axios.post(
|
||||
`${API}/api/product`,
|
||||
{
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
tax: taxes.find((taxObj) => taxObj.name === tax)?._id,
|
||||
price,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res.status === 200) {
|
||||
swal("success!", "Product Added Successfully!", "success");
|
||||
history.goBack();
|
||||
}
|
||||
|
||||
changeState({ loading: false });
|
||||
};
|
||||
|
||||
//
|
||||
const onCancel = () => {
|
||||
// window.location = "/comproducts";
|
||||
history.goBack()
|
||||
|
||||
};
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
changeState({ [name]: value });
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="main-content">
|
||||
<div className="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-0">Add New Product</h4>
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item active">Commerce</li>
|
||||
<li className="breadcrumb-item active">Add New Product</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
{/* <!-- Save options Begins--> */}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form-group text-right">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-success btn-login waves-effect waves-light mr-3"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Save options Ends--> */}
|
||||
|
||||
{/* <!-- Row 1 Begins --> */}
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Title*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={title}
|
||||
className="form-control input-field"
|
||||
onChange={handleChange}
|
||||
placeholder="Title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group mb-30 width-100 row">
|
||||
<label className="col-md-4 control-label">
|
||||
Description
|
||||
</label>
|
||||
<div className="col-md-13">
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={handleChange}
|
||||
name="description"
|
||||
className="form-control input-field"
|
||||
rows="5"
|
||||
placeholder="Add description"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
|
||||
{/* <!--Right Column Begins --> */}
|
||||
<div className="col-lg-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Select Tax*
|
||||
</label>
|
||||
<select
|
||||
name="tax"
|
||||
value={tax}
|
||||
onChange={({ target: { value } }) =>
|
||||
changeState({ tax: value })
|
||||
}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
{taxes?.map(({ name, tax }) => (
|
||||
<option value={name}>
|
||||
{name} {tax}%
|
||||
bvb
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Status*
|
||||
</label>
|
||||
<select
|
||||
name="status"
|
||||
value={status}
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
>
|
||||
<option value="">--select--</option>
|
||||
<option value={true}>Active</option>
|
||||
<option value={false}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--Right Column Ends --> */}
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* <!--Left Column Begins--> */}
|
||||
<div className="col-lg-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="form-group">
|
||||
<label
|
||||
for="basicpill-phoneno-input"
|
||||
className="label-100"
|
||||
>
|
||||
Price*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="price"
|
||||
onChange={handleChange}
|
||||
className="form-control input-field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Left Column Ends --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
{/* <!-- End Page-content --> */}
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddProduct
|
||||
@ -141,7 +141,7 @@ function EditProducts() {
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
className="btn btn-warning mt-3 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
||||
className="btn btn-success mt-3 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && "Save"}
|
||||
@ -149,7 +149,7 @@ function EditProducts() {
|
||||
<button
|
||||
onClick={onCancel}
|
||||
type="button"
|
||||
className=" mt-3 ml-2 btn btn-success btn-cancel waves-effect waves-light mr-3"
|
||||
className=" mt-3 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -5,104 +5,106 @@ import { Link } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
|
||||
function Products() {
|
||||
const [state, setState] = useState({
|
||||
products: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalProducts: 0,
|
||||
pages: 1,
|
||||
const [state, setState] = useState({
|
||||
products: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalProducts: 0,
|
||||
pages: 1,
|
||||
});
|
||||
|
||||
window.scrollTo({ behavior: "smooth", top: "0px" });
|
||||
|
||||
const { products, page, limit, totalProducts, pages } = state;
|
||||
|
||||
const changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/product?page=${page}&limit=${limit}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
// console.log(res)
|
||||
|
||||
changeState({
|
||||
...res.data,
|
||||
pages: Math.ceil(res.data.totalProducts / limit),
|
||||
});
|
||||
}, [limit, page, token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
const getTotalPages = useMemo(() => {
|
||||
const length = pages > 1 ? pages : totalProducts ? 1 : 0;
|
||||
return Array.from({ length }, (_, i) => i + 1);
|
||||
}, [pages, totalProducts]);
|
||||
|
||||
// console.log(getTotalPages);
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/product/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
window.scrollTo({ behavior: "smooth", top: "0px" });
|
||||
if (res.status === 200) window.location.reload();
|
||||
};
|
||||
|
||||
const { products, page, limit, totalProducts, pages } = state;
|
||||
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 changeState = (newState) =>
|
||||
setState((prevState) => ({ ...prevState, ...newState }));
|
||||
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">Commerce - Products</h4>
|
||||
<Link to="/addproduct"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Product</button></Link>
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">Commerce - Products</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end page title --> */}
|
||||
|
||||
const { token } = isAutheticated();
|
||||
|
||||
const getProducts = useCallback(async () => {
|
||||
let res = await axios.get(
|
||||
`/api/product?page=${page}&limit=${limit}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
changeState({
|
||||
...res.data,
|
||||
pages: Math.ceil(res.data.totalProducts / limit),
|
||||
});
|
||||
}, [limit, page, token]);
|
||||
|
||||
useEffect(() => {
|
||||
getProducts();
|
||||
}, [getProducts]);
|
||||
|
||||
const getTotalPages = useMemo(() => {
|
||||
const length = pages > 1 ? pages : totalProducts ? 1 : 0;
|
||||
return Array.from({ length }, (_, i) => i + 1);
|
||||
}, [pages, totalProducts]);
|
||||
|
||||
// console.log(getTotalPages);
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
let status = window.confirm("Do you want to delete");
|
||||
if (!status) return;
|
||||
|
||||
let res = await axios.delete(`/api/product/${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">Commerce - Products</h4>
|
||||
|
||||
<div className="page-title-right">
|
||||
<ol className="breadcrumb m-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link to="/dashboard">Dating App</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">Commerce - Products</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 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{" "}
|
||||
@ -121,7 +123,7 @@ function Products() {
|
||||
</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
|
||||
@ -134,68 +136,68 @@ function Products() {
|
||||
</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>Price</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map(
|
||||
({ title, _id, price, status }) =>
|
||||
title && (
|
||||
<tr key={_id}>
|
||||
<td>{title}</td>
|
||||
<td>{price}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge badge-pill badge-soft-${status ? "success" : "danger"
|
||||
} font-size-13`}
|
||||
>
|
||||
{status ? "Live" : "Suspended"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-${status ? "danger" : "success"
|
||||
} btn-sm waves-effect waves-light btn-table`}
|
||||
onClick={() => toggleStatus(_id)}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
</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>Price</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map(
|
||||
({ title, _id, price, status }) =>
|
||||
title && (
|
||||
<tr key={_id}>
|
||||
<td>{title}</td>
|
||||
<td>{price}</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-2`}
|
||||
onClick={() => toggleStatus(_id)}
|
||||
>
|
||||
{status ? "Suspend" : "Activate"}
|
||||
</button>
|
||||
|
||||
<Link to={`/comproducts/edit/${_id}`}>
|
||||
<Link to={`/comproducts/edit/${_id}`}>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(_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>
|
||||
<button
|
||||
type="button"
|
||||
className=" mx-2 btn btn-primary btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(_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>
|
||||
|
||||
{/* <div className="row mt-20">
|
||||
{/* <div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
@ -274,16 +276,16 @@ function Products() {
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- end table-responsive --> */}
|
||||
</div>
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* <!-- container-fluid --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Products;
|
||||
|
||||
@ -20,7 +20,7 @@ const Profile = () => {
|
||||
const [user, setUser] = useState({});
|
||||
const { token } = isAutheticated();
|
||||
const history = useHistory()
|
||||
console.log(token);
|
||||
// console.log(token);
|
||||
useEffect(async () => {
|
||||
let res = await axios.get('/owner', {
|
||||
headers: {
|
||||
@ -28,13 +28,15 @@ const Profile = () => {
|
||||
}
|
||||
})
|
||||
if (res) {
|
||||
// console.log(res.data.user._id)
|
||||
localStorage.setItem('ownerId', res.data.user._id)
|
||||
setUser(res.data.user)
|
||||
}
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
}, [])
|
||||
|
||||
|
||||
console.log(user);
|
||||
// console.log(user);
|
||||
return (
|
||||
<div>
|
||||
<CRow>
|
||||
@ -42,10 +44,11 @@ const Profile = () => {
|
||||
<h1>Profile</h1>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CButton color='dark' onClick={() => history.push('/edit')}>Edit Profile</CButton>
|
||||
<CButton color='dark'
|
||||
className="float-right" onClick={() => history.push('/edit')}>Edit Profile</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CTable color="dark" striped>
|
||||
<CTable color="white" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Cafe Name</CTableHeaderCell>
|
||||
|
||||
@ -33,10 +33,13 @@ const Login = () => {
|
||||
const Login = async () => {
|
||||
const res = await axios.post("/owner/signin", auth);
|
||||
if (res.data.status == "ok") {
|
||||
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')
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user