Skip to content

Commit cafa6d8

Browse files
ombhardwajjombhardwajj
committed
#1506 | Styling Fixes for admin section
1 parent 0418e6d commit cafa6d8

14 files changed

+561
-259
lines changed

‎src/adminApp/Account.jsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import {
77
SimpleForm,
88
SimpleShowLayout,
99
TextField,
10-
TextInput,
1110
Toolbar,
1211
SaveButton
1312
} from "react-admin";
1413
import { Title } from "./components/Title";
14+
import { StyledBox, StyledTextInput, datagridStyles } from "./Util/Styles";
15+
import { PrettyPagination } from "./Util/PrettyPagination.tsx";
1516

1617
//To remove delete button from the toolbar
1718
const CustomToolbar = props => (
@@ -21,12 +22,20 @@ const CustomToolbar = props => (
2122
);
2223

2324
export const AccountList = props => (
24-
<List {...props} bulkActions={false} filter={{ searchURI: "findAll" }}>
25-
<Datagrid rowClick="show">
26-
<TextField label="Name" source="name" />
27-
<TextField label="Region" source="region" />
28-
</Datagrid>
29-
</List>
25+
<StyledBox>
26+
<List
27+
{...props}
28+
bulkActionButtons={false}
29+
filter={{ searchURI: "findAll" }}
30+
sort={{ field: "id", order: "DESC" }}
31+
pagination={<PrettyPagination />}
32+
>
33+
<Datagrid rowClick="show" bulkActionButtons={false} sx={datagridStyles}>
34+
<TextField label="Name" source="name" />
35+
<TextField label="Region" source="region" />
36+
</Datagrid>
37+
</List>
38+
</StyledBox>
3039
);
3140

3241
export const AccountDetails = props => (
@@ -41,17 +50,17 @@ export const AccountDetails = props => (
4150
export const AccountCreate = props => (
4251
<Create title="Add a new Account" {...props}>
4352
<SimpleForm redirect="list">
44-
<TextInput source="name" />
45-
<TextInput source="region" />
53+
<StyledTextInput source="name" />
54+
<StyledTextInput source="region" />
4655
</SimpleForm>
4756
</Create>
4857
);
4958

5059
export const AccountEdit = props => (
5160
<Edit undoable={false} title={<Title title={"Edit account"} />} {...props}>
5261
<SimpleForm toolbar={<CustomToolbar />} redirect="list">
53-
<TextInput source="name" />
54-
<TextInput source="region" />
62+
<StyledTextInput source="name" />
63+
<StyledTextInput source="region" />
5564
</SimpleForm>
5665
</Edit>
5766
);

‎src/adminApp/AccountOrgAdminUser.jsx‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useEffect, useState } from "react";
22
import {
3-
AutocompleteArrayInput,
43
Create,
54
Datagrid,
65
Edit,
@@ -15,7 +14,6 @@ import {
1514
SimpleShowLayout,
1615
SingleFieldList,
1716
TextField,
18-
TextInput,
1917
required,
2018
useRecordContext,
2119
useResourceContext
@@ -36,6 +34,13 @@ import {
3634
import { TitleChip } from "./components/TitleChip";
3735
import OrganisationService from "../common/service/OrganisationService";
3836
import ApplicationContext from "../ApplicationContext";
37+
import {
38+
StyledBox,
39+
StyledTextInput,
40+
datagridStyles,
41+
StyledAutocompleteArrayInput
42+
} from "./Util/Styles";
43+
import { PrettyPagination } from "./Util/PrettyPagination.tsx";
3944

4045
export const AccountOrgAdminUserCreate = ({ user, region, ...props }) => (
4146
<Create {...props}>
@@ -57,30 +62,34 @@ export const AccountOrgAdminUserEdit = ({ user, region, ...props }) => (
5762
);
5863

5964
export const AccountOrgAdminUserList = props => (
60-
<List
61-
{...props}
62-
bulkActionButtons={false}
63-
filters={UserFilter}
64-
filter={{ searchURI: "find" }}
65-
title="Admin Users"
66-
>
67-
<Datagrid rowClick="show">
68-
<TextField label="Login ID" source="username" />
69-
<TextField source="name" label="Name of the Person" />
70-
<TextField source="email" label="Email Address" />
71-
<TextField source="phoneNumber" label="Phone Number" />
72-
<FunctionField
73-
label="Status"
74-
render={user =>
75-
user.voided === true
76-
? "Deleted"
77-
: user.disabledInCognito === true
78-
? "Disabled"
79-
: "Active"
80-
}
81-
/>
82-
</Datagrid>
83-
</List>
65+
<StyledBox>
66+
<List
67+
{...props}
68+
bulkActionButtons={false}
69+
filters={UserFilter}
70+
filter={{ searchURI: "find" }}
71+
sort={{ field: "id", order: "DESC" }}
72+
title="Admin Users"
73+
pagination={<PrettyPagination />}
74+
>
75+
<Datagrid rowClick="show" bulkActionButtons={false} sx={datagridStyles}>
76+
<TextField label="Login ID" source="username" />
77+
<TextField source="name" label="Name of the Person" />
78+
<TextField source="email" label="Email Address" />
79+
<TextField source="phoneNumber" label="Phone Number" />
80+
<FunctionField
81+
label="Status"
82+
render={user =>
83+
user.voided === true
84+
? "Deleted"
85+
: user.disabledInCognito === true
86+
? "Disabled"
87+
: "Active"
88+
}
89+
/>
90+
</Datagrid>
91+
</List>
92+
</StyledBox>
8493
);
8594

8695
const CustomShowActions = () => {
@@ -170,45 +179,45 @@ const UserFormFields = ({ edit = false, region }) => {
170179
validate={required("Please select one or more accounts")}
171180
filterToQuery={searchText => ({ name: searchText })}
172181
>
173-
<AutocompleteArrayInput />
182+
<StyledAutocompleteArrayInput />
174183
</ReferenceArrayInput>
175184

176185
{edit ? (
177186
<>
178-
<TextInput
187+
<StyledTextInput
179188
disabled
180189
source="username"
181190
label="Login ID (admin username)"
182191
/>
183192
{/* Hidden field to ensure username is included in payload */}
184-
<TextInput source="username" style={{ display: "none" }} />
193+
<StyledTextInput source="username" style={{ display: "none" }} />
185194
</>
186195
) : (
187196
<>
188-
<TextInput
197+
<StyledTextInput
189198
source="username"
190199
validate={isRequired}
191200
label="Login ID (username)"
192201
/>
193202
{nameSuffix && <span>@{nameSuffix}</span>}
194-
<TextInput source="username" style={{ display: "none" }} />
203+
<StyledTextInput source="username" style={{ display: "none" }} />
195204
</>
196205
)}
197206

198207
{!edit && <PasswordTextField />}
199-
<TextInput
208+
<StyledTextInput
200209
source="name"
201210
label="Name of the Person"
202211
validate={isRequired}
203212
autoComplete={autoComplete}
204213
/>
205-
<TextInput
214+
<StyledTextInput
206215
source="email"
207216
label="Email Address"
208217
validate={validateEmail}
209218
autoComplete={autoComplete}
210219
/>
211-
<TextInput
220+
<StyledTextInput
212221
source="phoneNumber"
213222
validate={getPhoneValidator(region)}
214223
autoComplete={autoComplete}

‎src/adminApp/IdentifierSource.jsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import { DocumentationContainer } from "../common/components/DocumentationContai
1818
import { AvniTextInput } from "./components/AvniTextInput";
1919
import { AvniSelectInput } from "./components/AvniSelectInput";
2020
import { AvniFormDataConsumer } from "./components/AvniFormDataConsumer";
21+
import { StyledBox, datagridStyles } from "./Util/Styles";
22+
import { PrettyPagination } from "./Util/PrettyPagination";
2123

2224
const sourceType = {
2325
userBasedIdentifierGenerator: {
@@ -59,18 +61,24 @@ const ShowSourceType = props => {
5961
};
6062

6163
export const IdentifierSourceList = props => (
62-
<List {...props} title="Identifier Source">
63-
<Datagrid rowClick="show">
64-
<TextField source="name" />
65-
<ShowSourceType source="type" showSourceTypeLabel={false} />
66-
<TextField source="batchGenerationSize" />
67-
<TextField source="minLength" />
68-
<TextField source="maxLength" />
69-
<ReferenceField source="catchmentId" reference="catchment">
64+
<StyledBox>
65+
<List
66+
{...props}
67+
title="Identifier Source"
68+
pagination={<PrettyPagination />}
69+
>
70+
<Datagrid rowClick="show" bulkActionButtons={false} sx={datagridStyles}>
7071
<TextField source="name" />
71-
</ReferenceField>
72-
</Datagrid>
73-
</List>
72+
<ShowSourceType source="type" showSourceTypeLabel={false} />
73+
<TextField source="batchGenerationSize" />
74+
<TextField source="minLength" />
75+
<TextField source="maxLength" />
76+
<ReferenceField source="catchmentId" reference="catchment">
77+
<TextField source="name" />
78+
</ReferenceField>
79+
</Datagrid>
80+
</List>
81+
</StyledBox>
7482
);
7583

7684
export const IdentifierSourceDetail = props => (

‎src/adminApp/IdentifierUserAssignment.jsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { DocumentationContainer } from "../common/components/DocumentationContai
1818
import { AvniTextInput } from "./components/AvniTextInput";
1919
import { AvniFormDataConsumer } from "./components/AvniFormDataConsumer";
2020
import { Paper } from "@mui/material";
21+
import { StyledBox, datagridStyles } from "./Util/Styles";
2122

2223
const Title = ({ record }) => {
2324
return (
@@ -30,14 +31,16 @@ const Title = ({ record }) => {
3031
};
3132

3233
export const IdentifierUserAssignmentList = props => (
33-
<List {...props} title={"Identifier User Assignment"}>
34-
<Datagrid rowClick="show">
35-
<TextField source="name" label="Source name" />
36-
<TextField source="userName" label="User name" />
37-
<TextField source="identifierStart" />
38-
<TextField source="identifierEnd" />
39-
</Datagrid>
40-
</List>
34+
<StyledBox>
35+
<List {...props} title={"Identifier User Assignment"}>
36+
<Datagrid rowClick="show" bulkActionButtons={false} sx={datagridStyles}>
37+
<TextField source="name" label="Source name" />
38+
<TextField source="userName" label="User name" />
39+
<TextField source="identifierStart" />
40+
<TextField source="identifierEnd" />
41+
</Datagrid>
42+
</List>
43+
</StyledBox>
4144
);
4245

4346
export const IdentifierUserAssignmentDetail = props => {

0 commit comments

Comments
 (0)