-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
452 additions
and
279 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { RegistrationType } from "@/types/types"; | ||
| import { Box, MenuItem, Select } from "@mui/material"; | ||
| import { Control, Controller, RegisterOptions } from "react-hook-form"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import StyledTextField from "./StyledTextField"; | ||
|
|
||
| interface RegistrationInputProps { | ||
| name: string; | ||
| control: Control; | ||
| disabled?: boolean; | ||
| typeRules?: RegisterOptions; | ||
| onFocus?: () => void; | ||
| onBlur?: () => void; | ||
| verified?: boolean; | ||
| } | ||
|
|
||
| const RegistrationInput = ({ | ||
| name, | ||
| control, | ||
| disabled = false, | ||
| typeRules, | ||
| onFocus, | ||
| onBlur, | ||
| verified, | ||
| }: RegistrationInputProps) => { | ||
| const { t } = useTranslation("labelDataValidator"); | ||
|
|
||
| return ( | ||
| <Box className="flex w-full" data-testid={`${name}-container`}> | ||
| {/* Identifier Input Field */} | ||
| <Controller | ||
| name={`${name}.identifier`} | ||
| control={control} | ||
| rules={{ | ||
| pattern: { | ||
| value: /^\d{7}[A-Z]$/, | ||
| message: "errors.invalidRegistrationNumber", | ||
| }, | ||
| }} | ||
| render={({ field, fieldState: { error } }) => ( | ||
| <StyledTextField | ||
| {...field} | ||
| placeholder={t("baseInformation.fields.reg.placeholder")} | ||
| disabled={disabled} | ||
| onFocus={onFocus} | ||
| onBlur={(e) => { | ||
| onBlur?.(); | ||
| field.onChange(e.target.value.trim()); | ||
| }} | ||
| aria-label={t("baseInformation.fields.reg.accessibility")} | ||
| data-testid={`${name}-number-input`} | ||
| error={!!error} | ||
| helperText={error?.message ? t(error.message) : ""} | ||
| /> | ||
| )} | ||
| /> | ||
|
|
||
| {/* Registration Type Selection Field */} | ||
| <Controller | ||
| name={`${name}.type`} | ||
| control={control} | ||
| rules={typeRules} | ||
| render={({ field, fieldState: { error } }) => ( | ||
| <Select | ||
| {...field} | ||
| className={`!w-[20ch] !text-[15px] ${verified ? "bg-inherit" : "bg-gray-100"} px-2`} | ||
| variant="standard" | ||
| autoComplete="off" | ||
| value={field.value || ""} | ||
| onChange={(event) => field.onChange(event.target.value)} | ||
| disabled={disabled} | ||
| fullWidth | ||
| disableUnderline | ||
| > | ||
| <MenuItem value={RegistrationType.FERTILIZER}> | ||
| {t("baseInformation.fields.reg.type.fertilizer")} | ||
| </MenuItem> | ||
| <MenuItem value={RegistrationType.INGREDIENT}> | ||
| {t("baseInformation.fields.reg.type.ingredient")} | ||
| </MenuItem> | ||
| </Select> | ||
| )} | ||
| /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegistrationInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import DeleteIcon from "@mui/icons-material/Delete"; | ||
| import { IconButton, IconButtonProps, Tooltip } from "@mui/material"; | ||
| import React from "react"; | ||
|
|
||
| interface StyledDeleteButtonProps extends IconButtonProps { | ||
| tooltip: string; | ||
| tooltipDelay?: number; | ||
| hideButton?: boolean; | ||
| } | ||
|
|
||
| const StyledDeleteButton = React.forwardRef< | ||
| HTMLButtonElement, | ||
| StyledDeleteButtonProps | ||
| >( | ||
| ( | ||
| { | ||
| tooltip: tooltipTitle, | ||
| tooltipDelay: enterDelay = 1000, | ||
| hideButton, | ||
| ...props | ||
| }, | ||
| ref, | ||
| ) => { | ||
| if (hideButton) return null; | ||
|
|
||
| return ( | ||
| <Tooltip enterDelay={enterDelay} title={tooltipTitle}> | ||
| <IconButton ref={ref} {...props} size="small" className="text-white"> | ||
| <DeleteIcon /> | ||
| </IconButton> | ||
| </Tooltip> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| export default StyledDeleteButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import AddIcon from "@mui/icons-material/Add"; | ||
| import { Box, BoxProps, Button } from "@mui/material"; | ||
| import React from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| interface StyledListContainerProps extends BoxProps { | ||
| path: string; | ||
| verified?: boolean; | ||
| onAppend: () => void; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const StyledListContainer: React.FC<StyledListContainerProps> = ({ | ||
| path, | ||
| verified, | ||
| onAppend, | ||
| children, | ||
| ...boxProps | ||
| }) => { | ||
| const t = useTranslation("labelDataValidator").t; | ||
| return ( | ||
| <Box | ||
| className="flex flex-1 flex-col" | ||
| data-testid={`fields-container-${path}`} | ||
| {...boxProps} | ||
| > | ||
| {children} | ||
|
|
||
| {/* Add Row Button */} | ||
| <Button | ||
| size="small" | ||
| className={`!p-2 text-white bg-green-500 ${verified ? "!hidden" : ""}`} | ||
| onClick={onAppend} | ||
| startIcon={<AddIcon />} | ||
| disabled={verified} | ||
| data-testid={`add-button-${path}`} | ||
| > | ||
| {t("addRow")} | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default StyledListContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { Box, Divider } from "@mui/material"; | ||
| import React from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import StyledDeleteButton from "./StyledDeleteButton"; | ||
|
|
||
| interface VerifiedListRowProps { | ||
| verified?: boolean; | ||
| hideDelete?: boolean; | ||
| onDelete?: () => void; | ||
| isLastItem?: boolean; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const VerifiedListRow: React.FC<VerifiedListRowProps> = ({ | ||
| verified, | ||
| hideDelete, | ||
| onDelete, | ||
| isLastItem, | ||
| children, | ||
| }) => { | ||
| const { t } = useTranslation("labelDataValidator"); | ||
| return ( | ||
| <Box className="ml-2" data-testid={`field-row`}> | ||
| <Box className="flex items-center"> | ||
| {children} | ||
|
|
||
| <StyledDeleteButton | ||
| tooltip={t("deleteVerifiedListRow")} | ||
| hideButton={verified || hideDelete} | ||
| onClick={onDelete} | ||
| data-testid={`delete-row-button`} | ||
| /> | ||
| </Box> | ||
|
|
||
| <Divider | ||
| className={`!my-1 ${verified ? "bg-green-500" : "bg-inherit"} ${isLastItem && verified ? "hidden" : ""}`} | ||
| /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default VerifiedListRow; |
Oops, something went wrong.