Merge pull request #114 from djnunez-aot/filter-touch-ups

Clean up filter ui - ux assurance

submit-web/src/components/Filters/DateSubmittedFromFilter.tsx

@@ -0,0 +1,47 @@
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { TextField } from "@mui/material";
+import { Dayjs } from "dayjs";
+import { useProjectFilters } from "./projectFilterStore";
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
+import { BCDesignTokens } from "epic.theme";
+
+export default function DateSubmittedFromFilter() {
+  const { filters, setFilters } = useProjectFilters();
+
+  const handleDateChange = (date: Dayjs | null) => {
+    setFilters({ submitted_on_from: date });
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        value={filters.submitted_on_from}
+        onChange={handleDateChange}
+        slots={{
+          textField: (params) => (
+            <TextField
+              fullWidth
+              {...params}
+              placeholder="Date Submitted - From"
+              inputProps={{
+                ...params.inputProps,
+                sx: {
+                  "::placeholder": {
+                    fontSize: BCDesignTokens.typographyFontSizeSmallBody, // Controls placeholder font size
+                  },
+                },
+              }}
+            />
+          ),
+          openPickerIcon: () => (
+            <CalendarMonthIcon
+              htmlColor={BCDesignTokens.typographyColorPlaceholder}
+            />
+          ),
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

submit-web/src/components/Filters/DateSubmittedFilter.tsx → submit-web/src/components/Filters/DateSubmittedToFilter.tsx

@@ -7,21 +7,33 @@ import { useProjectFilters } from "./projectFilterStore";
 import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
 import { BCDesignTokens } from "epic.theme";
 
-export default function DateSubmittedFilter() {
+export default function DateSubmittedToFilter() {
   const { filters, setFilters } = useProjectFilters();
 
   const handleDateChange = (date: Dayjs | null) => {
-    setFilters({ submitted_on: date });
+    setFilters({ submitted_on_to: date });
   };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
-        value={filters.submitted_on}
+        value={filters.submitted_on_to}
         onChange={handleDateChange}
         slots={{
           textField: (params) => (
-            <TextField fullWidth {...params} placeholder="Date Submitted" />
+            <TextField
+              fullWidth
+              {...params}
+              placeholder="Date Submitted - To"
+              inputProps={{
+                ...params.inputProps,
+                sx: {
+                  "::placeholder": {
+                    fontSize: BCDesignTokens.typographyFontSizeSmallBody, // Controls placeholder font size
+                  },
+                },
+              }}
+            />
           ),
           openPickerIcon: () => (
             <CalendarMonthIcon

submit-web/src/components/Filters/ProjectFilters.tsx

@@ -1,10 +1,11 @@
 import { Box, Grid, Typography } from "@mui/material";
 import { SearchFilter } from "./SearchFilter";
 import StatusFilter from "./StatusFilter";
-import DateSubmittedFilter from "./DateSubmittedFilter";
 import FilterAltOffOutlinedIcon from "@mui/icons-material/FilterAltOffOutlined";
 import { BCDesignTokens } from "epic.theme";
 import { useProjectFilters } from "./projectFilterStore";
+import DateSubmittedFromFilter from "./DateSubmittedFromFilter";
+import DateSubmittedToFilter from "./DateSubmittedToFilter";
 
 function ProjectFilters() {
   const { resetFilters } = useProjectFilters();
@@ -15,14 +16,17 @@ function ProjectFilters() {
       item
       sx={{ maxWidth: "1448px", justifyContent: "space-between" }}
     >
-      <Grid item xs={3.5}>
+      <Grid item xs={2.5}>
         <SearchFilter />
       </Grid>
       <Grid item xs={3.5}>
         <StatusFilter />
       </Grid>
-      <Grid item xs={3.5}>
-        <DateSubmittedFilter />
+      <Grid item xs={2}>
+        <DateSubmittedFromFilter />
+      </Grid>
+      <Grid item xs={2}>
+        <DateSubmittedToFilter />
       </Grid>
       <Grid container item xs={1}>
         <Box
@@ -33,10 +37,9 @@ function ProjectFilters() {
           sx={{ cursor: "pointer" }}
         >
           <Typography
-            variant="body1"
+            variant="caption"
             sx={{
               color: BCDesignTokens.typographyColorLink,
-              fontWeight: 900,
             }}
           >
             Clear Filters

submit-web/src/components/Filters/SearchFilter.tsx

@@ -45,6 +45,13 @@ export const SearchFilter = () => {
           </InputAdornment>
         ),
       }}
+      inputProps={{
+        sx: {
+          "::placeholder": {
+            fontSize: BCDesignTokens.typographyFontSizeSmallBody, // Controls placeholder font size
+          },
+        },
+      }}
     />
   );
 };

submit-web/src/components/Filters/StatusFilter.tsx

@@ -1,9 +1,9 @@
 import {
+  Box,
   FormControl,
   MenuItem,
   Select,
   SelectChangeEvent,
-  Typography,
 } from "@mui/material";
 import { useProjectFilters } from "./projectFilterStore";
 import { SUBMISSION_STATUS } from "@/models/Submission";
@@ -29,6 +29,7 @@ function StatusFilter() {
       <Select
         labelId="status-select-label"
         id="status-select"
+        placeholder="Status"
         value={filters.status}
         multiple
         displayEmpty
@@ -37,31 +38,22 @@ function StatusFilter() {
           "& .MuiInputBase-input": {
             p: BCDesignTokens.layoutPaddingSmall,
           },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault} !important`,
+          },
         }}
         renderValue={(selected) => {
-          if (selected.length === Object.values(SUBMISSION_STATUS).length) {
-            return (
-              <Typography
-                variant="body2"
-                color={BCDesignTokens.typographyColorDisabled}
-              >
-                Status
-              </Typography>
-            );
-          }
-
           return (
             <div style={{ display: "flex", flexWrap: "wrap" }}>
               {(selected as string[]).map((value) => (
-                <SubmissionStatusChip key={value} status={value} />
+                <Box key={value} mr={1}>
+                  <SubmissionStatusChip status={value} />
+                </Box>
               ))}
             </div>
           );
         }}
       >
-        <MenuItem value="all">
-          <em>All</em>
-        </MenuItem>
         {Object.values(SUBMISSION_STATUS).map((status) => (
           <MenuItem key={status.value} value={status.value}>
             <SubmissionStatusChip status={status.value} />

submit-web/src/components/Filters/projectFilterStore.ts

@@ -4,7 +4,8 @@ import { Dayjs } from "dayjs";
 type Filters = {
   status: string[];
   search_text: string;
-  submitted_on: Dayjs | null;
+  submitted_on_from: Dayjs | null;
+  submitted_on_to: Dayjs | null;
 };
 
 type FilterState = {
@@ -17,7 +18,8 @@ export const useProjectFilters = create<FilterState>((set) => ({
   filters: {
     status: [],
     search_text: "",
-    submitted_on: null,
+    submitted_on_from: null,
+    submitted_on_to: null,
   },
   setFilters: (newFilters) =>
     set((state) => ({
@@ -28,7 +30,8 @@ export const useProjectFilters = create<FilterState>((set) => ({
       filters: {
         status: [],
         search_text: "",
-        submitted_on: null,
+        submitted_on_from: null,
+        submitted_on_to: null,
       },
     })),
 }));