Skip to content

Commit

Permalink
Merge branch 'release/utltimate-ulmus' of https://github.com/wri/wri-…
Browse files Browse the repository at this point in the history
…terramatch-website into TM-1561-site-attribute-table-site-view-admin-provide-consistent-padding-offset-between-header-labels-and-their-sorting-icons
  • Loading branch information
dottyy committed Dec 18, 2024
2 parents d8c5ed3 + 8f5ac93 commit cbb119c
Show file tree
Hide file tree
Showing 17 changed files with 210 additions and 80 deletions.
31 changes: 31 additions & 0 deletions src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { NURSERY_REPORT, PROJECT_REPORT, SITE_REPORT } from "@/constants/entitie
import useAuditLogActions from "@/hooks/AuditStatus/useAuditLogActions";

import AuditLogSiteTabSelection from "./components/AuditLogSiteTabSelection";
import AuditLogTable from "./components/AuditLogTable";
import SiteAuditLogEntityStatus from "./components/SiteAuditLogEntityStatus";
import SiteAuditLogEntityStatusSide from "./components/SiteAuditLogEntityStatusSide";
import SiteAuditLogProjectStatus from "./components/SiteAuditLogProjectStatus";
Expand Down Expand Up @@ -58,6 +59,10 @@ const AuditLogTab: FC<IProps> = ({ label, entity, ...rest }) => {
loadEntityList();
}, [buttonToggle]);

const isSite = buttonToggle === AuditLogButtonStates.SITE;
const redirectTo = `${basename}/${modules.site.ResourceName}/${selected?.uuid}/show/6`;
const title = () => selected?.title ?? selected?.name;

const verifyEntity = ["reports", "nursery"].some(word => ReverseButtonStates2[entity!].includes(word));

const verifyEntityReport = () => {
Expand Down Expand Up @@ -133,6 +138,32 @@ const AuditLogTab: FC<IProps> = ({ label, entity, ...rest }) => {
/>
</Grid>
</Grid>
<div className="px-2 py-2">
<When condition={buttonToggle === AuditLogButtonStates.PROJECT && !record?.project}>
<Text variant="text-16-bold" className="mb-6">
History and Discussion for {record && record?.name}
</Text>
{auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refetch} />}
</When>
<When condition={buttonToggle !== AuditLogButtonStates.PROJECT || verifyEntity}>
<>
<div className="mb-6">
{!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
{(isSite || verifyEntity) && (
<Text variant="text-16-bold">
History and Discussion for{" "}
<Link className="text-16-bold !text-[#000000DD]" to={redirectTo}>
{title()}
</Link>
</Text>
)}
</div>
<When condition={!!auditLogData}>
<AuditLogTable auditLogData={auditLogData!} auditData={auditData} refresh={refetch} />
</When>
</>
</When>
</div>
</TabbedShowLayout.Tab>
</When>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,24 +63,26 @@ const SiteAuditLogEntityStatus: FC<SiteAuditLogEntityStatusProps> = ({
</Text>
<CommentarySection record={record} entity={entityType} refresh={refresh} viewCommentsList={false} />
</div>
<div>
{!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
{(isSite || verifyEntity) && (
<Text variant="text-16-bold">
History and Discussion for{" "}
{viewPD ? (
<Link className="text-16-bold !text-[#000000DD]" href={redirectTo}>
{title()}
</Link>
) : (
<RaLink className="text-16-bold !text-[#000000DD]" to={redirectTo}>
{title()}
</RaLink>
)}
</Text>
)}
</div>
<When condition={!!auditLogData}>
<When condition={viewPD}>
<div>
{!isSite && !verifyEntity && <Text variant="text-16-bold">History and Discussion for {title()}</Text>}
{(isSite || verifyEntity) && (
<Text variant="text-16-bold">
History and Discussion for{" "}
{viewPD ? (
<Link className="text-16-bold !text-[#000000DD]" href={redirectTo}>
{title()}
</Link>
) : (
<RaLink className="text-16-bold !text-[#000000DD]" to={redirectTo}>
{title()}
</RaLink>
)}
</Text>
)}
</div>
</When>
<When condition={!!auditLogData && viewPD}>
<AuditLogTable auditLogData={auditLogData!} auditData={auditData} refresh={refresh} />
</When>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { FC } from "react";
import { When } from "react-if";

import Text from "@/components/elements/Text/Text";
import { AuditStatusResponse, ProjectLiteRead } from "@/generated/apiSchemas";
Expand All @@ -10,13 +11,15 @@ export interface SiteAuditLogProjectStatusProps {
auditLogData?: { data: AuditStatusResponse[] };
auditData?: { entity: string; entity_uuid: string };
refresh?: () => void;
viewPD?: boolean;
}

const SiteAuditLogProjectStatus: FC<SiteAuditLogProjectStatusProps> = ({
record,
auditLogData,
auditData,
refresh
refresh,
viewPD = false
}) => (
<div className="flex flex-col gap-6">
<div>
Expand All @@ -27,8 +30,10 @@ const SiteAuditLogProjectStatus: FC<SiteAuditLogProjectStatusProps> = ({
Update the project status, view updates, or add comments
</Text>
</div>
<Text variant="text-16-bold">History and Discussion for {record && record?.name}</Text>
{auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refresh} />}
<When condition={viewPD}>
<Text variant="text-16-bold">History and Discussion for {record && record?.name}</Text>
{auditLogData && <AuditLogTable auditLogData={auditLogData} auditData={auditData} refresh={refresh} />}
</When>
</div>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -650,7 +650,7 @@ const DataCard = ({
hidden: selected.includes("6")
})}
optionsClassName="!w-max right-0"
className="w-max"
className="!h-8 w-max"
options={polygonOptions}
defaultValue={["0"]}
onChange={option => setSelectedPolygonUuid(option[0])}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,8 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
};

return (
<div className="relative flex h-80 w-full items-center justify-center">
<div className="relative flex h-[380px] w-full flex-col items-center justify-center p-4 pt-0">
<h2 className="text-14 w-full pl-10 uppercase text-darkCustom">Hectares Under Restoration By WWF EcoRegion</h2>
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Tooltip content={<CustomTooltip />} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,12 @@ const MonitoredCharts = ({
case "5":
return (
<ChartContainer isLoading={isLoadingIndicator} hasNoData={!landUseData?.graphicTargetLandUseTypes?.length}>
<div className="w-full pt-[38px]">
<GraphicIconDashboard data={landUseData.graphicTargetLandUseTypes} maxValue={totalHectaresRestoredGoal} />
<div className="w-full">
<GraphicIconDashboard
title="Hectares Under Restoration By Target Land Use System"
data={landUseData.graphicTargetLandUseTypes}
maxValue={totalHectaresRestoredGoal}
/>
</div>
</ChartContainer>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ const TreeLossBarChart = ({ data, className = "" }: TreeLossBarChartProps) => {
};

return (
<div className={`h-[500px] w-full p-4 ${className} pt-2.5`}>
<h2 className="text-12 mb-1 pl-10">Tree Loss Retrospective (ha)</h2>
<div className={`h-[500px] w-full p-4 ${className} pt-0`}>
<h2 className="text-14 mb-3 pl-10 uppercase text-darkCustom">Tree Loss Retrospective (ha)</h2>
<h3 className="text-14-semibold mb-4 pl-10">2015-2024</h3>
<ResponsiveContainer width="100%" height="100%">
<BarChart
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { useT } from "@transifex/react";

import Button from "@/components/elements/Button/Button";
import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal";
import { ModalId } from "@/components/extensive/Modal/ModalConst";
import { useModalContext } from "@/context/modal.provider";

const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => {
const t = useT();
const { closeModal } = useModalContext();

return (
<TreeSpeciesModal
title={t("Your input is a not a scientific name")}
content={t("You can add this species, but it will be pending review from Admin.")}
buttons={
<>
<Button variant="secondary" onClick={() => closeModal(ModalId.ERROR_MODAL)}>
{t("CANCEL")}
</Button>
<Button
variant="primary"
onClick={() => {
closeModal(ModalId.ERROR_MODAL);
onConfirm();
}}
>
{t("CONFIRM")}
</Button>
</>
}
/>
);
};

export default NonScientificConfirmationModal;
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useT } from "@transifex/react";

import Button from "@/components/elements/Button/Button";
import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal";
import { ModalId } from "@/components/extensive/Modal/ModalConst";
import { useModalContext } from "@/context/modal.provider";

const SpeciesAlreadyExistsModal = ({ speciesName }: { speciesName: string }) => {
const { closeModal } = useModalContext();
const t = useT();

return (
<TreeSpeciesModal
title={t("Species {name} already included", { name: speciesName })}
content={t("Please find species below to enter reported value.")}
buttons={
<>
<Button variant="secondary" onClick={() => closeModal(ModalId.ERROR_MODAL)}>
{t("CONTINUE")}
</Button>
</>
}
/>
);
};

export default SpeciesAlreadyExistsModal;
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { FieldError, FieldErrors } from "react-hook-form";
import { Else, If, Then, When } from "react-if";
import { v4 as uuidv4 } from "uuid";

import NonScientificConfirmationModal from "@/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal";
import SpeciesAlreadyExistsModal from "@/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal";
import { useAutocompleteSearch } from "@/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch";
import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
import List from "@/components/extensive/List/List";
Expand Down Expand Up @@ -43,45 +45,6 @@ export interface TreeSpeciesInputProps extends Omit<InputWrapperProps, "error">

export type TreeSpeciesValue = { uuid?: string; name?: string; taxon_id?: string; amount?: number };

const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => {
const t = useT();
const { closeModal } = useModalContext();

return (
<div className="margin-4 z-50 m-auto flex max-h-full flex-col items-center justify-start overflow-y-auto rounded-lg border-2 border-neutral-100 bg-white">
<div className="flex w-full items-center justify-center gap-1 border-b-2 border-neutral-100 py-1">
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 mb-1 h-4 w-4 text-tertiary-600" />
<Text variant="text-16-semibold" className="mb-1 text-blueCustom-700">
{t("Your input is a not a scientific name")}
</Text>
</div>
<div className="w-full p-4">
<div className="w-full rounded-lg border border-dashed bg-neutral-250 p-2">
<div className="flex items-center gap-1">
<Text variant="text-14-light" className="text-blueCustom-700">
{t("You can add this species, but it will be pending review from Admin.")}
</Text>
</div>
</div>
<div className="mt-4 flex w-full justify-end gap-3">
<Button variant="secondary" onClick={() => closeModal(ModalId.ERROR_MODAL)}>
{t("CANCEL")}
</Button>
<Button
variant="primary"
onClick={() => {
closeModal(ModalId.ERROR_MODAL);
onConfirm();
}}
>
{t("CONFIRM")}
</Button>
</div>
</div>
</div>
);
};

const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
const id = useId();
const t = useT();
Expand Down Expand Up @@ -183,8 +146,11 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
lastInputRef.current?.focus();
};

if (!isEmpty(searchResult) && taxonId == null) {
// In this case the use had valid values to choose from, but decided to add a value that isn't
if (value.find(({ name }) => name === valueAutoComplete) != null) {
openModal(ModalId.ERROR_MODAL, <SpeciesAlreadyExistsModal speciesName={valueAutoComplete} />);
setValueAutoComplete("");
} else if (!isEmpty(searchResult) && taxonId == null) {
// In this case the user had valid values to choose from, but decided to add a value that isn't
// on the list, so they haven't been shown the warning yet.
openModal(ModalId.ERROR_MODAL, <NonScientificConfirmationModal onConfirm={doAdd} />);
} else {
Expand Down Expand Up @@ -234,7 +200,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
<div>
{handleBaseEntityTrees && (
<div className="text-12 flex w-[66%] gap-1 rounded border border-tertiary-80 bg-tertiary-50 p-2">
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 h-4 w-4 text-tertiary-600" />
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="h-4 min-h-4 w-4 min-w-4 text-tertiary-600" />
{t(
"If you would like to add a species not included on the original Restoration Project, it will be flagged to the admin as new information pending review."
)}
Expand Down Expand Up @@ -264,7 +230,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
/>
<When condition={valueAutoComplete.length > 0}>
<button onClick={() => setValueAutoComplete("")} className="absolute right-4 top-4 ">
<Icon name={IconNames.CLEAR} className="min-h-3 min-w-3 h-3 w-3" />
<Icon name={IconNames.CLEAR} className="h-3 min-h-3 w-3 min-w-3" />
</button>
</When>
</div>
Expand Down Expand Up @@ -303,7 +269,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
{t("No matches available")}
</Text>
<div className="flex items-center gap-1">
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="min-h-4 min-w-4 h-4 w-4 text-tertiary-600" />
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="h-4 min-h-4 w-4 min-w-4 text-tertiary-600" />
<Text variant="text-14-light" className="text-blueCustom-700">
{t("You can add this species, but it will be pending review from Admin.")}
</Text>
Expand Down Expand Up @@ -376,7 +342,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
</When>
<When condition={editIndex === value.uuid}>
<div className="absolute right-0 top-0 z-10 flex h-full w-full items-center gap-1 bg-neutral-250 px-4 shadow-monitored">
<Icon name={IconNames.EDIT_TA} className="min-h-6 min-w-6 h-6 w-6 text-primary" />
<Icon name={IconNames.EDIT_TA} className="h-6 min-h-6 w-6 min-w-6 text-primary" />
<Text variant="text-16" className="text-blueCustom-700">
{t("Editing: {name}", { name: value.name })}
</Text>
Expand All @@ -395,12 +361,12 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
<div className="flex items-center gap-1">
<When condition={props.useTaxonomicBackbone && value.taxon_id == null}>
<div title={t("Non-Scientific Name")}>
<Icon name={IconNames.NON_SCIENTIFIC_NAME} className="min-h-8 min-w-8 h-8 w-8" />
<Icon name={IconNames.NON_SCIENTIFIC_NAME} className="h-8 min-h-8 w-8 min-w-8" />
</div>
</When>
<When condition={establishmentTrees != null && !establishmentTrees.includes(value.name ?? "")}>
<div title={t("New Species (not used in establishment)")}>
<Icon name={IconNames.NEW_TAG_TREE_SPECIES} className="min-h-8 min-w-8 h-8 w-8" />
<Icon name={IconNames.NEW_TAG_TREE_SPECIES} className="h-8 min-h-8 w-8 min-w-8" />
</div>
</When>
<Text variant="text-14-light" className="text-black ">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ReactNode } from "react";

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

type TreeSpeciesModalProps = {
title: string;
content: string;
buttons: ReactNode;
};

const TreeSpeciesModal = ({ title, content, buttons }: TreeSpeciesModalProps) => (
<div className="margin-4 z-50 m-auto flex max-h-full flex-col items-center justify-start overflow-y-auto rounded-lg border-2 border-neutral-100 bg-white">
<div className="flex w-full items-center justify-center gap-1 border-b-2 border-neutral-100 py-1">
<Icon name={IconNames.EXCLAMATION_CIRCLE_FILL} className="mb-1 h-4 min-h-4 w-4 min-w-4 text-tertiary-600" />
<Text variant="text-16-semibold" className="mb-1 text-blueCustom-700">
{title}
</Text>
</div>
<div className="w-full p-4">
<div className="w-full rounded-lg border border-dashed bg-neutral-250 p-2">
<div className="flex items-center gap-1">
<Text variant="text-14-light" className="text-blueCustom-700">
{content}
</Text>
</div>
</div>
<div className="mt-4 flex w-full justify-end gap-3">{buttons}</div>
</div>
</div>
);

export default TreeSpeciesModal;
Loading

0 comments on commit cbb119c

Please sign in to comment.