Skip to content

Commit

Permalink
Merge pull request #1157 from Open-Earth-Foundation/fix/on-3456-MI-ch…
Browse files Browse the repository at this point in the history 
…akra-bugs

fix/on-3456-MI-chakra-bugs
  • Loading branch information
@isaaccodekill
isaaccodekill authored Feb 27, 2025
2 parents 9883abf + 6748c2c commit 7bfd459
Show file tree
Hide file tree
Showing 8 changed files with 329 additions and 337 deletions.
4 changes: 3 additions & 1 deletion app/src/components/Modals/activity-modal/activity-form-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ const AddActivityModal: FC<AddActivityModalProps> = ({
methodology: methodology,
});

// watch all the stored values

const {
emissionsFactorTypes,
emissionsFactorsLoading: areEmissionFactorsLoading,
Expand Down Expand Up @@ -236,7 +238,7 @@ const AddActivityModal: FC<AddActivityModalProps> = ({
setHasActivityData(!hasActivityData);
showSuccessToast();
reset();
onClose();
onCloseDialog();
resetSelectedActivityValue();
} else {
const error = response.error as FetchBaseQueryError;
Expand Down
63 changes: 45 additions & 18 deletions app/src/components/Modals/activity-modal/activity-modal-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
HStack,
Icon,
Input,
SelectValueText,
Spinner,
Text,
Textarea,
Expand Down Expand Up @@ -333,23 +332,43 @@ const ActivityModalBody = ({
w="full"
>
{f.units && (
<NativeSelectRoot
variant="subtle"
{...register(`activity.${f.id}-unit` as any, {
<Controller
control={control}
name={`activity.${f.id}-unit` as any}
defaultValue=""
rules={{
required:
f.required === false
? false
: t("option-required"),
})}
>
<NativeSelectField placeholder={t("select-unit")}>
{f.units?.map((item: string) => (
<option key={item} value={item}>
{t(item)}
</option>
))}
</NativeSelectField>
</NativeSelectRoot>
}}
render={({ field }) => {
return (
<NativeSelectRoot
variant="subtle"
{...field}
onChange={(e: any) => {
field.onChange(e.currentTarget.value);
setValue(
`activity.${f.id}-unit` as any,
e.target.value,
);
}}
>
<NativeSelectField
value={field.value}
placeholder={t("select-unit")}
>
{f.units?.map((item: string) => (
<option key={item} value={item}>
{t(item)}
</option>
))}
</NativeSelectField>
</NativeSelectRoot>
);
}}
/>
)}
</FormattedNumberInput>
{(errors?.activity?.[f.id] as any) ? (
Expand Down Expand Up @@ -439,11 +458,18 @@ const ActivityModalBody = ({
<NativeSelectRoot
variant="subtle"
{...field}
onChange={(e: any) =>
field.onChange(e.target.value)
}
onChange={(e: any) => {
field.onChange(e.target.value);
setValue(
`activity.${title}-unit` as any,
e.target.value,
);
}}
>
<NativeSelectField placeholder={t("select-unit")}>
<NativeSelectField
placeholder={t("select-unit")}
value={field.value}
>
{units?.map((item: string) => (
<option key={item} value={item}>
{t(item)}
Expand Down Expand Up @@ -518,6 +544,7 @@ const ActivityModalBody = ({
bgColor="base.light"
>
<NativeSelectField
value={field.value}
placeholder={t("emissions-factor-type-placeholder")}
>
{emissionsFactorTypes.map(({ id, name }) => (
Expand Down
141 changes: 67 additions & 74 deletions app/src/components/Tabs/Activity/activity-accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,12 @@
import { ActivityValue } from "@/models/ActivityValue";
import { convertKgToTonnes } from "@/util/helpers";
import {
Accordion,
Box,
Icon,
IconButton,
Table,
TagLabel,
Text,
} from "@chakra-ui/react";
import { Box, Icon, IconButton, Table, TagLabel, Text } from "@chakra-ui/react";
import { TFunction } from "i18next";
import React, { FC, useMemo } from "react";
import { MdAdd, MdModeEditOutline, MdMoreVert } from "react-icons/md";
import { FiTrash2 } from "react-icons/fi";
import { ExtraField, findMethodology, Methodology } from "@/util/form-schema";
import { Tag } from "@/components/ui/tag";
import {
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverRoot,
PopoverTrigger,
} from "@/components/ui/popover";
import {
AccordionItem,
AccordionItemContent,
Expand All @@ -30,6 +15,12 @@ import {
} from "@/components/ui/accordion";
import { useParams } from "next/navigation";
import { REGIONALLOCALES } from "@/util/constants";
import {
MenuContent,
MenuItem,
MenuRoot,
MenuTrigger,
} from "@/components/ui/menu";

interface IActivityGroup {
activityData: ActivityValue[];
Expand Down Expand Up @@ -303,78 +294,80 @@ const ActivityAccordion: FC<ActivityAccordionProps> = ({
</Table.Cell>
<Table.Cell>{convertKgToTonnes(activity?.co2eq)}</Table.Cell>
<Table.Cell>
<PopoverRoot>
<PopoverTrigger asChild>
<MenuRoot>
<MenuTrigger asChild>
<IconButton
aria-label="more-icon"
variant="ghost"
color="content.tertiary"
>
<Icon as={MdMoreVert} size="lg" />
</IconButton>
</PopoverTrigger>
<PopoverContent
</MenuTrigger>
<MenuContent
w="auto"
borderRadius="8px"
shadow="2dp"
px="0"
>
<PopoverBody p="0px">
<Box
p="16px"
display="flex"
alignItems="center"
gap="16px"
_hover={{
bg: "content.link",
cursor: "pointer",
}}
className="group"
onClick={() => onEditActivity(activity)}
<MenuItem
value={t("update-activity")}
valueText={t("update-activity")}
p="16px"
display="flex"
alignItems="center"
gap="16px"
_hover={{
bg: "content.link",
cursor: "pointer",
}}
className="group"
onClick={() => onEditActivity(activity)}
>
<Icon
className="group-hover:text-white"
color="interactive.control"
as={MdModeEditOutline}
h="24px"
w="24px"
/>
<Text
className="group-hover:text-white"
color="content.primary"
>
<Icon
className="group-hover:text-white"
color="interactive.control"
as={MdModeEditOutline}
h="24px"
w="24px"
/>
<Text
className="group-hover:text-white"
color="content.primary"
>
{t("update-activity")}
</Text>
</Box>
<Box
p="16px"
display="flex"
alignItems="center"
gap="16px"
_hover={{
bg: "content.link",
cursor: "pointer",
}}
className="group"
onClick={() => onDeleteActivity(activity)}
{t("update-activity")}
</Text>
</MenuItem>
<MenuItem
value={t("delete-activity")}
valueText={t("delete-activity")}
p="16px"
display="flex"
alignItems="center"
gap="16px"
_hover={{
bg: "content.link",
cursor: "pointer",
}}
className="group"
onClick={() => onDeleteActivity(activity)}
>
<Icon
className="group-hover:text-white"
color="sentiment.negativeDefault"
as={FiTrash2}
h="24px"
w="24px"
/>
<Text
className="group-hover:text-white"
color="content.primary"
>
<Icon
className="group-hover:text-white"
color="sentiment.negativeDefault"
as={FiTrash2}
h="24px"
w="24px"
/>
<Text
className="group-hover:text-white"
color="content.primary"
>
{t("delete-activity")}
</Text>
</Box>
</PopoverBody>
</PopoverContent>
</PopoverRoot>
{t("delete-activity")}
</Text>
</MenuItem>
</MenuContent>
</MenuRoot>
</Table.Cell>
</Table.Row>
);
Expand Down
Loading

0 comments on commit 7bfd459

Please sign in to comment.