Console v0.5

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js

@@ -137,7 +137,7 @@ const getFieldType = (field) => {
       return "text";
     case "number":
       return "number";
-    case "textarea":
+    case "textArea":
       return "textarea";
     case "time":
       return "time";

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateCampaignComponents/ViewDetailComponent.js

@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
+
 const ViewDetailComponent = ({ headingName, desc, buttonLabel, navLink , type , icon , disabled,isDraftCampaign }) => {
   const { t } = useTranslation();
   const history = useHistory();

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js

@@ -2,7 +2,7 @@ import React, { useState, useMemo, Fragment, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useHistory } from "react-router-dom";
 import { Wrapper } from "./SelectingBoundaryComponent";
-import { AlertCard, Stepper, TextBlock, Tag, Card, HeaderComponent, Loader,Chip } from "@egovernments/digit-ui-components";
+import { AlertCard, Stepper, TextBlock, Tag, Card, HeaderComponent, Loader, PopUp, Button, Chip } from "@egovernments/digit-ui-components";
 import { CONSOLE_MDMS_MODULENAME } from "../Module";
 import TagComponent from "./TagComponent";
 
@@ -78,7 +78,7 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => {
     },
   };
 
-  const {  data: campaignData, isFetching } = Digit.Hooks.useCustomAPIHook(reqCriteria);
+  const { data: campaignData, isFetching } = Digit.Hooks.useCustomAPIHook(reqCriteria);
 
   useEffect(() => {
     onSelect("boundaryType", { selectedData: selectedData, boundaryData: boundaryOptions, updateBoundary: !restrictSelection });
@@ -107,9 +107,9 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => {
       setBoundaryOptions(sessionData?.boundaryData || {});
     }
     setTimeout(() => setIsLoading(false), 10);
-  }, [props?.props?.sessionData?.HCM_CAMPAIGN_SELECTING_BOUNDARY_DATA?.boundaryType , campaignData]);
+  }, [props?.props?.sessionData?.HCM_CAMPAIGN_SELECTING_BOUNDARY_DATA?.boundaryType, campaignData]);
 
- useEffect(() => {
+  useEffect(() => {
     if (
       props?.props?.sessionData?.HCM_CAMPAIGN_UPLOAD_BOUNDARY_DATA?.uploadBoundary?.uploadedFile?.length > 0 ||
       props?.props?.sessionData?.HCM_CAMPAIGN_UPLOAD_FACILITY_DATA?.uploadFacility?.uploadedFile?.length > 0 ||
@@ -138,6 +138,32 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => {
   //   window.dispatchEvent(new Event("checking"));
   // }, [key]);
 
+  const Template = {
+    url: "/project-factory/v1/project-type/cancel-campaign",
+    body: {
+      CampaignDetails: {
+        tenantId: tenantId,
+        campaignId: queryParams?.id,
+      }
+    },
+  };
+  const mutation = Digit.Hooks.useCustomAPIMutationHook(Template);
+
+  const handleCancelClick = async () => {
+    await mutation.mutate(
+      {},
+      {
+        onSuccess: async (result) => {
+          history.push(`/${window?.contextPath}/employee/campaign/my-campaign-new`)
+        },
+        onError: (error, result) => {
+          const errorCode = error?.response?.data?.Errors?.[0]?.code;
+          console.error(errorCode);
+        },
+      }
+    );
+  };
+
   const checkDataPresent = ({ action }) => {
     if (action === false) {
       setShowPopUp(false);
@@ -191,7 +217,7 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => {
               <TagComponent campaignName={campaignName} />
               {
                 isDraftCampaign ? (
-                  <div className="digit-tag-container" style={{margin:"0rem"}}>
+                  <div className="digit-tag-container" style={{ margin: "0rem" }}>
                     <Chip text={`${t(`CANCEL_CAMPAIGN`)}`} onClick={handleCancelClick} hideClose={false} />
                   </div>
                 ) : null

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppConfigurationParentLayer.js

@@ -479,6 +479,7 @@ const AppConfigurationParentRedesign = ({
               parentDispatch={parentDispatch}
               AppConfigMdmsData={AppConfigMdmsData}
               localeModule={localeModule}
+              parentState={parentState}
               pageTag={`${t("CMN_PAGE")} ${currentStep} / ${stepper?.length}`}
             />
           </div>

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppConfigurationWrapper.js

@@ -287,7 +287,7 @@ const reducer = (state = initialState, action, updateLocalization) => {
 
 const MODULE_CONSTANTS = "HCM-ADMIN-CONSOLE";
 
-function AppConfigurationWrapper({ screenConfig, localeModule, pageTag }) {
+function AppConfigurationWrapper({ screenConfig, localeModule, pageTag,parentState }) {
     const queryClient = useQueryClient();
   const { locState, addMissingKey, updateLocalization, onSubmit, back, showBack, parentDispatch } = useAppLocalisationContext();
   const [state, dispatch] = useReducer((state, action) => reducer(state, action, updateLocalization), initialState);
@@ -395,7 +395,7 @@ function AppConfigurationWrapper({ screenConfig, localeModule, pageTag }) {
     for (let i = 0; i < headerFields.length; i++) {
       if (headerFields[i]?.jsonPath === "ScreenHeading") {
         const fieldItem = headerFields[i];
-        const value = locS?.find((i) => i?.code === fieldItem?.value)?.[cL] || null;
+        const value = (locS ||[])?.find((i) => i?.code === fieldItem?.value)?.[cL] || null;
         if (!value || value.trim() === "") {
           return { type: "error", value: `${t("HEADER_FIELD_EMPTY_ERROR")}` };
         }
@@ -633,7 +633,7 @@ function AppConfigurationWrapper({ screenConfig, localeModule, pageTag }) {
                   })
                 }
               />
-              <DrawerFieldComposer />
+              <DrawerFieldComposer parentState={parentState} screenConfig={screenConfig} selectedField={state?.drawerField}/>
             </>
           ) : (
             <DndProvider backend={HTML5Backend}>

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppLocalisationWrapper.js

@@ -38,7 +38,7 @@ const locReducer = (state = initialState, action) => {
 
 const MODULE_CONSTANTS = "HCM-ADMIN-CONSOLE";
 //TODO @nabeel @jagan move this component to ui-component repo & clean up
-function AppLocalisationWrapperDev({ onSubmit, localeModule, screenConfig, back, showBack, parentDispatch, ...props }) {
+function AppLocalisationWrapperDev({ onSubmit, localeModule, screenConfig, back, showBack, parentDispatch, parentState,...props }) {
   if (!localeModule) {
     return <Loader />;
   }
@@ -129,7 +129,7 @@ function AppLocalisationWrapperDev({ onSubmit, localeModule, screenConfig, back,
         localeModule,
       }}
     >
-      <AppConfigurationWrapper pageTag={props?.pageTag} screenConfig={screenConfig} localeModule={localeModule} />
+      <AppConfigurationWrapper pageTag={props?.pageTag} screenConfig={screenConfig} localeModule={localeModule} parentState={parentState}/>
     </AppLocalisationContext.Provider>
   );
 }

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/DependentFieldsWrapper.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useState, Fragment, useMemo } from "react";
+import { Dropdown, Card, FieldV1, LabelFieldPair, TextInput } from "@egovernments/digit-ui-components";
+
+function DependentFieldsWrapper({ t, parentState, onExpressionChange, screenConfig, selectedFieldItem }) {
+
+    // List of possible operators
+    const OPERATORS = ['!==', '>=', '<=', '==', '>', '<']
+        .sort((a, b) => b.length - a.length);
+    /**
+     * Parses an expression like "A.B==C" and extracts A, B, operator, C
+     */
+    function parseExpression(expression = "") {
+        for (const operator of OPERATORS) {
+            const idx = expression.indexOf(operator);
+            if (idx !== -1) {
+                const [field, value] = [
+                    expression.slice(0, idx),
+                    expression.slice(idx + operator.length)
+                ];
+                const [selectedPage, selectedField] = field.split(".");
+                return {
+                    selectedPage: { code: selectedPage, name: selectedPage } || "",
+                    selectedField: { code: selectedField, name: selectedField } || "",
+                    comparisonType: { code: operator, name: operator },
+                    fieldValue: value || ""
+                };
+            }
+        }
+        // Fallback: if no operator found
+        return {
+            selectedPage: {},
+            selectedField: {},
+            comparisonType: {},
+            fieldValue: ""
+        };
+    }
+
+    const currentExpressionFromConfig = selectedFieldItem?.visibilityCondition?.expression;
+
+    const parsed = parseExpression(currentExpressionFromConfig);
+
+    // State initialization
+    const [selectedPage, setSelectedPage] = useState(parsed.selectedPage);
+    const [selectedField, setSelectedField] = useState(parsed.selectedField);
+    const [comparisonType, setComparisonType] = useState(parsed.comparisonType);
+    const [fieldValue, setFieldValue] = useState(parsed.fieldValue);
+    const currentPage = screenConfig?.[0]?.name;
+    const currentTemplate = parentState?.currentTemplate;
+
+    const pageOptions = useMemo(() => {
+        const currentIndex = currentTemplate.findIndex((p) => p.name === currentPage);
+        return currentTemplate.slice(0, currentIndex + 1).map((p) => ({
+            code: p.name,
+            name: p.name,
+        }));
+    }, [currentTemplate, currentPage]);
+
+    const fieldOptions = useMemo(() => {
+        const pageObj = currentTemplate.find((p) => p.name === selectedPage?.code)?.cards?.[0];
+        if (!pageObj) return [];
+        return pageObj.fields.map((f) => ({
+            code: f.jsonPath,
+            name: f.jsonPath,
+            format: f.format,
+            enums: f.dropDownOptions || [],
+        }));
+    }, [parentState?.currentTemplate, selectedPage?.code]);
+
+    const selectedFieldObj = fieldOptions.find((f) => f.code === selectedField);
+
+    useEffect(() => {
+        if (selectedPage?.code && selectedField?.code && comparisonType?.code && fieldValue !== "") {
+            const expression = `${selectedPage?.code}.${selectedField?.code}${comparisonType?.code}${fieldValue}`;
+            onExpressionChange?.(expression);
+        }
+    }, [selectedPage?.code, selectedField?.code, comparisonType?.code, fieldValue, onExpressionChange]);
+
+    return (
+        <Card type="secondary">
+            <LabelFieldPair vertical={true} removeMargin={true}>
+                <p style={{ margin: "0px" }}>{t("HCM_SELECT_PAGE")}</p>
+                <div className="digit-field" style={{ width: "100%" }}>
+                    <Dropdown
+                        option={pageOptions}
+                        optionKey="code"
+                        name="pageSelect"
+                        t={t}
+                        select={(e) => {
+                            setSelectedPage(e);
+                            setSelectedField({});
+                        }}
+                        selected={selectedPage}
+                    />
+                </div>
+            </LabelFieldPair>
+            <LabelFieldPair vertical={true} removeMargin={true}>
+                <p style={{ margin: "0px" }}>{t("HCM_SELECT_FIELD")}</p>
+                <div className="digit-field" style={{ width: "100%" }}>
+                    <Dropdown
+                        option={fieldOptions}
+                        optionKey="code"
+                        name="fieldSelect"
+                        t={t}
+                        select={(e) => {
+                            setSelectedField(e);
+                            setFieldValue("");
+                        }}
+                        selected={selectedField}
+                        disabled={!selectedPage?.code}
+                    />
+                </div>
+            </LabelFieldPair>
+            <LabelFieldPair vertical={true} removeMargin={true}>
+                <p style={{ margin: "0px" }}>{t("HCM_COMPARISION_TYPE")}</p>
+                <div className="digit-field" style={{ width: "100%" }}>
+                    <Dropdown
+                        option={[
+                            { code: "==", name: "equals to" },
+                            { code: "!==", name: "not equals to" },
+                            { code: ">=", name: "greater than or equals to" },
+                            { code: "<=", name: "less than or equals to" },
+                            { code: ">", name: "greater than" },
+                            { code: "<", name: "less than" },
+                        ]}
+                        optionKey="code"
+                        name="comparisonSelect"
+                        t={t}
+                        select={(e) => setComparisonType(e)}
+                        disabled={!selectedField?.code}
+                        selected={comparisonType}
+                    />
+                </div>
+            </LabelFieldPair>
+            <LabelFieldPair vertical={true} removeMargin={true}>
+                <p style={{ margin: "0px" }}>{t("HCM_SELECT_VALUE")}</p>
+                <div className="digit-field" style={{ width: "100%" }}>
+                    {selectedFieldObj && selectedFieldObj.format === "dropdown" ? (
+                        <Dropdown
+                            label={t("Select Value")}
+                            option={selectedFieldObj.enums.map((en) => ({
+                                code: en.code,
+                                name: en.name,
+                            }))}
+                            optionKey="code"
+                            name="valueSelect"
+                            t={t}
+                            select={(e) => setFieldValue(e.code)}
+                            disabled={!selectedField?.code}
+                            selected={fieldValue}
+                        />
+                    ) : (
+                        <TextInput
+                            type="text"
+                            populators={{ name: "fieldValue" }}
+                            placeholder={t("Enter value")}
+                            value={fieldValue}
+                            onChange={(event) => setFieldValue(event.target.value)}
+                            disabled={!selectedField?.code}
+                        />
+                    )}
+                </div>
+            </LabelFieldPair>
+        </Card>
+    );
+}
+
+export default React.memo(DependentFieldsWrapper);

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/DrawerFieldComposer.js

@@ -75,7 +75,7 @@ const whenToShow = (panelItem, drawerState) => {
   }
 };
 
-const RenderField = ({ state, panelItem, drawerState, setDrawerState, updateLocalization, AppScreenLocalisationConfig }) => {
+const RenderField = ({ state, panelItem, drawerState, setDrawerState, updateLocalization, AppScreenLocalisationConfig,parentState,handleExpressionChange,screenConfig ,selectedField}) => {
   const { t } = useTranslation();
   const isLocalisable = AppScreenLocalisationConfig?.fields
     ?.find((i) => i.fieldType === drawerState?.appType)
@@ -166,6 +166,10 @@ const RenderField = ({ state, panelItem, drawerState, setDrawerState, updateLoca
                     drawerState={drawerState}
                     AppScreenLocalisationConfig={AppScreenLocalisationConfig}
                     disabled={drawerState?.hidden}
+                    parentState={parentState}
+                    handleExpressionChange={handleExpressionChange}
+                    screenConfig={screenConfig}
+                    selectedField={selectedField}
                   />
                 ))
             : null}
@@ -381,7 +385,7 @@ const RenderField = ({ state, panelItem, drawerState, setDrawerState, updateLoca
   }
 };
 
-function DrawerFieldComposer() {
+function DrawerFieldComposer({parentState,screenConfig,selectedField}) {
   const { t } = useTranslation();
   const { locState, updateLocalization, AppScreenLocalisationConfig } = useAppLocalisationContext();
   const { state, dispatch } = useAppConfigContext();
@@ -404,6 +408,19 @@ function DrawerFieldComposer() {
     return state?.MASTER_DATA?.DrawerPanelConfig?.filter((i) => i.tab === activeTab).sort((a, b) => a.order - b.order);
   }, [state?.MASTER_DATA?.drawerField, tabs]);
 
+  const handleExpressionChange = (expressionString) => {
+    if (drawerState.visibilityCondition?.expression !== expressionString) {
+      setDrawerState(prev => ({
+        ...prev,
+        visibilityCondition: {
+          ...prev.visibilityCondition,
+          expression: expressionString
+        }
+      }));
+    }
+  };
+
+
   useEffect(() => {
     if (state?.drawerField) {
       setDrawerState(state?.drawerField);
@@ -476,6 +493,10 @@ function DrawerFieldComposer() {
                   state={state}
                   updateLocalization={updateLocalization}
                   AppScreenLocalisationConfig={AppScreenLocalisationConfig}
+                  parentState={parentState}
+                  handleExpressionChange={handleExpressionChange}
+                  screenConfig={screenConfig}
+                  selectedField={selectedField}
                 />
               </div>
             );

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.js

@@ -6,7 +6,7 @@ import { AppLocalisationWrapper, Loader, useCustomT } from "@egovernments/digit-
 //development mode
 import AppPreview from "../../../components/AppPreview";
 
-function ImpelComponentWrapper({ variant, screenConfig, submit, back, showBack, parentDispatch, localeModule, pageTag, ...props }) {
+function ImpelComponentWrapper({ variant, screenConfig, submit, back, showBack, parentDispatch, localeModule, pageTag, parentState,...props }) {
   const MODULE_CONSTANTS = "HCM-ADMIN-CONSOLE";
   const searchParams = new URLSearchParams(location.search);
   const fieldMasterName = searchParams.get("fieldType");
@@ -186,6 +186,7 @@ function ImpelComponentWrapper({ variant, screenConfig, submit, back, showBack,
   //       parentDispatch={parentDispatch}
   //       localeModule={localeModule}
   //       pageTag={pageTag}
+  //       parentState={parentState}
   //     />
   //   );
   // }
@@ -199,6 +200,7 @@ function ImpelComponentWrapper({ variant, screenConfig, submit, back, showBack,
       parentDispatch={parentDispatch}
       localeModule={localeModule}
       pageTag={pageTag}
+      parentState={parentState}
     >
       <AppPreview />
     </AppLocalisationWrapper>