feat: status selectors update

2026-02-04 12:16:34 +03:00
parent e27a171c63
commit f7597270e5
4 changed files with 354 additions and 94 deletions
--- a/components/placement-status-selector.tsx
+++ b/components/placement-status-selector.tsx
@@ -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>
+  );
+}