Skip to content

Commit

Permalink
Check for duplicates & delete added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Willie-theBeastMutua
Willie-theBeastMutua committed Oct 8, 2024
1 parent bcfd74b commit 0b098c5
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 40 deletions.
71 changes: 46 additions & 25 deletions src/components/interactive-builder/add-question.modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ interface AddQuestionModalProps {
}

interface Item {
id: string;
text: string;
}

Expand Down Expand Up @@ -130,7 +131,10 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
const [selectedAnsConcept, setSelectedAnsConcept] = useState<Concept | null>(null);
const [selectedPersonAttributeType, setSelectedPersonAttributeType] = useState<PersonAttributeType | null>(null);
const { concepts, conceptLookupError, isLoadingConcepts } = useConceptLookup(debouncedConceptToLookup);
const { concepts: ansConcepts, conceptLookupError: conceptAnsLookupError, isLoadingConcepts: isLoadingAnsConcepts,
const {
concepts: ansConcepts,
conceptLookupError: conceptAnsLookupError,
isLoadingConcepts: isLoadingAnsConcepts,
} = useConceptLookup(debouncedAnsConceptToLookup);
const { personAttributeTypes, personAttributeTypeLookupError } = usePersonAttributeTypes();
const [selectedPatientIdetifierType, setSelectedPatientIdetifierType] = useState<PatientIdentifierType>(null);
Expand Down Expand Up @@ -175,6 +179,7 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
const handleConceptSelect = (concept: Concept) => {
const updatedDatePickerType = getDatePickerType(concept);
if (updatedDatePickerType) setDatePickerType(updatedDatePickerType);
setAnswer(false);
setConceptToLookup('');
setSelectedConcept(concept);
setAnswers(
Expand All @@ -198,9 +203,26 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
setaddedAnswers([]);
};
const handleSaveClick = () => {
setSelectedAnswers((prevAnswers) => [...prevAnswers, ...addedAnswers]);
setSelectedAnswers((prevAnswers) => {
const newAnswers = addedAnswers.filter(
(newAnswer) => !prevAnswers.some((prevAnswer) => prevAnswer.id === newAnswer.id),
);
const updatedAnswers = [...prevAnswers, ...newAnswers];

setAnswers((prevAnswers) => [
...prevAnswers,
...newAnswers.map((answer) => ({
concept: answer.id,
label: answer.text,
})),
]);

return updatedAnswers;
});

setaddedAnswers([]);
};

const handleConceptAnsSelect = (concept: Concept) => {
setConceptAnsToLookup('');
setSelectedAnsConcept(concept);
Expand Down Expand Up @@ -448,8 +470,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({

{questionTypes.filter((questionType) => questionType !== 'obs').includes(questionType)
? renderTypeOptions[questionType].map((type, key) => (
<SelectItem key={`${questionType}-${key}`} text={type} value={type} />
))
<SelectItem key={`${questionType}-${key}`} text={type} value={type} />
))
: fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
</Select>

Expand Down Expand Up @@ -697,14 +719,13 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
id: answer.concept,
text: answer.label,
}))}
onChange={({
selectedItems,
}: {
selectedItems: Array<{
id: string;
text: string;
}>;
}) => setSelectedAnswers(selectedItems.sort())}
selectedItems={selectedAnswers.map((answer) => ({
id: answer.id,
text: answer.text,
}))}
onChange={({ selectedItems }: { selectedItems: Array<{ id: string; text: string }> }) => {
setSelectedAnswers(selectedItems);
}}
size="md"
titleText={t('selectAnswersToDisplay', 'Select answers to display')}
/>
Expand Down Expand Up @@ -894,25 +915,25 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
*/}
{selectedConcept && selectedConcept.datatype
? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (
<RadioButton
id={type.value}
labelText={type.label}
onClick={() => setDatePickerType(type.value)}
checked={datePickerType === type.value}
value={type.value}
/>
))
: Object.values(datePickerTypeOptions)
.flat()
.map((type) => (
<RadioButton
id={type.value}
checked={datePickerType === type.value}
labelText={type.label}
onClick={() => setDatePickerType(type.value)}
checked={datePickerType === type.value}
value={type.value}
/>
))}
))
: Object.values(datePickerTypeOptions)
.flat()
.map((type) => (
<RadioButton
id={type.value}
checked={datePickerType === type.value}
labelText={type.label}
onClick={() => setDatePickerType(type.value)}
value={type.value}
/>
))}
</RadioButtonGroup>
) : null}

Expand Down
70 changes: 55 additions & 15 deletions src/components/interactive-builder/edit-question.modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
if (datePickerType) {
setDatePickerType(datePickerType);
}
setAnswer(false);
setConceptToLookup('');
setSelectedAnswers([]);
setSelectedConcept(concept);
Expand All @@ -223,8 +224,41 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
const clearAnsConcept = () => {
setaddedAnswers([]);
};

const handleSaveClick = () => {
setSelectedAnswers((prevAnswers) => [...prevAnswers, ...addedAnswers]);
const existingAnswers = questionToEdit?.questionOptions?.answers || [];

const updatedAnswers = [
...existingAnswers,
...addedAnswers
.filter((newAnswer) => !existingAnswers.some((prevAnswer) => prevAnswer.concept === newAnswer.id))
.map((answer) => ({
concept: answer.id,
label: answer.text,
})),
];

if (questionToEdit?.questionOptions) {
questionToEdit.questionOptions.answers = updatedAnswers;
}
if (hasConceptChanged) {
setAnswersFromConcept((prevAnswers) => [
...prevAnswers,
...addedAnswers.map((answer) => ({
concept: answer.id,
label: answer.text,
})),
]);
}

setSelectedAnswers((prevAnswers) => {
const combinedAnswers = [
...prevAnswers,
...addedAnswers.filter((newAnswer) => !prevAnswers.some((prevAnswer) => prevAnswer.id === newAnswer.id)),
];
return combinedAnswers;
});

setaddedAnswers([]);
};

Expand Down Expand Up @@ -788,31 +822,23 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
className={styles.multiSelect}
direction="top"
id="selectAnswers"
itemToString={(item: Item) => item.text}
initialSelectedItems={questionToEdit?.questionOptions?.answers?.map((answer) => ({
id: answer.concept,
text: answer.label,
itemToString={(item: { id: string; text: string }) => item.text}
selectedItems={selectedAnswers.map((answer) => ({
id: answer.id,
text: answer.text,
}))}
items={questionToEdit?.questionOptions?.answers?.map((answer) => ({
id: answer.concept,
text: answer.label ?? '',
}))}
onChange={({
selectedItems,
}: {
selectedItems: Array<{
id: string;
text: string;
}>;
}) => {
onChange={({ selectedItems }: { selectedItems: Array<{ id: string; text: string }> }) => {
setSelectedAnswers(selectedItems);
// (selectedItems.sort());
}}
size="md"
titleText={t('selectAnswersToDisplay', 'Select answers to display')}
/>
) : null}
{selectedAnswers.length && questionToEdit.type !== 'programState' ? (
{!hasConceptChanged && selectedAnswers.length && questionToEdit.type !== 'programState' ? (
<div>
{selectedAnswers?.map((answer) => (
<Tag className={styles.tag} key={answer?.id} type={'blue'}>
Expand All @@ -831,6 +857,10 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
id: answer.concept,
text: answer.label,
}))}
selectedItems={selectedAnswers.map((answer) => ({
id: answer.id,
text: answer.text,
}))}
onChange={({
selectedItems,
}: {
Expand All @@ -844,6 +874,16 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
/>
) : null}

{hasConceptChanged && selectedAnswers.length && questionToEdit.type !== 'programState' ? (
<div>
{selectedAnswers?.map((answer) => (
<Tag className={styles.tag} key={answer?.id} type={'blue'}>
{answer?.text}
</Tag>
))}
</div>
) : null}

{(selectedConcept || questionToEdit) && questionToEdit?.questionOptions.answers?.length ? (
<div>
<Button kind="tertiary" onClick={showAddQuestion} iconDescription="Add" size="sm">
Expand Down

0 comments on commit 0b098c5

Please sign in to comment.