admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3020 IO-3036 Additional blurred components.

Browse Source
This commit is contained in:
Patrick Fic
2024-12-04 15:37:08 -08:00
parent d9c9466953
commit 43b1ad78a3
7 changed files with 192 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
client/src/components/job-lifecycle/job-lifecycle.component.jsx
View File

@@ -8,6 +8,7 @@ import { isEmpty } from "lodash";
import { useTranslation } from "react-i18next";
import "./job-lifecycle.styles.scss";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
// show text on bar if text can fit
export function JobLifecycleComponent({ job, statuses, ...rest }) {
@@ -65,14 +66,23 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
{
title: t("job_lifecycle.columns.value"),
dataIndex: "value",
key: "value"
key: "value",
render: (text, record) => (
<BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomSmallString:2">
<span>{text}</span>
</BlurWrapperComponent>
)
},
{
title: t("job_lifecycle.columns.start"),
dataIndex: "start",
key: "start",
render: (text) => DateTimeFormatterFunction(text),
sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix()
sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
render: (text, record) => (
<BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
<span>{DateTimeFormatterFunction(text)}</span>
</BlurWrapperComponent>
)
},
{
title: t("job_lifecycle.columns.relative_start"),
@@ -92,7 +102,12 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
}
return dayjs(a.end).unix() - dayjs(b.end).unix();
},
render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
render: (text, record) => (
<BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
<span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
</BlurWrapperComponent>
)
},
{
title: t("job_lifecycle.columns.relative_end"),
@@ -122,67 +137,72 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
}
style={{ width: "100%" }}
>
<div
id="bar-container"
style={{
display: "flex",
width: "100%",
height: "100px",
textAlign: "center",
borderRadius: "5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "#f0f2f5",
margin: 0,
padding: 0
}}
>
{lifecycleData.durations.summations.map((key, index, array) => {
const isFirst = index === 0;
const isLast = index === array.length - 1;
return (
<div
key={key.status}
style={{
overflow: "hidden",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: 0,
padding: 0,
{
//TODO:Upsell
}
<BlurWrapperComponent featureName="lifecycle">
<div
id="bar-container"
style={{
display: "flex",
width: "100%",
height: "100px",
textAlign: "center",
borderRadius: "5px",
borderWidth: "5px",
borderStyle: "solid",
borderColor: "#f0f2f5",
margin: 0,
padding: 0
}}
>
{lifecycleData.durations.summations.map((key, index, array) => {
const isFirst = index === 0;
const isLast = index === array.length - 1;
return (
<div
key={key.status}
style={{
overflow: "hidden",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
margin: 0,
padding: 0,
borderTop: "1px solid #f0f2f5",
borderBottom: "1px solid #f0f2f5",
borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
borderRight: isLast ? "1px solid #f0f2f5" : undefined,
borderTop: "1px solid #f0f2f5",
borderBottom: "1px solid #f0f2f5",
borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
borderRight: isLast ? "1px solid #f0f2f5" : undefined,
backgroundColor: key.color,
width: `${key.percentage}%`
}}
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
>
{key.percentage > 15 ? (
<>
<div>{key.roundedPercentage}</div>
<div
style={{
backgroundColor: "#f0f2f5",
borderRadius: "5px",
paddingRight: "2px",
paddingLeft: "2px",
fontSize: "0.8rem"
}}
>
{key.status}
</div>
</>
) : null}
</div>
);
})}
</div>
backgroundColor: key.color,
width: `${key.percentage}%`
}}
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
>
{key.percentage > 15 ? (
<>
<div>{key.roundedPercentage}</div>
<div
style={{
backgroundColor: "#f0f2f5",
borderRadius: "5px",
paddingRight: "2px",
paddingLeft: "2px",
fontSize: "0.8rem"
}}
>
{key.status}
</div>
</>
) : null}
</div>
);
})}
</div>
</BlurWrapperComponent>
<Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
<div>
{lifecycleData.durations.summations.map((key) => (
@@ -197,7 +217,15 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
textAlign: "center"
}}
>
{key.status} ({key.roundedPercentage})
{key.status} (
<BlurWrapperComponent
featureName="lifecycle"
overrideValueFunction="RandomAmount"
valueProp="children"
>
<span>{key.roundedPercentage}</span>
</BlurWrapperComponent>
)
</div>
</Tag>
))}