Skip to content

Commit

Permalink
Merge pull request #218 from wri/feat/admin_new_design
Browse files Browse the repository at this point in the history
Feat/ edit design in admin
  • Loading branch information
dottyy authored Jun 3, 2024
2 parents 7c52f73 + b1174d9 commit f86efde
Show file tree
Hide file tree
Showing 15 changed files with 203 additions and 100 deletions.
4 changes: 2 additions & 2 deletions src/admin/components/Actions/ListActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ interface ListActionsProps {

const ListActions = (props: ListActionsProps) => (
<TopToolbar>
<FilterButton />
<FilterButton className="filter-button-page-admin" />
<When condition={!!props.onExport}>
<Button label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
<Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
</When>
</TopToolbar>
);
Expand Down
18 changes: 18 additions & 0 deletions src/admin/components/Actions/ListActionsCreate.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import DownloadIcon from "@mui/icons-material/GetApp";
import { Button, CreateButton, TopToolbar } from "react-admin";
import { When } from "react-if";

interface ListActionsCreateProps {
onExport?: () => void;
}

const ListActionsCreate = (props: ListActionsCreateProps) => (
<TopToolbar>
<CreateButton className="filter-button-page-admin" />
<When condition={!!props.onExport}>
<Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
</When>
</TopToolbar>
);

export default ListActionsCreate;
14 changes: 12 additions & 2 deletions src/admin/components/Actions/ShowActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
} from "react-admin";
import { When } from "react-if";

import Icon, { IconNames } from "@/components/extensive/Icon/Icon";

import ShowTitle from "../ShowTitle";

interface IProps {
Expand Down Expand Up @@ -49,10 +51,18 @@ const ShowActions = ({
</When>
<TopToolbar sx={{ marginBottom: 2, marginLeft: "auto" }}>
<When condition={record && hasDelete}>
<DeleteWithConfirmButton {...deleteProps} mutationMode="undoable" />
<DeleteWithConfirmButton
{...deleteProps}
mutationMode="undoable"
className="!text-sm !font-semibold !capitalize lg:!text-base wide:!text-md"
icon={<Icon className="h-6 w-6" name={IconNames.TRASH_PA} />}
/>
</When>
<When condition={record && hasEdit}>
<EditButton />
<EditButton
className="!text-sm !font-semibold !capitalize !text-blueCustom-900 lg:!text-base wide:!text-md"
icon={<Icon className="h-6 w-6" name={IconNames.EDIT} />}
/>
</When>
</TopToolbar>
</Box>
Expand Down
35 changes: 14 additions & 21 deletions src/admin/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
import { WatchLater } from "@mui/icons-material";
import ArticleIcon from "@mui/icons-material/Article";
import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
import BusinessIcon from "@mui/icons-material/Business";
import ForestIcon from "@mui/icons-material/Forest";
import FullscreenIcon from "@mui/icons-material/Fullscreen";
import UserIcon from "@mui/icons-material/Group";
import LanguageIcon from "@mui/icons-material/Language";
import LibraryBooksIcon from "@mui/icons-material/LibraryBooks";
import SummarizeIcon from "@mui/icons-material/Summarize";
import { useEffect, useState } from "react";
import { Admin, Resource } from "react-admin";
Expand All @@ -15,6 +6,7 @@ import { authProvider } from "@/admin/apiProvider/authProvider";
import { dataProvider } from "@/admin/apiProvider/dataProviders";
import { AppLayout } from "@/admin/components/AppLayout";
import { theme } from "@/admin/components/theme";
import Icon, { IconNames } from "@/components/extensive/Icon/Icon";

import modules from "../modules";
import AdminLoginPage from "../pages/AdminLoginPage";
Expand Down Expand Up @@ -50,29 +42,29 @@ const App = () => {
list={modules.user.List}
show={modules.user.Show}
edit={modules.user.Edit}
icon={UserIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.USERS} />}
/>
<Resource
name={modules.organisation.ResourceName}
list={modules.organisation.List}
show={modules.organisation.Show}
edit={modules.organisation.Edit}
icon={BusinessIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.ORGANISATIONS} />}
/>
<Resource
name={modules.pitch.ResourceName}
list={modules.pitch.List}
show={modules.pitch.Show}
edit={modules.pitch.Edit}
icon={ForestIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.PITCHES} />}
/>
<Resource
name={modules.fundingProgramme.ResourceName}
list={modules.fundingProgramme.List}
edit={modules.fundingProgramme.Edit}
show={modules.fundingProgramme.Show}
create={modules.fundingProgramme.Create}
icon={AttachMoneyIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.FUNDING_PROGRAMMES} />}
options={{ label: "Funding Programmes" }}
/>
<Resource
Expand All @@ -81,14 +73,14 @@ const App = () => {
show={modules.reportingFramework.Show}
edit={modules.reportingFramework.Edit}
{...(canCreate ? { create: modules.reportingFramework.Create } : null)}
icon={WatchLater}
icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTING_FRAMEWORKS} />}
options={{ label: "Reporting Frameworks" }}
/>
<Resource
name={modules.application.ResourceName}
list={modules.application.List}
show={modules.application.Show}
icon={LibraryBooksIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.APPLICATIONS} />}
/>
<Resource
name={modules.stage.ResourceName}
Expand All @@ -100,28 +92,29 @@ const App = () => {
name={modules.form.ResourceName}
list={modules.form.List}
edit={modules.form.Edit}
icon={() => <Icon className="h-8 w-8" name={IconNames.FORMS} />}
create={modules.form.Create}
/>
<Resource
name={modules.project.ResourceName}
list={modules.project.List}
show={modules.project.Show}
edit={modules.project.Edit}
icon={ArticleIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.PROJECTS} />}
/>
<Resource
name={modules.site.ResourceName}
list={modules.site.List}
show={modules.site.Show}
edit={modules.site.Edit}
icon={LanguageIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.SITES} />}
/>
<Resource
name={modules.nursery.ResourceName}
list={modules.nursery.List}
show={modules.nursery.Show}
edit={modules.nursery.Edit}
icon={FullscreenIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.NURSERIES} />}
/>
<Resource
name={modules.task.ResourceName}
Expand All @@ -135,23 +128,23 @@ const App = () => {
list={modules.projectReport.List}
show={modules.projectReport.Show}
edit={modules.projectReport.Edit}
icon={SummarizeIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
options={{ label: "Project Reports" }}
/>
<Resource
name={modules.siteReport.ResourceName}
list={modules.siteReport.List}
show={modules.siteReport.Show}
edit={modules.siteReport.Edit}
icon={SummarizeIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
options={{ label: "Site Reports" }}
/>
<Resource
name={modules.nurseryReport.ResourceName}
list={modules.nurseryReport.List}
show={modules.nurseryReport.Show}
edit={modules.nurseryReport.Edit}
icon={SummarizeIcon}
icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
options={{ label: "Nursery Reports" }}
/>
<Resource name={modules.audit.ResourceName} />
Expand Down
4 changes: 2 additions & 2 deletions src/admin/components/AppLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import { BackButton } from "@/admin/components/BackButton";
import ExportProvider from "@/admin/modules/application/context/export.provider";

import { AppBar } from "./AppBar";
import AppMenu from "./AppMenu";

export const AppLayout = (props: LayoutProps) => {
const regex = new RegExp("[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}", "gi");

const isDetailPage = regex.test(window.location.hash);

return (
<ExportProvider>
<Layout {...props} appBar={AppBar}>
<Layout {...props} appBar={AppBar} menu={AppMenu}>
<When condition={isDetailPage}>
<Box marginTop={2}>
<BackButton />
Expand Down
63 changes: 63 additions & 0 deletions src/admin/components/AppMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import classNames from "classnames";
import { Menu } from "react-admin";
import { useLocation } from "react-router-dom";

import modules from "../modules";

const AppMenu = () => {
const location = useLocation();
const hash = location.pathname.split("/")[1];
return (
<Menu className="!w-full">
<div className={classNames({ "Sidebar-active": hash === "user" })}>
<Menu.ResourceItem name={modules.user.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "organisation" })}>
<Menu.ResourceItem name={modules.organisation.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "pitch" })}>
<Menu.ResourceItem name={modules.pitch.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "fundingProgramme" })}>
<Menu.ResourceItem name={modules.fundingProgramme.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "reportingFramework" })}>
<Menu.ResourceItem name={modules.reportingFramework.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "application" })}>
<Menu.ResourceItem name={modules.application.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "stage" })}>
<Menu.ResourceItem name={modules.stage.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "form" })}>
<Menu.ResourceItem name={modules.form.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "project" })}>
<Menu.ResourceItem name={modules.project.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "site" })}>
<Menu.ResourceItem name={modules.site.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "nursery" })}>
<Menu.ResourceItem name={modules.nursery.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "task" })}>
<Menu.ResourceItem name={modules.task.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "projectReport" })}>
<Menu.ResourceItem name={modules.projectReport.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "siteReport" })}>
<Menu.ResourceItem name={modules.siteReport.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "nurseryReport" })}>
<Menu.ResourceItem name={modules.nurseryReport.ResourceName} />
</div>
<div className={classNames({ "Sidebar-active": hash === "audit" })}>
<Menu.ResourceItem name={modules.audit.ResourceName} />
</div>
</Menu>
);
};
export default AppMenu;
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
import { Divider, Typography } from "@mui/material";
import { Typography } from "@mui/material";
import { LabeledClasses } from "react-admin";
import { Else, If, Then, When } from "react-if";
import { Else, If, Then } from "react-if";

import { formatEntryValue } from "@/admin/apiProvider/utils/entryFormat";
import Text from "@/components/elements/Text/Text";
import List from "@/components/extensive/List/List";
import { FormSummaryRowProps, useGetFormEntries } from "@/components/extensive/WizardForm/FormSummaryRow";

const InformationTabRow = ({ index, ...props }: FormSummaryRowProps) => {
const entries = useGetFormEntries(props);

return (
<>
<When condition={index}>
<Divider sx={{ marginRight: -16, marginLeft: -16 }} />
</When>
<Typography variant="h6" component="h3" marginTop={index !== 0 ? 2 : 0} className="capitalize">
<Text variant="text-16-semibold" className="text-darkCustom">
{props.step.title}
</Typography>
</Text>
<List
className="mt-4 flex flex-col gap-4"
items={entries}
render={entry => (
<div>
<Typography className={LabeledClasses.label}>
<span className="capitalize">{entry.title}</span>
<Text variant="text-14-light" className="capitalize text-grey-700">
{entry.title}
</Text>
</Typography>
<If condition={typeof entry.value === "string" || typeof entry.value === "number"}>
<Then>
<Typography variant="body2" dangerouslySetInnerHTML={{ __html: formatEntryValue(entry.value) }} />
<Text
variant="text-14-semibold"
className="text-darkCustom"
dangerouslySetInnerHTML={{ __html: formatEntryValue(entry.value) }}
/>
</Then>
<Else>{formatEntryValue(entry.value)}</Else>
</If>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Box, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
import { Box, Card, Stack, SxProps, Theme } from "@mui/material";
import { FC } from "react";
import { Labeled, NumberField, useShowContext } from "react-admin";
import { When } from "react-if";

import Text from "@/components/elements/Text/Text";
const HighLevelMetics: FC = () => {
const { record } = useShowContext();

Expand All @@ -14,15 +15,12 @@ const HighLevelMetics: FC = () => {
const isPPC = record.framework_key === "ppc";

return (
<Card>
<Box paddingX={3.75} paddingY={2}>
<Typography variant="h5">High Level Metrics</Typography>
</Box>

<Divider />

<Card className="!shadow-none">
<Box paddingX={3.75} paddingY={2}>
<Stack gap={3}>
<Text variant="text-16-semibold" className="text-darkCustom">
High Level Metrics
</Text>
<When condition={isPPC}>
<Labeled label="Workdays Created (Old Calculation)" sx={inlineLabelSx}>
<NumberField source="self_reported_workday_count" emptyText="0" />
Expand All @@ -31,10 +29,10 @@ const HighLevelMetics: FC = () => {
<NumberField source="workday_count" emptyText="0" />
</Labeled>
</When>
<Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx}>
<Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx} className="label-field-aside">
<NumberField source="trees_planted_count" emptyText="0" />
</Labeled>
<Labeled label="Hectares Under Restoration" sx={inlineLabelSx}>
<Labeled label="Hectares Under Restoration" sx={inlineLabelSx} className="label-field-aside">
<NumberField source="hectares_to_restore_goal" emptyText="0" />
</Labeled>
</Stack>
Expand Down
Loading

0 comments on commit f86efde

Please sign in to comment.