baaz-custom-components 5.0.26 → 5.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +117 -9
- package/dist/index.js +237 -212
- package/dist/index.mjs +233 -212
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1946,7 +1946,7 @@ var CustomBreadcrumb = ({
|
|
|
1946
1946
|
var breadcrumb_default = CustomBreadcrumb;
|
|
1947
1947
|
|
|
1948
1948
|
// src/components/custom/grid/index.tsx
|
|
1949
|
-
var
|
|
1949
|
+
var import_react7 = require("react");
|
|
1950
1950
|
var import_react_grid = require("@svar-ui/react-grid");
|
|
1951
1951
|
|
|
1952
1952
|
// src/utils/exportPdf.ts
|
|
@@ -1979,70 +1979,23 @@ function exportExcel(rows, name) {
|
|
|
1979
1979
|
XLSX.writeFile(workbook, `${name != null ? name : "export"}.xlsx`);
|
|
1980
1980
|
}
|
|
1981
1981
|
|
|
1982
|
-
// src/components/custom/grid/gridHeader.tsx
|
|
1982
|
+
// src/components/custom/grid/gridHeader/index.tsx
|
|
1983
|
+
var import_react6 = require("react");
|
|
1984
|
+
var import_lucide_react13 = require("lucide-react");
|
|
1985
|
+
|
|
1986
|
+
// src/components/custom/grid/gridHeader/components/filters.tsx
|
|
1983
1987
|
var import_react5 = require("react");
|
|
1984
1988
|
var import_lucide_react12 = require("lucide-react");
|
|
1985
1989
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1986
|
-
var
|
|
1987
|
-
onPdf,
|
|
1988
|
-
onExcel,
|
|
1989
|
-
onSearch = () => {
|
|
1990
|
-
},
|
|
1991
|
-
download,
|
|
1992
|
-
search,
|
|
1993
|
-
searchValue,
|
|
1994
|
-
searchkey = "",
|
|
1995
|
-
filterList,
|
|
1990
|
+
var Filters = ({
|
|
1996
1991
|
onFilterChange,
|
|
1997
|
-
initialFilters = []
|
|
1992
|
+
initialFilters = [],
|
|
1993
|
+
filterList
|
|
1998
1994
|
}) => {
|
|
1999
|
-
const [downloadMenu, setDownloadMenu] = (0, import_react5.useState)(false);
|
|
2000
|
-
const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
|
|
2001
|
-
const [searchOpen, setSearchOpen] = (0, import_react5.useState)(false);
|
|
2002
1995
|
const [conditions, setConditions] = (0, import_react5.useState)([]);
|
|
2003
|
-
const
|
|
1996
|
+
const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
|
|
2004
1997
|
const filterRef = (0, import_react5.useRef)(null);
|
|
2005
1998
|
const filterDropdownRef = (0, import_react5.useRef)(null);
|
|
2006
|
-
(0, import_react5.useEffect)(() => {
|
|
2007
|
-
if (initialFilters && initialFilters.length > 0) {
|
|
2008
|
-
const initialConditions = initialFilters.map(
|
|
2009
|
-
(filter, index) => ({
|
|
2010
|
-
id: crypto.randomUUID(),
|
|
2011
|
-
column: filter.column,
|
|
2012
|
-
operator: filter.operator,
|
|
2013
|
-
value: filter.value,
|
|
2014
|
-
logic: index === 0 ? "WHERE" : filter.logic || "AND"
|
|
2015
|
-
})
|
|
2016
|
-
);
|
|
2017
|
-
setConditions(initialConditions);
|
|
2018
|
-
}
|
|
2019
|
-
}, []);
|
|
2020
|
-
(0, import_react5.useEffect)(() => {
|
|
2021
|
-
if (!filterMenu || !filterDropdownRef.current) return;
|
|
2022
|
-
const dropdown = filterDropdownRef.current;
|
|
2023
|
-
const rect = dropdown.getBoundingClientRect();
|
|
2024
|
-
if (rect.right > window.innerWidth) {
|
|
2025
|
-
dropdown.style.left = "auto";
|
|
2026
|
-
dropdown.style.right = "0";
|
|
2027
|
-
}
|
|
2028
|
-
if (rect.bottom > window.innerHeight) {
|
|
2029
|
-
dropdown.style.top = "auto";
|
|
2030
|
-
dropdown.style.bottom = "100%";
|
|
2031
|
-
dropdown.style.marginBottom = "8px";
|
|
2032
|
-
}
|
|
2033
|
-
}, [filterMenu]);
|
|
2034
|
-
(0, import_react5.useEffect)(() => {
|
|
2035
|
-
const handleClickOutside = (e) => {
|
|
2036
|
-
if (downloadRef.current && !downloadRef.current.contains(e.target)) {
|
|
2037
|
-
setDownloadMenu(false);
|
|
2038
|
-
}
|
|
2039
|
-
if (filterRef.current && !filterRef.current.contains(e.target)) {
|
|
2040
|
-
setFilterMenu(false);
|
|
2041
|
-
}
|
|
2042
|
-
};
|
|
2043
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
2044
|
-
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2045
|
-
}, []);
|
|
2046
1999
|
const isValidFilter = (condition) => {
|
|
2047
2000
|
if (!condition.column || !condition.operator) return false;
|
|
2048
2001
|
if (condition.operator === "date-range") {
|
|
@@ -2120,60 +2073,90 @@ var GridHeader = ({
|
|
|
2120
2073
|
action: "clear"
|
|
2121
2074
|
});
|
|
2122
2075
|
};
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2076
|
+
(0, import_react5.useEffect)(() => {
|
|
2077
|
+
if (initialFilters && initialFilters.length > 0) {
|
|
2078
|
+
const initialConditions = initialFilters.map(
|
|
2079
|
+
(filter, index) => ({
|
|
2080
|
+
id: crypto.randomUUID(),
|
|
2081
|
+
column: filter.column,
|
|
2082
|
+
operator: filter.operator,
|
|
2083
|
+
value: filter.value,
|
|
2084
|
+
logic: index === 0 ? "WHERE" : filter.logic || "AND"
|
|
2085
|
+
})
|
|
2086
|
+
);
|
|
2087
|
+
setConditions(initialConditions);
|
|
2088
|
+
}
|
|
2089
|
+
}, []);
|
|
2090
|
+
(0, import_react5.useEffect)(() => {
|
|
2091
|
+
const handleClickOutside = (e) => {
|
|
2092
|
+
if (filterRef.current && !filterRef.current.contains(e.target)) {
|
|
2093
|
+
setFilterMenu(false);
|
|
2094
|
+
}
|
|
2095
|
+
};
|
|
2096
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2097
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2098
|
+
}, []);
|
|
2099
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
|
|
2100
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2101
|
+
"button",
|
|
2102
|
+
{
|
|
2103
|
+
onClick: () => setFilterMenu((p) => !p),
|
|
2104
|
+
className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
|
|
2105
|
+
children: [
|
|
2106
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 16 }),
|
|
2107
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hidden md:block", children: "Filters" }),
|
|
2108
|
+
activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
|
|
2109
|
+
]
|
|
2110
|
+
}
|
|
2111
|
+
),
|
|
2112
|
+
filterMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2113
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2114
|
+
"div",
|
|
2115
|
+
{
|
|
2116
|
+
className: "fixed inset-0 bg-black/40 z-40 md:hidden",
|
|
2117
|
+
onClick: () => setFilterMenu(false)
|
|
2118
|
+
}
|
|
2119
|
+
),
|
|
2120
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2121
|
+
"div",
|
|
2122
|
+
{
|
|
2123
|
+
ref: filterDropdownRef,
|
|
2124
|
+
className: "fixed inset-x-0 bottom-0 md:absolute md:top-full md:bottom-auto md:left-0 w-full md:w-[700px] md:max-w-[95vw] max-h-[85vh] overflow-y-auto p-4 rounded-t-2xl md:rounded-md border bg-background shadow-xl z-50 space-y-4",
|
|
2125
|
+
children: [
|
|
2126
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-start sm:items-center justify-between gap-2", children: [
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "In this view, show records" }),
|
|
2128
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2129
|
+
"button",
|
|
2130
|
+
{
|
|
2131
|
+
onClick: clearFilters,
|
|
2132
|
+
className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
|
|
2133
|
+
title: "Clear all filters",
|
|
2134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
|
|
2135
|
+
}
|
|
2136
|
+
)
|
|
2137
|
+
] }),
|
|
2138
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-3 w-full flex flex-col overflow-auto", children: conditions.map((condition, index) => {
|
|
2139
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
2140
|
+
const selectedColumn = filterList.find(
|
|
2141
|
+
(f) => f.columnName.value === condition.column
|
|
2142
|
+
);
|
|
2143
|
+
const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
|
|
2144
|
+
(op) => op.value === condition.operator
|
|
2145
|
+
);
|
|
2146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2147
|
+
"div",
|
|
2148
|
+
{
|
|
2149
|
+
className: "flex flex-col md:flex-row gap-3 md:gap-2 w-full",
|
|
2150
|
+
children: [
|
|
2151
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
|
|
2152
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full sm:w-[90px] shrink-0", children: index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium", children: "Where" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2170
2153
|
"select",
|
|
2171
2154
|
{
|
|
2172
2155
|
value: (_a = condition.logic) != null ? _a : "AND",
|
|
2173
2156
|
onChange: (e) => updateCondition(condition.id, {
|
|
2174
2157
|
logic: e.target.value
|
|
2175
2158
|
}),
|
|
2176
|
-
className: "w-full px-
|
|
2159
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
|
|
2177
2160
|
children: [
|
|
2178
2161
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "AND", children: "AND" }),
|
|
2179
2162
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "OR", children: "OR" })
|
|
@@ -2189,7 +2172,7 @@ var GridHeader = ({
|
|
|
2189
2172
|
operator: void 0,
|
|
2190
2173
|
value: void 0
|
|
2191
2174
|
}),
|
|
2192
|
-
className: "
|
|
2175
|
+
className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
|
|
2193
2176
|
children: [
|
|
2194
2177
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Column" }),
|
|
2195
2178
|
filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
@@ -2212,7 +2195,7 @@ var GridHeader = ({
|
|
|
2212
2195
|
operator: e.target.value,
|
|
2213
2196
|
value: void 0
|
|
2214
2197
|
}),
|
|
2215
|
-
className: "
|
|
2198
|
+
className: "w-full sm:min-w-[8rem] px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
|
|
2216
2199
|
children: [
|
|
2217
2200
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
|
|
2218
2201
|
selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => {
|
|
@@ -2221,8 +2204,10 @@ var GridHeader = ({
|
|
|
2221
2204
|
})
|
|
2222
2205
|
]
|
|
2223
2206
|
}
|
|
2224
|
-
)
|
|
2225
|
-
|
|
2207
|
+
)
|
|
2208
|
+
] }),
|
|
2209
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full items-start sm:items-center", children: [
|
|
2210
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 w-full min-w-0", children: [
|
|
2226
2211
|
(selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2227
2212
|
"input",
|
|
2228
2213
|
{
|
|
@@ -2231,7 +2216,7 @@ var GridHeader = ({
|
|
|
2231
2216
|
value: e.target.value
|
|
2232
2217
|
}),
|
|
2233
2218
|
placeholder: "Enter value",
|
|
2234
|
-
className: "w-full px-3 py-2 rounded-md bg-input text-sm"
|
|
2219
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
|
|
2235
2220
|
}
|
|
2236
2221
|
),
|
|
2237
2222
|
(selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
@@ -2241,7 +2226,7 @@ var GridHeader = ({
|
|
|
2241
2226
|
onChange: (e) => updateCondition(condition.id, {
|
|
2242
2227
|
value: e.target.value
|
|
2243
2228
|
}),
|
|
2244
|
-
className: "w-full px-3 py-2 rounded-md bg-input text-sm",
|
|
2229
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none",
|
|
2245
2230
|
children: [
|
|
2246
2231
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Select value" }),
|
|
2247
2232
|
(_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
|
|
@@ -2256,10 +2241,10 @@ var GridHeader = ({
|
|
|
2256
2241
|
onChange: (e) => updateCondition(condition.id, {
|
|
2257
2242
|
value: e.target.value
|
|
2258
2243
|
}),
|
|
2259
|
-
className: "w-full px-3 py-2 rounded-md bg-input text-sm"
|
|
2244
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
|
|
2260
2245
|
}
|
|
2261
2246
|
),
|
|
2262
|
-
(selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2", children: [
|
|
2247
|
+
(selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
|
|
2263
2248
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2264
2249
|
"input",
|
|
2265
2250
|
{
|
|
@@ -2270,8 +2255,7 @@ var GridHeader = ({
|
|
|
2270
2255
|
start: e.target.value
|
|
2271
2256
|
})
|
|
2272
2257
|
}),
|
|
2273
|
-
|
|
2274
|
-
className: "w-full px-3 py-2 rounded-md bg-input text-sm"
|
|
2258
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
|
|
2275
2259
|
}
|
|
2276
2260
|
),
|
|
2277
2261
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
@@ -2284,14 +2268,13 @@ var GridHeader = ({
|
|
|
2284
2268
|
end: e.target.value
|
|
2285
2269
|
})
|
|
2286
2270
|
}),
|
|
2287
|
-
|
|
2288
|
-
className: "w-full px-3 py-2 rounded-md bg-input text-sm"
|
|
2271
|
+
className: "w-full px-3 py-2 rounded-md bg-input text-sm focus:outline-none"
|
|
2289
2272
|
}
|
|
2290
2273
|
)
|
|
2291
2274
|
] }),
|
|
2292
2275
|
!selectedOperator && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full px-3 py-2 rounded-md bg-input/50 text-sm text-muted-foreground", children: "Select operator" })
|
|
2293
2276
|
] }),
|
|
2294
|
-
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[40px] flex justify-
|
|
2277
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full sm:w-[40px] flex justify-end sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2295
2278
|
"button",
|
|
2296
2279
|
{
|
|
2297
2280
|
onClick: () => deleteCondition(condition.id),
|
|
@@ -2300,58 +2283,100 @@ var GridHeader = ({
|
|
|
2300
2283
|
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Trash2, { size: 16 })
|
|
2301
2284
|
}
|
|
2302
2285
|
) })
|
|
2303
|
-
]
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
]
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2286
|
+
] })
|
|
2287
|
+
]
|
|
2288
|
+
},
|
|
2289
|
+
condition.id
|
|
2290
|
+
);
|
|
2291
|
+
}) }),
|
|
2292
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t", children: [
|
|
2293
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2294
|
+
"button",
|
|
2295
|
+
{
|
|
2296
|
+
onClick: addCondition,
|
|
2297
|
+
className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
|
|
2298
|
+
children: [
|
|
2299
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Plus, { size: 14 }),
|
|
2300
|
+
"Add condition"
|
|
2301
|
+
]
|
|
2302
|
+
}
|
|
2303
|
+
),
|
|
2304
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2305
|
+
"button",
|
|
2306
|
+
{
|
|
2307
|
+
onClick: applyFilters,
|
|
2308
|
+
disabled: !canApply,
|
|
2309
|
+
className: "flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors cursor-pointer",
|
|
2310
|
+
children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Check, { size: 16 }),
|
|
2312
|
+
"Apply",
|
|
2313
|
+
hasChangesFromInitial && canApply && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2314
|
+
"span",
|
|
2315
|
+
{
|
|
2316
|
+
className: "ml-1 w-2 h-2 bg-yellow-400 rounded-full",
|
|
2317
|
+
title: "Unapplied changes"
|
|
2318
|
+
}
|
|
2319
|
+
)
|
|
2320
|
+
]
|
|
2321
|
+
}
|
|
2322
|
+
)
|
|
2323
|
+
] })
|
|
2324
|
+
]
|
|
2325
|
+
}
|
|
2326
|
+
)
|
|
2327
|
+
] })
|
|
2328
|
+
] });
|
|
2329
|
+
};
|
|
2330
|
+
var filters_default = Filters;
|
|
2331
|
+
|
|
2332
|
+
// src/components/custom/grid/gridHeader/index.tsx
|
|
2333
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2334
|
+
var GridHeader = ({
|
|
2335
|
+
onPdf,
|
|
2336
|
+
onExcel,
|
|
2337
|
+
onSearch = () => {
|
|
2338
|
+
},
|
|
2339
|
+
download,
|
|
2340
|
+
search,
|
|
2341
|
+
searchValue,
|
|
2342
|
+
searchkey = "",
|
|
2343
|
+
filterList,
|
|
2344
|
+
onFilterChange,
|
|
2345
|
+
initialFilters = []
|
|
2346
|
+
}) => {
|
|
2347
|
+
const [downloadMenu, setDownloadMenu] = (0, import_react6.useState)(false);
|
|
2348
|
+
const [searchOpen, setSearchOpen] = (0, import_react6.useState)(false);
|
|
2349
|
+
const downloadRef = (0, import_react6.useRef)(null);
|
|
2350
|
+
(0, import_react6.useEffect)(() => {
|
|
2351
|
+
const handleClickOutside = (e) => {
|
|
2352
|
+
if (downloadRef.current && !downloadRef.current.contains(e.target)) {
|
|
2353
|
+
setDownloadMenu(false);
|
|
2354
|
+
}
|
|
2355
|
+
};
|
|
2356
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2357
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2358
|
+
}, []);
|
|
2359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md", children: [
|
|
2360
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center gap-3", children: [
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2362
|
+
filters_default,
|
|
2363
|
+
{
|
|
2364
|
+
onFilterChange,
|
|
2365
|
+
initialFilters,
|
|
2366
|
+
filterList
|
|
2367
|
+
}
|
|
2368
|
+
),
|
|
2369
|
+
download && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: downloadRef, children: [
|
|
2370
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2346
2371
|
"button",
|
|
2347
2372
|
{
|
|
2348
2373
|
onClick: () => setDownloadMenu((p) => !p),
|
|
2349
2374
|
className: "p-2 rounded-md hover:bg-input cursor-pointer",
|
|
2350
|
-
children: /* @__PURE__ */ (0,
|
|
2375
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Ellipsis, { size: 16 })
|
|
2351
2376
|
}
|
|
2352
2377
|
),
|
|
2353
|
-
downloadMenu && /* @__PURE__ */ (0,
|
|
2354
|
-
/* @__PURE__ */ (0,
|
|
2378
|
+
downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
|
|
2379
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2355
2380
|
"button",
|
|
2356
2381
|
{
|
|
2357
2382
|
onClick: () => {
|
|
@@ -2360,12 +2385,12 @@ var GridHeader = ({
|
|
|
2360
2385
|
},
|
|
2361
2386
|
className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
|
|
2362
2387
|
children: [
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2388
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
|
|
2364
2389
|
"PDF"
|
|
2365
2390
|
]
|
|
2366
2391
|
}
|
|
2367
2392
|
),
|
|
2368
|
-
/* @__PURE__ */ (0,
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2369
2394
|
"button",
|
|
2370
2395
|
{
|
|
2371
2396
|
onClick: () => {
|
|
@@ -2374,7 +2399,7 @@ var GridHeader = ({
|
|
|
2374
2399
|
},
|
|
2375
2400
|
className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
|
|
2376
2401
|
children: [
|
|
2377
|
-
/* @__PURE__ */ (0,
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
|
|
2378
2403
|
"Excel"
|
|
2379
2404
|
]
|
|
2380
2405
|
}
|
|
@@ -2382,20 +2407,20 @@ var GridHeader = ({
|
|
|
2382
2407
|
] })
|
|
2383
2408
|
] })
|
|
2384
2409
|
] }),
|
|
2385
|
-
search && /* @__PURE__ */ (0,
|
|
2410
|
+
search && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2386
2411
|
"div",
|
|
2387
2412
|
{
|
|
2388
|
-
className: `absolute right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
|
|
2389
|
-
children: !searchOpen ? /* @__PURE__ */ (0,
|
|
2413
|
+
className: `absolute left-0 md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
|
|
2414
|
+
children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2390
2415
|
"button",
|
|
2391
2416
|
{
|
|
2392
2417
|
onClick: () => setSearchOpen(true),
|
|
2393
2418
|
className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
|
|
2394
|
-
children: /* @__PURE__ */ (0,
|
|
2419
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 18 })
|
|
2395
2420
|
}
|
|
2396
|
-
) : /* @__PURE__ */ (0,
|
|
2397
|
-
/* @__PURE__ */ (0,
|
|
2398
|
-
/* @__PURE__ */ (0,
|
|
2421
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
|
|
2422
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 16 }),
|
|
2423
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2399
2424
|
"input",
|
|
2400
2425
|
{
|
|
2401
2426
|
autoFocus: true,
|
|
@@ -2405,12 +2430,12 @@ var GridHeader = ({
|
|
|
2405
2430
|
value: searchValue
|
|
2406
2431
|
}
|
|
2407
2432
|
),
|
|
2408
|
-
/* @__PURE__ */ (0,
|
|
2433
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2409
2434
|
"button",
|
|
2410
2435
|
{
|
|
2411
2436
|
onClick: () => setSearchOpen(false),
|
|
2412
2437
|
className: "cursor-pointer",
|
|
2413
|
-
children: /* @__PURE__ */ (0,
|
|
2438
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 16 })
|
|
2414
2439
|
}
|
|
2415
2440
|
)
|
|
2416
2441
|
] })
|
|
@@ -2421,8 +2446,8 @@ var GridHeader = ({
|
|
|
2421
2446
|
var gridHeader_default = GridHeader;
|
|
2422
2447
|
|
|
2423
2448
|
// src/components/custom/grid/index.tsx
|
|
2424
|
-
var
|
|
2425
|
-
var Grid = (0,
|
|
2449
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2450
|
+
var Grid = (0, import_react7.forwardRef)(
|
|
2426
2451
|
(_a, ref) => {
|
|
2427
2452
|
var _b = _a, {
|
|
2428
2453
|
data,
|
|
@@ -2451,10 +2476,10 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2451
2476
|
"onFilterChange",
|
|
2452
2477
|
"initialFilters"
|
|
2453
2478
|
]);
|
|
2454
|
-
const apiRef = (0,
|
|
2455
|
-
const containerRef = (0,
|
|
2456
|
-
(0,
|
|
2457
|
-
const resizeColumns = (0,
|
|
2479
|
+
const apiRef = (0, import_react7.useRef)(null);
|
|
2480
|
+
const containerRef = (0, import_react7.useRef)(null);
|
|
2481
|
+
(0, import_react7.useImperativeHandle)(ref, () => apiRef.current, []);
|
|
2482
|
+
const resizeColumns = (0, import_react7.useCallback)(() => {
|
|
2458
2483
|
var _a2;
|
|
2459
2484
|
const api = apiRef.current;
|
|
2460
2485
|
const container = containerRef.current;
|
|
@@ -2484,7 +2509,7 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2484
2509
|
});
|
|
2485
2510
|
}
|
|
2486
2511
|
}, [columns, data]);
|
|
2487
|
-
(0,
|
|
2512
|
+
(0, import_react7.useEffect)(() => {
|
|
2488
2513
|
if (!containerRef.current) return;
|
|
2489
2514
|
const observer = new ResizeObserver(() => {
|
|
2490
2515
|
resizeColumns();
|
|
@@ -2492,7 +2517,7 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2492
2517
|
observer.observe(containerRef.current);
|
|
2493
2518
|
return () => observer.disconnect();
|
|
2494
2519
|
}, [resizeColumns]);
|
|
2495
|
-
const init = (0,
|
|
2520
|
+
const init = (0, import_react7.useCallback)(
|
|
2496
2521
|
(api) => {
|
|
2497
2522
|
apiRef.current = api;
|
|
2498
2523
|
resizeColumns();
|
|
@@ -2507,7 +2532,7 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2507
2532
|
});
|
|
2508
2533
|
return selectedData;
|
|
2509
2534
|
};
|
|
2510
|
-
const handleExportPdf = (0,
|
|
2535
|
+
const handleExportPdf = (0, import_react7.useCallback)(() => {
|
|
2511
2536
|
const selected = getSelectedData();
|
|
2512
2537
|
if (selected.length) {
|
|
2513
2538
|
exportPdf(selected, fileName);
|
|
@@ -2515,7 +2540,7 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2515
2540
|
onExportPdf == null ? void 0 : onExportPdf();
|
|
2516
2541
|
}
|
|
2517
2542
|
}, [getSelectedData, exportPdf, onExportPdf, fileName]);
|
|
2518
|
-
const handleExportExcel = (0,
|
|
2543
|
+
const handleExportExcel = (0, import_react7.useCallback)(() => {
|
|
2519
2544
|
const selected = getSelectedData();
|
|
2520
2545
|
if (selected.length) {
|
|
2521
2546
|
exportExcel(selected, fileName);
|
|
@@ -2523,8 +2548,8 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2523
2548
|
onExportExcel == null ? void 0 : onExportExcel();
|
|
2524
2549
|
}
|
|
2525
2550
|
}, [getSelectedData, exportExcel, onExportExcel, fileName]);
|
|
2526
|
-
return /* @__PURE__ */ (0,
|
|
2527
|
-
/* @__PURE__ */ (0,
|
|
2551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2528
2553
|
gridHeader_default,
|
|
2529
2554
|
{
|
|
2530
2555
|
onPdf: handleExportPdf,
|
|
@@ -2539,7 +2564,7 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2539
2564
|
initialFilters
|
|
2540
2565
|
}
|
|
2541
2566
|
),
|
|
2542
|
-
/* @__PURE__ */ (0,
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2543
2568
|
import_react_grid.Grid,
|
|
2544
2569
|
__spreadProps(__spreadValues({}, rest), {
|
|
2545
2570
|
data,
|
|
@@ -2554,10 +2579,10 @@ var Grid = (0, import_react6.forwardRef)(
|
|
|
2554
2579
|
var grid_default = Grid;
|
|
2555
2580
|
|
|
2556
2581
|
// src/components/custom/grid/sortableHeaderCell.tsx
|
|
2557
|
-
var
|
|
2558
|
-
var
|
|
2582
|
+
var import_lucide_react14 = require("lucide-react");
|
|
2583
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2559
2584
|
function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
|
|
2560
|
-
if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0,
|
|
2585
|
+
if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell == null ? void 0 : cell.text });
|
|
2561
2586
|
const active = sortKey === cell.id;
|
|
2562
2587
|
const handleClick = () => {
|
|
2563
2588
|
if (!onSortChange || !cell.id) return;
|
|
@@ -2571,15 +2596,15 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
|
|
|
2571
2596
|
}
|
|
2572
2597
|
onSortChange("", null);
|
|
2573
2598
|
};
|
|
2574
|
-
return /* @__PURE__ */ (0,
|
|
2599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2575
2600
|
"div",
|
|
2576
2601
|
{
|
|
2577
2602
|
onClick: handleClick,
|
|
2578
2603
|
className: "cursor-pointer flex items-center gap-2 justify-between select-none",
|
|
2579
2604
|
children: [
|
|
2580
|
-
/* @__PURE__ */ (0,
|
|
2581
|
-
!active && /* @__PURE__ */ (0,
|
|
2582
|
-
active && (sortOrder === "asc" ? /* @__PURE__ */ (0,
|
|
2605
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell.text }),
|
|
2606
|
+
!active && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
|
|
2607
|
+
active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveUp, { className: "w-4 h-4" }))
|
|
2583
2608
|
]
|
|
2584
2609
|
}
|
|
2585
2610
|
);
|
|
@@ -2617,8 +2642,8 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
|
|
|
2617
2642
|
}
|
|
2618
2643
|
|
|
2619
2644
|
// src/components/custom/pagination/index.tsx
|
|
2620
|
-
var
|
|
2621
|
-
var
|
|
2645
|
+
var import_lucide_react15 = require("lucide-react");
|
|
2646
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2622
2647
|
function Pagination({
|
|
2623
2648
|
totalCount,
|
|
2624
2649
|
count = null,
|
|
@@ -2639,47 +2664,47 @@ function Pagination({
|
|
|
2639
2664
|
const handlePageSizeChange = (size) => {
|
|
2640
2665
|
onPageSizeChange == null ? void 0 : onPageSizeChange(size);
|
|
2641
2666
|
};
|
|
2642
|
-
return /* @__PURE__ */ (0,
|
|
2643
|
-
/* @__PURE__ */ (0,
|
|
2644
|
-
/* @__PURE__ */ (0,
|
|
2667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
|
|
2668
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
|
|
2669
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
|
|
2645
2670
|
"Showing ",
|
|
2646
|
-
/* @__PURE__ */ (0,
|
|
2671
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: count }),
|
|
2647
2672
|
" of",
|
|
2648
2673
|
" ",
|
|
2649
|
-
/* @__PURE__ */ (0,
|
|
2674
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: totalCount })
|
|
2650
2675
|
] }),
|
|
2651
|
-
showSizeChanger && /* @__PURE__ */ (0,
|
|
2676
|
+
showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2652
2677
|
"select",
|
|
2653
2678
|
{
|
|
2654
2679
|
value: pageSize,
|
|
2655
2680
|
onChange: (e) => handlePageSizeChange(Number(e.target.value)),
|
|
2656
2681
|
className: "rounded-md border border-input bg-background px-3 py-2 text-xs text-foreground focus:outline-none",
|
|
2657
|
-
children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0,
|
|
2682
|
+
children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: size, children: [
|
|
2658
2683
|
size,
|
|
2659
2684
|
" / page"
|
|
2660
2685
|
] }, size))
|
|
2661
2686
|
}
|
|
2662
2687
|
)
|
|
2663
2688
|
] }),
|
|
2664
|
-
/* @__PURE__ */ (0,
|
|
2665
|
-
/* @__PURE__ */ (0,
|
|
2689
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
2690
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2666
2691
|
"button",
|
|
2667
2692
|
{
|
|
2668
2693
|
disabled: currentPage === 1,
|
|
2669
2694
|
onClick: () => handlePageChange(currentPage - 1),
|
|
2670
2695
|
className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
|
|
2671
|
-
children: /* @__PURE__ */ (0,
|
|
2696
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronLeft, { className: "w-5 h-5 select-none" })
|
|
2672
2697
|
}
|
|
2673
2698
|
),
|
|
2674
2699
|
pages.map(
|
|
2675
|
-
(page, idx) => page === "dots" ? /* @__PURE__ */ (0,
|
|
2700
|
+
(page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2676
2701
|
"span",
|
|
2677
2702
|
{
|
|
2678
2703
|
className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
|
|
2679
2704
|
children: "\u2026"
|
|
2680
2705
|
},
|
|
2681
2706
|
`dots-${idx}`
|
|
2682
|
-
) : /* @__PURE__ */ (0,
|
|
2707
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2683
2708
|
"button",
|
|
2684
2709
|
{
|
|
2685
2710
|
onClick: () => handlePageChange(page),
|
|
@@ -2689,13 +2714,13 @@ function Pagination({
|
|
|
2689
2714
|
page
|
|
2690
2715
|
)
|
|
2691
2716
|
),
|
|
2692
|
-
/* @__PURE__ */ (0,
|
|
2717
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2693
2718
|
"button",
|
|
2694
2719
|
{
|
|
2695
2720
|
disabled: currentPage === totalPages,
|
|
2696
2721
|
onClick: () => handlePageChange(currentPage + 1),
|
|
2697
2722
|
className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
|
|
2698
|
-
children: /* @__PURE__ */ (0,
|
|
2723
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronRight, { className: "w-5 h-5 select-none" })
|
|
2699
2724
|
}
|
|
2700
2725
|
)
|
|
2701
2726
|
] })
|