An error occurred while loading the file. Please try again.
-
devendra authoredd85d481b
import { Component, Fragment } from "react";import Header from "../common/Header";import { Link } from "react-router-dom";import { FormService } from "../../services/form.service";import { APP } from "../../constants";import Notify from "../../helpers/notify";import Helper from "../../helpers/auth";import { InspectorHome } from "../../pages";import { ReviewerHome } from "../../pages/Reviewer/ReviewerHome";import { CardTwo } from "../cards";/** * Dashboard component */class Dashboard extends Component { constructor(props) { super(props); this.state = { forms: [], myApplications: [], }; this.userRole = Helper.getUserRole(); this.getInstituteApplications = this.getInstituteApplications.bind(); } formatDate(dateParam) { const date = new Date(`${dateParam}`); return date .toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric", }) .replace(/ /g, " "); } componentDidMount() { setTimeout(() => { this.getInstituteApplications(); }, 500); } getInstituteApplications = () => { if (this.userRole === APP.ROLE.INSTITUTION) { FormService.get().then( (response) => { if (response.statusInfo.statusCode === APP.CODE.SUCCESS) { this.setState({ forms: response.responseData.length > 6 ? response.responseData.splice(0, 6) : response.responseData, }); // console.log(response.responseData); } else { Notify.error(response.statusInfo.errorMessage); } }, (error) => { error.statusInfo ? Notify.error(error.statusInfo.errorMessage) : Notify.error(error.message); } ); // my applications section const myApplicationsReq = { searchObjects: [], }; FormService.getAllApplications(myApplicationsReq).then(7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
(response2) => {
if (response2.statusInfo.statusCode === APP.CODE.SUCCESS) {
this.setState({
myApplications:
response2.responseData.length > 8
? response2.responseData.splice(0, 8)
: response2.responseData,
});
// console.log(response2.responseData);
} else {
Notify.error(response2.statusInfo.errorMessage);
}
},
(error) => {
error.statusInfo
? Notify.error(error.statusInfo.errorMessage)
: Notify.error(error.message);
}
);
}
};
render() {
return (
<Fragment>
<Header history={this.props.history} />
{this.userRole === APP.ROLE.INSTITUTION && (
<Fragment>
<div className="container-fluid main-container">
<div className="container dashboard-inner-container pt-3 pb-3">
<div className="row">
<div className="col-md-10 col-sm-12 col-12 ">
<h2>My applications</h2>
{true ? (
<p className="h2-subheading">
These are the active application (s) submitted by you.
</p>
) : (
<p className="h2-subheading">
There is no active applications. Select one from the
below list to apply.
</p>
)}
</div>
<div className="col-md-2 col-sm-12 col-12 ">
<button
onClick={(e) => this.props.history.push("/applications")}
className="btn btn-default smf-btn-default float-right mr-0"
>
SEE ALL
</button>
</div>
</div>
<div className="row mt-3">
{this.state.myApplications.length > 0 &&
this.state.myApplications.map((i, key) => (
<div
className="col-sm-12 col-md-4 col-lg-3 col-xl-3 col-xxl-3 mb-3"
key={i.applicationId}
>
<CardTwo
title={i.title}
name={i.createdBy}
time={`Created on: ${i.createdDate}`}
showStatus={true}
status={i.status}
statusLabel={i.status}
showBtn={true}
type="button"
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
btnText="View application"
isLink={true}
link={
"/applications/" + i.formId + "/" + i.applicationId
}
/>
</div>
))}
</div>
</div>
</div>
<div className="container-fluid bottom-container">
<div className="container dashboard-inner-container">
<div className="row">
<div className="col-md-10 col-sm-12 col-12 pt-5">
<h2>Available forms</h2>
<p className="h2-subheading">
These are the available appplication forms for you apply.
Click on any of them to start filling
</p>
</div>
<div className="col-md-2 col-sm-12 col-12 pt-5">
<button
className="btn btn-default smf-btn-default float-right mr-0"
onClick={(e) =>
this.props.history.push("/available-forms")
}
>
SEE ALL
</button>
</div>
</div>
<div className="row mt-3">
{this.state.forms.length > 0 &&
this.state.forms.map((form, key) => (
<div className="col-md-4 mb-4 col-sm-12 col-12" key={key}>
<div
className="application-item"
style={{ minHeight: "150px" }}
>
<h3 className="">{form.title}</h3>
<p className="h3-subheading">
{form.description != null
? form.description
: "Application form"}
</p>
<Link
to={"/forms/" + form.id}
className="btn btn-default smf-btn-default highlighted mt-3"
>
Apply
</Link>
</div>
</div>
))}
</div>
</div>
</div>
</Fragment>
)}
{/* {(this.userRole === APP.ROLE.REGULATOR || this.userRole === APP.ROLE.SUPER_ADMIN) && (
<Fragment>
<div className="container-fluid">
<div className="container dashboard-inner-container">
<div className="row pt-5">
<div className="col-md-12 col-sm-12 col-12 mb-3">
<h2>Your activity</h2>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
<h2 className="">12</h2>
<p className="h3-subheading mt-4">Total pending</p>
</div>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
<h2 className="">8</h2>
<p className="h3-subheading mt-4">Recieved today</p>
</div>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
<h2 className="">4</h2>
<p className="h3-subheading mt-4">Pending from past</p>
</div>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
<h2 className="">7</h2>
<p className="h3-subheading mt-4">Total pending</p>
</div>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
<h2 className="">3</h2>
<p className="h3-subheading mt-4">In progress</p>
</div>
</div>
<div className="col-md-2 col-sm-4 col-6 mb-3">
<div className="activity-item">
<h2 className="">12</h2>
<p className="h3-subheading mt-4">Reviewed in total</p>
</div>
</div>
</div>
</div>
</div>
<div className="container-fluid main-container">
<div className="container dashboard-inner-container">
<div className="row pt-5">
<div className="col-md-10 col-sm-10 col-10">
<h2>Pending applications</h2>
<p className="h2-subheading">
These are the latest applications which are pending for
your review/approval.
</p>
</div>
<div className="col-md-2 col-sm-2 col-2">
<button className="btn btn-default smf-btn-default float-right mr-0">
SEE ALL
</button>
</div>
</div>
<div className="row mt-3 pb-5">
{[1, 2, 3, 4, 5, 6, 7, 8].map((item, key) => {
return (
<div className="col-md-3 col-sm-6 col-12 mb-3" key={key}>
<div className="dashboard-form-item">
<h3 className="">Form {item}</h3>
<p className="h3-subheading">
<b>Collage name</b>
<br />
Recieved on: dd/mm/yyy.
</p>
<div>
<button className="form-item-button">
Status: New
</button>
</div>
281282283284285286287288289290291292293294295296297298299300301302303304305306
<div className="mt-3">
<button className="btn btn-default smf-btn-default highlighted mt-2">
View application
</button>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</Fragment>
)} */}
{/* Inspector portal */}
{this.userRole === APP.ROLE.INSPECTOR && <InspectorHome />}
{/* Inspector portal */}
{(this.userRole === APP.ROLE.REGULATOR || this.userRole === APP.ROLE.SUPER_ADMIN) && <ReviewerHome />}
</Fragment>
);
}
}
export default Dashboard;