Kaynağa Gözat

update resource allocation number digit

tags/Baseline_30082024_FRONTEND_UAT
kelvinsuen 1 yıl önce
ebeveyn
işleme
1bf99c9185
2 değiştirilmiş dosya ile 37 ekleme ve 26 silme
  1. +21
    -16
      src/components/CreateProject/ResourceAllocation.tsx
  2. +16
    -10
      src/components/CreateTaskTemplate/ResourceAllocation.tsx

+ 21
- 16
src/components/CreateProject/ResourceAllocation.tsx Dosyayı Görüntüle

@@ -30,6 +30,10 @@ interface Props {
grades: Grade[];
}

const baseCellSx: SxProps = {
textAlign: "right",
};

const leftBorderCellSx: SxProps = {
borderLeft: "1px solid",
borderColor: "divider",
@@ -142,11 +146,11 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
{t("Allocation Type")}
</TableCell>
{grades.map((column, idx) => (
<TableCell key={`${column.id}${idx}`}>
<TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
{column.name}
</TableCell>
))}
<TableCell sx={leftBorderCellSx}>{t("Total")}</TableCell>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Total")}</TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -160,12 +164,12 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
// renderValue={(val) => percentFormatter.format(val)}
onChange={makeUpdatePercentage(column.id)}
convertValue={(inputValue) => Number(inputValue)}
cellSx={{ backgroundColor: "primary.lightest" }}
inputSx={{ width: "3rem" }}
cellSx={{ ...baseCellSx, backgroundColor: "primary.lightest" }}
inputSx={{ ...baseCellSx, width: "3rem" }}
error={manhourPercentageByGrade[column.id] < 0}
/>
))}
<TableCell sx={{ ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
<TableCell sx={{...baseCellSx, ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
{((totalPercentage.toString().includes(".") && totalPercentage.toString() || totalPercentage.toFixed(1)) + "%")}
{/* {percentFormatter.format(totalPercentage)} */}
</TableCell>
@@ -173,13 +177,13 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
<TableRow>
<TableCell sx={rightBorderCellSx}>{t("Manhour")}</TableCell>
{grades.map((column, idx) => (
<TableCell key={`${column.id}${idx}`}>
<TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
{manhourFormatter.format(
manhourPercentageByGrade[column.id] / 100 * totalManhour,
)}
</TableCell>
))}
<TableCell sx={leftBorderCellSx}>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>
{manhourFormatter.format(totalManhour)}
</TableCell>
</TableRow>
@@ -255,7 +259,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
<TableRow>
<TableCell>{t("Stage")}</TableCell>
<TableCell sx={leftBorderCellSx}>{t("Task Count")}</TableCell>
<TableCell colSpan={2} sx={leftRightBorderCellSx}>
<TableCell colSpan={2} sx={{...baseCellSx, ...leftRightBorderCellSx}}>
{t("Total Manhour")}
</TableCell>
{grades.map((column, idx) => (
@@ -269,7 +273,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
{taskGroups.map((tg, idx) => (
<TableRow key={`${tg.id}${idx}`}>
<TableCell>{tg.name}</TableCell>
<TableCell sx={leftBorderCellSx}>
<TableCell sx={{...baseCellSx, ...leftBorderCellSx}}>
{currentTaskGroups[tg.id].taskIds.length}
</TableCell>
<TableCellEdit
@@ -279,12 +283,13 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
onChange={makeUpdatePercentage(tg.id)}
convertValue={(inputValue) => Number(inputValue)}
cellSx={{
...baseCellSx,
backgroundColor: "primary.lightest",
}}
inputSx={{ width: "3rem" }}
inputSx={{ ...baseCellSx, width: "3rem" }}
error={currentTaskGroups[tg.id].percentAllocation < 0}
/>
<TableCell sx={rightBorderCellSx}>
<TableCell sx={{...baseCellSx, ...rightBorderCellSx}}>
{manhourFormatter.format(
currentTaskGroups[tg.id].percentAllocation / 100 * totalManhour,
)}
@@ -293,7 +298,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
const stageHours =
currentTaskGroups[tg.id].percentAllocation / 100 * totalManhour;
return (
<TableCell key={`${column.id}${idx}`}>
<TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
{manhourFormatter.format(
manhourPercentageByGrade[column.id] / 100 * stageHours,
)}
@@ -304,13 +309,13 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
))}
<TableRow>
<TableCell>{t("Total")}</TableCell>
<TableCell sx={leftBorderCellSx}>
<TableCell sx={{...baseCellSx, ...leftBorderCellSx}}>
{Object.values(currentTaskGroups).reduce(
(acc, tg) => acc + tg.taskIds.length,
0,
)}
</TableCell>
<TableCell sx={{
<TableCell sx={{...baseCellSx,
...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) === 100 && leftBorderCellSx),
...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) !== 100 && errorCellSx)
}}
@@ -337,7 +342,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
0,
).toFixed(1) + "%" } */}
</TableCell>
<TableCell sx={rightBorderCellSx}>
<TableCell sx={{...baseCellSx, ...rightBorderCellSx}}>
{manhourFormatter.format(
Object.values(currentTaskGroups).reduce(
(acc, tg) => acc + tg.percentAllocation / 100 * totalManhour,
@@ -355,7 +360,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
0,
);
return (
<TableCell key={`${column.id}${idx}`}>
<TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
{manhourFormatter.format(hours)}
</TableCell>
);


+ 16
- 10
src/components/CreateTaskTemplate/ResourceAllocation.tsx Dosyayı Görüntüle

@@ -27,6 +27,10 @@ interface Props {
grades: Grade[];
}

const baseCellSx: SxProps = {
textAlign: "right",
};

const leftBorderCellSx: SxProps = {
borderLeft: "1px solid",
borderColor: "divider",
@@ -104,11 +108,11 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
{t("Allocation Type")}
</TableCell>
{grades.map((column, idx) => (
<TableCell key={`${column.id}${idx}`}>
<TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
{column.name}
</TableCell>
))}
<TableCell sx={leftBorderCellSx}>{t("Total")}</TableCell>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Total")}</TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -122,12 +126,12 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
// renderValue={(val) => val.toFixed(1) + "%"}
onChange={makeUpdatePercentage(column.id)}
convertValue={(inputValue) => Number(inputValue)}
cellSx={{ backgroundColor: "primary.lightest" }}
inputSx={{ width: "3rem" }}
cellSx={{ ...baseCellSx, backgroundColor: "primary.lightest" }}
inputSx={{ ...baseCellSx, width: "3rem" }}
error={manhourPercentageByGrade[column.id] < 0}
/>
))}
<TableCell sx={{ ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
<TableCell sx={{ ...baseCellSx, ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
{((totalPercentage.toString().includes(".") && totalPercentage.toString() || totalPercentage.toFixed(1) )+ "%")}
{/* {totalPercentage.toFixed(1) + "%"} */}
</TableCell>
@@ -204,8 +208,8 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
<TableHead>
<TableRow>
<TableCell>{t("Stage")}</TableCell>
<TableCell sx={leftBorderCellSx}>{t("Task Count")}</TableCell>
<TableCell colSpan={2} sx={leftRightBorderCellSx}>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Task Count")}</TableCell>
<TableCell colSpan={2} sx={{...baseCellSx, leftRightBorderCellSx}}>
{t("Total Manhour")}
</TableCell>
</TableRow>
@@ -214,7 +218,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
{taskGroups.map((tg, idx) => (
<TableRow key={`${tg.id}${idx}`}>
<TableCell>{tg.name}</TableCell>
<TableCell sx={leftBorderCellSx}>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>
{currentTaskGroups[tg.id].taskIds.length}
</TableCell>
<TableCellEdit
@@ -224,23 +228,25 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
onChange={makeUpdatePercentage(tg.id)}
convertValue={(inputValue) => Number(inputValue)}
cellSx={{
...baseCellSx,
backgroundColor: "primary.lightest",
...(currentTaskGroups[tg.id].percentAllocation < 0 && { ...errorCellSx, borderBottom: "0px", borderRight: "1px solid", borderColor: "error.main"})
}}
inputSx={{ width: "3rem" }}
inputSx={{ ...baseCellSx, width: "3rem" }}
error={currentTaskGroups[tg.id].percentAllocation < 0}
/>
</TableRow>
))}
<TableRow>
<TableCell>{t("Total")}</TableCell>
<TableCell sx={leftBorderCellSx}>
<TableCell sx={{...baseCellSx, leftBorderCellSx}}>
{Object.values(currentTaskGroups).reduce(
(acc, tg) => acc + tg.taskIds.length,
0,
)}
</TableCell>
<TableCell sx={{
...baseCellSx,
...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) === 100 && leftBorderCellSx),
...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main"})
}}


Yükleniyor…
İptal
Kaydet