From 91b4ff5ecb61d1f635c6f89e17910ad85420fa78 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Wed, 8 Jun 2022 18:23:21 +0530 Subject: [PATCH] modify --- package.json | 3 +- public/index.html | 2 +- src/Action/categoryAction.js | 59 ++ .../Coupons.js => Action/directoryAction.js} | 0 src/App.js | 8 +- src/_nav.js | 325 +----- src/assets/images/angular.jpg | Bin 169234 -> 0 bytes src/assets/images/avatars/6.jpg | Bin 11918 -> 0 bytes src/assets/images/avatars/7.jpg | Bin 14285 -> 0 bytes src/assets/images/react.jpg | Bin 199537 -> 0 bytes src/assets/images/vue.jpg | Bin 170599 -> 0 bytes src/auth.js | 6 +- src/components/AppFooter.js | 13 +- src/components/AppSidebar.js | 4 +- src/components/User/DailyLoggedUserData.js | 68 -- src/components/User/LoginUser.js | 94 -- src/components/User/MonthUserData.js | 68 -- src/components/User/MothlyLoginUser.js | 74 -- src/components/User/SpecificDate.js | 79 -- src/components/User/SpecificDateData.js | 67 -- src/components/header/AppHeaderDropdown.js | 22 +- src/index.js | 4 +- src/reducers/categoryReducer.js | 46 + src/reducers/directoryReducer.js | 61 ++ src/routes.js | 169 +-- src/store.js | 42 +- src/views/AirwaysBill/AddAirwaysBill.js | 556 ---------- src/views/AirwaysBill/AirwayBillDetail.js | 165 --- src/views/AirwaysBill/AirwaysBill.js | 218 ---- src/views/AirwaysBill/EditBill.js | 589 ----------- src/views/AirwaysBill/ExportToExcel.js | 22 - src/views/Category/AddCategory.js | 141 +++ src/views/Category/Category.js | 178 ++++ src/views/Category/EditCategory.js | 152 +++ src/views/Commerce/AddProduct.js | 300 ------ src/views/Commerce/Editproducts.js | 326 ------ src/views/Commerce/Products.js | 291 ------ src/views/Courier/AddCourier.js | 115 -- src/views/Courier/Courier.js | 111 -- src/views/Courier/EditCourier.js | 146 --- src/views/Directory/Add_Business.js | 464 ++++++++ src/views/Directory/Bisuness.js | 292 ++++++ src/views/Directory/EditBisuness.js | 515 +++++++++ src/views/Directory/View_Bisuness.js | 134 +++ src/views/News/AddNews.js | 149 +++ src/views/News/EditNews.js | 165 +++ src/views/News/News.js | 164 +++ src/views/News/ViewNews.js | 131 +++ src/views/Vendor/AddVendor.js | 174 --- src/views/Vendor/EditVendor.js | 192 ---- src/views/Vendor/Vendor.js | 103 -- src/views/Vendor/VendorDetail.js | 80 -- src/views/base/accordion/Accordion.js | 180 ---- src/views/base/breadcrumbs/Breadcrumbs.js | 77 -- src/views/base/cards/Cards.js | 909 ---------------- src/views/base/carousels/Carousels.js | 215 ---- src/views/base/collapses/Collapses.js | 129 --- src/views/base/index.js | 31 - src/views/base/jumbotrons/Jumbotrons.js | 56 - src/views/base/list-groups/ListGroups.js | 349 ------ src/views/base/navbars/Navbars.js | 174 --- src/views/base/navs/Navs.js | 400 ------- src/views/base/paginations/Paginations.js | 177 ---- src/views/base/placeholders/Placeholders.js | 196 ---- src/views/base/popovers/Popovers.js | 74 -- src/views/base/progress/Progress.js | 189 ---- src/views/base/spinners/Spinners.js | 123 --- src/views/base/tables/Tables.js | 989 ------------------ src/views/base/tooltips/Tooltips.js | 82 -- .../buttons/button-groups/ButtonGroups.js | 442 -------- src/views/buttons/buttons/Buttons.js | 404 ------- src/views/buttons/dropdowns/Dropdowns.js | 341 ------ src/views/buttons/index.js | 5 - src/views/charts/Charts.js | 176 ---- src/views/dashboard/Dashboard.js | 440 -------- src/views/forms/checks-radios/ChecksRadios.js | 395 ------- .../forms/floating-labels/FloatingLabels.js | 173 --- src/views/forms/form-control/FormControl.js | 251 ----- src/views/forms/input-group/InputGroup.js | 506 --------- src/views/forms/layout/Layout.js | 414 -------- src/views/forms/range/Range.js | 85 -- src/views/forms/select/Select.js | 102 -- src/views/forms/validation/Validation.js | 506 --------- src/views/icons/brands/Brands.js | 38 - src/views/icons/coreui-icons/CoreUIIcons.js | 25 - src/views/icons/flags/Flags.js | 25 - src/views/icons/index.js | 5 - src/views/notifications/alerts/Alerts.js | 150 --- src/views/notifications/badges/Badges.js | 125 --- src/views/notifications/index.js | 6 - src/views/notifications/modals/Modals.js | 723 ------------- src/views/notifications/toasts/Toasts.js | 255 ----- .../{Register.js => Change_password.js} | 60 +- src/views/theme/colors/Colors.js | 91 -- src/views/theme/typography/Typography.js | 229 ---- 95 files changed, 2789 insertions(+), 14620 deletions(-) create mode 100644 src/Action/categoryAction.js rename src/{views/Commerce/Coupons.js => Action/directoryAction.js} (100%) delete mode 100755 src/assets/images/angular.jpg delete mode 100644 src/assets/images/avatars/6.jpg delete mode 100644 src/assets/images/avatars/7.jpg delete mode 100755 src/assets/images/react.jpg delete mode 100755 src/assets/images/vue.jpg delete mode 100644 src/components/User/DailyLoggedUserData.js delete mode 100644 src/components/User/LoginUser.js delete mode 100644 src/components/User/MonthUserData.js delete mode 100644 src/components/User/MothlyLoginUser.js delete mode 100644 src/components/User/SpecificDate.js delete mode 100644 src/components/User/SpecificDateData.js create mode 100644 src/reducers/categoryReducer.js create mode 100644 src/reducers/directoryReducer.js delete mode 100644 src/views/AirwaysBill/AddAirwaysBill.js delete mode 100644 src/views/AirwaysBill/AirwayBillDetail.js delete mode 100644 src/views/AirwaysBill/AirwaysBill.js delete mode 100644 src/views/AirwaysBill/EditBill.js delete mode 100644 src/views/AirwaysBill/ExportToExcel.js create mode 100644 src/views/Category/AddCategory.js create mode 100644 src/views/Category/Category.js create mode 100644 src/views/Category/EditCategory.js delete mode 100644 src/views/Commerce/AddProduct.js delete mode 100644 src/views/Commerce/Editproducts.js delete mode 100644 src/views/Commerce/Products.js delete mode 100644 src/views/Courier/AddCourier.js delete mode 100644 src/views/Courier/Courier.js delete mode 100644 src/views/Courier/EditCourier.js create mode 100644 src/views/Directory/Add_Business.js create mode 100644 src/views/Directory/Bisuness.js create mode 100644 src/views/Directory/EditBisuness.js create mode 100644 src/views/Directory/View_Bisuness.js create mode 100644 src/views/News/AddNews.js create mode 100644 src/views/News/EditNews.js create mode 100644 src/views/News/News.js create mode 100644 src/views/News/ViewNews.js delete mode 100644 src/views/Vendor/AddVendor.js delete mode 100644 src/views/Vendor/EditVendor.js delete mode 100644 src/views/Vendor/Vendor.js delete mode 100644 src/views/Vendor/VendorDetail.js delete mode 100644 src/views/base/accordion/Accordion.js delete mode 100644 src/views/base/breadcrumbs/Breadcrumbs.js delete mode 100644 src/views/base/cards/Cards.js delete mode 100644 src/views/base/carousels/Carousels.js delete mode 100644 src/views/base/collapses/Collapses.js delete mode 100644 src/views/base/index.js delete mode 100644 src/views/base/jumbotrons/Jumbotrons.js delete mode 100644 src/views/base/list-groups/ListGroups.js delete mode 100644 src/views/base/navbars/Navbars.js delete mode 100644 src/views/base/navs/Navs.js delete mode 100644 src/views/base/paginations/Paginations.js delete mode 100644 src/views/base/placeholders/Placeholders.js delete mode 100644 src/views/base/popovers/Popovers.js delete mode 100644 src/views/base/progress/Progress.js delete mode 100644 src/views/base/spinners/Spinners.js delete mode 100644 src/views/base/tables/Tables.js delete mode 100644 src/views/base/tooltips/Tooltips.js delete mode 100644 src/views/buttons/button-groups/ButtonGroups.js delete mode 100644 src/views/buttons/buttons/Buttons.js delete mode 100644 src/views/buttons/dropdowns/Dropdowns.js delete mode 100644 src/views/buttons/index.js delete mode 100644 src/views/charts/Charts.js delete mode 100644 src/views/forms/checks-radios/ChecksRadios.js delete mode 100644 src/views/forms/floating-labels/FloatingLabels.js delete mode 100644 src/views/forms/form-control/FormControl.js delete mode 100644 src/views/forms/input-group/InputGroup.js delete mode 100644 src/views/forms/layout/Layout.js delete mode 100644 src/views/forms/range/Range.js delete mode 100644 src/views/forms/select/Select.js delete mode 100644 src/views/forms/validation/Validation.js delete mode 100644 src/views/icons/brands/Brands.js delete mode 100644 src/views/icons/coreui-icons/CoreUIIcons.js delete mode 100644 src/views/icons/flags/Flags.js delete mode 100644 src/views/icons/index.js delete mode 100644 src/views/notifications/alerts/Alerts.js delete mode 100644 src/views/notifications/badges/Badges.js delete mode 100644 src/views/notifications/index.js delete mode 100644 src/views/notifications/modals/Modals.js delete mode 100644 src/views/notifications/toasts/Toasts.js rename src/views/pages/register/{Register.js => Change_password.js} (61%) delete mode 100644 src/views/theme/colors/Colors.js delete mode 100644 src/views/theme/typography/Typography.js diff --git a/package.json b/package.json index b92007c..36bb777 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,13 @@ }, "dependencies": { "@coreui/chartjs": "^3.0.0", - + "@coreui/coreui": "^4.1.0", "@coreui/icons": "^2.1.0", "@coreui/icons-react": "^2.0.0", "@coreui/react": "^4.1.0", "@coreui/react-chartjs": "^2.0.0", "@coreui/utils": "^1.3.1", + "@reduxjs/toolkit": "^1.8.2", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5", "axios": "^0.25.0", "bootstrap": "^5.1.3", diff --git a/public/index.html b/public/index.html index 6ca9446..055bcce 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ - Cafe-Appy2Meet + CMP-Dashboard */} +
+
+
+

CMP-Category

+ + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + {category && category.map((item, index) => + + + + + + + + + )} + +
NameImageAdded OnActions
{item?.name} + + {/* {item?.addedOn} */} + {new Date(`${item?.addedOn}`).toDateString()} , {`${formatAMPM(item?.addedOn)}`} + + + + + + + +
+
+ + + {/* */} +
+
+
+
+ + {/* */} + + + ); +} + +export default Products; diff --git a/src/views/Category/EditCategory.js b/src/views/Category/EditCategory.js new file mode 100644 index 0000000..5aeafbc --- /dev/null +++ b/src/views/Category/EditCategory.js @@ -0,0 +1,152 @@ +import axios from "axios"; +import React, { useCallback, useEffect, useState } from "react"; +import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import ClipLoader from "react-spinners/ClipLoader"; +//import Footer from "../../Footer"; +import { Link, useParams } from "react-router-dom"; +import { useHistory } from "react-router-dom"; +import swal from 'sweetalert'; + +import { + CButton, + CCard, + CCardBody, + CCol, + CContainer, + CForm, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilLockLocked, cilUser } from '@coreui/icons' +const AddProduct = () => { + // const { token } = isAutheticated(); + let history = useHistory(); + const { id } = useParams(); + // console.log(id) + const [image, setImage] = useState(""); + const [name, setName] = useState(""); + const [loading, setLoading] = useState(false); + useEffect(async () => { + const res = await axios.get(`/api/category/getOne/${id}`, { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + + setName(res.data.category.name) + }, [id]); + + + const handleSubmit = async () => { + const myForm = new FormData(); + + myForm.set("name", name); + + + myForm.set("image", image); + setLoading({ loading: true }); + // console.log(image) + let res = await axios.put( + `/api/category/update/${id}`, myForm, + { + headers: { + "Content-Type": 'multipart/form-data', + // Authorization: `Bearer ${token}`, + }, + } + ); + //console.log(res.data.data.name) + if (res.data) { + swal("success!", "Category Edited Successfully!", "success"); + history.goBack(); + } + + setLoading(false); + }; + const handleImage = (e) => { + const files = e.target.files[0]; + // console.log(files) + setImage(files); + + }; + // + const onCancel = () => { + history.goBack() + + }; + + return ( + <> +
+ + + + + + +

Edit {name} Category

+
+
+ + + + + setName(e.target.value)} + value={name} + placeholder="Name" /> + + + + + {/* */} + + + +
+ +
+ + +
+
+ + + + + + +
+ + + ) +} + +export default AddProduct \ No newline at end of file diff --git a/src/views/Commerce/AddProduct.js b/src/views/Commerce/AddProduct.js deleted file mode 100644 index a84ecb7..0000000 --- a/src/views/Commerce/AddProduct.js +++ /dev/null @@ -1,300 +0,0 @@ -import axios from "axios"; -import React, { useCallback, useEffect, useState } from "react"; -import { API } from "../../data"; -import { isAutheticated } from "../../auth"; -import ClipLoader from "react-spinners/ClipLoader"; -//import Footer from "../../Footer"; -import { Link } from "react-router-dom"; -import { useHistory } from "react-router-dom"; -import swal from 'sweetalert'; - -const AddProduct = () => { - const { token } = isAutheticated(); - let history = useHistory(); - const [state, setstate] = useState({ - title: "", - description: "", - status: "", - tax: "", - price: "", - taxes: [], - loading: false, - }); - - const { title, description, status, tax, price, taxes, loading } = state; - - const changeState = (newState) => - setstate((prevState) => ({ ...prevState, ...newState })); - - const fetchTax = useCallback(async () => { - let res = await axios.get(`${API}/api/tax/view_tax`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - if (res.status === 200) changeState({ taxes: res.data }); - }, [token]); - - useEffect(() => { - fetchTax(); - }, [fetchTax]); - - const handleSubmit = async () => { - if (!(title || description || tax || price)) { - alert("Please fill required field "); - return; - } - changeState({ loading: true }); - - let res = await axios.post( - `${API}/api/product`, - { - title, - description, - status, - tax: taxes.find((taxObj) => taxObj.name === tax)?._id, - price, - }, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - if (res.status === 200) { - swal("success!", "Product Added Successfully!", "success"); - history.goBack(); - } - - changeState({ loading: false }); - }; - - // - const onCancel = () => { - // window.location = "/comproducts"; - history.goBack() - - }; - - - const handleChange = (e) => { - const { name, value } = e.target; - - changeState({ [name]: value }); - }; - return ( - <> -
-
-
- {/* */} -
-
-
-

Add New Product

-
-
    -
  1. - Dating App -
    2. -
  2. Commerce
    3. -
  3. Add New Product
    4. -
-
-
-
-
- {/* */} - - {/* */} -
-
-
- - -
-
-
- {/* */} - - {/* */} -
- {/* */} -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-
- {/* */} - - {/* */} -
-
-
-
-
-
-
-
-
- - -
-
-
- -
-
-
- - -
-
-
-
-
-
-
-
-
- {/* */} -
-
- {/* */} -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- {/* */} -
-
- {/* */} -
- {/* */} - {/*
- - ) -} - -export default AddProduct \ No newline at end of file diff --git a/src/views/Commerce/Editproducts.js b/src/views/Commerce/Editproducts.js deleted file mode 100644 index 118ebed..0000000 --- a/src/views/Commerce/Editproducts.js +++ /dev/null @@ -1,326 +0,0 @@ -import axios from "axios"; -import React, { useCallback, useEffect, useState } from "react"; -// import { API } from "../../data"; -import { isAutheticated } from "../../auth"; -import ClipLoader from "react-spinners/ClipLoader"; -import swal from 'sweetalert'; - -// import "bootstrap"; -// import "bootstrap/dist/css/bootstrap.css"; -// import "bootstrap/dist/js/bootstrap.js"; -import { Link, useParams } from "react-router-dom"; -import { useHistory } from "react-router-dom"; - -function EditProducts() { - const { token } = isAutheticated(); - - let history = useHistory(); - - - const [state, setstate] = useState({ - title: "", - description: "", - status: "", - tax: "", - price: "", - taxes: [], - loading: false, - }); - - const { id } = useParams(); - // console.log(id) - - const { title, description, status, tax, price, taxes, loading } = state; - - const changeState = (newState) => - setstate((prevState) => ({ ...prevState, ...newState })); - - const fetchTax = useCallback(async () => { - let res = await axios.get(`/api/tax/view_tax`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - if (res.status === 200) changeState({ taxes: res.data }); - }, [token]); - - const fetchProduct = useCallback(async () => { - const res = await axios.get(`/api/product/${id}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - console.log(res.data); - - if (res.status === 200) changeState({ ...res.data }); - }, [id, token]); - - useEffect(() => { - fetchTax(); - fetchProduct(); - }, [fetchTax, fetchProduct]); - - useEffect(() => { - if (!(typeof tax === "object")) return; - changeState({ tax: tax.name }); - }, [tax]); - - const handleSubmit = async () => { - if (!(title || description || tax || price)) { - alert("Please fill required field "); - return; - } - changeState({ loading: true }); - - let res = await axios.put( - `/api/product/${id}`, - { - title, - description, - status, - tax: taxes.find((taxObj) => taxObj.name === tax)?._id, - price, - }, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - if (res.status === 200) window.location.reload(); - - changeState({ loading: false }); - swal("Edit successfully!"); - history.goBack() - }; - const onCancel = () => { - // window.location = "/comproducts"; - history.goBack() - - }; - - - - const handleChange = (e) => { - const { name, value } = e.target; - - changeState({ [name]: value }); - }; - - return ( -
-
-
- {/* */} -
-
-
-

Edit {title} Product

-
-
    -
  1. - Dating App -
    2. -
  2. Commerce
    3. -
  3. - Edit Product -
    4. -
-
-
-
-
- {/* */} - - {/* */} -
-
-
- - -
-
-
- {/* */} - - {/* */} -
- {/* */} -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-
- {/* */} - - {/* */} -
-
-
-
-
-
- {/*
-
-
- - -
-
-
*/} - -
-
-
- - -
-
-
-
-
-
-
-
-
- {/* */} -
-
- {/* */} -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- {/* */} -
-
- {/* */} -
- {/* */} - {/*
- ); -} - -export default EditProducts; diff --git a/src/views/Commerce/Products.js b/src/views/Commerce/Products.js deleted file mode 100644 index 5722a96..0000000 --- a/src/views/Commerce/Products.js +++ /dev/null @@ -1,291 +0,0 @@ -import axios from "axios"; -import React, { useEffect, useState, useCallback, useMemo } from "react"; -import { Link } from "react-router-dom"; -// import { API } from "../../data"; -import { isAutheticated } from "../../auth"; - -function Products() { - const [state, setState] = useState({ - products: [], - page: 1, - limit: 10, - totalProducts: 0, - pages: 1, - }); - - window.scrollTo({ behavior: "smooth", top: "0px" }); - - const { products, page, limit, totalProducts, pages } = state; - - const changeState = (newState) => - setState((prevState) => ({ ...prevState, ...newState })); - - const { token } = isAutheticated(); - - const getProducts = useCallback(async () => { - let res = await axios.get( - `/api/product?page=${page}&limit=${limit}`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - // console.log(res) - - changeState({ - ...res.data, - pages: Math.ceil(res.data.totalProducts / limit), - }); - }, [limit, page, token]); - - useEffect(() => { - getProducts(); - }, [getProducts]); - - const getTotalPages = useMemo(() => { - const length = pages > 1 ? pages : totalProducts ? 1 : 0; - return Array.from({ length }, (_, i) => i + 1); - }, [pages, totalProducts]); - - // console.log(getTotalPages); - - const handleDelete = async (id) => { - let status = window.confirm("Do you want to delete"); - if (!status) return; - - let res = await axios.delete(`/api/product/${id}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - if (res.status === 200) window.location.reload(); - }; - - const toggleStatus = async (id) => { - let status = window.confirm("Do you want to delete"); - if (!status) { - return; - } - let res = await axios.get(`/api/product/setStatus/${id}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - if (res.status === 200) window.location.reload(); - }; - - return ( -
-
-
- {/* */} -
-
-
-

Commerce - Products

- -
-
    -
  1. - Dating App -
    2. -
  2. Commerce - Products
    3. -
-
-
-
-
- {/* */} - -
-
-
-
-
- {/*
-
- -
-
*/} - {/* */} -
-
- - - - - - - - - - - {products.map( - ({ title, _id, price, status }) => - title && ( - - - - - - - ) - )} - -
NamePriceStatusActions
{title}{price} - - {status ? "Live" : "Suspended"} - - - - - - - - - -
-
- - {/*
-
-
- Showing{" "} - {!totalProducts - ? totalProducts - : page * limit - (limit - 1)}{" "} - to{" "} - {totalProducts > limit - ? limit * page > totalProducts - ? totalProducts - : limit * page - : totalProducts}{" "} - of {totalProducts} entries -
-
- -
-
-
    -
  • - -
    • - - {getTotalPages.map((pageNo) => { - return ( -
  • - -
    • - ); - })} - -
  • - -
    • -
-
-
-
*/} - - {/* */} -
-
-
-
-
- {/* */} -
-
- ); -} - -export default Products; diff --git a/src/views/Courier/AddCourier.js b/src/views/Courier/AddCourier.js deleted file mode 100644 index 3351af2..0000000 --- a/src/views/Courier/AddCourier.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useEffect } from 'react'; -import { - CButton, - CCard, - CCardBody, - CCardGroup, - CCol, - CContainer, - CForm, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import Swal from 'sweetalert2'; -import { cil3d } from '@coreui/icons' -import { useState } from 'react'; -import axios from 'axios'; -import { isAutheticated } from 'src/auth'; -import { useHistory } from 'react-router-dom'; - -const AddCourier = () => { - const [id, setId] = useState(0); - const [date, setDate] = useState('') - const [courier, setCourier] = useState('') - const { token } = isAutheticated(); - const history = useHistory() - useEffect(() => { - const getDate = () => { - let today = new Date(); - let dd = String(today.getDate()).padStart(2, '0'); - let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! - let yyyy = today.getFullYear(); - - today = dd + '/' + mm + '/' + yyyy; - return today - } - - - const generateCode = () => { - setId(Math.round(Math.random() * 1000000000)) - } - generateCode() - setDate(getDate()) - }, []) - const handleChange = (e) => { - const { name, value } = e.target; - setCourier(value) - } - const handleClick = async () => { - let res = await axios.post('/api/courier/add', { name: courier, addedOn: date, UID: id }, { - headers: { - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === "Success")) { - Swal.fire({ - title: 'Done', - text: 'Courier Added', - icon: 'success', - confirmButtonText: 'Cool', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - history.push('/courier'); - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - } - - - return
- - - - -

Add New Courier

-

Fill the fields and submit to add a new vendor

- -
Unique ID:
 -
{id}
 - {/*

(auto-generated)

*/} - - -
Added On:
 -
{date}
 - {/*

(auto-generated)

*/} - - - - - - - - - - Submit - - - - - - - -
; -}; - -export default AddCourier; diff --git a/src/views/Courier/Courier.js b/src/views/Courier/Courier.js deleted file mode 100644 index 8eb977e..0000000 --- a/src/views/Courier/Courier.js +++ /dev/null @@ -1,111 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { - CAvatar, - CButton, - CButtonGroup, - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { Link } from 'react-router-dom'; -import { isAutheticated } from 'src/auth'; -import axios from 'axios'; -import Swal from 'sweetalert2'; -import { useHistory } from 'react-router-dom'; - - -const Courier = () => { - const { token } = isAutheticated(); - const [data, setData] = useState([]) - const [reload, setReload] = useState(false) - - useEffect(() => { - const getData = async () => { - const res = await axios.get('/api/courier', { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }); - console.log(res.data); - setData(res.data.Pincode) - console.log(data); - } - getData(); - - }, [reload]); - const handleDelete = async (id) => { - const res = await axios.delete(`/api/courier/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === "Success")) { - Swal.fire({ - title: 'Updated', - text: 'Courier Deleted', - icon: 'success', - confirmButtonText: 'Cool', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - // history.push('/courier'); - // location.reload(); - setReload(!reload) - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - - } - const formatDate = (date) => { - let today = new Date(date); - let dd = String(today.getDate()).padStart(2, '0'); - let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! - let yyyy = today.getFullYear(); - - today = dd + '/' + mm + '/' + yyyy; - return today - } - return
- - +Add New - -
- - - - Courier Name - Unique ID - Added On - Actions - - - - {data.map(item => - - {item.name} - {item._id} - {/* {item.code} */} - {formatDate(item.createdAt)} - - - Edit - handleDelete(item._id)}>Delete - - - - )} - - - -
; -}; - -export default Courier; diff --git a/src/views/Courier/EditCourier.js b/src/views/Courier/EditCourier.js deleted file mode 100644 index 2c8e28e..0000000 --- a/src/views/Courier/EditCourier.js +++ /dev/null @@ -1,146 +0,0 @@ -import React, { useEffect } from 'react'; -import { - CButton, - CCard, - CCardBody, - CCardGroup, - CCol, - CContainer, - CForm, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cil3d } from '@coreui/icons' -import { useState } from 'react'; -import axios from 'axios'; -import { isAutheticated } from 'src/auth'; -import { useParams } from 'react-router-dom'; -import Swal from 'sweetalert2'; -import { useHistory } from 'react-router-dom'; - -const EditCourier = () => { - // const [id, setId] = useState(0); - const [date, setDate] = useState('') - const [courier, setCourier] = useState() - const { token } = isAutheticated(); - const { id } = useParams(); - const [data, setData] = useState([]) - const history = useHistory(); - useEffect(() => { - const getData = async () => { - const res = await axios.get(`/api/courier/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }); - console.log(res.data); - setData(res.data?.Pincode[0]) - setCourier(res.data?.Pincode[0].name) - console.log(data); - } - getData(); - - }, []); - - useEffect(() => { - const getDate = () => { - let today = new Date(); - let dd = String(today.getDate()).padStart(2, '0'); - let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! - let yyyy = today.getFullYear(); - - today = dd + '/' + mm + '/' + yyyy; - return today - } - - - const generateCode = () => { - // setId(Math.round(Math.random() * 1000000000)) - } - generateCode() - setDate(getDate()) - }, []) - const handleChange = (e) => { - const { name, value } = e.target; - setCourier(value) - } - const handleClick = async () => { - let res = await axios.put(`/api/courier/${id}`, { name: courier }, { - headers: { - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === "Success")) { - Swal.fire({ - title: 'Updated', - text: 'Courier Updated', - icon: 'success', - confirmButtonText: 'Cool', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - history.push('/courier'); - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - } - const formatDate = (date) => { - let today = new Date(date); - let dd = String(today.getDate()).padStart(2, '0'); - let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! - let yyyy = today.getFullYear(); - - today = dd + '/' + mm + '/' + yyyy; - return today - } - - - return
- - - - -

Edit Courier

-

Fill the fields and submit to add a new vendor

- -
Unique ID:
 -
{id}
 - {/*

(auto-generated)

*/} - - -
Added On:
 -
{formatDate(data.createdAt)}
 - {/*

(auto-generated)

*/} - - - - - - - - - - Submit - - - - - - - -
; -}; - -export default EditCourier; diff --git a/src/views/Directory/Add_Business.js b/src/views/Directory/Add_Business.js new file mode 100644 index 0000000..66760ef --- /dev/null +++ b/src/views/Directory/Add_Business.js @@ -0,0 +1,464 @@ +import axios from "axios"; +import React, { useCallback, useEffect, useState } from "react"; +// import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import ClipLoader from "react-spinners/ClipLoader"; +import { Country, State, City } from "country-state-city"; +import swal from 'sweetalert'; + + +import { Link, useParams } from "react-router-dom"; +import { useHistory } from "react-router-dom"; + +const Add_Business = () => { + const [categoryName, setCategoryName] = useState([]); + + const { token } = isAutheticated(); + + let history = useHistory(); + const [state, setState] = useState({ + name: "", + phone: "", + email: "", + Bname: "", + Sname: "", + country: "", + city: "", + loading: false, + description: "", + category: "", + status: "", + Glocation: "", + LinkedinUrl: "", + FacebookUrl: "", + InstagramUrl: "" + }); + + + const { description, loading } = state; + const changeState = (newState) => + setState((prevState) => ({ ...prevState, ...newState })); + + + const handleChange = (e) => { + changeState({ ...state, [e.target.name]: e.target.value }) + + }; + + + + const fetchCategory = useCallback(async () => { + const res = await axios.get(`/api/category/getAll`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + console.log(res.data.category); + setCategoryName(res.data.category) + if (res.status === 200) changeState({ ...res.data }); + }, [token]); + + useEffect(async () => { + + + + + fetchCategory(); + + }, [fetchCategory]); + + + const handleSubmit = async () => { + if (!(name || description || phone || email || Bname || Sname || city)) { + alert("Please fill required field "); + return; + } + changeState({ loading: true }); + + let res = await axios.post( + `/api/directory/create/`, + { + ...state, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + //if (res.status === 200) window.location.reload(); + console.log(res.status == 201) + if (res.status == 201) { + changeState({ loading: false }); + swal("Add Business successfully!"); + history.goBack() + } + }; + const onCancel = () => { + // window.location = "/comproducts"; + history.goBack() + + }; + + + + + // console.log(state) + return ( + <> +
+
+
+
+
+
+ Add Bisuness + + +
+
+
+ {/* */} + + {/* */} +
+ {/* */} +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ + +
+ +
+ + + + +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ {/* */} + + {/* */} +
+
+
+
+
+
+ +
+
+
+ + + + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ {/* */} +
+
+ +
+
+ {/* */} +
+ {/* */} + {/*
+ + ) +} + +export default Add_Business \ No newline at end of file diff --git a/src/views/Directory/Bisuness.js b/src/views/Directory/Bisuness.js new file mode 100644 index 0000000..afb9994 --- /dev/null +++ b/src/views/Directory/Bisuness.js @@ -0,0 +1,292 @@ +import axios from "axios"; +import React, { useEffect, useState, useCallback, useMemo } from "react"; +import { Link } from "react-router-dom"; +// import { API } from "../../data"; +import { isAutheticated } from "../../auth"; + +const Bisuness = () => { + const [bisuness, setBisuness] = useState([]) + + + + const { token } = isAutheticated(); + + const getProducts = useCallback(async () => { + let res = await axios.get( + `/api/directory/getAll`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + // console.log(res.data.directory) + setBisuness(res.data.directory) + // changeState({ + // ...res.data, + // pages: Math.ceil(res.data.totalProducts / limit), + // }); + }, [token]); + + useEffect(() => { + getProducts(); + }, [getProducts]); + + + + const handleDelete = async (id) => { + let status = window.confirm("Do you want to delete"); + if (!status) return; + + let res = await axios.delete(`/api/directory/delete/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res) + + if (res.data.success == true) { + swal("success!", "Directory Deleted Successfully!", "success"); + window.location.reload(); + + } + }; + + const toggleStatus = async (id) => { + let status = window.confirm("Do you want to delete"); + if (!status) { + return; + } + let res = await axios.get(`/api/product/setStatus/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (res.status === 200) window.location.reload(); + }; + + return ( + <> +
+
+
+ {/* */} +
+
+
+

Bisuness-Directory

+ + {/*
+
    +
  1. + Dating App +
    2. +
  2. Commerce - Products
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ {/*
+
+ +
+
*/} + {/* */} +
+
+ + + + + + + + + + + + {bisuness.map((item) => + + + + + + + + + + )} + +
NameCategoryCityStatusActions
{item?.name} {item?.category}{item?.city} + + {status ? "Live" : "Suspended"} + + + + + + + + + + + + + +
+
+ + {/*
+
+
+ Showing{" "} + {!totalProducts + ? totalProducts + : page * limit - (limit - 1)}{" "} + to{" "} + {totalProducts > limit + ? limit * page > totalProducts + ? totalProducts + : limit * page + : totalProducts}{" "} + of {totalProducts} entries +
+
+ +
+
+
    +
  • + +
    • + + {getTotalPages.map((pageNo) => { + return ( +
  • + +
    • + ); + })} + +
  • + +
    • +
+
+
+
*/} + + {/* */} +
+
+
+
+
+ {/* */} +
+
+ + ) +} + +export default Bisuness \ No newline at end of file diff --git a/src/views/Directory/EditBisuness.js b/src/views/Directory/EditBisuness.js new file mode 100644 index 0000000..70cddc3 --- /dev/null +++ b/src/views/Directory/EditBisuness.js @@ -0,0 +1,515 @@ +import axios from "axios"; +import React, { useCallback, useEffect, useState } from "react"; +// import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import ClipLoader from "react-spinners/ClipLoader"; +import { Country, State, City } from "country-state-city"; +import swal from 'sweetalert'; +import { Link, useParams } from "react-router-dom"; +import { useHistory } from "react-router-dom"; + +const EditBisuness = () => { + const [categoryName, setCategoryName] = useState([]); + const { token } = isAutheticated(); + + let history = useHistory(); + const [state, setState] = useState({ + name: "", + phone: "", + email: "", + Building_Name: "", + Street_Name: "", + country: "", + city: "", + loading: false, + description: "", + category: "", + status: "", + Glocation: "", + LinkedinUrl: "", + FacebookUrl: "", + InstagramUrl: "" + }); + + const { id } = useParams(); + // console.log(id) + + const { description, loading } = state; + + + const changeState = (newState) => + setState((prevState) => ({ ...prevState, ...newState })); + + + + const handleChange = (e) => { + changeState({ ...state, [e.target.name]: e.target.value }) + + }; + + + //category + const fetchCategory = useCallback(async () => { + const res = await axios.get(`/api/category/getAll`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + // console.log(res.data.category); + setCategoryName(res.data.category) + if (res.status === 200) changeState({ ...res.data }); + }, [token]); + + useEffect(async () => { + + fetchCategory(); + + }, [fetchCategory]); + + + + + + + const fetchDirectory = useCallback(async () => { + const res = await axios.get(`/api/directory/getOne/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + + setState(res.data.directory) + changeState({ loading: false }); + if (res.status === 200) changeState({ ...res.data }); + }, [token]); + + useEffect(() => { + fetchDirectory(); + }, [fetchDirectory]); + + + + + const handleSubmit = async () => { + if (!(name || description || phone || email || Bname || Sname || city)) { + alert("Please fill required field "); + return; + } + changeState({ loading: true }); + + let res = await axios.put( + `/api/directory/update/${id}`, + { + state, + }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + + if (res.status == 200) { + changeState({ loading: false }); + swal("Edit Business successfully!"); + history.goBack() + } + }; + const onCancel = () => { + history.goBack() + + }; + + + + + // console.log(state) + return ( + <> +
+
+
+
+
+
+ Edit Bisuness + + +
+
+
+ {/* */} + + {/* */} +
+ {/* */} +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ + +
+ +
+ + + + +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ {/* */} + + {/* */} +
+
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ {/* */} +
+
+ {/* */} + {/*
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
*/} + {/* */} +
+
+ {/* */} +
+ {/* */} + {/*
+ + ) +} + +export default EditBisuness \ No newline at end of file diff --git a/src/views/Directory/View_Bisuness.js b/src/views/Directory/View_Bisuness.js new file mode 100644 index 0000000..1dc08c1 --- /dev/null +++ b/src/views/Directory/View_Bisuness.js @@ -0,0 +1,134 @@ + +import axios from "axios"; +import React, { useEffect, useState, useCallback, useMemo } from "react"; +import { Link } from "react-router-dom"; +// import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import { useParams } from "react-router-dom"; +const View_Bisuness = () => { + const { id } = useParams(); + // console.log(id) + const [bisuness, setBisuness] = useState([]) + + + // const { products, page, limit, totalProducts, pages } = state; + + + const { token } = isAutheticated(); + + const view_business = useCallback(async () => { + let res = await axios.get( + `/api/directory/getOne/${id}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(res.data.directory.name) + setBisuness(res.data.directory) + // changeState({ + // ...res.data, + // pages: Math.ceil(res.data.totalProducts / limit), + // }); + // limit, page, + }, [token]); + + useEffect(() => { + view_business(); + }, [view_business]); + + + return ( + <> +
+
+
+ {/* */} +
+
+
+

View Bisuness

+ {/* */} + +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameCategoryemailphoneBuilding_NameStreet_NamecitydescriptionStatusGoogle LocationLinkedinUrlFacebookUrlintagramUrl
{bisuness?.name} {bisuness?.category}{bisuness?.email}{bisuness?.phone}{bisuness?.Building_Name}{bisuness?.Street_Name}{bisuness?.city}{bisuness?.description} + + {bisuness?.status ? "Live" : "Suspended"} + + {bisuness?.Glocation}{bisuness?.LinkedinUrl}{bisuness?.FacebookUrl}{bisuness?.InstagramUrl} + +
+
+ + {/* */} +
+
+
+
+
+ {/* */} +
+
+ + ) +} + +export default View_Bisuness \ No newline at end of file diff --git a/src/views/News/AddNews.js b/src/views/News/AddNews.js new file mode 100644 index 0000000..498f49c --- /dev/null +++ b/src/views/News/AddNews.js @@ -0,0 +1,149 @@ +import axios from "axios"; +import React, { useCallback, useEffect, useState } from "react"; +import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import ClipLoader from "react-spinners/ClipLoader"; +import { useHistory } from "react-router-dom"; +import swal from 'sweetalert'; + +import { + CButton, + CCard, + CCardBody, + CCol, + CContainer, + CForm, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilPencil, cilSettings, cilLockLocked, cilUser } from '@coreui/icons' +const AddNews = () => { + const { token } = isAutheticated(); + let history = useHistory(); + const [image, setImage] = useState(""); + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + const [loading, setLoading] = useState(false); + + + const handleSubmit = async () => { + const myForm = new FormData(); + + myForm.set("title", title); + myForm.set("description", description); + myForm.set("image", image); + setLoading({ loading: true }); + // console.log(image) + let res = await axios.post( + `/api/news/create`, myForm, + { + headers: { + "Content-Type": 'multipart/form-data', + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(res.data) + if (res.data) { + swal("success!", "News Added Successfully!", "success"); + history.goBack(); + } + + setLoading(false); + }; + const handleImage = (e) => { + const files = e.target.files[0]; + // console.log(files) + setImage(files); + + }; + // + const onCancel = () => { + // window.location = "/comproducts"; + history.goBack() + + }; + + return ( + <> +
+ + + + + + +

Add News

+
+
+ + + + + setTitle(e.target.value)} + value={title} + placeholder="Title" /> + + + + + + setDescription(e.target.value)} + value={description} + placeholder="Description" /> + + + + + {/* */} + + + +
+ +
+ + +
+
+ + + + + + +
+ + + ) +} + +export default AddNews \ No newline at end of file diff --git a/src/views/News/EditNews.js b/src/views/News/EditNews.js new file mode 100644 index 0000000..a494cd4 --- /dev/null +++ b/src/views/News/EditNews.js @@ -0,0 +1,165 @@ + +import axios from "axios"; +import React, { useCallback, useEffect, useState } from "react"; +import { API } from "../../data"; +import { isAutheticated } from "../../auth"; +import ClipLoader from "react-spinners/ClipLoader"; +import { useHistory } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; +import swal from 'sweetalert'; + +import { + CButton, + CCard, + CCardBody, + CCol, + CContainer, + CForm, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilPencil, cilSettings, cilLockLocked, cilUser } from '@coreui/icons' +const EditNews = () => { + const { id } = useParams(); + // console.log(id) + const { token } = isAutheticated(); + let history = useHistory(); + const [image, setImage] = useState(""); + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + const [loading, setLoading] = useState(false); + + //fetch one image + useEffect(async () => { + const res = await axios.get(`/api/news/getOne/${id}`, { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + // console.log(res.data.news.title) + setTitle(res.data.news.title) + setDescription(res.data.news.description) + + }, [id]); + + const handleSubmit = async () => { + const myForm = new FormData(); + + myForm.set("title", title); + myForm.set("description", description); + myForm.set("image", image); + setLoading({ loading: true }); + // console.log(image) + let res = await axios.put( + `/api/news/update/${id}`, myForm, + { + headers: { + "Content-Type": 'multipart/form-data', + Authorization: `Bearer ${token}`, + }, + } + ); + // console.log(res.data) + if (res.data) { + swal("success!", "News Edit Successfully!", "success"); + history.goBack(); + } + + setLoading(false); + }; + const handleImage = (e) => { + const files = e.target.files[0]; + // console.log(files) + setImage(files); + + }; + // + const onCancel = () => { + // window.location = "/comproducts"; + history.goBack() + + }; + + return ( + <> +
+ + + + + + +

Edit News

+
+
+ + + + + setTitle(e.target.value)} + value={title} + placeholder="Title" /> + + + + + + setDescription(e.target.value)} + value={description} + placeholder="Description" /> + + + + + {/* */} + + + +
+ +
+ + +
+
+ + + + + + +
+ + + ) +} + +export default EditNews \ No newline at end of file diff --git a/src/views/News/News.js b/src/views/News/News.js new file mode 100644 index 0000000..1fcaf72 --- /dev/null +++ b/src/views/News/News.js @@ -0,0 +1,164 @@ + +import axios from "axios"; +import React, { useEffect, useState, useCallback, useMemo } from "react"; +import { Link } from "react-router-dom"; +import swal from 'sweetalert'; +// import { API } from "../../data"; +import { isAutheticated } from "../../auth"; + +function News() { + const [news, setNews] = useState([]) + + const { token } = isAutheticated(); + + const getNews = useCallback(async () => { + let res = await axios.get( + `/api/news/getAll`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + + setNews(res.data.news) + + + }, [token]); + + useEffect(() => { + getNews(); + }, [getNews]); + + + const handleDelete = async (id) => { + let status = window.confirm("Do you want to delete"); + if (!status) return; + + let res = await axios.delete(`/api/news/delete/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + console.log(res) + if (res.data.success == true) { + swal("success!", "News Deleted Successfully!", "success"); + window.location.reload(); + } + }; + + + //change time formate + function formatAMPM(date) { + var hours = new Date(date).getHours(); + var minutes = new Date(date).getMinutes(); + var ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + minutes = minutes < 10 ? '0' + minutes : minutes; + var strTime = hours + ':' + minutes + ' ' + ampm; + return strTime; + } + + + return ( +
+
+
+ {/* */} +
+
+
+

CMP-News

+ + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + {news && news.map((item, index) => + + + + + + + + + )} + +
TitleImageAdded OnAction
{item?.title} + + {/* {item?.addedOn} */} + {new Date(`${item?.addedOn}`).toDateString()} , {`${formatAMPM(item?.addedOn)}`} + + + + + + + + + + + +
+
+ + + {/* */} +
+
+
+
+
+ {/* */} +
+
+ ); +} + +export default News; diff --git a/src/views/News/ViewNews.js b/src/views/News/ViewNews.js new file mode 100644 index 0000000..4ec698d --- /dev/null +++ b/src/views/News/ViewNews.js @@ -0,0 +1,131 @@ + +import axios from "axios"; +import React, { useEffect, useState, useCallback, useMemo } from "react"; +import swal from 'sweetalert'; +// import { API } from "../../data"; +import { Link, useParams } from "react-router-dom"; +import { isAutheticated } from "../../auth"; + +function ViewNews() { + const [news, setNews] = useState([]) + const { id } = useParams(); + console.log(id) + const { token } = isAutheticated(); + + const getNews = useCallback(async () => { + let res = await axios.get( + `/api/news/getOne/${id}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(res.data.news) + setNews(res.data.news) + + + }, [token]); + + useEffect(() => { + getNews(); + }, [getNews]); + + + + + + //change time formate + function formatAMPM(date) { + var hours = new Date(date).getHours(); + var minutes = new Date(date).getMinutes(); + var ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + minutes = minutes < 10 ? '0' + minutes : minutes; + var strTime = hours + ':' + minutes + ' ' + ampm; + return strTime; + } + + + return ( +
+
+
+ {/* */} +
+
+
+

CMP-News

+ + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + {news && + + + + + + + + + + + + } + +
IdTitleImageDescriptionAdded OnUpdated At
{news?._id}{news?.title} + + {news?.description} + {new Date(`${news?.addedOn}`).toDateString()} , {`${formatAMPM(news?.addedOn)}`} + + {new Date(`${news?.updatedAt}`).toDateString()} , {`${formatAMPM(news?.updatedAt)}`} +
+
+ + + {/* */} +
+
+
+
+
+ {/* */} +
+
+ ); +} + +export default ViewNews; diff --git a/src/views/Vendor/AddVendor.js b/src/views/Vendor/AddVendor.js deleted file mode 100644 index 7575154..0000000 --- a/src/views/Vendor/AddVendor.js +++ /dev/null @@ -1,174 +0,0 @@ -import React from 'react'; -import { - CButton, - CCard, - CCardBody, - CCardGroup, - CCol, - CContainer, - CForm, - CFormInput, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import Swal from 'sweetalert2'; -import CIcon from '@coreui/icons-react' -import { Country, State, City } from 'country-state-city'; -import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons' -import { Link } from 'react-router-dom'; -import { useState } from 'react'; -import { useEffect } from 'react'; -import axios from 'axios'; -import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state'; -import { isAutheticated } from 'src/auth'; -import { useHistory } from 'react-router-dom'; - - -const AddVendor = () => { - const [vendor, setVendor] = useState({ - vendor_name: '', - city: '', - state: 'Andhra Pradesh', - country: 'India', - address_1: '', - address_2: '', - - }) - const history = useHistory() - const { token } = isAutheticated(); - const [states, setStates] = useState([]); - const [cities, setCities] = useState([]); - const [code, setCode] = useState(0); - const [countryCode, setCountryCode] = useState('IN') - const [stateCode, setStateCode] = useState('AP') - const countries = Country.getAllCountries(); - const allStates = State.getAllStates(); - // const Code = Math.round(Math.random() * 1000000000); - const handleChange = (e) => (event) => { - setVendor({ ...vendor, [e]: event.target.value }); - }; - - useEffect(() => { - const generateCode = () => { - setCode(Math.round(Math.random() * 1000000000)) - } - generateCode() - }, []) - useEffect(() => { - const ccode = countries.find(item => item.name === vendor.country) - const scode = allStates.find(item => item.name === vendor.state) - console.log(ccode.isoCode + ":" + scode.isoCode); - console.log(vendor.country, vendor.state); - setCountryCode(ccode?.isoCode) - setStateCode(scode.isoCode) - setStates(prev => State.getStatesOfCountry(countryCode)) - setCities(prev => City.getCitiesOfState(countryCode, stateCode)) - }, [vendor.country, vendor.state, countryCode, stateCode]); - - const handleClick = async () => { - let res = await axios.post('/api/vendor/add', { ...vendor, code }, { - headers: { - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === "Success")) { - Swal.fire({ - title: 'Done', - text: 'Vendor Added', - icon: 'success', - confirmButtonText: 'ok', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - history.push('/vendors'); - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - } - - return
- - - - -

Add New Vendor

-

Fill the fields and submit to add a new vendor

- -

Code:

 -
{code}
 - {/*

(auto-generated)

*/} - - - - - - - - - - - - - - - - - - - - { - countries.map((item) => - - ) - } - - - { - states.map((item) => - - ) - } - - - { - cities.map((item) => - - ) - } - - - - Submit - - - - - - - -
; -}; - -export default AddVendor; diff --git a/src/views/Vendor/EditVendor.js b/src/views/Vendor/EditVendor.js deleted file mode 100644 index df783bf..0000000 --- a/src/views/Vendor/EditVendor.js +++ /dev/null @@ -1,192 +0,0 @@ -import React from 'react'; -import { - CButton, - CCard, - CCardBody, - CCardGroup, - CCol, - CContainer, - CForm, - CFormInput, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { Country, State, City } from 'country-state-city'; -import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons' -import { Link } from 'react-router-dom'; -import { useState } from 'react'; -import { useEffect } from 'react'; -import axios from 'axios'; -import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state'; -import { isAutheticated } from 'src/auth'; -import { useParams } from 'react-router-dom'; -import Swal from 'sweetalert2'; -import { useHistory } from 'react-router-dom'; - - -const AddVendor = () => { - const [vendor, setVendor] = useState({ - vendor_name: '', - city: '', - state: 'Andhra Pradesh', - country: 'India', - address_1: '', - address_2: '', - }) - const history = useHistory() - const { id } = useParams(); - const { token } = isAutheticated(); - const [states, setStates] = useState([]); - const [cities, setCities] = useState([]); - const [countryCode, setCountryCode] = useState('IN') - const [stateCode, setStateCode] = useState('AP') - const countries = Country.getAllCountries(); - const allStates = State.getAllStates(); - const [data, setData] = useState([]); - // const Code = Math.round(Math.random() * 1000000000); - const handleChange = (e) => (event) => { - setVendor({ ...vendor, [e]: event.target.value }); - }; - useEffect(() => { - const getData = async () => { - const res = await axios.get(`api/vendor/view/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }); - if (res) { - setData(res?.data?.Store) - setVendor(res?.data?.Store) - } - - - console.log(res.data); - } - getData(); - - - }, []); - // console.log(vendor); - useEffect(() => { - const ccode = countries.find(item => item.name === vendor.country) - const scode = allStates.find(item => item.name === vendor.state) - console.log(ccode.isoCode + ":" + scode.isoCode); - console.log(vendor.country, vendor.state); - setCountryCode(ccode.isoCode) - setStateCode(scode.isoCode) - setStates(prev => State.getStatesOfCountry(countryCode)) - setCities(prev => City.getCitiesOfState(countryCode, stateCode)) - }, [vendor.country, vendor.state, countryCode, stateCode]); - console.log(data); - const handleClick = async () => { - let res = await axios.put(`/api/vendor/${id}`, vendor, { - headers: { - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === "Success")) { - Swal.fire({ - title: 'Done', - text: 'vendor Updated', - icon: 'success', - confirmButtonText: 'Cool', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - history.push('/vendors'); - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - } - - return
- - - - -

Edit Vendor

- {/*

Fill the fields and submit to add a new vendor

*/} - -

Code:

 -
{data?.code}
 - {/*

(auto-generated)

*/} - - - - - - - - - - - - - - - - - - - - { - countries.map((item) => - - ) - } - - - { - states.map((item) => - - ) - } - - - { - cities.map((item) => - - ) - } - - - - Submit - - - - - - - -
; -}; - -export default AddVendor; diff --git a/src/views/Vendor/Vendor.js b/src/views/Vendor/Vendor.js deleted file mode 100644 index 499735f..0000000 --- a/src/views/Vendor/Vendor.js +++ /dev/null @@ -1,103 +0,0 @@ -import React, { useEffect } from 'react'; -import { - CAvatar, - CButton, - CButtonGroup, - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { Link } from 'react-router-dom'; -import axios from 'axios'; -import { isAutheticated } from '../../auth'; -import { useState } from 'react'; -import { useHistory } from 'react-router-dom'; -import Swal from 'sweetalert2'; - -const Vendor = () => { - const { token } = isAutheticated(); - const history = useHistory(); - const [data, setData] = useState([]); - const [reload, setReload] = useState(false); - - useEffect(() => { - const getData = async () => { - const res = await axios.get('/api/vendor/view', { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }); - if (res) { - setData(res?.data?.Stores) - } - - - - } - getData(); - - - }, [reload]); - console.log(data); - - const handleDelete = async (id) => { - const res = await axios.delete(`/api/vendor/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }) - if ((res.data.message === 'Deleted Successfully')) { - Swal.fire({ - title: 'Done', - text: 'Vendor Deleted', - icon: 'success', - confirmButtonText: 'Cool', - confirmButtonColor: '#303c54', - iconColor: '#303c54' - }).then(() => { - // history.('/vendors'); - setReload(!reload) - // location.reload(); - }); - } else { - Swal("Oops!", "Something went wrong!", "error"); - } - } - - - return
- - +Add New Vendor - -
- - - - Vendor Name - Code - Area - Actions - - - {data.map(item => {item.vendor_name} - {item.code} - {item.city} - - history.push(`/editvendor/${item._id}`)}>Edit - history.push(`/viewvendor/${item._id}`)}>View - handleDelete(item._id)}>Delete - - )} - - -
; -}; - -export default Vendor; diff --git a/src/views/Vendor/VendorDetail.js b/src/views/Vendor/VendorDetail.js deleted file mode 100644 index 5225e0e..0000000 --- a/src/views/Vendor/VendorDetail.js +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { useParams } from 'react-router-dom'; -import axios from 'axios'; -import { isAutheticated } from '../../auth'; - - - -const VendorDetail = () => { - const [data, setData] = useState({}); - const { id } = useParams() - const { token } = isAutheticated(); - - useEffect(() => { - const getData = async () => { - const res = await axios.get(`/api/vendor/view/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - "Content-type": "Application/json", - "Authorization": `Bearer ${token}` - } - }); - if (res) { - setData(res?.data?.Store) - } - - } - getData(); - }, []); - console.log(data); - const formatDate = (date) => { - let today = new Date(date); - let dd = String(today.getDate()).padStart(2, '0'); - let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! - let yyyy = today.getFullYear(); - - today = dd + '/' + mm + '/' + yyyy; - return today - } - - - return
-

Vendor Details

- - - - Unique ID - {data._id} - - - - - Code - {data.code} - - - Vendor Name - {data.vendor_name} - - - Added On - {formatDate(data.createdAt)} - - - Address - {data.address_1},{data.address_2},{data.city},{data.state},{data.country} - - - -
; -}; - -export default VendorDetail; diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js deleted file mode 100644 index 943d171..0000000 --- a/src/views/base/accordion/Accordion.js +++ /dev/null @@ -1,180 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CAccordion, - CAccordionBody, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Accordion = () => { - return ( - - - - - - - - React Accordion - - -

- Click the accordions below to expand/collapse the accordion content. -

- - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - - - - - - React Accordion Flush - - -

- Add flush to remove the default background-color, some - borders, and some rounded corners to render accordions edge-to-edge with their parent - container. -

- - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - - - - - - React Accordion Always open - - -

- Add alwaysOpen property to make accordion items stay open when another - item is opened. -

- - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - - - - - - ) -} - -export default Accordion diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js deleted file mode 100644 index dd8e85b..0000000 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react' -import { - CBreadcrumb, - CBreadcrumbItem, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CLink, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Breadcrumbs = () => { - return ( - - - - - - - - React Breadcrumb - - -

- The breadcrumb navigation provides links back to each previous page the user navigated - through and shows the current location in a website or an application. You don’t have - to add separators, because they automatically added in CSS through{' '} - - {' '} - ::before - {' '} - and{' '} - - {' '} - content - - . -

- - - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - Bootstrap - - - - - - - ) -} - -export default Breadcrumbs diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js deleted file mode 100644 index 7dd84c4..0000000 --- a/src/views/base/cards/Cards.js +++ /dev/null @@ -1,909 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardFooter, - CCardGroup, - CCardHeader, - CCardImage, - CCardLink, - CCardSubtitle, - CCardText, - CCardTitle, - CListGroup, - CListGroupItem, - CNav, - CNavItem, - CNavLink, - CCol, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -import ReactImg from 'src/assets/images/react.jpg' - -const Cards = () => { - return ( - - - - - - - - Card Example - - -

- Cards are built with as little markup and styles as possible but still manage to - deliver a bunch of control and customization. Built with flexbox, they offer easy - alignment and mix well with other CoreUI components. Cards have no top, left, and - right margins by default, so use{' '} - spacing utilities as needed. - They have no fixed width to start, so they'll fill the full width of its parent. -

-

- Below is an example of a basic card with mixed content and a fixed width. Cards have - no fixed width to start, so they'll naturally fill the full width of its parent - element. -

- - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - Go somewhere - - - - - - - - - - Card Body - - -

- The main block of a card is the <CCardBody>. Use it whenever you - need a padded section within a card. -

- - - This is some text within a card body. - - - - - - - - - Card Titles, text, and links - - -

- Card titles are managed by <CCardTitle> component. Identically, - links are attached and collected next to each other by <CCardLink>{' '} - component. -

-

- Subtitles are managed by <CCardSubtitle> component. If the{' '} - <CCardTitle> also, the <CCardSubtitle> items are - stored in a <CCardBody> item, the card title, and subtitle are - arranged rightly. -

- - - - Card title - Card subtitle - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - Card link - Another link - - - - - - - - - - Card Images - - -

- .card-img-top places a picture to the top of the card. With{' '} - .card-text, text can be added to the card. Text within{' '} - .card-text can additionally be styled with the regular HTML tags. -

- - - - - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - - - - - - - - - Card List groups - - -

- Create lists of content in a card with a flush list group. -

- - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - - - Header - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - Footer - - - - - - - - - - - Card Kitchen sink - - -

- Combine and match many content types to build the card you need, or throw everything - in there. Shown below are image styles, blocks, text styles, and a list group—all - wrapped in a fixed-width card. -

- - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Card link - Another link - - - - - - - - - - Card Header and footer - - -

- Add an optional header and/or footer within a card. -

- - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - -

- Card headers can be styled by adding ex. component="h5". -

- - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - Quote - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat - a ante. -

-
- Someone famous in Source Title -
-
- - - - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - 2 days ago - - - - - - - - - Card Body - - -

- Cards assume no specific width to start, so they'll be 100% wide - unless otherwise stated. You can adjust this as required with custom CSS, grid - classes, grid Sass mixins, or services. -

-

Using grid markup

-

- Using the grid, wrap cards in columns and rows as needed. -

- - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - -

Using utilities

-

- Use some of{' '} - available sizing utilities to - rapidly set a card's width. -

- - - - Card title - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - Card title - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - Using custom CSS -

- Use custom CSS in your stylesheets or as inline styles to set a width. -

- - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - - Card Text alignment - - -

- You can instantly change the text arrangement of any card—in its whole or specific - parts—with{' '} - text align classes - . -

- - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - - Card Navigation - - -

- Add some navigation to a <CCardHeader> with our{' '} - <CNav> component. -

- - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - - Card Image caps - - -

- Similar to headers and footers, cards can include top and bottom "image - caps"—images at the top or bottom of a card. -

- - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - - - - - - - - Card Card styles - - -

- Cards include various options for customizing their backgrounds, borders, and color. -

-

Background and color

-

- Use color property to change the appearance of a card. -

- - - {[ - { color: 'primary', textColor: 'white' }, - { color: 'secondary', textColor: 'white' }, - { color: 'success', textColor: 'white' }, - { color: 'danger', textColor: 'white' }, - { color: 'warning' }, - { color: 'info', textColor: 'white' }, - { color: 'light' }, - { color: 'dark', textColor: 'white' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -

Border

-

- Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

- - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -

Top border

-

- Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

- - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - - - - - - - - Card Card groups - - -

- Use card groups to render cards as a single, attached element with equal width and - height columns. Card groups start off stacked and use display: flex; to - become attached with uniform dimensions starting at the sm breakpoint. -

- - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - Last updated 3 mins ago - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - Last updated 3 mins ago - - - - - -

- When using card groups with footers, their content will automatically line up. -

- - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - - Last updated 3 mins ago - - - - - - - - - - - Card Grid cards - - -

- Use the CRow component and set{' '} - {xs|sm|md|lg|xl|xxl}={{ cols: * }} property - to control how many grid columns (wrapped around your cards) you show per row. For - example, here's xs={{cols: 1}} laying out the - cards on one column, and md={{cols: 1}} splitting - four cards to equal width across multiple rows, from the medium breakpoint up. -

- - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - -

- Change it to md={{ cols: 3}} and you'll see the - fourth card wrap. -

- - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - - - ) -} - -export default Cards diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js deleted file mode 100644 index e64a81c..0000000 --- a/src/views/base/carousels/Carousels.js +++ /dev/null @@ -1,215 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselItem, - CCol, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -import AngularImg from 'src/assets/images/angular.jpg' -import ReactImg from 'src/assets/images/react.jpg' -import VueImg from 'src/assets/images/vue.jpg' - -const slidesLight = [ - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', -] - -const Carousels = () => { - return ( - - - - - - - - Carousel Slide only - - -

Here’s a carousel with slides

- - - - slide 1 - - - slide 2 - - - slide 3 - - - - - - - - - - Carousel With controls - - -

- Adding in the previous and next controls by controls property. -

- - - - slide 1 - - - slide 2 - - - slide 3 - - - - - - - - - - Carousel With indicators - - -

- You can attach the indicators to the carousel, lengthwise the controls, too. -

- - - - slide 1 - - - slide 2 - - - slide 3 - - - - - - - - - - Carousel With captions - - -

- You can add captions to slides with the <CCarouselCaption> element - within any <CCarouselItem>. They can be immediately hidden on - smaller viewports, as shown below, with optional{' '} - display utilities. We hide them - with .d-none and draw them back on medium-sized devices with{' '} - .d-md-block. -

- - - - slide 1 - -
First slide label
-

Some representative placeholder content for the first slide.

- - - - slide 2 - -
Second slide label
-

Some representative placeholder content for the first slide.

- - - - slide 3 - -
Third slide label
-

Some representative placeholder content for the first slide.

- - - - - - - - - - - Carousel Crossfade - - -

- Add transition="crossfade" to your carousel to animate slides - with a fade transition instead of a slide. -

- - - - slide 1 - - - slide 2 - - - slide 3 - - - - - - - - - - Carousel Dark variant - - -

- Add dark property to the CCarousel for darker controls, - indicators, and captions. Controls have been inverted from their default white fill - with the filter CSS property. Captions and controls have additional Sass - variables that customize the color and background-color. -

- - - - slide 1 - -
First slide label
-

Some representative placeholder content for the first slide.

- - - - slide 2 - -
Second slide label
-

Some representative placeholder content for the first slide.

- - - - slide 3 - -
Third slide label
-

Some representative placeholder content for the first slide.

- - - - - - - - - ) -} - -export default Carousels diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js deleted file mode 100644 index ef148d3..0000000 --- a/src/views/base/collapses/Collapses.js +++ /dev/null @@ -1,129 +0,0 @@ -import React, { useState } from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Collapses = () => { - const [visible, setVisible] = useState(false) - const [visibleHorizontal, setVisibleHorizontal] = useState(false) - const [visibleA, setVisibleA] = useState(false) - const [visibleB, setVisibleB] = useState(false) - - return ( - - - - - - - - React Collapse - - -

You can use a link or a button component.

- - { - e.preventDefault() - setVisible(!visible) - }} - > - Link - - setVisible(!visible)}>Button - - - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry - richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes - anderson cred nesciunt sapiente ea proident. - - - - - - - - - - - React Collapse Horizontal - - -

You can use a link or a button component.

- - setVisibleHorizontal(!visibleHorizontal)} - aria-expanded={visibleHorizontal} - aria-controls="collapseWidthExample" - > - Button - -
- - - - This is some placeholder content for a horizontal collapse. It's hidden by - default and shown when triggered. - - - -
- - - - - - - - React Collapse multi target - - -

- A <CButton> can show and hide multiple elements. -

- - setVisibleA(!visibleA)}>Toggle first element - setVisibleB(!visibleB)}>Toggle second element - { - setVisibleA(!visibleA) - setVisibleB(!visibleB) - }} - > - Toggle both elements - - - - - - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry - richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes - anderson cred nesciunt sapiente ea proident. - - - - - - - - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry - richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes - anderson cred nesciunt sapiente ea proident. - - - - - - - - - - - ) -} - -export default Collapses diff --git a/src/views/base/index.js b/src/views/base/index.js deleted file mode 100644 index 2b7656c..0000000 --- a/src/views/base/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import Breadcrumbs from './Breadcrumbs' -import Cards from './Cards' -import Carousels from './Carousels' -import Collapses from './Collapses' -import Dropdowns from './Dropdowns' -import Jumbotrons from './Jumbotrons' -import ListGroups from './ListGroups' -import Navbars from './Navbars' -import Navs from './Navs' -import Paginations from './Paginations' -import Popovers from './Popovers' -import ProgressBar from './ProgressBar' -import Tabs from './Tabs' -import Tooltips from './Tooltips' - -export { - Breadcrumbs, - Cards, - Carousels, - Collapses, - Dropdowns, - Jumbotrons, - ListGroups, - Navbars, - Navs, - Popovers, - ProgressBar, - Tabs, - Tooltips, - Paginations, -} diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js deleted file mode 100644 index 5606813..0000000 --- a/src/views/base/jumbotrons/Jumbotrons.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react' -import { DocsLink } from 'src/components' - -const Jumbotrons = () => { - return ( - <> - - - Jumbotron - - - - -

Custom jumbotron

-

- Using a series of utilities, you can create this jumbotron, just like the one in - previous versions of Bootstrap. Check out the examples below for how you can remix and - restyle it to your liking. -

- Example button - - - -
-

Change the background

-

- Swap the background-color utility and add a `.text-*` color utility to mix up the - jumbotron look. Then, mix and match with additional component themes and more. -

- - DocsExample button - -
- - -
-

Add borders

-

- Or, keep it light and add a border for some added definition to the boundaries of - your content. Be sure to look under the hood at the source HTML here as we've - adjusted the alignment and sizing of both column's content for equal-height. -

- - DocsExample button - -
- - - - - - ) -} - -export default Jumbotrons diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js deleted file mode 100644 index 282e40c..0000000 --- a/src/views/base/list-groups/ListGroups.js +++ /dev/null @@ -1,349 +0,0 @@ -import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CListGroup, - CListGroupItem, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const ListGroups = () => { - return ( - - - - - - - - React List Group Basic example - - -

- The default list group is an unordered list with items and the proper CSS classes. - Build upon it with the options that follow, or with your CSS as required. -

- - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - React List Group Active items - - -

- Add active boolean property to a <CListGroupItem> to - show the current active selection. -

- - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - React List Group Disabled items - - -

- Add disabled boolean property to a <CListGroupItem> to - make it appear disabled. -

- - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - React List Group Links and buttons - - -

- Use <a>s or <button>s to create{' '} - actionable list group items with hover, disabled, and active states by adding{' '} - component="a|button". We separate these pseudo-classes to ensure - list groups made of non-interactive elements (like <li>s or{' '} - <div> - s) don'tprovide a click or tap affordance. -

- - - - Cras justo odio - - - Dapibus ac facilisis in - - - Morbi leo risus - - - Porta ac consectetur ac - - - Vestibulum at eros - - - - - - - - - - React List Group Flush - - -

- Add flush boolean property to remove some borders and rounded corners to - render list group items edge-to-edge in a parent container (e.g., cards). -

- - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - React List Group Horizontal - - -

- Add layout="horizontal" to change the layout of list group items - from vertical to horizontal across all breakpoints. Alternatively, choose a responsive - variant .layout="horizontal-{sm | md | lg | xl | xxl}"{' '} - to make a list group horizontal starting at that breakpoint's{' '} - min-width. Currently{' '} - horizontal list groups cannot be combined with flush list groups. -

- - {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => ( - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - - ))} - - - - - - - - React List Group Contextual classes - - -

- Use contextual classes to style list items with a stateful background and color. -

- - - Dapibus ac facilisis in - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - -

- Contextual classes also work with <a>s or{' '} - <button>s. Note the addition of the hover styles here not present - in the previous example. Also supported is the active state; apply it to - indicate an active selection on a contextual list group item. -

- - - - Dapibus ac facilisis in - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - - - - - - - - React List Group With badges - - -

- Add badges to any list group item to show unread counts, activity, and more. -

- - - - Cras justo odio - - 14 - - - - Dapibus ac facilisis in - - 2 - - - - Morbi leo risus - - 1 - - - - - - - - - - - React List Group Custom content - - -

- Add nearly any HTML within, even for linked list groups like the one below, with the - help of flexbox utilities. -

- - - -
-
List group item heading
- 3 days ago -
-

- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

- Donec id elit non mi porta. - - -
-
List group item heading
- 3 days ago -
-

- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

- Donec id elit non mi porta. - - -
-
List group item heading
- 3 days ago -
-

- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

- Donec id elit non mi porta. - - - - - - - - - - React List Group Checkboxes and radios - - -

- Place CoreUI's checkboxes and radios within list group items and customize as - needed. -

- - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default ListGroups diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js deleted file mode 100644 index e8b9fd0..0000000 --- a/src/views/base/navbars/Navbars.js +++ /dev/null @@ -1,174 +0,0 @@ -import React, { useState } from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCollapse, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CForm, - CFormInput, - CImage, - CNavbar, - CNavbarNav, - CNavbarBrand, - CNavbarText, - CNavbarToggler, - CNavLink, - CDropdown, - CButton, -} from '@coreui/react' -import { DocsLink } from 'src/components' - -const CNavbars = () => { - const [visible, setVisible] = useState(false) - const [isOpenDropdown, setIsOpenDropdown] = useState(false) - const [navbarText, setNavbarText] = useState(false) - - return ( - <> - - - CNavbar - - - - - setVisible(!visible)} /> - NavbarBrand - - - Home - Link - - - - - - Search - - - - Lang - - EN - ES - RU - FA - - - - User - - Account - Settings - - - - - - - - - - CNavbar brand - - - - - CoreUI React - - - - - - - CNavbar text - - - { - setNavbarText(!navbarText) - }} - /> - NavbarBrand - - - Navbar text - - - - - - - - CNavbar dropdown - - - { - setIsOpenDropdown(!isOpenDropdown) - }} - /> - - - Home - Link - - Lang - - EN - ES - RU - FA - - - - User - - Account - Settings - - - - - - - - - - CNavbar form - - - - - - Search - - - - - - - - CNavbar input group - - - - - - - - - - ) -} - -export default CNavbars diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js deleted file mode 100644 index 5beadd0..0000000 --- a/src/views/base/navs/Navs.js +++ /dev/null @@ -1,400 +0,0 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Navs = () => { - return ( - - - - - - - - React Navs Base navs - - -

- The base .nav component is built with flexbox and provide a strong - foundation for building all types of navigation components. It includes some style - overrides (for working with lists), some link padding for larger hit areas, and basic - disabled styling. -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

- Classes are used throughout, so your markup can be super flexible. Use{' '} - <ul>s like above, <ol> if the order of your - items is important, or roll your own with a <nav> element. Because - the .nav uses display: flex, the nav links behave the same as nav items would, but - without the extra markup. -

- - - - Active - - Link - Link - - Disabled - - - - - - - - - - React Navs Horizontal alignment - - -

- Change the horizontal alignment of your nav with{' '} - - flexbox utilities - - . By default, navs are left-aligned, but you can easily change them to center or right - aligned. -

-

- Centered with .justify-content-center: -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

- Right-aligned with .justify-content-end: -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - - - - - - - - React Navs Vertical - - -

- Stack your navigation by changing the flex item direction with the{' '} - .flex-column utility. Need to stack them on some viewports but not - others? Use the responsive versions (e.g., .flex-sm-column). -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - - - - - - - - React Navs Tabs - - -

- Takes the basic nav from above and adds the variant="tabs" class - to generate a tabbed interface -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - - - - - - - - React Navs Pills - - -

- Take that same HTML, but use variant="pills" instead: -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - - - - - - - - React Navs Fill and justify - - -

- Force your .nav's contents to extend the full available width one of - two modifier classes. To proportionately fill all available space with your{' '} - .nav-items, use layout="fill". Notice that all - horizontal space is occupied, but not every nav item has the same width. -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

- For equal-width elements, use layout="justified". All horizontal - space will be occupied by nav links, but unlike the .nav-fill above, every nav item - will be the same width. -

- - - - - Active - - - - Link - - - Link - - - - Disabled - - - - - - - - - - - React Navs Working with flex utilities - - -

- If you need responsive nav variations, consider using a series of{' '} - flexbox utilities. While more - verbose, these utilities offer greater customization across responsive breakpoints. In - the example below, our nav will be stacked on the lowest breakpoint, then adapt to a - horizontal layout that fills the available width starting from the small breakpoint. -

- - - - Active - - Link - Link - - Disabled - - - - - - - - - - React Navs Tabs with dropdowns - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - - - - - - - - - React Navs Pills with dropdowns - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - - - - - - - ) -} - -export default Navs diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js deleted file mode 100644 index cf14e0a..0000000 --- a/src/views/base/paginations/Paginations.js +++ /dev/null @@ -1,177 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CPagination, - CPaginationItem, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Paginations = () => { - return ( - - - - - - - - React Pagination - - -

- We use a large block of connected links for our pagination, making links hard to miss - and easily scalable—all while providing large hit areas. Pagination is built with list - HTML elements so screen readers can announce the number of available links. Use a - wrapping <nav> element to identify it as a navigation section to - screen readers and other assistive technologies. -

-

- In addition, as pages likely have more than one such navigation section, it's - advisable to provide a descriptive aria-label for the{' '} - <nav> to reflect its purpose. For example, if the pagination - component is used to navigate between a set of search results, an appropriate label - could be aria-label="Search results pages". -

- - - Previous - 1 - 2 - 3 - Next - - - - - - - - - React Pagination Working with icons - - -

- Looking to use an icon or symbol in place of text for some pagination links? Be sure - to provide proper screen reader support with aria attributes. -

- - - - - - 1 - 2 - 3 - - - - - - - - - - - - React Pagination Disabled and active states - - -

- Pagination links are customizable for different circumstances. Use{' '} - disabled for links that appear un-clickable and .active to - indicate the current page. -

-

- While the disabled prop uses pointer-events: none to{' '} - try to disable the link functionality of <a>s, that CSS - property is not yet standardized and doesn'taccount for keyboard navigation. As - such, we always add tabindex="-1" on disabled links and use - custom JavaScript to fully disable their functionality. -

- - - - - - 1 - 2 - 3 - - - - - - - - - - - - React Pagination Sizing - - -

- Fancy larger or smaller pagination? Add size="lg" or{' '} - size="sm" for additional sizes. -

- - - Previous - 1 - 2 - 3 - Next - - - - - Previous - 1 - 2 - 3 - Next - - - - - - - - - React Pagination Alignment - - -

- Change the alignment of pagination components with{' '} - flexbox utilities. -

- - - Previous - 1 - 2 - 3 - Next - - - - - Previous - 1 - 2 - 3 - Next - - - - - - - ) -} - -export default Paginations diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js deleted file mode 100644 index 99c88b7..0000000 --- a/src/views/base/placeholders/Placeholders.js +++ /dev/null @@ -1,196 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCardImage, - CCardText, - CCardTitle, - CCol, - CPlaceholder, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -import ReactImg from 'src/assets/images/react.jpg' - -const Placeholders = () => { - return ( - - - - - - - - React Placeholder - - -

- In the example below, we take a typical card component and recreate it with - placeholders applied to create a "loading card". Size and proportions are the - same between the two. -

- -
- - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - Go somewhere - - - - - Placeholder - - - - - - - - - - - - - - - - -
- - - - - - React Placeholder - - -

- Create placeholders with the <CPlaceholder> component and a grid - column propx (e.g., xs={6}) to set the width. They can - replace the text inside an element or be added as a modifier class to an existing - component. -

- - - - - - - - - React Placeholder Width - - -

- You can change the width through grid column classes, width utilities, or - inline styles. -

- - - - - - - - - - React Placeholder Color - - -

- By default, the <CPlaceholder> uses currentColor. This - can be overridden with a custom color or utility class. -

- - - - - - - - - - - - - - - - - React Placeholder Sizing - - -

- The size of <CPlaceholder>s are based on the typographic style of - the parent element. Customize them with size prop: lg,{' '} - sm, or xs. -

- - - - - - - - - - - React Placeholder Animation - - -

- Animate placeholders with animation="glow" or{' '} - animation="wave" to better convey the perception of something - being actively loaded. -

- - - - - - - - - - - - - - ) -} - -export default Placeholders diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js deleted file mode 100644 index 277f546..0000000 --- a/src/views/base/popovers/Popovers.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Popovers = () => { - return ( - - - - - - - - React Popover Basic example - - - - - - Click to toggle popover - - - - - - - - - - React Popover Four directions - - -

- Four options are available: top, right, bottom, and left aligned. Directions are - mirrored when using CoreUI for React in RTL. -

- - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - - - - - - - ) -} - -export default Popovers diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js deleted file mode 100644 index 07cd7d2..0000000 --- a/src/views/base/progress/Progress.js +++ /dev/null @@ -1,189 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Progress = () => { - return ( - - - - - - - - React Progress Basic example - - -

- Progress components are built with two HTML elements, some CSS to set the width, and a - few attributes. We don'tuse{' '} - - the HTML5 <progress> element - - , ensuring you can stack progress bars, animate them, and place text labels over them. -

- - - - - - - - - - - - - - - - - - - - - - - - React Progress Labels - - -

- Add labels to your progress bars by placing text within the{' '} - <CProgressBar>. -

- - - 25% - - - - - - - - - React Progress Height - - -

- We only set a height value on the <CProgress>, so if - you change that value the inner <CProgressBar> will automatically - resize accordingly. -

- - - - - - - - - - - - - - - React Progress Backgrounds - - -

- Use color prop to change the appearance of individual progress bars. -

- - - - - - - - - - - - - - - - - - - - - React Progress Multiple bars - - -

- Include multiple progress bars in a progress component if you need. -

- - - - - - - - - - - - - - React Progress Striped - - -

- Add variant="striped" to any <CProgressBar> to - apply a stripe via CSS gradient over the progress bar's background color. -

- - - - - - - - - - - - - - - - - - - - - React Progress Animated stripes - - -

- The striped gradient can also be animated. Add animated property to{' '} - <CProgressBar> to animate the stripes right to left via CSS3 - animations. -

- - - - - - - - - - - - - - - - - - - ) -} - -export default Progress diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js deleted file mode 100644 index 8833aa7..0000000 --- a/src/views/base/spinners/Spinners.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Accordion = () => { - return ( - - - - - - - - React Spinner Border - - -

- Use the border spinners for a lightweight loading indicator. -

- - - -

- The border spinner uses currentColor for its border-color. - You can use any of our text color utilities on the standard spinner. -

- - - - - - - - - - - - - - - - - React Spinner Growing - - -

- If you don'tfancy a border spinner, switch to the grow spinner. While it - doesn't technically spin, it does repeatedly grow! -

- - - -

- Once again, this spinner is built with currentColor, so you can easily - change its appearance. Here it is in blue, along with the supported variants. -

- - - - - - - - - - - - - - - - - React Spinner Size - - -

- Add size="sm" property to make a smaller spinner that can quickly - be used within other components. -

- - - - - - - - - - - React Spinner Buttons - - -

- Use spinners within buttons to indicate an action is currently processing or taking - place. You may also swap the text out of the spinner element and utilize button text - as needed. -

- - - - - - - - - - - - - - - - - ) -} - -export default Accordion diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js deleted file mode 100644 index 5799751..0000000 --- a/src/views/base/tables/Tables.js +++ /dev/null @@ -1,989 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Tables = () => { - return ( - - - - - - - - React Table Basic example - - -

- Using the most basic table CoreUI, here's how <CTable>-based - tables look in CoreUI. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Variants - - -

- Use contextual classes to color tables, table rows or individual cells. -

- - - - - Class - Heading - Heading - - - - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell - - - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell - - - Light - Cell - Cell - - - Dark - Cell - Cell - - - - - - - - - - - React Table Striped rows - - -

- Use striped property to add zebra-striping to any table row within the{' '} - <CTableBody>. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

- These classes can also be added to table variants: -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Hoverable rows - - -

- Use hover property to enable a hover state on table rows within a{' '} - <CTableBody>. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Active tables - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - - - React Table Bordered tables - - -

- Add bordered property for borders on all sides of the table and cells. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

- - Border color utilities - {' '} - can be added to change colors: -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Tables without borders - - -

- Add borderless property for a table without borders. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Small tables - - -

- Add small property to make any <CTable> more compact - by cutting all cell padding in half. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Vertical alignment - - -

- Table cells of <CTableHead> are always vertical aligned to the - bottom. Table cells in <CTableBody> inherit their alignment from{' '} - <CTable> and are aligned to the the top by default. Use the align - property to re-align where needed. -

- - - - - - Heading 1 - - - Heading 2 - - - Heading 3 - - - Heading 4 - - - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - This cell is aligned to the top. - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - - - - - - - - React Table Nesting - - -

- Border styles, active styles, and table variants are not inherited by nested tables. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - - - - - Header - Header - Header - - - - - A - First - Last - - - B - First - Last - - - C - First - Last - - - - - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Table head - - -

- Similar to tables and dark tables, use the modifier prop{' '} - color="light" or color="dark" to make{' '} - <CTableHead>s appear light or dark gray. -

- - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - - - React Table Table foot - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - Footer - Footer - Footer - Footer - - - - - - - - - - - React Table Captions - - -

- A <CTableCaption> functions like a heading for a table. It helps - users with screen readers to find a table and understand what it's about and - decide if they want to read it. -

- - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - -

- You can also put the <CTableCaption> on the top of the table with{' '} - caption="top". -

- - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - - - - - ) -} - -export default Tables diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js deleted file mode 100644 index de6020b..0000000 --- a/src/views/base/tooltips/Tooltips.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Tooltips = () => { - return ( - - - - - - - - React Tooltip Basic example - - -

- Hover over the links below to see tooltips: -

- -

- Tight pants next level keffiyeh - - you probably - - haven'theard of them. Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit - american apparel - - have a - - terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo - thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s - cleanse vegan chambray. A really ironic artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

- -

- Hover over the buttons below to see the four tooltips directions: top, right, bottom, - and left. Directions are mirrored when using CoreUI in RTL. -

- - - Tooltip on top - - - Tooltip on right - - - Tooltip on bottom - - - Tooltip on left - - - - - - - ) -} - -export default Tooltips diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js deleted file mode 100644 index c6aeb54..0000000 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ /dev/null @@ -1,442 +0,0 @@ -import React from 'react' -import { - CButton, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CButtonGroup, - CButtonToolbar, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const ButtonGroups = () => { - return ( - - - - - - - - React Button Group Basic example - - -

- Wrap a series of <CButton> components in{' '} - <CButtonGroup>.{' '} -

- - - Left - Middle - Right - - -

- These classes can also be added to groups of links, as an alternative to the{' '} - <CNav> components. -

- - - - Active link - - - Link - - - Link - - - - - - - - - - React Button Group Mixed styles - - - - - Left - Middle - Right - - - - - - - - - React Button Group Outlined styles - - - - - - Left - - - Middle - - - Right - - - - - - - - - - React Button Group Checkbox and radio button groups - - -

- Combine button-like checkbox and radio toggle buttons into a seamless looking button - group. -

- - - - - - - - - - - - - - - - - - - - - React Button Group Button toolbar - - -

- Join sets of button groups into button toolbars for more complicated components. Use - utility classes as needed to space out groups, buttons, and more. -

- - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - - -

- Feel free to combine input groups with button groups in your toolbars. Similar to the - example above, you’ll likely need some utilities through to space items correctly. -

- - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - - - - - - - React Button Group Sizing - - -

- Alternatively, of implementing button sizing classes to each button in a group, set{' '} - size property to all <CButtonGroup>'s, including - each one when nesting multiple groups. -

- - - - Left - - - Middle - - - Right - - -
- - - Left - - - Middle - - - Right - - -
- - - Left - - - Middle - - - Right - - - - - - - - - - React Button Group Nesting - - -

- Put a <CButtonGroup> inside another{' '} - <CButtonGroup> when you need dropdown menus combined with a series - of buttons. -

- - - 1 - 2 - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Button Group Vertical variation - - -

- Create a set of buttons that appear vertically stacked rather than horizontally.{' '} - Split button dropdowns are not supported here. -

- - - Button - Button - Button - Button - Button - Button - Button - - - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - - - - - - ) -} - -export default ButtonGroups diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js deleted file mode 100644 index d7b9e74..0000000 --- a/src/views/buttons/buttons/Buttons.js +++ /dev/null @@ -1,404 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilBell } from '@coreui/icons' -import { DocsCallout, DocsExample } from 'src/components' - -const Buttons = () => { - return ( - - - - - - - - React Button - - -

- CoreUI includes a bunch of predefined buttons components, each serving its own - semantic purpose. Buttons show what action will happen when the user clicks or touches - it. CoreUI buttons are used to initialize operations, both in the background or - foreground of an experience. -

- - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - Link - - - ))} - - - - - - - - React Button with icons - - -

- You can combine button with our CoreUI Icons. -

- - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - Link - - - - ))} - - - - - - - - React Button Button components - - -

- The <CButton> component are designed for{' '} - <button> , <a> or <input>{' '} - elements (though some browsers may apply a slightly different rendering). -

-

- If you're using <CButton> component as <a>{' '} - elements that are used to trigger functionality ex. collapsing content, these links - should be given a role="button" to adequately communicate their - meaning to assistive technologies such as screen readers. -

- - - Link - - - Button - - - - - - - - - - - - React Button outline - - -

- If you need a button, but without the strong background colors. Set{' '} - variant="outline" prop to remove all background colors. -

- - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} - - - - - - - - React Button ghost - - -

- If you need a ghost variant of button, set variant="ghost" prop - to remove all background colors. -

- - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} - - - - - - - - React Button Sizes - - -

- Larger or smaller buttons? Add size="lg" or{' '} - size="sm" for additional sizes. -

- - - Large button - - - Large button - - - - - Small button - - - Small button - - - - - - - - - React Button Pill - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Square - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Disabled state - - -

- Add the disabled boolean prop to any <CButton>{' '} - component to make buttons look inactive. Disabled button has{' '} - pointer-events: none applied to, disabling hover and active states from - triggering. -

- - - Primary button - - - Button - - -

- Disabled buttons using the <a> component act a little different: -

-

- <a>s don'tsupport the disabled attribute, so - CoreUI has to add .disabled className to make buttons look inactive. - CoreUI also has to add to the disabled button component{' '} - aria-disabled="true" attribute to show the state of the component - to assistive technologies. -

- - - Primary link - - - Link - - - - - - - - - React Button Block buttons - - -

- Create buttons that span the full width of a parent—by using utilities. -

- -
- Button - Button -
- -

- Here we create a responsive variation, starting with vertically stacked buttons until - the md breakpoint, where .d-md-block replaces the{' '} - .d-grid class, thus nullifying the gap-2 utility. Resize - your browser to see them change. -

- -
- Button - Button -
- -

- You can adjust the width of your block buttons with grid column width classes. For - example, for a half-width "block button", use .col-6. Center it - horizontally with .mx-auto, too. -

- -
- Button - Button -
- -

- Additional utilities can be used to adjust the alignment of buttons when horizontal. - Here we've taken our previous responsive example and added some flex utilities and - a margin utility on the button to right align the buttons when they're no longer - stacked. -

- -
- - Button - - Button -
- - - - - - ) -} - -export default Buttons diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js deleted file mode 100644 index bc68895..0000000 --- a/src/views/buttons/dropdowns/Dropdowns.js +++ /dev/null @@ -1,341 +0,0 @@ -import React from 'react' -import { - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Dropdowns = () => { - return ( - - - - - - - - React Dropdown Single button - - -

- Here's how you can put them to work with either <button>{' '} - elements: -

- - - Dropdown button - - Action - Another action - Something else here - - - -

- The best part is you can do this with any button variant, too: -

- - <> - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - Action - Another action - Something else here - - Separated link - - - ), - )} - - - - - - - - - React Dropdown Split button - - -

- Similarly, create split button dropdowns with virtually the same markup as single - button dropdowns, but with the addition of boolean prop split for proper - spacing around the dropdown caret. -

-

- We use this extra class to reduce the horizontal padding on either side - of the caret by 25% and remove the margin-left that's attached for - normal button dropdowns. Those additional changes hold the caret centered in the split - button and implement a more properly sized hit area next to the main button. -

- - <> - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - - Action - Another action - Something else here - - Separated link - - - ), - )} - - - - - - - - - React Dropdown Sizing - - -

- Button dropdowns work with buttons of all sizes, including default and split dropdown - buttons. -

- - - - Large button - - - Action - Another action - Something else here - - Separated link - - - - - Large split button - - - - Action - Another action - Something else here - - Separated link - - - - - - - Small button - - - Action - Another action - Something else here - - Separated link - - - - - Small split button - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - React Dropdown Single button - - -

- Opt into darker dropdowns to match a dark navbar or custom style by set{' '} - dark property. No changes are required to the dropdown items. -

- - - Dropdown button - - Action - Another action - Something else here - - Separated link - - - -

And putting it to use in a navbar:

- - - - - - - - - - React Dropdown Dropup - - -

- Trigger dropdown menus above elements by adding{' '} - direction="dropup" to the <CDropdown>{' '} - component. -

- - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - React Dropdown Dropright - - -

- Trigger dropdown menus at the right of the elements by adding{' '} - direction="dropend" to the <CDropdown>{' '} - component. -

- - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - React Dropdown Dropleft - - -

- Trigger dropdown menus at the left of the elements by adding{' '} - direction="dropstart" to the <CDropdown>{' '} - component. -

- - - - - - Action - Another action - Something else here - - Separated link - - - Small split button - - - - - - - ) -} - -export default Dropdowns diff --git a/src/views/buttons/index.js b/src/views/buttons/index.js deleted file mode 100644 index 6634d15..0000000 --- a/src/views/buttons/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import ButtonDropdowns from './ButtonDropdowns' -import ButtonGroups from './ButtonGroups' -import Buttons from './Buttons' - -export { ButtonDropdowns, ButtonGroups, Buttons } diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js deleted file mode 100644 index a9e13f1..0000000 --- a/src/views/charts/Charts.js +++ /dev/null @@ -1,176 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' -import { - CChartBar, - CChartDoughnut, - CChartLine, - CChartPie, - CChartPolarArea, - CChartRadar, -} from '@coreui/react-chartjs' -import { DocsCallout } from 'src/components' - -const Charts = () => { - const random = () => Math.round(Math.random() * 100) - - return ( - - - - - - - Bar Chart - - - - - - - - Line Chart - - - - - - - - Doughnut Chart - - - - - - - - Pie Chart - - - - - - - - Polar Area Chart - - - - - - - - Radar Chart - - - - - - - ) -} - -export default Charts diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 234b2fd..eae717a 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,55 +1,6 @@ import React, { lazy } from 'react' -import { - CAvatar, - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardFooter, - CCardHeader, - CCol, - CProgress, - CRow, - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle, hexToRgba } from '@coreui/utils' -import CIcon from '@coreui/icons-react' -import { - cibCcAmex, - cibCcApplePay, - cibCcMastercard, - cibCcPaypal, - cibCcStripe, - cibCcVisa, - cibGoogle, - cibFacebook, - cibLinkedin, - cifBr, - cifEs, - cifFr, - cifIn, - cifPl, - cifUs, - cibTwitter, - cilCloudDownload, - cilPeople, - cilUser, - cilUserFemale, -} from '@coreui/icons' -import avatar1 from 'src/assets/images/avatars/1.jpg' -import avatar2 from 'src/assets/images/avatars/2.jpg' -import avatar3 from 'src/assets/images/avatars/3.jpg' -import avatar4 from 'src/assets/images/avatars/4.jpg' -import avatar5 from 'src/assets/images/avatars/5.jpg' -import avatar6 from 'src/assets/images/avatars/6.jpg' const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js')) @@ -59,403 +10,12 @@ const Dashboard = () => { return Math.floor(Math.random() * (max - min + 1) + min) } - const progressExample = [ - { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' }, - { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' }, - { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' }, - { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' }, - { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' }, - ] - const progressGroupExample1 = [ - { title: 'Monday', value1: 34, value2: 78 }, - { title: 'Tuesday', value1: 56, value2: 94 }, - { title: 'Wednesday', value1: 12, value2: 67 }, - { title: 'Thursday', value1: 43, value2: 91 }, - { title: 'Friday', value1: 22, value2: 73 }, - { title: 'Saturday', value1: 53, value2: 82 }, - { title: 'Sunday', value1: 9, value2: 69 }, - ] - - const progressGroupExample2 = [ - { title: 'Male', icon: cilUser, value: 53 }, - { title: 'Female', icon: cilUserFemale, value: 43 }, - ] - - const progressGroupExample3 = [ - { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' }, - { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' }, - { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' }, - { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' }, - ] - - const tableExample = [ - { - avatar: { src: avatar1, status: 'success' }, - user: { - name: 'Yiorgos Avraamu', - new: true, - registered: 'Jan 1, 2021', - }, - country: { name: 'USA', flag: cifUs }, - usage: { - value: 50, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'success', - }, - payment: { name: 'Mastercard', icon: cibCcMastercard }, - activity: '10 sec ago', - }, - { - avatar: { src: avatar2, status: 'danger' }, - user: { - name: 'Avram Tarasios', - new: false, - registered: 'Jan 1, 2021', - }, - country: { name: 'Brazil', flag: cifBr }, - usage: { - value: 22, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'info', - }, - payment: { name: 'Visa', icon: cibCcVisa }, - activity: '5 minutes ago', - }, - { - avatar: { src: avatar3, status: 'warning' }, - user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' }, - country: { name: 'India', flag: cifIn }, - usage: { - value: 74, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'warning', - }, - payment: { name: 'Stripe', icon: cibCcStripe }, - activity: '1 hour ago', - }, - { - avatar: { src: avatar4, status: 'secondary' }, - user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' }, - country: { name: 'France', flag: cifFr }, - usage: { - value: 98, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'danger', - }, - payment: { name: 'PayPal', icon: cibCcPaypal }, - activity: 'Last month', - }, - { - avatar: { src: avatar5, status: 'success' }, - user: { - name: 'Agapetus Tadeáš', - new: true, - registered: 'Jan 1, 2021', - }, - country: { name: 'Spain', flag: cifEs }, - usage: { - value: 22, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'primary', - }, - payment: { name: 'Google Wallet', icon: cibCcApplePay }, - activity: 'Last week', - }, - { - avatar: { src: avatar6, status: 'danger' }, - user: { - name: 'Friderik Dávid', - new: true, - registered: 'Jan 1, 2021', - }, - country: { name: 'Poland', flag: cifPl }, - usage: { - value: 43, - period: 'Jun 11, 2021 - Jul 10, 2021', - color: 'success', - }, - payment: { name: 'Amex', icon: cibCcAmex }, - activity: 'Last week', - }, - ] return ( <> - {/* - - - -

- Traffic -

-
January - July 2021
- - - - - - - {['Day', 'Month', 'Year'].map((value) => ( - - {value} - - ))} - - - - - - - - {progressExample.map((item, index) => ( - -
{item.title}
- - {item.value} ({item.percent}%) - - - - ))} - - - */} - {/* */} - - {/* - - - Traffic {' & '} Sales - - - - - -
-
New Clients
-
9,123
-
- - -
-
Recurring Clients
-
22,643
-
- - - -
- {progressGroupExample1.map((item, index) => ( -
-
- {item.title} -
-
- - -
-
- ))} - - - - - -
-
Pageviews
-
78,623
-
- - -
-
Organic
-
49,123
-
- - - -
- - {progressGroupExample2.map((item, index) => ( -
-
- - {item.title} - {item.value}% -
-
- -
-
- ))} - -
- - {progressGroupExample3.map((item, index) => ( -
-
- - {item.title} - - {item.value}{' '} - ({item.percent}%) - -
-
- -
-
- ))} - - - -
- - - - - - - - User - Country - Usage - Payment Method - Activity - - - - {tableExample.map((item, index) => ( - - - - - -
{item.user.name}
-
- {item.user.new ? 'New' : 'Recurring'} | Registered:{' '} - {item.user.registered} -
- - - - - -
-
- {item.usage.value}% -
-
- {item.usage.period} -
-
- - - - - - -
Last login
- {item.activity} - - - ))} - - - - - - */} ) } diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js deleted file mode 100644 index 84dcd63..0000000 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ /dev/null @@ -1,395 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const ChecksRadios = () => { - return ( - - - - - - - - React Checkbox - - - - - - - - - - - - - React Checkbox Disabled - - -

- Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

- - - - - - - - - - - React Radio - - -

- Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

- - - - - - - - - - - React Radio Disabled - - - - - - - - - - - - - React Switches - - -

- A switch has the markup of a custom checkbox but uses the switch boolean - properly to render a toggle switch. Switches also support the disabled{' '} - attribute. -

- - - - - - - - - - - - - React Switches Sizes - - - - - - - - - - - - - - React Checks and Radios Default layout (stacked) - - -

- By default, any number of checkboxes and radios that are immediate sibling will be - vertically stacked and appropriately spaced. -

- - - - - - - - - - - - - - - - React Checks and Radios Inline - - -

- Group checkboxes or radios on the same horizontal row by adding inline{' '} - boolean property to any <CFormCheck>. -

- - - - - - - - - - - - - - - - - React Checks and Radios Without labels - - -

- Remember to still provide some form of accessible name for assistive technologies (for - instance, using aria-label). -

- -
- -
-
- -
- - - - - - - - Toggle buttons - - -

- Create button-like checkboxes and radio buttons by using button boolean - property on the <CFormCheck> component. These toggle buttons can - further be grouped in a button group if needed. -

- - - - - - - - - -

Radio toggle buttons

- - - - - - -

Outlined styles

-

- Different variants of button, such at the various outlined styles, are supported. -

- -
- -
-
- -
-
- - -
- - - - - - ) -} - -export default ChecksRadios diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js deleted file mode 100644 index 1acafb4..0000000 --- a/src/views/forms/floating-labels/FloatingLabels.js +++ /dev/null @@ -1,173 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CFormInput, - CFormLabel, - CFormFloating, - CFormSelect, - CFormTextarea, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const FloatingLabels = () => { - return ( - - - - - - - - React Floating labels - - -

- Wrap a pair of <CFormInput> and <CFormLabel>{' '} - elements in CFormFloating to enable floating labels with textual form - fields. A placeholder is required on each <CFormInput>{' '} - as our method of CSS-only floating labels uses the :placeholder-shown{' '} - pseudo-element. Also note that the <CFormInput> must come first so - we can utilize a sibling selector (e.g., ~). -

- - - - Email address - - - - Password - - -

- When there's a value already defined, <CFormLabel> - s will automatically adjust to their floated position. -

- - - - Input with value - - - - - - - - - React Floating labels Textareas - - -

- By default, <CFormTextarea>s will be the same height as{' '} - <CFormInput>s. -

- - - - Comments - - -

- To set a custom height on your <CFormTextarea;>, do not use the{' '} - rows attribute. Instead, set an explicit height (either - inline or via custom CSS). -

- - - - Comments - - - - - - - - - React Floating labels Selects - - -

- Other than <CFormInput>, floating labels are only available on{' '} - <CFormSelect>s. They work in the same way, but unlike{' '} - <CFormInput>s, they'll always show the{' '} - <CFormLabel> in its floated state.{' '} - - Selects with size and multiple are not supported. - -

- - - - - - - - - Works with selects - - - - - - - - - React Floating labels Layout - - -

- When working with the CoreUI for Bootstrap grid system, be sure to place form elements - within column classes. -

- - - - - - Email address - - - - - - - - - - - Works with selects - - - - - - - - - ) -} - -export default FloatingLabels diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js deleted file mode 100644 index b064bff..0000000 --- a/src/views/forms/form-control/FormControl.js +++ /dev/null @@ -1,251 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormInput, - CFormLabel, - CFormTextarea, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const FormControl = () => { - return ( - - - - - - - - React Form Control - - - - -
- Email address - -
-
- Example textarea - -
- - - - - - - - - React Form Control Sizing - - -

- Set heights using size property like size="lg" and{' '} - size="sm". -

- - -
- -
- - - - - - - - - React Form Control Disabled - - -

- Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

- - -
- -
- - - - - - - - React Form Control Readonly - - -

- Add the readOnly boolean attribute on an input to prevent modification of - the input's value. Read-only inputs appear lighter (just like disabled inputs), - but retain the standard cursor. -

- - - - - - - - - - React Form Control Readonly plain text - - -

- If you want to have <input readonly> elements in your form styled - as plain text, use the plainText boolean property to remove the default - form field styling and preserve the correct margin and padding. -

- - - - Email - -
- -
- - - - Password - -
- -
- - - - -
- - Email - - -
-
- - Password - - -
-
- - Confirm identity - -
- - - - - - - - - React Form Control File input - - - -
- Default file input example - -
-
- Multiple files input example - -
-
- Disabled file input example - -
-
- Small file input example - -
-
- Large file input example - -
- - - - - - - - React Form Control Color - - - - Color picker - - - - - - - ) -} - -export default FormControl diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js deleted file mode 100644 index 427714a..0000000 --- a/src/views/forms/input-group/InputGroup.js +++ /dev/null @@ -1,506 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Select = () => { - return ( - - - - - - - - React Input group Basic example - - -

- Place one add-on or button on either side of an input. You may also place one on both - sides of an input. Remember to place <CFormLabel>s outside the - input group. -

- - - @ - - - - - @example.com - - Your vanity URL - - https://example.com/users/ - - - - $ - - .00 - - - - @ - - - - With textarea - - - - - - - - - - React Input group Wrapping - - -

- Input groups wrap by default via flex-wrap: wrap in order to accommodate - custom form field validation within an input group. You may disable this with{' '} - .flex-nowrap. -

- - - @ - - - - - - - - - - React Input group Sizing - - -

- Add the relative form sizing classes to the <CInputGroup> itself - and contents within will automatically resize—no need for repeating the form control - size classes on each element. -

-

- Sizing on the individual input group elements isn'tsupported. -

- - - Small - - - - Default - - - - Large - - - - - - - - - - React Input group Checkboxes and radios - - -

- Place any checkbox or radio option within an input group's addon instead of text. -

- - - - - - - - - - - - - - - - - - - - - React Input group Multiple inputs - - -

- While multiple <CFormInput>s are supported visually, validation - styles are only available for input groups with a single{' '} - <CFormInput>. -

- - - First and last name - - - - - - - - - - - React Input group Multiple addons - - -

- Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

- - - $ - 0.00 - - - - - $ - 0.00 - - - - - - - - - React Input group Button addons - - -

- Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

- - - - Button - - - - - - - Button - - - - - Button - - - Button - - - - - - - Button - - - Button - - - - - - - - - - React Input group Buttons with dropdowns - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Segmented buttons - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Custom select - - - - - - Options - - - - - - - - - - - - - - - - - Options - - - - - Button - - - - - - - - - - - - - - - - - Button - - - - - - - - - - React Input group Custom file input - - - - - - Upload - - - - - - - Upload - - - - - Button - - - - - - - Button - - - - - - - - ) -} - -export default Select diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js deleted file mode 100644 index 27bae19..0000000 --- a/src/views/forms/layout/Layout.js +++ /dev/null @@ -1,414 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsExample } from 'src/components' - -const Layout = () => { - return ( - - - - - Layout Form grid - - -

- More complex forms can be built using our grid classes. Use these for form layouts - that require multiple columns, varied widths, and additional alignment options. -

- - - - - - - - - - - - - - - - - Layout Gutters - - -

- By adding gutter modifier classes - , you can have control over the gutter width in as well the inline as block direction. -

- - - - - - - - - - -

- More complex layouts can also be created with the grid system. -

- - - - Email - - - - Password - - - - Address - - - - Address 2 - - - - City - - - - State - - - - - - - Zip - - - - - - - Sign in - - - - - - - - - - Layout Horizontal form - - -

- Create horizontal forms with the grid by adding the .row class to form - groups and using the .col-*-* classes to specify the width of your labels - and controls. Be sure to add .col-form-label to your{' '} - <CFormLabel>s as well so they're vertically centered with their - associated form controls. -

-

- At times, you maybe need to use margin or padding utilities to create that perfect - alignment you need. For example, we've removed the padding-top on our - stacked radio inputs label to better align the text baseline. -

- - - - - Email - - - - - - - - Password - - - - - -
- Radios - - - - - -
- -
- -
- - Sign in - - - - - - - - - Layout Horizontal form label sizing - - -

- Be sure to use .col-form-label-sm or .col-form-label-lg to - your <CFormLabel>s or <legend>s to correctly - follow the size of .form-control-lg and .form-control-sm. -

- - - - Email - - - - - - - - Email - - - - - - - - Email - - - - - - - - - - - - - Layout Column sizing - - -

- As shown in the previous examples, our grid system allows you to place any number of{' '} - <CCol>s within a <CRow>. They'll split the - available width equally between them. You may also pick a subset of your columns to - take up more or less space, while the remaining <CCol>s equally - split the rest, with specific column classes like{' '} - <CCol sm="7">. -

- - - - - - - - - - - - - - - - - - - - Layout Auto-sizing - - -

- The example below uses a flexbox utility to vertically center the contents and changes{' '} - <CCol> to <CCol xs="auto"> so that your - columns only take up as much space as needed. Put another way, the column sizes itself - based on the contents. -

- - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - Submit - - - -

- You can then remix that once again with size-specific column classes. -

- - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - Submit - - - - - - - - - - Layout Inline forms - - -

- Use the <CCol xs="auto"> class to create horizontal - layouts. By adding{' '} - gutter modifier classes, we will - have gutters in horizontal and vertical directions. The{' '} - .align-items-center aligns the form elements to the middle, making the{' '} - <CFormCheck> align properly. -

- - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - Submit - - - - - - - - ) -} - -export default Layout diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js deleted file mode 100644 index 0cdb5b6..0000000 --- a/src/views/forms/range/Range.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Range = () => { - return ( - - - - - - - - React Range - - -

- Create custom <input type="range"> controls with{' '} - <CFormRange>. -

- - Example range - - - - - - - - - React Range Disabled - - -

- Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

- - Disabled range - - - - - - - - - React Range Min and max - - -

- Range inputs have implicit values for min and max— - 0 and 100, respectively. You may specify new values for - those using the min and max attributes. -

- - Example range - - - - - - - - - React Range Steps - - -

- By default, range inputs "snap" to integer values. To change this, you can - specify a step value. In the example below, we double the number of steps - by using step="0.5". -

- - Example range - - - - - - - ) -} - -export default Range diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js deleted file mode 100644 index eccf1c1..0000000 --- a/src/views/forms/select/Select.js +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Select = () => { - return ( - - - - - - - - React Select Default - - - - - - - - - - - - - - - - - React Select Sizing - - -

- You may also choose from small and large custom selects to match our similarly sized - text inputs. -

- - - - - - - - - - - - - - -

- The multiple attribute is also supported: -

- - - - - - - - -

- As is the htmlSize property: -

- - - - - - - - - - - - - - - React Select Disabled - - -

- Add the disabled boolean attribute on a select to give it a grayed out - appearance and remove pointer events. -

- - - - - - - - - - - - - ) -} - -export default Select diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js deleted file mode 100644 index 160fa95..0000000 --- a/src/views/forms/validation/Validation.js +++ /dev/null @@ -1,506 +0,0 @@ -import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormFeedback, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const CustomStyles = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - -const BrowserDefaults = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - -const Tooltips = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - - ) -} - -const Validation = () => { - return ( - - - - - - - - Validation Custom styles - - -

- For custom CoreUI form validation messages, you'll need to add the{' '} - noValidate boolean property to your <CForm>. This - disables the browser default feedback tooltips, but still provides access to the form - validation APIs in JavaScript. Try to submit the form below; our JavaScript will - intercept the submit button and relay feedback to you. When attempting to submit, - you'll see the :invalid and :valid styles applied to - your form controls. -

-

- Custom feedback styles apply custom colors, borders, focus styles, and background - icons to better communicate feedback.{' '} -

- {CustomStyles()} - - - - - - - Validation Browser defaults - - -

- Not interested in custom validation feedback messages or writing JavaScript to change - form behaviors? All good, you can use the browser defaults. Try submitting the form - below. Depending on your browser and OS, you'll see a slightly different style of - feedback. -

-

- While these feedback styles cannot be styled with CSS, you can still customize the - feedback text through JavaScript. -

- {BrowserDefaults()} - - - - - - - Validation Server side - - -

- We recommend using client-side validation, but in case you require server-side - validation, you can indicate invalid and valid form fields with invalid{' '} - and valid boolean properties. -

-

- For invalid fields, ensure that the invalid feedback/error message is associated with - the relevant form field using aria-describedby (noting that this - attribute allows more than one id to be referenced, in case the field - already points to additional form text). -

- - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - - - - - - - - Validation Supported elements - - -

- Validation styles are available for the following form controls and components: -

-
    -
  • - <CFormInput>s -
    • -
  • - <CFormSelect>s -
    • -
  • - <CFormCheck>s -
    • -
- - -
- - Textarea - - - Please enter a message in the textarea. -
- - Example invalid feedback text - - - - - More example invalid feedback text - -
- - - - - - - Example invalid select feedback -
- -
- - Example invalid form file feedback -
- -
- - Submit form - -
- - - - - - - - - Validation Tooltips - - -

- If your form layout allows it, you can swap the text for the tooltip to display - validation feedback in a styled tooltip. Be sure to have a parent with{' '} - position: relative on it for tooltip positioning. In the example below, - our column classes have this already, but your project may require an alternative - setup. -

- {Tooltips()} - - - - - ) -} - -export default Validation diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js deleted file mode 100644 index d44e81d..0000000 --- a/src/views/icons/brands/Brands.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { brandSet } from '@coreui/icons' -import { DocsCallout } from 'src/components' - -const toKebabCase = (str) => { - return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() -} - -export const getIconsView = (iconset) => { - return Object.entries(iconset).map(([name, value]) => ( - - -
{toKebabCase(name)}
- - )) -} - -const CoreUIIcons = () => { - return ( - <> - - - Brand Icons - - {getIconsView(brandSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js deleted file mode 100644 index d0a5969..0000000 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { freeSet } from '@coreui/icons' -import { getIconsView } from '../brands/Brands.js' -import { DocsCallout } from 'src/components' - -const CoreUIIcons = () => { - return ( - <> - - - Free Icons - - {getIconsView(freeSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js deleted file mode 100644 index a1179df..0000000 --- a/src/views/icons/flags/Flags.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { getIconsView } from '../brands/Brands.js' -import { flagSet } from '@coreui/icons' -import { DocsCallout } from 'src/components' - -const CoreUIIcons = () => { - return ( - <> - - - Flag Icons - - {getIconsView(flagSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/icons/index.js b/src/views/icons/index.js deleted file mode 100644 index 92db64e..0000000 --- a/src/views/icons/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import CoreUIIcons from './coreui-icons' -import Flags from './flags' -import Brands from './brands' - -export { CoreUIIcons, Flags, Brands } diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js deleted file mode 100644 index 7cb442c..0000000 --- a/src/views/notifications/alerts/Alerts.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react' -import { - CAlert, - CAlertHeading, - CAlertLink, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Alerts = () => { - return ( - - - - - - - - React Alert - - -

- React Alert is prepared for any length of text, as well as an optional close button. - For a styling, use one of the required contextual color{' '} - props (e.g., primary). For inline dismissal, use the{' '} - - dismissing prop - - . -

- - A simple primary alert—check it out! - A simple secondary alert—check it out! - A simple success alert—check it out! - A simple danger alert—check it out! - A simple warning alert—check it out! - A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! - - - - - - - - React Alert Link color - - -

- Use the <CAlertLink> component to immediately give matching colored - links inside any alert. -

- - - A simple primary alert with an example link. Give - it a click if you like. - - - A simple secondary alert with an example link. - Give it a click if you like. - - - A simple success alert with an example link. Give - it a click if you like. - - - A simple danger alert with an example link. Give - it a click if you like. - - - A simple warning alert with an example link. Give - it a click if you like. - - - A simple info alert with an example link. Give it - a click if you like. - - - A simple light alert with an example link. Give it - a click if you like. - - - A simple dark alert with an example link. Give it - a click if you like. - - - - - - - - - React Alert Additional content - - -

- Alert can also incorporate supplementary components & elements like heading, - paragraph, and divider. -

- - - Well done! -

- Aww yeah, you successfully read this important alert message. This example text is - going to run a bit longer so that you can see how spacing within an alert works - with this kind of content. -

-
-

- Whenever you need to, be sure to use margin utilities to keep things nice and - tidy. -

- - - - - - - - - React Alert Dismissing - - -

- Alerts can also be easily dismissed. Just add the dismissible prop. -

- - { - alert('👋 Well, hi there! Thanks for dismissing me.') - }} - > - Go right ahead and click that dimiss over there on the right. - - - - - - - ) -} - -export default Alerts diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js deleted file mode 100644 index f8d4c0d..0000000 --- a/src/views/notifications/badges/Badges.js +++ /dev/null @@ -1,125 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const Badges = () => { - return ( - - - - - - - - React Badges Dismissing - - -

- Bootstrap badge scale to suit the size of the parent element by using relative font - sizing and em units. -

- -

- Example heading New -

-

- Example heading New -

-

- Example heading New -

-

- Example heading New -

-
- Example heading New -
-
- Example heading New -
- -

- Badges can be used as part of links or buttons to provide a counter. -

- - - Notifications 4 - - -

- Remark that depending on how you use them, badges may be complicated for users of - screen readers and related assistive technologies. -

-

- Unless the context is clear, consider including additional context with a visually - hidden piece of additional text. -

- - - Profile 9 - unread messages - - - - - - - - - React Badges Contextual variations - - -

- Add any of the below-mentioned color props to modify the presentation of - a badge. -

- - primary - success - danger - warning - info - light - dark - - - - - - React Badges Pill badges - - -

- Apply the shape="rounded-pill" prop to make badges rounded. -

- - - primary - - - success - - - danger - - - warning - - - info - - - light - - - dark - - - - - - - ) -} - -export default Badges diff --git a/src/views/notifications/index.js b/src/views/notifications/index.js deleted file mode 100644 index 08e31cd..0000000 --- a/src/views/notifications/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import Alerts from './Alerts' -import Badges from './Badges' -import Modals from './Modals' -import Toaster from './toasts' - -export { Alerts, Badges, Modals, Toaster } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js deleted file mode 100644 index 4d58288..0000000 --- a/src/views/notifications/modals/Modals.js +++ /dev/null @@ -1,723 +0,0 @@ -import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CPopover, - CRow, - CTooltip, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const LiveDemo = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)}> - - Modal title - - Woohoo, you're reading this text in a modal! - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const StaticBackdrop = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch static backdrop modal - setVisible(false)}> - - Modal title - - - I will not close if you click outside me. Don'teven try to press escape key. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const ScrollingLongContent = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)}> - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const ScrollingLongContent2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)}> - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const VerticallyCentered = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Vertically centered modal - setVisible(false)}> - - Modal title - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const VerticallyCentered2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Vertically centered scrollable modal - setVisible(false)}> - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const TooltipsPopovers = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)}> - - Modal title - - -
Popover in a modal
-

- This - - button - {' '} - triggers a popover on click. -

-
-
Tooltips in a modal
-

- - This link - {' '} - and - - that link - {' '} - have tooltips on hover. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const OptionalSizes = () => { - const [visibleXL, setVisibleXL] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - return ( - <> - setVisibleXL(!visibleXL)}>Extra large modal - setVisibleLg(!visibleLg)}>Large modal - setVisibleSm(!visibleSm)}>Small large modal - setVisibleXL(false)}> - - Extra large modal - - ... - - setVisibleLg(false)}> - - Large modal - - ... - - setVisibleSm(false)}> - - Small modal - - ... - - - ) -} - -const FullscreenModal = () => { - const [visible, setVisible] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - const [visibleMd, setVisibleMd] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleXL, setVisibleXL] = useState(false) - const [visibleXXL, setVisibleXXL] = useState(false) - - return ( - <> - setVisible(!visible)}>Full screen - setVisibleSm(!visibleSm)}>Full screen below sm - setVisibleMd(!visibleMd)}>Full screen below md - setVisibleLg(!visibleLg)}>Full screen below lg - setVisibleXL(!visibleXL)}>Full screen below xl - setVisibleXXL(!visibleXXL)}>Full screen below xxl - setVisible(false)}> - - Full screen - - ... - - setVisibleSm(false)}> - - Full screen below sm - - ... - - setVisibleMd(false)}> - - Full screen below md - - ... - - setVisibleLg(false)}> - - Full screen below lg - - ... - - setVisibleXL(false)}> - - Full screen below xl - - ... - - setVisibleXXL(false)}> - - Full screen below xxl - - ... - - - ) -} - -const Modals = () => { - return ( - - - - - - - - React Modal - - -

- Below is a static modal example (meaning its position and{' '} - display have been overridden). Included are the modal header, modal body - (required for padding), and modal footer (optional). We ask that you - include modal headers with dismiss actions whenever possible, or provide another - explicit dismiss action. -

- - - - Modal title - - Modal body text goes here. - - Close - Save changes - - - - - - - - - - React Modal Live demo - - -

- Toggle a working modal demo by clicking the button below. It will slide down and fade - in from the top of the page. -

- {LiveDemo()} - - - - - - - React Modal Static backdrop - - -

- If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

- {StaticBackdrop()} - - - - - - - React Modal Scrolling long content - - -

- If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

- - {ScrollingLongContent()} - -

- You can also create a scrollable modal that allows scroll the modal body by adding{' '} - scrollable prop. -

- - {ScrollingLongContent2()} - - - - - - - - React Modal Vertically centered - - -

- Add alignment="center" to <CModal> to - vertically center the modal. -

- - {VerticallyCentered()} - - - {VerticallyCentered2()} - - - - - - - - React Modal Tooltips and popovers - - -

- <CTooltips> and <CPopovers> can be placed within - modals as needed. When modals are closed, any tooltips and popovers within are also - automatically dismissed. -

- - {TooltipsPopovers()} - - - - - - - - React Modal Optional sizes - - -

- Modals have three optional sizes, available via modifier classes to be placed on a{' '} - <CModal>. These sizes kick in at certain breakpoints to avoid - horizontal scrollbars on narrower viewports. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeProperty sizeModal max-width
Small - 'sm' - - 300px -
DefaultNone - 500px -
Large - 'lg' - - 800px -
Extra large - 'xl' - - 1140px -
- {OptionalSizes()} - - - - - - - React Modal Fullscreen Modal - - -

- Another override is the option to pop up a modal that covers the user viewport, - available via property fullscrean. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Property fullscreanAvailability
- true - Always
- 'sm' - - Below 576px -
- 'md' - - Below 768px -
- 'lg' - - Below 992px -
- 'xl' - - Below 1200px -
- 'xxl' - - Below 1400px -
- {FullscreenModal()} - - - - - ) -} - -export default Modals diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js deleted file mode 100644 index 50489ce..0000000 --- a/src/views/notifications/toasts/Toasts.js +++ /dev/null @@ -1,255 +0,0 @@ -import React, { useRef, useState } from 'react' -import { - CCard, - CCardHeader, - CCardBody, - CButton, - CRow, - CCol, - CToast, - CToastBody, - CToastClose, - CToastHeader, - CToaster, -} from '@coreui/react' -import { DocsCallout, DocsExample } from 'src/components' - -const ExampleToast = () => { - const [toast, addToast] = useState(0) - const toaster = useRef() - const exampleToast = ( - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - ) - return ( - <> - addToast(exampleToast)}>Send a toast - - - ) -} - -const Toasts = () => { - return ( - - - - - - - - React Toast Basic - - -

- Toasts are as flexible as you need and have very little required markup. At a minimum, - we require a single element to contain your “toasted” content and strongly encourage a - dismiss button. -

- - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - {ExampleToast()} - - - - - - - React Toast Translucent - - -

- Toasts are slightly translucent to blend in with what's below them. -

- -
- - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - -
- - - - - - - - React Toast Stacking - - -

- You can stack toasts by wrapping them in a toast container, which will vertically add - some spacing. -

- - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - - - - - - - - React Toast Custom content - - -

- Customize your toasts by removing sub-components, tweaking them with{' '} - utilities, or by adding your - own markup. Here we've created a simpler toast by removing the default{' '} - <CToastHeader>, adding a custom hide icon from{' '} - CoreUI Icons, and using some{' '} - flexbox utilities to adjust - the layout. -

- - -
- Hello, world! This is a toast message. - -
- - -

- Alternatively, you can also add additional controls and components to toasts. -

- - - - Hello, world! This is a toast message. -
- - Take action - - - Close - -
- - - - - - - - - - React Toast Custom content - - -

- Building on the above example, you can create different toast color schemes with our{' '} - color and{' '} - background utilities. - Here we've set color="primary" and added{' '} - .text-white class to the <Ctoast>, and then set{' '} - white property to our close button. For a crisp edge, we remove the - default border with .border-0. -

- - -
- Hello, world! This is a toast message. - -
- - - - - - - ) -} - -export default Toasts diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Change_password.js similarity index 61% rename from src/views/pages/register/Register.js rename to src/views/pages/register/Change_password.js index 104c5c1..a386109 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Change_password.js @@ -19,24 +19,29 @@ import Swal from 'sweetalert2' import { useHistory } from 'react-router-dom' const Register = () => { - const { token } = isAutheticated() - const [password, setPassword] = useState({ - oldPassword: "", - newPassword: "", - cpassword: '' - }); + const [oldPassword, setOldPassword] = useState(); + const [newPassword, setNewPassword] = useState(); + const [confirmPassword, setConfirmPassword] = useState(); const history = useHistory(); - const handleChange = (e) => (event) => { - setPassword({ ...password, [e]: event.target.value }); - }; + + + const handleSubmit = async () => { - if (password.cpassword !== password.newPassword) { - let res = await axios.put('/owner/changePassword', password, { + const token = localStorage.getItem("authToken") + //console.log(token) + if (newPassword == confirmPassword) { + let res = await axios.put('/api/user/update/password', + { + oldPassword + , newPassword, + confirmPassword + }, { headers: { - Authorization: `Bearer ${token}` + Authorization: `Bearer ${token}`, } }) - if (res.statusText === 'OK') { + console.log(res) + if (res) { Swal.fire({ title: 'Done', text: 'Password Changed', @@ -45,7 +50,7 @@ const Register = () => { confirmButtonColor: '#303c54', iconColor: '#303c54' }).then(() => { - history.push('/profile') + history.push('/dashboard') }); } @@ -56,26 +61,20 @@ const Register = () => { } return ( -
+
- + - + -

Change Password

- {/*

Create your account

*/} - {/* - - - - - */} +

Change Password

+ - + setOldPassword(e.target.value)} /> @@ -84,8 +83,8 @@ const Register = () => { setNewPassword(e.target.value)} /> @@ -95,12 +94,11 @@ const Register = () => { setConfirmPassword(e.target.value)} />
- handleSubmit()}>Submit + Submit
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js deleted file mode 100644 index 9e51a98..0000000 --- a/src/views/theme/colors/Colors.js +++ /dev/null @@ -1,91 +0,0 @@ -import PropTypes from 'prop-types' -import React, { useEffect, useState, createRef } from 'react' -import classNames from 'classnames' -import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react' -import { rgbToHex } from '@coreui/utils' -import { DocsLink } from 'src/components' - -const ThemeView = () => { - const [color, setColor] = useState('rgb(255, 255, 255)') - const ref = createRef() - - useEffect(() => { - const el = ref.current.parentNode.firstChild - const varColor = window.getComputedStyle(el).getPropertyValue('background-color') - setColor(varColor) - }, [ref]) - - return ( - - - - - - - - - - - -
HEX:{rgbToHex(color)}
RGB:{color}
- ) -} - -const ThemeColor = ({ className, children }) => { - const classes = classNames(className, 'theme-color w-75 rounded mb-3') - return ( - -
- {children} - - - ) -} - -ThemeColor.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -} - -const Colors = () => { - return ( - <> - - - Theme colors - - - - - -
Brand Primary Color
- - -
Brand Secondary Color
- - -
Brand Success Color
- - -
Brand Danger Color
- - -
Brand Warning Color
- - -
Brand Info Color
- - -
Brand Light Color
- - -
Brand Dark Color
- - - - - - ) -} - -export default Colors diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js deleted file mode 100644 index 1cae4f6..0000000 --- a/src/views/theme/typography/Typography.js +++ /dev/null @@ -1,229 +0,0 @@ -import React from 'react' -import { CCard, CCardHeader, CCardBody } from '@coreui/react' -import { DocsLink } from 'src/components' - -const Typography = () => { - return ( - <> - - - Headings - - - -

- Documentation and examples for Bootstrap typography, including global settings, - headings, body text, lists, and more. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeadingExample
-

- <h1></h1> -

- 		- h1. Bootstrap heading -
-

- <h2></h2> -

- 		- h2. Bootstrap heading -
-

- <h3></h3> -

- 		- h3. Bootstrap heading -
-

- <h4></h4> -

- 		- h4. Bootstrap heading -
-

- <h5></h5> -

- 		- h5. Bootstrap heading -
-

- <h6></h6> -

- 		- h6. Bootstrap heading -
- - - - Headings - -

- .h1 through - .h6 - classes are also available, for when you want to match the font styling of a heading but - cannot use the associated HTML element. -

-
-

h1. Bootstrap heading

-

h2. Bootstrap heading

-

h3. Bootstrap heading

-

h4. Bootstrap heading

-

h5. Bootstrap heading

-

h6. Bootstrap heading

-
- - - -
Display headings
-
-

- Traditional heading elements are designed to work best in the meat of your page content. - When you need a heading to stand out, consider using a display heading - —a larger, slightly more opinionated heading style. -

-
- - - - - - - - - - - - - - - -
- Display 1 -
- Display 2 -
- Display 3 -
- Display 4 -
-
-
- - - Inline text elements - -

- Traditional heading elements are designed to work best in the meat of your page content. - When you need a heading to stand out, consider using a display heading - —a larger, slightly more opinionated heading style. -

-
-

- You can use the mark tag to highlight text. -

-

- This line of text is meant to be treated as deleted text. -

-

- This line of text is meant to be treated as no longer accurate. -

-

- This line of text is meant to be treated as an addition to the document. -

-

- This line of text will render as underlined -

-

- This line of text is meant to be treated as fine print. -

-

- This line rendered as bold text. -

-

- This line rendered as italicized text. -

-
- - - - Description list alignment - -

- Align terms and descriptions horizontally by using our grid system’s predefined classes - (or semantic mixins). For longer terms, you can optionally add a{' '} - .text-truncate class to truncate the text - with an ellipsis. -

-
-
-
Description lists
-
A description list is perfect for defining terms.
- -
Euismod
-
-

- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. -

-

Donec id elit non mi porta gravida at eget metus.

-
- -
Malesuada porta
-
Etiam porta sem malesuada magna mollis euismod.
- -
Truncated term is truncated
-
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit amet risus. -
- -
Nesting
-
-
-
Nested definition list
-
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. -
-
-
-
-
- - - - ) -} - -export default Typography