Skip to content

Commit

Permalink
Merge pull request #1970 from OneCommunityGlobal/Anirudh_conditional_…
Browse files Browse the repository at this point in the history 
…formatting_multiwordnames

Anirudh conditional formatting multiwordnames
  • Loading branch information
@one-community
one-community authored Mar 10, 2024
2 parents 48948c5 + 1bd87b7 commit 9f264b8
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 112 deletions.
286 changes: 174 additions & 112 deletions src/components/Projects/WBS/WBSDetail/Task/Task.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { connect } from 'react-redux';
import {
Modal,
ModalBody,
Button,
} from 'reactstrap';
import { Modal, ModalBody, Button } from 'reactstrap';
import { BsFillCaretDownFill, BsFillCaretUpFill, BsFillCaretLeftFill } from 'react-icons/bs';
import ControllerRow from '../ControllerRow';
import {
Expand All @@ -22,11 +18,14 @@ import { formatDate } from 'utils/formatDate';

function Task(props) {
/*
* -------------------------------- variable declarations --------------------------------
*/
* -------------------------------- variable declarations --------------------------------
*/
// props from store
const { tasks } = props;

const names = props.resources.map(element => element.name);
const colors_objs = assignColorsToInitials(names);

const startedDate = new Date(props.startedDatetime);
const dueDate = new Date(props.dueDatetime);

Expand All @@ -41,20 +40,22 @@ function Task(props) {
const tableRowRef = useRef();

/*
* -------------------------------- functions --------------------------------
*/
* -------------------------------- functions --------------------------------
*/
const toggleModel = () => setModal(!modal);

const openChild = () => {
setIsOpen(!isOpen);
};

const getAncestorNames = (motherId) => {
const getAncestorNames = motherId => {
const motherTask = tasks.find(task => task._id === motherId);
if (motherTask) {
const motherTaskName = motherTask.taskName;
const grandMotherTaskNames = motherTask.mother ? getAncestorNames(motherTask.mother) : '';
return grandMotherTaskNames ? grandMotherTaskNames + ' <br /> ' + motherTaskName + ' /' : motherTaskName + ' /';
return grandMotherTaskNames
? grandMotherTaskNames + ' <br /> ' + motherTaskName + ' /'
: motherTaskName + ' /';
} else {
return '';
}
Expand All @@ -63,24 +64,78 @@ function Task(props) {
const activeController = () => {
props.setControllerId(props.taskId);
setControllerRow(!controllerRow);
}
};

const deleteOneTask = (taskId, mother) => {
props.deleteWBSTask(taskId, mother);
};

function getInitials(name){
const initials = name
.split(' ')
.filter((n, index) => index === 0 || index === name.split(' ').length - 1)
.map(n => n[0])
.join('')
.toUpperCase();
return initials;
}

function assignColorsToInitials(names) {
const colorsHex = [
'#FF0000', // red
'#0000FF', // blue
'#00FF00', // green
'#FFFF00', // yellow
'#FFA500', // orange
'#800080', // purple
'#FFC0CB', // pink
'#00FFFF', // cyan
'#FF00FF', // magenta
'#008080', // teal
'#00FF00', // lime
'#A52A2A', // brown
'#000000', // black
'#FFD700', // gold
'#000080', // navy
'#800000', // maroon
'#808000', // olive
];
let colors = {};
let colorIndex = {};

for (let name of names) {
const initials = getInitials(name);
// If the initials haven't been encountered yet, assign a base color
if (!colorIndex[initials]) {
colors[name] = {
color: '#bbb', // Base color
initials: initials,
};
colorIndex[initials] = 1;
} else {
// If initials have been encountered, assign a new color
colors[name] = {
color: colorsHex[Math.floor(Math.random() * colorsHex.length)] + '30',
initials: initials,
};
colorIndex[initials]++;
}
}
return colors;
}

/*
* -------------------------------- useEffects --------------------------------
*/
* -------------------------------- useEffects --------------------------------
*/
useEffect(() => {
if (props.controllerId !== props.taskId) setControllerRow(false);
}, [props.controllerId])
}, [props.controllerId]);

useEffect(() => {
const childTasks = tasks.filter(task => task.mother === props.taskId);
const filteredChildren = props.filterTasks(childTasks, props.filterState);
setChildren(filteredChildren);
}, [props.filterState, tasks])
}, [props.filterState, tasks]);

useEffect(() => {
if (tableRowRef.current) {
Expand All @@ -90,7 +145,7 @@ function Task(props) {
}, []);

useEffect(() => {
setIsOpen(props.openAll);
setIsOpen(props.openAll);
}, [props.openAll]);

return (
Expand All @@ -113,12 +168,7 @@ function Task(props) {
} tag_color_lv_${props.level}`}
></td>
<td>
<Button
color="primary"
size="sm"
onClick={activeController}
style={boxStyle}
>
<Button color="primary" size="sm" onClick={activeController} style={boxStyle}>
<span className="action-edit-btn">EDIT</span>
{controllerRow ? <BsFillCaretUpFill /> : <BsFillCaretDownFill />}
</Button>
Expand All @@ -132,21 +182,25 @@ function Task(props) {
{props.num.replaceAll('.0', '')}
</td>
<td className="taskName">
{<div className={`level-space-${props.level}`} data-tip={`${getAncestorNames(props.mother)}`}>
<span
onClick={openChild}
id={`task_name_${props.taskId}`}
className={props.hasChildren ? 'has_children' : ''}
>
{props.hasChildren ? (
<i
className={`fa fa-folder${isOpen ? '-open' : ''}`}
aria-hidden="true"
></i>
) : ''}{' '}
{props.name}
</span>
</div>}
{
<div
className={`level-space-${props.level}`}
data-tip={`${getAncestorNames(props.mother)}`}
>
<span
onClick={openChild}
id={`task_name_${props.taskId}`}
className={props.hasChildren ? 'has_children' : ''}
>
{props.hasChildren ? (
<i className={`fa fa-folder${isOpen ? '-open' : ''}`} aria-hidden="true"></i>
) : (
''
)}{' '}
{props.name}
</span>
</div>
}
</td>
<td>
{props.priority === 'Primary' ? (
Expand All @@ -162,32 +216,42 @@ function Task(props) {
<td className="desktop-view">
{props.resources.length
? props.resources
.filter((elm, i) => i < 2 || showMoreResources)
.map((elm, i) => {
return (
<a
key={`res_${i}`}
data-tip={elm.name}
className="name"
href={`/userprofile/${elm.userID}`}
target="_blank"
rel="noreferrer"
>
{!elm.profilePic || elm.profilePic === "/defaultprofilepic.png"
? <span className="dot">{elm.name.split(' ').map(n => n[0]).join('').toUpperCase()}</span>
: <img className="img-circle" src={elm.profilePic} />}
</a>
);
})
: null}
{props.resources.length > 2
? <a
className="resourceMoreToggle"
onClick={() => setShowMoreResources(!showMoreResources)}
>
<span className="dot">{showMoreResources ? <BsFillCaretLeftFill /> : `${props.resources.length - 2}+`}</span>
</a>
.filter((elm, i) => i < 2 || showMoreResources)
.map((elm, i) => {
const name = elm.name; //Getting initials and formatting them here
const initials = getInitials(name);
//getting background color here
const bg = colors_objs[name].color;
return (
<a
key={`res_${i}`}
data-tip={elm.name}
className="name"
href={`/userprofile/${elm.userID}`}
target="_blank"
rel="noreferrer"
>
{!elm.profilePic || elm.profilePic === '/defaultprofilepic.png' ? (
<span className="dot" style={{ backgroundColor: bg }}>
{initials}{' '}
</span>
) : (
<img className="img-circle" src={elm.profilePic} />
)}
</a>
);
})
: null}
{props.resources.length > 2 ? (
<a
className="resourceMoreToggle"
onClick={() => setShowMoreResources(!showMoreResources)}
>
<span className="dot">
{showMoreResources ? <BsFillCaretLeftFill /> : `${props.resources.length - 2}+`}
</span>
</a>
) : null}
</td>
<td>
{props.isAssigned ? (
Expand Down Expand Up @@ -240,15 +304,11 @@ function Task(props) {
{parseFloat(props.estimatedHours).toFixed(2)}
</td>
<td className="desktop-view">
{startedDate.getFullYear() !== 1969
? formatDate(startedDate)
: null}
{startedDate.getFullYear() !== 1969 ? formatDate(startedDate) : null}
<br />
</td>
<td className="desktop-view">
{dueDate.getFullYear() !== 1969
? formatDate(dueDate)
: null}
{dueDate.getFullYear() !== 1969 ? formatDate(dueDate) : null}
</td>
<td className="desktop-view">
{props.links.map((link, i) =>
Expand All @@ -260,7 +320,7 @@ function Task(props) {
)}
</td>
<td className="desktop-view" onClick={toggleModel}>
<i className="fa fa-book" aria-hidden="true" data-tip="More info"/>
<i className="fa fa-book" aria-hidden="true" data-tip="More info" />
</td>
<Modal isOpen={modal} toggle={toggleModel}>
<ModalBody>
Expand Down Expand Up @@ -331,54 +391,56 @@ function Task(props) {
) : null}
</>
) : null}
{isOpen && children.length ? children.map((task, i) => (
<ConnectedTask
key={`${task._id}${i}`}
taskId={task._id}
level={task.level}
num={task.num}
name={task.taskName}
priority={task.priority}
resources={task.resources}
isAssigned={task.isAssigned}
status={task.status}
hoursBest={task.hoursBest}
hoursMost={task.hoursMost}
hoursWorst={task.hoursWorst}
estimatedHours={task.estimatedHours}
startedDatetime={task.startedDatetime}
dueDatetime={task.dueDatetime}
links={task.links}
projectId={props.projectId}
wbsId={props.wbsId}
parentId1={task.parentId1}
parentId2={task.parentId2}
parentId3={task.parentId3}
mother={task.mother}
openAll={props.openAll}
deleteWBSTask={props.deleteWBSTask}
hasChildren={task.hasChildren}
siblings={children}
whyInfo={task.whyInfo}
intentInfo={task.intentInfo}
endstateInfo={task.endstateInfo}
childrenQty={task.childrenQty}
filterTasks={props.filterTasks}
filterState={props.filterState}
controllerId={props.controllerId}
setControllerId={props.setControllerId}
load={props.load}
pageLoadTime={props.pageLoadTime}
setIsLoading={props.setIsLoading}
/>)
) : null}
{isOpen && children.length
? children.map((task, i) => (
<ConnectedTask
key={`${task._id}${i}`}
taskId={task._id}
level={task.level}
num={task.num}
name={task.taskName}
priority={task.priority}
resources={task.resources}
isAssigned={task.isAssigned}
status={task.status}
hoursBest={task.hoursBest}
hoursMost={task.hoursMost}
hoursWorst={task.hoursWorst}
estimatedHours={task.estimatedHours}
startedDatetime={task.startedDatetime}
dueDatetime={task.dueDatetime}
links={task.links}
projectId={props.projectId}
wbsId={props.wbsId}
parentId1={task.parentId1}
parentId2={task.parentId2}
parentId3={task.parentId3}
mother={task.mother}
openAll={props.openAll}
deleteWBSTask={props.deleteWBSTask}
hasChildren={task.hasChildren}
siblings={children}
whyInfo={task.whyInfo}
intentInfo={task.intentInfo}
endstateInfo={task.endstateInfo}
childrenQty={task.childrenQty}
filterTasks={props.filterTasks}
filterState={props.filterState}
controllerId={props.controllerId}
setControllerId={props.setControllerId}
load={props.load}
pageLoadTime={props.pageLoadTime}
setIsLoading={props.setIsLoading}
/>
))
: null}
</>
);
}

const mapStateToProps = state => ({
tasks: state.tasks.taskItems,
});
});

const ConnectedTask = connect(mapStateToProps, {
moveTasks,
Expand Down
Loading

0 comments on commit 9f264b8

Please sign in to comment.