admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'pramod_Task#186DeleteActivity' into Issue_May_2W

Browse Source 
# Conflicts:
#	src/data/menuData.json
This commit is contained in:
Vikas Nale 2025-05-07 17:31:50 +05:30
commit ef2fdf899c
16 changed files with 542 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Activities/InfraPlanning.jsx
View File

@ -52,49 +52,7 @@ const InfraPlanning = () =>
))}
</select>
</div>
{/* <div className={`col-12 text-end mb-1 ${!ManageInfra && 'd-none'} `} >
<button
type="button"
className="link-button link-button-sm m-1 "
data-bs-toggle="modal"
data-bs-target="#building-model"
// onClick={() => openBuildingModel()}
>
<i className="bx bx-plus-circle me-2"></i>
Manage Building
</button>
<button
type="button"
data-bs-toggle="modal"
className="link-button m-1"
data-bs-target="#floor-model"
// onClick={() => openFloorModel()}
>
<i className="bx bx-plus-circle me-2"></i>
Manage Floors
</button>
<button
type="button"
data-bs-toggle="modal"
className="link-button m-1"
data-bs-target="#work-area-model"
// onClick={() => openWorkAreaModel()}
>
<i className="bx bx-plus-circle me-2"></i>
Manage Work Areas
</button>
<button
type="button"
data-bs-toggle="modal"
className="link-button m-1"
data-bs-target="#task-model"
// onClick={() => openTaskModel()}
>
<i className="bx bx-plus-circle me-2"></i>
Manage Tasks
</button>
</div> */}
</div>
<div className="row ">
{project_deatilsLoader && ( <p>Loading...</p> )}

18
src/components/Project/Infrastructure/EditActivityModal.jsx
View File

@ -47,7 +47,8 @@ const EditActivityModal = ({
completedWork: 0,
};
const { projects_Details, refetch } = useProjectDetails(selectedProject);
const {projects_Details, refetch} = useProjectDetails( selectedProject );
const [ActivityUnit,setActivityUnit]= useState("")
const { activities, loading, error } = useActivitiesMaster();
const [formData, setFormData] = useState(defaultModel);
const [selectedActivity, setSelectedActivity] = useState(null);
@ -170,9 +171,14 @@ const EditActivityModal = ({
const ISselectedActivity = watch("activityID");
useEffect(() => {
const selected = activities.find((a) => a.id === ISselectedActivity);
setSelectedActivity(selected || null);
}, [ISselectedActivity]);
if( ISselectedActivity ){
const selected = activities.find((a) => a.id === ISselectedActivity);
setSelectedActivity( selected || null );
setActivityUnit(selected?.unitOfMeasurement)
}
}, [ ISselectedActivity,activities] );
return (
<div className="modal-dialog modal-lg modal-simple modal-edit-user">
<div className="modal-content">
@ -257,7 +263,7 @@ const EditActivityModal = ({
{activity.activityName}
</option>
))}
{!loading && activityData.length === 0 && (
{!loading && activities.length === 0 && (
<option disabled>No activities available</option>
)}
</select>
@ -320,7 +326,7 @@ const EditActivityModal = ({
{/* )} */}
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
<button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0}>
{isSubmitting ? "Please Wait.." : "Edit Task"}
</button>
<button

2
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -205,7 +205,7 @@ const FloorModel = ({
{formData.buildingId !== "0" && (
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="floorName">
<label className="form-label" >
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name
</label>
<input

2
src/components/Project/Infrastructure/InfraTable.jsx
View File

@ -68,7 +68,7 @@ const InfraTable = ({ buildings }) => {
showToast("Failed to save floor", "error");
}
} catch (err) {
console.error("Error adding floor", err);
showToast("Error occurred while saving floor", "error");
}
};

4
src/components/Project/Infrastructure/WorkArea.jsx
View File

@ -29,7 +29,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<span className="fw-semibold text-primary">
Floor:&nbsp;
</span>{" "}
<span class="fw-normal text-darkgreen">
<span className="fw-normal text-darkgreen">
{floor.floorName}
</span>
</div>
@ -37,7 +37,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<span className="ms-10 fw-semibold text-primary">
Work Area:&nbsp;
</span>{" "}
<span class=" fw-normal text-darkgreen">
<span className=" fw-normal text-darkgreen">
{workArea.areaName}
</span>
</div>

100
src/components/Project/Infrastructure/WorkItem.jsx
View File

@ -5,14 +5,28 @@ import EditActivityModal from "./EditActivityModal";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from '../../../repositories/ProjectRepository'
import {useProjectDetails} from '../../../hooks/useProjects'
import showToast from "../../../services/toastService";
import {cacheData, getCachedData} from "../../../slices/apiDataManager";
import {useDispatch} from "react-redux";
import {refreshData} from "../../../slices/localVariablesSlice";
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 [ showModal, setShowModal ] = useState( false );
const [showModal2, setShowModal2] = useState(false);
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA );
const [ loadingDelete, setLoadingDelete ] = useState( false )
const project = getCachedData("projectInfo");
const dispatch = useDispatch()
const {projects_Details} = useProjectDetails(projectId || project?.projectId)
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
@ -41,10 +55,75 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
}, [] );
const showModal1 = () => setShowModal(true);
const closeModal1 = () => setShowModal(false);
const closeModal1 = () => setShowModal( false );
const showModalDelete = () => setShowModal2(true);
const closeModalDelete = () => setShowModal2( false );
const handleSubmit = async() => {
setLoadingDelete(true);
try
{
const updatedProject = { ...projects_Details };
const response = await ProjectRepository.deleteProjectTask( workItem.workItemId );
debugger
const newProject = {
...updatedProject,
buildings: updatedProject.buildings.map((building) =>
building.id === forBuilding?.id
? {
...building,
floors: building.floors.map((floor) =>
floor.id === forFloor?.id
? {
...floor,
workAreas: floor.workAreas.map((workArea) =>
workArea.id === forWorkArea?.id
? {
...workArea,
workItems: workArea.workItems.filter(
(item) =>
String(item?.workItem?.id ?? item?.id) !==
String(workItem.workItemId)
),
}
: workArea
),
}
: floor
),
}
: building
),
};
cacheData("projectInfo", {
projectId: newProject.id,
data: newProject,
});
dispatch( refreshData( true ) );
closeModalDelete()
setLoadingDelete(false)
showToast("Activity Deleted Successfully","success")
} catch ( error )
{
setLoadingDelete( false )
closeModalDelete()
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast( message, "error" );
}
};
return (
<>
{isModalOpen && (
@ -73,6 +152,17 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
floor={forFloor}
onClose={closeModal1}
/>
</div>}
{showModal2 && <div
className={`modal fade ${showModal2 ? "show" : ""}`}
tabIndex="-1"
role="dialog"
style={{ display: showModal2 ? "block" : "none" }}
aria-hidden='false'
>
<ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/>
</div> }
<tr>
@ -164,7 +254,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
aria-label="Delete"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={showModal1}
onClick={showModalDelete}
>
<i
className="bx bx-trash me-1 text-danger"

34
src/components/common/ActivityDropdown.jsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import useSelect from "../common/useSelect"; // your custom hook
const ActivityDropdown = ({ options, value, onChange, register, error }) => {
const selectRef = useSelect({ minimumResultsForSearch: 5 });
return (
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="activityID">
Select Activity
</label>
<select
id="activityID"
name="activityID"
ref={selectRef}
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("activityID", { valueAsNumber: true })}
value={value}
onChange={onChange}
>
<option value="0">Select Activity</option>
{options.map((activity) => (
<option key={activity.id} value={activity.id}>
{activity.activityName}
</option>
))}
</select>
{error && <p className="danger-text">{error.message}</p>}
</div>
);
};
export default ActivityDropdown;

77
src/components/common/ConfirmModal.jsx Normal file
View File

@ -0,0 +1,77 @@
import React, { useState } from 'react';
const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
const TypeofIcon = (type) => {
switch (type) {
case "delete":
return <i className='bx bx-x-circle text-danger ' style={{fontSize:"60px"}} ></i>;
default:
return null;
}
};
const TypeofModal = (type) => {
switch (type) {
case "delete":
return "sm";
case "other":
return "md";
default:
return "sm"; // Return a default modal size
}
};
return (
<div className={`modal-dialog modal-${TypeofModal(type)} modal-simple modal-confirm`}>
<div className='modal-dialog modal-dialog-centered'>
<div className="modal-content">
<div className="modal-body">
<div className="row">
<div className="text-start mb-1">
<div className=' d-flex justify-content-between mb-4'>
{header && < strong className='mb-0 font-weight-bold'>{header }</strong>}
<button
type="button"
className="btn-close"
aria-label="Close"
onClick={onClose}
/>
</div>
<div className='row'>
<div className='col-4 col-sm-2'> {TypeofIcon(type)}</div>
<div className='col-8 col-sm-10 py-sm-2 py-1 text-sm-end'>
<span className='fs-6 text'>{message}</span>
<div className='d-flex justify-content-center mt-4'>
<button
className='btn btn-primary btn-sm'
onClick={onSubmit}
disabled={loading}
>
{loading ? "Please Wait..." : "Yes"}
</button>
<button
className='btn btn-secondary ms-4 btn-sm'
onClick={onClose}
disabled={loading}
>
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ConfirmModal;

42
src/components/common/GlobalModal/CommentEditor.css Normal file
View File

@ -0,0 +1,42 @@
.marco-quill-wrapper {
border: 1px solid #dcdfe4;
border-radius: 6px;
background: #fff;
padding: 4px;
font-family: "Segoe UI", sans-serif;
position: absolute;
bottom: 0;
}
/* Style the toolbar */
.marco-quill-wrapper .ql-toolbar {
border: none;
padding: 4px 8px;
background: #f4f5f7;
border-bottom: 1px solid #dcdfe4;
border-radius: 6px 6px 0 0;
}
/* Style the editor */
.marco-quill-wrapper .ql-container {
border: none;
}
.jira-quill-wrapper .ql-editor {
min-height: 100px;
padding: 8px;
font-size: 14px;
line-height: 1.6;
}
/* Optional: Customize hover/focus */
.marco-quill-wrapper .ql-toolbar button:hover {
background-color: #ebecf0;
}
.marco-quill-wrapper .ql-toolbar button.ql-active {
background-color: #d2e0f7;
}
.marco-quill-wrapper .quill{
padding: 0px;
}

54
src/components/common/GlobalModal/CommentEditor.jsx Normal file
View File

@ -0,0 +1,54 @@
// src/components/CommentEditor.jsx
import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Core styling
import "./CommentEditor.css"; // Custom styles
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
["link"],
["clean"],
],
};
const formats = [
"header",
"bold",
"italic",
"underline",
"list",
"bullet",
"link",
];
const CommentEditor = () => {
const [value, setValue] = useState("");
const handleSubmit = () => {
console.log("Comment:", value);
// Submit or handle content
};
return (
<div className="comment-editor">
<ReactQuill
theme="snow"
value={value}
onChange={setValue}
modules={modules}
formats={formats}
placeholder="Add a comment..."
/>
<div className="editor-footer">
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
Add Comment
</button>
</div>
</div>
);
};
export default CommentEditor;

174
src/components/common/GlobalModal/CreateIssue.jsx Normal file
View File

@ -0,0 +1,174 @@
import React,{useState} from "react";
import CommentEditor from "./CommentEditor";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "./CommentEditor.css";
const jiraModules = {
toolbar: [
["bold", "italic", "underline", "strike"],
["link", "code"],
[{ list: "bullet" }],
],
};
const jiraFormats = [
"bold",
"italic",
"underline",
"strike",
"link",
"code",
"list",
];
const CreateIssue = () =>
{
const [value, setValue] = useState("");
return (
<from >
<div className="row">
<div className="col-12 col-md-8">
<div className="row">
<label for="defaultFormControlInput" class="form-label ">
Name
</label>
<input
type="text"
class="form-control form-control-sm"
id="defaultFormControlInput"
placeholder="John Doe"
aria-describedby="defaultFormControlHelp"
/>
</div>
<div className="row my-md-6 my-4 px-0">
<div className="col-6 ps-0">
<label for="defaultFormControlInput" class="form-label ">
Projec
</label>
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label=""
>
<option>Project-2</option>
<option>Project-2</option>
<option>Project-3</option>
</select>
</div>
<div className="col-6 pe-0">
<label for="defaultFormControlInput" class="form-label ">
Type
</label>
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label=""
>
<option>Project-2</option>
<option>Project-2</option>
<option>Project-3</option>
</select>
</div>
</div>
<div className="row my-md-6 my-4 px-0">
<div className="col-6 ps-0">
<label for="defaultFormControlInput" class="form-label ">
Status
</label>
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label=""
>
<option>Project-2</option>
<option>Project-2</option>
<option>Project-3</option>
</select>
</div>
<div className="col-6 pe-0">
<label for="defaultFormControlInput" class="form-label ">
Activity
</label>
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label=""
>
<option>Project-2</option>
<option>Project-2</option>
<option>Project-3</option>
</select>
</div>
</div>
</div>
<div className="col-12 col-md-4">
<div class="row g-2">
<label for="defaultFormControlInput" class="form-label ">
Priority
</label>
<div class="col-md-4 mt-0">
<div class="form-check custom-option custom-option-icon p-2">
<label class="form-check-label custom-option-content" for="customRadioIcon1">
<input
name="customRadioIcon"
class="form-check-input form-check-input-sm"
type="radio"
id="customRadioIcon1"
checked
/> Low
</label>
</div>
</div>
<div class="col-md-4 mt-0">
<div class="form-check custom-option custom-option-icon p-2">
<label class="form-check-label custom-option-content" for="customRadioIcon2">
<input
name="customRadioIcon"
class="form-check-input form-check-input-sm"
type="radio"
id="customRadioIcon2"
/> Medium
</label>
</div>
</div>
<div class="col-md-4 mt-0">
<div class="form-check custom-option custom-option-icon p-2">
<label class="form-check-label custom-option-content" for="customRadioIcon3">
<input
name="customRadioIcon"
class="form-check-input form-check-input-sm"
type="radio"
id="customRadioIcon3"
/> High
</label>
</div>
</div>
</div>
</div>
<div className="marco-quill-wrapper">
<ReactQuill
theme="snow"
value={value}
onChange={setValue}
placeholder="Add a comment..."
modules={jiraModules}
formats={jiraFormats}
/>
</div>
</div>
</from>
);
};
export default CreateIssue;

32
src/components/common/useSelect.js Normal file
View File

@ -0,0 +1,32 @@
import { useEffect, useRef } from "react";
const useSelect= (selector, options = {}) => {
const selectRef = useRef(null);
useEffect(() => {
const $ = window.$;
const node = selectRef.current;
if (!node || !$.fn.select2) return;
const $select = $(node);
if (!$select.hasClass("select2-hidden-accessible")) {
$select.select2({
width: "100%",
dropdownAutoWidth: true,
...options,
});
}
return () => {
if ($select.hasClass("select2-hidden-accessible")) {
$select.select2("destroy");
}
};
}, [options]);
return selectRef;
};
export default useSelect;

4
src/components/master/CreateActivity.jsx
View File

@ -204,7 +204,7 @@ const CreateActivity = ({ onClose }) => {
onClick={() => removeChecklistItem(index)}
className="btn btn-xs btn-icon btn-text-secondary"
>
<i class="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
title="Remove Check"
data-bs-original-title="Remove check"></i>
</button>
@ -219,7 +219,7 @@ const CreateActivity = ({ onClose }) => {
className="btn btn-xs btn-primary mt-2"
onClick={addChecklistItem}
>
<i class="bx bx-plus-circle" data-bs-toggle="tooltip"
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
title="Add Check"
data-bs-original-title="Add check" ></i>
</button>

16
src/pages/Activities/TaskPlannng.jsx
View File

@ -9,6 +9,7 @@ import { useProfile } from "../../hooks/useProfile";
import { useDispatch, useSelector } from "react-redux";
import { useProjectDetails, useProjects } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice";
import showToast from "../../services/toastService";
const TaskPlannng = () => {
const { profile } = useProfile();
@ -22,6 +23,7 @@ const TaskPlannng = () => {
(store) => store.localVariables.projectId
);
const [project, setProject] = useState(null);
const [projectDetails, setProjectDetails] = useState(null);
const [activities, setActivities] = useState(null);
@ -66,14 +68,22 @@ const TaskPlannng = () => {
});
})
.catch((error) => {
console.error(error);
setError("Failed to fetch data.");
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast( message, "error" );
});
} else {
setProjectDetails(project_cache);
}
} catch (err) {
setError("Failed to fetch data.");
setError( "Failed to fetch data." );
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast( message, "error" );
} finally {
setLoading(false);
}

2
src/pages/master/MasterTable.jsx
View File

@ -83,7 +83,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
currentItems.map((item, index) => (
<tr key={index}>
<td style={{ width: "20px" }}>
<i class="bx bx-right-arrow-alt"></i>
<i className="bx bx-right-arrow-alt"></i>
</td>
{updatedColumns.map((col) => (
<td className="text-start mx-2" key={col.key}>

3
src/repositories/ProjectRepository.jsx
View File

@ -16,7 +16,8 @@ const ProjectRepository = {
manageProjectAllocation: ( data ) => api.post( "/api/project/allocation", data ),
manageProjectInfra: (data) => api.post("/api/project/manage-infra", data),
manageProjectTasks: (data) => api.post("/api/project/task", data),
manageProjectTasks: ( data ) => api.post( "/api/project/task", data ),
deleteProjectTask:(id)=> api.delete(`/api/project/task/${id}`),
updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
deleteProject: (id) => api.delete(`/projects/${id}`),