diff --git a/public/images/icons/delete-icon.svg b/public/images/icons/delete-icon.svg new file mode 100644 index 0000000..b8251b7 --- /dev/null +++ b/public/images/icons/delete-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DeleteConfirmation/DeleteConfirmation.js b/src/components/DeleteConfirmation/DeleteConfirmation.js index e69de29..29dd349 100644 --- a/src/components/DeleteConfirmation/DeleteConfirmation.js +++ b/src/components/DeleteConfirmation/DeleteConfirmation.js @@ -0,0 +1,24 @@ +import React from "react"; +import "./DeleteConfirmation.scss"; + +function DeleteConfirmation(props) { + const { lessonName, handleDelete, handleClose } = props; + return ( +
+
Delete Lesson: {lessonName}?
+
+
+ YES +
+
handleClose(false)} + > + NO +
+
+
+ ); +} + +export default DeleteConfirmation; diff --git a/src/components/DeleteConfirmation/DeleteConfirmation.scss b/src/components/DeleteConfirmation/DeleteConfirmation.scss index 3a6070c..d812cec 100644 --- a/src/components/DeleteConfirmation/DeleteConfirmation.scss +++ b/src/components/DeleteConfirmation/DeleteConfirmation.scss @@ -1 +1,43 @@ @import "../../pages/Index/index.scss"; + +.confirmation-background { + background-color: white; + border: 4px solid $assignments-font-color; + box-shadow: $assignments-box-shadow; + border-radius: 1vw; + width: 30vw; + min-height: 10vw; + margin: auto; + padding: 1vw; + position: fixed; + left: 40%; + top: 25%; + + .delete-note { + font-size: 1.5rem; + color: black; + font-weight: bold; + } + + .delete-lesson-button-container { + margin-top: 1vw; + display:flex; + flex-direction: row; + } + + .delete-confirmation-button { + color: black; + background-color: $assignments-light-purple; + font-family: $assignments-roboto-font; + font-size: 1.5rem; + width: 6vw; + border-radius: 8px; + transition-duration: 0.3s; + font-weight: bold; + margin: auto; + cursor: pointer; + &:hover { + background-color: $assignments-light-green; + } + } +} diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.js b/src/components/LessonInfoDisplay/LessonInfoDisplay.js index 0615af2..132957d 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.js +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.js @@ -2,15 +2,28 @@ import React, { useState } from "react"; import { Col, Row } from "reactstrap"; import { compose } from "recompose"; import { withRouter, Redirect } from "react-router-dom"; +import { withFirebase } from "utils/Firebase"; import { useRef } from "react"; import useOutsideClick from "../WordSelector/useOutsideClick"; import "./LessonInfoDisplay.scss"; +import DeleteConfirmation from "../../components/DeleteConfirmation/DeleteConfirmation"; function LessonInfoDisplay(props) { + const { + firebase, + lesson, + template, + setDisplay, + handleDeletedLesson, + nameMap + } = props; const [editLessonRedirect, setEditLessonRedirect] = useState(false); + const [showDelete, setShowDelete] = useState(false); const ref = useRef(); useOutsideClick(ref, () => { - props.setDisplay(false); + if (!showDelete) { + setDisplay(false); + } }); function toFormatDate(date) { @@ -29,7 +42,7 @@ function LessonInfoDisplay(props) {
{students.map(id => ( -
{props.nameMap[id]}
+
{nameMap[id]}
))}
@@ -37,12 +50,19 @@ function LessonInfoDisplay(props) { ); } + function handleDeleteLesson() { + firebase.deleteCustomLesson(lesson.id, lesson.dueDates); + handleDeletedLesson(); + setShowDelete(false); + setDisplay(false); + } + if (editLessonRedirect) { return ( ); @@ -55,16 +75,14 @@ function LessonInfoDisplay(props) {
-
{props.template}
+
{template}
-
- {props.lesson.wordGroup} -
+
{lesson.wordGroup}
- {props.lesson.words.map(word => ( + {lesson.words.map(word => (
{word}
))}
@@ -72,16 +90,24 @@ function LessonInfoDisplay(props) {
-
setEditLessonRedirect(true)} - className="button-container" - > - edit +
+
setEditLessonRedirect(true)} + className="button-container" + > + edit +
+
setShowDelete(true)} + className="button-container" + > + delete +
- {Object.keys(props.lesson.dueDates).map(key => ( -
{LessonCard(key, props.lesson.dueDates[key])}
+ {Object.keys(lesson.dueDates).map(key => ( +
{LessonCard(key, lesson.dueDates[key])}
))}
@@ -89,8 +115,18 @@ function LessonInfoDisplay(props) {
+ {showDelete && ( + + )}
); } -export default compose(withRouter)(LessonInfoDisplay); +export default compose( + withFirebase, + withRouter +)(LessonInfoDisplay); diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss index 21c99da..62295b5 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss @@ -145,11 +145,16 @@ margin-top: 2%; } -.button-container { - margin-right: .5vw; - margin-top: .3vw; - margin-left: 46vw; +.button-container{ cursor: pointer; + margin-right: 1vw; + margin-top: .5vw; +} + +.lesson-info-button-bar { + display:flex; + flex-direction: row; + justify-content: flex-end; } .wide-column { width: 60vw diff --git a/src/components/LessonNameDisplay/LessonNameDisplay.scss b/src/components/LessonNameDisplay/LessonNameDisplay.scss index 2f49171..7e815eb 100644 --- a/src/components/LessonNameDisplay/LessonNameDisplay.scss +++ b/src/components/LessonNameDisplay/LessonNameDisplay.scss @@ -6,7 +6,7 @@ background-color: white; border: 4px solid $assignments-light-purple; border-radius: 1em; - box-shadow: "5px 10px #888888"; + box-shadow: $assignments-box-shadow; margin: auto; margin-top: 1vw; overflow: hidden; diff --git a/src/pages/Confirmation/ConfirmationStyle.scss b/src/pages/Confirmation/ConfirmationStyle.scss index c58f0c9..bc657bc 100644 --- a/src/pages/Confirmation/ConfirmationStyle.scss +++ b/src/pages/Confirmation/ConfirmationStyle.scss @@ -70,7 +70,7 @@ .flex-container .cards-display-section { display: flex; - background-color: $confirmation-light-light-grey-background-color; + background-color: $confirmation-extra-light-grey-background-color; flex-wrap: wrap; flex-grow: 12; height: 100vh; diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index 624a36e..bfae031 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -24,6 +24,7 @@ function CustomLessonsDisplay(props) { const [displayLessonInfo, setDisplayLessonInfo] = useState(false); const [createLessonRedirect, setCreateLessonRedirect] = useState(false); const [confirmationRedirect, setConfirmationRedirect] = useState(false); + const [deletedLesson, setDeletedLesson] = useState(false); const [nameMap, setNameMap] = useState({}); const editLessonRedirect = props?.location.state?.redirect; @@ -32,7 +33,7 @@ function CustomLessonsDisplay(props) { firebase.getAdminCustomLessons(ADMIN_ACCOUNT).then(lesson => { setAllLessons(lesson); }); - }, [editLessonRedirect]); // Updates lessons when redirected to page from CreateAssignment + }, [editLessonRedirect, deletedLesson]); // Updates lessons when redirected to page from CreateAssignment or lesson deleted async function deploymentNameMap(lesson) { let deploymentAccountIds = getDeploymentAccountIdsFromLesson(lesson); @@ -56,6 +57,10 @@ function CustomLessonsDisplay(props) { setDisplayLessonInfo(display); } + function handleDeletedLesson() { + setDeletedLesson(!deletedLesson); + } + function handleClick(lesson) { handleChangeDisplayLessonInfo(!displayLessonInfo); setDisplayLesson(lesson); @@ -152,6 +157,7 @@ function CustomLessonsDisplay(props) { lesson={displayLesson} template={displayLessonTemplate} setDisplay={handleChangeDisplayLessonInfo} + handleDeletedLesson={handleDeletedLesson} nameMap={nameMap} /> )} diff --git a/src/pages/Index/index.scss b/src/pages/Index/index.scss index 7beffa3..a7e0469 100755 --- a/src/pages/Index/index.scss +++ b/src/pages/Index/index.scss @@ -8,4 +8,5 @@ $assignments-light-purple: #b1b0ff; $assignments-light-green: #B7E3D9; $assignments-roboto-font: "Roboto", sans-serif; $confirmation-light-grey-background-color: #DADADA; -$confirmation-light-light-grey-background-color: #EEEEEE; \ No newline at end of file +$confirmation-extra-light-grey-background-color: #EEEEEE; +$assignments-box-shadow: "5px 10px #888888"; \ No newline at end of file diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index 5560eab..3aebdad 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -191,6 +191,26 @@ class Firebase { }) .catch(error => console.error("Error getting admin account: ", error)); + deleteCustomLesson = (lessonId, dueDates) => { + this.db + .collection(FIREBASE_DB.CUSTOM_LESSONS_COL) + .doc(lessonId) + .delete() + .catch(error => console.error("Error deleting doc: ", error)); + + let deploymentAccountIds = getDeploymentAccountIdsFromLesson({ + dueDates: dueDates + }); + deploymentAccountIds.forEach(deploymentAccountId => { + this.db + .collection(FIREBASE_DB.DEPLOYMENT_ACCOUNTS_COL) + .doc(deploymentAccountId) + .update({ + [`${FIREBASE_DB.CUSTOM_LESSONS_FIELD}.${lessonId}`]: app.firestore.FieldValue.delete() + }); + }); + }; + setCustomLesson = ( adminAccountId, lessonTemplate,