diff --git a/package.json b/package.json index 57ba36c..4c6b5b4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "coreui_library_short_version": "4.1" }, "dependencies": { + "@ckeditor/ckeditor5-build-classic": "^35.2.1", + "@ckeditor/ckeditor5-react": "^5.0.2", "@coreui/chartjs": "^3.0.0", "@coreui/coreui": "^4.1.0", "@coreui/icons": "^2.1.0", diff --git a/src/index.js b/src/index.js index 05329e4..9318502 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ import store from './store' import axios from 'axios' const setupAxios = () => { - axios.defaults.baseURL = 'https://cms-api-dashboard.herokuapp.com/'; + axios.defaults.baseURL = 'https://cmp-all-api.herokuapp.com/' // axios.defaults.baseURL = 'http://localhost:5000' axios.defaults.headers = { 'Cache-Control': 'no-cache,no-store', diff --git a/src/routes.js b/src/routes.js index c5bbfe4..b877721 100644 --- a/src/routes.js +++ b/src/routes.js @@ -31,6 +31,7 @@ import EditBanner from './views/Banners/EditBanner' import AddBanner from './views/Banners/AddBanner' //cms import CMS from './views/CMS/cms' +import AddNewPageCms from './views/CMS/AddNewPageCms' import CMSView from './views/CMS/ViewCms' import CMSEdit from './views/CMS/EditCms' //cms @@ -98,10 +99,12 @@ const routes = [ { path: '/banner/edit/:id', name: 'EditBanner', component: EditBanner }, { path: '/banner', name: 'Banner', component: Banner }, //CMS + { path: '/cms/view/:id', name: 'CMS', component: CMSView }, { path: '/cms/edit/:id', name: 'CMS', component: CMSEdit }, + { path: '/cms/new', name: 'CMS New', component: AddNewPageCms }, { path: '/cms', name: 'CMS', component: CMS }, - //CMS + //feedback { path: '/feedback/view/:id', name: 'ViewFeedback', component: ViewFeedback }, { path: '/feedback', name: 'Feedback', component: Feedback }, //Requirement diff --git a/src/views/CMS/AddNewPageCms.js b/src/views/CMS/AddNewPageCms.js new file mode 100644 index 0000000..3d9abff --- /dev/null +++ b/src/views/CMS/AddNewPageCms.js @@ -0,0 +1,183 @@ + +import React, { useEffect, useState } from 'react' +import { CKEditor } from '@ckeditor/ckeditor5-react' + +import { Link, useHistory } from 'react-router-dom' +import { isAutheticated } from "../../auth"; +import swal from 'sweetalert' +import axios from 'axios' + +import ClassicEditor from '@ckeditor/ckeditor5-build-classic' + + +const AddNewPageCms = () => { + const token = isAutheticated() + const history = useHistory() + const [image, setImage] = useState() + const [data, setData] = useState({ + title: '', + page_data: '', + }) + const [loading, setLoading] = useState(false) + + const handleChange = (e) => { + + setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) + } + + const handleSubmit = async () => { + if (data.title.trim() === '' || data.page_data.trim() === '') { + swal({ + title: 'Warning', + text: 'Fill all mandatory fields', + icon: 'error', + button: 'Close', + dangerMode: true, + }) + return + } + setLoading(true) + const formData = new FormData() + formData.append('title', data.title) + formData.append('page_data', data.page_data) + formData.append('image', image) + try { + const res = await axios + .post(`/api/restriction/cms/create/`, formData, { + headers: { + 'Access-Control-Allow-Origin': '*', + Authorization: `Bearer ${token}`, + 'Content-Type': 'multipart/formdata', + }, + }) + if (res.data.success === true) { + + setLoading(false) + swal({ + title: 'Added', + text: 'Page added successfully!', + icon: 'success', + button: 'Return', + }) + history.goBack() + + } + } catch (error) { + const message = 'Something went wrong!' + setLoading(false) + swal({ + title: 'Warning', + text: message, + icon: 'error', + button: 'Retry', + dangerMode: true, + }) + } + } + + + return ( +
+
+
+
+
+ Add Page in CMS +
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ + Title + + + { + handleChange(e) + }} + /> +
+
+
Page data *
+
+
+ { + editor.editing.view.change((writer) => { + writer.setStyle('height', '200px', editor.editing.view.document.getRoot()) + }) + }} + data={data.page_data} + // config={{ + // extraPlugins: [MyCustomUploadAdapterPlugin], + // }} + placeholder='page data...' + onChange={(event, editor) => { + let e = { target: { value: editor.getData(), id: 'page_data' } } + handleChange(e) + }} + /> +
+
+ +
+
image *
+
+ setImage(e.target.files[0])} + /> + {/*

Upload videos, images and pdf only

*/} +
+
+
+
+
+
+ ) +} + +export default AddNewPageCms diff --git a/src/views/CMS/EditCms.js b/src/views/CMS/EditCms.js index ee8593f..6d8d412 100644 --- a/src/views/CMS/EditCms.js +++ b/src/views/CMS/EditCms.js @@ -1,131 +1,247 @@ -import axios from "axios"; -import React, { useEffect, useState, useCallback } from "react"; +import React, { useEffect, useState } from 'react' +import { CKEditor } from '@ckeditor/ckeditor5-react' + +import { Link, useHistory, useParams } from 'react-router-dom' import { isAutheticated } from "../../auth"; -import ClipLoader from "react-spinners/ClipLoader"; -import swal from 'sweetalert'; -import { Link, useParams } from "react-router-dom"; -import { useHistory } from "react-router-dom"; +import swal from 'sweetalert' +import axios from 'axios' + +import ClassicEditor from '@ckeditor/ckeditor5-build-classic' +import { useCallback } from 'react'; + + const EditCms = () => { const { id } = useParams() - const token = isAutheticated(); - // console.log(token, id) - let history = useHistory(); - const [state, setState] = useState({ - About_Us: "", - Terms_and_Conditions: "", - Privacy_Policy: "", - - loading: false, - - }); - const { loading } = state; - const changeState = (newState) => - setState((prevState) => ({ ...prevState, ...newState })); - + const token = isAutheticated() + const history = useHistory() + const [image, setImage] = useState() + const [imagesPreview, setImagesPreview] = useState(); + const [data, setData] = useState({ + title: '', + page_data: '', + }) + const [loading, setLoading] = useState(false) const handleChange = (e) => { - changeState({ ...state, [e.target.name]: e.target.value }) + setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) } - const fetchRestriction = useCallback(async () => { - const res = await axios.get(`/api/restriction/getOne/${id}`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); + const handleImage = (e) => { + const files = e.target.files[0]; + setImage(files); + // only for file preview------------------------------------ + const Reader = new FileReader(); + Reader.readAsDataURL(files); - // console.log(res.data.CmpRes) - setState(res.data.CmpRestriction) - changeState({ loading: false }); - if (res.status === 200) changeState({ ...res.data }); - }, [token]); + Reader.onload = () => { + if (Reader.readyState === 2) { + setImagesPreview(Reader.result); + } + }; + // ----------------------------------------------------------------------------- + }; + const getCms = useCallback(async () => { + + + let res = await axios.get( + `/api/restriction/getOne/${id}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + if (res.data.CmpRestriction) { + setData((prev) => ({ ...res.data.CmpRestriction })) + if (res.data.CmpRestriction.image) { + setImagesPreview(res.data.CmpRestriction.image.url) + } + + } + }, [token] + ) useEffect(() => { - fetchRestriction(); - }, [fetchRestriction]); - + getCms(); + }, []); const handleSubmit = async () => { - changeState({ loading: true }); + if (data.title.trim() === '' || data.page_data.trim() === '') { + swal({ + title: 'Warning', + text: 'Fill all mandatory fields', + icon: 'error', + button: 'Close', + dangerMode: true, + }) + return + } + setLoading(true) + const formData = new FormData() + formData.append('title', data.title) + formData.append('page_data', data.page_data) + formData.append('image', image) try { - let res = await axios.put( - `/api/restriction/update/${id}`, - { - ...state, - }, - { + const res = await axios + .put(`/api/restriction/cms/update/${id}`, formData, { headers: { + 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}`, + 'Content-Type': 'multipart/formdata', }, - } - ); - //if (res.status === 200) window.location.reload(); - // console.log(res.data) - // console.log(res.status == 200) - if (res.data.success == true) { - changeState({ loading: false }); - swal("Edit CMP-Condition successfully!"); + }) + if (res.data.success === true) { + + setLoading(false) + swal({ + title: 'Edited', + text: 'Page edited successfully!', + icon: 'success', + button: 'Return', + }) history.goBack() + } } catch (error) { - swal('Error!', error, 'error') - - changeState({ loading: false }); + const message = error?.response?.data?.message || 'Something went wrong!' + setLoading(false) + swal({ + title: 'Warning', + text: message, + icon: 'error', + button: 'Retry', + dangerMode: true, + }) } + } - }; - const onCancel = () => { - // window.location = "/comproducts"; - history.goBack() - - }; return ( - <> -
-
-

EDIT-CMS

+
+
+
+
+
+ Edit Page +
-
- - -
-
- - -
-
- - -
-
- - -
+ type="button" + className="btn btn-success mt-1 mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1" + onClick={() => handleSubmit()} + disabled={loading} + > + {loading ? 'Loading' : 'Save'} + + + + +
+
+
- +
+
+
+
+
+ + Title + + + { + handleChange(e) + }} + /> +
+
+
Page data *
+
+ + + +
+ + {/*
+
+ { + editor.editing.view.change((writer) => { + writer.setStyle('height', '200px', editor.editing.view.document.getRoot()) + }) + }} + data={data.page_data} + // config={{ + // extraPlugins: [MyCustomUploadAdapterPlugin], + // }} + + onChange={(event, editor) => { + let e = { target: { value: editor.getData(), id: 'page_data' } } + handleChange(e) + }} + /> +
+
*/} + +
+
image *
+
+ + {/*

Upload videos, images and pdf only

*/} +
+
+ + {imagesPreview && Product Preview} + +
+
+
+
+
+
) } -export default EditCms \ No newline at end of file +export default EditCms diff --git a/src/views/CMS/Pagination.js b/src/views/CMS/Pagination.js new file mode 100644 index 0000000..b648950 --- /dev/null +++ b/src/views/CMS/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/CMS/ViewCms.js b/src/views/CMS/ViewCms.js index 311395e..83aa007 100644 --- a/src/views/CMS/ViewCms.js +++ b/src/views/CMS/ViewCms.js @@ -66,6 +66,7 @@ function ViewOffer() {
  • CMD-Category
    • */} + @@ -83,14 +84,21 @@ function ViewOffer() { {/* Id */} - About Us - {cmsRes?.About_Us} + Title + {cmsRes?.title} - Terms and Conditions - {cmsRes?.Terms_and_Conditions} + page Content + {`${cmsRes?.page_data}`} - Privacy Policy + {/* Privacy Policy {cmsRes?.Privacy_Policy} + */} + + image + {cmsRes.image ? + : + <>

    + } Added On diff --git a/src/views/CMS/cms.js b/src/views/CMS/cms.js index 0f2bb58..cfefa06 100644 --- a/src/views/CMS/cms.js +++ b/src/views/CMS/cms.js @@ -5,10 +5,13 @@ import { Link } from "react-router-dom"; import swal from 'sweetalert'; // import { API } from "../../data"; import { isAutheticated } from "../../auth"; +import Pagination from "./Pagination"; function cms() { const [cmsRes, setCmsRes] = useState([]) + const [currentPage, setCurrentPage] = useState(1); + const [postsPerPage] = useState(15); const token = isAutheticated(); const getRestriction = useCallback(async () => { @@ -20,8 +23,8 @@ function cms() { }, } ); - // console.log(res.data.CmpRestriction[0]) - setCmsRes(res.data.CmpRestriction[0]) + + setCmsRes(res.data.CmpRestriction) }, [token]); @@ -31,8 +34,43 @@ function cms() { }, [getRestriction]); - // console.log(cmsRes) + const indexOfLastPost = currentPage * postsPerPage; + const indexOfFirstPost = indexOfLastPost - postsPerPage; + const currentPosts = cmsRes.slice(indexOfFirstPost, indexOfLastPost); + // Change page + const paginate = pageNumber => setCurrentPage(pageNumber); + const handleDelete = async (id) => { + let status = window.confirm("Do you want to delete"); + if (!status) return; + + let res = await axios.delete(`/api/restriction/cms/delete/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res) + if (res.data.success == true) { + swal("success!", "Cms Deleted Successfully!", "success"); + window.location.reload(); + // if (res.status === 200) window.location.reload(); + } + else { + swal("error!", "failled!", "error"); + + } + }; + //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 (
    @@ -42,15 +80,8 @@ function cms() {

    CMP-CMS

    - {/* */} - {/*
    -
      -
    1. - CMD-App -
      2. -
    2. CMD-Category
      3. -
    -
    */} + {/* */} +
    @@ -68,169 +99,68 @@ function cms() { - About Us - Terms and Conditions - Privacy Policy + Title + {/* Page Data */} + + {/* image */} + Added On Action - - - - {cmsRes?.About_Us} - {cmsRes?.Terms_and_Conditions} - {cmsRes?.Privacy_Policy} + {currentPosts && currentPosts.map((item, index) => + + {item.title} + {/* {item?.page_data} */} + {/* {item.image ? + : + <>

    + } */} - - + + {/* {item?.addedOn} */} + {new Date(`${item?.createdAt}`).toDateString()} , {`${formatAMPM(item?.createdAt)}`} + + + + + + + + + + + - - - - - - {/* */} - - + + + + )}
    - {/* second table */} - {/*
    - - - - - - - - - - - - - - - - - - - - -
    Terms and ConditionsAction
    {cmsRes?.Terms_and_Conditions} - - - - - - - - - {/* */} - {/*
    -
    */} - - - - - {/* end second table */} - - {/* third table */} - {/*
    - - - - - - - - - - - - - - - - - - - - -
    Privacy PolicyAction
    {cmsRes?.Privacy_Policy} - - - - - - - - - {/* */} - {/*
    -
    */} - - - {/* end third table */} - {/* */} @@ -238,6 +168,9 @@ function cms() { {/* */} + ); }