{
+ return useContext(AppConfigContext);
+};
+
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+ case "MASTER_DATA":
+ return {
+ ...state,
+ MASTER_DATA: { ...action.state },
+ screenData: action.state?.AppScreenConfigTemplateSchema,
+ };
+ case "ADD_SECTION":
+ return {
+ ...state,
+ screenData: state?.screenData?.map((item, index) => {
+ if (item?.name === action?.payload?.currentScreen?.name) {
+ return {
+ ...item,
+ cards: [
+ ...item?.cards,
+ {
+ fields: [],
+ header: "Header",
+ description: "Desc",
+ headerFields: [
+ {
+ type: "text",
+ label: "SCREEN_HEADING",
+ active: true,
+ jsonPath: "ScreenHeading",
+ metaData: {},
+ required: true,
+ },
+ {
+ type: "text",
+ label: "SCREEN_DESCRIPTION",
+ active: true,
+ jsonPath: "Description",
+ metaData: {},
+ required: true,
+ },
+ ],
+ },
+ ],
+ };
+ }
+ return item;
+ }),
+ };
+ case "ADD_FIELD":
+ return {
+ ...state,
+ screenData: state?.screenData?.map((item, index) => {
+ if (item?.name === action?.payload?.currentScreen?.name) {
+ return {
+ ...item,
+ cards: item?.cards?.map((j, k) => {
+ if (j.header === action.payload.currentCard?.header) {
+ return {
+ ...j,
+ fields: [
+ ...j.fields,
+ {
+ id: crypto.randomUUID(),
+ type: "text",
+ label: "LABEL",
+ active: true,
+ },
+ ],
+ };
+ }
+ return j;
+ }),
+ };
+ }
+ return item;
+ }),
+ };
+ case "DELETE_FIELD":
+ return {
+ ...state,
+ screenData: state?.screenData?.map((item, index) => {
+ if (item?.name === action?.payload?.currentScreen?.name) {
+ return {
+ ...item,
+ cards: item?.cards?.map((j, k) => {
+ if (j.header === action.payload.currentCard?.header) {
+ return {
+ ...j,
+ fields: j.fields?.filter((k) => k.id !== action.payload.currentField.id),
+ };
+ }
+ return j;
+ }),
+ };
+ }
+ return item;
+ }),
+ };
+ case "SELECT_DRAWER_FIELD":
+ return {
+ ...state,
+ currentScreen: action?.payload?.currentScreen,
+ currentCard: action?.payload?.currentCard,
+ drawerField: action?.payload?.drawerField,
+ };
+ case "UNSELECT_DRAWER_FIELD":
+ return {
+ ...state,
+ drawerField: null,
+ };
+ case "UPDATE_DRAWER_FIELD":
+ return {
+ ...state,
+ screenData: state?.screenData?.map((item, index) => {
+ if (item?.name === state?.currentScreen?.name) {
+ return {
+ ...item,
+ cards: item?.cards?.map((j, k) => {
+ if (j.header === state.currentCard?.header) {
+ return {
+ ...j,
+ fields: j.fields.map((k) => {
+ if (k.id === state.drawerField.id) {
+ return {
+ ...action.payload.updatedState,
+ };
+ }
+ return k;
+ }),
+ };
+ }
+ return j;
+ }),
+ };
+ }
+ return item;
+ }),
+ };
+ default:
+ return state;
+ }
+};
+
+const MODULE_CONSTANTS = "HCM-ADMIN-CONSOLE";
+function AppConfigurationWrapper() {
+ const [state, dispatch] = useReducer(reducer, initialState);
+ const { t } = useTranslation();
+ const { isLoading: isLoadingAppConfigMdmsData, data: AppConfigMdmsData } = Digit.Hooks.useCustomMDMS(
+ Digit.ULBService.getCurrentTenantId(),
+ MODULE_CONSTANTS,
+ [{ name: "AppScreenConfigTemplateSchema" }, { name: "AppFieldType" }, { name: "DrawerPanelConfig" }, { name: "AppScreenLocalisationConfig" }],
+ {
+ cacheTime: Infinity,
+ staleTime: Infinity,
+ select: (data) => {
+ dispatch({
+ type: "MASTER_DATA",
+ state: {
+ ...data?.["HCM-ADMIN-CONSOLE"],
+ },
+ });
+ },
+ },
+ { schemaCode: "BASE_APP_MASTER_DATA" } //mdmsv2
+ );
+
+ if (isLoadingAppConfigMdmsData) {
+ return ;
+ }
+
+ return (
+
+
+ {state?.drawerField && (
+ ]}
+ closedHeader={[]}
+ closedSections={[]}
+ defaultClosedWidth=""
+ defaultOpenWidth=""
+ footer={[]}
+ header={[
+
+ Header
+
,
+ ]}
+ hideScrollIcon
+ isDraggable={false}
+ position="right"
+ sections={[]}
+ styles={{}}
+ type="static"
+ >
+
+
+ )}
+
+ );
+}
+
+export default AppConfigurationWrapper;
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js
new file mode 100644
index 0000000000..b050ca5681
--- /dev/null
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js
@@ -0,0 +1,274 @@
+import { LabelFieldPair, TextInput, Dropdown, CheckBox } from "@egovernments/digit-ui-components";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PRIMARY_COLOR } from "../../utils";
+import { DustbinIcon } from "../../components/icons/DustbinIcon";
+import { useAppConfigContext } from "./AppConfigurationWrapper";
+
+const CheckBoxes = ({ t, option, optionKey, isLabelFirst }) => {
+ return (
+
+ {option?.map((item, index) => (
+ {}} value={""} label={t(`${item?.[optionKey]}`)} isLabelFirst={isLabelFirst} />
+ ))}
+
+ );
+};
+
+function AppFieldComposer({
+ headerFields = false,
+ type,
+ label,
+ value,
+ required,
+ isDelete = false,
+ onDelete,
+ onSelectField = () => {},
+ dropDownOptions = [],
+ config,
+}) {
+ const { t } = useTranslation();
+ const { state, dispatch } = useAppConfigContext();
+ const componentRef = useRef(null);
+
+ const Field = () => {
+ switch (type) {
+ case "text":
+ case "textInput":
+ return (
+ // {
+ // onSelectField();
+ // }}
+ // >
+
+
+ {`${t(label)}`}
+ {required && *}
+
+ {}} />
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ //
{
+ // onSelectField();
+ // }}
+ // >
+
+
+ {`${t(label)}`}
+ {required && *}
+
+ {}}
+ />
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ //
+ {`${t(label)}`}
+ {required && *}
+
+ {}} />
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ );
+ break;
+ case "counter":
+ return (
+
+
+ {`${t(label)}`}
+ {required && *}
+
+ {}} />
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ );
+ break;
+ case "number":
+ return (
+
+
+ {`${t(label)}`}
+ {required && *}
+
+ {}} />
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ );
+ case "checkbox":
+ return (
+
+
+ {`${t(label)}`}
+ {required && *}
+
+
+ {isDelete && (
+ {
+ // e.stopPropagation();
+ onDelete();
+ }}
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+ )}
+
+ );
+ default:
+ return null;
+ break;
+ }
+ };
+
+ return (
+ {
+ if (config?.id !== state?.drawerField?.id) {
+ onSelectField();
+ }
+ // e.stopPropagation();
+ // onSelectField();
+ }}
+ className="app-config-field-wrapper"
+ style={{ width: "50%" }}
+ >
+
+
+ );
+}
+
+export default AppFieldComposer;
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js
new file mode 100644
index 0000000000..e9717cf4af
--- /dev/null
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js
@@ -0,0 +1,215 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useAppConfigContext } from "./AppConfigurationWrapper";
+import { useTranslation } from "react-i18next";
+import { Button, Card, CardHeader, Divider, Stepper, Tab, ActionBar } from "@egovernments/digit-ui-components";
+import AppFieldComposer from "./AppFieldComposer";
+import _ from "lodash";
+
+const Tabs = ({ numberTabs, onTabChange }) => {
+ const { state, dispatch } = useAppConfigContext();
+ const { t } = useTranslation();
+ return (
+
+ {numberTabs.map((_, index) => (
+
+ ))}
+
+
i.type === drawerState?.type)}
+ select={(value) => {
+ setDrawerState((prev) => ({
+ ...prev,
+ type: value?.type,
+ }));
+ }}
+ />
+
+ setDrawerState((prev) => ({
+ ...prev,
+ required: value,
+ }))
+ }
+ isCheckedInitially={drawerState?.required ? true : false}
+ shapeOnOff
+ />
+
+ {
+ setDrawerState((prev) => ({
+ ...prev,
+ isLabel: value,
+ }));
+ }}
+ isCheckedInitially={drawerState?.isLabel ? true : false}
+ shapeOnOff
+ />
+ {drawerState?.isLabel && (
+ {
+ setDrawerState((prev) => ({
+ ...prev,
+ label: event.target.value,
+ }));
+ }}
+ placeholder={""}
+ />
+ )}
+
+ {(drawerState?.type === "dropDown" || drawerState?.type === "checkbox") && (
+
+ {drawerState?.dropDownOptions?.map((item, index) => (
+
+
{
+ setDrawerState((prev) => ({
+ ...prev,
+ dropDownOptions: prev?.dropDownOptions?.map((i) => {
+ if (i.id === item.id) {
+ return {
+ ...i,
+ name: event.target.value,
+ };
+ }
+ return i;
+ }),
+ }));
+ // setDropDownOptions((prev) => {
+ // return prev.map((i) => {
+ // if (i.id === item.id) {
+ // return {
+ // ...i,
+ // name: event.target.value,
+ // };
+ // }
+ // return i;
+ // });
+ // });
+ }}
+ placeholder={""}
+ />
+ setDropDownOptions((prev) => prev.filter((i) => i.id !== item.id))}
+ onClick={() =>
+ setDrawerState((prev) => ({
+ ...prev,
+ dropDownOptions: prev?.dropDownOptions.filter((i) => i.id !== item.id),
+ }))
+ }
+ style={{
+ cursor: "pointer",
+ fontWeight: "600",
+ marginLeft: "1rem",
+ fontSize: "1rem",
+ color: PRIMARY_COLOR,
+ display: "flex",
+ gap: "0.5rem",
+ alignItems: "center",
+ marginTop: "1rem",
+ }}
+ >
+
+
+
+ ))}
+
+
+ {type === "dynamic" && (
+
+ {!hideScrollIcon &&
}
+ {!hideArrow && (
+
+
+
+ )}
+
+ )}
+
+ {header && isOpen && (
+
+ {addClose && isOpen && (
+
+
+
+ )}
+ {header}
+
+ )}
+ {closedHeader && !isOpen &&
{closedHeader}
}
+
0 ? "with-sections" : ""}`}>
+ {isOpen
+ ? sections && sections?.length > 0
+ ? sections?.map((section, index) => (
+
+
+ {section}
+
+ {index < sections.length - 1 &&
}
+
+ ))
+ : children
+ : sections && sections?.length > 0
+ ? closedSections?.map((section, index) => (
+
+
+ {section}
+
+ {index < sections.length - 1 &&
}
+
+ ))
+ : closedContents}
+
+
+ {footer && isOpen &&
{footer}
}
+ {closedFooter && !isOpen &&
{closedFooter}
}
+
+