Skip to content

Commit

Permalink
Archive Mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@mraysu
mraysu committed Apr 9, 2024
1 parent 2a60778 commit 739b1c1
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 60 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/ProgramForm/ProgramArchive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default function ProgramArchiveHeader({ label }: props) {
/>
</svg>

<p className="pb-3 pt-4 text-2xl font-bold">Archive this program?</p>
<ul className="list-disc pb-3 pl-6">
<p className="pb-3 pt-4 text-lg font-bold sm:text-2xl">Archive this program?</p>
<ul className="list-disc pb-3 pl-6 text-sm sm:text-base">
<li>It will be move to the ‘Archived’ programs tab</li>
<li>All ‘Joined’ students become ‘Archived’</li>
<li>You’ll be able to restore this program</li>
Expand Down
72 changes: 72 additions & 0 deletions frontend/src/components/ProgramForm/ProgramCancel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { FormEventHandler, useState } from "react";

import { Button } from "../Button";
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";

type cancelProps = {
onSubmit: FormEventHandler<HTMLFormElement>;
isMobile?: boolean;
};

export default function ProgramCancel({ onSubmit, isMobile = false }: cancelProps) {
const [openForm, setOpenForm] = useState(false);
return (
<Dialog open={openForm} onOpenChange={setOpenForm}>
<DialogTrigger asChild>
{!isMobile ? (
<Button label="Cancel" kind="secondary" type="button" />
) : (
<div
className="absolute flex pl-3 pt-4 text-sm text-neutral-400"
onClick={() => {
setOpenForm(true);
}}
>
Cancel
</div>
)}
</DialogTrigger>
<DialogContent className="h-auto max-w-[80%] rounded-[8px] sm:max-h-[40%] sm:w-auto sm:max-w-[50%]">
<form onSubmit={onSubmit}>
<div className="p-3 min-[450px]:p-10">
<div className="flex w-full justify-center">
<div className="flex h-10 w-10 items-center rounded-full bg-destructive">
<svg
className="w-full"
width="14"
height="23"
viewBox="0 0 12 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.39587 6.3333C3.39587 4.87518 4.7034 3.72888 6.00004 3.72888C7.29668 3.72888 8.60421 4.87518 8.60421 6.3333C8.60421 7.08559 8.42537 7.47963 8.23915 7.74343C8.01287 8.064 7.6959 8.31661 7.14587 8.72914L7.0909 8.77032C6.60135 9.13696 5.9092 9.65531 5.37457 10.4127C4.77953 11.2557 4.43754 12.2939 4.43754 13.625C4.43754 14.4879 5.13709 15.1875 6.00004 15.1875C6.86298 15.1875 7.56254 14.4879 7.56254 13.625C7.56254 12.8727 7.74138 12.4786 7.92759 12.2148C8.15388 11.8943 8.47084 11.6417 9.02087 11.2291L9.07584 11.1879C9.5654 10.8213 10.2575 10.303 10.7922 9.54557C11.3872 8.7026 11.7292 7.66435 11.7292 6.3333C11.7292 3.00064 8.87007 0.603882 6.00004 0.603882C3.13001 0.603882 0.270874 3.00064 0.270874 6.3333C0.270874 7.19625 0.970429 7.8958 1.83337 7.8958C2.69632 7.8958 3.39587 7.19625 3.39587 6.3333Z"
fill="white"
/>
<path
d="M6.00004 20.9166C7.15063 20.9166 8.08337 19.9839 8.08337 18.8333C8.08337 17.6827 7.15063 16.75 6.00004 16.75C4.84945 16.75 3.91671 17.6827 3.91671 18.8333C3.91671 19.9839 4.84945 20.9166 6.00004 20.9166Z"
fill="white"
/>
</svg>
</div>
</div>
<p className="mb-1 mt-5 text-center text-base font-bold sm:text-xl">
Are you sure you want to leave?
</p>
<p className="font-base mb-6 text-center text-sm sm:text-base">
Your changes will not be saved
</p>
<div className="grid gap-6 min-[450px]:flex min-[450px]:justify-center">
<DialogClose asChild>
<Button label="Back" kind="destructive-secondary" type="button" />
</DialogClose>
<DialogClose asChild>
<Button label="Leave" type="submit" kind="destructive" />
</DialogClose>
</div>
</div>
</form>
</DialogContent>
</Dialog>
);
}
146 changes: 88 additions & 58 deletions frontend/src/components/ProgramFormButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { cn } from "../lib/utils";

import { Button } from "./Button";
import ProgramArchiveHeader from "./ProgramForm/ProgramArchive";
import ProgramCancel from "./ProgramForm/ProgramCancel";
import { ProgramInfo } from "./ProgramForm/ProgramInfo";
import { ProgramData } from "./ProgramForm/types";
import { Textfield } from "./Textfield";
Expand Down Expand Up @@ -139,58 +140,13 @@ export default function ProgramFormButton({
setCalendarValue={setCalendarValue}
/>

<div className="flex flex-row-reverse items-end gap-3">
<Dialog>
<Button label={type === "add" ? "Create" : "Save Changes"} type="submit" />
<DialogTrigger>
<Button label="Cancel" kind="secondary" type="button" />
</DialogTrigger>
<DialogContent className="max-h-[40%] w-auto max-w-[80%] rounded-[8px] md:max-w-[50%]">
<div className="p-3 min-[450px]:p-10">
<div className="flex w-full justify-center">
<div className="flex h-10 w-10 items-center rounded-full bg-destructive">
<svg
className="w-full"
width="14"
height="23"
viewBox="0 0 12 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.39587 6.3333C3.39587 4.87518 4.7034 3.72888 6.00004 3.72888C7.29668 3.72888 8.60421 4.87518 8.60421 6.3333C8.60421 7.08559 8.42537 7.47963 8.23915 7.74343C8.01287 8.064 7.6959 8.31661 7.14587 8.72914L7.0909 8.77032C6.60135 9.13696 5.9092 9.65531 5.37457 10.4127C4.77953 11.2557 4.43754 12.2939 4.43754 13.625C4.43754 14.4879 5.13709 15.1875 6.00004 15.1875C6.86298 15.1875 7.56254 14.4879 7.56254 13.625C7.56254 12.8727 7.74138 12.4786 7.92759 12.2148C8.15388 11.8943 8.47084 11.6417 9.02087 11.2291L9.07584 11.1879C9.5654 10.8213 10.2575 10.303 10.7922 9.54557C11.3872 8.7026 11.7292 7.66435 11.7292 6.3333C11.7292 3.00064 8.87007 0.603882 6.00004 0.603882C3.13001 0.603882 0.270874 3.00064 0.270874 6.3333C0.270874 7.19625 0.970429 7.8958 1.83337 7.8958C2.69632 7.8958 3.39587 7.19625 3.39587 6.3333Z"
fill="white"
/>
<path
d="M6.00004 20.9166C7.15063 20.9166 8.08337 19.9839 8.08337 18.8333C8.08337 17.6827 7.15063 16.75 6.00004 16.75C4.84945 16.75 3.91671 17.6827 3.91671 18.8333C3.91671 19.9839 4.84945 20.9166 6.00004 20.9166Z"
fill="white"
/>
</svg>
</div>
</div>
<p className="mb-1 mt-5 text-center text-xl font-bold">
Are you sure you want to leave?
</p>
<p className="font-base mb-6 text-center text-base">
Your changes will not be saved
</p>
<div className="grid gap-6 min-[450px]:flex min-[450px]:justify-center">
<DialogClose asChild>
<Button label="Back" kind="destructive-secondary" />
</DialogClose>
<DialogClose asChild>
<Button
label="Leave"
onClick={() => {
setOpenForm(false);
}}
kind="destructive"
/>
</DialogClose>
</div>
</div>
</DialogContent>
</Dialog>
<div className="flex flex-row-reverse gap-3">
<Button label={type === "add" ? "Create" : "Save Changes"} type="submit" />
<ProgramCancel
onSubmit={() => {
setOpenForm(false);
}}
/>
</div>
</form>
</DialogContentSlide>
Expand All @@ -208,13 +164,87 @@ export default function ProgramFormButton({
/>
</DialogTrigger>
<DialogContent className="bg-white p-3">
<DialogClose asChild>
<div className="absolute cursor-pointer pl-3 pt-4 text-sm text-neutral-400">Cancel</div>
</DialogClose>
<ProgramCancel
onSubmit={() => {
setOpenForm(false);
}}
isMobile={isMobile}
/>
<form onSubmit={handleSubmit(onSubmit)} className={cn(classname)}>
<h2 className="pb-6 text-center text-xl font-bold text-neutral-800">
{type === "add" ? "Add new program" : data?.name}
</h2>
{type === "edit" && (
<Dialog open={openArchive}>
<div className="absolute right-0 top-0 flex max-h-[5%] max-w-[50%] justify-end pr-3 pt-1 pt-4 text-sm text-destructive">
<DialogTrigger asChild>
<div
onClick={() => {
setOpenArchive(true);
}}
>
Archive
</div>
</DialogTrigger>
</div>
<DialogContentSlide className="w-full bg-white object-right sm:w-[50%]">
<div className="flex flex-col justify-center">
<div className="pl-6 pr-6 sm:pl-24 sm:pr-20">
<ProgramArchiveHeader label={data ? data.name : ""} />
<p className="pb-3 pt-4 text-sm">Confirm by entering today&apos;s date</p>
<form>
<Textfield
className="mb-12"
name="date"
placeholder="Date"
register={archiveRegister}
calendar={true}
setCalendarValue={setArchiveCalendarValue}
/>
<div className="absolute inset-x-3 bottom-0 flex flex-row gap-3 pb-3">
<DialogClose asChild>
<Button
label="Back"
kind="destructive-secondary"
size={isMobile ? "wide" : "default"}
onClick={() => {
setOpenArchive(false);
}}
/>
</DialogClose>
<DialogClose asChild>
<Button
label="Archive"
size={isMobile ? "wide" : "default"}
onClick={() => {
const date = new Date(getArchiveValue("date"));
const today = new Date();
if (
date.getUTCDate() === today.getUTCDate() &&
date.getUTCMonth() === today.getUTCMonth() &&
date.getUTCFullYear() === today.getUTCFullYear()
) {
//set archive to true
archiveReset();
setOpenArchive(false);
setOpenForm(false);
}
}}
kind="destructive"
/>
</DialogClose>
</div>{" "}
</form>
</div>{" "}
</div>
</DialogContentSlide>
</Dialog>
)}
{type === "add" ? (
<h2 className="pb-6 text-center text-xl font-bold text-neutral-800">
Add new program
</h2>
) : (
<h2 className="pb-3 pt-10 text-xl font-bold text-neutral-800">{data?.name}</h2>
)}

<ProgramInfo
classname=""
register={register}
Expand Down

0 comments on commit 739b1c1

Please sign in to comment.