summaryrefslogtreecommitdiff
path: root/lib/pq/table/pq-lists-toolbar.tsx
blob: 3a85327dcd9276777dc2fae7269fb376042d70a7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Trash, CopyPlus, Plus } from "lucide-react"
import { type Table } from "@tanstack/react-table"
import type { PQList } from "./pq-lists-columns"
// import { PqListForm } from "./add-pq-list-dialog"

interface PQListsToolbarActionsProps {
  table: Table<PQList>;
  onAddClick: () => void;
  onCopyClick: () => void;
  onToggleActive: (rows: PQList[], newIsDeleted: boolean) => void;
}

export function PQListsToolbarActions({
  table,
  onAddClick,
  onCopyClick,
  onToggleActive,
}: PQListsToolbarActionsProps) {
  const selected = table.getFilteredSelectedRowModel().rows.map(r => r.original);
  const allActive = selected.length > 0 && selected.every(item => !item.isDeleted);
  const allDeleted = selected.length > 0 && selected.every(item => item.isDeleted);
  
  let toggleLabel = "";
  let newState: boolean | undefined;
  if (selected.length > 0) {
    if (allActive) {
      toggleLabel = "비활성화";
      newState = true;
    } else if (allDeleted) {
      toggleLabel = "활성화";
      newState = false;
    }
  }
  
  return (
    <div className="flex items-center gap-2">
      {selected.length > 0 && (allActive || allDeleted) && newState !== undefined && (
        <Button
          variant="outline"
          size="sm"
          onClick={() => onToggleActive(selected, newState!)}
        >
          <Trash className="mr-2 h-4 w-4" />
          {toggleLabel}
        </Button>
      )}
      <Button size="sm" onClick={onAddClick}>
        <Plus className="mr-2 h-4 w-4" />
        추가
      </Button>
      <Button size="sm" variant="outline" onClick={onCopyClick}>
        <CopyPlus className="mr-2 h-4 w-4" />
        복사
      </Button>
    </div>
  );
}