add module manage pointiers

2025-05-09 23:00:29 +07:00
parent 1a08a8fd44
commit 2a1c715285
9 changed files with 1017 additions and 0 deletions
--- a/src/pages/master/pointiers/blocks/ListToolbar.tsx
+++ b/src/pages/master/pointiers/blocks/ListToolbar.tsx
@ -0,0 +1,57 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { useEffect, useState } from 'react';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManagePointiersContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3 overflow-hidden">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+              />
+            </label>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;