mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 02:33:01 +00:00
basic CreateSprint component
This commit is contained in:
Oliver Bryan
264
packages/frontend/src/components/create-sprint.tsx
Normal file
264
packages/frontend/src/components/create-sprint.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import { DEFAULT_SPRINT_COLOUR } from "@issue/shared";
|
||||
import { type FormEvent, useMemo, useState } from "react";
|
||||
import { useAuthenticatedSession } from "@/components/session-provider";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import ColourPicker from "@/components/ui/colour-picker";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { sprint } from "@/lib/server";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const SPRINT_NAME_MAX_LENGTH = 64;
|
||||
|
||||
const getStartOfDay = (date: Date) => {
|
||||
const next = new Date(date);
|
||||
next.setHours(0, 0, 0, 0);
|
||||
return next;
|
||||
};
|
||||
|
||||
const getEndOfDay = (date: Date) => {
|
||||
const next = new Date(date);
|
||||
next.setHours(23, 59, 0, 0);
|
||||
return next;
|
||||
};
|
||||
|
||||
const addDays = (date: Date, days: number) => {
|
||||
const next = new Date(date);
|
||||
next.setDate(next.getDate() + days);
|
||||
return next;
|
||||
};
|
||||
|
||||
const getDefaultDates = () => {
|
||||
const today = new Date();
|
||||
return {
|
||||
start: getStartOfDay(today),
|
||||
end: getEndOfDay(addDays(today, 14)),
|
||||
};
|
||||
};
|
||||
|
||||
export function CreateSprint({
|
||||
projectId,
|
||||
trigger,
|
||||
completeAction,
|
||||
}: {
|
||||
projectId?: number;
|
||||
trigger?: React.ReactNode;
|
||||
completeAction?: () => void | Promise<void>;
|
||||
}) {
|
||||
const { user } = useAuthenticatedSession();
|
||||
|
||||
const { start, end } = getDefaultDates();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [colour, setColour] = useState(DEFAULT_SPRINT_COLOUR);
|
||||
const [startDate, setStartDate] = useState(start);
|
||||
const [endDate, setEndDate] = useState(end);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const dateError = useMemo(() => {
|
||||
if (!submitAttempted) return "";
|
||||
if (startDate > endDate) {
|
||||
return "End date must be after start date";
|
||||
}
|
||||
return "";
|
||||
}, [endDate, startDate, submitAttempted]);
|
||||
|
||||
const reset = () => {
|
||||
const defaults = getDefaultDates();
|
||||
setName("");
|
||||
setColour(DEFAULT_SPRINT_COLOUR);
|
||||
setStartDate(defaults.start);
|
||||
setEndDate(defaults.end);
|
||||
setSubmitAttempted(false);
|
||||
setSubmitting(false);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const onOpenChange = (nextOpen: boolean) => {
|
||||
setOpen(nextOpen);
|
||||
if (!nextOpen) {
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSubmitAttempted(true);
|
||||
|
||||
if (name.trim() === "" || name.trim().length > SPRINT_NAME_MAX_LENGTH) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (startDate > endDate) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!user.id) {
|
||||
setError("you must be logged in to create a sprint");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!projectId) {
|
||||
setError("select a project first");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
await sprint.create({
|
||||
projectId,
|
||||
name,
|
||||
color: colour, // hm - always unsure which i should use
|
||||
startDate,
|
||||
endDate,
|
||||
onSuccess: async () => {
|
||||
setOpen(false);
|
||||
reset();
|
||||
try {
|
||||
await completeAction?.();
|
||||
} catch (actionErr) {
|
||||
console.error(actionErr);
|
||||
}
|
||||
},
|
||||
onError: (message) => {
|
||||
setError(message);
|
||||
setSubmitting(false);
|
||||
},
|
||||
});
|
||||
} catch (submitError) {
|
||||
console.error(submitError);
|
||||
setError("failed to create sprint");
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
{trigger || (
|
||||
<Button variant="outline" disabled={!projectId}>
|
||||
Create Sprint
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className={cn("w-md", (error || dateError) && "border-destructive")}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Sprint</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-2">
|
||||
<Field
|
||||
label="Name"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
validate={(value) =>
|
||||
value.trim() === ""
|
||||
? "Cannot be empty"
|
||||
: value.trim().length > SPRINT_NAME_MAX_LENGTH
|
||||
? `Too long (${SPRINT_NAME_MAX_LENGTH} character limit)`
|
||||
: undefined
|
||||
}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="Sprint 1"
|
||||
maxLength={SPRINT_NAME_MAX_LENGTH}
|
||||
/>
|
||||
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Start Date</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="justify-start">
|
||||
{startDate.toLocaleDateString()}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="center">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={startDate}
|
||||
onSelect={(value) => {
|
||||
if (!value) return;
|
||||
setStartDate(getStartOfDay(value));
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>End Date</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="justify-start">
|
||||
{endDate.toLocaleDateString()}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="center">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={endDate}
|
||||
onSelect={(value) => {
|
||||
if (!value) return;
|
||||
setEndDate(getEndOfDay(value));
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Label>Colour</Label>
|
||||
<ColourPicker colour={colour} onChange={setColour} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
|
||||
{error || dateError ? (
|
||||
<Label className="text-destructive text-sm">{error ?? dateError}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 w-full justify-end mt-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={
|
||||
submitting ||
|
||||
((name.trim() === "" || name.trim().length > SPRINT_NAME_MAX_LENGTH) &&
|
||||
submitAttempted) ||
|
||||
(dateError !== "" && submitAttempted)
|
||||
}
|
||||
>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import type {
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import AccountDialog from "@/components/account-dialog";
|
||||
import { CreateIssue } from "@/components/create-issue";
|
||||
import { CreateSprint } from "@/components/create-sprint";
|
||||
import { IssueDetailPane } from "@/components/issue-detail-pane";
|
||||
import { IssuesTable } from "@/components/issues-table";
|
||||
import LogOutButton from "@/components/log-out-button";
|
||||
@@ -48,6 +49,10 @@ export default function App() {
|
||||
|
||||
const [members, setMembers] = useState<UserRecord[]>([]);
|
||||
|
||||
const isAdmin =
|
||||
selectedOrganisation?.OrganisationMember.role === "owner" ||
|
||||
selectedOrganisation?.OrganisationMember.role === "admin";
|
||||
|
||||
const deepLinkParams = useMemo(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const orgSlug = params.get("o")?.trim().toLowerCase() ?? "";
|
||||
@@ -383,15 +388,18 @@ export default function App() {
|
||||
/>
|
||||
)}
|
||||
{selectedOrganisation && selectedProject && (
|
||||
<CreateIssue
|
||||
projectId={selectedProject?.Project.id}
|
||||
members={members}
|
||||
statuses={selectedOrganisation.Organisation.statuses}
|
||||
completeAction={async () => {
|
||||
if (!selectedProject) return;
|
||||
await refetchIssues();
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<CreateIssue
|
||||
projectId={selectedProject?.Project.id}
|
||||
members={members}
|
||||
statuses={selectedOrganisation.Organisation.statuses}
|
||||
completeAction={async () => {
|
||||
if (!selectedProject) return;
|
||||
await refetchIssues();
|
||||
}}
|
||||
/>
|
||||
{isAdmin && <CreateSprint projectId={selectedProject?.Project.id} />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={`flex gap-${BREATHING_ROOM} items-center`}>
|
||||
|
||||
Reference in New Issue
Block a user