mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 18:33:01 +00:00
full status implementation
This commit is contained in:
Oliver Bryan
@@ -9,7 +9,10 @@ import SmallUserDisplay from "@/components/small-user-display";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { organisation } from "@/lib/server";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { issue, organisation } from "@/lib/server";
|
||||
|
||||
function OrganisationsDialog({
|
||||
trigger,
|
||||
@@ -27,7 +30,15 @@ function OrganisationsDialog({
|
||||
const { user } = useAuthenticatedSession();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState("info");
|
||||
const [members, setMembers] = useState<OrganisationMemberResponse[]>([]);
|
||||
|
||||
const [statuses, setStatuses] = useState<string[]>([]);
|
||||
const [isCreatingStatus, setIsCreatingStatus] = useState(false);
|
||||
const [newStatusName, setNewStatusName] = useState("");
|
||||
const [statusToRemove, setStatusToRemove] = useState<string | null>(null);
|
||||
const [reassignToStatus, setReassignToStatus] = useState<string>("");
|
||||
|
||||
const [confirmDialog, setConfirmDialog] = useState<{
|
||||
open: boolean;
|
||||
title: string;
|
||||
@@ -46,6 +57,10 @@ function OrganisationsDialog({
|
||||
onConfirm: async () => {},
|
||||
});
|
||||
|
||||
const isAdmin =
|
||||
selectedOrganisation?.OrganisationMember.role === "owner" ||
|
||||
selectedOrganisation?.OrganisationMember.role === "admin";
|
||||
|
||||
const refetchMembers = useCallback(async () => {
|
||||
if (!selectedOrganisation) return;
|
||||
try {
|
||||
@@ -138,6 +153,92 @@ function OrganisationsDialog({
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedOrganisation) {
|
||||
const orgStatuses = (selectedOrganisation.Organisation as unknown as { statuses: string[] })
|
||||
.statuses;
|
||||
setStatuses(
|
||||
Array.isArray(orgStatuses) ? orgStatuses : ["TO DO", "IN PROGRESS", "REVIEW", "DONE"],
|
||||
);
|
||||
}
|
||||
}, [selectedOrganisation]);
|
||||
|
||||
const updateStatuses = async (newStatuses: string[]) => {
|
||||
if (!selectedOrganisation) return;
|
||||
try {
|
||||
await organisation.update({
|
||||
organisationId: selectedOrganisation.Organisation.id,
|
||||
statuses: newStatuses,
|
||||
onSuccess: () => {
|
||||
setStatuses(newStatuses);
|
||||
void refetchOrganisations();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("error updating statuses:", error);
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("error updating statuses:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateStatus = async () => {
|
||||
const trimmed = newStatusName.trim().toUpperCase();
|
||||
if (!trimmed) return;
|
||||
if (statuses.includes(trimmed)) {
|
||||
setNewStatusName("");
|
||||
setIsCreatingStatus(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const newStatuses = [...statuses, trimmed];
|
||||
await updateStatuses(newStatuses);
|
||||
setNewStatusName("");
|
||||
setIsCreatingStatus(false);
|
||||
};
|
||||
|
||||
const handleRemoveStatusClick = (status: string) => {
|
||||
if (statuses.length <= 1) return;
|
||||
setStatusToRemove(status);
|
||||
const remaining = statuses.filter((s) => s !== status);
|
||||
setReassignToStatus(remaining[0] || "");
|
||||
};
|
||||
|
||||
const moveStatus = async (status: string, direction: "up" | "down") => {
|
||||
const currentIndex = statuses.indexOf(status);
|
||||
if (currentIndex === -1) return;
|
||||
|
||||
const nextIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
|
||||
if (nextIndex < 0 || nextIndex >= statuses.length) return;
|
||||
|
||||
const nextStatuses = [...statuses];
|
||||
[nextStatuses[currentIndex], nextStatuses[nextIndex]] = [
|
||||
nextStatuses[nextIndex],
|
||||
nextStatuses[currentIndex],
|
||||
];
|
||||
|
||||
await updateStatuses(nextStatuses);
|
||||
};
|
||||
|
||||
const confirmRemoveStatus = async () => {
|
||||
if (!statusToRemove || !reassignToStatus || !selectedOrganisation) return;
|
||||
|
||||
await issue.replaceStatus({
|
||||
organisationId: selectedOrganisation.Organisation.id,
|
||||
oldStatus: statusToRemove,
|
||||
newStatus: reassignToStatus,
|
||||
onSuccess: async () => {
|
||||
const newStatuses = statuses.filter((s) => s !== statusToRemove);
|
||||
await updateStatuses(newStatuses);
|
||||
setStatusToRemove(null);
|
||||
setReassignToStatus("");
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("error replacing status:", error);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
void refetchMembers();
|
||||
@@ -159,126 +260,240 @@ function OrganisationsDialog({
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-2 items-center">
|
||||
<OrganisationSelect
|
||||
organisations={organisations}
|
||||
selectedOrganisation={selectedOrganisation}
|
||||
onSelectedOrganisationChange={(org) => {
|
||||
setSelectedOrganisation(org);
|
||||
localStorage.setItem("selectedOrganisationId", `${org?.Organisation.id}`);
|
||||
}}
|
||||
onCreateOrganisation={async (organisationId) => {
|
||||
await refetchOrganisations({ selectOrganisationId: organisationId });
|
||||
}}
|
||||
contentClass={
|
||||
"data-[side=bottom]:translate-y-2 data-[side=bottom]:translate-x-0.25"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedOrganisation ? (
|
||||
<div className="flex flex-col gap-2 min-w-0">
|
||||
<div className="w-full border p-2 min-w-0 overflow-hidden">
|
||||
<h2 className="text-xl font-600 mb-2 break-all">
|
||||
{selectedOrganisation.Organisation.name}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
Slug: {selectedOrganisation.Organisation.slug}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
Role: {selectedOrganisation.OrganisationMember.role}
|
||||
</p>
|
||||
{selectedOrganisation.Organisation.description ? (
|
||||
<p className="text-sm break-words">
|
||||
{selectedOrganisation.Organisation.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground break-words">
|
||||
No description
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<OrganisationSelect
|
||||
organisations={organisations}
|
||||
selectedOrganisation={selectedOrganisation}
|
||||
onSelectedOrganisationChange={(org) => {
|
||||
setSelectedOrganisation(org);
|
||||
localStorage.setItem(
|
||||
"selectedOrganisationId",
|
||||
`${org?.Organisation.id}`,
|
||||
);
|
||||
}}
|
||||
onCreateOrganisation={async (organisationId) => {
|
||||
await refetchOrganisations({ selectOrganisationId: organisationId });
|
||||
}}
|
||||
contentClass={
|
||||
"data-[side=bottom]:translate-y-2 data-[side=bottom]:translate-x-0.25"
|
||||
}
|
||||
/>
|
||||
<TabsList>
|
||||
<TabsTrigger value="info">Info</TabsTrigger>
|
||||
<TabsTrigger value="users">Users</TabsTrigger>
|
||||
<TabsTrigger value="issues">Issues</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
<div className="border p-2 min-w-0 overflow-hidden">
|
||||
<h2 className="text-xl font-600 mb-2">
|
||||
{members.length} Member{members.length !== 1 ? "s" : ""}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex flex-col gap-2 max-h-56 overflow-y-scroll">
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.OrganisationMember.id}
|
||||
className="flex items-center justify-between p-2 border"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<SmallUserDisplay user={member.User} />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{member.OrganisationMember.role}
|
||||
</span>
|
||||
|
||||
<TabsContent value="info">
|
||||
<div className="border p-2 min-w-0 overflow-hidden">
|
||||
<h2 className="text-xl font-600 mb-2 break-all">
|
||||
{selectedOrganisation.Organisation.name}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
Slug: {selectedOrganisation.Organisation.slug}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
Role: {selectedOrganisation.OrganisationMember.role}
|
||||
</p>
|
||||
{selectedOrganisation.Organisation.description ? (
|
||||
<p className="text-sm break-words">
|
||||
{selectedOrganisation.Organisation.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground break-words">
|
||||
No description
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="users">
|
||||
<div className="border p-2 min-w-0 overflow-hidden">
|
||||
<h2 className="text-xl font-600 mb-2">
|
||||
{members.length} Member{members.length !== 1 ? "s" : ""}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex flex-col gap-2 max-h-56 overflow-y-scroll">
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.OrganisationMember.id}
|
||||
className="flex items-center justify-between p-2 border"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<SmallUserDisplay user={member.User} />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{member.OrganisationMember.role}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isAdmin &&
|
||||
member.OrganisationMember.role !== "owner" &&
|
||||
member.User.id !== user.id && (
|
||||
<>
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
onClick={() =>
|
||||
handleRoleChange(
|
||||
member.User.id,
|
||||
member.User.name,
|
||||
member.OrganisationMember
|
||||
.role,
|
||||
)
|
||||
}
|
||||
>
|
||||
{member.OrganisationMember.role ===
|
||||
"admin" ? (
|
||||
<ChevronDown className="size-5 text-yellow-500" />
|
||||
) : (
|
||||
<ChevronUp className="size-5 text-green-500" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
onClick={() =>
|
||||
handleRemoveMember(
|
||||
member.User.id,
|
||||
member.User.name,
|
||||
)
|
||||
}
|
||||
>
|
||||
<X className="size-5 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(selectedOrganisation.OrganisationMember.role ===
|
||||
"owner" ||
|
||||
selectedOrganisation.OrganisationMember.role ===
|
||||
"admin") &&
|
||||
member.OrganisationMember.role !== "owner" &&
|
||||
member.User.id !== user.id && (
|
||||
<>
|
||||
))}
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<AddMemberDialog
|
||||
organisationId={selectedOrganisation.Organisation.id}
|
||||
existingMembers={members.map((m) => m.User.username)}
|
||||
onSuccess={refetchMembers}
|
||||
trigger={
|
||||
<Button variant="outline">
|
||||
Add user <Plus className="size-4" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="issues">
|
||||
<div className="border p-2 min-w-0 overflow-hidden">
|
||||
<h2 className="text-xl font-600 mb-2">Issue Statuses</h2>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex flex-col gap-2 max-h-56 overflow-y-scroll">
|
||||
{statuses.map((status, index) => (
|
||||
<div
|
||||
key={status}
|
||||
className="flex items-center justify-between p-2 border"
|
||||
>
|
||||
<span className="text-sm">{status}</span>
|
||||
{isAdmin && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
disabled={index === 0}
|
||||
onClick={() => void moveStatus(status, "up")}
|
||||
aria-label="Move status up"
|
||||
>
|
||||
<ChevronUp className="size-5 text-muted-foreground" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
disabled={index === statuses.length - 1}
|
||||
onClick={() =>
|
||||
void moveStatus(status, "down")
|
||||
}
|
||||
aria-label="Move status down"
|
||||
>
|
||||
<ChevronDown className="size-5 text-muted-foreground" />
|
||||
</Button>
|
||||
{statuses.length > 1 && (
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
onClick={() =>
|
||||
handleRoleChange(
|
||||
member.User.id,
|
||||
member.User.name,
|
||||
member.OrganisationMember.role,
|
||||
)
|
||||
}
|
||||
>
|
||||
{member.OrganisationMember.role ===
|
||||
"admin" ? (
|
||||
<ChevronDown className="size-5 text-yellow-500" />
|
||||
) : (
|
||||
<ChevronUp className="size-5 text-green-500" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="dummy"
|
||||
size="none"
|
||||
onClick={() =>
|
||||
handleRemoveMember(
|
||||
member.User.id,
|
||||
member.User.name,
|
||||
)
|
||||
handleRemoveStatusClick(status)
|
||||
}
|
||||
aria-label="Remove status"
|
||||
>
|
||||
<X className="size-5 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{(selectedOrganisation.OrganisationMember.role === "owner" ||
|
||||
selectedOrganisation.OrganisationMember.role === "admin") && (
|
||||
<AddMemberDialog
|
||||
organisationId={selectedOrganisation.Organisation.id}
|
||||
existingMembers={members.map((m) => m.User.username)}
|
||||
onSuccess={refetchMembers}
|
||||
trigger={
|
||||
<Button variant="outline">
|
||||
Add user <Plus className="size-4" />
|
||||
))}
|
||||
</div>
|
||||
{isAdmin &&
|
||||
(isCreatingStatus ? (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newStatusName}
|
||||
onChange={(e) => setNewStatusName(e.target.value)}
|
||||
placeholder="Status name"
|
||||
className="flex-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
void handleCreateStatus();
|
||||
} else if (e.key === "Escape") {
|
||||
setIsCreatingStatus(false);
|
||||
setNewStatusName("");
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => void handleCreateStatus()}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreatingStatus(true)}
|
||||
>
|
||||
Create status <Plus className="size-4" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No organisations yet.</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<OrganisationSelect
|
||||
organisations={organisations}
|
||||
selectedOrganisation={selectedOrganisation}
|
||||
onSelectedOrganisationChange={(org) => {
|
||||
setSelectedOrganisation(org);
|
||||
localStorage.setItem("selectedOrganisationId", `${org?.Organisation.id}`);
|
||||
}}
|
||||
onCreateOrganisation={async (organisationId) => {
|
||||
await refetchOrganisations({ selectOrganisationId: organisationId });
|
||||
}}
|
||||
contentClass={
|
||||
"data-[side=bottom]:translate-y-2 data-[side=bottom]:translate-x-0.25"
|
||||
}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">No organisations yet.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
@@ -291,6 +506,59 @@ function OrganisationsDialog({
|
||||
confirmText={confirmDialog.confirmText}
|
||||
variant={confirmDialog.variant}
|
||||
/>
|
||||
|
||||
{/* Status removal dialog with reassignment */}
|
||||
<Dialog
|
||||
open={statusToRemove !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setStatusToRemove(null);
|
||||
setReassignToStatus("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Remove Status</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Are you sure you want to remove the "{statusToRemove}" status? Which status
|
||||
would you like issues with this status to be set to?
|
||||
</p>
|
||||
<Select value={reassignToStatus} onValueChange={setReassignToStatus}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{statuses
|
||||
.filter((s) => s !== statusToRemove)
|
||||
.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{status}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex gap-2 justify-end mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setStatusToRemove(null);
|
||||
setReassignToStatus("");
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => void confirmRemoveStatus()}
|
||||
disabled={!reassignToStatus}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user