Adding Filter Icon on Daily Progress Report and performing a filteration according to building, floor and activity.
This commit is contained in:
parent
655db6ac74
commit
1d6db6089f
@ -56,9 +56,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
if (!firstRender.current && containerRef.current) {
|
||||
containerRef.current.scrollTop = containerRef.current.scrollHeight;
|
||||
} else {
|
||||
firstRender.current = false;
|
||||
firstRender.current = false;
|
||||
}
|
||||
}, [comments]);
|
||||
}, [comments]);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
let sendComment = {
|
||||
@ -69,11 +69,11 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
try {
|
||||
setloading(true);
|
||||
const resp = await TasksRepository.taskComments(sendComment);
|
||||
|
||||
|
||||
setComment((prevItems) => [...prevItems, resp.data]);
|
||||
|
||||
const taskList = getCachedData("taskList");
|
||||
|
||||
|
||||
if (taskList && taskList.data) {
|
||||
const updatedTaskList = taskList.data.map((task) => {
|
||||
if (task.id === resp.data.taskAllocationId) {
|
||||
@ -87,14 +87,14 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
}
|
||||
return task;
|
||||
});
|
||||
|
||||
|
||||
cacheData("taskList", {
|
||||
data: updatedTaskList,
|
||||
projectId: taskList.projectId,
|
||||
projectId: taskList.projectId,
|
||||
});
|
||||
}
|
||||
|
||||
reset();
|
||||
reset();
|
||||
setloading(false);
|
||||
showToast("Successfully Sent", "success");
|
||||
} catch (error) {
|
||||
@ -134,7 +134,16 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
</p>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Loaction :
|
||||
Reported By :
|
||||
<span className=" ms-2"> -
|
||||
{/* {commentsData?.assignedBy?.firstName +
|
||||
" " +
|
||||
commentsData?.assignedBy?.lastName} */}
|
||||
</span>{" "}
|
||||
</p>
|
||||
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Location :
|
||||
<span className="fw-normal ms-2 text-start">
|
||||
{`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
|
||||
<i className="bx bx-chevron-right"></i>{" "}
|
||||
@ -146,11 +155,19 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
</span>
|
||||
</p>
|
||||
<p className="fw-bold my-2 text-start">
|
||||
Planned Work: {commentsData?.plannedTask}
|
||||
Planned Work: {commentsData?.plannedTask}{" "}
|
||||
{
|
||||
commentsData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</p>
|
||||
<p className="fw-bold my-2 text-start">
|
||||
{" "}
|
||||
Completed Work : {commentsData?.completedTask}
|
||||
Completed Work : {commentsData?.completedTask}{" "}
|
||||
{
|
||||
commentsData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</p>
|
||||
<div className="d-flex align-items-center flex-wrap">
|
||||
<p className="fw-bold text-start m-0 me-1">Team :</p>
|
||||
@ -196,12 +213,12 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
|
||||
|
||||
<ul
|
||||
className="list-group px-0 mx-0 overflow-auto border-0"
|
||||
ref={containerRef}
|
||||
ref={containerRef}
|
||||
>
|
||||
{comments &&
|
||||
comments
|
||||
?.slice()
|
||||
.reverse()
|
||||
.reverse()
|
||||
.map((data, idx) => {
|
||||
const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
|
||||
return (
|
||||
|
||||
240
src/components/common/FilterIcon.jsx
Normal file
240
src/components/common/FilterIcon.jsx
Normal file
@ -0,0 +1,240 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => {
|
||||
// State for filters, now managed within FilterIcon
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding);
|
||||
const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors);
|
||||
const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities);
|
||||
|
||||
// Update internal state when props change (e.g., project selection in DailyTask clears filters)
|
||||
useEffect(() => {
|
||||
setSelectedBuilding(currentSelectedBuilding);
|
||||
setSelectedFloors(currentSelectedFloors);
|
||||
setSelectedActivities(currentSelectedActivities);
|
||||
}, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
|
||||
|
||||
// Helper to get unique values for filters based on current selections
|
||||
const getUniqueFilterValues = (key) => {
|
||||
if (!taskListData) return [];
|
||||
let relevantTasks = taskListData;
|
||||
|
||||
// Filter tasks based on selected building for floors and activities
|
||||
if (selectedBuilding) {
|
||||
relevantTasks = relevantTasks.filter(task =>
|
||||
task?.workItem?.workArea?.floor?.building?.name === selectedBuilding
|
||||
);
|
||||
}
|
||||
|
||||
// Filter tasks based on selected floors for activities
|
||||
if (selectedFloors.length > 0) {
|
||||
relevantTasks = relevantTasks.filter(task =>
|
||||
selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
||||
);
|
||||
}
|
||||
|
||||
const values = relevantTasks.map(task => {
|
||||
if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name;
|
||||
if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName;
|
||||
if (key === 'activity') return task?.workItem?.activityMaster?.activityName;
|
||||
return null;
|
||||
}).filter(Boolean); // Remove null or undefined values
|
||||
return [...new Set(values)].sort(); // Sort for consistent order
|
||||
};
|
||||
|
||||
const uniqueBuildings = getUniqueFilterValues('building');
|
||||
const uniqueFloors = getUniqueFilterValues('floor');
|
||||
const uniqueActivities = getUniqueFilterValues('activity');
|
||||
|
||||
// Handle filter selection with dependency logic
|
||||
const handleFilterChange = (filterType, value) => {
|
||||
let newSelectedBuilding = selectedBuilding;
|
||||
let newSelectedFloors = [...selectedFloors];
|
||||
let newSelectedActivities = [...selectedActivities];
|
||||
|
||||
if (filterType === 'building') {
|
||||
if (selectedBuilding !== value) {
|
||||
newSelectedFloors = [];
|
||||
newSelectedActivities = [];
|
||||
}
|
||||
newSelectedBuilding = value;
|
||||
} else if (filterType === 'floor') {
|
||||
newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value];
|
||||
if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) {
|
||||
newSelectedActivities = [];
|
||||
}
|
||||
} else if (filterType === 'activity') {
|
||||
newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
|
||||
}
|
||||
|
||||
setSelectedBuilding(newSelectedBuilding);
|
||||
setSelectedFloors(newSelectedFloors);
|
||||
setSelectedActivities(newSelectedActivities);
|
||||
|
||||
// Communicate the updated filter states back to the parent
|
||||
onApplyFilters({
|
||||
selectedBuilding: newSelectedBuilding,
|
||||
selectedFloors: newSelectedFloors,
|
||||
selectedActivities: newSelectedActivities,
|
||||
});
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSelectedBuilding('');
|
||||
setSelectedFloors([]);
|
||||
setSelectedActivities([]);
|
||||
// Communicate cleared filters back to the parent
|
||||
onApplyFilters({
|
||||
selectedBuilding: '',
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
id="filterDropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa-solid fa-filter bx-sm "></i>
|
||||
|
||||
</a>
|
||||
<ul
|
||||
className="dropdown-menu p-2"
|
||||
aria-labelledby="filterDropdown"
|
||||
style={{
|
||||
minWidth: "360px",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
// Prevent dropdown from closing when clicking inside it
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Building Filter - Now a Dropdown */}
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Building</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedBuilding}
|
||||
onChange={(e) => handleFilterChange("building", e.target.value)}
|
||||
>
|
||||
<option value="">Select Building</option>
|
||||
{uniqueBuildings.length > 0 ? (
|
||||
uniqueBuildings.map((building, idx) => (
|
||||
<option key={`building-option-${idx}`} value={building}>
|
||||
{building}
|
||||
</option>
|
||||
))
|
||||
) : (
|
||||
<option value="" disabled>No buildings available</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Floor Filter - Visible only if a building is selected */}
|
||||
{selectedBuilding && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Floor</div>
|
||||
<div className="row">
|
||||
{uniqueFloors.length > 0 ? (
|
||||
uniqueFloors.map((floor, idx) => (
|
||||
<div className="col-6" key={`floor-${idx}`}>
|
||||
<div className="form-check mb-1">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`floor-${floor}`}
|
||||
checked={selectedFloors.includes(floor)}
|
||||
onChange={() => handleFilterChange("floor", floor)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`floor-${floor}`}
|
||||
>
|
||||
{floor}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-muted">No floors for selected building.</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Activity Filter - Visible only if a floor is selected */}
|
||||
{selectedFloors.length > 0 && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div className="fw-bold text-dark mb-1">Activity</div>
|
||||
<div className="row">
|
||||
{uniqueActivities.length > 0 ? (
|
||||
uniqueActivities.map((activity, idx) => (
|
||||
<div className="col-6" key={`activity-${idx}`}>
|
||||
<div className="form-check mb-1">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`activity-${activity}`}
|
||||
checked={selectedActivities.includes(activity)}
|
||||
onChange={() => handleFilterChange("activity", activity)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`activity-${activity}`}
|
||||
>
|
||||
{activity}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-12 text-muted">No activities for selected floor(s).</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Clear Filters */}
|
||||
{(selectedBuilding ||
|
||||
selectedFloors.length > 0 ||
|
||||
selectedActivities.length > 0) && (
|
||||
<>
|
||||
<li>
|
||||
<hr className="my-1" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item text-danger px-2 py-1"
|
||||
style={{ fontSize: "13px" }}
|
||||
onClick={clearAllFilters}
|
||||
>
|
||||
Clear All Filters
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterIcon;
|
||||
@ -1,47 +1,48 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { dailyTask } from "../../data/masters";
|
||||
import { useTaskList } from "../../hooks/useTasks";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
// import { formatDate } from "../../utils/dateUtils"; // Removed this import
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import AssignRoleModel from "../../components/Project/AssignRole";
|
||||
import { ReportTask } from "../../components/Activities/ReportTask";
|
||||
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import DatePicker from "../../components/common/DatePicker";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
|
||||
|
||||
const DailyTask = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const projectId = searchParams.get("project");
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const projectIdFromUrl = searchParams.get("project");
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const {
|
||||
projects,
|
||||
loading: project_lodaing,
|
||||
loading: project_loading,
|
||||
error: projects_Error,
|
||||
} = useProjects();
|
||||
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// State for filters (moved to FilterIcon, but we need to receive them here)
|
||||
const [filters, setFilters] = useState({
|
||||
selectedBuilding: '',
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
|
||||
// Sync projectId (either from URL or pick first accessible one)
|
||||
useEffect(() => {
|
||||
if (!project_lodaing && projects.length > 0 && !initialized) {
|
||||
if (selectedProject === 1 || selectedProject === undefined) {
|
||||
if (!project_loading && projects.length > 0 && !initialized) {
|
||||
if (projectIdFromUrl) {
|
||||
dispatch(setProjectId(projectIdFromUrl));
|
||||
} else if (selectedProject === 1 || selectedProject === undefined) {
|
||||
dispatch(setProjectId(projects[0].id));
|
||||
}
|
||||
|
||||
setInitialized(true);
|
||||
}
|
||||
}, [project_lodaing, projects, projectId, selectedProject, initialized]);
|
||||
}, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]);
|
||||
|
||||
const dispatch = useDispatch(selectedProject);
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
|
||||
const {
|
||||
@ -59,9 +60,30 @@ const DailyTask = () => {
|
||||
const [dates, setDates] = useState([]);
|
||||
const popoverRefs = useRef([]);
|
||||
|
||||
// Effect to apply filters (now using filters from FilterIcon)
|
||||
useEffect(() => {
|
||||
setTaskLists(TaskList);
|
||||
}, [TaskList, selectedProject]);
|
||||
let filteredTasks = TaskList;
|
||||
|
||||
if (filters.selectedBuilding) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.selectedFloors.length > 0) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.selectedActivities.length > 0) {
|
||||
filteredTasks = filteredTasks.filter(task =>
|
||||
filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName)
|
||||
);
|
||||
}
|
||||
|
||||
setTaskLists(filteredTasks);
|
||||
}, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]); // Depend on filters state
|
||||
|
||||
useEffect(() => {
|
||||
const AssignmentDates = [
|
||||
@ -81,26 +103,37 @@ const DailyTask = () => {
|
||||
|
||||
const openComment = () => setIsModalOpenComment(true);
|
||||
const closeCommentModal = () => setIsModalOpenComment(false);
|
||||
|
||||
const handletask = (task) => {
|
||||
selectTask(task);
|
||||
openModal();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Ensure Bootstrap's Popover is initialized correctly
|
||||
popoverRefs.current.forEach((el) => {
|
||||
if (el) {
|
||||
new bootstrap.Popover(el, {
|
||||
if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
|
||||
new window.bootstrap.Popover(el, {
|
||||
trigger: "focus",
|
||||
placement: "left",
|
||||
html: true,
|
||||
content: el.getAttribute("data-bs-content"), // use inline content from attribute
|
||||
content: el.getAttribute("data-bs-content"),
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [dates]);
|
||||
}, [dates, TaskLists]);
|
||||
|
||||
// Handler for project selection
|
||||
const handleProjectChange = (e) => {
|
||||
const newProjectId = e.target.value;
|
||||
dispatch(setProjectId(newProjectId));
|
||||
// Reset filters when project changes (communicate to FilterIcon to clear)
|
||||
setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Report Task Modal */}
|
||||
<div
|
||||
className={`modal fade ${isModalOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
@ -115,6 +148,7 @@ const DailyTask = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Report Task Comments Modal */}
|
||||
<div
|
||||
className={`modal fade ${isModalOpenComment ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
@ -132,34 +166,43 @@ const DailyTask = () => {
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Daily Task", link: null },
|
||||
{ label: "Daily Progress Report", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body p-1 p-sm-2">
|
||||
<div className="row d-flex justify-content-between">
|
||||
<div className="col-6 text-start">
|
||||
<div className="row d-flex justify-content-between align-items-center">
|
||||
<div className="justify-content-between align-items-center"></div>
|
||||
<div className="col-md-6 d-flex gap-3 align-items-center col-12 text-start mb-2 mb-md-0">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
DateDifference="6"
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
{/* FilterIcon component now manages its own filter states and logic */}
|
||||
<FilterIcon
|
||||
taskListData={TaskList} // Pass the raw TaskList to FilterIcon
|
||||
onApplyFilters={setFilters} // Callback to receive the filtered states from FilterIcon
|
||||
currentSelectedBuilding={filters.selectedBuilding}
|
||||
currentSelectedFloors={filters.selectedFloors}
|
||||
currentSelectedActivities={filters.selectedActivities}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-3 col-6 text-end mb-1">
|
||||
<div className="col-md-4 col-12 text-center mb-2 mb-md-0">
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
name="project_select"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedProject}
|
||||
onChange={(e) => dispatch(setProjectId(e.target.value))}
|
||||
aria-label=""
|
||||
value={selectedProject || ""}
|
||||
onChange={handleProjectChange}
|
||||
aria-label="Select Project"
|
||||
>
|
||||
{project_lodaing && (
|
||||
<option value="Loading..." disabled>
|
||||
Loading...
|
||||
{project_loading && (
|
||||
<option value="" disabled>
|
||||
Loading Projects...
|
||||
</option>
|
||||
)}
|
||||
{!project_lodaing &&
|
||||
{!project_loading &&
|
||||
projects &&
|
||||
projects?.map((project) => (
|
||||
<option value={project.id} key={project.id}>
|
||||
@ -169,13 +212,13 @@ const DailyTask = () => {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="table-responsive text-nowrap mt-3">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity</th>
|
||||
<th>Assigned </th>
|
||||
<th>Compeleted</th>
|
||||
<th>Completed</th>
|
||||
<th>Assign On</th>
|
||||
<th>Team</th>
|
||||
<th>Actions</th>
|
||||
@ -189,7 +232,7 @@ const DailyTask = () => {
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!task_loading && TaskList.length === 0 && (
|
||||
{!task_loading && TaskLists.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center">
|
||||
<p>No Reports Found</p>
|
||||
@ -197,6 +240,11 @@ const DailyTask = () => {
|
||||
</tr>
|
||||
)}
|
||||
{dates.map((date, i) => {
|
||||
const tasksForDate = TaskLists.filter((task) =>
|
||||
task.assignmentDate.includes(date)
|
||||
);
|
||||
if (tasksForDate.length === 0) return null;
|
||||
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<tr className="table-row-header">
|
||||
@ -204,12 +252,10 @@ const DailyTask = () => {
|
||||
<strong>{moment(date).format("DD-MM-YYYY")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{TaskLists.filter((task) =>
|
||||
task.assignmentDate.includes(date)
|
||||
).map((task, index) => {
|
||||
const refIndex = index * 10 + i;
|
||||
{tasksForDate.map((task, index) => {
|
||||
const refIndex = `${i}-${index}`;
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<React.Fragment key={refIndex}>
|
||||
<tr>
|
||||
<td className="flex-wrap text-start">
|
||||
<div>
|
||||
@ -218,7 +264,7 @@ const DailyTask = () => {
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<label className=" col-form-label text-sm">
|
||||
<label className="col-form-label text-sm">
|
||||
{" "}
|
||||
{
|
||||
task?.workItem?.workArea?.floor
|
||||
@ -266,23 +312,18 @@ const DailyTask = () => {
|
||||
${task.teamMembers
|
||||
.map(
|
||||
(member) => `
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${
|
||||
member?.firstName?.charAt(
|
||||
0
|
||||
) || ""
|
||||
}${
|
||||
member?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<span>${member.firstName} ${
|
||||
member.lastName
|
||||
}</span>
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${member?.firstName?.charAt(0) || ""
|
||||
}${member?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
<span>${member.firstName} ${member.lastName
|
||||
}</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
@ -300,7 +341,6 @@ const DailyTask = () => {
|
||||
title={`${member.firstName} ${member.lastName}`}
|
||||
className="avatar avatar-xs"
|
||||
>
|
||||
{/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
|
||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
||||
{member?.firstName.slice(0, 1)}
|
||||
</span>
|
||||
@ -311,9 +351,8 @@ const DailyTask = () => {
|
||||
className="avatar avatar-xs"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title={`${
|
||||
task.teamMembers.length - 3
|
||||
} more`}
|
||||
title={`${task.teamMembers.length - 3
|
||||
} more`}
|
||||
>
|
||||
<span className="avatar-initial rounded-circle bg-label-secondary pull-up">
|
||||
+{task.teamMembers.length - 3}
|
||||
@ -326,9 +365,8 @@ const DailyTask = () => {
|
||||
<div className="d-flex justify-content-center">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-xs btn-primary ${
|
||||
task.reportedDate != null ? "d-none" : ""
|
||||
}`}
|
||||
className={`btn btn-xs btn-primary ${task.reportedDate != null ? "d-none" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectTask(task);
|
||||
openModal();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user