@monolith-forensics/monolith-ui 1.2.61 → 1.2.63

package/dist/QueryFilter/QueryFilter.js

@@ -7,6 +7,7 @@ import { DefaultOperators } from "./DefaultOperators";
 import Input from "../Input";
 import DateInput from "../DateInput";
 import { useDebouncedCallback } from "use-debounce";
+import moment from "moment";
 const StyledContainer = styled.div `
   display: flex;
   flex-direction: row;
@@ -34,6 +35,10 @@ const RuleContainer = styled(StyledContainer) `
 const FilterContainer = styled(StyledContainer) `
   gap: 10px;
   flex-wrap: wrap;
+
+  button.mfui-DropDownMenu:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
 `;
 const StyledButton = styled(Button) `
   border-radius: 0;
@@ -104,6 +109,26 @@ const StyledDateInput = styled(DateInput) `
     border-color: ${({ theme }) => theme.palette.primary.main};
   }
 `;
+const dateFormatResolver = (resolution) => {
+    switch (resolution) {
+        case "day":
+            return "YYYY-MM-DD";
+        // case "month":
+        //   return "YYYY-MM";
+        // case "year":
+        //   return "YYYY";
+        // case "hour":
+        //   return "YYYY-MM-DD HH";
+        // case "minute":
+        //   return "YYYY-MM-DD HH:mm";
+        case "second":
+            return "YYYY-MM-DD HH:mm:ss";
+        case "millisecond":
+            return "YYYY-MM-DD HH:mm:ss.SSS";
+        default:
+            return "YYYY-MM-DD HH:mm:ss";
+    }
+};
 const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = useTheme();
@@ -115,7 +140,24 @@ const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value) }));
     }, 100);
     const handleTimestampChange = useDebouncedCallback((timestamp) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: timestamp ? [timestamp] : undefined }));
+        let formattedValue = timestamp;
+        if (formattedValue && filterDef.resolution) {
+            const date = moment(formattedValue);
+            switch (filterDef.resolution) {
+                case "day":
+                    date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+                    break;
+                case "second":
+                    date.set({ millisecond: 0 });
+                    break;
+                case "millisecond":
+                    break;
+                default:
+                    break;
+            }
+            formattedValue = date.format(dateFormatResolver(filterDef.resolution));
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: formattedValue ? [formattedValue] : undefined }));
     }, 100);
     switch (inputType) {
         case "text":
@@ -125,7 +167,7 @@ const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
         case "date":
             return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: "YYYY-MM-DD", defaultValue: ((_c = rule.value) === null || _c === void 0 ? void 0 : _c[0]) === "" ? undefined : (_d = rule.value) === null || _d === void 0 ? void 0 : _d[0], onChange: handleTimestampChange }));
         case "datetime":
-            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: "YYYY-MM-DD HH:mm:ss", defaultValue: ((_e = rule.value) === null || _e === void 0 ? void 0 : _e[0]) === "" ? undefined : (_f = rule.value) === null || _f === void 0 ? void 0 : _f[0], onChange: handleTimestampChange }));
+            return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: dateFormatResolver(filterDef === null || filterDef === void 0 ? void 0 : filterDef.resolution), defaultValue: ((_e = rule.value) === null || _e === void 0 ? void 0 : _e[0]) === "" ? undefined : (_f = rule.value) === null || _f === void 0 ? void 0 : _f[0], onChange: handleTimestampChange }));
         case "multiselect":
             let display = Array.isArray(rule.value) && rule.value.length > 0
                 ? ((_h = (_g = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _g === void 0 ? void 0 : _g.filter((o) => rule.value.includes(o.value))) === null || _h === void 0 ? void 0 : _h.map((o) => o.label).join(", ")) || "Select Value"
@@ -178,7 +220,7 @@ const ValueSelector = ({ rule, inputType, filterDef, onChange }) => {
         var _a, _b;
         onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = e.value) === null || _b === void 0 ? void 0 : _b[0]) || ""] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[1]) || ""] }), inputType: inputType, onChange: handleSecondaryValueChange })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[1]) || ""] }), inputType: inputType, filterDef: filterDef, onChange: handleSecondaryValueChange })] }))] }));
 };
 const CloseLabel = styled(StyledButton) `
   padding: 2px;
@@ -189,12 +231,34 @@ const CloseLabel = styled(StyledButton) `
     border-color: ${({ theme }) => theme.palette.primary.main};
   }
 `;
-const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, }) => {
+const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, onUpdateRootCombinator, }) => {
+    const handleCombinatorChange = (e) => {
+        onUpdateRootCombinator(e);
+    };
     const handleOperatorChange = (rule, operator) => {
         onUpdate(Object.assign(Object.assign({}, rule), { operator }));
     };
-    return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(FieldLabel, { children: combinator.toUpperCase() })), rules.map((rule, index) => {
+    return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(DropDownMenu, { variant: "outlined", data: [
+                    { label: "AND", value: "and" },
+                    { label: "OR", value: "or" },
+                ], 
+                //   arrow={true}
+                size: "sm", buttonProps: {
+                    title: "Chain these query filters together using AND | OR logic",
+                    variant: "contained",
+                    style: {
+                        fontWeight: "normal",
+                        fontSize: 12,
+                        padding: "3px 5px",
+                        height: 20,
+                        borderRadius: 4,
+                    },
+                }, onItemSelect: (e) => handleCombinatorChange(e.value), dropDownProps: {
+                    style: { width: 175, maxWidth: 400 },
+                }, children: combinator.toUpperCase() })), rules.map((rule) => {
                 const filterDef = filterDefinitions.find((f) => f.dataField === rule.dataField);
+                if (!filterDef)
+                    throw new Error(`Filter Definition not found for dataField: ${rule.dataField}`);
                 const operatorOptions = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.operators) || DefaultOperators;
                 const inputType = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.inputType) || "text";
                 return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, 
@@ -219,5 +283,5 @@ export const QueryFilter = ({ queryFilter, }) => {
     const { filter, filterDefinitions, showCombinator } = queryFilter;
     if (((_a = filter === null || filter === void 0 ? void 0 : filter.rules) === null || _a === void 0 ? void 0 : _a.length) == 0)
         return null;
-    return (_jsx(FilterContainer, { className: "mfui-QueryFilter", children: _jsx(Rules, { rules: filter.rules, combinator: filter.combinator, showCombinator: showCombinator, filterDefinitions: filterDefinitions, onDelete: (rule) => queryFilter.removeRule(rule.id), onUpdate: (rule) => queryFilter.updateRule(rule) }) }));
+    return (_jsx(FilterContainer, { className: "mfui-QueryFilter", children: _jsx(Rules, { rules: filter.rules, combinator: filter.combinator, showCombinator: showCombinator, filterDefinitions: filterDefinitions, onDelete: (rule) => queryFilter.removeRule(rule.id), onUpdate: (rule) => queryFilter.updateRule(rule), onUpdateRootCombinator: (e) => queryFilter.updateRootCombinator(e) }) }));
 };

package/dist/QueryFilter/types.d.ts

@@ -12,6 +12,7 @@ export type QueryFilterType = {
     addRule: (rule: Rule) => void;
     removeRule: (id: string) => void;
     updateRule: (rule: Rule) => void;
+    updateRootCombinator: (combinator: Combinator) => void;
 };
 export type UseQueryFilter = (args: UseQueryFilterProps) => QueryFilterType;
 export type Combinator = "and" | "or";
@@ -26,6 +27,7 @@ export interface FilterDefinition {
     pluralLabel?: string;
     operators?: Operator[];
     inputType?: HTMLInputElement["type"];
+    resolution?: "day" | "second" | "millisecond";
     placeholder?: string;
     selectOptions?: DropDownItem[];
     editorType?: EditorType;

package/dist/QueryFilter/useQueryFilter.js

@@ -20,6 +20,9 @@ export const useQueryFilter = (args) => {
         const rules = filter.rules.map((r) => (r.id === rule.id ? rule : r));
         setFilter(Object.assign(Object.assign({}, filter), { rules }));
     };
+    const updateRootCombinator = (combinator) => {
+        setFilter(Object.assign(Object.assign({}, filter), { combinator }));
+    };
     useEffect(() => {
         var _a;
         (_a = args === null || args === void 0 ? void 0 : args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, filter);
@@ -28,6 +31,7 @@ export const useQueryFilter = (args) => {
         filter,
         filterDefinitions: args.filterDefinitions,
         showCombinator: args.showCombinator,
+        updateRootCombinator,
         addRule,
         removeRule,
         updateRule,

package/dist/Table/TableMenu/TableMenu.js

@@ -35,6 +35,7 @@ const TableMenu = () => {
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
+        showCombinator: true,
         onFilterChange: (q) => {
             var _a;
             handleFilterChange(q);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.61",
+  "version": "1.2.63",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",