Skip to content

Commit

Permalink
Merge pull request #13 from TharindaPrabhath/frontend-day-09-stepper
Browse files Browse the repository at this point in the history
Frontend day 09 stepper
  • Loading branch information
TharindaPrabhath authored Nov 1, 2021
2 parents d0c9986 + 60afe48 commit 2f74a4d
Show file tree
Hide file tree
Showing 19 changed files with 1,093 additions and 201 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"swr": "^1.0.1",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"xlsx": "^0.17.3",
"yup": "^0.32.9"
},
"scripts": {
Expand Down
12 changes: 12 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ import { fetchAdminByUsername } from "./utils/requestHelper";
import Activity from "./screens/Activity";
import Settings from "./screens/Settings";
import useTokenService from "./utils/useTokenService";
import NewCertificateBulk from "./screens/NewBulkCertificate";
import Report from "./screens/Report";
import ReportView from "./screens/ReportView";

const theme = createTheme({
palette: {
Expand Down Expand Up @@ -125,6 +128,15 @@ function App() {
<ProtectedRoute path="/certificate/new" exact>
<NewCertificate />
</ProtectedRoute>
<ProtectedRoute path="/certificate/new-certificate-bulk" exact>
<NewCertificateBulk />
</ProtectedRoute>
<ProtectedRoute path="/report" exact>
<Report />
</ProtectedRoute>
<ProtectedRoute path="/report/:id" exact>
<ReportView />
</ProtectedRoute>
<ProtectedRoute path="/activity" exact>
<Activity />
</ProtectedRoute>
Expand Down
7 changes: 4 additions & 3 deletions src/components/CertificateTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ const CertificateTable = () => {
return (
<div
style={{
height: 400,
height: "100%",
width: "100%",
backgroundColor: colors.secondaryBgClr,
borderRadius: "1em",
Expand All @@ -244,15 +244,16 @@ const CertificateTable = () => {
<DataGrid
rows={certificates || []}
columns={columns}
rowCount={100}
rowsPerPageOptions={[5, 10]}
rowCount={1000}
rowsPerPageOptions={[5, 10, 50, 100]}
paginationMode="server"
pagination
pageSize={pageSize}
onPageChange={(n) => setPageNo(n)}
onPageSizeChange={(s) => setPageSize(s)}
checkboxSelection
disableSelectionOnClick
autoHeight
style={{
color: colors.secondaryFontClr,
borderColor: "transparent",
Expand Down
9 changes: 5 additions & 4 deletions src/components/UserTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ const UserTable = () => {
return (
<div
style={{
height: 400,
height: "100%",
width: "100%",
backgroundColor: colors.secondaryBgClr,
borderRadius: "1em",
Expand All @@ -233,15 +233,16 @@ const UserTable = () => {
<DataGrid
rows={users || []}
columns={columns}
rowCount={100}
rowsPerPageOptions={[5, 10]}
rowCount={10000}
rowsPerPageOptions={[5, 10, 50, 100]}
paginationMode="server"
pagination
pageSize={pageSize}
//pageSize={pageSize}
onPageChange={(n) => setPageNo(n)}
onPageSizeChange={(s) => setPageSize(s)}
checkboxSelection
disableSelectionOnClick
autoHeight
style={{
color: colors.secondaryFontClr,
borderColor: "transparent",
Expand Down
85 changes: 57 additions & 28 deletions src/data/requests.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,63 @@
const login = "/auth/login"
const validateToken = "/auth/validateToken"
const refreshToken = "/auth/refresh-token"
const validateCertificate = "/certificate/validate"
const changePassword = "/admin/change-password"
const login = "/auth/login";
const validateToken = "/auth/validateToken";
const refreshToken = "/auth/refresh-token";
const validateCertificate = "/certificate/validate";
const changePassword = "/admin/change-password";

const fetchAdminByUsername = "/admin/get/byUsername"
const fetchAdmins = "/admin"
const fetchUser = "/user/get"
const fetchUsers = "/user"
const fetchSuggestionUsers = "/user/get-suggestions"
const fetchCertificate = "/certificate/get"
const fetchCertificates = "/certificate"
const fetchCertificatesByUser = "/certificate/byUser"
const fetchAdminsAnalytics = "/analytics/admin"
const fetchUsersAnalytics = "/analytics/user"
const fetchCertificatesAnalytics = "/analytics/certificate"
const fetchActivities = "/activity"
const fetchAdminByUsername = "/admin/get/byUsername";
const fetchAdmins = "/admin";
const fetchUser = "/user/get";
const fetchUsers = "/user";
const fetchSuggestionUsers = "/user/get-suggestions";
const fetchCertificate = "/certificate/get";
const fetchCertificates = "/certificate";
const fetchCertificatesByUser = "/certificate/byUser";
const fetchAdminsAnalytics = "/analytics/admin";
const fetchUsersAnalytics = "/analytics/user";
const fetchCertificatesAnalytics = "/analytics/certificate";
const fetchActivities = "/activity";
const fetchEvents = "/event";
const fetchReports = "/certificate-bulk-report";

const postNewUser = "/user/add"
const postNewCertificate = "/certificate/add"
const postNewThirdPartyCertificate = "/certificate/add/third-party"
const postNewUser = "/user/add";
const postNewCertificate = "/certificate/add";
const postNewThirdPartyCertificate = "/certificate/add/third-party";
const postCertificateBulk = "/certificate-bulk/add";

const updateUser = "/user/update"
const updateCertificate = "/certificate/update"
const updateUser = "/user/update";
const updateCertificate = "/certificate/update";

const deleteUser = "/user/delete"
const deleteCertificate = "/certificate/delete"
const deleteUser = "/user/delete";
const deleteCertificate = "/certificate/delete";

const requests = {
login,
validateToken,
refreshToken,
validateCertificate,
changePassword,
fetchAdminByUsername,
fetchAdmins,
fetchUser,
fetchUsers,
fetchSuggestionUsers,
fetchCertificate,
fetchCertificatesByUser,
fetchCertificates,
fetchAdminsAnalytics,
fetchUsersAnalytics,
fetchCertificatesAnalytics,
fetchActivities,
fetchEvents,
fetchReports,
postNewUser,
postNewCertificate,
postNewThirdPartyCertificate,
postCertificateBulk,
updateUser,
updateCertificate,
deleteUser,
deleteCertificate,
};

const requests = {login, validateToken, refreshToken, validateCertificate, changePassword, fetchAdminByUsername , fetchAdmins, fetchUser, fetchUsers, fetchSuggestionUsers, fetchCertificate,
fetchCertificatesByUser, fetchCertificates, fetchAdminsAnalytics, fetchUsersAnalytics, fetchCertificatesAnalytics, fetchActivities, postNewUser, postNewCertificate,
postNewThirdPartyCertificate, updateUser, updateCertificate, deleteUser, deleteCertificate }

export default requests;
103 changes: 58 additions & 45 deletions src/data/sidebarData.ts
Original file line number Diff line number Diff line change
@@ -1,63 +1,76 @@
import SidebarProp from '../types/SidebarProp';
import SidebarProp from "../types/SidebarProp";

import SpeedIcon from '@material-ui/icons/Speed';
import PersonIcon from '@material-ui/icons/Person';
import CardGiftcardIcon from '@material-ui/icons/CardGiftcard';
import HistoryIcon from '@material-ui/icons/History';
import SettingsIcon from '@material-ui/icons/Settings';
import colors from './colors';
import SpeedIcon from "@material-ui/icons/Speed";
import PersonIcon from "@material-ui/icons/Person";
import CardGiftcardIcon from "@material-ui/icons/CardGiftcard";
import HistoryIcon from "@material-ui/icons/History";
import ReportIcon from "@material-ui/icons/Report";
import SettingsIcon from "@material-ui/icons/Settings";
import colors from "./colors";

const color = colors.primaryBrandClr;

const Dashboard: SidebarProp = {
title: "Dashboard",
path: "/dashboard",
icon: {
name: SpeedIcon,
htmlColor: color,
}
}
title: "Dashboard",
path: "/dashboard",
icon: {
name: SpeedIcon,
htmlColor: color,
},
};

const User: SidebarProp = {
title: "User",
path: "/user",
icon: {
name: PersonIcon,
htmlColor: color,
}
}
title: "User",
path: "/user",
icon: {
name: PersonIcon,
htmlColor: color,
},
};

const Certificate: SidebarProp = {
title: "Certificate",
path: "/certificate",
icon: {
name: CardGiftcardIcon,
htmlColor: color,
}
}
title: "Certificate",
path: "/certificate",
icon: {
name: CardGiftcardIcon,
htmlColor: color,
},
};

const Report: SidebarProp = {
title: "Report",
path: "/report",
icon: {
name: ReportIcon,
htmlColor: color,
},
};

const Activity: SidebarProp = {
title: "Activity",
path: "/activity",
icon: {
name: HistoryIcon,
htmlColor: color,
}
}
title: "Activity",
path: "/activity",
icon: {
name: HistoryIcon,
htmlColor: color,
},
};

const Settings: SidebarProp = {
title: "Settings",
path: "/settings",
icon: {
name: SettingsIcon,
htmlColor: color,
}
}
title: "Settings",
path: "/settings",
icon: {
name: SettingsIcon,
htmlColor: color,
},
};

const SidebarData: SidebarProp[] = [
Dashboard, User, Certificate, Activity, Settings
Dashboard,
User,
Certificate,
Report,
Activity,
Settings,
];

export default SidebarData;


2 changes: 1 addition & 1 deletion src/screens/Activity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Activity = () => {
<div className="activity-timelines-container">
<div className="top">
<div className="left-col">
<h2>Users</h2>
<h2>Activity</h2>
<Breadcrumbs aria-label="breadcrumb" style={{ color: "white" }}>
<Link to="/dashboard">Dashboard</Link>
<Typography style={{ color: colors.dimmedClr }}>
Expand Down
15 changes: 15 additions & 0 deletions src/screens/Certificate.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,22 @@
gap: 1em;
}

.top .right-col__new-certificate-btn-group{
display: none;
}

.certificate-screen__content .table{
margin-top: 3em;
margin-bottom: 5em;
}

@media only screen and (min-width: 700px) {
.top .right-col__mobile-certificate-actions{
display: none;
}

.top .right-col__new-certificate-btn-group{
display: flex;
gap: 1em;
}
}
Loading

0 comments on commit 2f74a4d

Please sign in to comment.