Skip to content

Commit

Permalink
Centralize popup (#133)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickbar01234 @johnny-t06
nickbar01234 authored and johnny-t06 committed Mar 27, 2024
1 parent 7500b03 commit 4dd53a8
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 156 deletions.
264 changes: 122 additions & 142 deletions src/components/AddSenior.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import React, {
useState,
} from "react";
import Image, { StaticImageData } from "next/legacy/image";
import cn from "classnames";
import FilterDropdown from "@components/FilterDropdown";
import { Senior, User } from "@prisma/client";
import ImageIcon from "../../public/icons/icon_add_photo.png";
Expand All @@ -15,6 +14,7 @@ import { postSenior } from "src/app/api/senior/route.client";
import z from "zod/lib";
import { seniorSchema } from "@server/model";
import { fullName } from "@utils";
import { Popup } from "./container";

type AddSeniorProps = {
seniors: Senior[];
Expand Down Expand Up @@ -75,7 +75,7 @@ const StudentSelector = ({
}) => {
return (
<div>
<div className="text-neutral-600 mb-1 h-[34px] w-full text-lg">
<div className="text-neutral-600 h-[34px] w-full text-lg">
Assign students
</div>
<FilterDropdown<User>
Expand All @@ -84,7 +84,7 @@ const StudentSelector = ({
display={(usr: User) => (
<div className="m-1 flex whitespace-nowrap rounded-full bg-amber-red px-4 py-2 text-white">
{fullName(usr)}
<div className="flex1 ml-3">
<div className="ml-3 flex-1">
<button
type="button"
onClick={() =>
Expand Down Expand Up @@ -225,165 +225,145 @@ const AddSenior = ({
return (
<>
{showAddSeniorPopUp && (
<div
className="absolute left-1/2 top-1/2 z-50 flex w-screen -translate-x-1/2 -translate-y-1/2 transform
flex-row items-center justify-center text-left md:w-full"
>
<div
className={cn(
"top-5% flex h-[85%] w-[60%] max-w-[495px] flex-col justify-between overflow-auto rounded-lg bg-dark-teal px-6 py-9 text-white",
confirm || error
? "top-[5.5%] w-2/5"
: "top-[2.5%] sm:w-4/5 md:w-1/2"
)}
>
{!confirm && !error ? (
<>
<div>
<div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
{seniorPatch ? "Update" : "Add New"} Senior
</div>
<div>
<div className=" relative mb-4 flex h-2 w-2 flex-col items-center justify-center gap-10 rounded bg-white p-10">
<Image
src={currentImage}
alt="Description"
layout="fill"
/>
<input
type="file"
className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
onChange={handleImageReplace}
/>
</div>
</div>
<Popup className="h-fit w-[36rem]">
{!confirm && !error ? (
<div className="text-white">
<div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
{seniorPatch ? "Update" : "Add New"} Senior
</div>
<div>
<div className=" relative mb-4 flex h-2 w-2 flex-col items-center justify-center gap-10 rounded bg-white p-10">
<Image src={currentImage} alt="Description" layout="fill" />
<input
type="file"
className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
onChange={handleImageReplace}
/>
</div>
</div>

{/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
{/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
later as seniorData.name propgates to backend*/}
<div className="flex">
<div className="mr-2 flex-1 flex-col">
<div className=" mb-2 h-[19px] w-full text-base text-white">
{" "}
First name{" "}
</div>
<input
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
type="text"
value={seniorData.firstname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData({
...seniorData,
firstname: e.target.value,
})
}
/>
</div>

<div className="ml-2 flex-1 flex-col">
<div className=" mb-2 h-[19px] w-full text-base text-white">
{" "}
Last name{" "}
</div>
<input
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
type="text"
value={seniorData.lastname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData((seniorData) => ({
...seniorData,
lastname: e.target.value,
}))
}
/>
</div>
</div>

<div className=" mb-2 h-5 w-full text-base text-white">
{" "}
Location{" "}
<div className="flex">
<div className="mr-2 flex-1 flex-col">
<div className=" mb-2 h-[19px] w-full text-base text-white">
First name
</div>
<input
className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.location}
placeholder="Where are you and your senior meeting?"
value={seniorData.firstname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData({ ...seniorData, location: e.target.value })
setSeniorData({
...seniorData,
firstname: e.target.value,
})
}
/>
</div>

<div className="mb-5 h-2 w-full text-base text-white">
{" "}
Description{" "}
<div className="ml-2 flex-1 flex-col">
<div className="mb-2 h-[19px] w-full text-base text-white">
Last name
</div>
<textarea
className="h-25 mb-3 min-h-[20px] w-full rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-black"
placeholder="Write a brief description about the senior"
value={seniorData.description}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setSeniorData({
<input
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.lastname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData((seniorData) => ({
...seniorData,
description: e.target.value,
})
lastname: e.target.value,
}))
}
/>
</div>
</div>

<StudentSelector
students={students}
selectedStudents={selectedStudents}
setSelectedStudents={setSelectedStudents}
/>
<div className="mb-2 h-5 w-full text-base text-white">
{" "}
Location{" "}
</div>
<input
className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.location}
placeholder="Where are you and your senior meeting?"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData({ ...seniorData, location: e.target.value })
}
/>

<div className="top-0 flex max-h-[36px] w-full flex-row justify-center">
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
<div className="mb-5 h-2 w-full text-base text-white">
{" "}
Description{" "}
</div>
<textarea
className="h-25 mb-3 min-h-[20px] w-full resize-none rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-dark-teal placeholder:text-dark-teal"
placeholder="Write a brief description about the senior"
value={seniorData.description}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setSeniorData({
...seniorData,
description: e.target.value,
})
}
/>

<StudentSelector
students={students}
selectedStudents={selectedStudents}
setSelectedStudents={setSelectedStudents}
/>

<div className="top-0 mt-6 flex max-h-[36px] w-full flex-row justify-center">
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
onClick={handlePopUp}
>
Cancel
</button>
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
onClick={handlePopUp}
>
Cancel
</button>
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
onClick={seniorPatch ? patchAddSenior : postAddSenior}
>
{seniorPatch ? "Update" : "Save"}
</button>
onClick={seniorPatch ? patchAddSenior : postAddSenior}
>
{seniorPatch ? "Update" : "Save"}
</button>
</div>
</div>
) : (
<>
{confirm ? (
<div className="flex flex-col items-center">
<div className="mb-8 text-center text-xl text-white">
{seniorPatch ? "Updated" : "Added"} successfully!
</div>
<button
className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
onClick={handleConfirm}
>
Confirm
</button>
</div>
</>
) : (
<>
{confirm ? (
<div className="flex flex-col items-center">
<div className="mb-8 text-center text-xl">
{seniorPatch ? "Updated" : "Added"} successfully!
</div>
<button
className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
onClick={handleConfirm}
>
Confirm
</button>
) : (
<div className="flex flex-col items-center break-words">
<div className="mb-8 text-center text-xl text-white">
There was an error adding your senior. Please reach out to
your club administrator for help.
</div>
) : (
<div className="flex flex-col items-center break-words">
<div className="mb-8 text-center text-xl">
There was an error adding your senior. Please reach out to
your club administrator for help.
</div>
<button
className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
onClick={handleConfirm}
>
Confirm
</button>
</div>
)}
</>
)}
</div>
</div>
<button
className="mx-1 w-full max-w-[10rem] rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
onClick={handleConfirm}
>
Confirm
</button>
</div>
)}
</>
)}
</Popup>
)}
<AddSeniorTile
showAddSeniorPopUp={showAddSeniorPopUp}
Expand Down
11 changes: 4 additions & 7 deletions src/components/FilterDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function FilterDropdown<T extends Named>({
className="mb-2 h-[36px] w-full flex-row items-end justify-end rounded-md border-2 border-tan bg-white px-3 text-gray-400 focus:outline-none"
onClick={() => setShowOptions(!showOptions)}
>
<div className=" flex h-[32px] flex-row items-center justify-between text-sm">
<div className="flex h-[32px] flex-row items-center justify-between text-sm text-dark-teal">
Select student(s)
<FontAwesomeIcon icon={faCaretDown} className=" text-dark-teal" />
</div>
Expand All @@ -78,13 +78,10 @@ export default function FilterDropdown<T extends Named>({
onMouseEnter={() => setShowOptions(true)}
onMouseLeave={() => setShowOptions(false)}
>
<div
className="top-100 \ absolute z-50 flex max-h-[150px] w-full flex-col overflow-y-auto
bg-white"
>
<div className="top-100 absolute z-50 flex max-h-[150px] w-full flex-col overflow-y-auto bg-white">
{filteredItems.map((item: T, index: number) => (
<span
className="\ hover:bg-legacy-teal flex flex-row items-center border border-light-gray py-2
className="hover:bg-legacy-teal flex flex-row items-center border border-light-gray py-2
pl-2 text-gray-700 hover:cursor-pointer hover:font-bold"
onClick={() => {
onItemSelect(index, item);
Expand All @@ -99,7 +96,7 @@ export default function FilterDropdown<T extends Named>({
</div>
)}
</div>
<div className="my-2 flex flex-row flex-wrap">
<div className="my-2 flex flex-row overflow-x-auto">
{selectedItems.map((item: T, i: number) => (
<div key={i}>{display(item)}</div>
))}
Expand Down
7 changes: 6 additions & 1 deletion src/components/container/Popup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
interface PopupProps {
children?: React.ReactNode;
className?: string;
}

const Popup = (props: PopupProps) => {
return (
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
<div className="flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9">
<div
className={`flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
props.className ?? ""
}`}
>
{props.children}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/selector/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ const Dropdown = <T extends IdentifiableObject>(props: DropdownProps<T>) => {
return (
<div className="relative w-full">
<div
className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-[#F5F0EA] px-4 py-1.5"
className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-teal bg-tan px-4 py-1.5"
onClick={onDisplayDropdown}
>
<span className="text-dark-teal">{header}</span>
<FontAwesomeIcon icon={faCaretDown} className="text-dark-teal" />
</div>
{displayDropdown && (
<div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-[#F5F0EA] p-4">
<div className="absolute z-50 mt-2 inline-block w-full rounded border border-dark-teal bg-tan p-4">
<div className="flex min-h-[128px] flex-col justify-between gap-y-3">
<div className="flex max-h-[128px] flex-col gap-y-3 overflow-y-auto">
{elements.map((element, idx) => (
Expand Down
Loading

0 comments on commit 4dd53a8

Please sign in to comment.