UI changes and etc (#101)

Samarth-HP · Nov 7, 2022 · 5659349 · 5659349
1 parent b05ba9c
commit 5659349
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 39 deletions.
diff --git a/admin/components/layout/themes.ts b/admin/components/layout/themes.ts
@@ -17,7 +17,7 @@ export const lightTheme = {
     mode: "light" as "light",
   },
   shape: {
-    borderRadius: 10,
+    borderRadius: 5,
   },
   sidebar: {
     width: 260,

diff --git a/admin/resources/user/ChangePasswordButton.tsx b/admin/resources/user/ChangePasswordButton.tsx
@@ -13,7 +13,7 @@ export const ChangePasswordButton = ({ record }: any) => {
     () =>
       dataProvider.changePassword(resource, {
         loginId: record?.username,
-        password: resource === "e_samwaad_user" || "shiksha_saathi_user" ? "himachal12345" : "1234abcd",
+        password: resource == "shiksha_saathi_user" ? "1234abcd" : resource == "e_samwaad_user" ? "himachal12345" : null
       }),
 
     {

diff --git a/admin/resources/user/esamwaad/UserCreate.tsx b/admin/resources/user/esamwaad/UserCreate.tsx
@@ -71,7 +71,8 @@ const UserCreate = (props: any) => {
     const res = client.post(endPoint, body);
     res.then((data) => {
       if (data?.data?.responseCode === "OK") {
-        setUserCreated(true);
+        notify(`User created successfully`, { type: 'success' });
+        window.location.replace('/#/e_samwaad_user')
       } else if (data?.data?.status != 200) {
         const errorStrings: String[] = [];
         const errors = data?.data?.exception?.fieldErrors;
@@ -198,7 +199,7 @@ const UserCreate = (props: any) => {
               onChange={(e) => setState({ ...state, udise: e.target.value })}
               source="udise"
               label="School UDISE"
-              validate={inputConstraints.udise}
+            // validate={inputConstraints.udise}
             />
           </>
         </ReferenceInput>

diff --git a/admin/resources/user/esamwaad/UserEdit.tsx b/admin/resources/user/esamwaad/UserEdit.tsx
@@ -274,10 +274,7 @@ const UserForm = () => {
   const inputConstraints = {
     userName: [
       required("Please provide username"),
-      regex(
-        /^[a-zA-Z0-9 ]*$/,
-        "Name can only contain alphabets, numbers and spaces"
-      ),
+      regex(/^[a-zA-Z0-9 ]*$/, "Name can only contain alphabets, numbers and spaces")
     ],
     udise: [
       required("Please provide UDISE"),

diff --git a/admin/resources/user/esamwaad/UserList.tsx b/admin/resources/user/esamwaad/UserList.tsx
@@ -31,12 +31,13 @@ const DisplayRoles = (a: any) => {
     return (
       <span
         style={{
-          padding: "7px 10px",
+          padding: "3px 10px",
           margin: "5px",
-          color: "white",
-          borderRadius: "25px",
-          backgroundColor: "#5a968b",
+          color: "#fff",
+          borderRadius: "0.5rem",
+          background: `${role == "Teacher" ? '#2A8E82' : role == "Principal" ? "#3E766D" : "#668E86"}`,
           display: "inline-block",
+          fontWeight: 'bold'
         }}
         key={index}
       >
@@ -278,12 +279,11 @@ const UserList = () => {
     <ListDataGridWithPermissions
       listProps={{ filters: Filters }}
     >
-      <TextField source="username" sortable={false}/>
-      <NumberField source="data.udise" label="UDISE" sortable={false}/>
-      <ColoredChipField label="Account Status" source="usernameStatus" sortable={false}/>
+      <TextField source="username" sortable={false} />
+      <NumberField source="data.udise" label="UDISE" sortable={false} />
       <FunctionField
         label="Full Name"
-        render={(record: any) => `${record.firstName} ${record.lastName}`}
+        render={(record: any) => `${record.firstName || '----------------------'} ${record.lastName || ""}`}
       />
       ;
       <NumberField source="mobilePhone" label="Mobile Phone" sortable={false} />

diff --git a/admin/resources/user/shikshaSaathi/UserCreate.tsx b/admin/resources/user/shikshaSaathi/UserCreate.tsx
@@ -10,6 +10,7 @@ import {
   maxLength,
   required,
   number,
+  useNotify,
   useDataProvider,
 } from "react-admin";
 import { useLogin } from "../hooks";
@@ -31,6 +32,8 @@ const UserCreate = (props: any) => {
   const { user: _loggedInUser } = useLogin();
   const [userCreated, setUserCreated] = useState(false);
   const [scope, setScope] = useState("No");
+  const notify = useNotify();
+
   const [state, setState] = useState({
     userName: "",
     fullName: "",
@@ -74,7 +77,8 @@ const UserCreate = (props: any) => {
 
     res.then((data) => {
       if (data?.data?.responseCode === "OK") {
-        setUserCreated(true);
+        notify(`User created successfully`, { type: 'success' });
+        window.location.replace('/#/shiksha_saathi_user')
       }
     });
   };

diff --git a/admin/resources/user/shikshaSaathi/UserList.tsx b/admin/resources/user/shikshaSaathi/UserList.tsx
@@ -34,12 +34,13 @@ const DisplayRoles = (a: any) => {
     return (
       <span
         style={{
-          padding: "7px 10px",
+          padding: "3px 10px",
           margin: "5px",
-          color: "white",
-          borderRadius: "25px",
-          backgroundColor: "#5a968b",
+          color: "#fff",
+          borderRadius: "0.5rem",
+          background: "#668E86",
           display: "inline-block",
+          fontWeight: 'bold'
         }}
         key={index}
       >
@@ -135,7 +136,7 @@ const UserList = () => {
     if (!districtData) {
       return [];
     }
-    if(!selectedDistrict){
+    if (!selectedDistrict) {
       return _.uniqBy(
         districtData,
         "block"
@@ -161,7 +162,7 @@ const UserList = () => {
     if (!districtData) {
       return [];
     }
-    if(!selectedBlock){
+    if (!selectedBlock) {
       return _.uniqBy(
         districtData,
         "cluster"
@@ -184,7 +185,7 @@ const UserList = () => {
   }, [selectedBlock, districtData]);
   const rolesChoices: any = designationLevels;
   const Filters = [
-    <TextInput source="username" alwaysOn key={"search"}/>,
+    <TextInput source="username" alwaysOn key={"search"} />,
     <SelectInput
       label="Role"
       source="shikshaRoles"
@@ -226,20 +227,20 @@ const UserList = () => {
 
   return (
     <ListDataGridWithPermissions
-      listProps={{ filters: Filters , exporter: false }}
+      listProps={{ filters: Filters, exporter: false }}
     >
-      <TextField source="username" sortable={false} />
+      <TextField source="username" sortable={false} sx={{ fontSize: '0.8rem' }} />
       <TextField source="fullName" sortable={false} />
-      <NumberField source="mobilePhone" label="Mobile Phone" sortable={false}/>
+      <NumberField source="mobilePhone" label="Mobile Phone" sortable={false} />
       <FunctionField
         label="Role"
         render={(record: any) => {
           return DisplayRoles(record);
         }}
       />
-      <TextField source="data.roleData.district" label="District" sortable={false}/>
-      <TextField source="data.roleData.block" label="Block" sortable={false}/>
-      <TextField source="data.roleData.cluster" label="Cluster" sortable={false}/>
+      <TextField source="data.roleData.district" label="District" sortable={false} />
+      <TextField source="data.roleData.block" label="Block" sortable={false} />
+      <TextField source="data.roleData.cluster" label="Cluster" sortable={false} />
     </ListDataGridWithPermissions>
   );
 };

diff --git a/admin/resources/user/shikshaSaathi/index.ts b/admin/resources/user/shikshaSaathi/index.ts
@@ -3,13 +3,12 @@ import SchoolIcon from "@mui/icons-material/School";
 import UserList from "./UserList";
 import UserEdit from "./UserEdit";
 import UserCreate from "./UserCreate";
-import UserShow from "./UserShow";
+// import UserShow from "./UserShow";
 
 export default {
   list: UserList,
   edit: UserEdit,
   create: UserCreate,
-  show: UserShow,
   permissions: {
     canEdit: ["Admin"],
     canDelete: ["Admin"],

diff --git a/styles/globals.css b/styles/globals.css
@@ -15,12 +15,15 @@ body {
 /* Styling Tables */
 .RaDatagrid-headerCell {
   font-weight: bold !important;
-  background-color: #d9d9d9 !important;
-  border-bottom: 1px solid black !important;
+  /* background-color: var(--green-primary) !important; */
+  background-color: var(--green-primary) !important;
+  color: #fff !important;
+  padding: 0.8rem 1rem !important;
+
 }
 
 .RaDatagrid-rowOdd {
-  background-color: #e9e9e9;
+  background-color: #F2F2F2;
 }
 
 /* Styling Input Fields*/
@@ -121,9 +124,9 @@ body {
 }
 
 .custom_text_field {
-  background: var(--gray-primary) !important;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
+  background: #f0f0f0 !important;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
   padding: 0rem 0.8rem;
   border-bottom: 3px solid rgba(0, 0, 0, 0.2) !important;
   min-width: 15rem;
@@ -141,7 +144,7 @@ body {
 }
 
 .custom_text_field p:nth-child(2) {
-  font-size: 1.2rem;
+  font-size: 1rem;
   line-height: 0.5rem;
   position: absolute;
   color: rgba(0, 0, 0, 0.8);
@@ -155,4 +158,23 @@ body {
   gap: 8rem;
   margin: 2rem 0rem 7rem 0rem;
   justify-content: center;
+}
+
+.MuiTypography-root {
+  font-size: 0.85rem !important;
+}
+
+.MuiTableCell-head svg {
+  color: #fff !important;
+}
+
+.MuiTableCell-head span {
+  color: #fff !important;
+}
+
+.MuiFilledInput-root {
+  background: #f0f0f0 !important;
+  border: none !important;
+
+  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; */
 }