add appointment view
This commit is contained in:
MD ARIF KHAN
parent
77ad22eeba
commit
1f4050fbe3
@ -40,6 +40,7 @@
|
||||
"@coreui/react-chartjs": "^2.0.0",
|
||||
"@coreui/utils": "^1.3.1",
|
||||
"@material-ui/core": "^4.12.4",
|
||||
"@material-ui/data-grid": "^4.0.0-alpha.37",
|
||||
"@mui/material": "^5.11.12",
|
||||
"@reduxjs/toolkit": "^1.9.2",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
|
||||
|
||||
116
src/_nav.js
116
src/_nav.js
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import React from "react";
|
||||
import CIcon from "@coreui/icons-react";
|
||||
import {
|
||||
cilAddressBook,
|
||||
cilAirplaneMode,
|
||||
@ -7,6 +7,7 @@ import {
|
||||
cilBell,
|
||||
cilBrush,
|
||||
cilCalculator,
|
||||
cilCalendar,
|
||||
cilCart,
|
||||
cilChartPie,
|
||||
cilClipboard,
|
||||
@ -36,25 +37,22 @@ import {
|
||||
cilTennisBall,
|
||||
cilText,
|
||||
cilUser,
|
||||
|
||||
|
||||
} from '@coreui/icons'
|
||||
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
|
||||
} from "@coreui/icons";
|
||||
import { CNavGroup, CNavItem, CNavTitle } from "@coreui/react";
|
||||
|
||||
const _nav = [
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
name: "Dashboard",
|
||||
to: "/dashboard",
|
||||
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Products',
|
||||
name: "Products",
|
||||
icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
|
||||
to: '/products',
|
||||
to: "/products",
|
||||
},
|
||||
// {
|
||||
// component: CNavItem,
|
||||
@ -64,15 +62,15 @@ const _nav = [
|
||||
// },
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Testimonials',
|
||||
name: "Testimonials",
|
||||
icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
|
||||
to: '/testimonials',
|
||||
to: "/testimonials",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Contact Requests',
|
||||
name: "Contact Requests",
|
||||
icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
|
||||
to: '/contact/request',
|
||||
to: "/contact/request",
|
||||
},
|
||||
|
||||
// {
|
||||
@ -84,78 +82,83 @@ const _nav = [
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Businesses',
|
||||
name: "Appointments",
|
||||
icon: <CIcon icon={cilCalendar} customClassName="nav-icon" />,
|
||||
to: "/appointments",
|
||||
},
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "HealthCare Providers",
|
||||
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||
to: '/businesses',
|
||||
to: "/healthcare/providers",
|
||||
},
|
||||
{
|
||||
component: CNavGroup,
|
||||
name: 'Franchisee Orders',
|
||||
name: "Franchisee Orders",
|
||||
icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'New',
|
||||
name: "New",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/new',
|
||||
to: "/orders/new",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Paid',
|
||||
name: "Paid",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/returned',
|
||||
to: "/orders/returned",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Processing',
|
||||
name: "Processing",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/processing',
|
||||
to: "/orders/processing",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Dispatched',
|
||||
name: "Dispatched",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/dispatched',
|
||||
to: "/orders/dispatched",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Delivered',
|
||||
name: "Delivered",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/delivered',
|
||||
to: "/orders/delivered",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Cancelled',
|
||||
name: "Cancelled",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/cancelled',
|
||||
to: "/orders/cancelled",
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Users',
|
||||
name: "Users",
|
||||
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
to: '/users',
|
||||
to: "/users",
|
||||
},
|
||||
{
|
||||
component: CNavGroup,
|
||||
name: 'Configuration',
|
||||
name: "Configuration",
|
||||
icon: <CIcon icon={cilAppsSettings} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Purpose',
|
||||
name: "Purpose",
|
||||
icon: <CIcon icon={cilLoopCircular} customClassName="nav-icon" />,
|
||||
to: '/purpose',
|
||||
to: "/purpose",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Business Type',
|
||||
name: "Business Type",
|
||||
icon: <CIcon icon={cilBrush} customClassName="nav-icon" />,
|
||||
to: '/business_type',
|
||||
to: "/business_type",
|
||||
},
|
||||
|
||||
// {
|
||||
@ -190,52 +193,49 @@ const _nav = [
|
||||
// },
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Languages',
|
||||
name: "Languages",
|
||||
icon: <CIcon icon={cilLanguage} customClassName="nav-icon" />,
|
||||
to: '/languages',
|
||||
to: "/languages",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Policies',
|
||||
name: "Policies",
|
||||
icon: <CIcon icon={cilSwapHorizontal} customClassName="nav-icon" />,
|
||||
to: '/policies',
|
||||
to: "/policies",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Social Media',
|
||||
name: "Social Media",
|
||||
icon: <CIcon icon={cilMedicalCross} customClassName="nav-icon" />,
|
||||
to: '/socialmedia',
|
||||
to: "/socialmedia",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Application Name',
|
||||
name: "Application Name",
|
||||
icon: <CIcon icon={cilText} customClassName="nav-icon" />,
|
||||
to: '/application/name',
|
||||
to: "/application/name",
|
||||
},
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Address',
|
||||
name: "Address",
|
||||
icon: <CIcon icon={cilAddressBook} customClassName="nav-icon" />,
|
||||
to: '/address',
|
||||
to: "/address",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Logos',
|
||||
name: "Logos",
|
||||
icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
|
||||
to: '/logo',
|
||||
to: "/logo",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Copyright Message',
|
||||
name: "Copyright Message",
|
||||
icon: <CIcon icon={cilText} customClassName="nav-icon" />,
|
||||
to: '/copyright/message',
|
||||
to: "/copyright/message",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
||||
export default _nav
|
||||
export default _nav;
|
||||
|
||||
40
src/index.js
40
src/index.js
@ -1,23 +1,23 @@
|
||||
import '@coreui/coreui/dist/css/coreui.min.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'react-app-polyfill/stable'
|
||||
import 'core-js'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import App from './App'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
import { Provider } from 'react-redux'
|
||||
import axios from 'axios'
|
||||
import { store } from './redux/store';
|
||||
import { cibGmail } from '@coreui/icons';
|
||||
import "@coreui/coreui/dist/css/coreui.min.css";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import "react-app-polyfill/stable";
|
||||
import "core-js";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import { Provider } from "react-redux";
|
||||
import axios from "axios";
|
||||
import { store } from "./redux/store";
|
||||
import { cibGmail } from "@coreui/icons";
|
||||
|
||||
const setupAxios = () => {
|
||||
axios.defaults.baseURL = 'https://bolo-api.checkapp.one/'
|
||||
//axios.defaults.baseURL = 'http://localhost:5000'
|
||||
//axios.defaults.baseURL = 'https://bolo-api.checkapp.one/'
|
||||
axios.defaults.baseURL = "http://localhost:5000";
|
||||
axios.defaults.headers = {
|
||||
'Cache-Control': 'no-cache,no-store',
|
||||
'Pragma': 'no-cache',
|
||||
'Expires': '0',
|
||||
"Cache-Control": "no-cache,no-store",
|
||||
Pragma: "no-cache",
|
||||
Expires: "0",
|
||||
};
|
||||
};
|
||||
|
||||
@ -27,10 +27,10 @@ ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>,
|
||||
document.getElementById('root'),
|
||||
)
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: http://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister()
|
||||
serviceWorker.unregister();
|
||||
|
||||
300
src/routes.js
300
src/routes.js
@ -1,177 +1,241 @@
|
||||
import React from 'react'
|
||||
|
||||
import React from "react";
|
||||
|
||||
// DashBoard
|
||||
const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
|
||||
const Change_Password = React.lazy(() =>
|
||||
import("./views/pages/register/Change_password")
|
||||
);
|
||||
|
||||
|
||||
import Profile from './views/Profile/Profile'
|
||||
import EditProfile from './views/Profile/EditProfile'
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
import Profile from "./views/Profile/Profile";
|
||||
import EditProfile from "./views/Profile/EditProfile";
|
||||
const Dashboard = React.lazy(() => import("./views/dashboard/Dashboard"));
|
||||
///
|
||||
//Cities
|
||||
import Cities from './views/configuration/Purpose/Purpose.js'
|
||||
import AddCity from './views/configuration/Purpose/AddPurpose.js'
|
||||
import EditCity from './views/configuration/Purpose/EditPurpose.js'
|
||||
import Cities from "./views/configuration/Purpose/Purpose.js";
|
||||
import AddCity from "./views/configuration/Purpose/AddPurpose.js";
|
||||
import EditCity from "./views/configuration/Purpose/EditPurpose.js";
|
||||
//states
|
||||
import EditState from './views/configuration/states/EditStates.js'
|
||||
import AddState from './views/configuration/states/AddState.js'
|
||||
import States from './views/configuration/states/States.js'
|
||||
import EditState from "./views/configuration/states/EditStates.js";
|
||||
import AddState from "./views/configuration/states/AddState.js";
|
||||
import States from "./views/configuration/states/States.js";
|
||||
//social media,address,logo
|
||||
import Socialmedia from './views/configuration/Socialmedia.js'
|
||||
import Address from './views/configuration/Address.js'
|
||||
import Logo from './views/configuration/Logo.js'
|
||||
import Login from './views/pages/login/Login'
|
||||
import Socialmedia from "./views/configuration/Socialmedia.js";
|
||||
import Address from "./views/configuration/Address.js";
|
||||
import Logo from "./views/configuration/Logo.js";
|
||||
import Login from "./views/pages/login/Login";
|
||||
|
||||
// Appointments
|
||||
import Appointments from "./views/Appointments/Appointments";
|
||||
|
||||
//Businesses
|
||||
import Businesses from './views/Business/Businesses.js'
|
||||
import AddBusiness from './views/Business/AddBusiness.js'
|
||||
import EditBusiness from './views/Business/EditBusiness.js'
|
||||
import Products from './views/Products/Products'
|
||||
import Businesses from "./views/Business/Businesses.js";
|
||||
import AddBusiness from "./views/Business/AddBusiness.js";
|
||||
import EditBusiness from "./views/Business/EditBusiness.js";
|
||||
import Products from "./views/Products/Products";
|
||||
//product
|
||||
import AddProduct from './views/Products/AddProduct'
|
||||
import EditProduct from './views/Products/EditProduct'
|
||||
import ViewProduct from './views/Products/ViewProduct'
|
||||
import AddProduct from "./views/Products/AddProduct";
|
||||
import EditProduct from "./views/Products/EditProduct";
|
||||
import ViewProduct from "./views/Products/ViewProduct";
|
||||
|
||||
//Order Management
|
||||
import NewOrders from './views/orders/NewOrders.js'
|
||||
import ProcessingOrders from './views/orders/ProcessingOrders.js'
|
||||
import DispatchedOrders from './views/orders/DispatchedOrders.js'
|
||||
import DeliveredOrders from './views/orders/DeliveredOrders.js'
|
||||
import CancelledOrders from './views/orders/CancelledOrders.js'
|
||||
import ReturnedOrders from './views/orders/ReturnedOrders.js'
|
||||
import ViewOrder from './views/orders/ViewOrder'
|
||||
import AddOrder from './views/orders/AddOrder'
|
||||
import NewOrders from "./views/orders/NewOrders.js";
|
||||
import ProcessingOrders from "./views/orders/ProcessingOrders.js";
|
||||
import DispatchedOrders from "./views/orders/DispatchedOrders.js";
|
||||
import DeliveredOrders from "./views/orders/DeliveredOrders.js";
|
||||
import CancelledOrders from "./views/orders/CancelledOrders.js";
|
||||
import ReturnedOrders from "./views/orders/ReturnedOrders.js";
|
||||
import ViewOrder from "./views/orders/ViewOrder";
|
||||
import AddOrder from "./views/orders/AddOrder";
|
||||
//Taxes
|
||||
import Tax from './views/configuration/tax/Tax'
|
||||
import Addtax from './views/configuration/tax/Addtax'
|
||||
import Edittax from './views/configuration/tax/Edittax'
|
||||
import EditOrder from './views/orders/EditOrder'
|
||||
import ViewOrders from './views/orders/ViewOrders'
|
||||
import Departures from './views/Departures/Departures'
|
||||
import AddDeparture from './views/Departures/AddDeparture'
|
||||
import Informations from './views/Informations/Informations'
|
||||
import AddInformations from './views/Informations/AddInformations'
|
||||
import Tax from "./views/configuration/tax/Tax";
|
||||
import Addtax from "./views/configuration/tax/Addtax";
|
||||
import Edittax from "./views/configuration/tax/Edittax";
|
||||
import EditOrder from "./views/orders/EditOrder";
|
||||
import ViewOrders from "./views/orders/ViewOrders";
|
||||
import Departures from "./views/Departures/Departures";
|
||||
import AddDeparture from "./views/Departures/AddDeparture";
|
||||
import Informations from "./views/Informations/Informations";
|
||||
import AddInformations from "./views/Informations/AddInformations";
|
||||
|
||||
import ApplicationName from './views/configuration/ApplicationName'
|
||||
import CopyrightMessage from './views/configuration/CopyrightMessage'
|
||||
import ContactRequests from './views/ContactRequests/ContactRequests'
|
||||
import AddContactRequest from './views/ContactRequests/AddContactRequest'
|
||||
import Testimonials from './views/Testimonials/Testimonials'
|
||||
import AddTestimonial from './views/Testimonials/AddTestimonial'
|
||||
import ViewTestimonial from './views/Testimonials/ViewTestimonial'
|
||||
import Policies from './views/configuration/Policies/Policies'
|
||||
import ApplicationName from "./views/configuration/ApplicationName";
|
||||
import CopyrightMessage from "./views/configuration/CopyrightMessage";
|
||||
import ContactRequests from "./views/ContactRequests/ContactRequests";
|
||||
import AddContactRequest from "./views/ContactRequests/AddContactRequest";
|
||||
import Testimonials from "./views/Testimonials/Testimonials";
|
||||
import AddTestimonial from "./views/Testimonials/AddTestimonial";
|
||||
import ViewTestimonial from "./views/Testimonials/ViewTestimonial";
|
||||
import Policies from "./views/configuration/Policies/Policies";
|
||||
////purpose
|
||||
import Purpose from './views/configuration/Purpose/Purpose'
|
||||
import AddPurpose from './views/configuration/Purpose/AddPurpose'
|
||||
import Purpose from "./views/configuration/Purpose/Purpose";
|
||||
import AddPurpose from "./views/configuration/Purpose/AddPurpose";
|
||||
//language
|
||||
import Languages from './views/configuration/Language/Languages'
|
||||
import AddLanguage from './views/configuration/Language/AddLanguage'
|
||||
import EditLanguage from './views/configuration/Language/EditLanguage'
|
||||
import Languages from "./views/configuration/Language/Languages";
|
||||
import AddLanguage from "./views/configuration/Language/AddLanguage";
|
||||
import EditLanguage from "./views/configuration/Language/EditLanguage";
|
||||
//BusinessType
|
||||
import BusinessType from './views/configuration/Business_Type/Business'
|
||||
import AddBusinessType from './views/configuration/Business_Type/AddBusiness'
|
||||
import EditBusinessType from './views/configuration/Business_Type/EditLanguage'
|
||||
import EditPurpose from './views/configuration/Purpose/EditPurpose.js'
|
||||
import BusinessType from "./views/configuration/Business_Type/Business";
|
||||
import AddBusinessType from "./views/configuration/Business_Type/AddBusiness";
|
||||
import EditBusinessType from "./views/configuration/Business_Type/EditLanguage";
|
||||
import EditPurpose from "./views/configuration/Purpose/EditPurpose.js";
|
||||
import ViewAppointment from "./views/Appointments/ViewAppointment";
|
||||
import EditAppointment from "./views/Appointments/EditAppointment";
|
||||
import AddNewAppointment from "./views/Appointments/AddNewAppointment";
|
||||
const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
{ path: '/change_password', name: 'Change Password', element: Change_Password },
|
||||
{ path: '/profile/edit', name: 'Edit Profile', element: EditProfile },
|
||||
{ path: "/", exact: true, name: "Home" },
|
||||
{
|
||||
path: "/change_password",
|
||||
name: "Change Password",
|
||||
element: Change_Password,
|
||||
},
|
||||
{ path: "/profile/edit", name: "Edit Profile", element: EditProfile },
|
||||
// { path: '/profile', name: 'Profile', element: Profile },
|
||||
|
||||
|
||||
//Product
|
||||
{ path: '/products', name: 'products', element: Products },
|
||||
{ path: '/product/add', name: 'Add products', element: AddProduct },
|
||||
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
|
||||
{ path: '/product/view/:id', name: 'view products', element: ViewProduct },
|
||||
{ path: "/products", name: "products", element: Products },
|
||||
{ path: "/product/add", name: "Add products", element: AddProduct },
|
||||
{ path: "/product/edit/:id", name: "Edit products", element: EditProduct },
|
||||
{ path: "/product/view/:id", name: "view products", element: ViewProduct },
|
||||
//Departure
|
||||
{ path: '/departures', name: 'Departures', element: Departures },
|
||||
{ path: '/departure/add', name: 'Add Departure', element: AddDeparture },
|
||||
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
|
||||
{ path: '/product/view/:id', name: 'view products', element: ViewProduct },
|
||||
//Franchisee
|
||||
{ path: '/businesses', name: 'business', element: Businesses },
|
||||
{ path: '/business/add', name: 'Add business', element: AddBusiness },
|
||||
{ path: '/business/edit/:id', name: 'Edit business', element: EditBusiness },
|
||||
{ path: "/departures", name: "Departures", element: Departures },
|
||||
{ path: "/departure/add", name: "Add Departure", element: AddDeparture },
|
||||
{ path: "/product/edit/:id", name: "Edit products", element: EditProduct },
|
||||
{ path: "/product/view/:id", name: "view products", element: ViewProduct },
|
||||
|
||||
// Appointments
|
||||
{ path: "/appointments", name: "Appointments", element: Appointments },
|
||||
{
|
||||
path: "/appointment/view/:id",
|
||||
name: "View Appointment",
|
||||
element: ViewAppointment,
|
||||
},
|
||||
{
|
||||
path: "/appointment/edit/:id",
|
||||
name: "Edit Appointment",
|
||||
element: EditAppointment,
|
||||
},
|
||||
{
|
||||
path: "/appointment/new",
|
||||
name: "Add Appointment",
|
||||
element: AddNewAppointment,
|
||||
},
|
||||
|
||||
// health care providers
|
||||
{
|
||||
path: "//healthcare/providers",
|
||||
name: "healthcare providers",
|
||||
element: Businesses,
|
||||
},
|
||||
{
|
||||
path: "//healthcare/providers/add",
|
||||
name: "Add healthcare providers",
|
||||
element: AddBusiness,
|
||||
},
|
||||
{
|
||||
path: "/healthcare/providers/edit/:id",
|
||||
name: "Edit healthcare providers",
|
||||
element: EditBusiness,
|
||||
},
|
||||
|
||||
// { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
|
||||
//Contact Requests
|
||||
{ path: '/contact/request', name: 'Contact Requests', element: ContactRequests },
|
||||
{ path: '/contact/request/new', name: 'AddContact Request', element: AddContactRequest },
|
||||
{
|
||||
path: "/contact/request",
|
||||
name: "Contact Requests",
|
||||
element: ContactRequests,
|
||||
},
|
||||
{
|
||||
path: "/contact/request/new",
|
||||
name: "AddContact Request",
|
||||
element: AddContactRequest,
|
||||
},
|
||||
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
|
||||
//Complaints
|
||||
{ path: '/testimonials', name: 'Testimonials', element: Testimonials },
|
||||
{ path: '/testimonial/new', name: 'AddTestimonial', element: AddTestimonial },
|
||||
{ path: '/testimonial/view/:id', name: 'ViewTestimonial', element: ViewTestimonial },
|
||||
{ path: "/testimonials", name: "Testimonials", element: Testimonials },
|
||||
{ path: "/testimonial/new", name: "AddTestimonial", element: AddTestimonial },
|
||||
{
|
||||
path: "/testimonial/view/:id",
|
||||
name: "ViewTestimonial",
|
||||
element: ViewTestimonial,
|
||||
},
|
||||
//informations
|
||||
{ path: '/informations', name: 'Informations', element: Informations },
|
||||
{ path: '/information/new', name: 'Add Informations', element: AddInformations },
|
||||
{ path: "/informations", name: "Informations", element: Informations },
|
||||
{
|
||||
path: "/information/new",
|
||||
name: "Add Informations",
|
||||
element: AddInformations,
|
||||
},
|
||||
|
||||
//Order Management
|
||||
|
||||
|
||||
{ path: '/orders/new', name: 'New Orders', element: NewOrders },
|
||||
{ path: '/order/add', name: 'add Order', element: AddOrder },
|
||||
{ path: '/orders/edit/:id', name: 'Edit Order', element: EditOrder },
|
||||
{ path: '/orders/view/:id', name: 'View Order', element: ViewOrders },
|
||||
{ path: "/orders/new", name: "New Orders", element: NewOrders },
|
||||
{ path: "/order/add", name: "add Order", element: AddOrder },
|
||||
{ path: "/orders/edit/:id", name: "Edit Order", element: EditOrder },
|
||||
{ path: "/orders/view/:id", name: "View Order", element: ViewOrders },
|
||||
|
||||
// { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
|
||||
// { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
|
||||
// { path: '/orders/delivered', name: 'Delivered Orders', element: DeliveredOrders },
|
||||
// { path: '/orders/cancelled', name: 'Cancelled Orders', element: CancelledOrders },
|
||||
// { path: '/orders/returned', name: 'Returned Orders', element: ReturnedOrders },
|
||||
{ path: '/order/:status/:id', name: 'View Order', element: ViewOrder },
|
||||
|
||||
|
||||
|
||||
{ path: "/order/:status/:id", name: "View Order", element: ViewOrder },
|
||||
|
||||
//dashboard
|
||||
|
||||
{ path: '/dashboard', name: 'Dashboard', element: Dashboard },
|
||||
{ path: "/dashboard", name: "Dashboard", element: Dashboard },
|
||||
|
||||
//------------settings------------------------//
|
||||
|
||||
{ path: '/policies', name: 'Policies', element: Policies },
|
||||
{ path: "/policies", name: "Policies", element: Policies },
|
||||
|
||||
{ path: '/socialmedia', name: 'Social Media', element: Socialmedia },
|
||||
{ path: '/purpose', name: 'Purpose', element: Purpose },
|
||||
{ path: '/purpose/add', name: 'Add Purpose', element: AddPurpose },
|
||||
{ path: "/socialmedia", name: "Social Media", element: Socialmedia },
|
||||
{ path: "/purpose", name: "Purpose", element: Purpose },
|
||||
{ path: "/purpose/add", name: "Add Purpose", element: AddPurpose },
|
||||
//languge
|
||||
|
||||
{ path: '/languages', name: 'languages', element: Languages },
|
||||
{ path: '/language/add', name: 'Add languages', element: AddLanguage },
|
||||
{ path: '/language/edit/:id', name: 'Edit languages', element: EditLanguage },
|
||||
{ path: "/languages", name: "languages", element: Languages },
|
||||
{ path: "/language/add", name: "Add languages", element: AddLanguage },
|
||||
{ path: "/language/edit/:id", name: "Edit languages", element: EditLanguage },
|
||||
//business Type
|
||||
|
||||
{ path: '/business_type', name: 'business', element: BusinessType },
|
||||
{ path: '/business_type/add', name: 'Add business', element: AddBusinessType },
|
||||
{ path: '/business_type/edit/:id', name: 'Edit business', element: EditBusinessType },
|
||||
{ path: "/business_type", name: "business", element: BusinessType },
|
||||
{
|
||||
path: "/business_type/add",
|
||||
name: "Add business",
|
||||
element: AddBusinessType,
|
||||
},
|
||||
{
|
||||
path: "/business_type/edit/:id",
|
||||
name: "Edit business",
|
||||
element: EditBusinessType,
|
||||
},
|
||||
|
||||
//purpose
|
||||
|
||||
{ path: '/purpose', name: 'purpose', element: Purpose },
|
||||
{ path: '/purpose/add', name: 'Add purpose', element: AddPurpose },
|
||||
{ path: '/purpose/edit/:id', name: 'Edit purpose', element: EditPurpose },
|
||||
{ path: "/purpose", name: "purpose", element: Purpose },
|
||||
{ path: "/purpose/add", name: "Add purpose", element: AddPurpose },
|
||||
{ path: "/purpose/edit/:id", name: "Edit purpose", element: EditPurpose },
|
||||
|
||||
//languge
|
||||
{ path: '/application/name', name: 'ApplicationName', element: ApplicationName },
|
||||
{ path: '/copyright/message', name: 'Copyright Message', element: CopyrightMessage },
|
||||
{
|
||||
path: "/application/name",
|
||||
name: "ApplicationName",
|
||||
element: ApplicationName,
|
||||
},
|
||||
{
|
||||
path: "/copyright/message",
|
||||
name: "Copyright Message",
|
||||
element: CopyrightMessage,
|
||||
},
|
||||
|
||||
|
||||
{ path: '/address', name: 'Address', element: Address },
|
||||
{ path: '/logo', name: 'Logo', element: Logo },
|
||||
{ path: "/address", name: "Address", element: Address },
|
||||
{ path: "/logo", name: "Logo", element: Logo },
|
||||
|
||||
//Taxes
|
||||
{ path: '/tax', name: 'Tax Rates', element: Tax },
|
||||
{ path: '/tax/add', name: 'Add Tax', element: Addtax },
|
||||
{ path: '/tax/edit/:id', name: 'Edit Tax', element: Edittax },
|
||||
{ path: "/tax", name: "Tax Rates", element: Tax },
|
||||
{ path: "/tax/add", name: "Add Tax", element: Addtax },
|
||||
{ path: "/tax/edit/:id", name: "Edit Tax", element: Edittax },
|
||||
// -------------------------------------------//
|
||||
|
||||
|
||||
//
|
||||
];
|
||||
|
||||
|
||||
]
|
||||
|
||||
export default routes
|
||||
export default routes;
|
||||
|
||||
@ -1,9 +1,23 @@
|
||||
// Here you can add other styles
|
||||
$a-tags: 'a, a:active, a:hover, a:visited';
|
||||
$a-tags: "a, a:active, a:hover, a:visited";
|
||||
#{$a-tags} {
|
||||
text-decoration: none;
|
||||
}
|
||||
.overflow-table { display: block; max-width: -moz-fit-content; max-width: fit-content; overflow-x: auto; white-space: nowrap; }
|
||||
.edit_text{
|
||||
width: 22%;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
.overflow-table {
|
||||
display: block;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.edit_text {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.highlighted-row {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.past-row {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
397
src/views/Appointments/AddNewAppointment.js
Normal file
397
src/views/Appointments/AddNewAppointment.js
Normal file
@ -0,0 +1,397 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import { CFormSelect, CInputGroup } from "@coreui/react";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
const AddNewAppointment = () => {
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [doctors, setDoctors] = useState([]);
|
||||
const [data, setData] = useState({
|
||||
doctorId: "",
|
||||
doctorName: "",
|
||||
date: "",
|
||||
time: "",
|
||||
patientName: "",
|
||||
patientPhone: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const getDoctors = () => {
|
||||
axios
|
||||
.get("/api/specialist/getall")
|
||||
.then((res) => {
|
||||
setDoctors(res.data.specialist);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal("Error", "Could not get data", "error");
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDoctors();
|
||||
}, []);
|
||||
|
||||
// doctor options with placeholder select doctor
|
||||
const doctorOptions = [
|
||||
...doctors.map((doctor) => ({
|
||||
label: doctor.specialistName,
|
||||
value: doctor._id,
|
||||
})),
|
||||
];
|
||||
|
||||
// reusable to get weekdays from index and vice-versa
|
||||
const weekdays = [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
];
|
||||
const getWeekday = (index) => {
|
||||
return weekdays[index];
|
||||
};
|
||||
const getWeekdayIndex = (day) => {
|
||||
return weekdays.indexOf(day);
|
||||
};
|
||||
|
||||
const [availableDays, setAvailableDays] = useState([]);
|
||||
|
||||
const [filterDay, setFilterDay] = useState([]);
|
||||
|
||||
const [perPatientTime, setPerPatientTime] = useState();
|
||||
|
||||
// handle doctor change
|
||||
const handleDoctorChange = (e) => {
|
||||
const doctorId = e.target.value;
|
||||
const doctor = doctors.find((doctor) => doctor._id === doctorId);
|
||||
//filter available days for selected Doctor
|
||||
const availableDays = doctor.daysAvailable.filter(
|
||||
(day) => day.available === true
|
||||
);
|
||||
// filter day number with available days for Date picker
|
||||
const filterDay = availableDays.map((day) => {
|
||||
return getWeekdayIndex(day.label);
|
||||
});
|
||||
setFilterDay(filterDay);
|
||||
setPerPatientTime(doctor.perPatientTime);
|
||||
setAvailableDays(availableDays);
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
doctorId: doctorId,
|
||||
doctorName: doctor.specialistName,
|
||||
date: "",
|
||||
time: "",
|
||||
}));
|
||||
};
|
||||
|
||||
// find selected day from available days
|
||||
const findSelectedDay = (day) => {
|
||||
const selectedDay = availableDays.filter((days) => days.label === day);
|
||||
return selectedDay;
|
||||
};
|
||||
|
||||
const [timeOptions, setTimeOptions] = useState([]);
|
||||
|
||||
// create time options with label and value from timeSlots array
|
||||
// const createTimeOptions = (timeSlots, patientTime) => {
|
||||
// // create time interval of perPatientTime min from start time to end time and push it to timeOptions array with label and value
|
||||
// };
|
||||
|
||||
const createTimeOptions = (timeSlots, patientTime) => {
|
||||
const timeOptions = [];
|
||||
|
||||
timeSlots.forEach((timeSlot) => {
|
||||
const startTime = new Date(`January 1, 2022 ${timeSlot.startTime}`);
|
||||
const endTime = new Date(`January 1, 2022 ${timeSlot.endTime}`);
|
||||
|
||||
// Create time intervals of 'patientTime' minutes from start time to end time
|
||||
let intervalTime = startTime;
|
||||
while (intervalTime < endTime) {
|
||||
const intervalEnd = new Date(
|
||||
intervalTime.getTime() + patientTime * 60000
|
||||
);
|
||||
const timeLabel = `${intervalTime.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})} - ${intervalEnd.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}`;
|
||||
const timeValue = intervalTime.toISOString();
|
||||
timeOptions.push({ label: timeLabel, value: timeValue });
|
||||
intervalTime = intervalEnd;
|
||||
}
|
||||
});
|
||||
|
||||
return timeOptions;
|
||||
};
|
||||
|
||||
// handle date change
|
||||
const handleDateChange = async (date) => {
|
||||
const day = getWeekday(date.getDay());
|
||||
const selectedDay = findSelectedDay(day);
|
||||
|
||||
const timeOptions = await createTimeOptions(
|
||||
selectedDay[0].timeSlots,
|
||||
perPatientTime
|
||||
);
|
||||
await setTimeOptions(timeOptions);
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
date: date,
|
||||
time: "",
|
||||
}));
|
||||
};
|
||||
|
||||
// 0
|
||||
// :
|
||||
// endTime
|
||||
// :
|
||||
// "20:39"
|
||||
// startTime
|
||||
// :
|
||||
// "18:37"
|
||||
// _id
|
||||
// :
|
||||
// "642a9679d243d8ac7d51fa75
|
||||
|
||||
const handleChange = (e) => {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.doctorName.trim() === "" ||
|
||||
data.date === "" ||
|
||||
data.time === "" ||
|
||||
data.patientName.trim() === "" ||
|
||||
data.patientPhone.trim() === ""
|
||||
) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.set("doctorId", data.doctorId);
|
||||
formData.set("doctorName", data.doctorName);
|
||||
formData.set("date", data.date);
|
||||
formData.set("time", data.time);
|
||||
formData.set("patientName", data.patientName);
|
||||
formData.set("patientPhone", data.patientPhone);
|
||||
|
||||
axios
|
||||
.post(`/api/appointment/new/`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Added",
|
||||
text: "appointment added successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
navigate("/appointments", { replace: true });
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
const message = err.response?.data?.message || "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
New Appointment
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Loading" : "Add"}
|
||||
</Button>
|
||||
<Link to="/appointments">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="doctorName" className="form-label">
|
||||
Doctor Name *
|
||||
</label>
|
||||
|
||||
<select
|
||||
type="select"
|
||||
className="form-control"
|
||||
id="doctorName"
|
||||
name="doctorName"
|
||||
onChange={(e) => handleDoctorChange(e)}
|
||||
options={doctorOptions}
|
||||
>
|
||||
<option hidden>Select Doctor</option>
|
||||
{doctorOptions.map((doctor) => (
|
||||
<option value={doctor.value} key={doctor.label}>
|
||||
{doctor.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{data.doctorId && (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="date" className="form-label">
|
||||
Date *
|
||||
</label>
|
||||
<DatePicker
|
||||
type="date"
|
||||
className="form-control"
|
||||
id="date"
|
||||
name="date"
|
||||
selected={data.date}
|
||||
onChange={(e) => handleDateChange(e)}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
minDate={new Date()}
|
||||
placeholderText="Select a date"
|
||||
filterDate={(date) => {
|
||||
return filterDay.includes(date.getDay());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.date && (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="time" className="form-label">
|
||||
Time *
|
||||
</label>
|
||||
<select
|
||||
type="select"
|
||||
className="form-control"
|
||||
id="time"
|
||||
name="time"
|
||||
value={data.time}
|
||||
options={timeOptions}
|
||||
onChange={(e) => handleChange(e)}
|
||||
>
|
||||
<option hidden>Select Time</option>
|
||||
{timeOptions.map((time) => (
|
||||
<option value={time.value} key={time.label}>
|
||||
{time.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="patientName" className="form-label">
|
||||
Patient Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="patientName"
|
||||
value={data.patientName}
|
||||
placeholder="Enter Patient Name"
|
||||
maxLength="100"
|
||||
onChange={(e) => handleChange(e)}
|
||||
></input>
|
||||
{data.patientName ? (
|
||||
<>
|
||||
<small className="charLeft mt-4 fst-italic">
|
||||
{100 - data.patientName.length} characters left
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="patientPhone" className="form-label">
|
||||
Patient Phone *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-control"
|
||||
id="patientPhone"
|
||||
value={data.patientPhone}
|
||||
placeholder="Enter Patient Phone"
|
||||
maxLength="10"
|
||||
onChange={(e) => handleChange(e)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNewAppointment;
|
||||
507
src/views/Appointments/Appointments.js
Normal file
507
src/views/Appointments/Appointments.js
Normal file
@ -0,0 +1,507 @@
|
||||
import axios from "axios";
|
||||
import React from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isAutheticated } from "../../auth";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from "@material-ui/core";
|
||||
import {
|
||||
DataGrid,
|
||||
GridCellProps,
|
||||
GridRenderCellParams,
|
||||
} from "@material-ui/data-grid";
|
||||
import CIcon from "@coreui/icons-react";
|
||||
import { cilTrash } from "@coreui/icons";
|
||||
|
||||
const Appointments = () => {
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [AppointmentData, setAppointmentData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(AppointmentData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
const getAppointmentData = async () => {
|
||||
axios
|
||||
.get(`/api/appointment/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// convert date from utc to local
|
||||
|
||||
const appointments = res.data.appointments;
|
||||
|
||||
appointments.forEach((item) => {
|
||||
//convert date from utc to local and make it in dd/mm/yyyy format month is in short form like jan,feb and add 0 before single digit date like 01,02
|
||||
item.date = new Date(item.date).toLocaleDateString("en-IN", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
// add leading zeros to single digit dates
|
||||
item.date = item.date.replace(
|
||||
/(\d{1,2})\s(\w{3})\s(\d{4})/,
|
||||
function (match, day, month, year) {
|
||||
return `${day.padStart(2, "0")} ${month} ${year}`;
|
||||
}
|
||||
);
|
||||
|
||||
//convert time from utc to local till minutes
|
||||
item.time = new Date(item.time).toLocaleTimeString("en-IN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
});
|
||||
|
||||
// sort by date
|
||||
// appointments.sort((a, b) => {
|
||||
// return new Date(b.date) - new Date(a.date);
|
||||
// });
|
||||
|
||||
// sort by date in descending order
|
||||
appointments.sort((a, b) => {
|
||||
const dateA = new Date(a.date);
|
||||
const dateB = new Date(b.date);
|
||||
return dateB.getTime() - dateA.getTime();
|
||||
});
|
||||
|
||||
setAppointmentData(appointments);
|
||||
|
||||
setLoading(false);
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
// create columns for data grid table from appointment data
|
||||
const columns = [
|
||||
{
|
||||
field: "doctorName",
|
||||
headerName: "Doctor Name",
|
||||
minWidth: 180,
|
||||
flex: 1,
|
||||
editable: false,
|
||||
},
|
||||
{
|
||||
field: "patientName",
|
||||
headerName: "Patient Name",
|
||||
minWidth: 150,
|
||||
flex: 1,
|
||||
editable: false,
|
||||
},
|
||||
{
|
||||
field: "patientPhone",
|
||||
headerName: "Patient Phone",
|
||||
minWidth: 150,
|
||||
flex: 1,
|
||||
editable: false,
|
||||
},
|
||||
{
|
||||
field: "date",
|
||||
headerName: "Date",
|
||||
minWidth: 120,
|
||||
flex: 1,
|
||||
editable: false,
|
||||
},
|
||||
{
|
||||
field: "time",
|
||||
headerName: "Time",
|
||||
minWidth: 110,
|
||||
flex: 1,
|
||||
editable: false,
|
||||
},
|
||||
|
||||
{
|
||||
field: "action",
|
||||
headerName: "Action",
|
||||
minWidth: 180,
|
||||
flex: 1,
|
||||
// view edit and delete
|
||||
renderCell: (params) => {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => handleView(params.row._id)}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getAppointmentData();
|
||||
}, [success]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(AppointmentData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, AppointmentData]);
|
||||
|
||||
// create rows for data grid table from appointment data
|
||||
const rows = showData.map((item, index) => {
|
||||
return {
|
||||
id: index + 1,
|
||||
appointmentNumber: item.appointmentNumber,
|
||||
_id: item._id,
|
||||
doctorName: item.doctorName,
|
||||
date: item.date,
|
||||
time: item.time,
|
||||
patientName: item.patientName,
|
||||
patientPhone: item.patientPhone,
|
||||
};
|
||||
});
|
||||
|
||||
const handleDelete = (id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
icon: "error",
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/appointment/delete/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Success",
|
||||
text: "Appointment deleted successfully!",
|
||||
icon: "success",
|
||||
button: "Ok",
|
||||
});
|
||||
setSuccess((prev) => !prev);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleView = (id) => {
|
||||
navigate(`/appointment/view/${id}`);
|
||||
};
|
||||
|
||||
const handleEdit = (id) => {
|
||||
navigate(`/appointment/edit/${id}`);
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
const searchValue = e.target.value;
|
||||
const filteredData = AppointmentData.filter((item) => {
|
||||
return (
|
||||
item.appointmentNumber
|
||||
.toLowerCase()
|
||||
.includes(searchValue.toLowerCase()) ||
|
||||
item.doctorName.toLowerCase().includes(searchValue.toLowerCase()) ||
|
||||
item.patientName.toLowerCase().includes(searchValue.toLowerCase()) ||
|
||||
item.patientPhone.toLowerCase().includes(searchValue.toLowerCase()) ||
|
||||
item.date.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
});
|
||||
setShowData(filteredData);
|
||||
};
|
||||
|
||||
// const handlePageChange = (e, page) => {
|
||||
// setCurrentPage(page);
|
||||
// };
|
||||
|
||||
function compareDates(a, b) {
|
||||
const dateA = new Date(a.date);
|
||||
const dateB = new Date(b.date);
|
||||
if (dateA < dateB) {
|
||||
return -1;
|
||||
}
|
||||
if (dateA > dateB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
const initialSortModel = [
|
||||
{
|
||||
field: "date",
|
||||
sort: "asc",
|
||||
},
|
||||
];
|
||||
|
||||
const getRowClassName = (params) => {
|
||||
// get row date and current date in same format and compare
|
||||
const rowDate = new Date(params.row.date);
|
||||
const currentDate = new Date().setHours(0, 0, 0, 0);
|
||||
|
||||
if (rowDate < currentDate) {
|
||||
return "past-row";
|
||||
}
|
||||
|
||||
// if (params.row.id === 2) {
|
||||
// return "highlighted-row";
|
||||
// }
|
||||
return "";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Appointments
|
||||
</div>
|
||||
|
||||
{/*<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/appointment/new", { replace: true });
|
||||
}}
|
||||
>
|
||||
Add New Appointment
|
||||
</Button>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show entries
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!loading ? (
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Search
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search by doctor name, patient name, patient phone, date"
|
||||
onChange={(e) => handleSearch(e)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div style={{ height: 400, width: "100%" }}>
|
||||
<DataGrid
|
||||
getRowHeight={() => "auto"}
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
pageSize={itemPerPage}
|
||||
rowCount={AppointmentData.length}
|
||||
className="table-responsive"
|
||||
getRowClassName={getRowClassName}
|
||||
sx={{
|
||||
"& .MuiDataGrid-cell": {
|
||||
display: "block",
|
||||
},
|
||||
".MuiDataGrid-root .MuiDataGrid-cell": {
|
||||
whiteSpace: "normal",
|
||||
wordWrap: "breakWord",
|
||||
},
|
||||
}}
|
||||
initialState={{
|
||||
...rows.initialState,
|
||||
sorting: {
|
||||
...rows.initialState?.sorting,
|
||||
sortModel: [
|
||||
{
|
||||
field: "date",
|
||||
sort: "desc",
|
||||
},
|
||||
],
|
||||
sortComparator: { compareDates },
|
||||
},
|
||||
}}
|
||||
{...rows}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
AppointmentData.length
|
||||
)}{" "}
|
||||
of {AppointmentData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
AppointmentData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
AppointmentData.length - 1
|
||||
)
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Appointments;
|
||||
443
src/views/Appointments/EditAppointment.js
Normal file
443
src/views/Appointments/EditAppointment.js
Normal file
@ -0,0 +1,443 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import { CFormSelect, CInputGroup } from "@coreui/react";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
const EditAppointment = () => {
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [doctors, setDoctors] = useState([]);
|
||||
const [data, setData] = useState({
|
||||
doctorId: "",
|
||||
doctorName: "",
|
||||
date: "",
|
||||
time: "",
|
||||
patientName: "",
|
||||
patientPhone: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const getDoctors = () => {
|
||||
axios
|
||||
.get("/api/specialist/getall")
|
||||
.then((res) => {
|
||||
setDoctors(res.data.specialist);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal("Error", "Could not get data", "error");
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDoctors();
|
||||
}, []);
|
||||
|
||||
// doctor options with placeholder select doctor
|
||||
const doctorOptions = [
|
||||
...doctors.map((doctor) => ({
|
||||
label: doctor.specialistName,
|
||||
value: doctor._id,
|
||||
})),
|
||||
];
|
||||
|
||||
// reusable to get weekdays from index and vice-versa
|
||||
const weekdays = [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
];
|
||||
const getWeekday = (index) => {
|
||||
return weekdays[index];
|
||||
};
|
||||
const getWeekdayIndex = (day) => {
|
||||
return weekdays.indexOf(day);
|
||||
};
|
||||
|
||||
const [availableDays, setAvailableDays] = useState([]);
|
||||
|
||||
const [filterDay, setFilterDay] = useState([]);
|
||||
|
||||
const [perPatientTime, setPerPatientTime] = useState();
|
||||
|
||||
const [currentAppointment, setCurrentAppointment] = useState({});
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
// get appointment by id
|
||||
const getAppointment = () => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get(`/api/appointment/get/${id}`)
|
||||
.then((res) => {
|
||||
const appointment = res.data.appointment;
|
||||
|
||||
appointment.date = new Date(appointment.date).toISOString("en-IN");
|
||||
appointment.time = new Date(appointment.time).toLocaleTimeString(
|
||||
"en-IN",
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}
|
||||
);
|
||||
|
||||
setCurrentAppointment(appointment);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal("Error", "Could not get data", "error");
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAppointment();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
//doctorId: currentAppointment.doctorId,
|
||||
//doctorName: currentAppointment.doctorName,
|
||||
//date: currentAppointment.date,
|
||||
///time: currentAppointment.time,
|
||||
patientName: currentAppointment.patientName,
|
||||
patientPhone: currentAppointment.patientPhone,
|
||||
}));
|
||||
}, [currentAppointment]);
|
||||
|
||||
// handle doctor change
|
||||
const handleDoctorChange = (e) => {
|
||||
const doctorId = e.target.value;
|
||||
const doctor = doctors.find((doctor) => doctor._id === doctorId);
|
||||
//filter available days for selected Doctor
|
||||
const availableDays = doctor.daysAvailable.filter(
|
||||
(day) => day.available === true
|
||||
);
|
||||
// filter day number with available days for Date picker
|
||||
const filterDay = availableDays.map((day) => {
|
||||
return getWeekdayIndex(day.label);
|
||||
});
|
||||
setFilterDay(filterDay);
|
||||
setPerPatientTime(doctor.perPatientTime);
|
||||
setAvailableDays(availableDays);
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
doctorId: doctorId,
|
||||
doctorName: doctor.specialistName,
|
||||
date: "",
|
||||
time: "",
|
||||
}));
|
||||
};
|
||||
|
||||
// find selected day from available days
|
||||
const findSelectedDay = (day) => {
|
||||
const selectedDay = availableDays.filter((days) => days.label === day);
|
||||
return selectedDay;
|
||||
};
|
||||
|
||||
const [timeOptions, setTimeOptions] = useState([]);
|
||||
|
||||
// create time options with label and value from timeSlots array
|
||||
// const createTimeOptions = (timeSlots, patientTime) => {
|
||||
// // create time interval of perPatientTime min from start time to end time and push it to timeOptions array with label and value
|
||||
// };
|
||||
|
||||
const createTimeOptions = (timeSlots, patientTime) => {
|
||||
const timeOptions = [];
|
||||
|
||||
timeSlots.forEach((timeSlot) => {
|
||||
const startTime = new Date(`January 1, 2022 ${timeSlot.startTime}`);
|
||||
const endTime = new Date(`January 1, 2022 ${timeSlot.endTime}`);
|
||||
|
||||
// Create time intervals of 'patientTime' minutes from start time to end time
|
||||
let intervalTime = startTime;
|
||||
while (intervalTime < endTime) {
|
||||
const intervalEnd = new Date(
|
||||
intervalTime.getTime() + patientTime * 60000
|
||||
);
|
||||
const timeLabel = `${intervalTime.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})} - ${intervalEnd.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}`;
|
||||
const timeValue = intervalTime.toISOString();
|
||||
timeOptions.push({ label: timeLabel, value: timeValue });
|
||||
intervalTime = intervalEnd;
|
||||
}
|
||||
});
|
||||
|
||||
return timeOptions;
|
||||
};
|
||||
|
||||
// handle date change
|
||||
const handleDateChange = async (date) => {
|
||||
const day = getWeekday(date.getDay());
|
||||
const selectedDay = findSelectedDay(day);
|
||||
|
||||
const timeOptions = await createTimeOptions(
|
||||
selectedDay[0].timeSlots,
|
||||
perPatientTime
|
||||
);
|
||||
await setTimeOptions(timeOptions);
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
date: date,
|
||||
time: "",
|
||||
}));
|
||||
};
|
||||
|
||||
// 0
|
||||
// :
|
||||
// endTime
|
||||
// :
|
||||
// "20:39"
|
||||
// startTime
|
||||
// :
|
||||
// "18:37"
|
||||
// _id
|
||||
// :
|
||||
// "642a9679d243d8ac7d51fa75
|
||||
|
||||
const handleChange = (e) => {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.doctorName.trim() === "" ||
|
||||
data.date === "" ||
|
||||
data.time === "" ||
|
||||
data.patientName.trim() === "" ||
|
||||
data.patientPhone.trim() === ""
|
||||
) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.set("doctorId", data.doctorId);
|
||||
formData.set("doctorName", data.doctorName);
|
||||
formData.set("date", data.date);
|
||||
formData.set("time", data.time);
|
||||
formData.set("patientName", data.patientName);
|
||||
formData.set("patientPhone", data.patientPhone);
|
||||
|
||||
axios
|
||||
.patch(`/api/appointment/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: "appointment updated successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
navigate("/appointments", { replace: true });
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
const message = err.response?.data?.message || "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Edit Appointment
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Loading" : "Save"}
|
||||
</Button>
|
||||
<Link to="/appointments">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-12 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="doctorName" className="form-label">
|
||||
Doctor Name *
|
||||
</label>
|
||||
|
||||
<select
|
||||
type="select"
|
||||
className="form-control"
|
||||
id="doctorName"
|
||||
name="doctorName"
|
||||
onChange={(e) => handleDoctorChange(e)}
|
||||
options={doctorOptions}
|
||||
>
|
||||
<option hidden>Select Doctor</option>
|
||||
{doctorOptions.map((doctor) => (
|
||||
<option value={doctor.value} key={doctor.label}>
|
||||
{doctor.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{data.doctorId && (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="date" className="form-label">
|
||||
Date *
|
||||
</label>
|
||||
<DatePicker
|
||||
type="date"
|
||||
className="form-control"
|
||||
id="date"
|
||||
name="date"
|
||||
selected={data.date}
|
||||
onChange={(e) => handleDateChange(e)}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
minDate={new Date()}
|
||||
placeholderText="Select a date"
|
||||
filterDate={(date) => {
|
||||
return filterDay.includes(date.getDay());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.date && (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="time" className="form-label">
|
||||
Time *
|
||||
</label>
|
||||
<select
|
||||
type="select"
|
||||
className="form-control"
|
||||
id="time"
|
||||
name="time"
|
||||
value={data.time}
|
||||
options={timeOptions}
|
||||
onChange={(e) => handleChange(e)}
|
||||
>
|
||||
<option hidden>Select Time</option>
|
||||
{timeOptions.map((time) => (
|
||||
<option value={time.value} key={time.label}>
|
||||
{time.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="patientName" className="form-label">
|
||||
Patient Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="patientName"
|
||||
value={data.patientName}
|
||||
placeholder="Enter Patient Name"
|
||||
maxLength="100"
|
||||
onChange={(e) => handleChange(e)}
|
||||
></input>
|
||||
{data.patientName ? (
|
||||
<>
|
||||
<small className="charLeft mt-4 fst-italic">
|
||||
{100 - data.patientName.length} characters left
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="patientPhone" className="form-label">
|
||||
Patient Phone *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-control"
|
||||
id="patientPhone"
|
||||
value={data.patientPhone}
|
||||
placeholder="Enter Patient Phone"
|
||||
maxLength="10"
|
||||
onChange={(e) => handleChange(e)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditAppointment;
|
||||
153
src/views/Appointments/ViewAppointment.js
Normal file
153
src/views/Appointments/ViewAppointment.js
Normal file
@ -0,0 +1,153 @@
|
||||
import axios from "axios";
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
const ViewAppointment = () => {
|
||||
const [appointmentData, setAppointmentData] = useState();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const getAppointment = () => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get(`/api/appointment/get/${id}`)
|
||||
.then(async (res) => {
|
||||
res.data.appointment.date = await new Date(
|
||||
res.data.appointment?.date
|
||||
).toLocaleDateString("en-IN", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
// add leading zeros to single digit dates
|
||||
res.data.appointment.date = await res.data.appointment.date.replace(
|
||||
/(\d{1,2})\s(\w{3})\s(\d{4})/,
|
||||
function (match, day, month, year) {
|
||||
return `${day.padStart(2, "0")} ${month} ${year}`;
|
||||
}
|
||||
);
|
||||
setAppointmentData(res.data.appointment);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal("Error", "Could not get data", "error");
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAppointment();
|
||||
}, []);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Appointment
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/appointments/", { replace: true });
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && <div>Loading...</div>}
|
||||
{!loading && !appointmentData && <div>No data found</div>}
|
||||
{!loading && appointmentData && (
|
||||
<div>
|
||||
<table className="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="col">Appointment ID</th>
|
||||
<td>{appointmentData?._id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Appointment Number</th>
|
||||
<td>{appointmentData?.appointmentNumber}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Patient Name</th>
|
||||
<td>{appointmentData?.patientName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Patient Phone</th>
|
||||
<td>{appointmentData?.patientPhone}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Doctor Name</th>
|
||||
<td>{appointmentData?.doctorName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Appointment Date</th>
|
||||
<td>
|
||||
{appointmentData?.date ? (
|
||||
appointmentData?.date
|
||||
) : (
|
||||
<span className="text-danger">Not Set</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Appointment Time</th>
|
||||
<td>
|
||||
{new Date(appointmentData?.time).toLocaleTimeString("en-IN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}{" "}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Appointment Created</th>
|
||||
<td>
|
||||
{new Date(appointmentData?.createdAt).toLocaleDateString(
|
||||
"en-IN",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewAppointment;
|
||||
@ -1,316 +1,345 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState, useEffect } from "react";
|
||||
// import { Button } from '@mui/material'
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { CCard, CCardBody, CCardGroup, CCol, CContainer, CRow } from '@coreui/react'
|
||||
import SelectPurpose from './multiform/SelectPurpose.js'
|
||||
import SelectBusiness from './multiform/SelectBusiness.js'
|
||||
import SelectLanguage from './multiform/selectLanguage.js'
|
||||
import Contacts from './multiform/Contacts.js'
|
||||
import BAddress from './multiform/BAddress.js'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CRow,
|
||||
} from "@coreui/react";
|
||||
import SelectPurpose from "./multiform/SelectPurpose.js";
|
||||
import SelectBusiness from "./multiform/SelectBusiness.js";
|
||||
import SelectLanguage from "./multiform/selectLanguage.js";
|
||||
import Contacts from "./multiform/Contacts.js";
|
||||
import BAddress from "./multiform/BAddress.js";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
import { isAutheticated } from "src/auth";
|
||||
import DoctorInfo from "./multiform/DoctorInfo.js";
|
||||
|
||||
const AddBusiness = () => {
|
||||
const token = isAutheticated()
|
||||
const [productId, setProductId] = useState('')
|
||||
const [viewState, setViewState] = useState(1)
|
||||
// const [WebsiteURL, setWebsiteURL] = useState('https://bolo.ai.in/')
|
||||
const token = isAutheticated();
|
||||
const [productId, setProductId] = useState("");
|
||||
const [viewState, setViewState] = useState(1);
|
||||
// const [WebsiteURL, setWebsiteURL] = useState('https://bolo.ai.in/')
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [data, setData] = useState({
|
||||
WebsiteURL: "https://bolo.ai.in/",
|
||||
business: "",
|
||||
purpose: "",
|
||||
|
||||
const [data, setData] = useState({
|
||||
WebsiteURL: 'https://bolo.ai.in/',
|
||||
business: '',
|
||||
purpose: '',
|
||||
language: [],
|
||||
country: "",
|
||||
state: "",
|
||||
city: "",
|
||||
address_Line_1: "",
|
||||
address_Line_2: "",
|
||||
pincode: "",
|
||||
//contacts
|
||||
image: "",
|
||||
imageURL: "",
|
||||
business_name: "",
|
||||
email: "",
|
||||
|
||||
language: [],
|
||||
country: '',
|
||||
state: '',
|
||||
city: '',
|
||||
address_Line_1: '',
|
||||
address_Line_2: '',
|
||||
pincode: '',
|
||||
//contacts
|
||||
image: '',
|
||||
imageURL: '',
|
||||
business_name: '',
|
||||
email: '',
|
||||
short_url: "",
|
||||
contact_Number: "",
|
||||
contact_Person_Name: "",
|
||||
|
||||
short_url: '',
|
||||
contact_Number: '',
|
||||
contact_Person_Name: '',
|
||||
})
|
||||
specialization: "",
|
||||
});
|
||||
|
||||
// console.log(data)
|
||||
|
||||
|
||||
// console.log(data)
|
||||
|
||||
const handleView = (n) => {
|
||||
if (viewState === n) return
|
||||
setViewState(n)
|
||||
const handleView = (n) => {
|
||||
if (viewState === n) return;
|
||||
setViewState(n);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.address_Line_1.trim() === "" ||
|
||||
data.address_Line_2.trim() === "" ||
|
||||
data.business === "" ||
|
||||
data.language === "" ||
|
||||
data.country === "" ||
|
||||
data.state === "" ||
|
||||
data.city === "" ||
|
||||
data.pincode.trim() === "" ||
|
||||
//Contacts
|
||||
// data.image === '' ||
|
||||
// data.imageURL.trim() === '' ||
|
||||
(data.business_name.trim() === "" &&
|
||||
(data.contact_Person_Name.trim() === "" ||
|
||||
data.specialization === "")) ||
|
||||
data.email.trim() === "" ||
|
||||
data.short_url.trim() === "" ||
|
||||
data.contact_Number === "" ||
|
||||
data.contact_Person_Name.trim() === ""
|
||||
) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.address_Line_1.trim() === '' ||
|
||||
data.address_Line_2.trim() === '' ||
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.set("address_Line_1", data.address_Line_1);
|
||||
formData.set("address_Line_2", data.address_Line_2);
|
||||
|
||||
data.business === '' ||
|
||||
data.purpose.trim() === '' ||
|
||||
data.language === '' ||
|
||||
data.country === '' ||
|
||||
data.state === '' ||
|
||||
data.city === '' ||
|
||||
data.pincode.trim() === '' ||
|
||||
//Contacts
|
||||
// data.image === '' ||
|
||||
// data.imageURL.trim() === '' ||
|
||||
data.business_name.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
formData.set("purpose", data.purpose);
|
||||
formData.set("business", data.business);
|
||||
formData.set("language", data.language);
|
||||
|
||||
data.short_url.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
data.contact_Person_Name.trim() === ''
|
||||
formData.set("country", data.country);
|
||||
formData.set("city", data.city);
|
||||
formData.set("state", data.state);
|
||||
|
||||
) {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Fill all mandatory fields',
|
||||
icon: 'error',
|
||||
button: 'Close',
|
||||
dangerMode: true,
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
const formData = new FormData()
|
||||
formData.set('address_Line_1', data.address_Line_1)
|
||||
formData.set('address_Line_2', data.address_Line_2)
|
||||
formData.set("pincode", data.pincode);
|
||||
//contacts
|
||||
formData.set("business_name", data.business_name);
|
||||
formData.set("email", data.email);
|
||||
|
||||
formData.set('purpose', data.purpose)
|
||||
formData.set('business', data.business)
|
||||
formData.set('language', data.language)
|
||||
formData.set("contact_Number", data.contact_Number);
|
||||
formData.set("contact_Person_Name", data.contact_Person_Name);
|
||||
|
||||
formData.set('country', data.country)
|
||||
formData.set('city', data.city)
|
||||
formData.set('state', data.state)
|
||||
formData.set("specialization", data.specialization);
|
||||
|
||||
formData.set("url", data.WebsiteURL);
|
||||
formData.set("short_url", data.short_url);
|
||||
|
||||
formData.set('pincode', data.pincode)
|
||||
//contacts
|
||||
formData.set('business_name', data.business_name)
|
||||
formData.set('email', data.email)
|
||||
axios
|
||||
.post(`/api/businesses/add`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Added",
|
||||
text: res?.data?.message
|
||||
? res?.data?.message
|
||||
: "Business added successfully!",
|
||||
icon: "success",
|
||||
button: "Return",
|
||||
});
|
||||
setLoading(false);
|
||||
navigate("/healthcare/providers", { replace: true });
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
const message = err.response?.data?.message || "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
formData.set('contact_Number', data.contact_Number)
|
||||
formData.set('contact_Person_Name', data.contact_Person_Name)
|
||||
|
||||
|
||||
formData.set('url', data.WebsiteURL + data.short_url + '/login')
|
||||
formData.set('short_url', data.short_url)
|
||||
|
||||
axios
|
||||
.post(`/api/businesses/add`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Added',
|
||||
text: res?.data?.message ? res?.data?.message : 'Business added successfully!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
navigate('/businesses', { replace: true })
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
const message = err.response?.data?.message || 'Something went wrong!'
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: message,
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
dangerMode: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CContainer>
|
||||
<CRow className="mt-3">
|
||||
<CCol md={12}>
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<CContainer>
|
||||
<CRow className="mt-3">
|
||||
<CCol md={12}>
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Add Business
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
onClick={() => {
|
||||
handleSubmit()
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Add Healthcare Provider
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
handleSubmit();
|
||||
}}
|
||||
disabled={
|
||||
data.address_Line_1.trim() === "" ||
|
||||
data.address_Line_2.trim() === "" ||
|
||||
data.business === "" ||
|
||||
data.language === "" ||
|
||||
data.country === "" ||
|
||||
data.state === "" ||
|
||||
data.city === "" ||
|
||||
data.pincode.trim() === "" ||
|
||||
(data.business_name.trim() === "" &&
|
||||
(data.contact_Person_Name.trim() === "" ||
|
||||
data.specialization === "")) ||
|
||||
data.email.trim() === "" ||
|
||||
data.short_url.trim() === "" ||
|
||||
data.contact_Number === "" ||
|
||||
data.contact_Person_Name.trim() === ""
|
||||
}
|
||||
>
|
||||
{loading ? "Loading" : "Add Now"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md={9} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard className="p-4 mb-3">
|
||||
<CCardBody>
|
||||
{viewState === 1 && (
|
||||
<SelectBusiness
|
||||
data={{ data, setData }}
|
||||
// categories={categories}
|
||||
handleView={handleView}
|
||||
// ProductId={{ productId, setProductId }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 2 && (
|
||||
<SelectPurpose
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
|
||||
}}
|
||||
disabled={data.address_Line_1.trim() === '' ||
|
||||
data.address_Line_2.trim() === '' ||
|
||||
{viewState === 3 &&
|
||||
(data.business === "Doctor (Individual Practitioner)" ? (
|
||||
<DoctorInfo
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
) : (
|
||||
<Contacts
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
))}
|
||||
|
||||
data.business === '' ||
|
||||
data.purpose.trim() === '' ||
|
||||
data.language === '' ||
|
||||
data.country === '' ||
|
||||
data.state === '' ||
|
||||
data.city === '' ||
|
||||
data.pincode.trim() === '' ||
|
||||
data.business_name.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
{viewState === 4 && (
|
||||
<SelectLanguage
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 5 && (
|
||||
<BAddress
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
<CCol md={3} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<div className="d-grid gap-2">
|
||||
<button
|
||||
className={
|
||||
viewState === 1
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(1)}
|
||||
>
|
||||
Select Provider Type
|
||||
</button>
|
||||
{/*<button
|
||||
className={
|
||||
viewState === 2
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(2)}
|
||||
>
|
||||
Select Purpose
|
||||
</button>*/}
|
||||
<button
|
||||
className={
|
||||
viewState === 3
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(3)}
|
||||
>
|
||||
Contact Information
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
viewState === 4
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(4)}
|
||||
>
|
||||
Select Languages
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
viewState === 5
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(5)}
|
||||
>
|
||||
Address
|
||||
</button>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
);
|
||||
};
|
||||
|
||||
data.short_url.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
data.contact_Person_Name.trim() === ''}
|
||||
>
|
||||
{loading ? 'Loading' : 'Add Now'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md={9} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard className="p-4 mb-3">
|
||||
<CCardBody>
|
||||
{viewState === 1 && (
|
||||
<SelectBusiness
|
||||
data={{ data, setData }}
|
||||
// categories={categories}
|
||||
handleView={handleView}
|
||||
// ProductId={{ productId, setProductId }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 2 && (
|
||||
<SelectPurpose
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{viewState === 3 && (
|
||||
<Contacts
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 4 && (
|
||||
<SelectLanguage
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 5 && (
|
||||
<BAddress
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
<CCol md={3} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<div className="d-grid gap-2">
|
||||
<button
|
||||
className={viewState === 1 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(1)}
|
||||
>
|
||||
Select Business Type
|
||||
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 2 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(2)}
|
||||
>
|
||||
Select Purpose
|
||||
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 3 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(3)}
|
||||
>
|
||||
Contacts
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 4 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(4)}
|
||||
>
|
||||
Select Languages
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 5 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(5)}
|
||||
>
|
||||
Address
|
||||
</button>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddBusiness
|
||||
export default AddBusiness;
|
||||
|
||||
@ -1,243 +1,255 @@
|
||||
|
||||
import React, { useEffect } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import swal from 'sweetalert'
|
||||
import OverLayButton from './OverLayButton.js'
|
||||
import { isAutheticated } from 'src/auth.js'
|
||||
import React, { useEffect } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import swal from "sweetalert";
|
||||
import OverLayButton from "./OverLayButton.js";
|
||||
import { isAutheticated } from "src/auth.js";
|
||||
|
||||
const Businesses = () => {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [BusinessesData, setBusinessesData] = useState([])
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [BusinessesData, setBusinessesData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(BusinessesData)
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(BusinessesData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
const getbusinesses = () => {
|
||||
const getbusinesses = () => {
|
||||
axios
|
||||
.get(`/api/businesses/getall`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
setBusinessesData(res.data?.businesses);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getbusinesses();
|
||||
}, [success]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, BusinessesData]);
|
||||
|
||||
// const handleVarification = (id) => {
|
||||
// swal({
|
||||
// title: 'Are you sure?',
|
||||
// icon: 'warning',
|
||||
// buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
|
||||
// }).then((value) => {
|
||||
// if (value === true) {
|
||||
// axios
|
||||
// .get(`/api/i/admin/verify/${id}`, {
|
||||
// headers: {
|
||||
// 'Access-Control-Allow-Origin': '*',
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
// })
|
||||
// .then((res) => {
|
||||
// swal({
|
||||
// title: 'success',
|
||||
// text: res.data.message ? res.data.message : 'Verified Successfully!',
|
||||
// icon: 'success',
|
||||
// button: 'ok',
|
||||
// dangerMode: true,
|
||||
// })
|
||||
// setSuccess((prev) => !prev)
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// swal({
|
||||
// title: 'Failled',
|
||||
// text: 'Something went wrong!',
|
||||
// icon: 'error',
|
||||
// button: 'Retry',
|
||||
// dangerMode: true,
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
const handleDelete = (id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
icon: "error",
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.get(`/api/businesses/getall`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.data)
|
||||
setBusinessesData(res.data?.businesses)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
.delete(`/api/businesses/delete/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setSuccess((prev) => !prev);
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getbusinesses()
|
||||
}, [success])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, BusinessesData])
|
||||
|
||||
|
||||
// const handleVarification = (id) => {
|
||||
// swal({
|
||||
// title: 'Are you sure?',
|
||||
// icon: 'warning',
|
||||
// buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
|
||||
// }).then((value) => {
|
||||
// if (value === true) {
|
||||
// axios
|
||||
// .get(`/api/i/admin/verify/${id}`, {
|
||||
// headers: {
|
||||
// 'Access-Control-Allow-Origin': '*',
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
// })
|
||||
// .then((res) => {
|
||||
// swal({
|
||||
// title: 'success',
|
||||
// text: res.data.message ? res.data.message : 'Verified Successfully!',
|
||||
// icon: 'success',
|
||||
// button: 'ok',
|
||||
// dangerMode: true,
|
||||
// })
|
||||
// setSuccess((prev) => !prev)
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// swal({
|
||||
// title: 'Failled',
|
||||
// text: 'Something went wrong!',
|
||||
// icon: 'error',
|
||||
// button: 'Retry',
|
||||
// dangerMode: true,
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
const handleDelete = (id) => {
|
||||
swal({
|
||||
title: 'Are you sure?',
|
||||
icon: 'error',
|
||||
buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/businesses/delete/${id}`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setSuccess((prev) => !prev)
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Something went wrong!',
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
dangerMode: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Businesses
|
||||
</div>
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Health Care Providers
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Link to="/business/add">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
>
|
||||
Add Business
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: '10%' }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
<div className="page-title-right">
|
||||
<Link to="/healthcare/providers/add">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Add Healthcare Providers
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: '1px solid' }}
|
||||
>
|
||||
<thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
|
||||
<tr>
|
||||
<th className="text-start">Business </th>
|
||||
{/* <th className="text-start">Logo</th> */}
|
||||
<th className="text-start">Purpose </th>
|
||||
<th className="text-start">Created On</th>
|
||||
{/* <th className="text-start">Status</th> */}
|
||||
<th className="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && showData.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No Data Available</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
showData.map((i, idx) => {
|
||||
return (
|
||||
<tr key={idx}>
|
||||
<td className="text-start">{i.business}</td>
|
||||
{/* {i.banner && i.banner ?
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead-info"
|
||||
style={{ background: "rgb(140, 213, 213)" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">HealthCare Provider </th>
|
||||
{/* <th className="text-start">Logo</th> */}
|
||||
<th className="text-start">Name </th>
|
||||
<th className="text-start">Created On</th>
|
||||
{/* <th className="text-start">Status</th> */}
|
||||
<th className="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{console.log(showData, "showData")}
|
||||
|
||||
{!loading && showData.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No Data Available</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
showData.map((i, idx) => {
|
||||
return (
|
||||
<tr key={idx}>
|
||||
<td className="text-start">{i.business}</td>
|
||||
{/* {i.banner && i.banner ?
|
||||
<td className="text-start">
|
||||
<img src={i.banner.url} alt="No Image" height="50" />
|
||||
</td> :
|
||||
<p>No image!</p>
|
||||
} */}
|
||||
<td className="text-start">{i?.purpose}</td>
|
||||
<td className="text-start">{i?.short_url}</td>
|
||||
|
||||
<td className="text-start">
|
||||
{new Date(i.createdAt).toLocaleString('en-IN', {
|
||||
month: '2-digit',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
// hour: 'numeric',
|
||||
// minute: 'numeric',
|
||||
// hour12: true,
|
||||
})}
|
||||
</td>
|
||||
{/* <td className="text-start">
|
||||
<td className="text-start">
|
||||
{new Date(i.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "2-digit",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
// hour: 'numeric',
|
||||
// minute: 'numeric',
|
||||
// hour12: true,
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
{/* <td className="text-start">
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
@ -256,8 +268,8 @@ const Businesses = () => {
|
||||
{i?.verify ? 'verified' : 'Not Verify'}
|
||||
</button>
|
||||
</td> */}
|
||||
<td className=" text-center">
|
||||
{/* <OverLayButton data={{ url: i?.url }} />
|
||||
<td className=" text-center">
|
||||
{/* <OverLayButton data={{ url: i?.url }} />
|
||||
|
||||
<Link to={`/business/products/${i._id}`}>
|
||||
<button
|
||||
@ -273,141 +285,151 @@ const Businesses = () => {
|
||||
</button>
|
||||
</Link> */}
|
||||
|
||||
<Link to={`/business/edit/${i._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
<Link
|
||||
to={`/healthcare/providers/edit/${i._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-success btn-sm
|
||||
waves-effect waves-light
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-danger btn-sm
|
||||
waves-effect waves-light
|
||||
ms-2
|
||||
|
||||
"
|
||||
onClick={() => {
|
||||
handleDelete(i._id)
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
onClick={() => {
|
||||
handleDelete(i._id);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, BusinessesData.length)} of{' '}
|
||||
{BusinessesData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? 'paginate_button page-item previous disabled'
|
||||
: 'paginate_button page-item previous'
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
BusinessesData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
BusinessesData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
BusinessesData.length
|
||||
)}{" "}
|
||||
of {BusinessesData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Businesses
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
BusinessesData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
BusinessesData.length - 1
|
||||
)
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Businesses;
|
||||
|
||||
@ -1,342 +1,367 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState, useEffect } from "react";
|
||||
// import { Button } from '@mui/material'
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { CCard, CCardBody, CCardGroup, CCol, CContainer, CRow } from '@coreui/react'
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CRow,
|
||||
} from "@coreui/react";
|
||||
|
||||
import SelectPurpose from './multiform/SelectPurpose.js'
|
||||
import SelectBusiness from './multiform/SelectBusiness.js'
|
||||
import SelectLanguage from './multiform/selectLanguage.js'
|
||||
import BAddress from './multiform/BAddress.js'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import Contacts from './multiform/Contacts.js'
|
||||
import SelectPurpose from "./multiform/SelectPurpose.js";
|
||||
import SelectBusiness from "./multiform/SelectBusiness.js";
|
||||
import SelectLanguage from "./multiform/selectLanguage.js";
|
||||
import BAddress from "./multiform/BAddress.js";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
import { isAutheticated } from "src/auth";
|
||||
import Contacts from "./multiform/Contacts.js";
|
||||
import DoctorInfo from "./multiform/DoctorInfo.js";
|
||||
|
||||
const EditBusiness = () => {
|
||||
const token = isAutheticated()
|
||||
const id = useParams()?.id
|
||||
const [productId, setProductId] = useState('')
|
||||
const [viewState, setViewState] = useState(1)
|
||||
const token = isAutheticated();
|
||||
const id = useParams()?.id;
|
||||
const [productId, setProductId] = useState("");
|
||||
const [viewState, setViewState] = useState(1);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [data, setData] = useState({
|
||||
WebsiteURL: "https://bolo.ai.in/",
|
||||
business: "",
|
||||
purpose: "",
|
||||
|
||||
const [data, setData] = useState({
|
||||
WebsiteURL: 'https://bolo.ai.in/',
|
||||
business: '',
|
||||
purpose: '',
|
||||
language: [],
|
||||
country: "",
|
||||
state: "",
|
||||
city: "",
|
||||
address_Line_1: "",
|
||||
address_Line_2: "",
|
||||
pincode: "",
|
||||
//contacts
|
||||
image: "",
|
||||
imageURL: "",
|
||||
business_name: "",
|
||||
email: "",
|
||||
|
||||
language: [],
|
||||
country: '',
|
||||
state: '',
|
||||
city: '',
|
||||
address_Line_1: '',
|
||||
address_Line_2: '',
|
||||
pincode: '',
|
||||
//contacts
|
||||
image: '',
|
||||
imageURL: '',
|
||||
business_name: '',
|
||||
email: '',
|
||||
short_url: "",
|
||||
contact_Number: "",
|
||||
contact_Person_Name: "",
|
||||
|
||||
short_url: '',
|
||||
contact_Number: '',
|
||||
contact_Person_Name: '',
|
||||
})
|
||||
specialization: "",
|
||||
});
|
||||
|
||||
// console.log(data)
|
||||
|
||||
const handleView = (n) => {
|
||||
if (viewState === n) return;
|
||||
setViewState(n);
|
||||
};
|
||||
|
||||
// console.log(data)
|
||||
//get business
|
||||
// console.log(id)
|
||||
const getbusinesses = () => {
|
||||
axios
|
||||
.get(`/api/businesses/get/${id}`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res.data.businesses)
|
||||
// setBusinessesData(res.data?.businesses)
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
...res.data?.businesses,
|
||||
}));
|
||||
setLoading(false);
|
||||
})
|
||||
|
||||
const handleView = (n) => {
|
||||
if (viewState === n) return
|
||||
setViewState(n)
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getbusinesses();
|
||||
}, []);
|
||||
// console.log(data)
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.address_Line_1.trim() === "" ||
|
||||
data.address_Line_2.trim() === "" ||
|
||||
data.business === "" ||
|
||||
data.language === "" ||
|
||||
data.country === "" ||
|
||||
data.state === "" ||
|
||||
data.city === "" ||
|
||||
data.pincode === "" ||
|
||||
//Contacts
|
||||
// data.image === '' ||
|
||||
// data.imageURL.trim() === '' ||
|
||||
(data.business_name.trim() === "" &&
|
||||
(data.contact_Person_Name.trim() === "" ||
|
||||
data.specialization === "")) ||
|
||||
data.email.trim() === "" ||
|
||||
data.short_url.trim() === "" ||
|
||||
data.contact_Number === "" ||
|
||||
data.contact_Person_Name.trim() === ""
|
||||
) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.set("address_Line_1", data.address_Line_1);
|
||||
formData.set("address_Line_2", data.address_Line_2);
|
||||
|
||||
//get business
|
||||
// console.log(id)
|
||||
const getbusinesses = () => {
|
||||
axios
|
||||
.get(`/api/businesses/get/${id}`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res.data.businesses)
|
||||
// setBusinessesData(res.data?.businesses)
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
...res.data?.businesses,
|
||||
}))
|
||||
setLoading(false)
|
||||
})
|
||||
formData.set("business", data.business);
|
||||
formData.set("language", data.language);
|
||||
|
||||
formData.set("country", data.country);
|
||||
formData.set("city", data.city);
|
||||
formData.set("state", data.state);
|
||||
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
formData.set("pincode", data.pincode);
|
||||
//contacts
|
||||
formData.set("business_name", data.business_name);
|
||||
formData.set("email", data.email);
|
||||
|
||||
useEffect(() => {
|
||||
getbusinesses()
|
||||
}, [])
|
||||
// console.log(data)
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.address_Line_1.trim() === '' ||
|
||||
data.address_Line_2.trim() === '' ||
|
||||
formData.set("contact_Number", data.contact_Number);
|
||||
formData.set("contact_Person_Name", data.contact_Person_Name);
|
||||
|
||||
data.business === '' ||
|
||||
data.purpose.trim() === '' ||
|
||||
data.language === '' ||
|
||||
data.country === '' ||
|
||||
data.state === '' ||
|
||||
data.city === '' ||
|
||||
data.pincode === '' ||
|
||||
//Contacts
|
||||
// data.image === '' ||
|
||||
// data.imageURL.trim() === '' ||
|
||||
data.business_name.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
formData.set("specialization", data.specialization);
|
||||
|
||||
data.short_url.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
data.contact_Person_Name.trim() === ''
|
||||
) {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Fill all mandatory fields',
|
||||
icon: 'error',
|
||||
button: 'Close',
|
||||
dangerMode: true,
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
const formData = new FormData()
|
||||
formData.set('address_Line_1', data.address_Line_1)
|
||||
formData.set('address_Line_2', data.address_Line_2)
|
||||
formData.set("url", data.WebsiteURL);
|
||||
formData.set("short_url", data.short_url);
|
||||
|
||||
formData.set('purpose', data.purpose)
|
||||
formData.set('business', data.business)
|
||||
formData.set('language', data.language)
|
||||
axios
|
||||
.patch(`/api/businesses/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: res?.data?.message
|
||||
? res?.data?.message
|
||||
: "Business added successfully!",
|
||||
icon: "success",
|
||||
button: "Return",
|
||||
});
|
||||
setLoading(false);
|
||||
navigate("/healthcare/providers", { replace: true });
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
const message = err.response?.data?.message || "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
formData.set('country', data.country)
|
||||
formData.set('city', data.city)
|
||||
formData.set('state', data.state)
|
||||
|
||||
|
||||
formData.set('pincode', data.pincode)
|
||||
//contacts
|
||||
formData.set('business_name', data.business_name)
|
||||
formData.set('email', data.email)
|
||||
|
||||
|
||||
formData.set('contact_Number', data.contact_Number)
|
||||
formData.set('contact_Person_Name', data.contact_Person_Name)
|
||||
|
||||
|
||||
formData.set('url', data.WebsiteURL + data.short_url + '/login')
|
||||
formData.set('short_url', data.short_url)
|
||||
|
||||
axios
|
||||
.patch(`/api/businesses/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Updated',
|
||||
text: res?.data?.message ? res?.data?.message : 'Business added successfully!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
navigate('/businesses', { replace: true })
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
const message = err.response?.data?.message || 'Something went wrong!'
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: message,
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
dangerMode: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<CContainer>
|
||||
<CRow className="mt-3">
|
||||
<CCol md={12}>
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<CContainer>
|
||||
<CRow className="mt-3">
|
||||
<CCol md={12}>
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Edit Business
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
onClick={() => {
|
||||
handleSubmit()
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Edit Healthcare Provider
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
handleSubmit();
|
||||
}}
|
||||
disabled={
|
||||
data.address_Line_1.trim() === "" ||
|
||||
data.address_Line_2.trim() === "" ||
|
||||
data.business === "" ||
|
||||
data.language === "" ||
|
||||
data.country === "" ||
|
||||
data.state === "" ||
|
||||
data.city === "" ||
|
||||
data.pincode === "" ||
|
||||
(data.business_name.trim() === "" &&
|
||||
(data.contact_Person_Name.trim() === "" ||
|
||||
data.specialization === "")) ||
|
||||
data.email.trim() === "" ||
|
||||
data.short_url.trim() === "" ||
|
||||
data.contact_Number === "" ||
|
||||
data.contact_Person_Name.trim() === ""
|
||||
}
|
||||
>
|
||||
{loading ? "Loading" : "Update Now"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md={9} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard className="p-4 mb-3">
|
||||
<CCardBody>
|
||||
{viewState === 1 && (
|
||||
<SelectBusiness
|
||||
data={{ data, setData }}
|
||||
// categories={categories}
|
||||
handleView={handleView}
|
||||
// ProductId={{ productId, setProductId }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
|
||||
}}
|
||||
disabled={data.address_Line_1.trim() === '' ||
|
||||
data.address_Line_2.trim() === '' ||
|
||||
{/*viewState === 2 && (
|
||||
<SelectPurpose
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)*/}
|
||||
|
||||
data.business === '' ||
|
||||
data.purpose.trim() === '' ||
|
||||
data.language === '' ||
|
||||
data.country === '' ||
|
||||
data.state === '' ||
|
||||
data.city === '' ||
|
||||
data.pincode === '' ||
|
||||
data.business_name.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
{viewState === 3 &&
|
||||
(data.business === "Doctor (Individual Practitioner)" ? (
|
||||
<DoctorInfo
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
) : (
|
||||
<Contacts
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
))}
|
||||
|
||||
data.short_url.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
data.contact_Person_Name.trim() === ''}
|
||||
>
|
||||
{loading ? 'Loading' : 'Update Now'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md={9} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard className="p-4 mb-3">
|
||||
<CCardBody>
|
||||
{viewState === 1 && (
|
||||
<SelectBusiness
|
||||
data={{ data, setData }}
|
||||
// categories={categories}
|
||||
handleView={handleView}
|
||||
// ProductId={{ productId, setProductId }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 2 && (
|
||||
<SelectPurpose
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
{viewState === 4 && (
|
||||
<SelectLanguage
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 5 && (
|
||||
<BAddress
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
<CCol md={3} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<div className="d-grid gap-2">
|
||||
<button
|
||||
className={
|
||||
viewState === 1
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(1)}
|
||||
>
|
||||
Select Business Type
|
||||
</button>
|
||||
|
||||
// productId={productId}
|
||||
// data={{ varients, setVarients }}
|
||||
// taxes={taxes}
|
||||
// sizes={sizes}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 3 && (
|
||||
<Contacts
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 4 && (
|
||||
<SelectLanguage
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
<button
|
||||
className={
|
||||
viewState === 3
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(3)}
|
||||
>
|
||||
Contacts
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
viewState === 4
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(4)}
|
||||
>
|
||||
Select Languages
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
viewState === 5
|
||||
? "btn btn-light"
|
||||
: "btn btn-info text-white"
|
||||
}
|
||||
type="button"
|
||||
onClick={() => handleView(5)}
|
||||
>
|
||||
Address
|
||||
</button>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
);
|
||||
};
|
||||
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
{viewState === 5 && (
|
||||
<BAddress
|
||||
data={{ data, setData }}
|
||||
handleView={handleView}
|
||||
|
||||
// productId={productId}
|
||||
// data={{ images, setImages }}
|
||||
loading={{ loading, setLoading }}
|
||||
/>
|
||||
)}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
<CCol md={3} className="mt-1">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<div className="d-grid gap-2">
|
||||
<button
|
||||
className={viewState === 1 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(1)}
|
||||
>
|
||||
Select Business Type
|
||||
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 2 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(2)}
|
||||
>
|
||||
Select Purpose
|
||||
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 3 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(3)}
|
||||
>
|
||||
Contacts
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 4 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(4)}
|
||||
>
|
||||
Select Languages
|
||||
</button>
|
||||
<button
|
||||
className={viewState === 5 ? 'btn btn-light' : 'btn btn-info text-white'}
|
||||
type="button"
|
||||
onClick={() => handleView(5)}
|
||||
>
|
||||
Address
|
||||
</button>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditBusiness
|
||||
export default EditBusiness;
|
||||
|
||||
@ -1,278 +1,272 @@
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import swal from 'sweetalert'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
// import { WebsiteURL } from '../WebsiteURL'
|
||||
|
||||
const Contacts = (props) => {
|
||||
const token = isAutheticated()
|
||||
const token = isAutheticated();
|
||||
|
||||
const navigate = useNavigate()
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data, setData } = props.data
|
||||
const { data, setData } = props.data;
|
||||
|
||||
const { loading, setLoading } = props.loading
|
||||
// const [data, setData] = useState({
|
||||
// image: '',
|
||||
// imageURL: '',
|
||||
// name: '',
|
||||
// email: '',
|
||||
const { loading, setLoading } = props.loading;
|
||||
// const [data, setData] = useState({
|
||||
// image: '',
|
||||
// imageURL: '',
|
||||
// name: '',
|
||||
// email: '',
|
||||
|
||||
// short_url: '',
|
||||
// contact_Number: '',
|
||||
// contact_Person_Name: '',
|
||||
// short_url: '',
|
||||
// contact_Number: '',
|
||||
// contact_Person_Name: '',
|
||||
|
||||
// })
|
||||
// })
|
||||
|
||||
const [validForm, setValidForm] = useState(false);
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
emailError: "",
|
||||
phoneError: "",
|
||||
});
|
||||
const validEmailRegex = RegExp(
|
||||
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
||||
);
|
||||
const validPhoneRegex = RegExp(
|
||||
/^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
|
||||
);
|
||||
|
||||
const [validForm, setValidForm] = useState(false)
|
||||
const validateForm = () => {
|
||||
let valid = true;
|
||||
Object.values(errors).forEach((val) => {
|
||||
if (val.length > 0) {
|
||||
valid = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
Object.values(data.email).forEach((val) => {
|
||||
if (val.length <= 0) {
|
||||
valid = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return valid;
|
||||
};
|
||||
|
||||
//cheking email and password
|
||||
useEffect(() => {
|
||||
if (validateForm()) {
|
||||
setValidForm(true);
|
||||
} else {
|
||||
setValidForm(false);
|
||||
}
|
||||
}, [errors]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.id === "business_name") {
|
||||
if (e.target.value.length < 0) return;
|
||||
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
emailError: '',
|
||||
phoneError: ''
|
||||
|
||||
|
||||
})
|
||||
const validEmailRegex = RegExp(
|
||||
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
|
||||
)
|
||||
const validPhoneRegex = RegExp(
|
||||
/^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
|
||||
)
|
||||
|
||||
|
||||
const validateForm = () => {
|
||||
let valid = true
|
||||
Object.values(errors).forEach((val) => {
|
||||
if (val.length > 0) {
|
||||
valid = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
Object.values(data.email).forEach((val) => {
|
||||
if (val.length <= 0) {
|
||||
valid = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
return valid
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
|
||||
}));
|
||||
}
|
||||
|
||||
//cheking email and password
|
||||
useEffect(() => {
|
||||
if (validateForm()) {
|
||||
setValidForm(true)
|
||||
} else {
|
||||
setValidForm(false)
|
||||
}
|
||||
}, [errors])
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.id === 'business_name') {
|
||||
if (e.target.value.length < 0) return
|
||||
|
||||
setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
|
||||
}
|
||||
|
||||
if (e.target.id === 'contact_Number') {
|
||||
setErrors({
|
||||
...errors,
|
||||
phoneError: validPhoneRegex.test(e.target.value) ? '' : 'Number is not valid!',
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
if (e.target.id === 'email') {
|
||||
setErrors({
|
||||
...errors,
|
||||
emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (e.target.id === 'image') {
|
||||
if (
|
||||
e.target.files[0]?.type === 'image/jpeg' ||
|
||||
e.target.files[0]?.type === 'image/png' ||
|
||||
e.target.files[0]?.type === 'image/jpg'
|
||||
) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: URL.createObjectURL(e.target.files[0]),
|
||||
image: e.target.files[0],
|
||||
}))
|
||||
return
|
||||
} else {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Upload jpg, jpeg, png only.',
|
||||
icon: 'error',
|
||||
button: 'Close',
|
||||
dangerMode: true,
|
||||
})
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: '',
|
||||
image: '',
|
||||
}))
|
||||
e.target.value = null
|
||||
return
|
||||
}
|
||||
}
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||
if (e.target.id === "contact_Number") {
|
||||
setErrors({
|
||||
...errors,
|
||||
phoneError: validPhoneRegex.test(e.target.value)
|
||||
? ""
|
||||
: "Number is not valid!",
|
||||
});
|
||||
}
|
||||
if (e.target.id === "email") {
|
||||
setErrors({
|
||||
...errors,
|
||||
emailError: validEmailRegex.test(e.target.value)
|
||||
? ""
|
||||
: "Email is not valid!",
|
||||
});
|
||||
}
|
||||
|
||||
if (e.target.id === "image") {
|
||||
if (
|
||||
e.target.files[0]?.type === "image/jpeg" ||
|
||||
e.target.files[0]?.type === "image/png" ||
|
||||
e.target.files[0]?.type === "image/jpg"
|
||||
) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: URL.createObjectURL(e.target.files[0]),
|
||||
image: e.target.files[0],
|
||||
}));
|
||||
return;
|
||||
} else {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Upload jpg, jpeg, png only.",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: "",
|
||||
image: "",
|
||||
}));
|
||||
e.target.value = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Contacts
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
marginRight: '5px',
|
||||
}}
|
||||
onClick={() => props.handleView(2)}
|
||||
// disabled={loading}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
onClick={() => props.handleView(4)}
|
||||
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Contact Information
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Business Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="business_name"
|
||||
value={data.business_name}
|
||||
maxLength={50}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{data.business_name.length > 0 && <p className="pt-1 pl-2 text-secondary">Remaining characters : {50 - data.business_name.length}</p>}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
value={data.email}
|
||||
maxLength="50"
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.emailError && (
|
||||
<p className="text-center py-2 text-danger">{errors.emailError}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Contact Number*
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
id="contact_Number"
|
||||
value={data.contact_Number}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.phoneError && (
|
||||
<p className="text-center py-2 text-danger">{errors.phoneError}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Contact Person Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="contact_Person_Name"
|
||||
value={data.contact_Person_Name}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
URL*
|
||||
</label>
|
||||
<div className="input-group mb-3">
|
||||
<span className="input-group-text" id="basic-addon3">
|
||||
{data.WebsiteURL}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="short_url"
|
||||
aria-describedby="basic-addon3"
|
||||
disabled
|
||||
value={data.short_url}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => props.handleView(1)}
|
||||
// disabled={loading}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => props.handleView(4)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="business_name"
|
||||
value={data.business_name}
|
||||
maxLength={50}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{data.business_name.length > 0 && (
|
||||
<p className="pt-1 pl-2 text-secondary">
|
||||
Remaining characters : {50 - data.business_name.length}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
value={data.email}
|
||||
maxLength="50"
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.emailError && (
|
||||
<p className="text-center py-2 text-danger">
|
||||
{errors.emailError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Contact Number*
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
id="contact_Number"
|
||||
value={data.contact_Number}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.phoneError && (
|
||||
<p className="text-center py-2 text-danger">
|
||||
{errors.phoneError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Contact Person Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="contact_Person_Name"
|
||||
value={data.contact_Person_Name}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="mb-3">
|
||||
{/*<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
URL*
|
||||
</label>
|
||||
<div className="input-group mb-3">
|
||||
<span className="input-group-text" id="basic-addon3">
|
||||
{data.WebsiteURL}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="short_url"
|
||||
aria-describedby="basic-addon3"
|
||||
disabled
|
||||
value={data.short_url}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
{/* <div className="mb-3">
|
||||
<label htmlFor="image" className="form-label">
|
||||
Franchisee Banner (optional)
|
||||
</label>
|
||||
@ -292,18 +286,12 @@ const Contacts = (props) => {
|
||||
style={{ maxHeight: '200px', maxWidth: '100%' }}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts
|
||||
export default Contacts;
|
||||
|
||||
338
src/views/Business/multiform/DoctorInfo.js
Normal file
338
src/views/Business/multiform/DoctorInfo.js
Normal file
@ -0,0 +1,338 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import { CFormLabel, CFormSelect } from "@coreui/react";
|
||||
// import { WebsiteURL } from '../WebsiteURL'
|
||||
|
||||
const DcotorInfo = (props) => {
|
||||
const token = isAutheticated();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data, setData } = props.data;
|
||||
|
||||
const [categories, setCategories] = useState([]);
|
||||
|
||||
const getCategories = () => {
|
||||
axios.get("/api/config/specialty/getall").then((res) => {
|
||||
setCategories(res.data.specialty);
|
||||
});
|
||||
};
|
||||
|
||||
// create options from categories with placeholder select Specialization
|
||||
const options = [
|
||||
{
|
||||
label: "Select Specialization",
|
||||
value: "",
|
||||
},
|
||||
...categories.map((category) => {
|
||||
return {
|
||||
label: category.name,
|
||||
value: category.name,
|
||||
};
|
||||
}),
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getCategories();
|
||||
}, []);
|
||||
|
||||
const { loading, setLoading } = props.loading;
|
||||
// const [data, setData] = useState({
|
||||
// image: '',
|
||||
// imageURL: '',
|
||||
// name: '',
|
||||
// email: '',
|
||||
|
||||
// short_url: '',
|
||||
// contact_Number: '',
|
||||
// contact_Person_Name: '',
|
||||
|
||||
// })
|
||||
|
||||
const [validForm, setValidForm] = useState(false);
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
emailError: "",
|
||||
phoneError: "",
|
||||
});
|
||||
const validEmailRegex = RegExp(
|
||||
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
||||
);
|
||||
const validPhoneRegex = RegExp(
|
||||
/^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
|
||||
);
|
||||
|
||||
const validateForm = () => {
|
||||
let valid = true;
|
||||
Object.values(errors).forEach((val) => {
|
||||
if (val.length > 0) {
|
||||
valid = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
Object.values(data.email).forEach((val) => {
|
||||
if (val.length <= 0) {
|
||||
valid = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return valid;
|
||||
};
|
||||
|
||||
//cheking email and password
|
||||
useEffect(() => {
|
||||
if (validateForm()) {
|
||||
setValidForm(true);
|
||||
} else {
|
||||
setValidForm(false);
|
||||
}
|
||||
}, [errors]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.id === "contact_Person_Name") {
|
||||
if (e.target.value.length < 0) return;
|
||||
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
|
||||
}));
|
||||
}
|
||||
|
||||
if (e.target.id === "contact_Number") {
|
||||
setErrors({
|
||||
...errors,
|
||||
phoneError: validPhoneRegex.test(e.target.value)
|
||||
? ""
|
||||
: "Number is not valid!",
|
||||
});
|
||||
}
|
||||
if (e.target.id === "email") {
|
||||
setErrors({
|
||||
...errors,
|
||||
emailError: validEmailRegex.test(e.target.value)
|
||||
? ""
|
||||
: "Email is not valid!",
|
||||
});
|
||||
}
|
||||
|
||||
if (e.target.id === "image") {
|
||||
if (
|
||||
e.target.files[0]?.type === "image/jpeg" ||
|
||||
e.target.files[0]?.type === "image/png" ||
|
||||
e.target.files[0]?.type === "image/jpg"
|
||||
) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: URL.createObjectURL(e.target.files[0]),
|
||||
image: e.target.files[0],
|
||||
}));
|
||||
return;
|
||||
} else {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Upload jpg, jpeg, png only.",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
imageURL: "",
|
||||
image: "",
|
||||
}));
|
||||
e.target.value = null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Doctor Information
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => props.handleView(1)}
|
||||
// disabled={loading}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => props.handleView(4)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="contact_Person_Name"
|
||||
value={data.contact_Person_Name}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="specialization">
|
||||
Specialization *
|
||||
</CFormLabel>
|
||||
<CFormSelect
|
||||
id="specialization"
|
||||
name="specialization"
|
||||
value={data.specialization}
|
||||
options={options}
|
||||
onChange={handleChange}
|
||||
></CFormSelect>
|
||||
</div>
|
||||
|
||||
{/* <div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Business Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="business_name"
|
||||
value={data.business_name}
|
||||
maxLength={50}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{data.business_name.length > 0 && (
|
||||
<p className="pt-1 pl-2 text-secondary">
|
||||
Remaining characters : {50 - data.business_name.length}
|
||||
</p>
|
||||
)}
|
||||
</div>*/}
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
value={data.email}
|
||||
maxLength="50"
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.emailError && (
|
||||
<p className="text-center py-2 text-danger">
|
||||
{errors.emailError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Contact Number*
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
id="contact_Number"
|
||||
value={data.contact_Number}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{errors.phoneError && (
|
||||
<p className="text-center py-2 text-danger">
|
||||
{errors.phoneError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* <div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
URL*
|
||||
</label>
|
||||
<div className="input-group mb-3">
|
||||
<span className="input-group-text" id="basic-addon3">
|
||||
{data.WebsiteURL}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="short_url"
|
||||
aria-describedby="basic-addon3"
|
||||
disabled
|
||||
value={data.short_url}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
{/* <div className="mb-3">
|
||||
<label htmlFor="image" className="form-label">
|
||||
Franchisee Banner (optional)
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control"
|
||||
id="image"
|
||||
accept="image/*"
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
|
||||
</div>
|
||||
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
|
||||
<img
|
||||
src={data.imageURL}
|
||||
alt="Uploaded Image will be shown here"
|
||||
style={{ maxHeight: '200px', maxWidth: '100%' }}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DcotorInfo;
|
||||
@ -1,163 +1,135 @@
|
||||
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import swal from 'sweetalert'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
const SelectBusiness = (props) => {
|
||||
const token = isAutheticated()
|
||||
const navigate = useNavigate()
|
||||
console.log(props.handleView)
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
console.log(props.handleView);
|
||||
|
||||
const { data, setData } = props.data
|
||||
const { loading, setLoading } = props.loading
|
||||
// const categories = props?.categories || []
|
||||
const { data, setData } = props.data;
|
||||
const { loading, setLoading } = props.loading;
|
||||
// const categories = props?.categories || []
|
||||
|
||||
const handleChange = (e) => {
|
||||
const handleChange = (e) => {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
};
|
||||
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||
}
|
||||
// const [loading, setLoading] = useState(false)
|
||||
|
||||
const [BusinessData, setBusinessData] = useState([]);
|
||||
const getCategories = () => {
|
||||
axios
|
||||
.get(`/api/business`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setBusinessData(res.data.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
// const [loading, setLoading] = useState(false)
|
||||
useEffect(() => {
|
||||
getCategories();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = () => {};
|
||||
|
||||
|
||||
|
||||
const [BusinessData, setBusinessData] = useState([])
|
||||
const getCategories = () => {
|
||||
axios
|
||||
.get(`/api/business`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setBusinessData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getCategories()
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
const handleSubmit = () => {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Select Business
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
|
||||
<Link to="/Businesses">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
marginRight: '5px',
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
// marginRight: '5px',
|
||||
}}
|
||||
onClick={() => props.handleView(2)}
|
||||
// disabled={loading}
|
||||
// disabled={data.business === ''}
|
||||
|
||||
>
|
||||
Next
|
||||
{/* {loading ? 'Loading' : 'Next'} */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Select Provider Type
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Business *
|
||||
</label>
|
||||
<select
|
||||
onChange={(e) => handleChange(e)}
|
||||
value={data.business}
|
||||
className="form-control"
|
||||
id="business"
|
||||
disabled={BusinessData.length < 1}
|
||||
>
|
||||
<option value="1">---select---</option>
|
||||
{BusinessData.length > 0 && BusinessData.map((item, index) =>
|
||||
<option key={index} value={item?.business} >{item?.business}</option>
|
||||
|
||||
)}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Link to="/healthcare/providers">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
// marginRight: '5px',
|
||||
}}
|
||||
onClick={() => props.handleView(3)}
|
||||
// disabled={loading}
|
||||
// disabled={data.business === ''}
|
||||
>
|
||||
Next
|
||||
{/* {loading ? 'Loading' : 'Next'} */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectBusiness
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Provider *
|
||||
</label>
|
||||
<select
|
||||
onChange={(e) => handleChange(e)}
|
||||
value={data.business}
|
||||
className="form-control"
|
||||
id="business"
|
||||
disabled={BusinessData.length < 1}
|
||||
>
|
||||
<option value="1">---select---</option>
|
||||
{BusinessData.length > 0 &&
|
||||
BusinessData.map((item, index) => (
|
||||
<option key={index} value={item?.business}>
|
||||
{item?.business}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBusiness;
|
||||
|
||||
@ -1,162 +1,144 @@
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import swal from 'sweetalert'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import swal from "sweetalert";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
const selectLanguage = (props) => {
|
||||
const token = isAutheticated()
|
||||
const navigate = useNavigate()
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data, setData } = props.data
|
||||
const { data, setData } = props.data;
|
||||
|
||||
const { loading, setLoading } = props.loading
|
||||
// const categories = props?.categories || []
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (data.language.length < 3) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
language: [...data.language, e.target.value]
|
||||
}))
|
||||
}
|
||||
else {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'please select Up to 3 languages!',
|
||||
icon: 'warning',
|
||||
button: 'ok',
|
||||
dangerMode: true
|
||||
})
|
||||
}
|
||||
const { loading, setLoading } = props.loading;
|
||||
// const categories = props?.categories || []
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (data.language.length < 3) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
language: [...data.language, e.target.value],
|
||||
}));
|
||||
} else {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "please select Up to 3 languages!",
|
||||
icon: "warning",
|
||||
button: "ok",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// const [loading, setLoading] = useState(false)
|
||||
// const [loading, setLoading] = useState(false)
|
||||
|
||||
const [LanguagesData, setLanguagesData] = useState([]);
|
||||
|
||||
const getCategories = () => {
|
||||
axios
|
||||
.get(`/api/language`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setLanguagesData(res.data.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getCategories();
|
||||
}, []);
|
||||
|
||||
const [LanguagesData, setLanguagesData] = useState([])
|
||||
|
||||
|
||||
const getCategories = () => {
|
||||
axios
|
||||
.get(`/api/language`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
setLanguagesData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getCategories()
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Select Language
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
marginRight: '5px',
|
||||
|
||||
}}
|
||||
onClick={() => props.handleView(3)}
|
||||
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={data.purpose === ''}
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
// marginRight: '5px',
|
||||
}}
|
||||
onClick={() => props.handleView(5)}
|
||||
// disabled={loading}
|
||||
// disabled={data.language.length < 0 && data.language.length > 3}
|
||||
|
||||
>
|
||||
Next
|
||||
{/* {loading ? 'Loading' : 'Next'} */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Select Language
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => props.handleView(3)}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
// marginRight: '5px',
|
||||
}}
|
||||
onClick={() => props.handleView(5)}
|
||||
// disabled={loading}
|
||||
// disabled={data.language.length < 0 && data.language.length > 3}
|
||||
>
|
||||
Next
|
||||
{/* {loading ? 'Loading' : 'Next'} */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
please select Up to 3 languages
|
||||
</label>
|
||||
{LanguagesData.length > 0 && LanguagesData.map((item, index) =>
|
||||
// <option key={index} value={item?.language} >{item?.language}</option>
|
||||
<div className="d-flex">
|
||||
<input className='me-2' type="checkbox" name={item?.language} id={data.language} value={item?.language} onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{/* {checked = { data.language.map(item => item === item?.language) }} */}
|
||||
<label htmlFor="title" className="form-label">
|
||||
{item?.language}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{/* <select
|
||||
<div className="row">
|
||||
<div className="col-sm-12 col-md-12 col-lg-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
please select Up to 3 languages
|
||||
</label>
|
||||
{LanguagesData.length > 0 &&
|
||||
LanguagesData.map((item, index) => (
|
||||
// <option key={index} value={item?.language} >{item?.language}</option>
|
||||
<div className="d-flex">
|
||||
<input
|
||||
className="me-2"
|
||||
type="checkbox"
|
||||
name={item?.language}
|
||||
id={data.language}
|
||||
value={item?.language}
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
{/* {checked = { data.language.map(item => item === item?.language) }} */}
|
||||
<label htmlFor="title" className="form-label">
|
||||
{item?.language}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
{/* <select
|
||||
onChange={(e) => handleChange(e)}
|
||||
value={data.language}
|
||||
className="form-control"
|
||||
@ -169,19 +151,13 @@ const selectLanguage = (props) => {
|
||||
|
||||
)}
|
||||
</select> */}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default selectLanguage
|
||||
export default selectLanguage;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user