diff --git a/frontend/src/Pages/SentenceDetails.tsx b/frontend/src/Pages/SentenceDetails.tsx index 9919e5ff..7a127a38 100644 --- a/frontend/src/Pages/SentenceDetails.tsx +++ b/frontend/src/Pages/SentenceDetails.tsx @@ -225,7 +225,7 @@ const SentencesDetails = () => { ); } - const disabled = sentence.owner?.id !== userProfile.getUser().id; + const isDisabled = sentence.owner?.id !== userProfile.getUser().id; return ( @@ -295,7 +295,7 @@ const SentencesDetails = () => { display="flex" justifyContent="flex-end" > - {!disabled && sentence?.available_transitions?.length !== 0 && ( + {!isDisabled && sentence?.available_transitions?.length !== 0 && ( { { } }, [statementId, refetch]); - //TODO add logic for disabled - // something like this statement.owner?.id !== userProfile.getUser().id; - const disabled = false; + //TODO add logic for isDisabled + // TODO add an extra check for invalid state; + const isDisabled = statement?.state === statementStates.Exported; return ( {loading && ( @@ -245,7 +248,7 @@ const StatementDetails = () => { /> ) : ( )} @@ -277,7 +280,7 @@ const StatementDetails = () => { statement={statement} setStatement={setStatement} refreshStatement={refreshStatement} - disabled={disabled} + isDisabled={isDisabled} refs={refs} /> @@ -286,7 +289,7 @@ const StatementDetails = () => { statement={statement} setStatement={setStatement} refreshStatement={refreshStatement} - disabled={disabled} + isDisabled={isDisabled} refs={refs} /> @@ -310,12 +313,14 @@ const StatementDetails = () => { service: statementService, }} setter={refreshStatement} + isDisabled={isDisabled} /> diff --git a/frontend/src/components/AnatomicalEntitiesField.tsx b/frontend/src/components/AnatomicalEntitiesField.tsx index cf406376..e51c563e 100644 --- a/frontend/src/components/AnatomicalEntitiesField.tsx +++ b/frontend/src/components/AnatomicalEntitiesField.tsx @@ -7,7 +7,7 @@ import theme from "../theme/Theme"; import Typography from "@mui/material/Typography"; function AnatomicalEntitiesField(props: any) { - const {label, errors} = props.options; + const {label, errors, isDisabled} = props.options; const placeholder = "Select " + props.label?.slice(0, -3); const [entity, setEntity] = React.useState(); @@ -43,7 +43,7 @@ function AnatomicalEntitiesField(props: any) { borderColor={ errors?.length !== 0 ? theme.palette.error.main : "#EAECF0" } - disabled={props.disabled} + disabled={isDisabled} onChange={(newValue: AnatomicalEntity) => props.onChange(newValue?.id)} placeholder={ props.label === "Anatomical entity id" ? "Select Via" : placeholder diff --git a/frontend/src/components/AutoComplete.tsx b/frontend/src/components/AutoComplete.tsx index a418e67d..fb827f38 100644 --- a/frontend/src/components/AutoComplete.tsx +++ b/frontend/src/components/AutoComplete.tsx @@ -20,7 +20,7 @@ const StyledAutoComplete = styled(Autocomplete)(({ theme }) => ({ export default function AutoComplete({ onChange, placeholder, - disabled, + isDisabled, value, setValue, fetch, @@ -84,7 +84,7 @@ export default function AutoComplete({ filterOptions={(x) => x} options={options} autoComplete - disabled={disabled} + disabled={isDisabled} includeInputInList filterSelectedOptions defaultValue={null} diff --git a/frontend/src/components/DistillationTab.tsx b/frontend/src/components/DistillationTab.tsx index 00db9c13..64408ad6 100644 --- a/frontend/src/components/DistillationTab.tsx +++ b/frontend/src/components/DistillationTab.tsx @@ -17,6 +17,7 @@ const DistillationTab = ({ setStatement, refreshStatement, refs, + isDisabled }: any) => { const theme = useTheme(); const sectionStyle = useSectionStyle(theme); @@ -52,12 +53,14 @@ const DistillationTab = ({ uiFields={["knowledge_statement"]} className="ks" enableAutoSave={true} + isDisabled={isDisabled} /> @@ -86,7 +90,7 @@ const DistillationTab = ({ diff --git a/frontend/src/components/Forms/ProvenanceForm.tsx b/frontend/src/components/Forms/ProvenanceForm.tsx index 28e36cf4..d211a5e8 100644 --- a/frontend/src/components/Forms/ProvenanceForm.tsx +++ b/frontend/src/components/Forms/ProvenanceForm.tsx @@ -7,7 +7,7 @@ import TextfieldWithChips from "../Widgets/TextfieldWithChips"; const ProvenancesForm = (props: any) => { - const { provenancesData, setter, extraData, disabled } = props + const { provenancesData, setter, extraData, isDisabled } = props const { schema, uiSchema } = jsonSchemas.getProvenanceSchema() const copiedSchema = JSON.parse(JSON.stringify(schema)); @@ -41,9 +41,9 @@ const ProvenancesForm = (props: any) => { copiedUISchema.uri = { "ui:widget": TextfieldWithChips, "ui:options": { - disabled: !extraData.connectivity_statement_id || disabled, + isDisabled: !extraData.connectivity_statement_id || isDisabled, data: provenancesData?.map((row: Provenance) => ({id: row.id, label: row.uri, enableClick: isValidUrl(row.uri) })) || [], - placeholder: disabled ? null : 'Enter Provenances (Press Enter to add a Provenance)', + placeholder: isDisabled ? null : 'Enter Provenances (Press Enter to add a Provenance)', removeChip: function(provenanceId: any) { provenanceService.delete(provenanceId, extraData.connectivity_statement_id) refresh() @@ -61,7 +61,6 @@ const ProvenancesForm = (props: any) => { } return ( - { children={true} extraData={extraData} setter={() => refresh()} + disabled={isDisabled} /> ) } diff --git a/frontend/src/components/Forms/SentenceForm.tsx b/frontend/src/components/Forms/SentenceForm.tsx index b71f2de7..0eb97930 100644 --- a/frontend/src/components/Forms/SentenceForm.tsx +++ b/frontend/src/components/Forms/SentenceForm.tsx @@ -46,7 +46,7 @@ const linkedChip = (data: any) => { } const SentenceForm = (props: any) => { - const { format, data } = props + const { format, data, isDisabled } = props const { schema, uiSchema } = jsonSchemas.getSentenceSchema() const theme = useTheme() const sectionStyle = useSectionStyle(theme) @@ -60,6 +60,7 @@ const SentenceForm = (props: any) => { title: { "ui:widget": CustomTextField, "ui:options": { + isDisabled, label: 'Article Title', placeholder: "Enter Article Title", } @@ -91,6 +92,7 @@ const SentenceForm = (props: any) => { enableAutoSave={false} children={true} submitOnBlurFields={['title']} + disabled={isDisabled} {...props} /> diff --git a/frontend/src/components/Forms/SpeciesForm.tsx b/frontend/src/components/Forms/SpeciesForm.tsx index 3135a0e6..0fc808be 100644 --- a/frontend/src/components/Forms/SpeciesForm.tsx +++ b/frontend/src/components/Forms/SpeciesForm.tsx @@ -8,7 +8,7 @@ import { AutocompleteWithChips } from '../Widgets/AutocompleteWithChips'; const SpeciesForm = (props: any) => { - const { data, extraData, setter } = props + const { data, extraData, setter, isDisabled } = props const { schema, uiSchema } = jsonSchemas.getSpeciesSchema() @@ -40,6 +40,7 @@ const SpeciesForm = (props: any) => { name: { "ui:widget": AutocompleteWithChips, "ui:options": { + isDisabled, data: data?.map((row: Specie)=>({id:row.id, label: row.name})), label: 'Species', placeholder: 'Select Species', @@ -61,6 +62,7 @@ const SpeciesForm = (props: any) => { enableAutoSave={false} clearOnSave={true} children={true} + isDisabled={isDisabled} {...props} /> ) diff --git a/frontend/src/components/Forms/StatementForm.tsx b/frontend/src/components/Forms/StatementForm.tsx index 20a2ff0d..b0bf5165 100644 --- a/frontend/src/components/Forms/StatementForm.tsx +++ b/frontend/src/components/Forms/StatementForm.tsx @@ -46,7 +46,7 @@ import { CustomFooter } from "../Widgets/HoveredOptionContent"; import { StatementStateChip } from "../Widgets/StateChip"; const StatementForm = (props: any) => { - const { uiFields, statement, refreshStatement } = props; + const { uiFields, statement, refreshStatement, isDisabled } = props; const { schema, uiSchema } = jsonSchemas.getConnectivityStatementSchema(); const copiedSchema = JSON.parse(JSON.stringify(schema)); const copiedUISchema = JSON.parse(JSON.stringify(uiSchema)); @@ -59,6 +59,7 @@ const StatementForm = (props: any) => { copiedUISchema.circuit_type = { "ui:widget": "CustomSingleSelect", "ui:options": { + isDisabled, label: "Circuit Type", classNames: "col-xs-12 col-md-6", }, @@ -67,6 +68,7 @@ const StatementForm = (props: any) => { copiedUISchema.laterality = { "ui:widget": "CustomSingleSelect", "ui:options": { + isDisabled, label: "Laterality", classNames: "col-xs-12 col-md-6", }, @@ -75,6 +77,7 @@ const StatementForm = (props: any) => { copiedUISchema.projection = { "ui:widget": "CustomSingleSelect", "ui:options": { + isDisabled, label: "Projection", classNames: "col-xs-12 col-md-6", }, @@ -83,6 +86,7 @@ const StatementForm = (props: any) => { copiedUISchema.apinatomy_model = { "ui:widget": "CustomTextField", "ui:options": { + isDisabled, label: "ApiNATOMY Model Name", placeholder: "Enter ApiNATOMY Model Name", }, @@ -92,6 +96,7 @@ const StatementForm = (props: any) => { copiedUISchema.sex_id = { "ui:widget": "CustomSingleSelect", "ui:options": { + isDisabled, label: "Sex", placeholder: "Enter Sex", data: sexes @@ -104,6 +109,7 @@ const StatementForm = (props: any) => { copiedUISchema.phenotype_id = { "ui:widget": "CustomSingleSelect", "ui:options": { + isDisabled, label: "Phenotype", placeholder: "Select Phenotype", data: phenotypes @@ -116,6 +122,7 @@ const StatementForm = (props: any) => { copiedUISchema.knowledge_statement = { "ui:widget": "CustomTextArea", "ui:options": { + isDisabled, label: "Knowledge Statement", placeholder: "Enter Knowledge Statement", rows: 4, @@ -126,6 +133,7 @@ const StatementForm = (props: any) => { copiedUISchema.origins = { "ui:widget": CustomEntitiesDropdown, "ui:options": { + isDisabled, statement: statement, placeholder: "Origin", searchPlaceholder: "Search for Origins", @@ -206,9 +214,10 @@ const StatementForm = (props: any) => { }); refreshStatement(); }} - hideDeleteBtn={statement?.vias?.length <= 1} + hideDeleteBtn={statement?.vias?.length <= 1 || isDisabled} showReOrderingIcon={true} addButtonPlaceholder={"Via"} + canAdd={!isDisabled} /> ), items: { @@ -241,6 +250,7 @@ const StatementForm = (props: any) => { anatomical_entities: { "ui:widget": CustomEntitiesDropdown, "ui:options": { + isDisabled, statement: statement, label: "Via", fieldName: "vias.anatomical_entities", @@ -281,6 +291,7 @@ const StatementForm = (props: any) => { from_entities: { "ui:widget": CustomEntitiesDropdown, "ui:options": { + isDisabled, statement: statement, label: "From", fieldName: "vias.from_entities", @@ -382,9 +393,10 @@ const StatementForm = (props: any) => { }); refreshStatement(); }} - hideDeleteBtn={statement?.destinations?.length <= 1} + hideDeleteBtn={statement?.destinations?.length <= 1 || isDisabled} showReOrderingIcon={false} addButtonPlaceholder={"Destination"} + canAdd={!isDisabled} /> ), items: { @@ -417,6 +429,7 @@ const StatementForm = (props: any) => { anatomical_entities: { "ui:widget": CustomEntitiesDropdown, "ui:options": { + isDisabled, statement: statement, placeholder: "Look for Destinations", searchPlaceholder: "Search for Destinations", @@ -459,6 +472,7 @@ const StatementForm = (props: any) => { from_entities: { "ui:widget": CustomEntitiesDropdown, "ui:options": { + isDisabled, statement: statement, label: "From", fieldName: "destinations.from_entities", @@ -544,6 +558,7 @@ const StatementForm = (props: any) => { copiedUISchema.additional_information = { "ui:widget": "CustomTextField", "ui:options": { + isDisabled, label: "Additional Information", placeholder: "Enter additional information on the knowledge statement", multiline: true, @@ -555,13 +570,13 @@ const StatementForm = (props: any) => { copiedUISchema.forward_connection = { "ui:widget": CustomEntitiesDropdown, "ui:options": { - isFormDisabled: () => statement?.destinations?.length === 0, + isDisabled, placeholder: "Forward connection(s)", searchPlaceholder: "Search for Connectivity Statements", noResultReason: "We couldn’t find any record with these origin in the database.", - disabledReason: - "Add Destination entity to get access to the forward connection form", + disabledReason: statement?.destinations?.length === 0 ? + "Add Destination entity to get access to the forward connection form" : "", fieldName: "forward_connection", onSearch: async (searchValue: string) => { @@ -656,6 +671,7 @@ const StatementForm = (props: any) => { enableAutoSave={false} widgets={widgets} showErrorList={false} + disabled={isDisabled} submitOnBlurFields={[ "knowledge_statement", "additional_information", diff --git a/frontend/src/components/Forms/TagForm.tsx b/frontend/src/components/Forms/TagForm.tsx index 99329ad0..0e5b1f7c 100644 --- a/frontend/src/components/Forms/TagForm.tsx +++ b/frontend/src/components/Forms/TagForm.tsx @@ -8,7 +8,7 @@ import { AutocompleteWithChips } from '../Widgets/AutocompleteWithChips'; const TagForm = (props: any) => { - const { data, extraData, setter } = props + const { data, extraData, setter, isDisabled } = props const { schema, uiSchema } = jsonSchemas.getSpeciesSchema() @@ -40,6 +40,7 @@ const TagForm = (props: any) => { name: { "ui:widget": AutocompleteWithChips, "ui:options": { + isDisabled, data: data?.map((row: Tag)=>({id:row.id, label: row.tag})), label: 'Tags', placeholder: 'Select Tags', @@ -50,7 +51,6 @@ const TagForm = (props: any) => { }, }; - return ( { enableAutoSave={false} clearOnSave={true} children={true} + isDisabled={isDisabled} {...props} /> ) diff --git a/frontend/src/components/ProofingTab/PathsBuilder.tsx b/frontend/src/components/ProofingTab/PathsBuilder.tsx index 1ec2e08f..149cd4f7 100644 --- a/frontend/src/components/ProofingTab/PathsBuilder.tsx +++ b/frontend/src/components/ProofingTab/PathsBuilder.tsx @@ -7,7 +7,7 @@ import { vars } from "../../theme/variables"; import { OriginIcon } from "../icons"; const PathsBuilder = (props: any) => { - const { statement, refreshStatement, refs } = props; + const { statement, refreshStatement, refs, isDisabled } = props; const theme = useTheme(); const sectionStyle = useSectionStyle(theme); const subSectionStyle = useGreyBgContainer(theme); @@ -57,6 +57,7 @@ const PathsBuilder = (props: any) => { enableAutoSave={false} submitOnChangeFields={["origins"]} className="origins" + isDisabled={isDisabled} /> @@ -74,6 +75,8 @@ const PathsBuilder = (props: any) => { uiFields={["vias"]} enableAutoSave={false} className="vias" + isDisabled={isDisabled} + /> { uiFields={["destinations"]} enableAutoSave={false} className="destinations" + isDisabled={isDisabled} /> @@ -112,6 +116,7 @@ const PathsBuilder = (props: any) => { sx={{ ...sectionStyle, padding: ".75rem .88rem .75rem .50rem" }} > { uiFields={["forward_connection"]} enableAutoSave={true} className="ks" + isDisabled={isDisabled} /> diff --git a/frontend/src/components/ProofingTab/ProofingTab.tsx b/frontend/src/components/ProofingTab/ProofingTab.tsx index 0aff0b93..12c9e77d 100644 --- a/frontend/src/components/ProofingTab/ProofingTab.tsx +++ b/frontend/src/components/ProofingTab/ProofingTab.tsx @@ -9,7 +9,7 @@ import PathsBuilder from "./PathsBuilder"; import StatementPreviewForm from "../Forms/StatementPreviewForm"; const ProofingTab = (props: any) => { - const { statement, refreshStatement, setStatement, refs } = props; + const { statement, refreshStatement, setStatement, refs, isDisabled } = props; const theme = useTheme(); const sectionStyle = useSectionStyle(theme); const greyBgContainer = useGreyBgContainer(theme); @@ -52,13 +52,14 @@ const ProofingTab = (props: any) => { statement={statement} refreshStatement={refreshStatement} setStatement={setStatement} + isDisabled={isDisabled} /> - + diff --git a/frontend/src/components/ProofingTab/SortableItem.tsx b/frontend/src/components/ProofingTab/SortableItem.tsx index 9fd03cfd..d295dd71 100644 --- a/frontend/src/components/ProofingTab/SortableItem.tsx +++ b/frontend/src/components/ProofingTab/SortableItem.tsx @@ -9,7 +9,7 @@ export function SortableItem(props: any) { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id }); - const { children, onDropIndexClick, disabled, hideDeleteBtn } = props; + const { children, onDropIndexClick, isDisabled, hideDeleteBtn } = props; const style = { transform: CSS.Transform.toString(transform), @@ -21,6 +21,7 @@ export function SortableItem(props: any) { backgroundColor: "common.white", border: "1px solid #EAECF0", borderRadius: "12px", + display: 'flex', alignItems: 'center' }); return ( @@ -35,7 +36,7 @@ export function SortableItem(props: any) { > {children} @@ -65,7 +70,7 @@ export function SortableItem(props: any) { diff --git a/frontend/src/components/StatementWithProvenances.tsx b/frontend/src/components/StatementWithProvenances.tsx index 8066b71a..bd2ef5c1 100644 --- a/frontend/src/components/StatementWithProvenances.tsx +++ b/frontend/src/components/StatementWithProvenances.tsx @@ -3,7 +3,7 @@ import {Box} from "@mui/material"; import StatementForm from "./Forms/StatementForm"; import ProvenancesForm from "./Forms/ProvenanceForm"; -const StatementWithProvenances = ({ statement, background = "#fff", refreshStatement, disabled } : any) => { +const StatementWithProvenances = ({ statement, background = "#fff", refreshStatement, isDisabled } : any) => { return ( @@ -25,17 +25,17 @@ const StatementWithProvenances = ({ statement, background = "#fff", refreshState extraData={{ sentence_id: statement.sentence_id }} uiFields={["knowledge_statement"]} className='ks' - disabled={disabled} + isDisabled={isDisabled} enableAutoSave={true} /> - - + + {/**/} ); }; diff --git a/frontend/src/components/TriageStatementSection/StatementDetailsAccordion.tsx b/frontend/src/components/TriageStatementSection/StatementDetailsAccordion.tsx index 837b6e38..cad9b9a2 100644 --- a/frontend/src/components/TriageStatementSection/StatementDetailsAccordion.tsx +++ b/frontend/src/components/TriageStatementSection/StatementDetailsAccordion.tsx @@ -17,6 +17,7 @@ const StatementDetailsAccordion = (props: any) => { statement, setter, sentence, + isDisabled } = props; const [expanded, setExpanded] = React.useState("panel-0"); @@ -50,6 +51,7 @@ const StatementDetailsAccordion = (props: any) => { data={statement.species} extraData={{ parentId: statement.id, service: statementService }} setter={setter} + isDisabled={isDisabled} /> { "phenotype_id", "additional_information" ]} + isDisabled={isDisabled} /> diff --git a/frontend/src/components/Widgets/ArrayFieldTemplate.tsx b/frontend/src/components/Widgets/ArrayFieldTemplate.tsx index 47eb192a..5981262e 100644 --- a/frontend/src/components/Widgets/ArrayFieldTemplate.tsx +++ b/frontend/src/components/Widgets/ArrayFieldTemplate.tsx @@ -119,8 +119,8 @@ function ArrayFieldTemplate(props: any) { id={element.id} children={element.children} onDropIndexClick={() => handleDelete(element)} - disabled={props.disabled} - showReOrderingIcon={props.showReOrderingIcon} + isDisabled={props.isDisabled} + showReOrderingIcon={!props.isDisabled && props.showReOrderingIcon} hideDeleteBtn={props.hideDeleteBtn} /> ))} @@ -132,7 +132,7 @@ function ArrayFieldTemplate(props: any) { color="info" onClick={handleAdd} startIcon={} - disabled={props.disabled} + disabled={props.isDisabled} > Add a {props.addButtonPlaceholder} diff --git a/frontend/src/components/Widgets/AutocompleteWithChips.tsx b/frontend/src/components/Widgets/AutocompleteWithChips.tsx index 9d11d789..60705c40 100644 --- a/frontend/src/components/Widgets/AutocompleteWithChips.tsx +++ b/frontend/src/components/Widgets/AutocompleteWithChips.tsx @@ -7,6 +7,7 @@ import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined"; import { vars } from "../../theme/variables"; import Typography from "@mui/material/Typography"; import CloseIcon from "@mui/icons-material/Close"; +import Box from "@mui/material/Box"; const { buttonOutlinedColor, grey400, buttonOutlinedBorderColor, titleFontColor } = vars; @@ -19,13 +20,41 @@ const StyledInput = styled(TextField)(({ theme }) => ({ }, })); +const CustomChip = ({ id, label, onDelete, isDisabled }: any) => { + return ( + } + variant="outlined" + label={label} + key={id} + onDelete={!isDisabled ? (e) => { + e.stopPropagation(); + onDelete(id) + } : undefined} + sx={{ + border: `1px solid ${buttonOutlinedBorderColor}`, + borderRadius: "6px", + margin: "4px", + "& .MuiChip-label": { + color: buttonOutlinedColor, + fontSize: "14px", + }, + "& .MuiChip-deleteIcon": { + color: grey400, + fontSize: "14px", + }, + }} + /> + ); +}; + export const AutocompleteWithChips = ({ placeholder, options: { data, removeChip, label, - disabled, + isDisabled, options, onAutocompleteChange, }, @@ -42,75 +71,76 @@ const handleDeleteAll = () => { handleDelete(ele.id); }); }; - return ( - - {label} - - onAutocompleteChange(e, value)} - freeSolo - defaultValue={options.length>0 ? [options[0].label]: [{}]} - renderTags={(value:any, getTagProps) => data.map((ele:{id:number, label:string}, index: number) => ( - } - variant="outlined" + + {label} + + {isDisabled ? ( + + {data.length === 0 ? '-' : data.map((ele: { id: number; label: string }, index: number) => ( + handleDelete(ele.id)} - sx={{ - border: `1px solid ${buttonOutlinedBorderColor}`, - borderRadius: "6px", - margin: "4px", - - "& .MuiChip-label": { - color: buttonOutlinedColor, - fontSize: "14px", - }, - "& .MuiChip-deleteIcon": { - color: grey400, - fontSize: "14px", - }, - }} + isDisabled={isDisabled} /> - )) - } - renderInput={(params) => ( - setInputFocus(true)} - onBlur={() => setInputFocus(false)} - InputProps={{ + ))} + + ) : ( + onAutocompleteChange(e, value)} + freeSolo + defaultValue={options.length > 0 ? [options[0].label] : [{}]} + renderTags={(value: any, getTagProps) => + data.map((ele: { id: number; label: string }, index: number) => ( + + )) + } + renderInput={(params) => ( + setInputFocus(true)} + onBlur={() => setInputFocus(false)} + InputProps={{ ...params.InputProps, endAdornment: ( - <> - {isInputFocused ? ( - { - e.preventDefault(); - handleDeleteAll(); - }} - /> - ) : null} - {params.InputProps.endAdornment} - + <> + {isInputFocused ? ( + { + e.preventDefault(); + handleDeleteAll(); + }} + /> + ) : null} + {params.InputProps.endAdornment} + ), - }} - /> - )} - /> + }} + /> + )} + /> + )} ); }; diff --git a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx new file mode 100644 index 00000000..9f5e0f78 --- /dev/null +++ b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx @@ -0,0 +1,68 @@ +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, + styles, + isDisabled, + handleChipRemove, + chipsNumber, +}: any) => { + const extraChipStyle = !isDisabled ? + { flex: 1, + minWidth: 0, + maxWidth: "fit-content", + cursor: "pointer" + }: + {cursor: "initial", + width: 'fit-content', + maxWidth: 'fit-content', + } + return ( + + {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} + {!isDisabled && selectedOptions.length > chipsNumber && ( + + +{selectedOptions.length - chipsNumber} + + )} + + ); +}; + +export default CustomChipBoxComponent \ No newline at end of file diff --git a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx index 5e79aa0d..fb887e0b 100644 --- a/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx +++ b/frontend/src/components/Widgets/CustomEntitiesDropdown.tsx @@ -29,6 +29,7 @@ import {vars} from "../../theme/variables"; import {Option} from "../../types"; import Stack from "@mui/material/Stack"; import {processFromEntitiesData} from "../../helpers/dropdownMappers"; +import CustomChipBoxComponent from "./CustomChipBoxComponent"; const { buttonOutlinedBorderColor, @@ -77,7 +78,7 @@ const styles = { borderRadius: "0 0.5rem 0.5rem 0", }, }, - + rootHover: { "&:hover": { borderColor: dropdownBorderColor, @@ -85,13 +86,13 @@ const styles = { "0rem 0rem 0rem 0.25rem #CEDDED, 0rem 0.0625rem 0.125rem 0rem rgba(16, 24, 40, 0.05)", }, }, - + rootOpen: { borderColor: dropdownBorderColor, boxShadow: "0rem 0rem 0rem 0.25rem #CEDDED, 0rem 0.0625rem 0.125rem 0rem rgba(16, 24, 40, 0.05)", }, - + chip: { padding: "0.125rem 0.25rem 0.125rem 0.3125rem", gap: "0.1875rem", @@ -100,31 +101,31 @@ const styles = { fontSize: "0.875rem", maxWidth: "8rem", fontWeight: 500, - + "&.MuiChip-filled": { borderRadius: "1rem", background: lightBlue, color: darkBlue, mixBlendMode: "multiply", }, - + "&.MuiChip-outlined": { color: buttonOutlinedColor, background: whiteColor, border: `0.0625rem solid ${buttonOutlinedBorderColor}`, }, - + "& .MuiChip-label": { padding: 0, }, - + "& .MuiChip-deleteIcon": { margin: 0, color: grey400, fontSize: "0.75rem", }, }, - + toggleIcon: { ml: "auto", position: "relative", @@ -132,21 +133,21 @@ const styles = { fontSize: "1.25rem", color: captionColor, }, - + placeholder: { color: captionColor, fontSize: "0.875rem", fontWeight: 400, userSelect: "none", }, - + list: { width: "50%", flexShrink: 0, display: "flex", flexDirection: "column", }, - + badge: { display: "block", "& .MuiBadge-badge": { @@ -162,7 +163,7 @@ const styles = { lineHeight: "150%", }, }, - + details: { background: drodownDetailBg, width: "50%", @@ -175,7 +176,7 @@ const styles = { lineHeight: "142.857%", padding: 0, }, - + "& .MuiTypography-body1": { color: dropdownTextColor, fontSize: "0.75rem", @@ -187,56 +188,59 @@ const styles = { }; export default function CustomEntitiesDropdown({ - value, - id, - options: { - isFormDisabled = () => false, - errors, - searchPlaceholder, - noResultReason, - disabledReason, - onSearch, - onUpdate, - mapValueToOption, - CustomHeader = null, - CustomBody = null, - CustomFooter = null, - header = {}, - CustomInputChip = null, - placeholder, - label, - chipsNumber = 2, - postProcessOptions = false, - refreshStatement, - statement, - fieldName = "", - getPreLevelSelectedValues, - areConnectionsExplicit, - minWidth = '' - }, - }: any) { + value, + id, + placeholder: plcholder, + options: { + errors, + searchPlaceholder, + noResultReason, + disabledReason, + onSearch, + onUpdate, + mapValueToOption, + CustomHeader = null, + CustomBody = null, + CustomFooter = null, + header = {}, + CustomInputChip = null, + placeholder, + label, + chipsNumber = 2, + postProcessOptions = false, + refreshStatement, + statement, + fieldName = "", + getPreLevelSelectedValues, + areConnectionsExplicit, + minWidth = '', + isDisabled + }, + }: any) { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const aria = open ? "simple-popper" : undefined; - + const [hoveredOption, setHoveredOption] = useState