[DOP-22571] add Datasets and Jobs tabs for Location page (#88)

Author: TiGrib

src/components/dataset/DatasetRaListForLocation.tsx

@@ -0,0 +1,51 @@
+import { ReactElement } from "react";
+import { ListActions } from "@/components/base";
+import {
+    List,
+    TextField,
+    DatagridConfigurable,
+    SearchInput,
+    minLength,
+    useTranslate,
+} from "react-admin";
+
+const DatasetRaListForLocation = ({
+    locationId,
+}: {
+    locationId: number;
+}): ReactElement => {
+    const translate = useTranslate();
+
+    const datasetFilters = [
+        <SearchInput
+            key="search_query"
+            source="search_query"
+            alwaysOn
+            validate={minLength(3)}
+            placeholder={translate(
+                "resources.datasets.filters.search_query.placeholder",
+            )}
+        />,
+    ];
+
+    return (
+        <List
+            resource="datasets"
+            filter={{ location_id: locationId }}
+            filters={datasetFilters}
+            actions={<ListActions />}
+            storeKey={false}
+            title={false}
+        >
+            <DatagridConfigurable bulkActionButtons={false}>
+                <TextField
+                    source="data.name"
+                    label="resources.datasets.fields.name"
+                    sortable={false}
+                />
+            </DatagridConfigurable>
+        </List>
+    );
+};
+
+export default DatasetRaListForLocation;

src/components/dataset/index.ts

@@ -2,5 +2,12 @@ import DatasetRaShow from "./DatasetRaShow";
 import DatasetRaList from "./DatasetRaList";
 import DatasetRaRepr from "./DatasetRaRepr";
 import DatasetRaTag from "./DatasetRaTag";
+import DatasetRaListForLocation from "./DatasetRaListForLocation";
 
-export { DatasetRaShow, DatasetRaList, DatasetRaRepr, DatasetRaTag };
+export {
+    DatasetRaShow,
+    DatasetRaList,
+    DatasetRaRepr,
+    DatasetRaTag,
+    DatasetRaListForLocation,
+};

src/components/job/JobRaListForLocation.tsx

@@ -0,0 +1,57 @@
+import { ReactElement } from "react";
+
+import { ListActions } from "@/components/base";
+import {
+    List,
+    TextField,
+    DatagridConfigurable,
+    SearchInput,
+    minLength,
+    useTranslate,
+} from "react-admin";
+import JobRaTypeField from "./JobRaTypeField";
+
+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"
+            filter={{ location_id: locationId }}
+            filters={jobFilters}
+            actions={<ListActions />}
+            title={false}
+            storeKey={false}
+        >
+            <DatagridConfigurable bulkActionButtons={false}>
+                <JobRaTypeField
+                    source="data.type"
+                    label="resources.jobs.fields.type"
+                />
+                <TextField
+                    source="data.name"
+                    label="resources.jobs.fields.name"
+                    sortable={false}
+                />
+            </DatagridConfigurable>
+        </List>
+    );
+};
+
+export default JobRaListForLocation;

src/components/job/index.ts

@@ -2,5 +2,12 @@ import JobRaShow from "./JobRaShow";
 import JobRaList from "./JobRaList";
 import JobRaRepr from "./JobRaRepr";
 import JobIconWithType from "./JobIconWithType";
+import JobRaListForLocation from "./JobRaListForLocation";
 
-export { JobRaShow, JobRaList, JobRaRepr, JobIconWithType };
+export {
+    JobRaShow,
+    JobRaList,
+    JobRaRepr,
+    JobIconWithType,
+    JobRaListForLocation,
+};

src/components/location/LocationRaShow.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import {
+    TabbedShowLayout,
     ArrayField,
     Datagrid,
     Show,
@@ -10,6 +11,8 @@ import {
     WrapperField,
 } from "react-admin";
 import LocationIconWithType from "./LocationIconWithType";
+import { JobRaListForLocation } from "@/components/job";
+import { DatasetRaListForLocation } from "@/components/dataset";
 
 const LocationRaShow = (): ReactElement => {
     return (
@@ -43,6 +46,24 @@ const LocationRaShow = (): ReactElement => {
                         <UrlField source="url" label="URL" target="_blank" />
                     </Datagrid>
                 </ArrayField>
+                <TabbedShowLayout>
+                    <TabbedShowLayout.Tab label="resources.locations.tabs.datasets">
+                        <WithRecord
+                            render={(record) => (
+                                <DatasetRaListForLocation
+                                    locationId={record.id}
+                                />
+                            )}
+                        />
+                    </TabbedShowLayout.Tab>
+                    <TabbedShowLayout.Tab label="resources.locations.tabs.jobs">
+                        <WithRecord
+                            render={(record) => (
+                                <JobRaListForLocation locationId={record.id} />
+                            )}
+                        />
+                    </TabbedShowLayout.Tab>
+                </TabbedShowLayout>
             </SimpleShowLayout>
         </Show>
     );

src/i18n/en.ts

@@ -61,6 +61,10 @@ const customEnglishMessages: TranslationMessages = {
                     placeholder: "Filter by name or address",
                 },
             },
+            tabs: {
+                datasets: "Datasets",
+                jobs: "Jobs",
+            },
         },
         datasets: {
             name: "Dataset |||| Datasets",

src/i18n/ru.ts

@@ -61,6 +61,10 @@ const customRussianMessages: TranslationMessages = {
                     placeholder: "Фильтр по имени или адресу",
                 },
             },
+            tabs: {
+                datasets: "Датасеты",
+                jobs: "Джобы",
+            },
         },
         datasets: {
             name: "Датасет |||| Датасеты",