feat: status selectors update
This commit is contained in:
ivannoskov
110
components/placement-post-status-selector.tsx
Normal file
110
components/placement-post-status-selector.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { Pencil } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { PlacementPostStatus } from "@/lib/types/api";
|
||||
import {
|
||||
PLACEMENT_POST_STATUSES,
|
||||
getPlacementPostStatusIcon,
|
||||
getPlacementPostStatusColor,
|
||||
canEditPostStatus,
|
||||
} from "@/lib/config/placement-columns";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface PlacementPostStatusSelectorProps {
|
||||
status: PlacementPostStatus | null;
|
||||
isEditing: boolean;
|
||||
canEdit: boolean;
|
||||
onEdit: () => void;
|
||||
onChange: (status: PlacementPostStatus) => void;
|
||||
onCloseEdit: () => void;
|
||||
}
|
||||
|
||||
export function PlacementPostStatusSelector({
|
||||
status,
|
||||
isEditing,
|
||||
canEdit,
|
||||
onEdit,
|
||||
onChange,
|
||||
onCloseEdit,
|
||||
}: PlacementPostStatusSelectorProps) {
|
||||
if (!status) {
|
||||
return <span className="text-muted-foreground text-xs">—</span>;
|
||||
}
|
||||
|
||||
const canEditThisStatus = canEdit && canEditPostStatus(status);
|
||||
const StatusIcon = getPlacementPostStatusIcon(status);
|
||||
const statusColor = getPlacementPostStatusColor(status);
|
||||
|
||||
if (isEditing && canEditThisStatus) {
|
||||
return (
|
||||
<Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm",
|
||||
statusColor
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusIcon className="h-3.5 w-3.5" />
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-72 p-1" align="start">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{PLACEMENT_POST_STATUSES.map((s) => {
|
||||
const Icon = getPlacementPostStatusIcon(s);
|
||||
const color = getPlacementPostStatusColor(s);
|
||||
const isSelected = s === status;
|
||||
return (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
|
||||
isSelected
|
||||
? "bg-muted font-medium"
|
||||
: "hover:bg-muted/50"
|
||||
)}
|
||||
onClick={() => {
|
||||
onChange(s);
|
||||
onCloseEdit();
|
||||
}}
|
||||
>
|
||||
<Icon className={cn("h-3.5 w-3.5 shrink-0", color)} />
|
||||
<span className="flex-1 text-left">{s}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canEditThisStatus}
|
||||
className={cn(
|
||||
"group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2",
|
||||
statusColor
|
||||
)}
|
||||
onClick={onEdit}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusIcon className="h-3.5 w-3.5" />
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
{canEditThisStatus && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
105
components/placement-status-selector.tsx
Normal file
105
components/placement-status-selector.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { Pencil, Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { PlacementStatus } from "@/lib/types/api";
|
||||
import {
|
||||
PLACEMENT_DEAL_STATUSES,
|
||||
getPlacementStatusIcon,
|
||||
getPlacementStatusColor,
|
||||
} from "@/lib/config/placement-columns";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface PlacementStatusSelectorProps {
|
||||
status: PlacementStatus;
|
||||
isEditing: boolean;
|
||||
canEdit: boolean;
|
||||
onEdit: () => void;
|
||||
onChange: (status: PlacementStatus) => void;
|
||||
onCloseEdit: () => void;
|
||||
}
|
||||
|
||||
export function PlacementStatusSelector({
|
||||
status,
|
||||
isEditing,
|
||||
canEdit,
|
||||
onEdit,
|
||||
onChange,
|
||||
onCloseEdit,
|
||||
}: PlacementStatusSelectorProps) {
|
||||
const StatusIcon = getPlacementStatusIcon(status);
|
||||
const statusColor = getPlacementStatusColor(status);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm",
|
||||
statusColor
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusIcon className="h-3.5 w-3.5" />
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-1" align="start">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{PLACEMENT_DEAL_STATUSES.map((s) => {
|
||||
const Icon = getPlacementStatusIcon(s);
|
||||
const color = getPlacementStatusColor(s);
|
||||
const isSelected = s === status;
|
||||
return (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
|
||||
isSelected
|
||||
? "bg-muted font-medium"
|
||||
: "hover:bg-muted/50"
|
||||
)}
|
||||
onClick={() => {
|
||||
onChange(s);
|
||||
onCloseEdit();
|
||||
}}
|
||||
>
|
||||
<Icon className={cn("h-3.5 w-3.5", color)} />
|
||||
<span className="flex-1 text-left">{s}</span>
|
||||
{isSelected && <Check className="h-3 w-3" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canEdit}
|
||||
className={cn(
|
||||
"group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2",
|
||||
statusColor
|
||||
)}
|
||||
onClick={onEdit}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<StatusIcon className="h-3.5 w-3.5" />
|
||||
<span>{status}</span>
|
||||
</div>
|
||||
{canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user