🌸FrontEnd: UI Enhanced in Manage Q&A Section of Admin Panel (#1115)

* Upvote and Downvotes fixed * Feat:UI Enhanced in Manage Q&A Section of Admin Panel * buttons corrected * Button color fixed
HITK-TECH-Community · Aug 7, 2024 · 8e217e5 · 8e217e5
1 parent 980d9de
commit 8e217e5
Show file tree

Hide file tree

Showing 4 changed files with 267 additions and 111 deletions.
diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/AnswersModel.jsx b/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/AnswersModel.jsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+import { Modal, Backdrop, Fade } from '@material-ui/core';
+import { SimpleToast } from "../../../../../../components/util/Toast";
+import { getAnswers, updateAnswerStatus, deleteAnswer } from "../../../../../../service/Faq";
+import style from './AnswersModel.scss'
+
+export function AnswersModel(props) {
+    let dark = props.theme
+    const [answers, setAnswers] = useState([])
+    const [toast, setToast] = useState({
+        toastStatus: false,
+        toastType: "",
+        toastMessage: "",
+    });
+    async function fetchAnswers() {
+        const data = await getAnswers(props.data._id, setToast)
+        setAnswers(data)
+    }
+    const updateAnswer = async (id, status) => {
+        setToast({ toastStatus: true, toastMessage: "Loading...", toastType: "info" })
+        await updateAnswerStatus(id, status, setToast);
+        fetchAnswers()
+    }
+    const handleDeleteAnswer = async (answerId) => {
+        setToast({ toastStatus: true, toastMessage: "Loading...", toastType: "info" })
+        await deleteAnswer(answerId, setToast)
+        fetchAnswers()
+    }
+    useEffect(() => {
+        if (props.open)
+            fetchAnswers()
+    }, [props])
+    function timeStampFormatter(time) {
+        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+        const messageTime = new Date(time)
+        return `${String(messageTime.getDate())} ${String(months[messageTime.getMonth()])} ${String(messageTime.getFullYear())}`
+    }
+    return (
+        <div>
+            {toast.toastStatus && (
+                <SimpleToast
+                    open={toast.toastStatus}
+                    message={toast.toastMessage}
+                    handleCloseToast={() => { setToast({ toastMessage: "", toastStatus: false, toastType: "" }) }}
+                    severity={toast.toastType}
+                />
+            )}
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className="modal"
+                open={props.open}
+                onClose={props.handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={props.open}>
+                    <div className={"modal-container"} style={{ background: dark ? "#171717" : "white" }}>
+                        <div className="close-icon-container">
+                            <span onClick={() => {
+                                setToast({ toastMessage: "", toastStatus: false, toastType: "" })
+                                props.handleClose(false)
+                            }}>
+                                <i class="fas fa-times close-icon" style={{ color: dark && "white" }}></i>
+                            </span>
+                        </div>
+                        {
+                            answers.length == 0 ?
+                                <p style={{ color: dark && "white" }}>No answers found...</p>
+                                :
+                                <div>
+                                    {
+                                        answers.map((ans, index) => {
+                                            return (
+                                                <div className="answer-container" style={{ color: dark && "white" }}>
+                                                    <div className="answer-header">
+                                                        <h5>{ans.created_by || "Anonymous"}</h5>
+                                                        <p>{timeStampFormatter(ans.created_on)}</p>
+                                                    </div>
+                                                    <p>{ans.answer}</p>
+                                                    <div className={"button-group"}>
+                                                        {
+                                                            ans.isApproved ?
+                                                                <button
+                                                                    name={`${ans?._id}`}
+                                                                    onClick={(e) => handleDeleteAnswer(e.currentTarget.name)}
+                                                                    className={"button-delete"}
+                                                                >
+                                                                    Delete
+                                                                </button>
+                                                                :
+                                                                <>
+                                                                    <button
+                                                                        className={"button-delete"}
+                                                                        id={`${ans?._id}`}
+                                                                        onClick={(e) => handleDeleteAnswer(e.currentTarget.id)}
+                                                                    >
+                                                                        Reject
+                                                                    </button>
+                                                                    <button
+                                                                        className={"button-approve"}
+                                                                        id={`${ans?._id}`}
+                                                                        onClick={(e) => updateAnswer(e.currentTarget.id, true)}
+                                                                    >
+                                                                        Approve
+                                                                    </button>
+                                                                </>
+
+                                                        }
+                                                    </div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                        }
+                    </div>
+                </Fade>
+            </Modal>
+        </div>
+    )
+}
diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/AnswersModel.scss b/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/AnswersModel.scss
@@ -0,0 +1,104 @@
+:root {
+    font-family: "Futura LT Book";
+}
+
+.modal-container {
+    width: 70%;
+    height: auto;
+    background-color: white;
+    outline: none !important;
+    padding: 20px 20px;
+    border-radius: 12px;
+
+    h2 {
+        margin: 0;
+    }
+
+    max-height: 100%;
+    overflow-y: scroll;
+}
+
+.modal {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    overflow-y: scroll;
+    outline: none !important;
+}
+
+.close-icon-container {
+    display: flex;
+    justify-content: end;
+}
+
+.close-icon {
+    font-size: 24px;
+    padding-right: 20px;
+    cursor: pointer;
+    color: #243e74;
+}
+
+.answer-container {
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 20px;
+    margin-top: 20px;
+
+    p {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        font-size: 16px;
+    }
+}
+
+.button-group {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+}
+
+.button-approve {
+    padding: 10px;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    background-color: rgb(6, 158, 41);
+    margin: 5px;
+    color: #fff;
+    width: 120px;
+    font-size: 12px;
+    font-weight: bold;
+    transition: background-color 200ms;
+}
+
+.button-delete {
+    padding: 10px;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    background-color: #fc0254;
+    margin: 5px;
+    color: #fff;
+    width: 120px;
+    font-size: 12px;
+    font-weight: bold;
+    transition: background-color 200ms;
+    text-align: center;
+}
+
+.button-delete:hover {
+    background-color: #fc3779;
+}
+
+@media screen and (max-width:768px) {
+    .modal-container {
+        width: 90%;
+    }
+
+    .close-icon {
+        padding-right: 5px;
+    }
+}
diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/index.js b/frontend/src/pages/Admin/Components/Faq/Q&A/AnswersModel/index.js
@@ -0,0 +1 @@
+export * from './AnswersModel'