Skip to content

Commit

Permalink
add skeleton and plans from santry
Browse files Browse the repository at this point in the history
  • Loading branch information
bilalesi committed Feb 26, 2025
1 parent bde5cd9 commit d579ba1
Show file tree
Hide file tree
Showing 17 changed files with 328 additions and 382 deletions.
2 changes: 1 addition & 1 deletion src/app/app/virtual-lab/(home)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default async function Page() {

try {
const labs = await getVirtualLabsOfUser();
if (!labs.data.total) redirectUrl = '/app/virtual-lab/lab/create';
if (!labs.data.total) redirectUrl = '/app/virtual-lab/lab/create?t=f';
else node = <LabsListing virtualLabs={labs.data.results} />;
} catch (error) {
throw new Error((error as { message: string }).message);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,7 @@ export default function Content({ ListCompo, cls }: Props) {
<div className="my-10 h-px bg-gray-100" />
</>
)}
<Form.List
name="include_members"
initialValue={[
{
email: '',
role: 'member',
},
]}
>
<Form.List name="include_members">
{(fields, { add, remove }) => (
<>
<div
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import { Fragment } from 'react';
import { useAtomValue } from 'jotai';
import { atomWithReset } from 'jotai/utils';

Expand Down Expand Up @@ -32,8 +33,8 @@ export default function BasicStepMenu<T>({ steps, title, flowAtom }: StepMenuPro
<Breadcrumb>
<BreadcrumbList className="gap-4">
{steps.map((step, index) => (
<>
<BreadcrumbItem key={step.id}>
<Fragment key={step.id}>
<BreadcrumbItem>
<button
type="button"
aria-label={step.label}
Expand All @@ -48,7 +49,7 @@ export default function BasicStepMenu<T>({ steps, title, flowAtom }: StepMenuPro
{index < steps.length - 1 && (
<BreadcrumbSeparator key={`sep-${step.id}`} className="text-primary-5" />
)}
</>
</Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
Expand Down
10 changes: 9 additions & 1 deletion src/components/VirtualLab/create-entity-flows/invite/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,14 @@ export default function InviteModal({ isOpen, onClose, type, title, context }: P
validateTrigger={['onChange']}
onValuesChange={onValuesChange}
disabled={pending}
initialValues={{
include_members: [
{
email: '',
role: 'member',
},
],
}}
>
<MemberList cls={{ listContainer: '!max-h-[400px] !px-0' }} />
<div className="mt-auto flex items-end justify-end gap-3">
Expand All @@ -157,7 +165,7 @@ export default function InviteModal({ isOpen, onClose, type, title, context }: P
Cancel
</Button>
<Button
key="create-vlab-btn"
key="invite-btn"
className="h-14 rounded-none border-primary-8 bg-primary-8 px-10 text-white hover:!text-white"
type="default"
size="large"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function Footer({
<div className="mt-auto w-full">
<div className="flex items-end justify-end gap-3">
<Button
key="cancel-information-btn"
key="cancel-btn"
className={classNames(
'h-14 rounded-none bg-white px-6 text-primary-8',
'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
Expand All @@ -50,7 +50,7 @@ export default function Footer({
</Button>
{step !== steps.at(0)?.id && (
<Button
key="back-to-information-btn"
key="back-to-btn"
className={classNames(
'h-14 rounded-none bg-white px-6 text-primary-8',
'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
Expand All @@ -65,7 +65,7 @@ export default function Footer({
)}
{step !== steps.at(-1)?.id && (
<Button
key="next-to-members-btn"
key="next-to-btn"
className={classNames(
'h-14 rounded-none border border-primary-8 bg-white px-14 text-primary-8',
'hover:!border hover:!border-primary-5 hover:font-bold hover:shadow-sm',
Expand Down
60 changes: 33 additions & 27 deletions src/components/VirtualLab/create-entity-flows/project/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,12 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
startTransition(async () => {
try {
const id = virtualLabId ?? values.virtual_lab_id;
const result = await createProject(id, values);
const formValues = {
...values,
include_members:
values.include_members?.map((o) => ({ email: o.email, role: o.role })) ?? null,
};
const result = await createProject(id, formValues);
if (result && result.data) {
notify.success(
`Your Project ${values.name} has been created successfully and is now ready to use.`,
Expand Down Expand Up @@ -144,30 +149,31 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
onValuesChange={onValuesChange}
disabled={pending}
>
<motion.div
key={step}
custom={slideDirection}
variants={{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
}}
initial="enter"
animate="center"
exit="exit"
transition={{
duration: 0.3,
type: 'tween',
ease: 'easeInOut',
}}
className="relative flex h-full flex-grow flex-col"
>
{virtualLabId && (
<Form.Item hidden name="virtual_lab_id">
<input name="virtual_lab_id" type="text" value={virtualLabId} hidden />
</Form.Item>
)}
<AnimatePresence initial={false} custom={slideDirection} mode="wait">
<AnimatePresence initial={false} custom={slideDirection} mode="wait">
<motion.div
key={step}
custom={slideDirection}
variants={{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
}}
initial="enter"
animate="center"
exit="exit"
transition={{
duration: 0.3,
type: 'tween',
ease: 'easeInOut',
}}
className="relative flex h-full flex-grow flex-col"
>
{virtualLabId && (
<Form.Item hidden name="virtual_lab_id">
<input name="virtual_lab_id" type="text" value={virtualLabId} hidden />
</Form.Item>
)}

<div className={step !== 'virtual-lab' ? 'hidden' : ''}>
<VirtualLabsList />
</div>
Expand All @@ -180,8 +186,8 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
cls={{ listContainer: 'max-h-[calc(100vh-500px)] mb-5 secondary-scrollbar' }}
/>
</div>
</AnimatePresence>
</motion.div>
</motion.div>
</AnimatePresence>
<div className="mx-auto mt-auto w-full max-w-5xl px-4 lg:max-w-full">
<div className="py-4">
<Footer
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Footer({
<div className="mt-auto w-full">
<div className="flex items-end justify-end gap-3">
<Button
key="cancel-information-btn"
key="cancel-btn"
className={classNames(
'h-14 rounded-none bg-white px-6 text-primary-8',
'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
Expand All @@ -44,7 +44,7 @@ export default function Footer({
</Button>
{step !== virtualLabFlowSteps.at(0)?.id && (
<Button
key="back-to-information-btn"
key="back-to-btn"
className={classNames(
'h-14 rounded-none bg-white px-6 text-primary-8',
'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
Expand All @@ -59,7 +59,7 @@ export default function Footer({
)}
{step !== virtualLabFlowSteps.at(-1)?.id && (
<Button
key="next-to-members-btn"
key="next-to-btn"
className={classNames(
'h-14 rounded-none border border-primary-8 bg-white px-14 text-primary-8',
'hover:!border hover:!border-primary-5 hover:font-bold hover:shadow-sm',
Expand All @@ -77,7 +77,7 @@ export default function Footer({
)}
{step === virtualLabFlowSteps.at(-1)?.id && (
<Button
key="create-project-btn"
key="create-vlab-btn"
className={classNames(
'h-14 rounded-none border border-white bg-primary-9 px-14 text-white',
'hover:!border hover:!border-primary-8 hover:bg-primary-8 hover:font-bold hover:!text-white hover:shadow-sm',
Expand Down
23 changes: 17 additions & 6 deletions src/components/VirtualLab/create-entity-flows/virtual-lab/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useState, useTransition } from 'react';
import { ConfigProvider, Form } from 'antd';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useRouter, useSearchParams } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';

import MemberList from '@/components/VirtualLab/create-entity-flows/common/member-form';
Expand Down Expand Up @@ -53,17 +53,19 @@ function Members() {
export default function CreationForm({ step, onCancel, onStepChange }: Props) {
const notify = useNotification();
const { push: navigate } = useRouter();
const { data } = useSession();
const params = useSearchParams();

const [form] = Form.useForm<VirtualLabPayload>();
const [isFormValid, setIsFormValid] = useState(false);
const [pending, startTransition] = useTransition();

const [slideDirection, setSlideDirection] = useState<'right' | 'left'>('right');
const fields = Form.useWatch<Omit<VirtualLabPayload, 'include_members'>>([], form);

const disableNextPlans = Boolean(!(isFormValid && fields.email_status === 'verified'));
const disableNextPlans = Boolean(!(isFormValid && fields?.email_status === 'verified'));
const disableNextMembers = !fields?.plan_id;
const allowAskCode = Boolean(isFormValid && fields.email_status !== 'verified');
const firstLogin = params.get('t') === 'f';

const onNextStep = () => {
setSlideDirection('left');
Expand All @@ -83,7 +85,11 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {

const resetForm = () => form.resetFields();

const onSelectPlan = (id: string) => form.setFieldValue('plan_id', id);
const onSelectPlan = (id: string) => {
form.setFieldValue('plan_id', id);
if (typeof window !== 'undefined')
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
};

const onValuesChange = () => {
form
Expand All @@ -103,7 +109,12 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
const onFormSubmit = async (values: VirtualLabPayload) => {
startTransition(async () => {
try {
const result = await createVirtualLab(values);
const formValues = {
...values,
include_members:
values.include_members?.map((o) => ({ email: o.email, role: o.role })) ?? null,
};
const result = await createVirtualLab(formValues);
if (result && result.data) {
notify.success(
'Your Virtual Lab has been created successfully and is now ready to use.',
Expand Down Expand Up @@ -139,7 +150,7 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
requiredMark={false}
validateTrigger={['onChange']}
initialValues={{
name: '',
name: firstLogin ? `${data?.user.name}'s virtual lab` : undefined,
description: '',
entity: null,
include_members: [],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Overview({ allowAskCode }: Props) {
return (
<div className="mx-auto h-full w-full max-w-5xl flex-grow bg-white p-12">
<Form.Item
validateDebounce={500}
validateDebounce={800}
label={<span className="font-semibold text-primary-8">Virtual Lab&#39;s Name</span>}
name="name"
className="w-full flex-1"
Expand Down
Loading

0 comments on commit d579ba1

Please sign in to comment.