Skip to content

Commit

Permalink
Fix linting on components
Browse files Browse the repository at this point in the history
  • Loading branch information
@akileng56
akileng56 committed Aug 7, 2024
1 parent 8cb95df commit 3bdf61f
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 55 deletions.
35 changes: 24 additions & 11 deletions src/components/popover/modifier-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,41 @@
import React from 'react';
import React from "react";
import styles from "../../data-visualizer/data-visualizer.scss";
import { Add, Subtract } from "@carbon/react/icons";
import { Checkbox, CheckboxGroup } from "@carbon/react";
import {modifiers} from "../../constants";
import { modifiers } from "../../constants";
type Props = {
listItem: Indicator;
onChangeMostRecent: (selectParameter: Indicator, type: string) => void;
onChangeExtraValue: (selectParameter: Indicator, event) => void;
}
const ModifierComponent: React.FC<Props> = ({listItem,onChangeMostRecent, onChangeExtraValue}) => {
};
const ModifierComponent: React.FC<Props> = ({
listItem,
onChangeMostRecent,
onChangeExtraValue,
}) => {
return (
<>
<div className={styles.mostRecentContainer}>
<div> Most Recent #: <span className={styles.modifierLeft}>{listItem?.modifier}</span></div>
<div>
<Subtract className={`${styles.selectedListItemArrow} ${styles.modifier}`}
onClick={() => onChangeMostRecent(listItem, "subtract")}/>
<Add className={styles.selectedListItemArrow} onClick={() => onChangeMostRecent(listItem, "add")}/>
{" "}
Most Recent #:{" "}
<span className={styles.modifierLeft}>{listItem?.modifier}</span>
</div>
<div>
<Subtract
className={`${styles.selectedListItemArrow} ${styles.modifier}`}
onClick={() => onChangeMostRecent(listItem, "subtract")}
/>
<Add
className={styles.selectedListItemArrow}
onClick={() => onChangeMostRecent(listItem, "add")}
/>
</div>
</div>
<CheckboxGroup
legendText={`Extra Values`}
className={styles.extrasContainer}
onChange={() => onChangeExtraValue(listItem,event)}
onChange={() => onChangeExtraValue(listItem, event)}
>
{modifiers.map((modifier) => {
return (
Expand All @@ -31,11 +44,11 @@ const ModifierComponent: React.FC<Props> = ({listItem,onChangeMostRecent, onChan
labelText={modifier.label}
value={modifier.id}
/>
)
);
})}
</CheckboxGroup>
</>
);
}
};

export default ModifierComponent;
4 changes: 2 additions & 2 deletions src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ export const dynamicReportOptions = [
},
];

export const modifiers= [
export const modifiers = [
{
id: "obsDateTime",
label: "DateTime",
Expand All @@ -481,5 +481,5 @@ export const modifiers= [
{
id: "provider",
label: "Provider",
}
},
];
133 changes: 94 additions & 39 deletions src/data-visualizer/data-visualizer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,9 +472,14 @@ const DataVisualizer: React.FC = () => {
};

const changeModifier = (selectedParameter, type) => {
setSelectedParameters(selectedParameters =>
selectedParameters.map(parameter =>
parameter.id === selectedParameter.id ? { ...parameter, modifier: addORSubtract(selectedParameter?.modifier, type)} : parameter
setSelectedParameters((selectedParameters) =>
selectedParameters.map((parameter) =>
parameter.id === selectedParameter.id
? {
...parameter,
modifier: addORSubtract(selectedParameter?.modifier, type),
}
: parameter
)
);
};
Expand All @@ -487,29 +492,46 @@ const DataVisualizer: React.FC = () => {
} else {
return value;
}
}
};

const showModifierPanel = (selectedParameter: Indicator) => {
setSelectedParameters(selectedParameters =>
selectedParameters.map(parameter =>
parameter.id === selectedParameter.id ? { ...parameter, showModifierPanel: !selectedParameter?.showModifierPanel } : parameter
setSelectedParameters((selectedParameters) =>
selectedParameters.map((parameter) =>
parameter.id === selectedParameter.id
? {
...parameter,
showModifierPanel: !selectedParameter?.showModifierPanel,
}
: parameter
)
)
);
};

const handleOnChnageExtras = (selectedParameter,event) => {
const handleOnChnageExtras = (selectedParameter, event) => {
if (event?.target?.checked) {
setSelectedParameters(selectedParameters =>
selectedParameters.map(parameter =>
parameter.id === selectedParameter.id ? { ...parameter, extras: [...parameter?.extras, event?.target?.value] } : parameter
setSelectedParameters((selectedParameters) =>
selectedParameters.map((parameter) =>
parameter.id === selectedParameter.id
? {
...parameter,
extras: [...parameter?.extras, event?.target?.value],
}
: parameter
)
)
);
} else {
setSelectedParameters(selectedParameters =>
selectedParameters.map(parameter =>
parameter.id === selectedParameter.id ? { ...parameter, extras: parameter?.extras.filter((modifier) => modifier !== event?.target?.value ) } : parameter
setSelectedParameters((selectedParameters) =>
selectedParameters.map((parameter) =>
parameter.id === selectedParameter.id
? {
...parameter,
extras: parameter?.extras.filter(
(modifier) => modifier !== event?.target?.value
),
}
: parameter
)
)
);
}
};

Expand Down Expand Up @@ -864,36 +886,69 @@ const DataVisualizer: React.FC = () => {
{selectedParameters.map((parameter) => (
<>
<li
className={`${styles.rightListItem} ${parameter?.showModifierPanel ? styles.openRightListItem : ''} `}
className={`${styles.rightListItem} ${
parameter?.showModifierPanel
? styles.openRightListItem
: ""
} `}
key={parameter.label}
role="menuitem"
>
<div className={styles.selectedListItem}>
<div><ArrowLeft className={styles.itemChevronUpDown}
onClick={() => moveAllFromRightToLeft(parameter)}/></div>
<div>
<ArrowLeft
className={styles.itemChevronUpDown}
onClick={() =>
moveAllFromRightToLeft(parameter)
}
/>
</div>
{parameter.label}
{
(parameter?.type !== "PatientIdentifier" && parameter?.type !== "PersonAttribute")
?
(
<div className={styles.modifierContainer}>
<div>
{ parameter?.showModifierPanel ?
<ChevronUp className={styles.itemChevronUpDown} onClick={() => showModifierPanel(parameter)}/>
:
<ChevronDown className={styles.itemChevronUpDown}
onClick={() => showModifierPanel(parameter)}/>
}
</div>
</div>
)
: null
}
{parameter?.type !==
"PatientIdentifier" &&
parameter?.type !== "PersonAttribute" ? (
<div
className={styles.modifierContainer}
>
<div>
{parameter?.showModifierPanel ? (
<ChevronUp
className={
styles.itemChevronUpDown
}
onClick={() =>
showModifierPanel(parameter)
}
/>
) : (
<ChevronDown
className={
styles.itemChevronUpDown
}
onClick={() =>
showModifierPanel(parameter)
}
/>
)}
</div>
</div>
) : null}
</div>
</li>
<div
className={`${styles.fadeModifierContainer} ${parameter?.showModifierPanel ? styles.show : styles.hide}`}>
<ModifierComponent listItem={parameter} onChangeMostRecent={changeModifier} onChangeExtraValue={handleOnChnageExtras}/>
className={`${
styles.fadeModifierContainer
} ${
parameter?.showModifierPanel
? styles.show
: styles.hide
}`}
>
<ModifierComponent
listItem={parameter}
onChangeMostRecent={changeModifier}
onChangeExtraValue={handleOnChnageExtras}
/>
</div>
</>
))}
Expand Down
6 changes: 3 additions & 3 deletions src/data-visualizer/data-visualizer.resource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export function mapDataElements(
type: encounterType.type,
modifier: 1,
showModifierPanel: false,
extras: []
extras: [],
});
});
} else {
Expand All @@ -256,7 +256,7 @@ export function mapDataElements(
type: type ?? "",
modifier: 1,
showModifierPanel: false,
extras: []
extras: [],
});
});
}
Expand All @@ -274,7 +274,7 @@ export function formatReportArray(selectedItems: Array<Indicator>) {
type: item.type,
expression: item.id,
modifier: item?.modifier,
extras: item?.extras
extras: item?.extras,
});
});
}
Expand Down

0 comments on commit 3bdf61f

Please sign in to comment.