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

Solved a small display issue

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-05 10:07:04 +00:00
parent 401d212d85
commit 0bd8b0ab24
3 changed files with 175 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/High/TicketSubmission.tsx
View File

@@ -21,8 +21,7 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
const [isLoading, setIsLoading] = useState(false);
const submit = () => {
if (!type)
return toast.error("Please choose a type!", { toastId: "missing-type" });
if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
if (subject.trim() === "")
return toast.error("Please input a subject!", {
toastId: "missing-subject",
@@ -54,10 +53,7 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
axios
.post(`/api/tickets`, ticket)
.then(() => {
toast.success(
`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`,
{ toastId: "submitted" },
);
toast.success(`Your ticket has been submitted! You will be contacted by e-mail for further discussion.`, {toastId: "submitted"});
onClose();
})
.catch((e) => {
@@ -71,37 +67,20 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
return (
<form className="flex flex-col gap-4 pt-8">
<Input
label="Subject"
type="text"
name="subject"
placeholder="Subject..."
onChange={(e) => setSubject(e)}
/>
<Input label="Subject" type="text" name="subject" placeholder="Subject..." onChange={(e) => setSubject(e)} />
<div className="-md:flex-col flex w-full items-center gap-4">
<div className="flex w-full flex-col gap-3">
<label className="text-mti-gray-dim text-base font-normal">
Type
</label>
<label className="text-mti-gray-dim text-base font-normal">Type</label>
<Select
options={Object.keys(TicketTypeLabel).map((x) => ({
value: x,
label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
}))}
onChange={(value) =>
setType((value?.value as TicketType) ?? undefined)
}
onChange={(value) => setType((value?.value as TicketType) ?? undefined)}
placeholder="Type..."
/>
</div>
<Input
label="Reporter"
type="text"
name="reporter"
onChange={() => null}
value={`${user.name} - ${user.email}`}
disabled
/>
<Input label="Reporter" type="text" name="reporter" onChange={() => null} value={`${user.name} - ${user.email}`} disabled />
</div>
<textarea
className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
@@ -110,22 +89,10 @@ export default function TicketSubmission({ user, page, onClose }: Props) {
spellCheck
/>
<div className="mt-2 flex w-full items-center justify-end gap-4">
<Button
type="button"
color="red"
className="w-full max-w-[200px]"
variant="outline"
onClick={onClose}
isLoading={isLoading}
>
<Button type="button" color="red" className="w-full max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
Cancel
</Button>
<Button
type="button"
className="w-full max-w-[200px]"
isLoading={isLoading}
onClick={submit}
>
<Button type="button" className="w-full max-w-[200px]" isLoading={isLoading} onClick={submit}>
Submit
</Button>
</div>

2
src/components/Modal.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export default function Modal({isOpen, title, onClose, children}: Props) {
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
<Dialog as="div" className="relative z-[200]" onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"

85
src/components/Navbar.tsx
View File

@@ -26,13 +26,7 @@ interface Props {
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({
user,
path,
navDisabled = false,
focusMode = false,
onFocusLayerMouseEnter,
}: Props) {
export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [disablePaymentPage, setDisablePaymentPage] = useState(true);
const [isTicketOpen, setIsTicketOpen] = useState(false);
@@ -43,12 +37,9 @@ export default function Navbar({
const momentDate = moment(date);
const today = moment(new Date());
if (today.add(1, "days").isAfter(momentDate))
return "!bg-mti-red-ultralight border-mti-red-light";
if (today.add(3, "days").isAfter(momentDate))
return "!bg-mti-rose-ultralight border-mti-rose-light";
if (today.add(7, "days").isAfter(momentDate))
return "!bg-mti-orange-ultralight border-mti-orange-light";
if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
};
const showExpirationDate = () => {
@@ -61,40 +52,19 @@ export default function Navbar({
};
useEffect(() => {
if (user.type !== "student" && user.type !== "teacher")
setDisablePaymentPage(false);
isUserFromCorporate(user.id).then((result) =>
setDisablePaymentPage(result),
);
if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
}, [user]);
return (
<>
<Modal
isOpen={isTicketOpen}
onClose={() => setIsTicketOpen(false)}
title="Submit a ticket"
>
<TicketSubmission
user={user}
page={window.location.href}
onClose={() => setIsTicketOpen(false)}
/>
<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
</Modal>
{user && (
<MobileMenu
path={path}
isOpen={isMenuOpen}
onClose={() => setIsMenuOpen(false)}
user={user}
/>
)}
{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
<Link
href={disableNavigation ? "" : "/"}
className=" flex items-center gap-8 md:px-8"
>
<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
</Link>
@@ -106,8 +76,7 @@ export default function Navbar({
"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
)}
data-tip="Submit a help/feedback ticket"
onClick={() => setIsTicketOpen(true)}
>
onClick={() => setIsTicketOpen(true)}>
<BsQuestionCircleFill />
</button>
@@ -122,39 +91,23 @@ export default function Navbar({
? "bg-mti-green-ultralight border-mti-green-light"
: expirationDateColor(user.subscriptionExpirationDate),
"border-mti-gray-platinum bg-white",
)}
>
)}>
{!user.subscriptionExpirationDate && "Unlimited"}
{user.subscriptionExpirationDate &&
moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
</Link>
)}
<Link
href={disableNavigation ? "" : "/profile"}
className="-md:hidden flex items-center justify-end gap-6"
>
<img
src={user.profilePicture}
alt={user.name}
className="h-10 w-10 rounded-full object-cover"
/>
<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
<span className="-md:hidden text-right">
{user.type === "corporate"
? `${user.corporateInformation?.companyInformation.name} |`
: ""}{" "}
{user.name} | {USER_TYPE_LABELS[user.type]}
{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
{USER_TYPE_LABELS[user.type]}
</span>
</Link>
<div
className="cursor-pointer md:hidden"
onClick={() => setIsMenuOpen(true)}
>
<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
<BsList className="text-mti-purple-light h-8 w-8" />
</div>
</div>
{focusMode && (
<FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
)}
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
</header>
</>
);