Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TM-853] Admin UI Epic #246

Merged
merged 2 commits into from
Jun 7, 2024
+561 −171
Merged

[TM-853] Admin UI Epic #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a978f4
update AdminUI lists
diego-morales-flores-1996 Jun 7, 2024
fd5d33a
Merge branch 'staging' of https://github.com/wri/wri-terramatch-websi…
diego-morales-flores-1996 Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 33 additions & 11 deletions src/admin/modules/application/components/ApplicationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Divider, Stack, Typography } from "@mui/material";
import { Stack } from "@mui/material";
import { useState } from "react";
import {
AutocompleteInput,
Expand All @@ -17,6 +17,10 @@ import {

import ListActions from "@/admin/components/Actions/ListActions";
import ApplicationsExportModal from "@/admin/modules/application/components/ApplicationsExportModal";
import Menu from "@/components/elements/Menu/Menu";
import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
import Text from "@/components/elements/Text/Text";
import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
import { V2OrganisationRead } from "@/generated/apiSchemas";

import modules from "../..";
Expand All @@ -29,6 +33,17 @@ export const statusChoices = [
{ id: "rejected", name: "Rejected" }
];

const tableMenu = [
{
id: "1",
render: () => <ShowButton />
},
{
id: "2",
render: () => <DeleteWithConfirmButton />
}
];

const ApplicationDataGrid = () => {
return (
<Datagrid>
Expand Down Expand Up @@ -61,8 +76,9 @@ const ApplicationDataGrid = () => {
/>
<DateField source="created_at" label="Created" showTime locales="en-GB" />
<DateField source="updated_at" label="Last Edited" showTime locales="en-GB" />
<ShowButton />
<DeleteWithConfirmButton />
<Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
<Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
</Menu>
</Datagrid>
);
};
Expand All @@ -71,27 +87,33 @@ export const ApplicationList = () => {
const [exportModalOpen, setExportModalOpen] = useState<boolean>(false);

const filters = [
<SearchInput key="s" source="search" alwaysOn />,
<SearchInput key="s" source="search" alwaysOn className="search-page-admin" />,
<ReferenceInput
key="fp"
source="funding_programme_uuid"
reference={modules.fundingProgramme.ResourceName}
label="Funding Programme"
>
<AutocompleteInput optionText="name" label="Funding Programme" />
<AutocompleteInput optionText="name" label="Funding Programme" className="select-page-admin" />
</ReferenceInput>,
<ReferenceInput key="st" source="current_submission.uuid" reference={modules.stage.ResourceName} label="Stage">
<AutocompleteInput optionText="name" label="Stage" optionValue="uuid" />
<AutocompleteInput optionText="name" label="Stage" optionValue="uuid" className="select-page-admin" />
</ReferenceInput>,
<SelectInput key="status" label="Status" source="current_submission_status" choices={statusChoices} />
<SelectInput
key="status"
label="Status"
source="current_submission_status"
choices={statusChoices}
className="select-page-admin"
/>
];

return (
<>
<Stack gap={1} py={2}>
<Typography variant="h5">Applications</Typography>

<Divider />
<Stack gap={1} className="pb-6">
<Text variant="text-36-bold" className="leading-none">
Applications
</Text>
</Stack>

<List actions={<ListActions onExport={() => setExportModalOpen(true)} />} filters={filters}>
Expand Down
54 changes: 36 additions & 18 deletions src/admin/modules/form/components/FormList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import { Divider, Stack, Typography } from "@mui/material";
import { BooleanField, Datagrid, ImageField, List, TextField } from "react-admin";
import { Stack } from "@mui/material";
import { useState } from "react";
import { BooleanField, Datagrid, ImageField, List, TextField, useDataProvider } from "react-admin";

export const FormList = () => (
<>
<Stack gap={1} py={2}>
<Typography variant="h5">Forms</Typography>
import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
import ListActionsCreate from "@/admin/components/Actions/ListActionsCreate";
import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
import Text from "@/components/elements/Text/Text";

<Divider />
</Stack>
import modules from "../..";

<List>
<Datagrid rowClick="show" bulkActionButtons={false}>
<ImageField source="banner.thumb_url" label="Banner Image" />
<TextField source="title" label="Title" />
<TextField source="type" label="Form Type" />
<BooleanField source="published" label="Published" />
</Datagrid>
</List>
</>
);
export const FormList = () => {
const [exporting, setExporting] = useState<boolean>(false);
const userDataProvider = useDataProvider<UserDataProvider>();
const handleExport = () => {
setExporting(true);

userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
};
return (
<>
<Stack gap={1} className="pb-6">
<Text variant="text-36-bold" className="leading-none">
Forms
</Text>
</Stack>

<List actions={<ListActionsCreate onExport={handleExport} />}>
<Datagrid rowClick="show" bulkActionButtons={false}>
<ImageField source="banner.thumb_url" label="Banner Image" />
<TextField source="title" label="Title" />
<TextField source="type" label="Form Type" />
<BooleanField source="published" label="Published" />
</Datagrid>
</List>
<ExportProcessingAlert show={exporting} />
</>
);
};
51 changes: 41 additions & 10 deletions src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,56 @@
import { Divider, Stack, Typography } from "@mui/material";
import { Datagrid, DateField, EditButton, List, ShowButton, TextField } from "react-admin";
import { Stack } from "@mui/material";
import { useState } from "react";
import { Datagrid, DateField, EditButton, List, ShowButton, TextField, useDataProvider } from "react-admin";

import { UserDataProvider } from "@/admin/apiProvider/dataProviders/userDataProvider";
import ListActionsCreate from "@/admin/components/Actions/ListActionsCreate";
import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAlert";
import Menu from "@/components/elements/Menu/Menu";
import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
import Text from "@/components/elements/Text/Text";
import Icon, { IconNames } from "@/components/extensive/Icon/Icon";

import modules from "../..";

const tableMenu = [
{
id: "1",
render: () => <EditButton />
},
{
id: "2",
render: () => <ShowButton />
}
];

export const FundingProgrammeList = () => {
const [exporting, setExporting] = useState<boolean>(false);
const userDataProvider = useDataProvider<UserDataProvider>();
const handleExport = () => {
setExporting(true);

userDataProvider.export(modules.user.ResourceName).finally(() => setExporting(false));
};
return (
<>
<Stack gap={1} py={2}>
<Typography variant="h5">Funding Programmes</Typography>

<Divider />
<Stack gap={1} className="pb-6">
<Text variant="text-36-bold" className="leading-none">
Funding Programmes
</Text>
</Stack>

<List filters={[]}>
<Datagrid rowClick="edit">
<List actions={<ListActionsCreate onExport={handleExport} />} filters={[]}>
<Datagrid>
<TextField source="name" label="Name" sortable={false} />
<TextField source="description" label="Description" sortable={false} />
<TextField source="status" label="Status" sortable={false} sx={{ textTransform: "capitalize" }} />
<DateField source="created_at" label="Date Added" sortable={false} locales="en-GB" />
<ShowButton />
<EditButton />
<Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
<Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
</Menu>
</Datagrid>
</List>
<ExportProcessingAlert show={exporting} />
</>
);
};
72 changes: 56 additions & 16 deletions src/admin/modules/nurseries/components/NurseriesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Divider, Stack, Typography } from "@mui/material";
import { Stack } from "@mui/material";
import { FC } from "react";
import {
AutocompleteInput,
Expand All @@ -21,13 +21,36 @@ import ExportProcessingAlert from "@/admin/components/Alerts/ExportProcessingAle
import CustomBulkDeleteWithConfirmButton from "@/admin/components/Buttons/CustomBulkDeleteWithConfirmButton";
import CustomDeleteWithConfirmButton from "@/admin/components/Buttons/CustomDeleteWithConfirmButton";
import FrameworkSelectionDialog, { useFrameworkExport } from "@/admin/components/Dialogs/FrameworkSelectionDialog";
import Menu from "@/components/elements/Menu/Menu";
import { MENU_PLACEMENT_BOTTOM_LEFT } from "@/components/elements/Menu/MenuVariant";
import Text from "@/components/elements/Text/Text";
import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
import { getCountriesOptions } from "@/constants/options/countries";
import { useFrameworkChoices } from "@/constants/options/frameworks";
import { getChangeRequestStatusOptions, getStatusOptions } from "@/constants/options/status";
import { optionToChoices } from "@/utils/options";

import modules from "../..";

const tableMenu = [
{
id: "1",
render: () => <ShowButton />
},
{
id: "2",
render: () => <EditButton />
},
{
id: "3",
render: () => (
<WrapperField>
<CustomDeleteWithConfirmButton source="name" />
</WrapperField>
)
}
];

const NurseryDataGrid: FC = () => {
const frameworkChoices = useFrameworkChoices();

Expand All @@ -53,11 +76,9 @@ const NurseryDataGrid: FC = () => {
}
sortable={false}
/>
<ShowButton />
<EditButton />
<WrapperField>
<CustomDeleteWithConfirmButton source="name" />
</WrapperField>
<Menu menu={tableMenu} placement={MENU_PLACEMENT_BOTTOM_LEFT}>
<Icon name={IconNames.ELIPSES} className="h-6 w-6 rounded-full p-1 hover:bg-neutral-200"></Icon>
</Menu>
</Datagrid>
);
};
Expand All @@ -66,8 +87,14 @@ export const NurseriesList: FC = () => {
const frameworkChoices = useFrameworkChoices();

const filters = [
<SearchInput key="search" source="search" alwaysOn />,
<SelectInput key="country" label="Country" source="country" choices={optionToChoices(getCountriesOptions())} />,
<SearchInput key="search" source="search" alwaysOn className="search-page-admin" />,
<SelectInput
key="country"
label="Country"
source="country"
choices={optionToChoices(getCountriesOptions())}
className="select-page-admin"
/>,
<ReferenceInput
key="organisation"
source="organisation_uuid"
Expand All @@ -78,15 +105,28 @@ export const NurseriesList: FC = () => {
order: "ASC"
}}
>
<AutocompleteInput optionText="name" label="Organization" />
<AutocompleteInput optionText="name" label="Organization" className="select-page-admin" />
</ReferenceInput>,
<SelectInput key="framework_key" label="Framework" source="framework_key" choices={frameworkChoices} />,
<SelectInput key="status" label="Status" source="status" choices={optionToChoices(getStatusOptions())} />,
<SelectInput
key="framework_key"
label="Framework"
source="framework_key"
choices={frameworkChoices}
className="select-page-admin"
/>,
<SelectInput
key="status"
label="Status"
source="status"
choices={optionToChoices(getStatusOptions())}
className="select-page-admin"
/>,
<SelectInput
key="update_request_status"
label="Change Request Status"
source="update_request_status"
choices={optionToChoices(getChangeRequestStatusOptions())}
className="select-page-admin"
/>,
<ReferenceInput
key="project"
Expand All @@ -98,18 +138,18 @@ export const NurseriesList: FC = () => {
order: "ASC"
}}
>
<AutocompleteInput optionText="name" label="Project" />
<AutocompleteInput optionText="name" label="Project" className="select-page-admin" />
</ReferenceInput>
];

const { exporting, openExportDialog, frameworkDialogProps } = useFrameworkExport("nurseries");

return (
<>
<Stack gap={1} py={2}>
<Typography variant="h5">Nurseries</Typography>

<Divider />
<Stack gap={1} className="pb-6">
<Text variant="text-36-bold" className="leading-none">
Nurseries
</Text>
</Stack>

<List actions={<ListActions onExport={openExportDialog} />} filters={filters}>
Expand Down
Loading