Merge branch 'staging' into feat/TM-905-create-map-instance

wri · Jun 10, 2024 · 9be6652 · 9be6652
2 parents 401b2c2 + 1a9336b
commit 9be6652
Show file tree

Hide file tree

Showing 79 changed files with 1,201 additions and 470 deletions.
diff --git a/src/admin/modules/application/components/ApplicationList.tsx b/src/admin/modules/application/components/ApplicationList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useState } from "react";
 import {
   AutocompleteInput,
@@ -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 "../..";
@@ -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>
@@ -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>
   );
 };
@@ -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}>

diff --git a/src/admin/modules/form/components/FormList.tsx b/src/admin/modules/form/components/FormList.tsx
@@ -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} />
+    </>
+  );
+};
diff --git a/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx b/src/admin/modules/fundingProgrammes/components/FundingProgrammeList.tsx
@@ -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} />
     </>
   );
 };
diff --git a/src/admin/modules/nurseries/components/NurseriesList.tsx b/src/admin/modules/nurseries/components/NurseriesList.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import { FC } from "react";
 import {
   AutocompleteInput,
@@ -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();
 
@@ -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>
   );
 };
@@ -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"
@@ -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"
@@ -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}>