microplan quick fixes

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss

@@ -2687,4 +2687,12 @@ $border-color: rgba(214, 213, 212, 1);
 }
 .search-field-wrapper.search.custom-both-clear-search{
   align-items: center;
+}
+.microplan-response-button{
+  .icon-label-container{
+    .digit-button-label{
+      min-width: max-content;
+      min-width: max-content;
+    }
+  }
 }

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/Response.js

@@ -5,58 +5,56 @@ import { ActionBar, SubmitBar, ArrowLeft, ArrowForward } from "@egovernments/dig
 import { Button } from "@egovernments/digit-ui-components";
 import { PanelCard } from "@egovernments/digit-ui-components";
 const Response = () => {
-    const { t } = useTranslation();
-    const history = useHistory();
-    const queryStrings = Digit.Hooks.useQueryParams();
-    const [campaignId, setCampaignId] = useState(queryStrings?.campaignId);
-    const [isResponseSuccess, setIsResponseSuccess] = useState(
-        queryStrings?.isSuccess === "true" ? true : queryStrings?.isSuccess === "false" ? false : true
-    );
-    const { state } = useLocation();
-    const back=(state?.back)?state?.back:"BACK";
-    const backlink=(state?.backlink)?(state.backlink):"employee";
-    return (
-        <>
-            <PanelCard
-                animationProps={{
-                    loop: false,
-                    noAutoplay: false
-                }}
-                cardClassName=""
-                cardStyles={{}}
-                className=""
-                customIcon=""
-                description={t(state.description)}
-                // footerChildren={[
-                //     <Button label="OK" onClick={function noRefCheck() { }} type="button" />
-                // ]}
-                footerStyles={{}}
-                iconFill=""
-                info=""
-                maxFooterButtonsAllowed={5}
-                message={t(state?.message)}
-                multipleResponses={[]}
-                props={{}}
-                response={t(state?.fileName)}
-                sortFooterButtons
-                style={{}}
-                type="success"
-            >
+  const { t } = useTranslation();
+  const history = useHistory();
+  const queryStrings = Digit.Hooks.useQueryParams();
+  const [campaignId, setCampaignId] = useState(queryStrings?.campaignId);
+  const [isResponseSuccess, setIsResponseSuccess] = useState(
+    queryStrings?.isSuccess === "true" ? true : queryStrings?.isSuccess === "false" ? false : true
+  );
+  const { state } = useLocation();
+  const back = state?.back ? state?.back : "BACK";
 
-            </PanelCard>
-            <ActionBar className="mc_back">
-                <Link to={`/${window.contextPath}${backlink}`}>
-                    <Button
-                        style={{ margin: "0.5rem", minWidth: "10rem", marginLeft: "6rem" }}
-                        className="previous-button"
-                        variation="secondary"
-                        label={t(back)}
-                        icon={"ArrowBack"}
-                    />
-                </Link>
-            </ActionBar>
-        </>
-    );
+  return (
+    <>
+      <PanelCard
+        animationProps={{
+          loop: false,
+          noAutoplay: false,
+        }}
+        cardClassName=""
+        cardStyles={{}}
+        className=""
+        customIcon=""
+        description={t(state.description)}
+        // footerChildren={[
+        //     <Button label="OK" onClick={function noRefCheck() { }} type="button" />
+        // ]}
+        footerStyles={{}}
+        iconFill=""
+        info=""
+        maxFooterButtonsAllowed={5}
+        message={t(state?.message)}
+        multipleResponses={[]}
+        props={{}}
+        response={t(state?.fileName)}
+        sortFooterButtons
+        style={{}}
+        type="success"
+      ></PanelCard>
+      <ActionBar className="mc_back">
+        <Link to={state?.backlink ? state?.backlink : `/${window.contextPath}/employee/`}>
+          <Button
+            style={{ margin: "0.5rem", marginLeft: "6rem" }}
+            className="microplan-response-button"
+            variation="secondary"
+            label={t(back)}
+            icon={"ArrowBack"}
+          />
+        </Link>
+      </ActionBar>
+    </>
+  );
 };
 
 export default Response;

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js

@@ -8,6 +8,7 @@ import { useMyContext } from "../utils/context";
 import { useQueryClient } from "react-query";
 import { tableCustomStyle } from "./tableCustomStyle";
 import styled, { keyframes } from "styled-components";
+// import _ from "lodash";
 
 const rotate360 = keyframes`
   from {
@@ -31,7 +32,7 @@ const Spinner = styled.div`
   height: 80px;
   border-radius: 50%;
 `;
-function CustomLoader() {
+export function CustomLoader() {
   return (
     <div style={{ padding: "24px" }}>
       <Spinner />
@@ -294,7 +295,7 @@ function RoleTableComposer({ nationalRoles }) {
     });
   };
 
-  const handleUpdateAssignEmployee = (row) => {
+  const handleUpdateAssignEmployee = (row, updateAssignee) => {
     setIsLoading(true);
     const payload = {
       PlanEmployeeAssignment: {
@@ -339,11 +340,16 @@ function RoleTableComposer({ nationalRoles }) {
     {
       name: t("HIERARCHY"),
       cell: (row) => {
+        const isUserAlreadyAssignedActive =
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+            ? true
+            : false;
         return (
           <Dropdown
             className="roleTableCell"
             selected={rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedHierarchy || null}
-            disabled={nationalRoles?.includes(category) ? true : false}
+            disabled={isUserAlreadyAssignedActive || nationalRoles?.includes(category) ? true : false}
             isMandatory={true}
             option={state?.boundaryHierarchy.filter((item) => !(item.boundaryType === "Village" || item.boundaryType === "Country"))}
             select={(value) => {
@@ -359,20 +365,27 @@ function RoleTableComposer({ nationalRoles }) {
 
     {
       name: t("SELECTED_BOUNDARY"),
-      cell: (row) => (
-        <MultiSelectDropdown
-          disabled={nationalRoles?.includes(category) ? true : false}
-          props={{ className: "roleTableCell" }}
-          t={t}
-          options={rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.boundaryOptions || []}
-          optionsKey={"code"}
-          selected={rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedBoundaries || []}
-          onSelect={(value) => handleBoundaryChange(value, row)}
-          addCategorySelectAllCheck={true}
-          addSelectAllCheck={true}
-          variant="nestedmultiselect"
-        />
-      ),
+      cell: (row) => {
+        const isUserAlreadyAssignedActive =
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+            ? true
+            : false;
+        return (
+          <MultiSelectDropdown
+            disabled={isUserAlreadyAssignedActive || nationalRoles?.includes(category) ? true : false}
+            props={{ className: "roleTableCell" }}
+            t={t}
+            options={rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.boundaryOptions || []}
+            optionsKey={"code"}
+            selected={rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedBoundaries || []}
+            onSelect={(value) => handleBoundaryChange(value, row)}
+            addCategorySelectAllCheck={true}
+            addSelectAllCheck={true}
+            variant="nestedmultiselect"
+          />
+        );
+      },
     },
     {
       name: t("ACTION"),
@@ -384,11 +397,13 @@ function RoleTableComposer({ nationalRoles }) {
             ? true
             : false;
 
-        console.log(
-          "NABEELAYUBEE",
-          row,
-          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)
-        );
+        // const selectedBoundaries = rowData?.find((i) => i.employeeId === row.employeeId)?.selectedBoundaries?.map((i) => i?.code);
+        // const incomingBoundaries = HrmsData?.planSearchData.find((i) => i.employeeId === row.employeeId)?.jurisdiction;
+        // const selectedHierarchy = HrmsData?.planSearchData.find((i) => i.employeeId === row.employeeId)?.selectedHierarchy?.boundaryType;
+        // const incomingHierarchy = rowData?.find((i) => i.employeeId === row.employeeId)?.hierarchyLevel;
+        // const isHierarchyEqual = !incomingHierarchy ? true : _.isEqual(incomingHierarchy, selectedHierarchy);
+        // const isBoundaryEqual = !incomingBoundaries || incomingBoundaries?.length === 0 ? true : _.isEqual(incomingBoundaries, selectedBoundaries);
+
         return (
           <Button
             className={"roleTableCell"}

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js

@@ -1,7 +1,7 @@
 import { Button, Card, Chip, Header, Loader, NoResultsFound, PopUp, Toast } from "@egovernments/digit-ui-components";
 import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import RoleTableComposer from "./RoleTableComposer";
+import RoleTableComposer, { CustomLoader } from "./RoleTableComposer";
 import DataTable from "react-data-table-component";
 import { tableCustomStyle } from "./tableCustomStyle";
 import TableSearchField from "./TableSearchBar";
@@ -77,7 +77,7 @@ function UserAccess({ category, setData, nationalRoles }) {
             number: item?.user?.mobileNumber,
             hierarchyLevel: data?.planData?.find((i) => i?.employeeId === item?.user?.userServiceUuid)?.hierarchyLevel,
             jurisdiction: data?.planData?.find((i) => i?.employeeId === item?.user?.userServiceUuid)?.jurisdiction,
-            planData: data?.planData?.find((i) => i?.employeeId === item?.user?.userServiceUuid)
+            planData: data?.planData?.find((i) => i?.employeeId === item?.user?.userServiceUuid),
           };
         });
         return {
@@ -208,7 +208,7 @@ function UserAccess({ category, setData, nationalRoles }) {
         return (
           <Button
             className={"roleTableCell"}
-            variation={"secondary" }
+            variation={"secondary"}
             label={t(`UNASSIGN`)}
             icon={"Close"}
             isSuffix={false}
@@ -220,13 +220,11 @@ function UserAccess({ category, setData, nationalRoles }) {
   ];
 
   const handleSearch = (query) => {
-    if(query?.length >= 2 ){
+    if (query?.length >= 2) {
       setSearchQuery(query);
-    }
-    else {
+    } else {
       setSearchQuery(null);
     }
-
     // Handle search logic, such as filtering or API calls
   };
 
@@ -237,20 +235,23 @@ function UserAccess({ category, setData, nationalRoles }) {
         <p className="mp-description">{t(`${category}_DESCRIPTION`)}</p>
       </Card>
 
-      {planEmployee?.data?.length > 0 ? (
-        <Card>
-          <div style={styles.container}>
-            <TableSearchField 
-            onSearch={handleSearch}
-            />
-            <Button variation="secondary" label={t(`ASSIGN`)} icon={"AddIcon"} onClick={() => setShowPopUp(true)} />
-          </div>
+      <Card>
+        <div style={styles.container}>
+          <TableSearchField onSearch={handleSearch} />
+          <Button variation="secondary" label={t(`ASSIGN`)} icon={"AddIcon"} onClick={() => setShowPopUp(true)} />
+        </div>
+        {!isPlanEmpSearchLoading && (!planEmployee?.data || planEmployee?.data?.length === 0) ? (
+          <Card>
+            <NoResultsFound />
+            <Button variation="secondary" label={t(`ASSIGN`)} style={{ margin: "auto" }} icon={"AddIcon"} onClick={() => setShowPopUp(true)} />
+          </Card>
+        ) : (
           <DataTable
             category={category}
             columns={columns}
             data={planEmployee?.data}
-            progressPending={isLoading || isPlanEmpSearchLoading}
-            progressComponent={<Loader />}
+            progressPending={isPlanEmpSearchLoading}
+            progressComponent={<CustomLoader />}
             pagination
             paginationServer
             customStyles={tableCustomStyle}
@@ -260,13 +261,8 @@ function UserAccess({ category, setData, nationalRoles }) {
             paginationPerPage={rowsPerPage}
             paginationRowsPerPageOptions={[5, 10, 15, 20]}
           />
-        </Card>
-      ) : (
-        <Card>
-          <NoResultsFound />
-          <Button variation="secondary" label={t(`ASSIGN`)} style={{ margin: "auto" }} icon={"AddIcon"} onClick={() => setShowPopUp(true)} />
-        </Card>
-      )}
+        )}
+      </Card>
 
       {showPopUp && (
         <PopUp
@@ -298,15 +294,15 @@ function UserAccess({ category, setData, nationalRoles }) {
 
 const styles = {
   container: {
-    display: 'flex',
-    justifyContent: 'space-between', // Ensures space between search and button
-    alignItems: 'center',
-    width: '100%',
-    padding: '8px', // Optional padding for layout
+    display: "flex",
+    justifyContent: "space-between", // Ensures space between search and button
+    alignItems: "center",
+    width: "100%",
+    padding: "8px", // Optional padding for layout
   },
   buttonContainer: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
+    display: "flex",
+    flexDirection: "row-reverse",
   },
 };