[DOP-29615] Add filter by Job.type

Author: dolfinus

src/components/job/JobIcon.tsx

@@ -1,38 +1,21 @@
 import { ReactElement } from "react";
-import {
-    List,
-    TextField,
-    SearchInput,
-    minLength,
-    DatagridConfigurable,
-    useTranslate,
-} from "react-admin";
+import { List, TextField, DatagridConfigurable } from "react-admin";
 import { ListActions } from "@/components/base";
 import {
     LocationRaNameWithLinkField,
     LocationRaTypeWithIconField,
 } from "@/components/location";
 import JobRaTypeField from "./JobRaTypeField";
+import JobRaListFilters from "./JobRaListFilters";
 
 const JobRaList = (): ReactElement => {
-    const translate = useTranslate();
-
-    const jobFilters = [
-        <SearchInput
-            key="search_query"
-            source="search_query"
-            alwaysOn
-            validate={minLength(3)}
-            placeholder={translate(
-                "resources.jobs.filters.search_query.placeholder",
-            )}
-        />,
-    ];
-
     return (
         <List
-            actions={<ListActions />}
-            filters={jobFilters}
+            actions={
+                <ListActions>
+                    <JobRaListFilters />
+                </ListActions>
+            }
             resource="jobs"
             storeKey={false}
         >

src/components/job/JobIconWithType.tsx

@@ -0,0 +1,71 @@
+import { minLength, useTranslate } from "react-admin";
+
+import { useForm, FormProvider } from "react-hook-form";
+import { Box, Button, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import { TextInput, useListContext } from "react-admin";
+import { useEffect } from "react";
+import JobTypeRaFilter from "./JobRaTypeFilter";
+
+type JobRaListFilterValues = {
+    job_type?: string[];
+    search_query?: string;
+};
+
+const JobRaListFilters = () => {
+    const translate = useTranslate();
+    const { filterValues, setFilters } = useListContext();
+    const form = useForm({ defaultValues: filterValues });
+
+    const submit = form.handleSubmit((formValues: JobRaListFilterValues) => {
+        if (Object.keys(formValues).length > 0) {
+            setFilters(formValues);
+        }
+    });
+
+    // fill up filters just after opening the page
+    useEffect(() => {
+        submit();
+    }, []);
+
+    return (
+        <FormProvider {...form}>
+            <form onSubmit={submit}>
+                <Box display="flex" alignItems="flex-end">
+                    <Box component="span" mr={2}>
+                        <JobTypeRaFilter />
+                    </Box>
+
+                    <Box component="span" mr={2} sx={{ flex: 0.3 }}>
+                        {/* Not using SearchInput here because it doesn't match styles with other filters */}
+                        <TextInput
+                            source="search_query"
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <SearchIcon color="disabled" />
+                                    </InputAdornment>
+                                ),
+                            }}
+                            validate={minLength(3)}
+                            label="resources.jobs.filters.search_query.label"
+                            helperText="resources.jobs.filters.search_query.helperText"
+                        />
+                    </Box>
+
+                    <Box component="span" mb={4}>
+                        <Button
+                            variant="outlined"
+                            color="primary"
+                            type="submit"
+                        >
+                            {translate("resources.jobs.filters.apply_button")}
+                        </Button>
+                    </Box>
+                </Box>
+            </form>
+        </FormProvider>
+    );
+};
+
+export default JobRaListFilters;

src/components/job/JobRaList.tsx

@@ -1,41 +1,24 @@
 import { ReactElement } from "react";
 
 import { ListActions } from "@/components/base";
-import {
-    List,
-    TextField,
-    DatagridConfigurable,
-    SearchInput,
-    minLength,
-    useTranslate,
-} from "react-admin";
+import { List, TextField, DatagridConfigurable } from "react-admin";
 import JobRaTypeField from "./JobRaTypeField";
+import JobRaListFilters from "./JobRaListFilters";
 
 const JobRaListForLocation = ({
     locationId,
 }: {
     locationId: number;
 }): ReactElement => {
-    const translate = useTranslate();
-
-    const jobFilters = [
-        <SearchInput
-            key="search_query"
-            source="search_query"
-            alwaysOn
-            validate={minLength(3)}
-            placeholder={translate(
-                "resources.jobs.filters.search_query.placeholder",
-            )}
-        />,
-    ];
-
     return (
         <List
             resource="jobs"
+            actions={
+                <ListActions>
+                    <JobRaListFilters />
+                </ListActions>
+            }
             filter={{ location_id: locationId }}
-            filters={jobFilters}
-            actions={<ListActions />}
             title={false}
             storeKey={false}
         >

src/components/job/JobRaListFilters.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { Stack } from "@mui/material";
 import { useRecordContext } from "react-admin";
-import JobIcon from "./JobIcon";
+import JobTypeIcon from "./JobTypeIcon";
 import { JobDetailedResponseV1 } from "@/dataProvider/types";
 
 const JobRaRepr = (): ReactElement | null => {
@@ -19,7 +19,7 @@ const JobRaRepr = (): ReactElement | null => {
                 textDecoration: "underline",
             }}
         >
-            <JobIcon job={job.data} />
+            <JobTypeIcon jobType={job.data.type} />
             <span>{job.data.name}</span>
         </Stack>
     );

src/components/job/JobRaListForLocation.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { FieldProps, useRecordContext } from "react-admin";
-import JobIconWithType from "./JobIconWithType";
+import JobTypeRepr from "./JobTypeRepr";
 import { JobDetailedResponseV1 } from "@/dataProvider/types";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -9,7 +9,7 @@ const JobRaTypeField = (props: FieldProps): ReactElement | null => {
     if (!record) {
         return null;
     }
-    return <JobIconWithType job={record.data} />;
+    return <JobTypeRepr jobType={record.data.type} />;
 };
 
 export default JobRaTypeField;

src/components/job/JobRaRepr.tsx

@@ -0,0 +1,38 @@
+import { JobTypesResponseV1 } from "@/dataProvider/types";
+import { ReactElement, useEffect, useState } from "react";
+import { SelectArrayInput, useDataProvider, useTranslate } from "react-admin";
+import { getDefaultJobType } from "./JobType";
+
+const JobRaTypeFilter = (): ReactElement => {
+    const dataProvider = useDataProvider();
+    const translate = useTranslate();
+
+    const [jobTypes, setJobTypes] = useState<string[]>([]);
+
+    useEffect(() => {
+        dataProvider.getJobTypes({}).then((response: JobTypesResponseV1) => {
+            setJobTypes(response.job_types);
+        });
+    }, [dataProvider]);
+
+    const jobTypesRepr = jobTypes.map((jobType) => {
+        return {
+            id: jobType,
+            name: translate(
+                `resources.jobs.types.${jobType.toLocaleLowerCase()}`,
+                { _: getDefaultJobType(jobType) },
+            ),
+        };
+    });
+
+    return (
+        <SelectArrayInput
+            source="job_type"
+            choices={jobTypesRepr}
+            label="resources.jobs.filters.job_type.label"
+            helperText="resources.jobs.filters.job_type.helperText"
+        />
+    );
+};
+
+export default JobRaTypeFilter;

src/components/job/JobRaTypeField.tsx

@@ -1,18 +1,21 @@
 import { useTranslate } from "react-admin";
-import { JobResponseV1 } from "@/dataProvider/types";
 
-const JobType = ({ job }: { job: JobResponseV1 }): string => {
+export const getDefaultJobType = (jobType: string): string => {
+    return jobType
+        .split("_")
+        .map(
+            (s) =>
+                s.charAt(0).toLocaleUpperCase() +
+                s.substring(1).toLocaleLowerCase(),
+        )
+        .join(" ");
+};
+
+const JobType = ({ jobType }: { jobType: string }): string => {
     const translate = useTranslate();
 
-    return translate(`resources.jobs.types.${job.type.toLocaleLowerCase()}`, {
-        _: job.type
-            .split("_")
-            .map(
-                (s) =>
-                    s.charAt(0).toLocaleUpperCase() +
-                    s.substring(1).toLocaleLowerCase(),
-            )
-            .join(" "),
+    return translate(`resources.jobs.types.${jobType.toLocaleLowerCase()}`, {
+        _: getDefaultJobType(jobType),
     });
 };
 

src/components/job/JobRaTypeFilter.tsx

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { IconByName } from "@/components/icons";
+
+const JobTypeIcon = ({ jobType }: { jobType: string }): ReactElement => {
+    return <IconByName name={jobType} />;
+};
+
+export default JobTypeIcon;