Skip to content

Commit

Permalink
Merge pull request #246 from wri/epic/TM-853-admin-ui
Browse files Browse the repository at this point in the history 
[TM-853] Admin UI Epic
  • Loading branch information
@dottyy
dottyy authored Jun 7, 2024
2 parents 7886851 + fd5d33a commit 1a9336b
Show file tree
Hide file tree
Showing 14 changed files with 561 additions and 171 deletions.
44 changes: 33 additions & 11 deletions src/admin/modules/application/components/ApplicationList.tsx
View file
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
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
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
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

0 comments on commit 1a9336b

Please sign in to comment.