diff --git a/frontend/src/components/Forms/StatementForm.tsx b/frontend/src/components/Forms/StatementForm.tsx index 9b054e75..b8b1a5ef 100644 --- a/frontend/src/components/Forms/StatementForm.tsx +++ b/frontend/src/components/Forms/StatementForm.tsx @@ -198,7 +198,7 @@ const StatementForm = (props: any) => { await api.composerViaDestroy(element.children.props.formData.id); refreshStatement(); }} - onElementAdd={async (element: any) => { + onElementAdd={async () => { await api.composerViaCreate({ id: -1, order: statement?.vias?.length, @@ -354,7 +354,7 @@ const StatementForm = (props: any) => { }, refreshStatement: () => refreshStatement(), errors: "", - mapValueToOption: (anatomicalEntities: any[], formId: any) => { + mapValueToOption: (anatomicalEntities: any[]) => { const entities: Option[] = []; const selected = findMatchingEntities( statement, @@ -386,7 +386,7 @@ const StatementForm = (props: any) => { ); refreshStatement(); }} - onElementAdd={async (element: any) => { + onElementAdd={async () => { await api.composerDestinationCreate({ id: -1, connectivity_statement: statement.id, @@ -536,7 +536,7 @@ const StatementForm = (props: any) => { }, refreshStatement: () => refreshStatement(), errors: "", - mapValueToOption: (anatomicalEntities: any[], formId: any) => { + mapValueToOption: (anatomicalEntities: any[]) => { const entities: Option[] = []; const selected = findMatchingEntities( statement, @@ -573,6 +573,7 @@ const StatementForm = (props: any) => { copiedUISchema.forward_connection = { "ui:widget": CustomEntitiesDropdown, "ui:options": { + chipsNumber: 10, isDisabled, placeholder: "Forward connection(s)", searchPlaceholder: "Search for Connectivity Statements", diff --git a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx index 9f5e0f78..e198ef21 100644 --- a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx +++ b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx @@ -2,7 +2,6 @@ import {Box, Chip, Tooltip} from "@mui/material"; import {Option} from "../../types"; import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined"; import React from "react"; - const CustomChipBoxComponent = ({ selectedOptions, CustomInputChip, @@ -21,41 +20,47 @@ const CustomChipBoxComponent = ({ width: 'fit-content', maxWidth: 'fit-content', } + + const renderChipOrCustomInput = (item: Option) => ( + + {CustomInputChip ? ( + + ) : ( + { + e.stopPropagation(); + }} + deleteIcon={} + onDelete={!isDisabled ? (e) => { + e.stopPropagation(); + handleChipRemove(item); + } : undefined} + label={item?.label} + /> + )} + + ); + + return ( - {selectedOptions?.length ? ( + {!isDisabled && selectedOptions?.length ? ( selectedOptions .slice(0, chipsNumber) - .map((item: Option, index: number) => ( - - {CustomInputChip ? ( - - ) : ( - { - e.stopPropagation(); - }} - deleteIcon={} - onDelete={!isDisabled ? (e) => { - e.stopPropagation(); - handleChipRemove(item); - } : undefined} - label={item?.label} - /> - )} - - )) - ) : null} + .map((item: Option) => renderChipOrCustomInput(item)) + ) : ( + selectedOptions?.map((item: Option) => renderChipOrCustomInput(item)) + )} {!isDisabled && selectedOptions.length > chipsNumber && ( +{selectedOptions.length - chipsNumber} diff --git a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx index 429f3d14..04f4f0f1 100644 --- a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx +++ b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx @@ -98,7 +98,6 @@ const styles = { height: "1.5rem", borderRadius: "0.375rem", fontSize: "0.875rem", - maxWidth: "8rem", fontWeight: 500, "&.MuiChip-filled": { @@ -484,7 +483,6 @@ export default function CustomEntitiesDropdown({ gap={1} sx={{ borderBottom: `0.0625rem solid ${popperBorderColor}`, - height: autocompleteOptions.length > 0 ? "2.75rem" : "auto", padding: autocompleteOptions.length > 0 ? "0 0.875rem" : "0.875rem", }}