diff --git a/submit-web/src/components/Filters/DateSubmittedFromFilter.tsx b/submit-web/src/components/Filters/DateSubmittedFromFilter.tsx new file mode 100644 index 00000000..1ddb4386 --- /dev/null +++ b/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 ( + + ( + + ), + openPickerIcon: () => ( + + ), + }} + /> + + ); +} diff --git a/submit-web/src/components/Filters/DateSubmittedFilter.tsx b/submit-web/src/components/Filters/DateSubmittedToFilter.tsx similarity index 63% rename from submit-web/src/components/Filters/DateSubmittedFilter.tsx rename to submit-web/src/components/Filters/DateSubmittedToFilter.tsx index e5d29a49..8d5540b4 100644 --- a/submit-web/src/components/Filters/DateSubmittedFilter.tsx +++ b/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 ( ( - + ), openPickerIcon: () => ( - + - - + + + + + Clear Filters diff --git a/submit-web/src/components/Filters/SearchFilter.tsx b/submit-web/src/components/Filters/SearchFilter.tsx index efe996de..fd642824 100644 --- a/submit-web/src/components/Filters/SearchFilter.tsx +++ b/submit-web/src/components/Filters/SearchFilter.tsx @@ -45,6 +45,13 @@ export const SearchFilter = () => { ), }} + inputProps={{ + sx: { + "::placeholder": { + fontSize: BCDesignTokens.typographyFontSizeSmallBody, // Controls placeholder font size + }, + }, + }} /> ); }; diff --git a/submit-web/src/components/Filters/StatusFilter.tsx b/submit-web/src/components/Filters/StatusFilter.tsx index 24d28a40..f07bbeaa 100644 --- a/submit-web/src/components/Filters/StatusFilter.tsx +++ b/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() { { - if (selected.length === Object.values(SUBMISSION_STATUS).length) { - return ( - - Status - - ); - } - return ( {(selected as string[]).map((value) => ( - + + + ))} ); }} > - - All - {Object.values(SUBMISSION_STATUS).map((status) => ( diff --git a/submit-web/src/components/Filters/projectFilterStore.ts b/submit-web/src/components/Filters/projectFilterStore.ts index 5c1b8880..690871c1 100644 --- a/submit-web/src/components/Filters/projectFilterStore.ts +++ b/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((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((set) => ({ filters: { status: [], search_text: "", - submitted_on: null, + submitted_on_from: null, + submitted_on_to: null, }, })), }));