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

Merged in feature/IO-3467-report-center-filter-ui (pull request #2707)

Browse Source 
IO-3467 Resolve UI on report center filter.
This commit is contained in:
Patrick Fic
2025-12-15 16:44:29 +00:00
parent 6d6fc9d552 f1847ef650
commit e8bf687d58
2 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/report-center-modal/report-center-modal.component.jsx
View File

@@ -143,7 +143,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
//TODO: Find a way to filter out / blur on demand. //TODO: Find a way to filter out / blur on demand.
return ( return (
<div> <div className="report-center-modal">
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}> <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
<Input.Search onChange={(e) => setSearch(e.target.value)} value={search} /> <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} />
<Form.Item name="defaultSorters" hidden /> <Form.Item name="defaultSorters" hidden />
@@ -163,13 +163,14 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
{Object.keys(grouped) {Object.keys(grouped)
//.filter((key) => !groupExcludeKeyFilter.includes(key)) //.filter((key) => !groupExcludeKeyFilter.includes(key))
.map((key) => ( .map((key) => (
<Col md={8} sm={12} key={key}> <Col xs={24} sm={12} md={Object.keys(grouped).length === 1 ? 24 : 8} key={key}>
<Card.Grid <Card.Grid
style={{ style={{
width: "100%", width: "100%",
height: "100%", height: "100%",
maxHeight: "33vh", maxHeight: "33vh",
overflowY: "scroll" overflowY: "scroll",
minWidth: "200px"
}} }}
> >
<Typography.Title level={4}>{t(`reportcenter.labels.groups.${key}`)}</Typography.Title> <Typography.Title level={4}>{t(`reportcenter.labels.groups.${key}`)}</Typography.Title>
@@ -177,7 +178,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
<BlurWrapperComponent <BlurWrapperComponent
featureName={groupExcludeKeyFilter.find((g) => g.key === key).featureName} featureName={groupExcludeKeyFilter.find((g) => g.key === key).featureName}
> >
<ul style={{ listStyleType: "none", columns: "2 auto" }}> <ul style={{ listStyleType: "none", columns: grouped[key].length > 4 ? "2 auto" : "1", padding: 0, margin: 0 }}>
{grouped[key].map((item) => ( {grouped[key].map((item) => (
<li key={item.key}> <li key={item.key}>
<Radio key={item.key} value={item.key}> <Radio key={item.key} value={item.key}>
@@ -188,7 +189,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
</ul> </ul>
</BlurWrapperComponent> </BlurWrapperComponent>
) : ( ) : (
<ul style={{ listStyleType: "none", columns: "2 auto" }}> <ul style={{ listStyleType: "none", columns: grouped[key].length > 4 ? "2 auto" : "1", padding: 0, margin: 0 }}>
{grouped[key].map((item) => {grouped[key].map((item) =>
item.featureNameRestricted ? ( item.featureNameRestricted ? (
<li key={item.key}> <li key={item.key}>

35
client/src/components/report-center-modal/report-center-modal.styles.scss
View File

@@ -11,3 +11,38 @@
} }
} }
} }
// Report center modal fixes for column layout
.report-center-modal {
.ant-form-item .ant-radio-group {
width: 100%;
.ant-card-grid {
padding: 16px;
box-sizing: border-box;
ul {
width: 100%;
li {
margin-bottom: 8px;
break-inside: avoid;
page-break-inside: avoid;
.ant-radio-wrapper {
display: flex;
align-items: flex-start;
width: 100%;
span:not(.ant-radio) {
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
}
}
}
}
}
}
}