From 2e61a66dad8908f24fd486da448d55b06befbf35 Mon Sep 17 00:00:00 2001
From: sokphaladam <sokphaladam@gmail.com>
Date: Fri, 31 Jan 2025 18:06:35 +0700
Subject: [PATCH] add board tool component and integrate with board layout

---
 src/app/storybook/board/page.tsx             |  56 ++++-
 src/app/storybook/layout.tsx                 |   6 +-
 src/components/board/board-filter-dialog.tsx | 192 +++++++++++++++
 src/components/board/board-filter.tsx        | 240 +++++++++++++++++++
 src/components/board/board-tool.tsx          |  38 +++
 src/components/board/index.tsx               |  95 ++++----
 src/components/gui/toolbar.tsx               |   2 +-
 7 files changed, 568 insertions(+), 61 deletions(-)
 create mode 100644 src/components/board/board-filter-dialog.tsx
 create mode 100644 src/components/board/board-filter.tsx
 create mode 100644 src/components/board/board-tool.tsx

diff --git a/src/app/storybook/board/page.tsx b/src/app/storybook/board/page.tsx
index dcf2dcd1..53305925 100644
--- a/src/app/storybook/board/page.tsx
+++ b/src/app/storybook/board/page.tsx
@@ -1,19 +1,59 @@
 "use client";
 import Board from "@/components/board";
+import { BoardFilter } from "@/components/board/board-filter";
+import { BoardFilterProps } from "@/components/board/board-filter-dialog";
+import { BoardTool } from "@/components/board/board-tool";
 import { useState } from "react";
 import ReactGridLayout from "react-grid-layout";
 
+interface DashboardProps {
+  layout: ReactGridLayout.Layout[];
+  data: {
+    filters: BoardFilterProps[];
+  };
+}
+
 export default function StorybookBoardPage() {
-  const [layout, setLayout] = useState<ReactGridLayout.Layout[]>([
-    { x: 0, y: 0, w: 1, h: 1, i: "0" },
-    { x: 1, y: 0, w: 1, h: 1, i: "1" },
-    { x: 2, y: 0, w: 1, h: 1, i: "2" },
-    { x: 3, y: 0, w: 1, h: 1, i: "3" },
-  ]);
+  const [editMode, setEditMode] = useState<
+    "ADD_CHART" | "REARRANGING_CHART" | null
+  >(null);
+  const [value, setValue] = useState<DashboardProps>({
+    layout: [
+      { x: 0, y: 0, w: 1, h: 1, i: "0" },
+      { x: 1, y: 0, w: 1, h: 1, i: "1" },
+      { x: 2, y: 0, w: 1, h: 1, i: "2" },
+      { x: 3, y: 0, w: 1, h: 1, i: "3" },
+    ],
+    data: { filters: [] },
+  });
+
+  console.log(value);
 
   return (
-    <div className="bg-secondary min-h-full w-full flex-1">
-      <Board layout={layout} onChange={setLayout} />
+    <div className="min-h-full w-full flex-1">
+      <BoardFilter
+        filters={value.data.filters}
+        onFilters={(v) =>
+          setValue({
+            ...value,
+            data: {
+              ...value.data,
+              filters: v,
+            },
+          })
+        }
+      />
+      <BoardTool editMode={editMode} setEditMode={setEditMode} />
+      <Board
+        layout={value.layout}
+        onChange={(v) =>
+          setValue({
+            ...value,
+            layout: v,
+          })
+        }
+        editMode={editMode}
+      />
     </div>
   );
 }
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 5210e51c..c350c5b7 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -1,5 +1,6 @@
 import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
 import { Separator } from "@/components/ui/separator";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { Component, Layers2 } from "lucide-react";
 import StorybookThemeSwitcher from "./storybook-theme-switcher";
 
@@ -55,8 +56,11 @@ export default function StorybookRootLayout({
             text="Chart"
             href="/storybook/chart"
           />
+          <SidebarMenuItem icon={Component} text="Board" href="/story/board" />
+        </div>
+        <div className="flex-1 overflow-y-auto p-4">
+          <TooltipProvider>{children}</TooltipProvider>
         </div>
-        <div className="flex-1 overflow-y-auto p-4">{children}</div>
       </div>
     </body>
   );
diff --git a/src/components/board/board-filter-dialog.tsx b/src/components/board/board-filter-dialog.tsx
new file mode 100644
index 00000000..de3efcce
--- /dev/null
+++ b/src/components/board/board-filter-dialog.tsx
@@ -0,0 +1,192 @@
+import { useCallback } from "react";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+export interface BoardFilterProps {
+  type: string;
+  name: string;
+  default_value: string;
+  value: string;
+  new?: boolean;
+}
+
+interface Props {
+  onClose?: () => void;
+  filter: BoardFilterProps;
+  onFilter: (v: BoardFilterProps) => void;
+  onAddFilter?: (v: BoardFilterProps) => void;
+}
+
+const DEFAULT_EMPTY = {
+  type: "search",
+  name: "",
+  default_value: "",
+  value: "",
+};
+
+export const DEFAULT_DATE_FILTER = [
+  "Not timeframe override",
+  "Custom date range",
+  "Last 24 hours",
+  "Today",
+  "Yesterday",
+  "This week",
+  "This month",
+  "Last 7 days",
+  "Last 30 days",
+  "Last 90 days",
+];
+
+export function BoardFilterDialog(props: Props) {
+  let default_value = [...DEFAULT_DATE_FILTER];
+
+  if (props.filter.type === "enum" && !!props.filter.value) {
+    default_value = [...props.filter.value.split(",")];
+  }
+
+  let allowAddFilter = !!props.filter.name;
+
+  if (props.filter.type === "enum") {
+    allowAddFilter = !!props.filter.name && !!props.filter.value;
+  }
+
+  const onAddFilter = useCallback(() => {
+    props.onAddFilter && props.onAddFilter(props.filter);
+  }, [props]);
+
+  return (
+    <Dialog open onOpenChange={props.onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New Filter</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          <div className="mb-2">
+            <div className="mb-1 text-xs font-medium">Select filter type</div>
+            <Select
+              value={props.filter.type}
+              onValueChange={(v) =>
+                props.onFilter({ ...DEFAULT_EMPTY, type: v })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="search">Search</SelectItem>
+                <SelectItem value="enum">Multi-select ENUM</SelectItem>
+                <SelectItem value="date">Date Rang</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="mb-2">
+            <div className="mb-1 text-xs font-medium">Filter name*</div>
+            <Input
+              placeholder="Enter filter name"
+              value={props.filter.name}
+              onChange={(v) =>
+                props.onFilter({ ...props.filter, name: v.target.value })
+              }
+            />
+          </div>
+          {props.filter.type === "enum" && (
+            <div className="mb-2">
+              <div className="mb-1 text-xs font-medium">
+                Values*
+                <div>
+                  <small className="text-muted-foreground">
+                    Enter values separated by comma
+                  </small>
+                </div>
+              </div>
+              <Input
+                placeholder="value 1, value 2, value 3"
+                value={props.filter.value}
+                onChange={(v) =>
+                  props.onFilter({ ...props.filter, value: v.target.value })
+                }
+              />
+            </div>
+          )}
+          <div className="mb-2">
+            <div className="mb-1 text-xs font-medium">
+              Default value (optional)
+              <div>
+                <small className="text-muted-foreground">
+                  If this field is left empty, no filter will be applied by
+                  default
+                </small>
+              </div>
+            </div>
+            {props.filter.type === "search" ? (
+              <Input
+                placeholder="Enter default value"
+                value={props.filter.default_value}
+                onChange={(v) =>
+                  props.onFilter({
+                    ...props.filter,
+                    default_value: v.target.value,
+                  })
+                }
+              />
+            ) : (
+              <Select
+                disabled={default_value.length === 0}
+                value={props.filter.default_value}
+                onValueChange={(v) =>
+                  props.onFilter({ ...props.filter, default_value: v })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {default_value
+                    .filter((x) => !!x)
+                    .map((x) => {
+                      return (
+                        <SelectItem key={x} value={x}>
+                          {x}
+                        </SelectItem>
+                      );
+                    })}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+          {props.filter.type !== "date" && !!props.filter.name && (
+            <div>
+              {`Use the variable {{ ${props.filter.name} }} in your charts SQL queries.`}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button
+            type="button"
+            disabled={!allowAddFilter}
+            onClick={onAddFilter}
+          >
+            Add Filter
+          </Button>
+          <Button type="button" variant={"secondary"} onClick={props.onClose}>
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
new file mode 100644
index 00000000..0a8603a4
--- /dev/null
+++ b/src/components/board/board-filter.tsx
@@ -0,0 +1,240 @@
+"use client";
+import {
+  CalendarDays,
+  Check,
+  Ellipsis,
+  ListFilter,
+  ListOrdered,
+  Search,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import { Toolbar, ToolbarButton } from "../gui/toolbar";
+import { Checkbox } from "../ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import {
+  BoardFilterDialog,
+  BoardFilterProps,
+  DEFAULT_DATE_FILTER,
+} from "./board-filter-dialog";
+
+interface Props {
+  filters: BoardFilterProps[];
+  onFilters: (f: BoardFilterProps[]) => void;
+}
+
+export function BoardFilter(props: Props) {
+  const [open, setOpen] = useState(false);
+  const [selectIndex, setSelectIndex] = useState<number | undefined>(undefined);
+
+  const onFilter = useCallback(() => {
+    const data = [
+      ...props.filters,
+      {
+        type: "search",
+        default_value: "",
+        value: "",
+        name: "",
+        new: true,
+      },
+    ];
+    props.onFilters(data);
+    setSelectIndex(data.length - 1);
+    setOpen(true);
+  }, [props]);
+
+  const mapFilterItem = props.filters.map((x, i) => {
+    const icon =
+      x.type === "search" ? (
+        <Search className="h-3 w-3" />
+      ) : x.type === "enum" ? (
+        <ListOrdered className="h-3 w-3" />
+      ) : (
+        <CalendarDays className="h-3 w-3" />
+      );
+    const input =
+      x.type === "search" ? (
+        <input
+          placeholder={`Enter ${x.name}`}
+          value={x.default_value}
+          onChange={(v) => {
+            const data = [...props.filters];
+            data[i].default_value = v.target.value;
+            props.onFilters(data);
+          }}
+          className="max-w-14 outline-0"
+        />
+      ) : x.type === "enum" ? (
+        <div className="z-100">
+          <Popover>
+            <PopoverTrigger asChild>
+              <div
+                className={
+                  x.default_value
+                    ? "px-2 py-1"
+                    : "text-muted-foreground px-2 py-1"
+                }
+              >
+                <div>{x.default_value || `Select ${x.name}`}</div>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto">
+              {x.value.split(",").map((v, idx) => {
+                return (
+                  <div
+                    key={v + idx}
+                    className="flex items-center justify-center gap-2"
+                  >
+                    <Checkbox
+                      id={v + idx}
+                      checked={x.default_value.split(",").includes(v)}
+                      onCheckedChange={(checked) => {
+                        const value = x.default_value.split(",");
+                        const data = [...props.filters];
+
+                        if (checked) {
+                          data[i].default_value = [...value, v]
+                            .filter((f) => !!f)
+                            .join(",");
+                        } else {
+                          value.filter((f) => f !== v);
+                          data[i].default_value = value
+                            .filter((f) => f !== v)
+                            .join(",");
+                        }
+                        props.onFilters(data);
+                      }}
+                    />
+                    <label htmlFor={v + idx}>{v}</label>
+                  </div>
+                );
+              })}
+            </PopoverContent>
+          </Popover>
+        </div>
+      ) : (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <div
+              className={
+                x.default_value
+                  ? "px-2 py-1"
+                  : "text-muted-foreground px-2 py-1"
+              }
+            >
+              <div>{x.default_value || `Select ${x.name}`}</div>
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {DEFAULT_DATE_FILTER.map((date) => {
+              return (
+                <DropdownMenuItem
+                  key={date}
+                  onClick={() => {
+                    const data = [...props.filters];
+                    data[i].default_value = date;
+                    props.onFilters(data);
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    {date}
+                    {date === x.default_value && <Check className="h-3 w-3" />}
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    return (
+      <div
+        key={i}
+        className="bg-secondary flex items-center rounded-md text-xs"
+      >
+        <div className="border-background flex items-center gap-1 border-r-[1px] border-solid px-2 py-1">
+          {icon}
+          {x.name}
+        </div>
+        <div
+          className={
+            x.default_value ? "px-2 py-1" : "text-muted-foreground px-2 py-1"
+          }
+        >
+          {input}
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <div className="hover:bg-background mr-2 cursor-pointer rounded-md p-1">
+              <Ellipsis className="h-3 w-3" />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem
+              className="text-xs"
+              onClick={() => {
+                setSelectIndex(i);
+                setOpen(true);
+              }}
+            >
+              Edit filter
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-xs"
+              onClick={() => {
+                props.onFilters([
+                  ...props.filters.filter((_, idx) => idx !== i),
+                ]);
+              }}
+            >
+              Remove
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      {open && selectIndex !== undefined && (
+        <BoardFilterDialog
+          onClose={() => {
+            setOpen(false);
+            if (props.filters[selectIndex].new === true) {
+              props.onFilters([
+                ...props.filters.filter((_, i) => i !== selectIndex),
+              ]);
+              setSelectIndex(undefined);
+            }
+          }}
+          filter={props.filters[selectIndex]}
+          onFilter={(v) => {
+            const data = [...props.filters];
+            data[selectIndex] = v;
+            props.onFilters(data);
+          }}
+          onAddFilter={() => {
+            const data = [...props.filters];
+            data[selectIndex].new = false;
+            setOpen(false);
+            props.onFilters(data);
+          }}
+        />
+      )}
+      <Toolbar>
+        {mapFilterItem}
+        <ToolbarButton
+          icon={<ListFilter className="h-4 w-4" />}
+          text=""
+          tooltip={"Filter"}
+          onClick={onFilter}
+        />
+      </Toolbar>
+    </div>
+  );
+}
diff --git a/src/components/board/board-tool.tsx b/src/components/board/board-tool.tsx
new file mode 100644
index 00000000..14a2c58b
--- /dev/null
+++ b/src/components/board/board-tool.tsx
@@ -0,0 +1,38 @@
+import { ChartLine, ImageUpscale } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+interface Props {
+  editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
+  setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
+}
+
+export function BoardTool(props: Props) {
+  return (
+    <div className="bg-secondary absolute bottom-0 left-1/2 flex -translate-x-1/2 -translate-y-1/2 transform rounded-md p-1 shadow dark:bg-white">
+      <ToggleGroup
+        type="single"
+        size={"sm"}
+        value={props.editMode as string}
+        onValueChange={props.setEditMode}
+      >
+        <ToggleGroupItem value="ADD_CHART">
+          <Tooltip>
+            <TooltipTrigger>
+              <ChartLine className="h-4 w-4" />
+            </TooltipTrigger>
+            <TooltipContent>Add Chart</TooltipContent>
+          </Tooltip>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="REARRANGING_CHART">
+          <Tooltip>
+            <TooltipTrigger>
+              <ImageUpscale className="h-4 w-4" />
+            </TooltipTrigger>
+            <TooltipContent>Rearranging charts</TooltipContent>
+          </Tooltip>
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  );
+}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
index fd8ad1db..83ce8978 100644
--- a/src/components/board/index.tsx
+++ b/src/components/board/index.tsx
@@ -17,18 +17,19 @@ export interface BoardChartLayout {
 interface BoardProps {
   layout: ReactGridLayout.Layout[];
   onChange: (v: ReactGridLayout.Layout[]) => void;
+  editMode?: "ADD_CHART" | "REARRANGING_CHART" | null;
 }
 
 const ReactGridLayout = WidthProvider(RGL);
 
 export default function Board(props: BoardProps) {
-  const [layout, setLayout] = useState<ReactGridLayout.Layout[]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (props.layout) {
-      setLayout(props.layout);
+    if (props.layout.length > 0 && !!loading) {
+      setLoading(false);
     }
-  }, [props]);
+  }, [props, loading]);
 
   const sizes = [
     { w: 1, h: 1, name: "1", icon: <Square className="h-3 w-3" /> },
@@ -49,6 +50,7 @@ export default function Board(props: BoardProps) {
 
   const handleClickResize = useCallback(
     (w: number, h: number, index: number) => {
+      setLoading(true);
       const dummy = [...props.layout];
       dummy[index].w = w;
       dummy[index].h = h;
@@ -61,29 +63,31 @@ export default function Board(props: BoardProps) {
     return (
       <div
         key={i}
-        className="group dark:bg-background relative flex items-center justify-center bg-white hover:bg-gray-50 dark:text-white"
+        className="group dark:bg-secondary relative flex items-center justify-center rounded-md bg-white shadow hover:bg-gray-50 dark:text-white"
         data-grid={_}
       >
-        <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
-          {sizes.map((x, index) => {
-            return (
-              <button
-                className={cn(
-                  buttonVariants({ variant: "secondary", size: "icon" }),
-                  "cancelSelectorName h-6 w-6 p-0"
-                )}
-                onClick={() =>
-                  handleClickResize(x.w as number, x.h as number, i)
-                }
-                onMouseDown={(e) => e.stopPropagation()}
-                onTouchStart={(e) => e.stopPropagation()}
-                key={index}
-              >
-                {x.icon}
-              </button>
-            );
-          })}
-        </div>
+        {props.editMode === "REARRANGING_CHART" && (
+          <div className="absolute top-4 right-4 z-40 hidden gap-2 group-hover:flex">
+            {sizes.map((x, index) => {
+              return (
+                <button
+                  className={cn(
+                    buttonVariants({ variant: "secondary", size: "icon" }),
+                    "cancelSelectorName h-6 w-6 p-0"
+                  )}
+                  onClick={() =>
+                    handleClickResize(x.w as number, x.h as number, i)
+                  }
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onTouchStart={(e) => e.stopPropagation()}
+                  key={index}
+                >
+                  {x.icon}
+                </button>
+              );
+            })}
+          </div>
+        )}
         <div>{i}</div>
       </div>
     );
@@ -91,32 +95,21 @@ export default function Board(props: BoardProps) {
 
   return (
     <div>
-      <div className="p-4">
-        <div>Display as [x, y, w, h]:</div>
-        <div style={{ display: "flex", gap: 7 }}>
-          {props.layout.map((l) => {
-            return (
-              <div className="layoutItem" key={l.i}>
-                <b>{l.i}</b>
-                {`: [${l.x}, ${l.y}, ${l.w}, ${l.h}]`}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      <ReactGridLayout
-        cols={4}
-        rowHeight={220}
-        draggableCancel=".cancelSelectorName"
-        className="layout"
-        layout={layout}
-        onLayoutChange={setLayout}
-        isDraggable
-        isResizable
-        compactType={"horizontal"}
-      >
-        {mapItem}
-      </ReactGridLayout>
+      {!loading && (
+        <ReactGridLayout
+          cols={4}
+          rowHeight={220}
+          draggableCancel=".cancelSelectorName"
+          className="layout"
+          layout={props.layout}
+          onLayoutChange={props.onChange}
+          isDraggable={props.editMode === "REARRANGING_CHART"}
+          isResizable={props.editMode === "REARRANGING_CHART"}
+          compactType={"horizontal"}
+        >
+          {mapItem}
+        </ReactGridLayout>
+      )}
     </div>
   );
 }
diff --git a/src/components/gui/toolbar.tsx b/src/components/gui/toolbar.tsx
index a4d60eff..564e4514 100644
--- a/src/components/gui/toolbar.tsx
+++ b/src/components/gui/toolbar.tsx
@@ -51,7 +51,7 @@ export function ToolbarButton({
       onClick={onClick}
     >
       {loading ? <LucideLoader className="h-4 w-4 animate-spin" /> : icon}
-      <span>{text}</span>
+      {text && <span>{text}</span>}
       {badge && (
         <span
           className={