From b8f51b41bdcedfbd8d23af5413cad0157385b520 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Fri, 22 Jul 2022 15:14:28 +0530 Subject: [PATCH] FAQs --- src/_nav.js | 7 + src/components/header/AppHeaderDropdown.js | 2 +- src/routes.js | 10 ++ src/views/FAQs/AddFaqs.js | 163 +++++++++++++++++++ src/views/FAQs/EditFaqs.js | 175 +++++++++++++++++++++ src/views/FAQs/Faqs.js | 164 +++++++++++++++++++ src/views/FAQs/ViewFaqs.js | 132 ++++++++++++++++ 7 files changed, 652 insertions(+), 1 deletion(-) create mode 100644 src/views/FAQs/AddFaqs.js create mode 100644 src/views/FAQs/EditFaqs.js create mode 100644 src/views/FAQs/Faqs.js create mode 100644 src/views/FAQs/ViewFaqs.js diff --git a/src/_nav.js b/src/_nav.js index c8dcff9..d7b0639 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -6,6 +6,7 @@ import { cilChartPie, cilCursor, cilDrop, + cilFace, cilFilterSquare, cilMoney, cilNewspaper, @@ -84,6 +85,12 @@ const _nav = [ icon: , to: '/requirement', }, + { + component: CNavItem, + name: 'FAQs', + icon: , + to: '/FAQs', + }, { component: CNavItem, name: 'Users', diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 1425989..10e80ee 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -24,7 +24,7 @@ import { import CIcon from '@coreui/icons-react' import swal from 'sweetalert'; -import avatar8 from './../../assets/images/avatars/8.jpg' +import avatar8 from './../../assets/images/avatars/1.jpg' import { Link } from 'react-router-dom' // import { signout } from 'src/auth' import { useHistory } from "react-router-dom"; diff --git a/src/routes.js b/src/routes.js index 5e98b9e..c5bbfe4 100644 --- a/src/routes.js +++ b/src/routes.js @@ -44,6 +44,11 @@ import ViewRequirement from './views/Requirement/ViewRequirement' import Requirement from './views/Requirement/Requirement' import AddRequirement from './views/Requirement/AddRequirement' import EditRequirement from './views/Requirement/EditRequirement' +//FAQs +import ViewFaqs from "./views/FAQs/ViewFaqs" +import Faqs from './views/FAQs/Faqs' +import AddFaqs from './views/FAQs/AddFaqs' +import EditFaqs from './views/FAQs/EditFaqs' // DashBoard const Change_Password = React.lazy(() => import('./views/pages/register/Change_password')) @@ -104,6 +109,11 @@ const routes = [ { path: '/requirement/edit/:id', name: 'EditRequirement', component: EditRequirement }, { path: '/requirement/add/', name: 'AddRequirement', component: AddRequirement }, { path: '/requirement', name: 'Requirement', component: Requirement }, + //FAQs + { path: '/FAQs/view/:id', name: 'ViewFaqs', component: ViewFaqs }, + { path: '/FAQs/edit/:id', name: 'EditFaqs', component: EditFaqs }, + { path: '/FAQs/add/', name: 'AddFaqs', component: AddFaqs }, + { path: '/FAQs', name: 'Faqs', component: Faqs }, //Users { path: '/users/view/:id', name: 'ViewUsers', component: ViewUsers }, diff --git a/src/views/FAQs/AddFaqs.js b/src/views/FAQs/AddFaqs.js new file mode 100644 index 0000000..631f456 --- /dev/null +++ b/src/views/FAQs/AddFaqs.js @@ -0,0 +1,163 @@ +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, cilNoteAdd } from '@coreui/icons' +const AddFaqs = () => { + const token = isAutheticated(); + let history = useHistory(); + // const [image, setImage] = useState(""); + const [topic, setTopic] = useState(""); + const [description, setDescription] = useState(""); + const [loading, setLoading] = useState(false); + + + const handleSubmit = async () => { + if (!(topic && description)) { + alert("Please fill All required field "); + return; + } + const myForm = new FormData(); + + myForm.set("topic", topic); + myForm.set("description", description); + // myForm.set("image", image); + setLoading({ loading: true }); + // console.log(image) + try { + let res = await axios.post( + `/api/faqs/create/`, myForm, + { + headers: { + "Content-Type": 'multipart/form-data', + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(res.data) + if (res.data) { + swal("success!", "FAQs Added Successfully!", "success"); + setLoading(false); + history.goBack(); + } + } catch (error) { + alert(error) + 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 FAQs

+
+
+ + + + + setTopic(e.target.value)} + value={topic} + placeholder="Topic ( maximum 50 character )" /> + + + + + + + + {/* + + + + + */} +
+ +
+ + +
+
+ + + + + + +
+ + + ) +} + +export default AddFaqs \ No newline at end of file diff --git a/src/views/FAQs/EditFaqs.js b/src/views/FAQs/EditFaqs.js new file mode 100644 index 0000000..8b601ad --- /dev/null +++ b/src/views/FAQs/EditFaqs.js @@ -0,0 +1,175 @@ +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, 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, cilNoteAdd } from '@coreui/icons' +const EditFaqs = () => { + const { id } = useParams() + const token = isAutheticated(); + let history = useHistory(); + // const [image, setImage] = useState(""); + const [topic, setTopic] = useState(""); + const [description, setDescription] = useState(""); + const [loading, setLoading] = useState(false); + + //fetch one image + useEffect(async () => { + const res = await axios.get(`/api/faqs/getOne/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + setTopic(res.data.Faqs.topic) + setDescription(res.data.Faqs.description) + + }, [id]); + const handleSubmit = async () => { + if (!(topic && description)) { + alert("Please fill All required field "); + return; + } + const myForm = new FormData(); + + myForm.set("topic", topic); + myForm.set("description", description); + // myForm.set("image", image); + setLoading({ loading: true }); + // console.log(image) + try { + let res = await axios.put( + `/api/faqs/update/${id}`, myForm, + { + headers: { + "Content-Type": 'multipart/form-data', + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(res.data) + if (res.data) { + swal("success!", "FAQs Edit Successfully!", "success"); + setLoading(false); + history.goBack(); + } + } catch (error) { + alert(error) + 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 FAQs

+
+
+ + + + + setTopic(e.target.value)} + value={topic} + placeholder="Topic ( maximum 50 character )" /> + + + + + + + + {/* + + + + + */} +
+ +
+ + +
+
+ + + + + + +
+ + + ) +} + +export default EditFaqs \ No newline at end of file diff --git a/src/views/FAQs/Faqs.js b/src/views/FAQs/Faqs.js new file mode 100644 index 0000000..1e8907e --- /dev/null +++ b/src/views/FAQs/Faqs.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 Faqs() { + const [faqs, setFeqs] = useState([]) + + const token = isAutheticated(); + + const getfaqs = useCallback(async () => { + let res = await axios.get( + `/api/faqs/getAll`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + // console.log(res.data) + setFeqs(res.data.Faqs) + + + }, [token]); + + useEffect(() => { + getfaqs(); + }, [getfaqs]); + + + const handleDelete = async (id) => { + let status = window.confirm("Do you want to delete"); + if (!status) return; + + let res = await axios.delete(`/api/faqs/delete/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res) + if (res.data.success == true) { + swal("success!", "FAQs 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-FAQs

+ + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + {/* */} + + + + + + {faqs && faqs.map((item, index) => + + + {/* */} + + + + + + )} + +
TopicImageAdded OnAction
{item?.topic} + + {/* {item?.addedOn} */} + {new Date(`${item?.createdAt}`).toDateString()} , {`${formatAMPM(item?.createdAt)}`} + + + + + + + + + + + +
+
+ + + {/* */} +
+
+
+
+
+ {/* */} +
+
+ ); +} + +export default Faqs; diff --git a/src/views/FAQs/ViewFaqs.js b/src/views/FAQs/ViewFaqs.js new file mode 100644 index 0000000..8e6c39f --- /dev/null +++ b/src/views/FAQs/ViewFaqs.js @@ -0,0 +1,132 @@ + +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 ViewFaqs() { + const [faqs, setFaqs] = useState([]) + const { id } = useParams(); + // console.log(id) + const token = isAutheticated(); + + const getFaqs = useCallback(async () => { + let res = await axios.get( + `/api/faqs/getOne/${id}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + // console.log(res.data.news) + setFaqs(res.data.Faqs) + + + }, [token]); + + useEffect(() => { + getFaqs(); + }, [getFaqs]); + + + + + + //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-FAQs

+ + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} +
+
+
+ {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + {/* + + */} + + + + + + + + + + + + + + + +
Id{faqs?._id}
TOPIC{faqs?.topic}
Image + +
Description{faqs?.description}
Added On + {new Date(`${faqs?.createdAt}`).toDateString()} , {`${formatAMPM(faqs?.createdAt)}`} +
Updated At + {new Date(`${faqs?.updatedAt}`).toDateString()} , {`${formatAMPM(faqs?.updatedAt)}`} +
+
+ + + {/* */} +
+
+
+
+
+ {/* */} +
+
+ ); +} + +export default ViewFaqs;