@material-ui/core/styles#createStyles JavaScript Examples
The following examples show how to use
@material-ui/core/styles#createStyles.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: GrantsPageStyles.jsx From grants-fe with MIT License | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
maxWidth: 1345,
background: color.accent,
},
container: {
padding: "50px 0 0 0",
width: "80%",
margin: "auto",
},
appHeader: {},
})
)
Example #2
| Source File: SettingsDialog.js From symbl-twilio-video-react with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
container: {
width: '525px',
minHeight: '400px',
[theme.breakpoints.down('xs')]: {
width: 'calc(100vw - 32px)',
},
'& .inputSelect': {
width: 'calc(100% - 35px)',
},
},
button: {
float: 'right',
},
paper: {
[theme.breakpoints.down('xs')]: {
margin: '16px',
},
},
})
)
Example #3
| Source File: ToggleScreenShareButton.js From symbl-twilio-video-react with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
fab: {
margin: theme.spacing(1),
'&[disabled]': {
color: 'rgba(225, 225, 225, 0.8)',
backgroundColor: 'rgba(175, 175, 175, 0.6);',
},
},
})
)
Example #4
| Source File: Controls.js From symbl-twilio-video-react with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
container: {
display: 'flex',
position: 'absolute',
right: '50%',
transform: 'translate(50%, 30px)',
bottom: '50px',
zIndex: 2100,
transition: 'opacity 1.2s, transform 1.2s, visibility 0s 1.2s',
opacity: 0,
visibility: 'hidden',
maxWidth: 'min-content',
'&.showControls, &:hover': {
transition: 'opacity 0.6s, transform 0.6s, visibility 0s',
opacity: 1,
visibility: 'visible',
transform: 'translate(50%, 0px)',
},
[theme.breakpoints.down('xs')]: {
bottom: `${theme.sidebarMobileHeight + 3}px`,
},
},
})
)
Example #5
| Source File: ClosedCaptions.js From symbl-twilio-video-react with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles(() =>
createStyles({
container: {
textAlign: 'center',
bottom: 50,
position: 'absolute',
width: '100%',
zIndex: 1000,
height: '6.8em',
overflow: 'hidden',
// maxWidth: 'min-content'
},
paper: {
padding: 12,
width: 'fit-content',
border: 'none',
alignItems: 'center',
display: 'inline-block',
backgroundColor: 'rgb(0,0,0, 0)',
zIndex: 1000,
maxWidth: '60vw'
},
caption: {
fontWeight: 600,
fontSize: '3vh',
color: '#fefefe',
textShadow: '2px 2px #1A1A1A'
}
})
)
Example #6
| Source File: Stepper.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(2)
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}),
)
Example #7
| Source File: Search.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
padding: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 400,
},
input: {
marginLeft: theme.spacing(1),
flex: 1,
},
iconButton: {
padding: 10,
},
divider: {
height: 28,
margin: 4,
},
}),
)
Example #8
| Source File: OrderItems.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
table: {
minWidth: 500,
width: '95%',
margin: 'auto',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(1)
},
})
)
Example #9
| Source File: OrderInfo.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(2)
},
text: {
margin: theme.spacing(2),
}
}),
)
Example #10
| Source File: MedicineList.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableRow = withStyles((theme: Theme) =>
createStyles({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}),
)(TableRow)
Example #11
| Source File: MedicineList.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableCell = withStyles((theme: Theme) =>
createStyles({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}),
)(TableCell)
Example #12
| Source File: EventLogs.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableCell = withStyles((theme: Theme) =>
createStyles({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}),
)(TableCell)
Example #13
| Source File: CameraOptions.jsx From viv with MIT License | 6 votes |
|
useStyles = makeStyles(theme =>
createStyles({
enabled: {
marginLeft: '4px'
},
disabled: {
color: theme.palette.text.disabled,
marginLeft: '4px'
}
})
)
Example #14
| Source File: SideUser.js From gedge-platform with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles(() =>
createStyles({
popover: {
'& .MuiPopover-paper': {
border: '1px solid #0a2348',
backgroundColor: '#fff',
boxShadow: 'none',
borderRadius: '0',
minWidth: 182,
margin: '5px 0 0 -1px',
},
'& .MuiList-root': {
padding: 0,
'& .MuiListItem-root': {
font: 'inherit',
color: `${theme.colors.defaultDark}`,
borderTop: '1px solid #e9eef0',
padding: '10px 12px',
position: 'relative',
'&:hover': {
backgroundColor: '#f5f6f9',
borderColor: '#ebecef',
},
'&:hover + .MuiListItem-root ': {
borderTopColor: '#ebecef',
},
'&:first-child': {
borderTopWidth: 0
},
'& a': {
color: `${theme.colors.defaultDark}`,
textDecoration: 'none',
}
},
},
},
}),
)
Example #15
| Source File: Navigator.js From acsys with MIT License | 6 votes |
|
styles = (theme) =>
createStyles({
categoryHeader: {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
},
categoryHeaderPrimary: {
color: theme.palette.common.white,
},
item: {
paddingTop: 1,
paddingBottom: 1,
color: '#ffffff',
'&:hover,&:focus': {
color: '#c5a8ff',
backgroundColor: 'rgba(255, 255, 255, 0.08)',
},
},
itemCategory: {
backgroundColor: '#232f3e',
paddingTop: theme.spacing(2),
},
firebase: {
fontSize: 24,
color: theme.palette.common.white,
},
itemPrimary: {
fontSize: 'inherit',
},
itemIcon: {
minWidth: 'auto',
marginRight: theme.spacing(2),
},
toolbar: theme.mixins.appbar,
divider: {
marginTop: theme.spacing(2),
},
})
Example #16
| Source File: App.js From bunk-manager-mern with MIT License | 6 votes |
|
styles = (theme) =>
createStyles({
App: {
display: "flex",
flexDirection: "column",
margin: 0,
padding: 0,
top: 0,
left: 0,
width: "100%",
minHeight: "100vh",
position: "relative",
},
})
Example #17
| Source File: HomepageStyles.jsx From grants-fe with MIT License | 6 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
maxWidth: 1345,
background: color.accent,
},
container: {
padding: "50px 0 0 0",
width: "80%",
margin: "auto",
},
appHeader: {},
})
)
Example #18
| Source File: EventLogs.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableRow = withStyles((theme: Theme) =>
createStyles({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}),
)(TableRow)
Example #19
| Source File: EndCallButton.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
fab: {
margin: theme.spacing(1),
},
})
)
Example #20
| Source File: App.js From checkmynft with MIT License | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
flexGrow: 1,
},
loaderStrong: {
backgroundColor: "rgba(196, 196, 196, 1)",
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "#16CA48",
},
},
loaderMedium: {
backgroundColor: "rgba(196, 196, 196, 1)",
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "#EDD820",
},
},
loaderPoor: {
backgroundColor: "rgba(196, 196, 196, 1)",
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "#FF6161",
},
},
loaderUndefined: {
backgroundColor: "rgba(196, 196, 196, 1)",
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "#C4C4C4",
},
},
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
outline: "none",
},
paper: {
backgroundColor: theme.palette.background.paper,
borderRadius: "20px",
padding: theme.spacing(4, 4, 4, 4),
outline: "none",
},
})
)
Example #21
| Source File: ParticipantInfo.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
container: {
position: 'relative',
display: 'flex',
alignItems: 'center',
height: `${(theme.sidebarWidth * 9) / 16}px`,
overflow: 'hidden',
cursor: 'pointer',
'& video': {
filter: 'none',
},
'& svg': {
stroke: 'black',
strokeWidth: '0.8px',
},
[theme.breakpoints.down('xs')]: {
height: theme.sidebarMobileHeight,
width: `${(theme.sidebarMobileHeight * 16) / 9}px`,
marginRight: '3px',
fontSize: '10px',
},
},
isVideoSwitchedOff: {
'& video': {
filter: 'blur(4px) grayscale(1) brightness(0.5)',
},
},
infoContainer: {
position: 'absolute',
zIndex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: '100%',
padding: '0.4em',
width: '100%',
background: 'transparent',
},
hideVideo: {
background: 'black',
},
identity: {
background: 'rgba(0, 0, 0, 0.7)',
padding: '0.1em 0.3em',
margin: 0,
display: 'flex',
alignItems: 'center',
},
infoRow: {
display: 'flex',
justifyContent: 'space-between',
},
})
)
Example #22
| Source File: MenuBar.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
container: {
backgroundColor: theme.palette.background.default,
},
toolbar: {
[theme.breakpoints.down('xs')]: {
padding: 0,
},
},
rightButtonContainer: {
display: 'flex',
alignItems: 'center',
marginLeft: 'auto',
},
form: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
[theme.breakpoints.up('md')]: {
marginLeft: '2.2em',
},
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
maxWidth: 200,
},
loadingSpinner: {
marginLeft: '1em',
},
displayName: {
margin: '1.1em 0.6em',
minWidth: '200px',
fontWeight: 600,
},
joinButton: {
margin: '1em',
},
})
)
Example #23
| Source File: ToggleVideoButton.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
fab: {
margin: theme.spacing(1),
},
})
)
Example #24
| Source File: ToggleAudioButton.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
fab: {
margin: theme.spacing(1),
},
})
)
Example #25
| Source File: HomePageUserCardStyles.jsx From grants-fe with MIT License | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
maxWidth: 1345,
// background: theme.palette.common.aqua,
},
media: {
margin: "auto",
width: "200px",
height: "100px",
borderRadius: "5px",
overflow: "hidden",
},
userInfo: {
display: "flex",
justifyContent: "center",
lineHeight: "10px",
padding: "0 50px",
},
applicant: {
border: `1px solid ${theme.palette.primary.main}`,
},
writer: {
border: `1px solid ${theme.palette.secondary.main}`,
},
userRight: {
width: "100%",
},
userDisplay: {
margin: "10px auto",
},
userP: {
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
bio: {
lineHeight: 1.25,
},
})
)
Example #26
| Source File: WeatherIcon.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
cardMedia: {
height: 150
}
}),
)
Example #27
| Source File: GrantCardStyles.jsx From grants-fe with MIT License | 4 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
maxWidth: 1345,
border: `1px solid ${theme.palette.secondary.main}`,
boxShadow: "30px",
[theme.breakpoints.up("md")]: {
height: "auto",
},
},
header: {
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
[theme.breakpoints.up("sm")]: {
flexDirection: "row",
},
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
avatar: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
backgroundColor: theme.palette.primary.main,
},
},
title: {
textAlign: "center",
[theme.breakpoints.up("md")]: {
textAlign: "left",
},
[theme.breakpoints.between("sm", "md")]: {
textAlign: "left",
maxWidth: "200px",
},
},
boxInfo: {
display: "flex",
flexDirection: "row",
padding: "0 0 0 0",
paddingBottom: "0px",
[theme.breakpoints.between("sm", "md")]: {
display: "flex",
flexDirection: "column",
},
},
boxes: {
backgroundColor: theme.palette.common.aqua,
display: "flex",
justifyContent: "center",
color: theme.palette.primary,
width: "100px",
margin: "5px",
height: "auto",
[theme.breakpoints.up("md")]: {
alignItems: "center",
},
},
content: {
width: "100%",
textAlign: "left",
padding: "0px",
display: "flex",
flexDirection: "column",
[theme.breakpoints.up("sm")]: {
flexDirection: "row",
},
},
desc: {
width: "100%",
textAlign: "left",
paddingLeft: "0px",
},
actionTop: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
margin: "auto",
[theme.breakpoints.between("sm", "md")]: {
// display: "block",
flexDirection: "column",
},
},
buttons: {
marginLeft: "8px",
},
})
)
Example #28
| Source File: GrantCardStyles.jsx From grants-fe with MIT License | 4 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
maxWidth: 1345,
border: `1px solid ${theme.palette.secondary.main}`,
boxShadow: "30px",
[theme.breakpoints.up("md")]: {
height: "auto",
},
},
header: {
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
[theme.breakpoints.up("sm")]: {
flexDirection: "row",
},
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
avatar: {
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex",
backgroundColor: theme.palette.primary.main,
},
},
title: {
textAlign: "center",
[theme.breakpoints.up("md")]: {
textAlign: "left",
},
[theme.breakpoints.between("sm", "md")]: {
textAlign: "left",
maxWidth: "200px",
},
},
boxInfo: {
display: "flex",
flexDirection: "row",
padding: "0 0 0 0",
paddingBottom: "0px",
[theme.breakpoints.between("sm", "md")]: {
display: "flex",
flexDirection: "column",
},
},
boxes: {
backgroundColor: theme.palette.common.aqua,
display: "flex",
justifyContent: "center",
color: theme.palette.primary,
width: "100px",
margin: "5px",
height: "auto",
[theme.breakpoints.up("md")]: {
alignItems: "center",
},
},
content: {
width: "100%",
textAlign: "left",
padding: "0px",
display: "flex",
flexDirection: "column",
[theme.breakpoints.up("sm")]: {
flexDirection: "row",
},
},
desc: {
width: "100%",
textAlign: "left",
paddingLeft: "0px",
},
actionTop: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
margin: "auto",
[theme.breakpoints.between("sm", "md")]: {
flexDirection: "column",
},
},
buttons: {
marginLeft: "8px",
},
})
)
Example #29
| Source File: Dashboard.js From medha-STPC with GNU Affero General Public License v3.0 | 4 votes |
|
Dashboard = props => {
const { container, className, ...rest } = props;
const history = useHistory();
const classes = useStyles();
const inputLabel = React.useRef(null);
const [zones, setZones] = useState([]);
const [rpcs, setRpcs] = useState([]);
const [monthData, setMonthData] = useState([]);
const [yearData, setYearData] = useState([]);
const [colleges, setColleges] = useState([]);
const [status, setStatus] = useState({
time: "",
status: ""
});
const { setIndex } = useContext(SetIndexContext);
const { setLoaderStatus } = useContext(LoaderContext);
const [formState, setFormState] = useState({
state: 1,
values: {},
zonerows: [],
indrows: [],
placementrows: [],
flag: true,
errors: {},
greenButtonChecker: true
});
const setData = () => {
setLoaderStatus(true);
setFormState(formState => ({
...formState,
zonerows: [
createDataWorkshop("Overall Workshops", finalData.Workshops),
createDataWorkshop("1st Year", finalData.FirstYear),
createDataWorkshop("2nd Year", finalData.SecondYear),
createDataWorkshop("Final Year", finalData.FinalYear),
createDataWorkshop("Entrepreneurship", finalData.Entrepreneurship),
createDataWorkshop(
"1st Year Attendance",
finalData.FirstYearAttendance
),
createDataWorkshop(
"2nd Year Attendance",
finalData.SecondYearAttendance
),
createDataWorkshop(
"Final Year Attendance",
finalData.FinalYearAttendance
),
createDataWorkshop("Planned", finalData.PlannedWorkshops),
createDataWorkshop("Achieved", finalData.AchievedWorkshops),
createDataWorkshop("Unique Students", finalData.UniqueStudents),
createDataWorkshop(
"Instittions touched",
finalData.Institutionstouched
),
createDataWorkshop("Student Feedback", finalData.StudentFeedback),
createDataWorkshop("TPO Feedback", finalData.TPOFeedback)
],
indrows: [
createDataind("Industrial Visit", finalData.IndustrialVisits),
createDataind("Attendance", finalData.IndustrialVisitAttendance),
createDataind("Planned", finalData.PlannedIndustrialVisit),
createDataind("Achieved", finalData.AchievedIndustrialVisit),
createDataind(
"Student Feedback",
finalData.IndustrialVisitStudentFeedback
),
createDataind("TPO Feedback", finalData.IndustrialVisitTPOFeedback)
],
placementrows: [
createDataplacement("Placement", finalData.Placement),
createDataplacement("Attended", finalData.PlacementAttended),
createDataplacement("Hired", finalData.PlacementSelected),
createDataplacement(
"Student Feedback",
finalData.PlacementStudentFeedback
),
createDataplacement("TPO Feedback", finalData.PlacementTPOFeedback),
createDataplacement(
"College Feedback",
finalData.PlacementCollegeFeedback
)
]
}));
setLoaderStatus(false);
};
/** Initial data bringing for all the filters role wise */
useEffect(() => {
if (auth.getUserInfo().role.name === roleConstants.STUDENT) {
history.push({
pathname: routeConstants.NOT_FOUND_URL
});
} else {
setLoaderStatus(true);
getStatusOfDashboard();
prefillInitialDataRoleWise();
setData();
getInitialData();
}
}, []);
const getStatusOfDashboard = async () => {
let STATUS_URL = strapiApiConstants.STRAPI_DB_URL + "dashboard-histories";
await serviceProvider
.serviceProviderForGetRequest(STATUS_URL)
.then(res => {
if (res.data.length) {
let today = new Date();
let updatedDate = new Date(res.data[0].created_at);
let days = parseInt((today - updatedDate) / (1000 * 60 * 60 * 24));
let hours = parseInt(
(Math.abs(today - updatedDate) / (1000 * 60 * 60)) % 24
);
let minutes = parseInt(
(Math.abs(today.getTime() - updatedDate.getTime()) / (1000 * 60)) %
60
);
let seconds = parseInt(
(Math.abs(today.getTime() - updatedDate.getTime()) / 1000) % 60
);
let updatedTime = "";
if (days !== 0) {
updatedTime =
days +
" days, " +
hours +
" hours, " +
minutes +
" minutes, " +
seconds +
" seconds ago";
} else if (hours !== 0) {
updatedTime =
hours +
" hours, " +
minutes +
" minutes, " +
seconds +
" seconds ago";
} else if (minutes !== 0) {
updatedTime = minutes + " minutes, " + seconds + " seconds ago";
} else {
updatedTime = seconds + " seconds ago";
}
setStatus(status => ({
...status,
time: updatedTime,
status: res.data[0].status
}));
} else {
setStatus(status => ({
...status,
time: null,
status: null
}));
}
})
.catch(error => {
console.log("error", error);
});
};
const prefillInitialDataRoleWise = () => {
if (
auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name === roleConstants.DEPARTMENTADMIN
) {
formState.values = {};
} else if (auth.getUserInfo().role.name === roleConstants.ZONALADMIN) {
formState.values = {
zone: auth.getUserInfo().zone.id
};
} else if (
auth.getUserInfo().role.name === roleConstants.COLLEGEADMIN &&
auth.getUserInfo().studentInfo.organization.contact.id ===
auth.getUserInfo().rpc.main_college
) {
formState.values = {
rpc: auth.getUserInfo().rpc.id
};
} else if (
auth.getUserInfo().role.name === roleConstants.COLLEGEADMIN &&
auth.getUserInfo().rpc.main_college !== null &&
auth.getUserInfo().studentInfo.organization.contact.id !==
auth.getUserInfo().rpc.main_college
) {
formState.values = {
zone: auth.getUserInfo().zone.id,
rpc: auth.getUserInfo().rpc.id,
contact: auth.getUserInfo().studentInfo.organization.contact.id
};
}
};
const getInitialData = () => {
setLoaderStatus(true);
setYears(true);
if (
auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name === roleConstants.DEPARTMENTADMIN
) {
fetchZoneRpcDistrictData();
} else if (auth.getUserInfo().role.name === roleConstants.ZONALADMIN) {
fetchAllRpc();
} else if (
auth.getUserInfo().role.name === roleConstants.COLLEGEADMIN &&
auth.getUserInfo().studentInfo.organization.contact.id ===
auth.getUserInfo().rpc.main_college
) {
fetchCollegesToRPC();
}
setLoaderStatus(false);
};
const fetchCollegesToRPC = async () => {
let COLLEGE_URL =
strapiApiConstants.STRAPI_DB_URL +
strapiApiConstants.STRAPI_RPCS +
"/" +
auth.getUserInfo().rpc.id +
"/colleges";
await serviceProvider
.serviceProviderForGetRequest(COLLEGE_URL)
.then(res => {
setColleges(res.data.result);
})
.catch(error => {
console.log("error", error);
});
};
/** Get Data */
function createDataWorkshop(workshop, zoneresult) {
return { workshop, zoneresult };
}
function createDataind(industry, industryresult) {
return { industry, industryresult };
}
function createDataplacement(placement, placementresult) {
return { placement, placementresult };
}
const generateEntityDataForDownload = (name, result) => {
return [
{ value: name, style: { font: { sz: "12" } } },
{
value: "" + result + "",
style: { font: { sz: "12" } }
}
];
};
const generateHeaders = name => {
return [{ value: name, style: { font: { sz: "12", bold: true } } }];
};
/** Fetch all rpc */
const fetchAllRpc = async () => {
await serviceProvider
.serviceProviderForGetRequest(RPCS, { pageSize: -1 })
.then(res => {
setRpcs(res.data.result);
})
.catch(error => {
console.log("error", error);
});
};
/** Sets Years */
const setYears = isInitialized => {
let startingYear = 1990;
let currentYear = new Date().getFullYear();
let diff = currentYear - startingYear;
let yearArray = [startingYear];
for (let i = 1; i <= diff; i++) {
yearArray.push(startingYear + i);
}
if (isInitialized) {
formState.values[year] = currentYear;
formState.values[month] = new Date().getMonth() + 1;
generateData();
}
setYearData(yearArray);
};
/** Set month on year */
useEffect(() => {
if (formState.values[year]) {
getMonthsOnYears();
}
}, [formState.values[year]]);
const getMonthsOnYears = () => {
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth() + 1;
let monthArray = [];
if (formState.values[year] == currentYear) {
tempMonthArray.forEach(data => {
if (data["id"] <= currentMonth) {
monthArray.push(data);
}
});
setMonthData(monthArray);
} else {
setMonthData(tempMonthArray);
}
};
useEffect(() => {
if (formState.values[zone] && formState.values[rpc]) {
fetchCollegeData();
}
}, [formState.values[zone], formState.values[rpc]]);
/** Function to get college data after selcting zones and rpc's */
async function fetchCollegeData() {
let params = {
"zone.id": formState.values[zone],
"rpc.id": formState.values[rpc],
pageSize: -1
};
await serviceProvider
.serviceProviderForGetRequest(COLLEGE_URL, params)
.then(res => {
setColleges(res.data.result);
})
.catch(error => {
console.log("error", error);
});
}
const generateData = async () => {
if (Object.keys(formState.values) !== 0) {
if (
auth.getUserInfo().role.name === roleConstants.COLLEGEADMIN &&
auth.getUserInfo().studentInfo.organization.contact.id ===
auth.getUserInfo().rpc.main_college
) {
_.assign(formState.values, { isRpc: true });
}
setLoaderStatus(true);
await serviceProvider
.serviceProviderForGetRequest(DASHBOARD_URL, formState.values)
.then(res => {
Object.keys(finalData).map(data => {
finalData[data] = res.data[data];
});
setDataForDownload();
setData();
})
.catch(error => {
setLoaderStatus(false);
console.log("error", error);
});
}
};
const setDataForDownload = async () => {
let month = "-";
let zone = "-";
let rpc = "-";
let college = "-";
if (formState.values.hasOwnProperty("zone")) {
for (let i in zones) {
if (zones[i]["id"] === formState.values.zone) {
zone = zones[i]["name"];
break;
}
}
}
if (formState.values.hasOwnProperty("rpc")) {
for (let i in rpcs) {
if (rpcs[i]["id"] === formState.values.rpc) {
rpc = rpcs[i]["name"];
break;
}
}
}
if (formState.values.hasOwnProperty("contact")) {
for (let i in colleges) {
if (colleges[i]["id"] === formState.values.contact) {
college = colleges[i]["name"];
break;
}
}
}
for (let i in tempMonthArray) {
if (tempMonthArray[i]["id"] === formState.values.Month) {
month = tempMonthArray[i]["name"];
break;
}
}
let roleName = auth.getUserInfo().role.name;
multiDataSet = [
{
columns: ["", ""],
data: [
[
{ value: "Login Name", style: { font: { sz: "12", bold: true } } },
{
value: roleName,
style: { font: { sz: "12" } }
}
],
[
{ value: "Year", style: { font: { sz: "12", bold: true } } },
{
value: "" + formState.values.Year + "",
style: { font: { sz: "12" } }
}
],
[
{ value: "Month", style: { font: { sz: "12", bold: true } } },
{ value: month, style: { font: { sz: "12" } } }
],
[
{ value: "Zone", style: { font: { sz: "12", bold: true } } },
{ value: zone, style: { font: { sz: "12" } } }
],
[
{ value: "RPC", style: { font: { sz: "12", bold: true } } },
{ value: rpc, style: { font: { sz: "12" } } }
],
[
{ value: "College", style: { font: { sz: "12", bold: true } } },
{ value: college, style: { font: { sz: "12" } } }
],
[{ value: "" }, { value: "" }],
generateHeaders("Headers"),
[{ value: "" }, { value: "" }],
generateEntityDataForDownload("Workshops", finalData.Workshops),
generateEntityDataForDownload(
"TPO Feedback",
finalData.TPOFeedback +
finalData.IndustrialVisitTPOFeedback +
finalData.PlacementTPOFeedback
),
generateEntityDataForDownload(
"Student Feedback",
finalData.StudentFeedback +
finalData.IndustrialVisitStudentFeedback +
finalData.PlacementStudentFeedback
),
generateEntityDataForDownload(
"Industrial Visits",
finalData.IndustrialVisits
),
generateEntityDataForDownload("Hired", finalData.PlacementSelected),
[{ value: "" }, { value: "" }],
generateHeaders("Workshop"),
[{ value: "" }, { value: "" }],
generateEntityDataForDownload(
"Overall Workshops",
finalData.Workshops
),
generateEntityDataForDownload("1st Year", finalData.FirstYear),
generateEntityDataForDownload("2nd Year", finalData.SecondYear),
generateEntityDataForDownload("Final Year", finalData.FinalYear),
generateEntityDataForDownload(
"Entrepreneurship",
finalData.Entrepreneurship
),
generateEntityDataForDownload(
"1st Year Attendance",
finalData.FirstYearAttendance
),
generateEntityDataForDownload(
"2nd Year Attendance",
finalData.SecondYearAttendance
),
generateEntityDataForDownload(
"Final Year Attendance",
finalData.FinalYearAttendance
),
generateEntityDataForDownload("Planned", finalData.PlannedWorkshops),
generateEntityDataForDownload(
"Achieved",
finalData.AchievedWorkshops
),
generateEntityDataForDownload(
"Unique Students",
finalData.UniqueStudents
),
generateEntityDataForDownload(
"Instittions touched",
finalData.Institutionstouched
),
generateEntityDataForDownload(
"Student Feedback",
finalData.StudentFeedback
),
generateEntityDataForDownload("TPO Feedback", finalData.TPOFeedback),
[{ value: "" }, { value: "" }],
generateHeaders("Industrial Visit"),
[{ value: "" }, { value: "" }],
generateEntityDataForDownload(
"Industrial Visit",
finalData.IndustrialVisits
),
generateEntityDataForDownload(
"Attendance",
finalData.IndustrialVisitAttendance
),
generateEntityDataForDownload(
"Planned",
finalData.PlannedIndustrialVisit
),
generateEntityDataForDownload(
"Achieved",
finalData.AchievedIndustrialVisit
),
generateEntityDataForDownload(
"Student Feedback",
finalData.IndustrialVisitStudentFeedback
),
generateEntityDataForDownload(
"TPO Feedback",
finalData.IndustrialVisitTPOFeedback
),
[{ value: "" }, { value: "" }],
generateHeaders("Placement"),
[{ value: "" }, { value: "" }],
generateEntityDataForDownload("Placement", finalData.Placement),
generateEntityDataForDownload(
"Attended",
finalData.PlacementAttended
),
generateEntityDataForDownload("Hired", finalData.PlacementSelected),
generateEntityDataForDownload(
"Student Feedback",
finalData.PlacementStudentFeedback
),
generateEntityDataForDownload(
"TPO Feedback",
finalData.PlacementTPOFeedback
),
generateEntityDataForDownload(
"College Feedback",
finalData.PlacementCollegeFeedback
)
]
}
];
};
async function fetchZoneRpcDistrictData() {
if (
formState.state &&
formState.state !== null &&
formState.state !== undefined &&
formState.state !== ""
) {
let zones_url =
STATES_URL +
"/" +
formState.state +
"/" +
strapiApiConstants.STRAPI_ZONES;
await serviceProvider
.serviceProviderForGetRequest(zones_url)
.then(res => {
setZones(res.data.result);
})
.catch(error => {
console.log("error", error);
});
let rpcs_url =
STATES_URL +
"/" +
formState.state +
"/" +
strapiApiConstants.STRAPI_RPCS;
await serviceProvider
.serviceProviderForGetRequest(rpcs_url)
.then(res => {
if (Array.isArray(res.data)) {
setRpcs(res.data[0].result);
} else {
setRpcs(res.data.result);
}
})
.catch(error => {
console.log("error", error);
});
}
}
/** Handle change for autocomplete fields */
const handleChangeAutoComplete = (eventName, event, value) => {
/**TO SET VALUES OF AUTOCOMPLETE */
if (value !== null) {
if (eventName !== year && eventName !== college) {
setFormState(formState => ({
...formState,
values: {
...formState.values,
[eventName]: value.id
}
}));
} else if (eventName === college) {
setFormState(formState => ({
...formState,
values: {
...formState.values,
[eventName]: value.contact.id
}
}));
} else {
setFormState(formState => ({
...formState,
values: {
...formState.values,
[eventName]: value
}
}));
}
if (eventName === state) {
fetchZoneRpcDistrictData();
}
if (formState.errors.hasOwnProperty(eventName)) {
delete formState.errors[eventName];
}
} else {
if (eventName === zone || eventName === rpc) {
setColleges([]);
delete formState.values[college];
} else if (eventName === year) {
setMonthData([]);
delete formState.values[month];
}
/** This is used to remove clear out data form auto complete when we click cross icon of auto complete */
setFormState(formState => ({
...formState,
flag: !formState.flag
}));
delete formState.values[eventName];
}
};
const handleSubmit = event => {
setLoaderStatus(true);
let isValid = false;
formState.values = _.omit(formState.values, ["isRpc"]);
/** Checkif all fields are present in the submitted form */
let checkAllFieldsValid = formUtilities.checkAllKeysPresent(
formState.values,
DashboardSchema
);
if (checkAllFieldsValid) {
/** Evaluated only if all keys are valid inside formstate */
formState.errors = formUtilities.setErrors(
formState.values,
DashboardSchema
);
/** Checks if the form is empty */
if (formUtilities.checkEmpty(formState.errors)) {
isValid = true;
}
} else {
/** This is used to find out which all required fields are not filled */
formState.values = formUtilities.getListOfKeysNotPresent(
formState.values,
DashboardSchema
);
/** This sets errors by comparing it with the json schema provided */
formState.errors = formUtilities.setErrors(
formState.values,
DashboardSchema
);
}
if (isValid) {
/** CALL POST FUNCTION */
generateData();
} else {
setFormState(formState => ({
...formState,
flag: !formState.flag
}));
setLoaderStatus(false);
}
event.preventDefault();
};
const StyledTableCell = withStyles(theme =>
createStyles({
head: {
backgroundColor: "#000000",
color: "#ffffff",
padding: "10px",
fontSize: "14px",
fontWeight: 700
},
body: {
fontSize: "14px",
padding: "8px"
}
})
)(TableCell);
const StyledTableRow = withStyles(theme =>
createStyles({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.background.default
}
}
})
)(TableRow);
const clearFilter = () => {
prefillInitialDataRoleWise();
setYears(true);
if (
auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name === roleConstants.ZONALADMIN ||
auth.getUserInfo().role.name === roleConstants.DEPARTMENTADMIN
) {
setColleges([]);
}
setFormState(formState => ({
...formState,
errors: {}
}));
};
const hasError = field => (formState.errors[field] ? true : false);
return (
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item lg sm={6} xl={3} xs={12}>
<Card {...rest} className={clsx(classes.root, className)}>
<CardHeader
classes={{
title: classes.title,
root: classes.titleRoot
}}
title="Workshops"
color="textSecondary"
align="center"
/>
<CardContent>
<Typography variant="h1" align="center">
{finalData.Workshops}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item lg sm={6} xl={3} xs={12}>
<Card {...rest} className={clsx(classes.root, className)}>
<CardHeader
classes={{
title: classes.title,
root: classes.titleRoot
}}
title="TPO Feedback"
color="textSecondary"
align="center"
/>
<CardContent>
<Typography variant="h1" align="center">
{finalData.TPOFeedback +
finalData.IndustrialVisitTPOFeedback +
finalData.PlacementTPOFeedback}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item lg sm={6} xl={3} xs={12}>
<Card {...rest} className={clsx(classes.root, className)}>
<CardHeader
classes={{
title: classes.title,
root: classes.titleRoot
}}
title="Student Feedback"
color="textSecondary"
align="center"
/>
<CardContent>
<Typography variant="h1" align="center">
{finalData.StudentFeedback +
finalData.IndustrialVisitStudentFeedback +
finalData.PlacementStudentFeedback}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item lg sm={6} xl={3} xs={12}>
<Card {...rest} className={clsx(classes.root, className)}>
<CardHeader
classes={{
title: classes.title,
root: classes.titleRoot
}}
title="Industrial Visits"
color="textSecondary"
align="center"
/>
<CardContent>
<Typography variant="h1" align="center">
{finalData.IndustrialVisits}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item lg md={6} xl={3} xs={12}>
<Card {...rest} className={clsx(classes.root, className)}>
<CardHeader
classes={{
title: classes.title,
root: classes.titleRoot
}}
title="Hired"
color="textSecondary"
align="center"
/>
<CardContent>
<Typography variant="h1" align="center">
{finalData.PlacementSelected}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item lg={12} md={6} xl={9} xs={12}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Grid container spacing={3} className={classes.formgrid}>
{auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name ===
roleConstants.DEPARTMENTADMIN ? (
<Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<Autocomplete
id={"zoneDemo"}
options={zones}
getOptionLabel={option => option.name}
/* This is used to set the default value to the auto complete */
name={"demo-id"}
onChange={(event, value) => {
handleChangeAutoComplete(zone, event, value);
}}
value={
zones[
zones.findIndex(function (item, i) {
return item.id === formState.values[zone];
})
] || null /** Please give a default " " blank value */
}
renderInput={params => (
<TextField
{...params}
label={"Select Zone"}
placeholder={"Select Zone"}
variant="outlined"
/>
)}
/>
</FormControl>
</Grid>
) : null}
{auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name === roleConstants.ZONALADMIN ||
auth.getUserInfo().role.name ===
roleConstants.DEPARTMENTADMIN ? (
<Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<Autocomplete
id={"regionDemo"}
options={rpcs}
getOptionLabel={option => option.name}
/* This is used to set the default value to the auto complete */
name={"demo-id"}
onChange={(event, value) => {
handleChangeAutoComplete(rpc, event, value);
}}
value={
rpcs[
rpcs.findIndex(function (item, i) {
return item.id === formState.values[rpc];
})
] || null /** Please give a default " " blank value */
}
renderInput={params => (
<TextField
{...params}
placeholder={"Select Region"}
label={"Select Region"}
variant="outlined"
/>
)}
/>
</FormControl>
</Grid>
) : null}
{auth.getUserInfo().role.name === roleConstants.MEDHAADMIN ||
auth.getUserInfo().role.name ===
roleConstants.DEPARTMENTADMIN ||
auth.getUserInfo().role.name === roleConstants.ZONALADMIN ||
(auth.getUserInfo().role.name === roleConstants.COLLEGEADMIN &&
auth.getUserInfo().studentInfo.organization.contact.id ===
auth.getUserInfo().rpc.main_college) ? (
<Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<Autocomplete
id={"collegeDemo"}
options={colleges}
getOptionLabel={option => option.name}
/* This is used to set the default value to the auto complete */
name={"demo-id"}
onChange={(event, value) => {
handleChangeAutoComplete(college, event, value);
}}
value={
colleges[
colleges.findIndex(function (item, i) {
return (
item.contact.id === formState.values[college]
);
})
] || null /** Please give a default " " blank value */
}
renderInput={params => (
<TextField
{...params}
placeholder={"Select College"}
label={"Select College"}
variant="outlined"
/>
)}
/>
</FormControl>
</Grid>
) : null}
<Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<Autocomplete
id={DashboardSchema[year]["id"]}
options={yearData}
getOptionLabel={option => "" + option + ""}
/* This is used to set the default value to the auto complete */
name={DashboardSchema[year]["name"]}
onChange={(event, value) => {
handleChangeAutoComplete(year, event, value);
}}
value={
yearData[
yearData.findIndex(function (item, i) {
return item === formState.values[year];
})
] || null /** Please give a default " " blank value */
}
renderInput={params => (
<TextField
{...params}
placeholder={DashboardSchema[year]["placeholder"]}
label={DashboardSchema[year]["label"]}
variant="outlined"
error={hasError(year)}
helperText={
hasError(year)
? formState.errors[year].map(error => {
return error + " ";
})
: null
}
/>
)}
/>
</FormControl>
</Grid>
<Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<Autocomplete
id={DashboardSchema[month]["id"]}
options={monthData}
getOptionLabel={option => option.name}
/* This is used to set the default value to the auto complete */
name={DashboardSchema[month]["name"]}
onChange={(event, value) => {
handleChangeAutoComplete(month, event, value);
}}
value={
monthData[
monthData.findIndex(function (item, i) {
return item.id === formState.values[month];
})
] || null /** Please give a default " " blank value */
}
renderInput={params => (
<TextField
{...params}
placeholder={DashboardSchema[month]["placeholder"]}
label={DashboardSchema[month]["label"]}
variant="outlined"
error={hasError(month)}
helperText={
hasError(month)
? formState.errors[month].map(error => {
return error + " ";
})
: null
}
/>
)}
/>
</FormControl>
</Grid>
{/** <Grid item md={2} xs={12}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<InputLabel ref={inputLabel} id="select-trainer">
Select Trainer
</InputLabel>
<Autocomplete
id={"trainerDemo"}
options={[]}
getOptionLabel={option => option.name}
name={"demo-id"}
renderInput={params => (
<TextField
{...params}
placeholder={"Select Trainer"}
value={option => option.id}
name={"demo"}
key={option => option.id}
variant="outlined"
/>
)}
/>
</FormControl>
</Grid>*/}
<Grid item md={2} xs={12} className={classes.dash_search_btn}>
<Grid item className={classes.filterButtonsMargin}>
<YellowButton
id="handle_submit"
variant="contained"
color="primary"
disableElevation
onClick={handleSubmit}
>
{genericConstants.SEARCH_BUTTON_TEXT}
</YellowButton>
</Grid>
<Grid item className={classes.filterButtonsMargin}>
<GrayButton
variant="contained"
color="primary"
disableElevation
onClick={clearFilter}
>
{genericConstants.RESET_BUTTON_TEXT}
</GrayButton>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
<Card className={classes.marginCard} variant="outlined">
<CardContent>
<Grid item md={4} xs={12}>
<TableContainer component={Paper}>
<Table
className={classes.table}
aria-label="customized table"
>
<TableHead>
<TableRow>
<StyledTableCell>Workshop</StyledTableCell>
<StyledTableCell></StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{formState.zonerows.map(zonerow => (
<StyledTableRow key={zonerow.workshop}>
<StyledTableCell component="th" scope="zonerow">
{zonerow.workshop}
</StyledTableCell>
<StyledTableCell align="right">
{zonerow.zoneresult}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TableContainer
component={Paper}
className={classes.marginCard}
>
<Table
className={classes.table}
aria-label="customized table"
>
<TableHead>
<TableRow>
<StyledTableCell>Industrial Visit</StyledTableCell>
<StyledTableCell></StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{formState.indrows.map(industry => (
<StyledTableRow key={industry.industry}>
<StyledTableCell component="th" scope="zonerow">
{industry.industry}
</StyledTableCell>
<StyledTableCell align="right">
{industry.industryresult}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TableContainer
component={Paper}
className={classes.marginCard}
>
<Table
className={classes.table}
aria-label="customized table"
>
<TableHead>
<TableRow>
<StyledTableCell>Placement</StyledTableCell>
<StyledTableCell></StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{formState.placementrows.map(placement => (
<StyledTableRow key={placement.placement}>
<StyledTableCell component="th" scope="zonerow">
{placement.placement}
</StyledTableCell>
<StyledTableCell align="right">
{placement.placementresult}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
<Grid item className={classes.move_right}>
<ExcelFile
element={
<GreenButton
variant="contained"
color="secondary"
className={classes.greenButton}
startIcon={<GetAppIcon />}
onClick={() => {}}
greenButtonChecker={formState.greenButtonChecker}
>
Download
</GreenButton>
}
>
<ExcelSheet dataSet={multiDataSet} name="Dashboard" />
</ExcelFile>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid container spacing={2}>
<Grid item lg={12} sm={12} xl={12} xs={12}>
<div className={classes.move_right}>
{status.status === "pending" ? (
<>
<Chip
label={"Updating dashboard data"}
disabled
variant="outlined"
size="medium"
/>
<CircularProgress size={18} />
</>
) : status.status === "error" ? (
<Chip
label={
"Updating dashboard data failed last updated " + status.time
}
disabled
variant="outlined"
size="medium"
/>
) : status.status === "completed" ? (
<Chip
label={"Updated " + status.time}
disabled
variant="outlined"
size="medium"
/>
) : null}
</div>
</Grid>
</Grid>
</Grid>
</div>
);
}
