From 1064b3c5055e649ac57af51388dbc7c1a9782041 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Fri, 28 Oct 2022 15:17:20 +0530 Subject: [PATCH] self directory --- src/App.js | 2 +- src/_nav.js | 4 +- src/views/Banners/AddBanner.js | 64 +++++++------- src/views/Banners/Banner.js | 10 +-- src/views/Banners/EditBanner.js | 107 +++++++++++++++--------- src/views/Banners/ViewBanner.js | 6 +- src/views/Category/Category.js | 2 +- src/views/Category/EditCategory.js | 61 ++++++++++++-- src/views/Directory/Bisuness.js | 16 +++- src/views/Directory/EditBisuness.js | 2 +- src/views/Directory/Pagination.js | 25 ++++++ src/views/Feedback/feedback.js | 4 +- src/views/Requirement/Pagination.js | 25 ++++++ src/views/Requirement/Requirement.js | 24 +++++- src/views/Requirement/RequirementOpt.js | 7 +- 15 files changed, 259 insertions(+), 100 deletions(-) create mode 100644 src/views/Directory/Pagination.js create mode 100644 src/views/Requirement/Pagination.js diff --git a/src/App.js b/src/App.js index 3aaec53..f6b5c2b 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,7 @@ const App = () => { setUserData(false) } else { try { - console.log('requesting user data from server') + // console.log('requesting user data from server') let response = await axios.get(`/api/v1/user/details`, { headers: { Authorization: `Bearer ${token}`, diff --git a/src/_nav.js b/src/_nav.js index 646006f..a39d9f1 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -32,7 +32,7 @@ const _nav = [ { component: CNavItem, - name: 'Category', + name: 'Categories', icon: , to: '/category', }, @@ -63,7 +63,7 @@ const _nav = [ { component: CNavItem, - name: 'Banners', + name: 'Home Page Banners', icon: , to: '/banner', }, diff --git a/src/views/Banners/AddBanner.js b/src/views/Banners/AddBanner.js index a8570e7..f35091c 100644 --- a/src/views/Banners/AddBanner.js +++ b/src/views/Banners/AddBanner.js @@ -27,12 +27,12 @@ const AddBanner = () => { const [image, setImage] = useState(""); const [title, setTitle] = useState(""); const [subTitle, setSubTitle] = useState(""); - const [section, setSection] = useState(""); + // const [section, setSection] = useState(""); const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date()); - const [subSection, setSubSection] = useState(""); - const [category, setCategory] = useState(false); + // const [subSection, setSubSection] = useState(""); + // const [category, setCategory] = useState(false); @@ -42,16 +42,16 @@ const AddBanner = () => { const handleSubmit = async () => { - if (!(title && subTitle && image && section && subSection && startDate && endDate)) { + if (!(title && image && startDate && endDate)) { return swal('Error!', 'All fields are required', 'error') } const myForm = new FormData(); myForm.set("title", title); - myForm.set("subTitle", subTitle); - myForm.set("section", section); - myForm.set("subSection", subSection); + // myForm.set("subTitle", subTitle); + // myForm.set("section", section); + // myForm.set("subSection", subSection); myForm.set("startDate", startDate); myForm.set("endDate", endDate); myForm.set("image", image); @@ -94,25 +94,25 @@ const AddBanner = () => { }; - useEffect(() => { - const getData = async () => { - let res = await axios.get( - `/api/category/getAll`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - console.log(res.data) - setCategory(res.data.category) - } - if (section === "category") { - getData() - } else { - setCategory(false) - } - }, [section]) + // useEffect(() => { + // const getData = async () => { + // let res = await axios.get( + // `/api/category/getAll`, + // { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + // } + // ); + // // console.log(res.data) + // setCategory(res.data.category) + // } + // if (section === "category") { + // getData() + // } else { + // setCategory(false) + // } + // }, [section]) return ( <> @@ -136,7 +136,7 @@ const AddBanner = () => { value={title} placeholder="Title" /> - + {/* @@ -145,9 +145,9 @@ const AddBanner = () => { onChange={(e) => setSubTitle(e.target.value)} value={subTitle} placeholder="sub title" /> - + */} - + {/* Section @@ -167,7 +167,7 @@ const AddBanner = () => { - {/* */} + @@ -187,11 +187,11 @@ const AddBanner = () => { ))} - {/* */} + } - + */} Start Date* diff --git a/src/views/Banners/Banner.js b/src/views/Banners/Banner.js index cd3e0c2..d667491 100644 --- a/src/views/Banners/Banner.js +++ b/src/views/Banners/Banner.js @@ -69,7 +69,7 @@ function banner() {
-

CMP-BANNER

+

Home Page Banners

{/*
    @@ -97,8 +97,8 @@ function banner() { Title Image - Section - Sub Section + {/* Section + Sub Section */} Status Added On Action @@ -112,8 +112,8 @@ function banner() { - {item?.section} - {item?.subSection} + {/* {item?.section} + {item?.subSection} */} new Date() ? "success" : "danger" diff --git a/src/views/Banners/EditBanner.js b/src/views/Banners/EditBanner.js index d2c7106..413fb45 100644 --- a/src/views/Banners/EditBanner.js +++ b/src/views/Banners/EditBanner.js @@ -29,14 +29,16 @@ const EditBanner = () => { let history = useHistory(); const [image, setImage] = useState(""); const [title, setTitle] = useState(""); - const [subTitle, setSubTitle] = useState(""); - const [section, setSection] = useState(""); + // const [subTitle, setSubTitle] = useState(""); + const [imagesPreview, setImagesPreview] = useState(); + + // const [section, setSection] = useState(""); const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); - const [subSection, setSubSection] = useState(""); - const [category, setCategory] = useState(false); + // const [subSection, setSubSection] = useState(""); + // const [category, setCategory] = useState(false); const [loading, setLoading] = useState(false); //fetch one Offer @@ -46,28 +48,29 @@ const EditBanner = () => { Authorization: `Bearer ${token}`, }, }); - // console.log(res.data.banner) + // console.log(res.data.banner.startDate) setTitle(res.data.banner.title) - setSubTitle(res.data.banner.subTitle) - setSection(res.data.banner.section) - setSubSection(res.data.banner.subSection) - setStartDate(new Date(res.data.banner.startDate).toLocaleDateString()) - setEndDate(new Date(res.data.banner.endDate).toLocaleDateString()) + // setSubTitle(res.data.banner.subTitle) + // setSection(res.data.banner.section) + // setSubSection(res.data.banner.subSection) + setImagesPreview(res.data.banner.image.url) + setStartDate(res.data.banner.startDate) + setEndDate(res.data.banner.endDate) }, [id]); const handleSubmit = async () => { - if (!(title && subTitle && image && section && subSection && startDate && endDate)) { + if (!(title && startDate && endDate)) { return swal('Error!', 'All fields are required', 'error') } const myForm = new FormData(); myForm.set("title", title); - myForm.set("subTitle", subTitle); - myForm.set("section", section); - myForm.set("subSection", subSection); + // myForm.set("subTitle", subTitle); + // myForm.set("section", section); + // myForm.set("subSection", subSection); myForm.set("startDate", startDate); myForm.set("endDate", endDate); myForm.set("image", image); @@ -97,13 +100,31 @@ const EditBanner = () => { }; + // const handleImage = (e) => { + // const files = e.target.files[0]; + // // console.log(files) + // setImage(files); + + // }; + // // const handleImage = (e) => { const files = e.target.files[0]; + // console.log(files) setImage(files); + // only for file preview------------------------------------ + const Reader = new FileReader(); + Reader.readAsDataURL(files); + Reader.onload = () => { + if (Reader.readyState === 2) { + setImagesPreview(Reader.result); + } + }; + + + // ----------------------------------------------------------------------------- }; - // const onCancel = () => { // window.location = "/comproducts"; history.goBack() @@ -111,25 +132,25 @@ const EditBanner = () => { }; - useEffect(() => { - const getData = async () => { - let res = await axios.get( - `/api/category/getAll`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - console.log(res.data) - setCategory(res.data.category) - } - if (section === "category") { - getData() - } else { - setCategory(false) - } - }, [section]) + // useEffect(() => { + // const getData = async () => { + // let res = await axios.get( + // `/api/category/getAll`, + // { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + // } + // ); + // console.log(res.data) + // setCategory(res.data.category) + // } + // if (section === "category") { + // getData() + // } else { + // setCategory(false) + // } + // }, [section]) return ( <> @@ -153,7 +174,7 @@ const EditBanner = () => { value={title} placeholder="Title" /> - + {/* @@ -162,9 +183,9 @@ const EditBanner = () => { onChange={(e) => setSubTitle(e.target.value)} value={subTitle} placeholder="sub title" /> - + */} - + {/* @@ -183,7 +204,7 @@ const EditBanner = () => { - {/* */} + {category && <> @@ -202,11 +223,11 @@ const EditBanner = () => { ))} - {/* */} + } - + */} Start Date* @@ -258,6 +279,12 @@ const EditBanner = () => { /> +
    + + + {imagesPreview && Product Preview} + +
diff --git a/src/views/Banners/ViewBanner.js b/src/views/Banners/ViewBanner.js index 8a35a9e..e99542e 100644 --- a/src/views/Banners/ViewBanner.js +++ b/src/views/Banners/ViewBanner.js @@ -59,7 +59,7 @@ function ViewBanner() {
-

CMP-BANNER

+

Home Page Banner

{/*
    @@ -92,8 +92,8 @@ function ViewBanner() { Image - Section{banner?.section} - Sub Section{banner?.subSection} + {/* Section{banner?.section} + Sub Section{banner?.subSection} */} Start Date {new Date(`${banner?.startDate}`).toDateString()} diff --git a/src/views/Category/Category.js b/src/views/Category/Category.js index db65f7a..ff89ee4 100644 --- a/src/views/Category/Category.js +++ b/src/views/Category/Category.js @@ -96,7 +96,7 @@ function Products() {
    -

    CMP-Category

    +

    Categories

    {/*
      diff --git a/src/views/Category/EditCategory.js b/src/views/Category/EditCategory.js index 50e209a..7cdd65d 100644 --- a/src/views/Category/EditCategory.js +++ b/src/views/Category/EditCategory.js @@ -29,7 +29,9 @@ const AddProduct = () => { // console.log(id) const [image, setImage] = useState(""); const [name, setName] = useState(""); + const [imagesPreview, setImagesPreview] = useState(); const [ctegoryBannerImage, setCtegoryBannerImage] = useState(""); + const [ctegoryBannerImagePreview, setCtegoryBannerImagePreview] = useState(""); const [loading, setLoading] = useState(false); useEffect(async () => { @@ -39,7 +41,9 @@ const AddProduct = () => { }, }); - + // setImage(res.data.category.image.url) + setImagesPreview(res.data.category.image.url) + setCtegoryBannerImagePreview(res.data.category.category_banner.url) setName(res.data.category.name) }, [id]); @@ -83,10 +87,42 @@ const AddProduct = () => { } const handleImage = (e) => { const files = e.target.files[0]; + // console.log(files) setImage(files); + // only for file preview------------------------------------ + const Reader = new FileReader(); + Reader.readAsDataURL(files); + Reader.onload = () => { + if (Reader.readyState === 2) { + setImagesPreview(Reader.result); + } + }; + + + // ----------------------------------------------------------------------------- }; + const handleBannerImage = (e) => { + const files = e.target.files[0]; + + // console.log(files) + setCtegoryBannerImage(files); + // only for file preview------------------------------------ + const Reader = new FileReader(); + Reader.readAsDataURL(files); + + Reader.onload = () => { + if (Reader.readyState === 2) { + setCtegoryBannerImagePreview(Reader.result); + } + }; + + + // ----------------------------------------------------------------------------- + }; + + // const onCancel = () => { history.goBack() @@ -102,7 +138,7 @@ const AddProduct = () => { -

      Edit {name} Category

      +

      Edit Category

      @@ -118,7 +154,7 @@ const AddProduct = () => {
      category image *
      - + {/* */} @@ -132,8 +168,13 @@ const AddProduct = () => { /> +
      + + {imagesPreview && Product Preview} + +
      category Banner image *
      - + @@ -142,14 +183,22 @@ const AddProduct = () => { placeholder="image" accept="image/*" required - onChange={(e) => setCtegoryBannerImage(e.target.files[0])} + onChange={handleBannerImage} /> +
      + + {ctegoryBannerImagePreview && Product Preview} + +
      + + +
      -
      +
      + ) } diff --git a/src/views/Directory/EditBisuness.js b/src/views/Directory/EditBisuness.js index 227e68c..447f9bc 100644 --- a/src/views/Directory/EditBisuness.js +++ b/src/views/Directory/EditBisuness.js @@ -95,7 +95,7 @@ const EditBisuness = () => { const handleSubmit = async () => { if (!(state.name && state.phone && state.email && state.Building_Name && state.Street_Name && state.country && state.city && state.description - && state.category && state.status && image)) { + && state.category && state.status)) { return swal('Error!', 'All fields are required', 'error') } diff --git a/src/views/Directory/Pagination.js b/src/views/Directory/Pagination.js new file mode 100644 index 0000000..e2ce0f8 --- /dev/null +++ b/src/views/Directory/Pagination.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +const Pagination = ({ postsPerPage, totalPosts, paginate }) => { + const pageNumbers = []; + + for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) { + pageNumbers.push(i); + } + + return ( + + ); +}; + +export default Pagination; \ No newline at end of file diff --git a/src/views/Feedback/feedback.js b/src/views/Feedback/feedback.js index 9f305df..f4f1244 100644 --- a/src/views/Feedback/feedback.js +++ b/src/views/Feedback/feedback.js @@ -12,7 +12,7 @@ function feedback() { const [currentPage, setCurrentPage] = useState(1); - const [postsPerPage] = useState(10); + const [postsPerPage] = useState(20); const token = isAutheticated(); const getRestriction = useCallback(async () => { @@ -96,7 +96,7 @@ function feedback() { {currentPosts && currentPosts.map((item, index) => - + {item?.name} {item?.description} diff --git a/src/views/Requirement/Pagination.js b/src/views/Requirement/Pagination.js new file mode 100644 index 0000000..4df8d64 --- /dev/null +++ b/src/views/Requirement/Pagination.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +const Pagination = ({ postsPerPage, totalPosts, paginate }) => { + const pageNumbers = []; + + for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) { + pageNumbers.push(i); + } + + return ( + + ); +}; + +export default Pagination; \ No newline at end of file diff --git a/src/views/Requirement/Requirement.js b/src/views/Requirement/Requirement.js index b18cd86..6264d5d 100644 --- a/src/views/Requirement/Requirement.js +++ b/src/views/Requirement/Requirement.js @@ -5,11 +5,13 @@ import { Link } from "react-router-dom"; import swal from 'sweetalert'; // import { API } from "../../data"; import { isAutheticated } from "../../auth"; +import Pagination from "./Pagination"; import RequirementOpt from "./RequirementOpt"; function Requirement() { const [requirement, setRequirement] = useState([]) - + const [currentPage, setCurrentPage] = useState(1); + const [postsPerPage] = useState(20); const token = isAutheticated(); // console.log(token) const getRequirement = useCallback(async () => { @@ -29,6 +31,21 @@ function Requirement() { useEffect(() => { getRequirement(); }, [getRequirement]); + + + const indexOfLastPost = currentPage * postsPerPage; + const indexOfFirstPost = indexOfLastPost - postsPerPage; + const currentPosts = requirement.slice(indexOfFirstPost, indexOfLastPost); + + // Change page + const paginate = pageNumber => setCurrentPage(pageNumber); + + + + + + + const handleApprove = async (id) => { let status = window.confirm("Do you want to Approve"); if (!status) return; @@ -99,7 +116,7 @@ function Requirement() { - {requirement && requirement.map((item, index) => + {currentPosts && currentPosts.map((item, index) => )} @@ -115,6 +132,9 @@ function Requirement() {
      {/* */}
    +
    ); } diff --git a/src/views/Requirement/RequirementOpt.js b/src/views/Requirement/RequirementOpt.js index aa28b40..6552bdd 100644 --- a/src/views/Requirement/RequirementOpt.js +++ b/src/views/Requirement/RequirementOpt.js @@ -9,6 +9,7 @@ const RequirementOpt = ({ item, handleApprove }) => { const [user, setUser] = useState() const [approve, setApprove] = useState(false) const token = isAutheticated(); + useEffect(async () => { let resp = await axios.get( `/api/v1/admin/user/${item.addedBy}`, @@ -18,7 +19,7 @@ const RequirementOpt = ({ item, handleApprove }) => { }, } ); - // console.log(resp.data) + setUser(resp.data.user) ///approved @@ -36,7 +37,7 @@ const RequirementOpt = ({ item, handleApprove }) => { setApprove(false) } } catch (e) { - console.log(e) + setApprove(false) } } @@ -79,7 +80,7 @@ const RequirementOpt = ({ item, handleApprove }) => { {item?.areaOfInterest} - {user?.name} + {user && {user?.name}} {/* {item?.addedOn} */} {new Date(`${item?.createdAt}`).toDateString()} , {`${formatAMPM(item?.createdAt)}`}