From 0547ab2fe1701d84753d0e078bba718a79b07a0c Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Fri, 23 May 2025 05:26:26 +0000
Subject: (최겸)기술영업 벤더 개발 초안(index 스키마 미포함 상태)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/tech-vendors-table-floating-bar.tsx      | 240 +++++++++++++++++++++
 1 file changed, 240 insertions(+)
 create mode 100644 lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx

(limited to 'lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx')

diff --git a/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx b/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx
new file mode 100644
index 00000000..2cc83105
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { modifyTechVendors } from "../service"
+import { TechVendor } from "@/db/schema"
+
+interface VendorsTableFloatingBarProps {
+  table: Table<Vendor>
+}
+
+
+export function VendorsTableFloatingBar({ table }: VendorsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "export" | "delete"
+  >()
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+
+  // 2) 
+  function handleSelectStatus(newStatus: Vendor["status"]) {
+    setAction("update-status")
+
+    setConfirmProps({
+      title: `Update ${rows.length} vendor${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
+      description: "This action will override their current status.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifyTechVendors({
+            ids: rows.map((row) => String(row.original.id)),
+            status: newStatus as TechVendor["status"],
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Vendors updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+              <Select
+                onValueChange={(value: Vendor["status"]) => {
+                  handleSelectStatus(value)
+                }}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-status" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <CheckCircle2
+                            className="size-3.5"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update status</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {vendors.status.enumValues.map((status) => (
+                      <SelectItem
+                        key={status}
+                        value={status}
+                        className="capitalize"
+                      >
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export vendors</p>
+                </TooltipContent>
+              </Tooltip>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
-- 
cgit v1.2.3