fix(os): WIP filter changes

Enterprise-CMCS · Nov 6, 2023 · fbd51e5 · fbd51e5
1 parent 9ccaffb
commit fbd51e5
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 18 deletions.
diff --git 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<DateRange | undefined>({
+  const [selectedDate, setSelectedDate] = useState<DateRange | undefined>({
     from: value?.gte ? new Date(value?.gte) : undefined,
     to: value?.lte ? new Date(value?.lte) : undefined,
   });
+  const [fromValue, setFromValue] = useState<string>("");
+  const [toValue, setToValue] = useState<string>("");
 
   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 (
     <div className="flex items-center">
@@ -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}
           />
+          <div className="flex flex-row gap-4 w-[320px] p-2 m-auto">
+            <Input
+              onChange={onFromInput}
+              value={fromValue}
+              onBlur={onFromBlur}
+              placeholder="mm/dd/yyyy"
+              className="text-md"
+            />
+            <p>-</p>
+            <Input
+              onChange={onToInput}
+              value={toValue}
+              onBlur={onToBlur}
+              placeholder="mm/dd/yyyy"
+              className="text-md"
+            />
+          </div>
         </PopoverContent>
       </Popover>
       <Button
         className="text-white"
         onClick={() => {
-          setDate({ from: undefined, to: undefined });
+          setSelectedDate({ from: undefined, to: undefined });
           onChange({ gte: undefined, lte: undefined });
         }}
       >

diff --git a/src/services/ui/src/components/Opensearch/Table/index.tsx b/src/services/ui/src/components/Opensearch/Table/index.tsx
@@ -32,7 +32,7 @@ export const OsTable: FC<{
   };
 
   return (
-    <UI.Table className="flex-1 border-[1px]">
+    <UI.Table className="flex-1 min-h-[calc(100vh-350px)]">
       <UI.TableHeader className="sticky top-0 bg-white">
         <UI.TableRow>
           <UI.TableHead
@@ -77,7 +77,16 @@ export const OsTable: FC<{
             <LoadingSpinner />
           </div>
         )}
-
+        {context.data && !context.data.hits.length && (
+          <UI.TableRow className="h-10">
+            <UI.TableCell className="flex">
+              <p className="font-medium whitespace-nowrap h-[20px]"> </p>
+              <p className="absolute right-[50%] top-[50%] translate-x-[50%] translate-y-[50%] font-medium text-lg text-gray-500">
+                No Results Found
+              </p>
+            </UI.TableCell>
+          </UI.TableRow>
+        )}
         {context.data?.hits.map((DAT) => (
           <UI.TableRow key={DAT._source.id}>
             <UI.TableCell className="fixed" />

diff --git 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
@@ -25,6 +25,8 @@ export const RHFFieldArray = <TFields extends FieldValues>(
     fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   }, []);
 
+  if (!fieldArr.fields.length) return <></>;
+
   return (
     <div className="flex flex-col gap-4 w-max">
       {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
@@ -25,6 +25,8 @@ export const FieldGroup = <TFields extends FieldValues>(
     fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   }, []);
 
+  if (!fieldArr.fields.length) return <></>;
+
   return (
     <div className="flex flex-col gap-4 w-max">
       {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
@@ -9,7 +9,7 @@ const Table = React.forwardRef<
     className?: string;
   }
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
+  <div className="w-full border-[1px] overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

diff --git a/src/services/ui/src/pages/dashboard/Lists/spas/index.tsx b/src/services/ui/src/pages/dashboard/Lists/spas/index.tsx
@@ -20,7 +20,7 @@ export const SpasList = () => {
   const columns = TABLE_COLUMNS({ isCms: user?.isCms });
 
   return (
-    <section className="flex flex-col h-[calc(100vh-250px)]">
+    <section className="flex flex-col h-[calc(100vh-230px)]">
       <OsFiltering />
       <OsTable columns={columns} />
       <Pagination

diff --git a/src/services/ui/src/pages/dashboard/Lists/waivers/index.tsx b/src/services/ui/src/pages/dashboard/Lists/waivers/index.tsx
@@ -20,7 +20,7 @@ export const WaiversList = () => {
   const columns = TABLE_COLUMNS({ isCms: user?.isCms });
 
   return (
-    <section className="flex flex-col h-[calc(100vh-250px)]">
+    <section className="flex flex-col h-[calc(100vh-230px)]">
       <OsFiltering />
       <OsTable columns={columns} />
       <Pagination

diff --git a/src/services/ui/src/pages/form/index.tsx b/src/services/ui/src/pages/form/index.tsx
@@ -83,7 +83,6 @@ export function ExampleForm() {
       console.log({ err });
     }
   );
-
   return (
     <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
       <Form {...form}>