Feature/demo checklist (#1414)

* ui changes preview screen and localisations * css updates * succes screen and code review changes --------- Co-authored-by: suryansh-egov <suryansh.singh.egovernments.org>
egovernments · Sep 30, 2024 · e7821da · e7821da
1 parent c948b76
commit e7821da
Show file tree

Hide file tree

Showing 12 changed files with 403 additions and 245 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
@@ -847,3 +847,109 @@ tbody {
     padding-bottom: 1rem;
 }
 
+.digit-employee-card .digit-label-field-pair h2
+{
+  width: auto;
+  font-size: larger; 
+}
+
+/* Mobile screen simulation */
+.mobile-screen {
+  width: 25rem; /* Mobile screen width */
+  height: 40rem; /* Mobile screen height */
+  border: 0.000rem solid #ccc;
+  border-radius: 1rem;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  margin: 20px auto;
+  font-family: Arial, sans-serif;
+}
+
+/* Top blue bar */
+.mobile-top-bar {
+  background-color: theme(digitv2.lightTheme.header-sidenav);
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  color: theme(digitv2.lightTheme.paper);
+  font-size: 1.5rem;
+  font-weight: theme(digitv2.fontWeight.bold);
+  width: 100%; /* Full width */
+  box-sizing: border-box;
+}
+
+/* Main container content */
+.mobile-container {
+  padding: 1.5rem; /* Add padding around the main content */
+  height: calc(100% - 50px); /* Adjust height to fill remaining space */
+  display: flex;
+  flex-direction: column; /* Stack children vertically */
+}
+
+/* Questions section */
+.mobile-questions {
+  flex: 1; /* Allow this section to grow and fill available space */
+  padding: 0.2rem; /* Add padding to questions */
+  overflow-y: auto; /* Enable vertical scrolling */
+  border: 1px solid #ccc; /* Optional: add a border */
+  border-radius: 1rem; /* Optional: rounded corners */
+}
+
+/* Header styling */
+.mobile-header h2 {
+  color: #555;
+  font-size: 0.875rem; /* 14px */
+  margin-bottom: 0.3125rem; /* 5px */
+}
+
+.mobile-header h1 {
+  font-size: 1.25rem; /* 20px */
+  color: #222;
+}
+
+.mobile-checklist-highlight {
+  font-weight: theme(digitv2.fontWeight.bold);
+  padding: 0 0.3125rem; /* 0 to 5px */
+}
+
+.mobile-description {
+  font-size: 0.75rem; /* 12px */
+  margin-top: 0.625rem; /* 10px */
+  margin-bottom: 1.25rem; /* 20px */
+  color: #777;
+}
+
+/* Question and answer styling */
+.mobile-questions .mobile-question-item {
+  border-bottom: 0.0625rem solid #ccc; /* 1px */
+  padding: 0.625rem 0; /* 10px */
+}
+
+.mobile-question {
+  font-weight: theme(digitv2.fontWeight.bold);
+  font-size: 0.875rem; /* 14px */
+}
+
+.mobile-answer {
+  font-size: 0.875rem; /* 14px */
+  margin-left: 0.625rem; /* 10px */
+}
+
+.custom-pop-up {
+  width: fit-content !important;
+  .digit-popup-footer {
+    .digit-popup-footer-buttons {
+      width: 100% !important;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      .digit-button-secondary {
+        width: 100%;
+      }
+      .digit-button-primary {
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
@@ -62,7 +62,7 @@ const CampaignModule = ({ stateCode, userType, tenants }) => {
 
   const hierarchyData = Digit.Hooks.campaign.useBoundaryRelationshipSearch({BOUNDARY_HIERARCHY_TYPE,tenantId});
 
-  const moduleCode = ["campaignmanager", "workbench", "mdms", "schema", "hcm-admin-schemas", `boundary-${BOUNDARY_HIERARCHY_TYPE}`];
+  const moduleCode = ["hr", "campaignmanager", "workbench", "mdms", "schema", "hcm-admin-schemas", `boundary-${BOUNDARY_HIERARCHY_TYPE}`];
   const { path, url } = useRouteMatch();
   const language = Digit.StoreData.getCurrentLanguage();
   const { isLoading, data: store } = Digit.Services.useStore({

diff --git a/...-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Checkboxes.js b/...-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Checkboxes.js
@@ -84,8 +84,8 @@ const Checkboxes = ({
       ))}
       <div>
       <Button
-        className="custom-class"
-        icon="MyLocation"
+        // className="custom-class"
+        icon="AddIcon"
         iconFill=""
         label={t("ADD_OPTIONS")}
         onClick={() => addOption()}
@@ -156,7 +156,7 @@ const CheckBoxOption = ({
             disabled={isPartiallyEnabled ? !isPartiallyEnabled : formDisabled}
           />
         </div>
-        <div style={{display:"flex", gap:"1rem"}}>
+        <div style={{display:"flex", gap:"1rem", alignItems:"center"}}>
           {
             <>
               <CheckBox
@@ -182,10 +182,21 @@ const CheckBoxOption = ({
             index={field.key}
           />} */}
           {!disableDelete && (
-            <div className="pointer" onClick={() => removeOption(index)}>
-              <DustbinIcon />
-              {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
-            </div>
+            // <div className="pointer" onClick={() => removeOption(index)}>
+            //   <DustbinIcon />
+            //   {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
+            // </div>
+            <Button
+              // className="custom-class"
+              icon="Delete"
+              iconFill=""
+              label={t(`DELETE`)}
+              onClick={()=>removeOption(index)}
+              size=""
+              style={{}}
+              title=""
+              variation="link"
+            />
           )}
         </div>
       </div>

diff --git a/...ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreatePopup.js b/...ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreatePopup.js
diff --git a/...web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestion.js b/...web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestion.js
@@ -330,14 +330,16 @@ const CreateQuestion = ({ onSelect, className, level = 1, initialQuestionData, p
   return (
     <React.Fragment>
       {initialQuestionData
-        ?.filter((i) => i.level === level)
+        ?.filter((i) => i.level === level && (i.parentId ? (i.parentId === parentId) : true))
         ?.map((field, index) => {
           return (
             <Card type={"primary"} variant={"form"} className={`question-card-container ${className}`}>
               <LabelFieldPair className="question-label-field" style={{ display: "block" }}>
                 <div className="question-label" style={{ height: "1.5rem", display: "flex", justifyContent: "space-between", width: "100%" }}>
-                  <span>{`${t("QUESTION")} ${index + 1}`}</span>
+                  <span style={{fontWeight:"700"}}>{`${t("QUESTION")} ${index + 1}`}</span>
                   {/* <span className="mandatory-span">*</span> */}
+                  <div style={{ height: "1rem" }}>
+                  </div>
                   {initialQuestionData?.length > 1 && (
                     <>
                       <div className="separator"></div>

diff --git a/...o-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Dropdowns.js b/...o-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Dropdowns.js
@@ -86,7 +86,7 @@ const Dropdowns = ({
       <div>
       <Button
         className="custom-class"
-        icon="MyLocation"
+        icon="AddIcon"
         iconFill=""
         label={t("ADD_OPTIONS")}
         onClick={() => addOption()}
@@ -140,7 +140,7 @@ const DropdownOption = ({
             placeholder={"Dropdown section"}
         />
         </div>
-        <div style={{display:"flex", gap:"1rem"}}>
+        <div style={{display:"flex", gap:"1rem", alignItems:"center"}}>
           {
             <>
               <CheckBox
@@ -174,10 +174,21 @@ const DropdownOption = ({
             </>
           }
           {!disableDelete && (
-            <div className="pointer"  onClick={() => removeOption(index)}>
-              <DustbinIcon />
-              {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
-            </div>
+            // <div className="pointer"  onClick={() => removeOption(index)}>
+            //   <DustbinIcon />
+            //   {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
+            // </div>
+            <Button
+              // className="custom-class"
+              icon="Delete"
+              iconFill=""
+              label={t(`DELETE`)}
+              onClick={()=>removeOption(index)}
+              size=""
+              style={{}}
+              title=""
+              variation="link"
+            />
           )}
         </div>
       </div>

diff --git a/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/MobileChecklist.js b/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/MobileChecklist.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const MobileChecklist = ({ questions, checklistName , typeOfChecklist}) => {
+  // Filter questions with parentId as null
+  const topLevelQuestions = questions.filter(q => q.parentId === null);
+
+  return (
+    <div className="mobile-screen">
+      <div className="mobile-top-bar">
+        <div className="mobile-menu-icon">&#9776;</div>
+      </div>
+
+      <div className="mobile-container">
+        <div className="mobile-header">
+          <h2 className='mobile-checklist-highlight'>{typeOfChecklist}</h2>
+          <h1 className="mobile-checklist-highlight">{checklistName}</h1>
+          <p className="mobile-description">
+          </p>
+        </div>
+
+        <div className="mobile-questions">
+          {topLevelQuestions.map(question => (
+            <div key={question.id} className="mobile-question-item">
+              <p className="mobile-question">{question.title}</p>
+              {question.options && question.options.length > 0 && (
+                <div className="mobile-options">
+                  {question.options.map((option, index) => (
+                    <p key={index} className="mobile-answer">{option.label}</p>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileChecklist;
diff --git a/...web/micro-ui-internals/packages/modules/campaign-manager/src/components/MultipleChoice.js b/...web/micro-ui-internals/packages/modules/campaign-manager/src/components/MultipleChoice.js
@@ -68,15 +68,22 @@ const MultipleChoice = ({
             onChange={(event) => addComment({value: event.target.value, target: "value", id: item.key, parentId: field.id})}
             placeholder={""}
           />}
-          {item.optionDependency && <CreateQuestion
-            className={subQclassName}
-            level={subQlevel}
-            parent={subQparent}
-            // parentId={subQparentId}
-            parentId={item.id}
-            initialQuestionData={subQinitialQuestionData} 
-            optionId={item.id} />
-          }
+          {item.optionDependency && (
+            <>
+              {/* JavaScript logic goes here */}
+
+
+              {/* JSX for rendering the component */}
+              <CreateQuestion
+                className={subQclassName}
+                level={subQlevel}
+                parent={item}
+                parentId={item.id}
+                initialQuestionData={subQinitialQuestionData}
+                optionId={item.id}
+              />
+            </>
+          )}
           {
             <hr style={{ width: "100%", borderTop: "1px solid #ccc" }} />
           }
@@ -85,7 +92,7 @@ const MultipleChoice = ({
       <div>
       <Button
         className="custom-class"
-        icon="MyLocation"
+        icon="AddIcon"
         iconFill=""
         label={t("ADD_OPTIONS")}
         onClick={() => addOption()}
@@ -144,7 +151,7 @@ export const RadioButtonOption = ({
             disabled={isPartiallyEnabled ? !isPartiallyEnabled : formDisabled}
           />
         </div>
-        <div style={{display:"flex", gap:"1rem"}}>
+        <div style={{display:"flex", gap:"1rem", alignItems:"center"}}>
           {
             <>
               <CheckBox
@@ -178,10 +185,21 @@ export const RadioButtonOption = ({
           </> 
           }
           {!disableDelete && (
-            <div className="pointer" style={{}} onClick={() => removeOption(index)}>
-              <DustbinIcon />
-              {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
-            </div>
+            // <div className="pointer" style={{}} onClick={() => removeOption(index)}>
+            //   <DustbinIcon />
+            //   {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
+            // </div>
+            <Button
+              // className="custom-class"
+              icon="Delete"
+              iconFill=""
+              label={t(`DELETE`)}
+              onClick={()=>removeOption(index)}
+              size=""
+              style={{}}
+              title=""
+              variation="link"
+            />
           )}
         </div>
       </div>