devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added abandon popup

Browse Source
This commit is contained in:
Joao Ramos
2023-08-16 00:38:54 +01:00
parent 93a5bcf40f
commit cd71cf4833
7 changed files with 129 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/AbandonPopup.tsx Normal file
View File

@@ -0,0 +1,62 @@
import {Dialog, Transition} from "@headlessui/react";
import {Fragment} from "react";
import Button from "./Low/Button";
interface Props {
isOpen: boolean;
abandonPopupTitle: string;
abandonPopupDescription: string;
abandonConfirmButtonText: string;
onAbandon: Function;
onCancel: Function;
}
export default function AbandonPopup({
isOpen,
abandonPopupTitle,
abandonPopupDescription,
abandonConfirmButtonText,
onAbandon,
onCancel,
}: Props) {
return (
<Transition show={isOpen} as={Fragment}>
<Dialog onClose={onCancel} className="relative z-50">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-black/30" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<div className="fixed inset-0 flex items-center justify-center p-4">
<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
<span>{abandonPopupDescription}</span>
<div className="w-full flex justify-between mt-8">
<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
Cancel
</Button>
<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
{abandonConfirmButtonText}
</Button>
</div>
</Dialog.Panel>
</div>
</Transition.Child>
</Dialog>
</Transition>
);
}

14
src/components/FocusLayer.tsx
View File

@@ -1,3 +1,13 @@
export default function FocusLayer() {
return <div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" />
import {useEffect, useState} from "react";
interface Props {
onFocusLayerMouseEnter: Function,
}
export default function FocusLayer({
onFocusLayerMouseEnter,
}: Props) {
return (
<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
);
}

7
src/components/High/Layout.tsx
View File

@@ -10,16 +10,17 @@ interface Props {
className?: string;
navDisabled?: boolean;
focusMode?: boolean
onFocusLayerMouseEnter?: Function;
}
export default function Layout({user, children, className, navDisabled = false, focusMode = false}: Props) {
export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
const router = useRouter();
return (
<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} />
<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
<div className="h-full w-full flex gap-2">
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} />
<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
<div
className={clsx(
"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",

5
src/components/Navbar.tsx
View File

@@ -9,10 +9,11 @@ interface Props {
user: User;
navDisabled?: boolean;
focusMode?: boolean;
onFocusLayerMouseEnter?: Function;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({user, navDisabled = false, focusMode = false}: Props) {
export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const disableNavigation = preventNavigation(navDisabled, focusMode);
return (
@@ -25,7 +26,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false}: P
<span className="text-right">{user.name}</span>
</Link>
</div>
{focusMode && <FocusLayer/>}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
</header>
);
}

5
src/components/Sidebar.tsx
View File

@@ -14,6 +14,7 @@ interface Props {
path: string;
navDisabled?: boolean;
focusMode?: boolean;
onFocusLayerMouseEnter?: Function;
}
interface NavProps {
@@ -36,7 +37,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
</Link>
);
export default function Sidebar({path, navDisabled = false, focusMode = false }: Props) {
export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const router = useRouter();
const logout = async () => {
@@ -68,7 +69,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false }:
<RiLogoutBoxFill size={20} />
<span className="text-lg font-medium">Log Out</span>
</div>
{focusMode && <FocusLayer />}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
</section>
);
}

22
src/pages/exam.tsx
View File

@@ -30,6 +30,7 @@ import useUser from "@/hooks/useUser";
import useExamStore from "@/stores/examStore";
import Layout from "@/components/High/Layout";
import {speakingReverseMarking, writingReverseMarking} from "@/utils/score";
import AbandonPopup from "@/components/AbandonPopup";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -61,6 +62,7 @@ export default function Page() {
const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]);
const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]);
const [showAbandonPopup, setShowAbandonPopup] = useState(false);
const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
const {user} = useUser({redirectTo: "/login"});
@@ -315,8 +317,26 @@ export default function Page() {
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
<Layout
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
{renderScreen()}
<AbandonPopup
isOpen={showAbandonPopup}
abandonPopupTitle="Leave Exam"
abandonPopupDescription="Are you sure you want to leave the exam? You will lose all your progress."
abandonConfirmButtonText="Confirm"
onAbandon={() => {
console.log('TODO: Handle Abandon');
return true;
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</Layout>
)}
</>

23
src/pages/exercises.tsx
View File

@@ -33,6 +33,7 @@ import Sidebar from "@/components/Sidebar";
import Layout from "@/components/High/Layout";
import {sortByModule} from "@/utils/moduleUtils";
import {speakingReverseMarking, writingReverseMarking} from "@/utils/score";
import AbandonPopup from "@/components/AbandonPopup";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -64,6 +65,7 @@ export default function Page() {
const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]);
const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]);
const [showAbandonPopup, setShowAbandonPopup] = useState(false);
const {user} = useUser({redirectTo: "/login"});
@@ -317,8 +319,27 @@ export default function Page() {
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
<Layout
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
{renderScreen()}
<AbandonPopup
isOpen={showAbandonPopup}
abandonPopupTitle="Leave Exercise"
abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
abandonConfirmButtonText="Confirm"
onAbandon={() => {
console.log('TODO: Handle Abandon');
return true;
}}
onCancel={() => setShowAbandonPopup(false)}
/>
</>
</Layout>
)}
</>