From bb06edc7822d9af8257db70bf42e9e38de013835 Mon Sep 17 00:00:00 2001 From: Shivam Gaur Date: Thu, 20 Jun 2024 17:27:28 +0530 Subject: [PATCH 1/4] Fix Update Broadcast Modal Description Population and Styling Consistency --- .../Broadcast/ManageBroadcasts/Edit/Edit.jsx | 128 ++++++++++++ .../ManageBroadcasts/Edit/edit.module.scss | 189 ++++++++++++++++++ .../Broadcast/ManageBroadcasts}/Edit/index.js | 0 .../ManageBroadcasts/ManageBroadcasts.jsx | 2 +- .../Component/AllBroadcasts/AllBroadcasts.jsx | 2 +- .../Component/AllBroadcasts/Edit/Edit.jsx | 83 -------- .../AllBroadcasts/Edit/edit.module.scss | 90 --------- .../Component/Carousel/Edit/Edit.jsx | 61 ------ .../Component/Carousel/Edit/edit.module.scss | 50 ----- .../Component/Carousel/Edit/index.js | 1 - 10 files changed, 319 insertions(+), 287 deletions(-) create mode 100644 frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx create mode 100644 frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss rename frontend/src/pages/{Broadcast/Component/AllBroadcasts => Admin/Components/Broadcast/ManageBroadcasts}/Edit/index.js (100%) delete mode 100644 frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx delete mode 100644 frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss delete mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx delete mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss delete mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx new file mode 100644 index 00000000..22bd1c85 --- /dev/null +++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx @@ -0,0 +1,128 @@ +import React, { useState } from "react"; +import style from "./edit.module.scss"; +import { Button2 } from "../../../../../../components/util/Button/index"; +import SunEditor from "suneditor-react"; +import "suneditor/dist/css/suneditor.min.css"; +import { SimpleToast } from "../../../../../../components/util/Toast"; +import { UpdateBoardCast } from "../../../../../../service/Broadcast.jsx"; + +export function Edit(props) { + const [toast, setToast] = useState({ + toastStatus: false, + toastType: "", + toastMessage: "", + }); + + const handleCloseToast = (event, reason) => { + if (reason === "clickaway") { + return; + } + setToast({ ...toast, toastStatus: false }); + props.setVisible(false); + }; + + const handleInputChange = (e) => { + const { name, value } = e.target; + props.handleChange({ target: { name, value } }); + }; + + const handleContentChange = (content) => { + props.handleChange({ target: { name: 'content', value: content } }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + const { data } = props; + const newData = { + id: data._id, + content:data.content, + link: data.link, + expiresOn: data.expiresOn, + imageUrl: data.imageUrl, + tags: data.tags, + isApproved: data.isApproved, + title: data.title, + }; + + await UpdateBoardCast(newData, setToast, toast); + }; + + const { visible, data } = props; + + return visible ? ( +
+
+
+
+

Edit Broadcast

+
+
+
+
+ + +
+
+
+
+ + handleInputChange({ target: { name: "content", value: content } }) + } + /> +
+
+
+
+ + +
+
+
+ + props.setVisible(false)} + /> +
+ +
+ {toast.toastStatus && ( +
+ +
+ )} +
+ ) : null; +} diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss new file mode 100644 index 00000000..0fcdc4b1 --- /dev/null +++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss @@ -0,0 +1,189 @@ +.popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.editor { + padding: 30px; + overflow-x: hidden; +} + +.card { + width: 50%; + height: auto; + background-color: #e7e7e7; + margin-left: auto; + margin-right: auto; + padding-bottom: 20px; + border-radius: 30px; +} + + +.form-control { + position: relative; + width: 100%; + display: flex; + flex-direction: column; + margin-bottom: 1rem; +} + +.form-control-input { + position: relative; +} + +.form-control-input, +.form-control-input { + width: 100%; + height: 50px; + border: 1px solid #bbbaba; + border-radius: 10px; + padding: 0 25px; + margin-left: auto; + margin-right: auto; + font-size: 14px; + color: #777777; + margin-bottom: 7px; + background-color: #f1f1f1; + box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; +} + +.form-control-input::placeholder, +.form-control-input::placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input::-moz-placeholder, +.form-control-input::-moz-placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input::-webkit-input-placeholder, +.form-control-input::-webkit-input-placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input:focus { + border-color: #1863ff; + outline: none; + border: double 2px transparent; + border-radius: 10px; + background-image: linear-gradient(white, white), + linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1)); + background-origin: border-box; + background-clip: padding-box, border-box; + background-color: #ffffff; +} + +.form-control i { + position: absolute; + right: 25px; + top: 15px; + font-size: 16px; + color: #777777; +} + +.error { + color: red; + font-size: 12px; + margin-top: 5px; +} + +.heading { + text-align: center; + justify-content: center; +} + +.motive { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 30px; +} + +.edit { + padding: 20px; + border: 1px solid #bbbaba; + border-radius: 10px; + background-color: #f1f1f1; + box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; +} + +.dash { + width: 200px; + height: 5px; + border-radius: 20px; + margin-bottom: 10px; + background: rgb(255, 0, 90); + background: linear-gradient( + 45deg, + rgba(255, 0, 90, 1) 0%, + rgba(10, 24, 61, 1) 90% + ); +} + +.headingg { + padding: 5px; + font-weight: bold; + font-size: large; +} + +@media screen and (max-width: 600px) { + input { + margin-left: 0; + } +} + +.submit-btn { + display: flex; + justify-content: center; + align-items: center; + margin: 20px auto 0 auto; + width: 30%; +} + +.submit-btn-text { + display: flex; + justify-content: center; + align-items: center; +} + +@media screen and (max-width: 750px) { + .submit-btn-text { + display: flex; + justify-content: center; + align-items: center; + font-size: x-small; + color: black; + } + + .submit-btn { + width: 60% !important; + margin: 0 auto; + } +} + +.toast-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: transparent; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/index.js b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js similarity index 100% rename from frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/index.js rename to frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx index cc597290..e19a7d07 100644 --- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx +++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx @@ -4,7 +4,7 @@ import { InputBase } from "@material-ui/core"; import { Search } from "@material-ui/icons"; import { DropMenu } from "../../../../../components/util/DropMenu/index.js"; import { Card } from "../ManageBroadcasts/Card/index.js"; -import { Edit } from "../../../../Broadcast/Component/AllBroadcasts/Edit/index.js"; +import { Edit } from "../ManageBroadcasts/Edit/index.js"; import { END_POINT } from "./../../../../../config/api"; import Loader from "../../../../../components/util/Loader"; import { Button4 } from "../../../../../components/util/Button"; diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx index 1f94b9bb..fa202d91 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx @@ -6,7 +6,7 @@ import { InputBase } from "@material-ui/core"; import { Search } from "@material-ui/icons"; import { DropMenu } from "../../../../components/util/DropMenu/index.js"; import { Card } from "./Card/index.js"; -import { Edit } from "./Edit/index.js"; +import { Edit } from "../../../Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js"; import { END_POINT } from "./../../../../config/api"; import Loader from "../../../../components/util/Loader"; import { Button4 } from "../../../../components/util/Button"; diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx deleted file mode 100644 index 2083b5c2..00000000 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useEffect, useState } from "react"; -import style from "./edit.module.scss"; -import { TextField } from "@material-ui/core"; -import CloseIcon from "@material-ui/icons/Close"; - -export function Edit(props) { - const [a, seta] = useState(); - function scrolls() { - let b = window.scrollY; - seta(b); - } - useEffect(() => { - window.addEventListener("scroll", scrolls); - }, []); - - let dark = props.theme; - return props.visible ? ( -
-
-

- Edit modal - props.setVisible(false)} - /> -

-
-
-
Title:
- -
-
-
Description:
- -
-
-
Link:
- -
- -
-
-
- ) : null; -} diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss deleted file mode 100644 index a1a39a74..00000000 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss +++ /dev/null @@ -1,90 +0,0 @@ -.popup { - position: absolute; - background: rgba(0, 0, 0, 0.2); - width: 100%; - left: 0; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; -} - -.input-dark { - color: whitesmoke !important; -} - -.div { - width: 40%; - border-radius: 8px; - background: white; - padding: 1em; - @media (max-width: 600px) { - width: 95%; - } - h1 { - width: 100%; - font-size: 17px; - margin: 0; - text-align: center; - } -} - -// for dark theme -.div-dark { - width: 40%; - border-radius: 8px; - background: #282c35; - color: white !important; - padding: 1em; - @media (max-width: 600px) { - width: 95%; - } - h1 { - width: 100%; - font-size: 17px; - margin: 0; - text-align: center; - } -} - -.form { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - div { - margin: 0.5em 0; - } - h5 { - margin: 0; - width: 20%; - } - .input { - width: 75% !important; - } -} - -.heading { - color: #69a9dd !important; - font-size: 25px !important; -} - -.btns1 { - background: linear-gradient(to right, #121f3a 0%, #2a4886 50%, #162f66 100%); - background-size: 200% auto; - outline: none; - background-position: left center; - -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - border-radius: 50px; - color: #fff; - width: 15%; - margin: 0 auto; - display: flex; - justify-content: center; - padding-top: 5px; - padding-bottom: 5px; - font-size: 15px; -} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx deleted file mode 100644 index 24224b38..00000000 --- a/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react"; -import style from "./edit.module.scss"; -import { TextField } from "@material-ui/core"; -import CloseIcon from "@material-ui/icons/Close"; - -export function Edit(props) { - return props.visible ? ( -
-
-

- Edit modal - props.setVisible(false)} - /> -

-
-
-
Title:
- -
-
-
Description:
- -
-
-
Link:
- -
- -
-
-
- ) : null; -} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss deleted file mode 100644 index f7a8ada5..00000000 --- a/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -.popup { - position: absolute; - background: rgba(0, 0, 0, 0.2); - width: 100%; - top: 0; - left: 0; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; - .div { - width: 40%; - background: white; - padding: 1em; - h1 { - width: 100%; - font-size: 17px; - margin: 0; - text-align: center; - } - } -} - -.form { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - div { - margin: 0.5em 0; - } - h5 { - margin: 0; - width: 20%; - } - .input { - width: 75% !important; - } -} - -.btns1 { - width: 60%; - margin: 0 auto; - display: flex; - justify-content: center; - color: white !important; - background-color: blue !important; - padding: 0.5em; -} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js b/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js deleted file mode 100644 index 90c1910c..00000000 --- a/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./Edit"; From d36e90d08c573eacc83d3102964d5f0e0cde5c42 Mon Sep 17 00:00:00 2001 From: Shivam Gaur Date: Fri, 21 Jun 2024 22:12:36 +0530 Subject: [PATCH 2/4] Revert "Fix Update Broadcast Modal Description Population and Styling Consistency" This reverts commit bb06edc7822d9af8257db70bf42e9e38de013835. --- .../Broadcast/ManageBroadcasts/Edit/Edit.jsx | 128 ------------ .../ManageBroadcasts/Edit/edit.module.scss | 189 ------------------ .../ManageBroadcasts/ManageBroadcasts.jsx | 2 +- .../Component/AllBroadcasts/AllBroadcasts.jsx | 2 +- .../Component/AllBroadcasts/Edit/Edit.jsx | 83 ++++++++ .../AllBroadcasts/Edit/edit.module.scss | 90 +++++++++ .../Component/AllBroadcasts}/Edit/index.js | 0 .../Component/Carousel/Edit/Edit.jsx | 61 ++++++ .../Component/Carousel/Edit/edit.module.scss | 50 +++++ .../Component/Carousel/Edit/index.js | 1 + 10 files changed, 287 insertions(+), 319 deletions(-) delete mode 100644 frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx delete mode 100644 frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss create mode 100644 frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx create mode 100644 frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss rename frontend/src/pages/{Admin/Components/Broadcast/ManageBroadcasts => Broadcast/Component/AllBroadcasts}/Edit/index.js (100%) create mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx create mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss create mode 100644 frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx deleted file mode 100644 index 22bd1c85..00000000 --- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/Edit.jsx +++ /dev/null @@ -1,128 +0,0 @@ -import React, { useState } from "react"; -import style from "./edit.module.scss"; -import { Button2 } from "../../../../../../components/util/Button/index"; -import SunEditor from "suneditor-react"; -import "suneditor/dist/css/suneditor.min.css"; -import { SimpleToast } from "../../../../../../components/util/Toast"; -import { UpdateBoardCast } from "../../../../../../service/Broadcast.jsx"; - -export function Edit(props) { - const [toast, setToast] = useState({ - toastStatus: false, - toastType: "", - toastMessage: "", - }); - - const handleCloseToast = (event, reason) => { - if (reason === "clickaway") { - return; - } - setToast({ ...toast, toastStatus: false }); - props.setVisible(false); - }; - - const handleInputChange = (e) => { - const { name, value } = e.target; - props.handleChange({ target: { name, value } }); - }; - - const handleContentChange = (content) => { - props.handleChange({ target: { name: 'content', value: content } }); - }; - - const handleSubmit = async (e) => { - e.preventDefault(); - const { data } = props; - const newData = { - id: data._id, - content:data.content, - link: data.link, - expiresOn: data.expiresOn, - imageUrl: data.imageUrl, - tags: data.tags, - isApproved: data.isApproved, - title: data.title, - }; - - await UpdateBoardCast(newData, setToast, toast); - }; - - const { visible, data } = props; - - return visible ? ( -
-
-
-
-

Edit Broadcast

-
-
-
-
- - -
-
-
-
- - handleInputChange({ target: { name: "content", value: content } }) - } - /> -
-
-
-
- - -
-
-
- - props.setVisible(false)} - /> -
- -
- {toast.toastStatus && ( -
- -
- )} -
- ) : null; -} diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss deleted file mode 100644 index 0fcdc4b1..00000000 --- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/edit.module.scss +++ /dev/null @@ -1,189 +0,0 @@ -.popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; -} - -.editor { - padding: 30px; - overflow-x: hidden; -} - -.card { - width: 50%; - height: auto; - background-color: #e7e7e7; - margin-left: auto; - margin-right: auto; - padding-bottom: 20px; - border-radius: 30px; -} - - -.form-control { - position: relative; - width: 100%; - display: flex; - flex-direction: column; - margin-bottom: 1rem; -} - -.form-control-input { - position: relative; -} - -.form-control-input, -.form-control-input { - width: 100%; - height: 50px; - border: 1px solid #bbbaba; - border-radius: 10px; - padding: 0 25px; - margin-left: auto; - margin-right: auto; - font-size: 14px; - color: #777777; - margin-bottom: 7px; - background-color: #f1f1f1; - box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; -} - -.form-control-input::placeholder, -.form-control-input::placeholder { - opacity: 1; - color: #777777; -} - -.form-control-input::-moz-placeholder, -.form-control-input::-moz-placeholder { - opacity: 1; - color: #777777; -} - -.form-control-input::-webkit-input-placeholder, -.form-control-input::-webkit-input-placeholder { - opacity: 1; - color: #777777; -} - -.form-control-input:focus { - border-color: #1863ff; - outline: none; - border: double 2px transparent; - border-radius: 10px; - background-image: linear-gradient(white, white), - linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1)); - background-origin: border-box; - background-clip: padding-box, border-box; - background-color: #ffffff; -} - -.form-control i { - position: absolute; - right: 25px; - top: 15px; - font-size: 16px; - color: #777777; -} - -.error { - color: red; - font-size: 12px; - margin-top: 5px; -} - -.heading { - text-align: center; - justify-content: center; -} - -.motive { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 30px; -} - -.edit { - padding: 20px; - border: 1px solid #bbbaba; - border-radius: 10px; - background-color: #f1f1f1; - box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; -} - -.dash { - width: 200px; - height: 5px; - border-radius: 20px; - margin-bottom: 10px; - background: rgb(255, 0, 90); - background: linear-gradient( - 45deg, - rgba(255, 0, 90, 1) 0%, - rgba(10, 24, 61, 1) 90% - ); -} - -.headingg { - padding: 5px; - font-weight: bold; - font-size: large; -} - -@media screen and (max-width: 600px) { - input { - margin-left: 0; - } -} - -.submit-btn { - display: flex; - justify-content: center; - align-items: center; - margin: 20px auto 0 auto; - width: 30%; -} - -.submit-btn-text { - display: flex; - justify-content: center; - align-items: center; -} - -@media screen and (max-width: 750px) { - .submit-btn-text { - display: flex; - justify-content: center; - align-items: center; - font-size: x-small; - color: black; - } - - .submit-btn { - width: 60% !important; - margin: 0 auto; - } -} - -.toast-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: transparent; - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; -} \ No newline at end of file diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx index e19a7d07..cc597290 100644 --- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx +++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx @@ -4,7 +4,7 @@ import { InputBase } from "@material-ui/core"; import { Search } from "@material-ui/icons"; import { DropMenu } from "../../../../../components/util/DropMenu/index.js"; import { Card } from "../ManageBroadcasts/Card/index.js"; -import { Edit } from "../ManageBroadcasts/Edit/index.js"; +import { Edit } from "../../../../Broadcast/Component/AllBroadcasts/Edit/index.js"; import { END_POINT } from "./../../../../../config/api"; import Loader from "../../../../../components/util/Loader"; import { Button4 } from "../../../../../components/util/Button"; diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx index fa202d91..1f94b9bb 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/AllBroadcasts.jsx @@ -6,7 +6,7 @@ import { InputBase } from "@material-ui/core"; import { Search } from "@material-ui/icons"; import { DropMenu } from "../../../../components/util/DropMenu/index.js"; import { Card } from "./Card/index.js"; -import { Edit } from "../../../Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js"; +import { Edit } from "./Edit/index.js"; import { END_POINT } from "./../../../../config/api"; import Loader from "../../../../components/util/Loader"; import { Button4 } from "../../../../components/util/Button"; diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx new file mode 100644 index 00000000..2083b5c2 --- /dev/null +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from "react"; +import style from "./edit.module.scss"; +import { TextField } from "@material-ui/core"; +import CloseIcon from "@material-ui/icons/Close"; + +export function Edit(props) { + const [a, seta] = useState(); + function scrolls() { + let b = window.scrollY; + seta(b); + } + useEffect(() => { + window.addEventListener("scroll", scrolls); + }, []); + + let dark = props.theme; + return props.visible ? ( +
+
+

+ Edit modal + props.setVisible(false)} + /> +

+
+
+
Title:
+ +
+
+
Description:
+ +
+
+
Link:
+ +
+ +
+
+
+ ) : null; +} diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss new file mode 100644 index 00000000..a1a39a74 --- /dev/null +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss @@ -0,0 +1,90 @@ +.popup { + position: absolute; + background: rgba(0, 0, 0, 0.2); + width: 100%; + left: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.input-dark { + color: whitesmoke !important; +} + +.div { + width: 40%; + border-radius: 8px; + background: white; + padding: 1em; + @media (max-width: 600px) { + width: 95%; + } + h1 { + width: 100%; + font-size: 17px; + margin: 0; + text-align: center; + } +} + +// for dark theme +.div-dark { + width: 40%; + border-radius: 8px; + background: #282c35; + color: white !important; + padding: 1em; + @media (max-width: 600px) { + width: 95%; + } + h1 { + width: 100%; + font-size: 17px; + margin: 0; + text-align: center; + } +} + +.form { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + div { + margin: 0.5em 0; + } + h5 { + margin: 0; + width: 20%; + } + .input { + width: 75% !important; + } +} + +.heading { + color: #69a9dd !important; + font-size: 25px !important; +} + +.btns1 { + background: linear-gradient(to right, #121f3a 0%, #2a4886 50%, #162f66 100%); + background-size: 200% auto; + outline: none; + background-position: left center; + -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); + -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); + box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); + border-radius: 50px; + color: #fff; + width: 15%; + margin: 0 auto; + display: flex; + justify-content: center; + padding-top: 5px; + padding-bottom: 5px; + font-size: 15px; +} diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/index.js similarity index 100% rename from frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Edit/index.js rename to frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/index.js diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx new file mode 100644 index 00000000..24224b38 --- /dev/null +++ b/frontend/src/pages/Broadcast/Component/Carousel/Edit/Edit.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import style from "./edit.module.scss"; +import { TextField } from "@material-ui/core"; +import CloseIcon from "@material-ui/icons/Close"; + +export function Edit(props) { + return props.visible ? ( +
+
+

+ Edit modal + props.setVisible(false)} + /> +

+
+
+
Title:
+ +
+
+
Description:
+ +
+
+
Link:
+ +
+ +
+
+
+ ) : null; +} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss new file mode 100644 index 00000000..f7a8ada5 --- /dev/null +++ b/frontend/src/pages/Broadcast/Component/Carousel/Edit/edit.module.scss @@ -0,0 +1,50 @@ +.popup { + position: absolute; + background: rgba(0, 0, 0, 0.2); + width: 100%; + top: 0; + left: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + .div { + width: 40%; + background: white; + padding: 1em; + h1 { + width: 100%; + font-size: 17px; + margin: 0; + text-align: center; + } + } +} + +.form { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + div { + margin: 0.5em 0; + } + h5 { + margin: 0; + width: 20%; + } + .input { + width: 75% !important; + } +} + +.btns1 { + width: 60%; + margin: 0 auto; + display: flex; + justify-content: center; + color: white !important; + background-color: blue !important; + padding: 0.5em; +} diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js b/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js new file mode 100644 index 00000000..90c1910c --- /dev/null +++ b/frontend/src/pages/Broadcast/Component/Carousel/Edit/index.js @@ -0,0 +1 @@ +export * from "./Edit"; From c2237ec162fe296bc5233e3e059a40bd92e00fe8 Mon Sep 17 00:00:00 2001 From: Shivam Gaur Date: Fri, 21 Jun 2024 22:40:52 +0530 Subject: [PATCH 3/4] Fixed Update Broadcast Modal --- .../Component/AllBroadcasts/Edit/Edit.jsx | 187 ++++++++------ .../AllBroadcasts/Edit/edit.module.scss | 229 +++++++++++++----- 2 files changed, 280 insertions(+), 136 deletions(-) diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx index 2083b5c2..7851f355 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx @@ -1,83 +1,128 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import style from "./edit.module.scss"; -import { TextField } from "@material-ui/core"; -import CloseIcon from "@material-ui/icons/Close"; +import { Button2 } from "../../../../../components/util/Button/index"; +import SunEditor from "suneditor-react"; +import "suneditor/dist/css/suneditor.min.css"; +import { SimpleToast } from "../../../../../components/util/Toast"; +import { UpdateBoardCast } from "../../../../../service/Broadcast.jsx"; export function Edit(props) { - const [a, seta] = useState(); - function scrolls() { - let b = window.scrollY; - seta(b); - } - useEffect(() => { - window.addEventListener("scroll", scrolls); - }, []); + const [toast, setToast] = useState({ + toastStatus: false, + toastType: "", + toastMessage: "", + }); - let dark = props.theme; - return props.visible ? ( -
-
-

- Edit modal - props.setVisible(false)} - /> -

-
-
-
Title:
- + const handleCloseToast = (event, reason) => { + if (reason === "clickaway") { + return; + } + setToast({ ...toast, toastStatus: false }); + props.setVisible(false); + }; + + const handleInputChange = (e) => { + const { name, value } = e.target; + props.handleChange({ target: { name, value } }); + }; + + const handleContentChange = (content) => { + props.handleChange({ target: { name: 'content', value: content } }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + const { data } = props; + const newData = { + id: data._id, + content:data.content, + link: data.link, + expiresOn: data.expiresOn, + imageUrl: data.imageUrl, + tags: data.tags, + isApproved: data.isApproved, + title: data.title, + }; + + await UpdateBoardCast(newData, setToast, toast); + }; + + const { visible, data } = props; + + return visible ? ( +
+
+ +
+

Edit Broadcast

+
-
-
Description:
- +
+
+ + +
+
+
+
+ + handleInputChange({ target: { name: "content", value: content } }) + } + /> +
-
-
Link:
- +
+ + +
+
+
+ + props.setVisible(false)} />
-
+ {toast.toastStatus && ( +
+ +
+ )}
) : null; -} +} \ No newline at end of file diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss index a1a39a74..0fcdc4b1 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss @@ -1,90 +1,189 @@ .popup { - position: absolute; - background: rgba(0, 0, 0, 0.2); - width: 100%; + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; } -.input-dark { - color: whitesmoke !important; +.editor { + padding: 30px; + overflow-x: hidden; } -.div { - width: 40%; - border-radius: 8px; - background: white; - padding: 1em; - @media (max-width: 600px) { - width: 95%; - } - h1 { - width: 100%; - font-size: 17px; - margin: 0; - text-align: center; - } +.card { + width: 50%; + height: auto; + background-color: #e7e7e7; + margin-left: auto; + margin-right: auto; + padding-bottom: 20px; + border-radius: 30px; } -// for dark theme -.div-dark { - width: 40%; - border-radius: 8px; - background: #282c35; - color: white !important; - padding: 1em; - @media (max-width: 600px) { - width: 95%; - } - h1 { - width: 100%; - font-size: 17px; - margin: 0; - text-align: center; - } -} -.form { +.form-control { + position: relative; + width: 100%; display: flex; + flex-direction: column; + margin-bottom: 1rem; +} + +.form-control-input { + position: relative; +} + +.form-control-input, +.form-control-input { width: 100%; + height: 50px; + border: 1px solid #bbbaba; + border-radius: 10px; + padding: 0 25px; + margin-left: auto; + margin-right: auto; + font-size: 14px; + color: #777777; + margin-bottom: 7px; + background-color: #f1f1f1; + box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; +} + +.form-control-input::placeholder, +.form-control-input::placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input::-moz-placeholder, +.form-control-input::-moz-placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input::-webkit-input-placeholder, +.form-control-input::-webkit-input-placeholder { + opacity: 1; + color: #777777; +} + +.form-control-input:focus { + border-color: #1863ff; + outline: none; + border: double 2px transparent; + border-radius: 10px; + background-image: linear-gradient(white, white), + linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1)); + background-origin: border-box; + background-clip: padding-box, border-box; + background-color: #ffffff; +} + +.form-control i { + position: absolute; + right: 25px; + top: 15px; + font-size: 16px; + color: #777777; +} + +.error { + color: red; + font-size: 12px; + margin-top: 5px; +} + +.heading { + text-align: center; + justify-content: center; +} + +.motive { + display: flex; + flex-direction: column; + justify-content: center; align-items: center; - justify-content: space-between; - div { - margin: 0.5em 0; - } - h5 { - margin: 0; - width: 20%; - } - .input { - width: 75% !important; + margin-bottom: 30px; +} + +.edit { + padding: 20px; + border: 1px solid #bbbaba; + border-radius: 10px; + background-color: #f1f1f1; + box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; +} + +.dash { + width: 200px; + height: 5px; + border-radius: 20px; + margin-bottom: 10px; + background: rgb(255, 0, 90); + background: linear-gradient( + 45deg, + rgba(255, 0, 90, 1) 0%, + rgba(10, 24, 61, 1) 90% + ); +} + +.headingg { + padding: 5px; + font-weight: bold; + font-size: large; +} + +@media screen and (max-width: 600px) { + input { + margin-left: 0; } } -.heading { - color: #69a9dd !important; - font-size: 25px !important; +.submit-btn { + display: flex; + justify-content: center; + align-items: center; + margin: 20px auto 0 auto; + width: 30%; } -.btns1 { - background: linear-gradient(to right, #121f3a 0%, #2a4886 50%, #162f66 100%); - background-size: 200% auto; - outline: none; - background-position: left center; - -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23); - border-radius: 50px; - color: #fff; - width: 15%; - margin: 0 auto; +.submit-btn-text { display: flex; justify-content: center; - padding-top: 5px; - padding-bottom: 5px; - font-size: 15px; + align-items: center; } + +@media screen and (max-width: 750px) { + .submit-btn-text { + display: flex; + justify-content: center; + align-items: center; + font-size: x-small; + color: black; + } + + .submit-btn { + width: 60% !important; + margin: 0 auto; + } +} + +.toast-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: transparent; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file From 7a8eb26dd00fdbbb24b15b14ee321189cf92e46e Mon Sep 17 00:00:00 2001 From: Shivam Gaur Date: Tue, 25 Jun 2024 04:10:14 +0530 Subject: [PATCH 4/4] updated edit broadcast --- frontend/src/pages/Admin/Admin.jsx | 2 +- .../ManageBroadcasts/ManageBroadcasts.jsx | 4 +- .../Component/AllBroadcasts/Edit/Edit.jsx | 58 ++- .../AllBroadcasts/Edit/edit.module.scss | 395 +++++++++++++----- 4 files changed, 349 insertions(+), 110 deletions(-) diff --git a/frontend/src/pages/Admin/Admin.jsx b/frontend/src/pages/Admin/Admin.jsx index 312af9f5..545841ac 100644 --- a/frontend/src/pages/Admin/Admin.jsx +++ b/frontend/src/pages/Admin/Admin.jsx @@ -258,7 +258,7 @@ export const Admin = (props) => { ) : tab === 15 ? ( ) : tab === 16 ? ( - + ) : tab === 18 ? ( ) : tab === 19 ? ( diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx index cc597290..aa607a13 100644 --- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx +++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx @@ -10,7 +10,7 @@ import Loader from "../../../../../components/util/Loader"; import { Button4 } from "../../../../../components/util/Button"; import { customBoardcast } from "../../../../../service/Broadcast.jsx"; -export function ManageBroadcasts() { +export function ManageBroadcasts(props) { const [array, setArray] = useState([]); const [index, setIndex] = useState(0); const [visible, setVisible] = useState(false); @@ -86,6 +86,7 @@ export function ManageBroadcasts() { setArray(result); setLoaded(true); } + const { theme } = props; return (
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx index 7851f355..c63c006a 100644 --- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx +++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx @@ -44,25 +44,56 @@ export function Edit(props) { title: data.title, }; - await UpdateBoardCast(newData, setToast, toast); + try { + await UpdateBoardCast(newData,setToast, toast); + setToast({ + toastStatus: true, + toastType: "success", + toastMessage: "Broadcast updated successfully!", + }); + } catch (error) { + console.error("Error updating broadcast:", error); + setToast({ + toastStatus: true, + toastType: "error", + toastMessage: "Failed to update broadcast. Please try again.", + }); + } }; - const { visible, data } = props; + const { visible, data} = props; + let dark = props.theme; return visible ? (
-
+
-

Edit Broadcast

-
+

Edit Broadcast

+
-
+
-
+
-
+
textarea#txt-desc { + height: 150px !important; +} + +.input i { position: absolute; right: 25px; top: 15px; font-size: 16px; - color: #777777; + color: rgb(134, 131, 131); } -.error { - color: red; - font-size: 12px; - margin-top: 5px; +.input-light i { + position: absolute; + right: 25px; + top: 15px; + font-size: 16px; + color: rgb(134, 131, 131); } -.heading { - text-align: center; - justify-content: center; +.input-dark i { + position: absolute; + right: 25px; + top: 15px; + font-size: 16px; + color: rgb(255, 255, 255); } -.motive { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 30px; +input[type="date"]:not(:valid):before { + content: attr(placeholder); + /* style it like it is a real placeholder */ } +@media screen and (max-width: 750px) { + .card { + width: 80%; + max-width: 600px; + } -.edit { - padding: 20px; - border: 1px solid #bbbaba; - border-radius: 10px; - background-color: #f1f1f1; - box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff; + .submit-btn { + width: 50%; + } } -.dash { - width: 200px; - height: 5px; - border-radius: 20px; - margin-bottom: 10px; - background: rgb(255, 0, 90); - background: linear-gradient( - 45deg, - rgba(255, 0, 90, 1) 0%, - rgba(10, 24, 61, 1) 90% - ); -} +/* For screen sizes between 750px and 1024px */ +@media screen and (min-width: 751px) and (max-width: 1024px) { + .card { + width: 60%; + max-width: 800px; + } -.headingg { - padding: 5px; - font-weight: bold; - font-size: large; + .submit-btn { + width: 40%; + } } -@media screen and (max-width: 600px) { - input { - margin-left: 0; +/* For screen sizes greater than 1024px */ +@media screen and (min-width: 1025px) { + .card { + width: 50%; + max-width: 900px; } -} -.submit-btn { - display: flex; - justify-content: center; - align-items: center; - margin: 20px auto 0 auto; - width: 30%; + .submit-btn { + width: 30%; + } } -.submit-btn-text { - display: flex; - justify-content: center; - align-items: center; -} +/* For dark theme */ +@media (prefers-color-scheme: dark) { + body { + background-color: #121212; + color: #e0e0e0; + } -@media screen and (max-width: 750px) { - .submit-btn-text { - display: flex; - justify-content: center; - align-items: center; - font-size: x-small; - color: black; + .card-light, .input-light, .header-text-light { + background-color: #2c2c2c; + color: #e0e0e0; } - .submit-btn { - width: 60% !important; - margin: 0 auto; + .dash-light { + background: linear-gradient( + 45deg, + rgba(255, 0, 90, 1) 0%, + rgba(10, 24, 61, 1) 90% + ); + } + + .input-light input, + .input-light textarea, + .input1-light select { + border: 1px solid #555555; + background-color: #333333; + color: #e0e0e0; + box-shadow: inset 2px 2px 5px #555555, inset -2px -2px 5px #1a1a1a; + } + + .input-light input:focus, + .input-light textarea:focus, + .input1-light select:focus { + outline: none; + border: double 2px transparent; + border-radius: 10px; + background-image: linear-gradient(#333333, #333333), + linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1)); + background-origin: border-box; + background-clip: padding-box, border-box; + background-color: #333333; } } -.toast-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: transparent; - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; +@media screen and (max-width: 480px) { + .header-text { + font-size: 24px; + } + + .editor { + padding: 10px; + } + + .submit-btn { + width: 80%; + } } \ No newline at end of file