marco.pms.web/src/components/Project/Infrastructure/WorkItem.jsx

import React, { useState, useEffect } from "react";
import AssignRoleModel from "../AssignRole";
import { useParams } from "react-router-dom";
import EditActivityModal from "./EditActivityModal";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";

const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
  const { projectId } = useParams();
  const [itemName, setItemName] = useState("");
  const [NewWorkItem, setNewWorkItem] = useState();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const ManageTasks = useHasUserPermission(MANAGE_TASK);
  const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);
  const getProgress = (planned, completed) => {
    return (completed * 100) / planned + "%";
  };

  const handleAssignTask = () => {
    setItemName("");
  };

  useEffect(() => {
    setNewWorkItem(workItem);
  }, [workItem]);

  let assigndata = {
    building: forBuilding,
    floor: forFloor,
    workArea: forWorkArea,
    workItem,
  };

  const hasWorkItem = NewWorkItem && NewWorkItem;
  useEffect(() => {
    const tooltipTriggerList = Array.from(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
  }, []);

  const showModal1 = () => setShowModal(true);
  const closeModal1 = () => setShowModal(false);
  return (
    <>
      {isModalOpen && (
        <div
          className={`modal fade ${isModalOpen ? "show" : ""}`}
          tabIndex="-1"
          role="dialog"
          style={{ display: isModalOpen ? "block" : "none" }}
          aria-hidden={!isModalOpen}
        >
          <AssignRoleModel assignData={assigndata} onClose={closeModal} />
        </div>
      )}

      {showModal && <div
        className={`modal fade ${showModal ? "show" : ""}`}
        tabIndex="-1"
        role="dialog"
        style={{ display: showModal ? "block" : "none" }}
        aria-hidden={!showModal}
      >
        <EditActivityModal
          workItem={workItem}
          workArea={forWorkArea}
          building={forBuilding}
          floor={forFloor}
          onClose={closeModal1}
        />
      </div> }

      <tr>
        <td className="text-start table-cell-small">
          <i className="bx bx-right-arrow-alt"></i>
          <span className="fw-light">
            {hasWorkItem
              ? NewWorkItem?.workItem?.activityMaster?.activityName ||
                workItem.activityMaster?.activityName
              : "NA"}
          </span>
        </td>
        {/* for mobile view */}
        <td className="text-center d-sm-none d-sm-table-cell">
        {hasWorkItem
    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
    : "NA"}/{" "}
          {hasWorkItem
            ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
            : "NA"}
        </td>
        {/* for greather than mobile view ************* */}
        <td className="text-center d-none d-md-table-cell">
        {hasWorkItem
    ? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA"
    : "NA"}
        </td>
        <td className="text-center d-none d-md-table-cell">
        {hasWorkItem
    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
    : "NA"}
        </td>
        <td className="text-center" style={{ width: "15%" }}>
          <div className="progress p-0">
            <div
              className="progress-bar"
              role="progressbar"
              style={{
                width: getProgress(
                  NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                  NewWorkItem?.workItem?.completedWork ||
                    workItem?.completedWork
                ),
                height: "5px",
              }}
              aria-valuenow={NewWorkItem?.workItem?.completedWor}
              aria-valuemin="0"
              aria-valuemax={
                hasWorkItem
                  ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
                  : 0
              }
            ></div>
          </div>
        </td>
        <td className="d-md-table-cell">
          <div className="dropdown">
            {!projectId && ManageTasks && (
              <button
                aria-label="Modify"
                type="button"
                className="btn p-0"
                data-bs-toggle="modal"
                data-bs-target="#project-modal"
                onClick={openModal}
              >
                <span className="badge  badge-md bg-label-primary me-1">
                  Assign
                </span>
              </button>
            )}
            { ManageInfra && (
              <>
                <button
                  aria-label="Modify"
                  type="button"
                  className="btn p-0 dropdown-toggle hide-arrow"
                  onClick={showModal1}
                >
                  <i
                    className="bx bxs-edit me-2 text-primary"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="Edit Activity"
                    data-bs-original-title="Edit Activity"
                  ></i>
                </button>
                <button
                  aria-label="Delete"
                  type="button"
                  className="btn p-0 dropdown-toggle hide-arrow"
                  onClick={showModal1}
                >
                  <i
                    className="bx bx-trash me-1 text-danger"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="Delete Activity"
                    data-bs-original-title="Delete Activity"
                  ></i>
                </button>
              </>
            )}
          </div>
        </td>
      </tr>
    </>
  );
};

export default WorkItem;