External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(onboarding): auto-save database selections on project create instantly

Browse Source
This commit is contained in:
Théo LAGACHE
2026-06-19 14:56:14 +02:00
parent 57122cf149
commit 36ed2e102c
2 changed files with 108 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/hooks/use-create-project.ts
+1 -2
View File
@@ -12,7 +12,7 @@ import type { OnboardingProjectData } from "@/features/onboarding/types";
type ProjectInput = { name: string; description: string; databaseIds: string[] }; type ProjectInput = { name: string; description: string; databaseIds: string[] };
export const useCreateProject = () => { export const useCreateProject = () => {
const { state, updateContext, next } = useOnboarding(); const { state, updateContext } = useOnboarding();
return useMutation({ return useMutation({
mutationFn: async ({ name, description, databaseIds }: ProjectInput) => { mutationFn: async ({ name, description, databaseIds }: ProjectInput) => {
@@ -56,7 +56,6 @@ export const useCreateProject = () => {
}, },
}); });
} }
await next();
}, },
onError: (err: Error) => toast.error(err.message), onError: (err: Error) => toast.error(err.message),
}); });
src/features/onboarding/steps/step-project-create.tsx
+107 -78
View File
@@ -8,90 +8,119 @@ import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useCreateProject } from "@/features/onboarding/hooks/use-create-project"; import { useCreateProject } from "@/features/onboarding/hooks/use-create-project";
import type { OnboardingDatabase, OnboardingProjectData } from "@/features/onboarding/types"; import type {
OnboardingDatabase,
OnboardingProjectData,
} from "@/features/onboarding/types";
export const StepProjectCreate = () => { export const StepProjectCreate = () => {
const { state } = useOnboarding(); const { state, next } = useOnboarding();
const existingProject = state?.context.flowData.project as OnboardingProjectData | undefined; const existingProject = state?.context.flowData.project as
const databases = (state?.context.flowData.databases ?? []) as OnboardingDatabase[]; | OnboardingProjectData
const isUpdateMode = !!existingProject; | undefined;
const databases = (state?.context.flowData.databases ??
[]) as OnboardingDatabase[];
const isUpdateMode = !!existingProject;
const [name, setName] = useState(existingProject?.name ?? ""); const [name, setName] = useState(existingProject?.name ?? "");
const [description, setDescription] = useState(existingProject?.description ?? ""); const [description, setDescription] = useState(
const [databaseIds, setDatabaseIds] = useState<string[]>(existingProject?.databaseIds ?? []); existingProject?.description ?? "",
);
const [databaseIds, setDatabaseIds] = useState<string[]>(
existingProject?.databaseIds ?? [],
);
const mutation = useCreateProject(); const mutation = useCreateProject();
const toggleDb = (id: string) => const toggleDb = (id: string) => {
setDatabaseIds((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id])); const newDbIds = databaseIds.includes(id)
? databaseIds.filter((v) => v !== id)
: [...databaseIds, id];
setDatabaseIds(newDbIds);
mutation.mutate({ name: name || "My project", description, databaseIds: newDbIds });
};
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div> <div>
<h1 className="text-2xl font-semibold"> <h1 className="text-2xl font-semibold">
{isUpdateMode ? "Update project" : "Create a project"} {isUpdateMode ? "Update project" : "Create a project"}
</h1> </h1>
<p className="text-sm text-muted-foreground mt-1">Optional — group databases under a project.</p> <p className="text-sm text-muted-foreground mt-1">
</div> Optional — group databases under a project.
<div className="flex flex-col gap-2"> </p>
<Label htmlFor="project-name">Project name</Label> </div>
<Input <div className="flex flex-col gap-2">
id="project-name" <Label htmlFor="project-name">Project name</Label>
value={name} <Input
onChange={(e) => setName(e.target.value)} id="project-name"
placeholder="My project" value={name}
/> onChange={(e) => setName(e.target.value)}
</div> placeholder="My project"
<div className="flex flex-col gap-2"> />
<Label htmlFor="project-description">Description</Label> </div>
<Textarea <div className="flex flex-col gap-2">
id="project-description" <Label htmlFor="project-description">Description</Label>
value={description} <Textarea
onChange={(e) => setDescription(e.target.value)} id="project-description"
/> value={description}
</div> style={{ resize: "none" }}
{databases.length > 0 && ( onChange={(e) => setDescription(e.target.value)}
<div className="flex flex-col gap-2"> />
<Label>Databases</Label> </div>
<div className="flex flex-col gap-2"> {databases.length > 0 && (
{databases.map((db) => { <div className="flex flex-col gap-2">
const isSelected = databaseIds.includes(db.id); <Label>Databases</Label>
return ( <div className="flex flex-col gap-2">
<button {databases.map((db) => {
key={db.id} const isSelected = databaseIds.includes(db.id);
type="button" return (
onClick={() => toggleDb(db.id)} <button
className={`flex items-center gap-3 rounded-lg border p-3 text-sm transition-colors text-left ${ key={db.id}
isSelected type="button"
? "border-primary/20 bg-primary/10 text-primary" disabled={mutation.isPending}
: "border-border hover:bg-accent/50 hover:border-primary/20" onClick={() => toggleDb(db.id)}
}`} className={`flex items-center gap-3 rounded-lg border p-3 text-sm transition-colors text-left ${
> isSelected
<div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center shrink-0"> ? "border-primary/20 bg-primary/10 text-primary"
<Database className="size-4 text-muted-foreground" /> : "border-border hover:bg-accent/50 hover:border-primary/20"
</div> } ${mutation.isPending ? "opacity-50 cursor-not-allowed" : ""}`}
<div className="flex flex-col gap-0.5 flex-1"> >
<span className="font-medium">{db.name}</span> <div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center shrink-0">
<span className="text-xs text-muted-foreground">{db.engine}</span> <Database className="size-4 text-muted-foreground" />
</div> </div>
{isSelected && ( <div className="flex flex-col gap-0.5 flex-1">
<div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto"> <span className="font-medium">{db.name}</span>
<Check className="size-3 text-primary-foreground" strokeWidth={3} /> <span className="text-xs text-muted-foreground">
</div> {db.engine}
)} </span>
</button> </div>
); {isSelected && (
})} <div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto">
<Check
className="size-3 text-primary-foreground"
strokeWidth={3}
/>
</div> </div>
</div> )}
)} </button>
<Button );
type="button" })}
onClick={() => mutation.mutate({ name, description, databaseIds })} </div>
disabled={!name.trim() || mutation.isPending}
>
{mutation.isPending ? "Saving…" : "Continue"}
</Button>
</div> </div>
); )}
<Button
type="button"
onClick={() =>
mutation.mutate(
{ name: name || "My project", description, databaseIds },
{ onSuccess: () => next() },
)
}
disabled={!name.trim() && !existingProject}
>
{mutation.isPending ? "Saving…" : "Continue"}
</Button>
</div>
);
}; };