Skip to content

Commit

Permalink
add upload flow validation
Browse files Browse the repository at this point in the history
  • Loading branch information
crysg committed Jan 28, 2025
1 parent 7c54a0d commit 6b71730
Show file tree
Hide file tree
Showing 6 changed files with 272 additions and 108 deletions.
52 changes: 52 additions & 0 deletions resources/js/Components/BigDangerAlert.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import {
XCircleIcon,
} from '@heroicons/react/24/solid';

export default function BigDangerAlert({ errDict, className }) {
if (errDict == undefined || Object.keys(errDict).length == 0) {
return null;
}

return (<div className={className}>
<div className="flex w-full rounded-lg border-l-[6px] border-red bg-red-50 px-7 py-8 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.08)] md:p-9">
<div className="mr-5 flex h-[34px] w-full max-w-[34px] items-center justify-center rounded-lg bg-red">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_961_15645)">
<path
d="M9 0.506256C4.30313 0.506256 0.50625 4.30313 0.50625 9.00001C0.50625 13.6969 4.30313 17.5219 9 17.5219C13.6969 17.5219 17.5219 13.6969 17.5219 9.00001C17.5219 4.30313 13.6969 0.506256 9 0.506256ZM9 16.2563C5.00625 16.2563 1.77188 12.9938 1.77188 9.00001C1.77188 5.00626 5.00625 1.77188 9 1.77188C12.9938 1.77188 16.2563 5.03438 16.2563 9.02813C16.2563 12.9938 12.9938 16.2563 9 16.2563Z"
fill="white"
/>
<path
d="M11.5875 6.38438C11.3344 6.13125 10.9406 6.13125 10.6875 6.38438L9 8.1L7.28438 6.38438C7.03125 6.13125 6.6375 6.13125 6.38438 6.38438C6.13125 6.6375 6.13125 7.03125 6.38438 7.28438L8.1 9L6.38438 10.7156C6.13125 10.9688 6.13125 11.3625 6.38438 11.6156C6.49688 11.7281 6.66563 11.8125 6.83438 11.8125C7.00313 11.8125 7.17188 11.7563 7.28438 11.6156L9 9.9L10.7156 11.6156C10.8281 11.7281 10.9969 11.8125 11.1656 11.8125C11.3344 11.8125 11.5031 11.7563 11.6156 11.6156C11.8688 11.3625 11.8688 10.9688 11.6156 10.7156L9.9 9L11.6156 7.28438C11.8406 7.03125 11.8406 6.6375 11.5875 6.38438Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_961_15645">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 text-base font-semibold text-[#BC1C21]">
There were 1 errors with your submission
</h5>
<ul className="list-inside list-disc">
<li className="text-base leading-relaxed text-red-light">
Lorem Ipsum is simply dummy text of the printing
</li>
</ul>
</div>
</div>

</div>);
}

28 changes: 28 additions & 0 deletions resources/js/Components/DangerAlert.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import {
XCircleIcon,
} from '@heroicons/react/24/solid';

export default function DangerAlert({ errDict, className }) {
if (errDict == undefined || Object.keys(errDict).length == 0) {
return null;
}

return (<div className={className}>
<div className="rounded-lg shadow-md bg-red-50 pt-4 pb-4 pl-6 pr-6">
<div className="flex">
<XCircleIcon aria-hidden="true" className="shrink-0 inline-block align-middle size-5 shrink-0 text-red-400" />
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">There were errors with your submission</h3>
<div className="mt-2 text-sm text-red-700">
<ul role="list" className="list-disc space-y-1 pl-5">
{ Object.entries(errDict).map(([k,v]) => (
<li key={k}>{k}: {v}</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>);
}
20 changes: 20 additions & 0 deletions resources/js/Components/SuccessAlert.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import {
CheckCircleIcon,
} from '@heroicons/react/24/solid';

export default function SuccessAlert({ errDict, className }) {
if (errDict !== undefined && Object.keys(errDict).length !== 0) {
return null;
}
return (<div className={className}>
<div className="pt-4 pb-4 pr-6 pl-6 shadow-md rounded-lg bg-green-50">
<div className="flex">
<CheckCircleIcon aria-hidden="true" className="shrink-0 inline-block align-middle size-5 text-green-400" />
<div className="ml-3">
<p className="text-sm font-medium text-green-800">Submission can be uploaded!</p>
</div>
</div>
</div>
</div>);
}
79 changes: 52 additions & 27 deletions resources/js/Layouts/AppLayout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
ChartBarIcon,
ClipboardDocumentListIcon,
PlusIcon,
PlusCircleIcon,
InformationCircleIcon,
} from '@heroicons/react/24/outline';

Expand All @@ -44,9 +45,17 @@ const navigationAboveLine = [
{ name: 'Model 2', href: route('dashboard') },
],
},
{
name: 'Actions',
icon: PlusCircleIcon,
visibility_type: VisibilityType.PRIVATE_ONLY ,
children: [
{ name: 'Upload Data', href: route('file-upload') },
{ name: 'Start Prediction', href: route('run-inference') },
],
},
{ name: 'View Data', href: route('view-data'), icon: DocumentDuplicateIcon ,visibility_type: VisibilityType.PRIVATE_ONLY },
{ name: 'Download Data', href: route('download-data'), icon: DocumentDuplicateIcon ,visibility_type: VisibilityType.PRIVATE_ONLY },
{ name: 'File Upload', href: route('file-upload'), icon: DocumentDuplicateIcon ,visibility_type: VisibilityType.PRIVATE_ONLY },
{ name: 'Data Dictionary', href: route('data-dictionary'), icon: BookOpenIcon, visibility_type: VisibilityType.BOTH},
{ name: 'Create Institution', href: route('create-inst'), icon: DocumentDuplicateIcon ,visibility_type: VisibilityType.PRIVATE_ONLY }, // TODO flip this to DATAKIND_ONLY after dev
];
Expand Down Expand Up @@ -105,6 +114,38 @@ export default function AppLayout({ title, renderHeader, children }) {
</a>)

) : (
(item.children.some(e => e.name === title)) ? (
<Disclosure defaultOpen as="div">
<DisclosureButton
className={classNames(
(item.name == title) ? 'bg-gray-50' : 'hover:bg-gray-50',
'group flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/12 font-semibold text-[#637381]',
)}
>
<item.icon aria-hidden="true" className="size-6 shrink-0" />
{item.name}
<ChevronRightIcon
aria-hidden="true"
className="size-5 shrink-0 text-gray-400 group-data-[open]:rotate-90 group-data-[open]:text-gray-500"
/>
</DisclosureButton>
<DisclosurePanel as="ul" className="mt-1 px-2">
{item.children.map((subItem) => (
<li key={subItem.name}>
<DisclosureButton
as="a"
href={subItem.href}
className={classNames(
(subItem.name == title) ? 'text-[#f79222]' : 'text-[#637381] hover:bg-gray-50',
'block font-semibold rounded-md py-2 pl-9 pr-2 text-sm/12',
)}
>
{subItem.name}
</DisclosureButton>
</li>
))}
</DisclosurePanel>
</Disclosure>) : (
<Disclosure as="div">
<DisclosureButton
className={classNames(
Expand All @@ -126,16 +167,17 @@ export default function AppLayout({ title, renderHeader, children }) {
as="a"
href={subItem.href}
className={classNames(
(subItem.name == title) ? 'bg-gray-50' : 'hover:bg-gray-50',
'block rounded-md py-2 pl-9 pr-2 text-sm/12 text-[#637381]',
(subItem.name == title) ? 'text-[#f79222]' : 'text-[#637381] hover:bg-gray-50',
'block font-semibold rounded-md py-2 pl-9 pr-2 text-sm/12',
)}
>
{subItem.name}
</DisclosureButton>
</li>
))}
</DisclosurePanel>
</Disclosure>
</Disclosure>)

)}
</li>)
))
Expand Down Expand Up @@ -163,32 +205,15 @@ export default function AppLayout({ title, renderHeader, children }) {
<header>
<nav className="basis-2/12 bg-white shadow-md flex flex-1 auto w-1/8 flex-row gap-y-6 overflow-y-auto border-r border-gray-200 bg-blue px-6 min-h-96">
<ul role="list" className="flex flex-1 flex-col gap-y-12">
<div className="flex h-16 shrink-0 flex-col items-center pt-12">
<a href={route('home')}>
<AppLogo className="h-8 w-auto" />
</a>
</div>
{user ? (
<div className="flex items-center justify-center px-3">
<a className="flex items-center gap-2 text-gray-900 h-[50px] px-6 bg-[#f79222] rounded-md justify-center items-center gap-2 inline-flex"
href= {route('run-inference')}
>
<PlusIcon aria-hidden="true" className="size-6 shrink-0 text-white" />
<div className="text-center text-white text-base font-medium font-['Helvetica Neue'] leading-normal">Predict</div>
</a>
</div>
) : (<></>)}



<ul>
<div className="flex h-16 shrink-0 flex-col items-center pt-12" key="logo">
<a href={route('home')}><AppLogo className="h-8 w-auto" /></a>
</div>
<ul>
{renderNav(navigationAboveLine)}
<hr className="h-1 my-8 bg-[#dfe4ea] border-0"></hr>

<hr className="h-1 my-8 bg-[#dfe4ea] border-0"></hr>
{renderNav(navigationBelowLine)}

{user ? (
<div className="flex items-end gap-x-4 px-6 py-3 pb-48 text-sm/6 font-semibold text-[#637381] hover:bg-gray-50 hidden">
<div className="flex items-end gap-x-4 px-6 py-3 pb-48 text-sm/6 font-semibold text-[#637381] hover:bg-gray-50 hidden" key="profile">
<span className="sr-only">Your profile</span>
<Dropdown>
<Dropdown.Trigger>
Expand Down
Loading

0 comments on commit 6b71730

Please sign in to comment.