diff --git a/src/services/ui/src/components/Opensearch/Filtering/FilterableDateRange.tsx b/src/services/ui/src/components/Opensearch/Filtering/FilterableDateRange.tsx index b33fb248a8..f446f0f029 100644 --- a/src/services/ui/src/components/Opensearch/Filtering/FilterableDateRange.tsx +++ b/src/services/ui/src/components/Opensearch/Filtering/FilterableDateRange.tsx @@ -1,10 +1,10 @@ -import { useState, useMemo, useEffect } from "react"; -import { format } from "date-fns"; +import { useState, useMemo } from "react"; +import { format, isAfter, isBefore, isValid, parse } from "date-fns"; import { Calendar as CalendarIcon } from "lucide-react"; import { DateRange } from "react-day-picker"; import { cn } from "@/lib/utils"; -import { Button, Calendar } from "@/components/Inputs"; +import { Button, Calendar, Input } from "@/components/Inputs"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/Popover"; import { OsRangeValue } from "shared-types"; @@ -17,25 +17,111 @@ type Props = Omit< className?: string; }; +function checkValue(str, max) { + if (str.charAt(0) !== "0" || str == "00") { + let num = parseInt(str); + if (isNaN(num) || num <= 0 || num > max) num = 1; + str = + num > parseInt(max.toString().charAt(0)) && num.toString().length == 1 + ? "0" + num + : num.toString(); + } + return str; +} + export function FilterableDateRange({ value, onChange, ...props }: Props) { const [open, setOpen] = useState(false); - const [date, setDate] = useState({ + const [selectedDate, setSelectedDate] = useState({ from: value?.gte ? new Date(value?.gte) : undefined, to: value?.lte ? new Date(value?.lte) : undefined, }); + const [fromValue, setFromValue] = useState(""); + const [toValue, setToValue] = useState(""); const handleClose = (updateOpen: boolean) => { setOpen(updateOpen); }; + const onFromInput = (e: any) => { + let input = e.target.value; + if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3); + const values = input.split("/").map(function (v) { + return v.replace(/\D/g, ""); + }); + if (values[0]) values[0] = checkValue(values[0], 12); + if (values[1]) values[1] = checkValue(values[1], 31); + const output = values.map(function (v, i) { + return v.length == 2 && i < 2 ? v + " / " : v; + }); + + const newValues = output.join("").substr(0, 14); + setFromValue(newValues); + }; + + const onToInput = (e: any) => { + let input = e.target.value; + if (/\D\/$/.test(input)) input = input.substr(0, input.length - 3); + const values = input.split("/").map(function (v) { + return v.replace(/\D/g, ""); + }); + if (values[0]) values[0] = checkValue(values[0], 12); + if (values[1]) values[1] = checkValue(values[1], 31); + const output = values.map(function (v, i) { + return v.length == 2 && i < 2 ? v + " / " : v; + }); + + const newValues = output.join("").substr(0, 14); + setToValue(newValues); + }; + + const onToBlur = () => { + setToValue((s) => { + const newDate = s.replaceAll(" ", ""); + const date = parse(newDate, "MM/dd/yyyy", new Date()); + if (!isValid(date)) { + setSelectedDate({ from: selectedDate?.from, to: undefined }); + return newDate; + } + + if (selectedDate?.from && isBefore(date, selectedDate.from)) { + setSelectedDate({ from: date, to: selectedDate.from }); + } else { + setSelectedDate({ from: selectedDate?.from, to: date }); + } + + return newDate; + }); + }; + + const onFromBlur = () => { + setFromValue((s) => { + const newDate = s.replaceAll(" ", ""); + + const date = parse(newDate, "MM/dd/yyyy", new Date()); + if (!isValid(date)) { + setSelectedDate({ from: undefined, to: undefined }); + return newDate; + } + if (selectedDate?.to && isAfter(date, selectedDate.to)) { + setSelectedDate({ from: selectedDate.to, to: date }); + } else { + setSelectedDate({ from: date, to: selectedDate?.to }); + } + + return newDate; + }); + }; + const label = useMemo(() => { - const from = date?.from ? format(date.from, "LLL dd, y") : ""; - const to = date?.to ? format(date.to, "LLL dd, y") : ""; + const from = selectedDate?.from + ? format(selectedDate.from, "LLL dd, y") + : ""; + const to = selectedDate?.to ? format(selectedDate.to, "LLL dd, y") : ""; if (from && to) return `${from} - ${to}`; if (from) return `${from}`; return "Pick a date"; - }, [date]); + }, [selectedDate]); return (
@@ -57,12 +143,12 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) { disabled={[{ after: new Date() }]} initialFocus mode="range" - defaultMonth={date?.from} - selected={date} + defaultMonth={selectedDate?.from} + selected={selectedDate} numberOfMonths={2} className="bg-white" onSelect={(d) => { - setDate(d); + setSelectedDate(d); if (!!d?.from && !!d.to) { onChange({ gte: d.from.toISOString(), @@ -72,12 +158,29 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) { }} {...props} /> +
+ +

-

+ +
)} - + {context.data && !context.data.hits.length && ( + + +

+

+ No Results Found +

+
+
+ )} {context.data?.hits.map((DAT) => ( diff --git a/src/services/ui/src/components/Opensearch/useOpensearch.ts b/src/services/ui/src/components/Opensearch/useOpensearch.ts index 037412edbd..7297018764 100644 --- a/src/services/ui/src/components/Opensearch/useOpensearch.ts +++ b/src/services/ui/src/components/Opensearch/useOpensearch.ts @@ -107,7 +107,7 @@ export const useOsAggregate = () => { field: "leadAnalystName.keyword", name: "leadAnalystName.keyword", type: "terms", - size: 300, + size: 1000, }, ], filters: DEFAULT_FILTERS[props.queryKey[0]].filters || [], diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx index 1a8445f9f6..389c2ea843 100644 --- a/src/services/ui/src/components/RHF/FieldArray.tsx +++ b/src/services/ui/src/components/RHF/FieldArray.tsx @@ -25,6 +25,8 @@ export const RHFFieldArray = ( fieldArr.append(props.fields.reduce(slotInitializer, {}) as any); }, []); + if (!fieldArr.fields.length) return <>; + return (
{fieldArr.fields.map((FLD, index) => { diff --git a/src/services/ui/src/components/RHF/FieldGroup.tsx b/src/services/ui/src/components/RHF/FieldGroup.tsx index d4c733c6a9..bbc02d2d0e 100644 --- a/src/services/ui/src/components/RHF/FieldGroup.tsx +++ b/src/services/ui/src/components/RHF/FieldGroup.tsx @@ -25,6 +25,8 @@ export const FieldGroup = ( fieldArr.append(props.fields.reduce(slotInitializer, {}) as any); }, []); + if (!fieldArr.fields.length) return <>; + return (
{fieldArr.fields.map((FLD, index) => { diff --git a/src/services/ui/src/components/Table/index.tsx b/src/services/ui/src/components/Table/index.tsx index ee0bb8a2e6..244c69ea18 100644 --- a/src/services/ui/src/components/Table/index.tsx +++ b/src/services/ui/src/components/Table/index.tsx @@ -9,7 +9,7 @@ const Table = React.forwardRef< className?: string; } >(({ className, ...props }, ref) => ( -
+
{ const columns = TABLE_COLUMNS({ isCms: user?.isCms }); return ( -
+
{ const columns = TABLE_COLUMNS({ isCms: user?.isCms }); return ( -
+