mirror of
https://github.com/fosrl/pangolin.git
synced 2025-09-01 07:20:06 +02:00
Add stepper
This commit is contained in:
Owen Schwartz
parent
60b042a16c
commit
d7af10c6dd
9 changed files with 365 additions and 27 deletions
215
src/app/setup/page.tsx
Normal file
215
src/app/setup/page.tsx
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
'use client'
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import Link from 'next/link'
|
||||
import api from '@app/api'
|
||||
import { toast } from '@app/hooks/use-toast'
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
type Step = 'org' | 'site' | 'resources'
|
||||
|
||||
export default function StepperForm() {
|
||||
const [currentStep, setCurrentStep] = useState<Step>('org')
|
||||
const [orgName, setOrgName] = useState('')
|
||||
const [orgId, setOrgId] = useState('')
|
||||
const [siteName, setSiteName] = useState('')
|
||||
const [resourceName, setResourceName] = useState('')
|
||||
const [orgCreated, setOrgCreated] = useState(false)
|
||||
const [orgIdTaken, setOrgIdTaken] = useState(false)
|
||||
|
||||
const checkOrgIdAvailability = useCallback(async (value: string) => {
|
||||
try {
|
||||
const res = await api.get(`/org/checkId`, {
|
||||
params: {
|
||||
orgId: value
|
||||
}
|
||||
})
|
||||
setOrgIdTaken(res.status !== 404)
|
||||
} catch (error) {
|
||||
console.error('Error checking org ID availability:', error)
|
||||
setOrgIdTaken(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const debouncedCheckOrgIdAvailability = useCallback(
|
||||
debounce(checkOrgIdAvailability, 300),
|
||||
[checkOrgIdAvailability]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (orgId) {
|
||||
debouncedCheckOrgIdAvailability(orgId)
|
||||
}
|
||||
}, [orgId, debouncedCheckOrgIdAvailability])
|
||||
|
||||
const showOrgIdError = () => {
|
||||
if (orgIdTaken) {
|
||||
return (
|
||||
<p className="text-sm text-red-500">
|
||||
This ID is already taken. Please choose another.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const generateId = (name: string) => {
|
||||
return name.toLowerCase().replace(/\s+/g, '-')
|
||||
}
|
||||
|
||||
const handleNext = async () => {
|
||||
if (currentStep === 'org') {
|
||||
|
||||
const res = await api
|
||||
.put(`/org`, {
|
||||
orgId: orgId,
|
||||
name: orgName,
|
||||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
title: "Error creating org..."
|
||||
});
|
||||
});
|
||||
|
||||
if (res && res.status === 201) {
|
||||
setCurrentStep('site')
|
||||
setOrgCreated(true)
|
||||
}
|
||||
|
||||
}
|
||||
else if (currentStep === 'site') setCurrentStep('resources')
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (currentStep === 'site') setCurrentStep('org')
|
||||
else if (currentStep === 'resources') setCurrentStep('site')
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">Setup Your Environment</h2>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between mb-2">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'org' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
1
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'org' ? 'text-primary' : 'text-muted-foreground'}`}>Create Org</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'site' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
2
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'site' ? 'text-primary' : 'text-muted-foreground'}`}>Create Site</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center mb-2 ${currentStep === 'resources' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
|
||||
3
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${currentStep === 'resources' ? 'text-primary' : 'text-muted-foreground'}`}>Create Resources</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
<div className="flex-1 h-px bg-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
{currentStep === 'org' && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgName">Organization Name</Label>
|
||||
<Input
|
||||
id="orgName"
|
||||
value={orgName}
|
||||
onChange={(e) => { setOrgName(e.target.value); setOrgId(generateId(e.target.value)) }}
|
||||
placeholder="Enter organization name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="orgId">Organization ID</Label>
|
||||
<Input
|
||||
id="orgId"
|
||||
value={orgId}
|
||||
onChange={(e) => setOrgId(e.target.value)}
|
||||
/>
|
||||
{showOrgIdError()}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This ID is automatically generated from the organization name and must be unique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentStep === 'site' && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="siteName">Site Name</Label>
|
||||
<Input
|
||||
id="siteName"
|
||||
value={siteName}
|
||||
onChange={(e) => setSiteName(e.target.value)}
|
||||
placeholder="Enter site name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentStep === 'resources' && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="resourceName">Resource Name</Label>
|
||||
<Input
|
||||
id="resourceName"
|
||||
value={resourceName}
|
||||
onChange={(e) => setResourceName(e.target.value)}
|
||||
placeholder="Enter resource name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handlePrevious}
|
||||
disabled={currentStep === 'org' || (currentStep === 'site' && orgCreated)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<div className="flex items-center space-x-2">
|
||||
{currentStep !== 'org' ? (
|
||||
<Link
|
||||
href={`/${orgId}/sites`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Skip for now
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
<Button type="button" id="button" onClick={handleNext}>Create</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
if (timeout) clearTimeout(timeout)
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
func(...args)
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue