Skip to content

Commit a1933ca

Browse files
anuj452005anuj452005
committed
feat(styles): improve form and picker styling
1 parent 2322f76 commit a1933ca

4 files changed

Lines changed: 236 additions & 124 deletions

File tree

‎src/components/BenefitPlanFilter.jsx‎

Lines changed: 115 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,33 @@ import BenefitPlanTypePicker from '../pickers/BenefitPlanTypePicker';
1111

1212
const StyledGrid = styled(Grid)(({ theme }) => ({
1313
...defaultFilterStyles(theme).form,
14+
width: '100%',
15+
maxWidth: '100%',
16+
overflow: 'hidden',
17+
boxSizing: 'border-box',
1418
}));
1519

1620
const StyledGridItem = styled(Grid)(({ theme }) => ({
1721
...defaultFilterStyles(theme).item,
22+
minWidth: 0,
23+
boxSizing: 'border-box',
24+
'& > *': {
25+
width: '100%',
26+
},
27+
}));
28+
29+
const StyledCheckboxGridItem = styled(Grid)(({ theme }) => ({
30+
...defaultFilterStyles(theme).item,
31+
minWidth: 0,
32+
boxSizing: 'border-box',
33+
display: 'flex',
34+
alignItems: 'flex-end',
35+
paddingBottom: theme.spacing(1),
36+
'& .MuiFormControlLabel-root': {
37+
marginLeft: 0,
38+
marginRight: 0,
39+
alignSelf: 'flex-start',
40+
},
1841
}));
1942

2043
function BenefitPlanFilter({
@@ -58,101 +81,103 @@ function BenefitPlanFilter({
5881
};
5982

6083
return (
61-
<StyledGrid container>
62-
<StyledGridItem item xs={2}>
63-
<TextInput
64-
module="socialProtection"
65-
label="benefitPlan.code"
66-
value={filterTextFieldValue('code')}
67-
onChange={onChangeStringFilter('code', CONTAINS_LOOKUP)}
68-
/>
69-
</StyledGridItem>
70-
<StyledGridItem item xs={2}>
71-
<TextInput
72-
module="socialProtection"
73-
label="benefitPlan.name"
74-
value={filterTextFieldValue('name')}
75-
onChange={onChangeStringFilter('name', CONTAINS_LOOKUP)}
76-
/>
77-
</StyledGridItem>
78-
<StyledGridItem item xs={3}>
79-
<BenefitPlanTypePicker
80-
module="socialProtection"
81-
label="beneficiary.benefitPlanTypePicker"
82-
value={filterValue('type')}
83-
onChange={(v) => onChangeFilters([
84-
{
85-
id: 'type',
86-
value: v,
87-
filter: `type: ${v}`,
88-
},
89-
])}
90-
withNull={false}
91-
/>
92-
</StyledGridItem>
93-
<StyledGridItem item xs={2}>
94-
<PublishedComponent
95-
pubRef="core.DatePicker"
96-
module="socialProtection"
97-
label="benefitPlan.dateValidFrom"
98-
value={filterValue('dateValidFrom')}
99-
onChange={(v) => onChangeFilters([
100-
{
101-
id: 'dateValidFrom',
102-
value: v,
103-
filter: `dateValidFrom: "${v}T00:00:00.000Z"`,
104-
},
105-
])}
106-
/>
107-
</StyledGridItem>
108-
<StyledGridItem item xs={2}>
109-
<PublishedComponent
110-
pubRef="core.DatePicker"
111-
module="socialProtection"
112-
label="benefitPlan.dateValidTo"
113-
value={filterValue('dateValidTo')}
114-
onChange={(v) => onChangeFilters([
115-
{
116-
id: 'dateValidTo',
117-
value: v,
118-
filter: `dateValidTo: "${v}T00:00:00.000Z"`,
119-
},
120-
])}
121-
/>
122-
</StyledGridItem>
123-
<StyledGridItem item xs={2}>
124-
<FormControlLabel
125-
control={(
126-
<Checkbox
127-
color="primary"
128-
checked={filterValue('isDeleted')}
129-
onChange={(event) => onChangeCheckbox(
130-
'isDeleted',
131-
event.target.checked,
132-
)}
133-
/>
134-
)}
135-
label={formatMessage(intl, 'socialProtection', 'benefitPlan.isDeleted')}
136-
/>
137-
</StyledGridItem>
138-
{showStatuses && (
139-
<StyledGridItem item xs={2}>
140-
<BeneficiaryStatusPicker
141-
label="beneficiary.beneficiaryStatusPicker"
142-
withNull
143-
nullLabel={formatMessage(intl, 'socialProtection', 'any')}
144-
value={filterValue('beneficiaryStatus')}
145-
onChange={(value) => onChangeFilters([
84+
<Grid item xs={12}>
85+
<StyledGrid container spacing={2}>
86+
<StyledGridItem item xs={12} sm={6} md={2}>
87+
<TextInput
88+
module="socialProtection"
89+
label="benefitPlan.code"
90+
value={filterTextFieldValue('code')}
91+
onChange={onChangeStringFilter('code', CONTAINS_LOOKUP)}
92+
/>
93+
</StyledGridItem>
94+
<StyledGridItem item xs={12} sm={6} md={2}>
95+
<TextInput
96+
module="socialProtection"
97+
label="benefitPlan.name"
98+
value={filterTextFieldValue('name')}
99+
onChange={onChangeStringFilter('name', CONTAINS_LOOKUP)}
100+
/>
101+
</StyledGridItem>
102+
<StyledGridItem item xs={12} sm={6} md={2}>
103+
<BenefitPlanTypePicker
104+
module="socialProtection"
105+
label="beneficiary.benefitPlanTypePicker"
106+
value={filterValue('type')}
107+
onChange={(v) => onChangeFilters([
108+
{
109+
id: 'type',
110+
value: v,
111+
filter: `type: ${v}`,
112+
},
113+
])}
114+
withNull={false}
115+
/>
116+
</StyledGridItem>
117+
<StyledGridItem item xs={12} sm={6} md={2}>
118+
<PublishedComponent
119+
pubRef="core.DatePicker"
120+
module="socialProtection"
121+
label="benefitPlan.dateValidFrom"
122+
value={filterValue('dateValidFrom')}
123+
onChange={(v) => onChangeFilters([
124+
{
125+
id: 'dateValidFrom',
126+
value: v,
127+
filter: `dateValidFrom: "${v}T00:00:00.000Z"`,
128+
},
129+
])}
130+
/>
131+
</StyledGridItem>
132+
<StyledGridItem item xs={12} sm={6} md={2}>
133+
<PublishedComponent
134+
pubRef="core.DatePicker"
135+
module="socialProtection"
136+
label="benefitPlan.dateValidTo"
137+
value={filterValue('dateValidTo')}
138+
onChange={(v) => onChangeFilters([
146139
{
147-
id: 'beneficiaryStatus',
148-
value,
149-
filter: `beneficiaryStatus: "${value}"`,
140+
id: 'dateValidTo',
141+
value: v,
142+
filter: `dateValidTo: "${v}T00:00:00.000Z"`,
150143
},
151144
])}
152145
/>
153146
</StyledGridItem>
154-
)}
155-
</StyledGrid>
147+
<StyledCheckboxGridItem item xs={12} sm={6} md={2}>
148+
<FormControlLabel
149+
control={(
150+
<Checkbox
151+
color="primary"
152+
checked={filterValue('isDeleted')}
153+
onChange={(event) => onChangeCheckbox(
154+
'isDeleted',
155+
event.target.checked,
156+
)}
157+
/>
158+
)}
159+
label={formatMessage(intl, 'socialProtection', 'benefitPlan.isDeleted')}
160+
/>
161+
</StyledCheckboxGridItem>
162+
{showStatuses && (
163+
<StyledGridItem item xs={12} sm={6} md={2}>
164+
<BeneficiaryStatusPicker
165+
label="beneficiary.beneficiaryStatusPicker"
166+
withNull
167+
nullLabel={formatMessage(intl, 'socialProtection', 'any')}
168+
value={filterValue('beneficiaryStatus')}
169+
onChange={(value) => onChangeFilters([
170+
{
171+
id: 'beneficiaryStatus',
172+
value,
173+
filter: `beneficiaryStatus: "${value}"`,
174+
},
175+
])}
176+
/>
177+
</StyledGridItem>
178+
)}
179+
</StyledGrid>
180+
</Grid>
156181
);
157182
}
158183

‎src/components/BenefitPlanSearcherForEntities.jsx‎

Lines changed: 76 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import { bindActionCreators } from 'redux';
1616
import { connect } from 'react-redux';
1717
import { IconButton, Tooltip } from '@mui/material';
18+
import { styled } from '@mui/material/styles';
1819
import EditIcon from '@mui/icons-material/Edit';
1920
import DeleteIcon from '@mui/icons-material/Delete';
2021
import PreviewIcon from '@mui/icons-material/ListAlt';
@@ -32,6 +33,37 @@ import {
3233
} from '../actions';
3334
import BenefitPlanFilter from './BenefitPlanFilter';
3435

36+
const StyledBenefitPlanSearcher = styled('div')(({ theme }) => ({
37+
// '& .MuiTable-root': {
38+
// '& .MuiTableHead-root': {
39+
// '& .MuiTableRow-root': {
40+
// '& .MuiTableCell-root': {
41+
// '&:nth-of-type(1)': { width: '15%', minWidth: '120px' },
42+
// '&:nth-of-type(2)': { width: '25%', minWidth: '200px' },
43+
// '&:nth-of-type(3)': { width: '15%', minWidth: '120px' },
44+
// '&:nth-of-type(4)': { width: '15%', minWidth: '120px' },
45+
// '&:nth-of-type(5)': { width: '15%', minWidth: '120px' },
46+
// '&:nth-of-type(6)': { width: '10%', minWidth: '100px' },
47+
// '&:nth-of-type(7)': { width: '5%', minWidth: '60px' },
48+
// },
49+
// },
50+
// },
51+
// '& .MuiTableBody-root': {
52+
// '& .MuiTableRow-root': {
53+
// '& .MuiTableCell-root': {
54+
// '&:nth-of-type(1)': { width: '15%', minWidth: '120px' },
55+
// '&:nth-of-type(2)': { width: '25%', minWidth: '200px' },
56+
// '&:nth-of-type(3)': { width: '15%', minWidth: '120px' },
57+
// '&:nth-of-type(4)': { width: '15%', minWidth: '120px' },
58+
// '&:nth-of-type(5)': { width: '15%', minWidth: '120px' },
59+
// '&:nth-of-type(6)': { width: '10%', minWidth: '100px' },
60+
// '&:nth-of-type(7)': { width: '5%', minWidth: '60px' },
61+
// },
62+
// },
63+
// },
64+
// },
65+
}));
66+
3567
function BenefitPlanSearcherForEntities({
3668
intl,
3769
modulesManager,
@@ -234,6 +266,24 @@ function BenefitPlanSearcherForEntities({
234266
['maxBeneficiaries', true],
235267
];
236268

269+
const aligns = () => {
270+
const alignments = [
271+
'left', // Code
272+
'left', // Name
273+
'left', // Type
274+
'center', // Date Valid From
275+
'center', // Date Valid To
276+
'center', // Max Beneficiaries
277+
];
278+
if (rights.includes(RIGHT_BENEFIT_PLAN_UPDATE)) {
279+
alignments.push('center'); // Edit/Preview action
280+
}
281+
if (rights.includes(RIGHT_BENEFIT_PLAN_DELETE)) {
282+
alignments.push('center'); // Delete action
283+
}
284+
return alignments;
285+
};
286+
237287
const isRowDisabled = (_, benefitPlan) => deletedBenefitPlanUuids.includes(benefitPlan?.id);
238288

239289
const defaultFilters = () => ({
@@ -276,29 +326,32 @@ function BenefitPlanSearcherForEntities({
276326
}
277327

278328
return (
279-
<Searcher
280-
module="socialProtection"
281-
FilterPane={benefitPlanFilter}
282-
fetch={fetch}
283-
items={benefitPlans}
284-
itemsPageInfo={benefitPlansPageInfo}
285-
fetchedItems={fetchingState}
286-
errorItems={errorState}
287-
tableTitle={formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.searcherResultsTitle', {
288-
benefitPlansTotalCount,
289-
})}
290-
headers={headers}
291-
itemFormatters={itemFormatters}
292-
sorts={sorts}
293-
rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
294-
defaultPageSize={DEFAULT_PAGE_SIZE}
295-
defaultOrderBy="code"
296-
rowIdentifier={rowIdentifier}
297-
onDoubleClick={onDoubleClick}
298-
defaultFilters={defaultFilters()}
299-
rowDisabled={isRowDisabled}
300-
rowLocked={isRowDisabled}
301-
/>
329+
<StyledBenefitPlanSearcher>
330+
<Searcher
331+
module="socialProtection"
332+
FilterPane={benefitPlanFilter}
333+
fetch={fetch}
334+
items={benefitPlans}
335+
itemsPageInfo={benefitPlansPageInfo}
336+
fetchedItems={fetchingState}
337+
errorItems={errorState}
338+
tableTitle={formatMessageWithValues(intl, 'socialProtection', 'benefitPlan.searcherResultsTitle', {
339+
benefitPlansTotalCount,
340+
})}
341+
headers={headers}
342+
aligns={aligns}
343+
itemFormatters={itemFormatters}
344+
sorts={sorts}
345+
rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
346+
defaultPageSize={DEFAULT_PAGE_SIZE}
347+
defaultOrderBy="code"
348+
rowIdentifier={rowIdentifier}
349+
onDoubleClick={onDoubleClick}
350+
defaultFilters={defaultFilters()}
351+
rowDisabled={isRowDisabled}
352+
rowLocked={isRowDisabled}
353+
/>
354+
</StyledBenefitPlanSearcher>
302355
);
303356
}
304357

0 commit comments

Comments
 (0)