Squashed commit of the following:
commit 38f68d5ed489f416ea91630aea3496ab15365e66 Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 16:16:28 2025 -0400 Fix click and drag commit eb5c41cf31fd8032fe88fd47fe5f3e7f517f6d30 Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 15:57:13 2025 -0400 Update tasks commit 979d4b15373df3193eb1bd41c18ece1dbe044eba Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 15:19:20 2025 -0400 Status commit fa26f1fa8fefe1d84b5b2153327c7e8c0132952a Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 14:54:48 2025 -0400 Cleanup project card commit 14d7a1d7d7574dd8745167b280c04603ba22b189 Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 14:49:19 2025 -0400 Improve existing vs new repo commit 277e1f05ef68e5c67d73b246557a6df2ab23d32c Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 13:01:21 2025 -0400 Make repo path unique commit f80ef55f2ba16836276a81844fc33639872bcc53 Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 12:52:20 2025 -0400 Fix styles commit 077869458fcab199a10ef0fe2fe39f9f4216ce5b Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 12:41:48 2025 -0400 First select repo commit 1b0d9c0280e4cb75294348bb53b2a534458a2e37 Author: Louis Knight-Webb <louis@bloop.ai> Date: Mon Jun 16 11:45:19 2025 -0400 Init
This commit is contained in:
Louis Knight-Webb
@@ -1,88 +1,267 @@
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Project, CreateProject, UpdateProject } from 'shared/types'
|
||||
import { AlertCircle } from 'lucide-react'
|
||||
import { makeAuthenticatedRequest } from '@/lib/auth'
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { FolderPicker } from "@/components/ui/folder-picker";
|
||||
import { Project, CreateProject, UpdateProject } from "shared/types";
|
||||
import { AlertCircle, Folder } from "lucide-react";
|
||||
import { makeAuthenticatedRequest } from "@/lib/auth";
|
||||
|
||||
interface ProjectFormProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
project?: Project | null
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
project?: Project | null;
|
||||
}
|
||||
|
||||
export function ProjectForm({ open, onClose, onSuccess, project }: ProjectFormProps) {
|
||||
const [name, setName] = useState(project?.name || '')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
export function ProjectForm({
|
||||
open,
|
||||
onClose,
|
||||
onSuccess,
|
||||
project,
|
||||
}: ProjectFormProps) {
|
||||
const [name, setName] = useState(project?.name || "");
|
||||
const [gitRepoPath, setGitRepoPath] = useState(project?.git_repo_path || "");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [showFolderPicker, setShowFolderPicker] = useState(false);
|
||||
const [repoMode, setRepoMode] = useState<"existing" | "new">("existing");
|
||||
const [parentPath, setParentPath] = useState("");
|
||||
const [folderName, setFolderName] = useState("");
|
||||
|
||||
const isEditing = !!project
|
||||
const isEditing = !!project;
|
||||
|
||||
// Auto-populate project name from directory name
|
||||
const handleGitRepoPathChange = (path: string) => {
|
||||
setGitRepoPath(path);
|
||||
|
||||
// Only auto-populate name for new projects
|
||||
if (!isEditing && path) {
|
||||
// Extract the last part of the path (directory name)
|
||||
const dirName = path.split("/").filter(Boolean).pop() || "";
|
||||
if (dirName) {
|
||||
// Clean up the directory name for a better project name
|
||||
const cleanName = dirName
|
||||
.replace(/[-_]/g, " ") // Replace hyphens and underscores with spaces
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase()); // Capitalize first letter of each word
|
||||
setName(cleanName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let finalGitRepoPath = gitRepoPath;
|
||||
|
||||
// For new repo mode, construct the full path
|
||||
if (!isEditing && repoMode === "new") {
|
||||
finalGitRepoPath = `${parentPath}/${folderName}`.replace(/\/+/g, "/");
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
const updateData: UpdateProject = { name }
|
||||
const response = await makeAuthenticatedRequest(`/api/projects/${project.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(updateData),
|
||||
})
|
||||
|
||||
const updateData: UpdateProject = {
|
||||
name,
|
||||
git_repo_path: finalGitRepoPath,
|
||||
};
|
||||
const response = await makeAuthenticatedRequest(
|
||||
`/api/projects/${project.id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
body: JSON.stringify(updateData),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update project')
|
||||
throw new Error("Failed to update project");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (!data.success) {
|
||||
throw new Error(data.message || "Failed to update project");
|
||||
}
|
||||
} else {
|
||||
const createData: CreateProject = {
|
||||
name
|
||||
}
|
||||
const response = await makeAuthenticatedRequest('/api/projects', {
|
||||
method: 'POST',
|
||||
const createData: CreateProject = {
|
||||
name,
|
||||
git_repo_path: finalGitRepoPath,
|
||||
use_existing_repo: repoMode === "existing",
|
||||
};
|
||||
const response = await makeAuthenticatedRequest("/api/projects", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(createData),
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to create project')
|
||||
throw new Error("Failed to create project");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (!data.success) {
|
||||
throw new Error(data.message || "Failed to create project");
|
||||
}
|
||||
}
|
||||
|
||||
onSuccess()
|
||||
setName('')
|
||||
onSuccess();
|
||||
setName("");
|
||||
setGitRepoPath("");
|
||||
setParentPath("");
|
||||
setFolderName("");
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'An error occurred')
|
||||
setError(error instanceof Error ? error.message : "An error occurred");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setName(project?.name || '')
|
||||
setError('')
|
||||
onClose()
|
||||
}
|
||||
setName(project?.name || "");
|
||||
setGitRepoPath(project?.git_repo_path || "");
|
||||
setError("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEditing ? 'Edit Project' : 'Create New Project'}
|
||||
{isEditing ? "Edit Project" : "Create New Project"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEditing
|
||||
? 'Make changes to your project here. Click save when you\'re done.'
|
||||
: 'Add a new project to your workspace. You can always edit it later.'
|
||||
}
|
||||
{isEditing
|
||||
? "Make changes to your project here. Click save when you're done."
|
||||
: "Choose whether to use an existing git repository or create a new one."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!isEditing && (
|
||||
<div className="space-y-3">
|
||||
<Label>Repository Type</Label>
|
||||
<div className="flex space-x-4">
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="repoMode"
|
||||
value="existing"
|
||||
checked={repoMode === "existing"}
|
||||
onChange={(e) =>
|
||||
setRepoMode(e.target.value as "existing" | "new")
|
||||
}
|
||||
className="text-primary"
|
||||
/>
|
||||
<span className="text-sm">Use existing repository</span>
|
||||
</label>
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="repoMode"
|
||||
value="new"
|
||||
checked={repoMode === "new"}
|
||||
onChange={(e) =>
|
||||
setRepoMode(e.target.value as "existing" | "new")
|
||||
}
|
||||
className="text-primary"
|
||||
/>
|
||||
<span className="text-sm">Create new repository</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{repoMode === "existing" || isEditing ? (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="git-repo-path">Git Repository Path</Label>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
id="git-repo-path"
|
||||
type="text"
|
||||
value={gitRepoPath}
|
||||
onChange={(e) => handleGitRepoPathChange(e.target.value)}
|
||||
placeholder="/path/to/your/existing/repo"
|
||||
required
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowFolderPicker(true)}
|
||||
>
|
||||
<Folder className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{!isEditing && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Select a folder that already contains a git repository
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="parent-path">Parent Directory</Label>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
id="parent-path"
|
||||
type="text"
|
||||
value={parentPath}
|
||||
onChange={(e) => setParentPath(e.target.value)}
|
||||
placeholder="/path/to/parent/directory"
|
||||
required
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowFolderPicker(true)}
|
||||
>
|
||||
<Folder className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Choose where to create the new repository
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="folder-name">Repository Folder Name</Label>
|
||||
<Input
|
||||
id="folder-name"
|
||||
type="text"
|
||||
value={folderName}
|
||||
onChange={(e) => {
|
||||
setFolderName(e.target.value);
|
||||
if (e.target.value) {
|
||||
setName(
|
||||
e.target.value
|
||||
.replace(/[-_]/g, " ")
|
||||
.replace(/\b\w/g, (l) => l.toUpperCase())
|
||||
);
|
||||
}
|
||||
}}
|
||||
placeholder="my-awesome-project"
|
||||
required
|
||||
className="flex-1"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The project name will be auto-populated from this folder name
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Project Name</Label>
|
||||
<Input
|
||||
@@ -98,9 +277,7 @@ export function ProjectForm({ open, onClose, onSuccess, project }: ProjectFormPr
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{error}
|
||||
</AlertDescription>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
@@ -113,12 +290,49 @@ export function ProjectForm({ open, onClose, onSuccess, project }: ProjectFormPr
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || !name.trim()}>
|
||||
{loading ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Project'}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={
|
||||
loading ||
|
||||
!name.trim() ||
|
||||
(repoMode === "existing" || isEditing
|
||||
? !gitRepoPath.trim()
|
||||
: !parentPath.trim() || !folderName.trim())
|
||||
}
|
||||
>
|
||||
{loading
|
||||
? "Saving..."
|
||||
: isEditing
|
||||
? "Save Changes"
|
||||
: "Create Project"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
|
||||
<FolderPicker
|
||||
open={showFolderPicker}
|
||||
onClose={() => setShowFolderPicker(false)}
|
||||
onSelect={(path) => {
|
||||
if (repoMode === "existing" || isEditing) {
|
||||
handleGitRepoPathChange(path);
|
||||
} else {
|
||||
setParentPath(path);
|
||||
}
|
||||
setShowFolderPicker(false);
|
||||
}}
|
||||
value={repoMode === "existing" || isEditing ? gitRepoPath : parentPath}
|
||||
title={
|
||||
repoMode === "existing" || isEditing
|
||||
? "Select Git Repository"
|
||||
: "Select Parent Directory"
|
||||
}
|
||||
description={
|
||||
repoMode === "existing" || isEditing
|
||||
? "Choose an existing git repository"
|
||||
: "Choose where to create the new repository"
|
||||
}
|
||||
/>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user