mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: add domainId to project DTOs and project create UI
Some checks failed
ci/woodpecker/push/ci Pipeline failed
Details

Browse Source
This commit is contained in:
Jason Woltje
2026-03-01 16:33:18 -06:00
parent e1e265804a
commit 0b72345c6b
5 changed files with 128 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/api/src/projects/dto/create-project.dto.ts
View File

@@ -8,6 +8,7 @@ import {
MinLength,
MaxLength,
Matches,
IsUUID,
} from "class-validator";
/**
@@ -43,6 +44,10 @@ export class CreateProjectDto {
})
color?: string;
@IsOptional()
@IsUUID("4", { message: "domainId must be a valid UUID" })
domainId?: string;
@IsOptional()
@IsObject({ message: "metadata must be an object" })
metadata?: Record<string, unknown>;

5
apps/api/src/projects/dto/update-project.dto.ts
View File

@@ -8,6 +8,7 @@ import {
MinLength,
MaxLength,
Matches,
IsUUID,
} from "class-validator";
/**
@@ -45,6 +46,10 @@ export class UpdateProjectDto {
})
color?: string | null;
@IsOptional()
@IsUUID("4", { message: "domainId must be a valid UUID" })
domainId?: string | null;
@IsOptional()
@IsObject({ message: "metadata must be an object" })
metadata?: Record<string, unknown>;

15
apps/api/src/projects/projects.service.ts
View File

@@ -47,6 +47,9 @@ export class ProjectsService {
createProjectDto: CreateProjectDto
): Promise<ProjectWithRelations> {
const data: Prisma.ProjectCreateInput = {
...(createProjectDto.domainId
? { domain: { connect: { id: createProjectDto.domainId } } }
: {}),
name: createProjectDto.name,
description: createProjectDto.description ?? null,
color: createProjectDto.color ?? null,
@@ -221,6 +224,18 @@ export class ProjectsService {
if (updateProjectDto.startDate !== undefined) updateData.startDate = updateProjectDto.startDate;
if (updateProjectDto.endDate !== undefined) updateData.endDate = updateProjectDto.endDate;
if (updateProjectDto.color !== undefined) updateData.color = updateProjectDto.color;
if (updateProjectDto.domainId !== undefined)
updateData.domain = updateProjectDto.domainId
? { connect: { id: updateProjectDto.domainId } }
: { disconnect: true };
if (updateProjectDto.domainId !== undefined)
updateData.domain = updateProjectDto.domainId
? {
connect: {
id: updateProjectDto.domainId,
},
}
: { disconnect: true };
if (updateProjectDto.metadata !== undefined) {
updateData.metadata = updateProjectDto.metadata as unknown as Prisma.InputJsonValue;
}

102
apps/web/src/app/(authenticated)/projects/page.tsx
View File

@@ -17,6 +17,8 @@ import {
import { fetchProjects, createProject, deleteProject, ProjectStatus } from "@/lib/api/projects";
import type { Project, CreateProjectDto } from "@/lib/api/projects";
import { useWorkspaceId } from "@/lib/hooks";
import { fetchDomains } from "@/lib/api/domains";
import type { Domain } from "@mosaic/shared";
/* ---------------------------------------------------------------------------
Status badge helpers
@@ -65,11 +67,14 @@ interface ProjectCardProps {
project: Project;
onDelete: (id: string) => void;
onClick: (id: string) => void;
domains: Domain[];
}
function ProjectCard({ project, onDelete, onClick }: ProjectCardProps): ReactElement {
function ProjectCard({ project, onDelete, onClick, domains }: ProjectCardProps): ReactElement {
const [hovered, setHovered] = useState(false);
const status = getStatusStyle(project.status);
// Find domain if project has a domainId
const domain = project.domainId ? domains.find((d) => d.id === project.domainId) : undefined;
return (
<div
@@ -204,6 +209,22 @@ function ProjectCard({ project, onDelete, onClick }: ProjectCardProps): ReactEle
>
{status.label}
</span>
{domain && (
<span
style={{
display: "inline-block",
padding: "2px 10px",
borderRadius: "var(--r)",
background: "rgba(139,92,246,0.15)",
color: "var(--purple)",
fontSize: "0.75rem",
fontWeight: 500,
marginLeft: 8,
}}
>
{domain.name}
</span>
)}
{/* Timestamps */}
<span
@@ -229,6 +250,7 @@ interface CreateDialogProps {
onOpenChange: (open: boolean) => void;
onSubmit: (data: CreateProjectDto) => Promise<void>;
isSubmitting: boolean;
domains: Domain[];
}
function CreateProjectDialog({
@@ -236,20 +258,24 @@ function CreateProjectDialog({
onOpenChange,
onSubmit,
isSubmitting,
domains,
}: CreateDialogProps): ReactElement {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [formError, setFormError] = useState<string | null>(null);
const [domainId, setDomainId] = useState("");
function resetForm(): void {
setName("");
setDescription("");
setFormError(null);
setDomainId("");
}
async function handleSubmit(e: SyntheticEvent): Promise<void> {
e.preventDefault();
setFormError(null);
setDomainId("");
const trimmedName = name.trim();
if (!trimmedName) {
@@ -263,6 +289,9 @@ function CreateProjectDialog({
if (trimmedDesc) {
payload.description = trimmedDesc;
}
if (domainId) {
payload.domainId = domainId;
}
await onSubmit(payload);
resetForm();
} catch (err: unknown) {
@@ -382,6 +411,47 @@ function CreateProjectDialog({
/>
</div>
{/* Domain */}
<div style={{ marginBottom: 16 }}>
<label
htmlFor="project-domain"
style={{
display: "block",
marginBottom: 6,
fontSize: "0.85rem",
fontWeight: 500,
color: "var(--text-2)",
}}
>
Domain (optional)
</label>
<select
id="project-domain"
value={domainId}
onChange={(e) => {
setDomainId(e.target.value);
}}
style={{
width: "100%",
padding: "8px 12px",
background: "var(--bg)",
border: "1px solid var(--border)",
borderRadius: "var(--r)",
color: "var(--text)",
fontSize: "0.9rem",
outline: "none",
boxSizing: "border-box",
}}
>
<option value="">None</option>
{domains.map((d) => (
<option key={d.id} value={d.id}>
{d.name}
</option>
))}
</select>
</div>
{/* Form error */}
{formError !== null && (
<p style={{ color: "var(--danger)", fontSize: "0.85rem", margin: "0 0 12px" }}>
@@ -532,6 +602,7 @@ export default function ProjectsPage(): ReactElement {
const workspaceId = useWorkspaceId();
const [projects, setProjects] = useState<Project[]>([]);
const [domains, setDomains] = useState<Domain[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -601,6 +672,33 @@ export default function ProjectsPage(): ReactElement {
};
}, [workspaceId]);
// Load domains
useEffect(() => {
if (!workspaceId) {
return;
}
let cancelled = false;
const wsId = workspaceId;
async function loadDomains(): Promise<void> {
try {
const response = await fetchDomains(undefined, wsId);
if (!cancelled) {
setDomains(response.data);
}
} catch (err: unknown) {
console.error("[Projects] Failed to fetch domains:", err);
}
}
void loadDomains();
return (): void => {
cancelled = true;
};
}, [workspaceId]);
function handleRetry(): void {
void loadProjects(workspaceId);
}
@@ -779,6 +877,7 @@ export default function ProjectsPage(): ReactElement {
project={project}
onDelete={handleDeleteRequest}
onClick={handleCardClick}
domains={domains}
/>
))}
</div>
@@ -790,6 +889,7 @@ export default function ProjectsPage(): ReactElement {
onOpenChange={setCreateOpen}
onSubmit={handleCreate}
isSubmitting={isCreating}
domains={domains}
/>
{/* Delete Confirmation Dialog */}

2
apps/web/src/lib/api/projects.ts
View File

@@ -95,6 +95,7 @@ export interface CreateProjectDto {
startDate?: string;
endDate?: string;
color?: string;
domainId?: string;
metadata?: Record<string, unknown>;
}
@@ -108,6 +109,7 @@ export interface UpdateProjectDto {
startDate?: string | null;
endDate?: string | null;
color?: string | null;
domainId?: string | null;
metadata?: Record<string, unknown>;
}