[DOP-22569] Add filter by Job.location_type

Author: dolfinus

src/components/job/JobRaListFilters.tsx

@@ -1,70 +1,43 @@
-import { minLength, useTranslate } from "react-admin";
+import { FilterLiveForm, 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 { TextInput } from "react-admin";
 import JobTypeRaFilter from "./JobRaTypeFilter";
-
-type JobRaListFilterValues = {
-    job_type?: string[];
-    search_query?: string;
-};
+import { LocationRaTypeFilter } from "../location";
 
 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>
+        <FilterLiveForm>
+            <Box display="flex" alignItems="flex-end">
+                <Box component="span" mr={2} sx={{ flex: "0.2" }}>
+                    <LocationRaTypeFilter />
+                </Box>
 
-                    <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
-                        {/* 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" mr={2} sx={{ flex: "0.2" }}>
+                    <JobTypeRaFilter />
+                </Box>
 
-                    <Box component="span" mb={4}>
-                        <Button
-                            variant="outlined"
-                            color="primary"
-                            type="submit"
-                        >
-                            {translate("resources.jobs.filters.apply_button")}
-                        </Button>
-                    </Box>
+                <Box component="span" mr={2} sx={{ flex: "0.3 1 1" }}>
+                    {/* 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>
-            </form>
-        </FormProvider>
+            </Box>
+        </FilterLiveForm>
     );
 };
 

src/i18n/en.ts

@@ -127,6 +127,10 @@ const customEnglishMessages: TranslationMessages = {
                 lineage: "Lineage",
             },
             filters: {
+                location_type: {
+                    label: "Location Type",
+                    helperText: "Only selected",
+                },
                 job_type: {
                     label: "Job Type",
                     helperText: "Only selected",
@@ -135,7 +139,6 @@ const customEnglishMessages: TranslationMessages = {
                     label: "Search",
                     helperText: "Filter by name or address",
                 },
-                apply_button: "Apply",
             },
         },
         runs: {

src/i18n/ru.ts

@@ -127,6 +127,10 @@ const customRussianMessages: TranslationMessages = {
                 lineage: "Линедж",
             },
             filters: {
+                location_type: {
+                    label: "Тип расположения",
+                    helperText: "Только выбранные",
+                },
                 job_type: {
                     label: "Тип джобы",
                     helperText: "Только выбранные",
@@ -135,7 +139,6 @@ const customRussianMessages: TranslationMessages = {
                     label: "Поиск",
                     helperText: "Фильтр по имени или адресу",
                 },
-                apply_button: "Применить",
             },
         },
         runs: {