Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
LimberHope committed Dec 19, 2024
2 parents f46edf7 + afd0526 commit 888e1ae
Show file tree
Hide file tree
Showing 18 changed files with 1,407 additions and 291 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,8 @@ const VersionHistory = ({
placeholder="Select Polygon Version"
options={polygonVersionData ?? []}
optionVariant="text-12-light"
titleClassname="one-line-text !w-[96%] !text-nowrap"
titleClassname="one-line-text !w-full !text-nowrap"
titleContainerClassName="!w-[calc(100%-25px)] !text-nowrap"
defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]}
onChange={e => {
const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]);
Expand Down
37 changes: 20 additions & 17 deletions src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import LinearProgressBarMonitored from "@/components/elements/ProgressBar/Linear
import Table from "@/components/elements/Table/Table";
import { VARIANT_TABLE_SITE_POLYGON_REVIEW } from "@/components/elements/Table/TableVariants";
import Text from "@/components/elements/Text/Text";
import ToolTip from "@/components/elements/Tooltip/Tooltip";
import Icon from "@/components/extensive/Icon/Icon";
import { IconNames } from "@/components/extensive/Icon/Icon";
import ModalAdd from "@/components/extensive/Modal/ModalAdd";
Expand Down Expand Up @@ -629,9 +628,6 @@ const PolygonReviewTab: FC<IProps> = props => {
<div className="w-40 lg:w-48">
<Text variant="text-14" className="flex items-center gap-1 text-darkCustom">
Site Status
<ToolTip title={""} content={"Site Status"} width="" trigger="click">
<Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
</ToolTip>
</Text>
<Text variant="text-14-bold" className="leading-[normal] text-black">
{record?.readable_status}
Expand All @@ -640,9 +636,6 @@ const PolygonReviewTab: FC<IProps> = props => {
<div className="w-full">
<Text variant="text-14" className="mb-2 flex items-center gap-1 text-darkCustom">
Polygon Overview
<ToolTip title={""} content={"Polygon Overview"} width="" trigger="click">
<Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
</ToolTip>
</Text>
<If condition={sitePolygonData.length < total}>
<Then>
Expand All @@ -660,9 +653,6 @@ const PolygonReviewTab: FC<IProps> = props => {
<div className="mb-2">
<Text variant="text-16-bold" className="mb-2 flex items-center gap-1 text-darkCustom">
Add or Edit Polygons
<ToolTip title={""} content={"Add or Edit Polygons"} width="" trigger="click">
<Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
</ToolTip>
</Text>
<Text variant="text-14-light" className="text-darkCustom">
Add, remove or edit polygons that are associated to a site. Polygons may be edited in the map
Expand Down Expand Up @@ -742,7 +732,7 @@ const PolygonReviewTab: FC<IProps> = props => {
pagination: { pageSize: 10000000 }
}}
columns={[
{ header: "Polygon Name", accessorKey: "polygon-name" },
{ header: "Polygon Name", accessorKey: "polygon-name", meta: { style: { width: "14.63%" } } },
{
header: "Restoration Practice",
accessorKey: "restoration-practice",
Expand All @@ -751,15 +741,28 @@ const PolygonReviewTab: FC<IProps> = props => {
return (
<input
placeholder={placeholder}
className="w-[118px] px-[10px] outline-primary placeholder:text-[currentColor]"
className="text-14 w-full px-[10px] outline-primary placeholder:text-[currentColor]"
/>
);
}
},
meta: { style: { width: "17.63%" } }
},
{ header: "Target Land Use System", accessorKey: "target-land-use-system" },
{ header: "Tree Distribution", accessorKey: "tree-distribution" },
{ header: "Planting Start Date", accessorKey: "planting-start-date" },
{ header: "Source", accessorKey: "source" },
{
header: "Target Land Use System",
accessorKey: "target-land-use-system",
meta: { style: { width: "20.63%" } }
},
{
header: "Tree Distribution",
accessorKey: "tree-distribution",
meta: { style: { width: "15.63%" } }
},
{
header: "Planting Start Date",
accessorKey: "planting-start-date",
meta: { style: { width: "17.63%" } }
},
{ header: "Source", accessorKey: "source", meta: { style: { width: "10.63%" } } },
{
header: "",
accessorKey: "ellipse",
Expand Down
9 changes: 8 additions & 1 deletion src/components/elements/Inputs/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export interface DropdownProps {
onInternalError?: (error: ErrorOption) => void;
showSelectAll?: boolean;
titleClassname?: string;
titleContainerClassName?: string;
}
const otherKey = "other#value#key";
const getAllowedValues = (values: OptionValue[], options: Option[]) =>
Expand Down Expand Up @@ -206,7 +207,13 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
)}
>
<When condition={!!props.prefix}>{props.prefix}</When>
<div className={tw("flex items-center gap-2", variant.titleContainerClassName)}>
<div
className={tw(
"flex items-center gap-2",
variant.titleContainerClassName,
props.titleContainerClassName
)}
>
<Text
variant={props.inputVariant ?? "text-14-light"}
className={tw("w-full", variant.titleClassname, props.titleClassname)}
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
Expand Up @@ -28,7 +28,7 @@ const RHFTreeSpeciesInput = (props: PropsWithChildren<RHFTreeSpeciesInputProps>)
return (
<TreeSpeciesInput
{...props}
title={t("Tree Species")}
title={t("Species")}
buttonCaptionSuffix={t("Species")}
withPreviousCounts={true}
useTaxonomicBackbone={true}
Expand Down
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 All @@ -28,6 +30,7 @@ import InputWrapper, { InputWrapperProps } from "../InputElements/InputWrapper";

export interface TreeSpeciesInputProps extends Omit<InputWrapperProps, "error"> {
title: string;
label?: string;
buttonCaptionSuffix: string;
withNumbers?: boolean;
withPreviousCounts: boolean;
Expand All @@ -43,45 +46,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 +147,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 @@ -225,7 +192,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
return (
<InputWrapper
inputId={id}
label={"ADD TREE SPECIES"}
label={props.label ?? t("ADD TREE SPECIES")}
description={props.description}
containerClassName={props.containerClassName}
required={props.required}
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="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">
{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;
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
data-testid="txt"
htmlFor=":r23:"
>
ADD TREE SPECIES *
Tree Species Grown *
</label>
<p
className="text-body-400 with-inner-html"
Expand Down Expand Up @@ -229,7 +229,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
data-testid="txt"
htmlFor=":r28:"
>
ADD TREE SPECIES *
Tree Species Grown *
</label>
<p
className="text-body-400 with-inner-html"
Expand Down
Loading

0 comments on commit 888e1ae

Please sign in to comment.