added conditional logic

src/components/AnchorMenu/AnchorMenu.css

@@ -119,3 +119,5 @@
     margin-right: 0.5rem;
     background: url('../../images/icons/help-circle-outline.svg') no-repeat center;
 }
+
+

src/components/AnchorMenu/AnchorMenu.tsx

@@ -11,13 +11,15 @@ import {
     newItemAction,
     reorderItemAction,
     updateMarkedLinkIdAction,
+    updateConditionalLogicAction,
 } from '../../store/treeStore/treeActions';
 import { ValidationErrors } from '../../helpers/orphanValidation';
 import { SortableTreeWithoutDndContext as SortableTree } from '@nosferatu500/react-sortable-tree';
 import '@nosferatu500/react-sortable-tree/style.css';
 import { isIgnorableItem } from '../../helpers/itemControl';
 import { generateItemButtons } from './ItemButtons/ItemButtons';
 import { canTypeHaveChildren, getInitialItemConfig } from '../../helpers/questionTypeFeatures';
+import ConditionPopup from '../ConditionPopUp/ConditionPopup';
 
 interface AnchorMenuProps {
     qOrder: OrderItem[];
@@ -109,7 +111,9 @@ const YourExternalNodeComponent = ({ node }: { node: Node }): JSX.Element | null
 const AnchorMenu = (props: AnchorMenuProps): JSX.Element => {
     const { t } = useTranslation();
     const [collapsedNodes, setCollapsedNodes] = useState<string[]>([]);
-
+    const [showPopup, setShowPopup] = useState<boolean>(false);
+    const [currentNode, setCurrentNode] = useState<Node | null>(null);
+    const [initialCondition, setInitialCondition] = useState<string>('true');
 
     const mapToTreeData = (item: OrderItem[], hierarchy: string, parentLinkId?: string): Node[] => {
         return item
@@ -171,6 +175,20 @@ const AnchorMenu = (props: AnchorMenuProps): JSX.Element => {
         );
     };
 
+    const handleConditionalLogic = (node: Node) => {
+        setCurrentNode(node);
+        const currentCondition = props.qItems[node.title]?.conditions || 'true';
+        setInitialCondition(currentCondition);
+        setShowPopup(true);
+    };
+
+    const handleSaveCondition = (condition: string) => {
+        if (currentNode) {
+            props.dispatch(updateConditionalLogicAction(currentNode.title, condition));
+        }
+        setShowPopup(false);
+    };
+
     const orderTreeData = mapToTreeData(props.qOrder, '');
     return (
         <DndProvider backend={HTML5Backend} {...({} as any)}>
@@ -262,6 +280,7 @@ const AnchorMenu = (props: AnchorMenuProps): JSX.Element => {
                             treePathToOrderArray(extendedNode.path),
                             false,
                             props.dispatch,
+                            () => handleConditionalLogic(extendedNode.node),
                         ),
                     })}
                 />
@@ -273,9 +292,17 @@ const AnchorMenu = (props: AnchorMenuProps): JSX.Element => {
                         </div>
                     </div>
                 )}
+                {showPopup && (
+                    <ConditionPopup
+                        key="condition-popup"
+                        onClose={() => setShowPopup(false)}
+                        onSave={handleSaveCondition}
+                        initialCondition={initialCondition}
+                    />
+                )}
             </div>
         </DndProvider>
     );
 };
 
-export default AnchorMenu;
+export default AnchorMenu;

src/components/AnchorMenu/ItemButtons/ItemButtons.css

@@ -36,3 +36,10 @@
     height: 25px;
     width: 25px;
 }
+
+.question-mark-icon {
+    height: 25px;
+    min-width: 25px;
+    margin: auto;
+    background: url('../../../images/icons/help-circle-outline.svg') no-repeat center;
+}

src/components/AnchorMenu/ItemButtons/ItemButtons.tsx

@@ -1,22 +1,23 @@
 import { MouseEvent } from 'react';
 import { TFunction } from 'react-i18next';
-
+import React from 'react';
 import { ActionType } from '../../../store/treeStore/treeStore';
 import { QuestionnaireItem } from '../../../types/fhir';
-
-import './ItemButtons.css';
 import { deleteItemAction, duplicateItemAction } from '../../../store/treeStore/treeActions';
+import './ItemButtons.css';
 
 export const generateItemButtons = (
     t: TFunction<'translation'>,
     item: QuestionnaireItem | undefined,
     parentArray: Array<string>,
     showLabel: boolean,
     dispatch: React.Dispatch<ActionType>,
+    onConditionalLogic: () => void,
 ): JSX.Element[] => {
     if (!item) {
         return [];
     }
+
     const dispatchDeleteItem = (event: MouseEvent<HTMLButtonElement>): void => {
         event.stopPropagation();
         dispatch(deleteItemAction(item.linkId, parentArray));
@@ -52,5 +53,15 @@ export const generateItemButtons = (
             <i className="trash-icon" />
             {showLabel && <label>{t('Delete')}</label>}
         </button>,
+        <button
+            key="conditional-logic"
+            className={getClassNames()}
+            onClick={onConditionalLogic}
+            aria-label="Set Condition"
+            title={t('Set Condition')}
+        >
+            <i className="question-mark-icon"/>
+            {showLabel && <label>{t('Set Condition')}</label>}
+        </button>,
     ];
-};
+};

src/components/AnswerOption/DraggableAnswerOptions.tsx

@@ -100,7 +100,7 @@ const DraggableAnswerOptions = ({ item, dispatchUpdateItem }: DraggableAnswerOpt
                                                     dispatchUpdateItem(IItemProperty.answerOption, newArray);
                                                 }}
                                                 answerOption={answerOption}
-                                                handleDrag={providedDrag.dragHandleProps}
+                                                handleDrag={providedDrag.dragHandleProps || undefined}
                                                 showDelete={
                                                     !!item.answerOption?.length && item.answerOption?.length > 2
                                                 }

src/components/ConditionPopUp/ConditionPopup.css

@@ -0,0 +1,86 @@
+.condition-popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.condition-popup {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+}
+
+.condition-popup__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.condition-popup__options {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+.condition-popup__option {
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    padding: 10px 20px;
+    margin: 0 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.condition-popup__option.selected {
+    background-color: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+.condition-popup__option:hover {
+    background-color: #e0e0e0;
+}
+
+.condition-popup__option.selected:hover {
+    background-color: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+
+.condition-popup__buttons {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.condition-popup__button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.condition-popup__button:hover {
+    background-color: #0056b3;
+}
+
+.condition-popup__button + .condition-popup__button {
+    margin-left: 10px;
+}

src/components/ConditionPopUp/ConditionPopup.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import './ConditionPopup.css';
+
+interface ConditionPopupProps {
+    onClose: () => void;
+    onSave: (condition: string) => void;
+    initialCondition?: string;
+}
+
+const ConditionPopup: React.FC<ConditionPopupProps> = ({ onClose, onSave, initialCondition = 'true' }) => {
+    const [condition, setCondition] = useState<string>(initialCondition);
+
+    useEffect(() => {
+        setCondition(initialCondition);
+    }, [initialCondition]);
+
+    const handleSave = () => {
+        onSave(condition);
+        onClose();
+    };
+
+    return (
+        <div className="condition-popup-overlay">
+            <div className="condition-popup">
+                <div className="condition-popup__content">
+                    <h3>Set Condition</h3>
+                    <div className="condition-popup__options">
+                        <button
+                            className={`condition-popup__option ${condition === 'true' ? 'selected' : ''}`}
+                            onClick={() => setCondition('true')}
+                        >
+                            True
+                        </button>
+                        <button
+                            className={`condition-popup__option ${condition === 'false' ? 'selected' : ''}`}
+                            onClick={() => setCondition('false')}
+                        >
+                            False
+                        </button>
+                    </div>
+                    <div className="condition-popup__buttons">
+                        <button className="condition-popup__button" onClick={handleSave}>Save</button>
+                        <button className="condition-popup__button" onClick={onClose}>Cancel</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConditionPopup;

src/components/QuestionDrawer/QuestionDrawer.tsx

@@ -1,19 +1,20 @@
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TreeContext } from '../../store/treeStore/treeStore';
 import { QuestionnaireItem, ValueSetComposeIncludeConcept } from '../../types/fhir';
 import './QuestionDrawer.css';
 import { calculateItemNumber } from '../../helpers/treeHelper';
 import Question from '../Question/Question';
 import { getEnableWhenConditionals } from '../../helpers/enableWhenValidConditional';
-import { updateMarkedLinkIdAction } from '../../store/treeStore/treeActions';
+import { updateMarkedLinkIdAction, updateConditionalLogicAction } from '../../store/treeStore/treeActions';
 import IconBtn from '../IconBtn/IconBtn';
 import { useItemNavigation } from '../../hooks/useItemNavigation';
 import { useKeyPress } from '../../hooks/useKeyPress';
 import useOutsideClick from '../../hooks/useOutsideClick';
 import Drawer from '../Drawer/Drawer';
 import { generateItemButtons } from '../AnchorMenu/ItemButtons/ItemButtons';
 import { ValidationErrors } from '../../helpers/orphanValidation';
+import ConditionPopup from '../ConditionPopUp/ConditionPopup';
 
 interface Props {
     validationErrors: ValidationErrors[];
@@ -23,6 +24,9 @@ const QuestionDrawer = ({ validationErrors }: Props): JSX.Element | null => {
     const { t } = useTranslation();
     const { state, dispatch } = useContext(TreeContext);
     const { previous, next, hasNext, hasPrevious } = useItemNavigation();
+    const [showPopup, setShowPopup] = useState<boolean>(false);
+    const [initialCondition, setInitialCondition] = useState<string>('true');
+
     const closeDrawer = () => {
         setTimeout(() => {
             dispatch(updateMarkedLinkIdAction());
@@ -48,6 +52,19 @@ const QuestionDrawer = ({ validationErrors }: Props): JSX.Element | null => {
         return state.qItems[linkId];
     };
 
+    const handleConditionalLogic = (item: QuestionnaireItem) => {
+        const currentCondition = item.conditions || 'true';
+        setInitialCondition(currentCondition);
+        setShowPopup(true);
+    };
+
+    const handleSaveCondition = (condition: string) => {
+        if (state.qCurrentItem?.linkId) {
+            dispatch(updateConditionalLogicAction(state.qCurrentItem.linkId, condition));
+        }
+        setShowPopup(false);
+    };
+
     const item = state.qCurrentItem?.linkId ? state.qItems[state.qCurrentItem?.linkId] : undefined;
     const parentArray = state.qCurrentItem?.parentArray || [];
     const elementNumber = !!item
@@ -69,7 +86,11 @@ const QuestionDrawer = ({ validationErrors }: Props): JSX.Element | null => {
                         <IconBtn type="forward" title={t('Next (right arrow)')} onClick={next} color="black" />
                     )}
                 </div>
-                {item && <div className="pull-right">{generateItemButtons(t, item, parentArray, true, dispatch)}</div>}
+                {item && (
+                    <div className="pull-right">
+                        {generateItemButtons(t, item, parentArray, true, dispatch, () => handleConditionalLogic(item))}
+                    </div>
+                )}
             </div>
             {itemValidationErrors.length > 0 && (
                 <div className="item-validation-error-summary">
@@ -94,8 +115,16 @@ const QuestionDrawer = ({ validationErrors }: Props): JSX.Element | null => {
                     itemValidationErrors={itemValidationErrors}
                 />
             )}
+            {showPopup && (
+                <ConditionPopup
+                    key="condition-popup"
+                    onClose={() => setShowPopup(false)}
+                    onSave={handleSaveCondition}
+                    initialCondition={initialCondition}
+                />
+            )}
         </Drawer>
     );
 };
 
-export default QuestionDrawer;
+export default QuestionDrawer;

src/helpers/generateQuestionnaire.test.ts

@@ -33,8 +33,8 @@ describe(`generateQuestionnaire from state with items`, () => {
         const state: TreeState = {
             ...initialState,
             qItems: {
-                [linkId1]: { linkId: linkId1, type: 'Group', _text: {} },
-                [linkId2]: { linkId: linkId2, type: 'Group', _text: { extension: [] } },
+                [linkId1]: { linkId: linkId1, type: 'Group', _text: {} , conditions: ''},
+                [linkId2]: { linkId: linkId2, type: 'Group', _text: { extension: [] }, conditions: '' },
             },
             qOrder: [
                 { linkId: linkId1, items: [] },