Certifications UI #2477
Certifications UI #2477
Conversation
| @@ -36,15 +36,15 @@ export default function DatePickerField({ | |||
| <div className="date-picker-field"> | |||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | |||
| <DatePicker | |||
| label={label} | |||
There was a problem hiding this comment.
I alphabetized these props.
| @@ -0,0 +1,61 @@ | |||
| import PropTypes from 'prop-types'; | |||
There was a problem hiding this comment.
Several components implemented their own confirmation dialog.
I created this reusable component and changed some components to use this instead of their own.
| links.push(['/birthday-reports', 'Birthdays']); | ||
| } | ||
|
|
||
| links.push(['/certification-reports', 'Certifications']); |
There was a problem hiding this comment.
This is a new menu item for the new report.
| margin-left: 2rem; | ||
| } | ||
|
|
||
| .date-picker-field { |
There was a problem hiding this comment.
These CSS properties were moved to here from the DatePickerField component.
| CardContent, | ||
| CardHeader, | ||
| Chip, | ||
| Dialog, |
There was a problem hiding this comment.
I factored out the confirmation dialog used in this component and changed it to use the new ConfirmationDialog component.
|
|
||
| import AnniversaryReportPage from '../../pages/AnniversaryReportPage'; | ||
| import BirthdayReportPage from '../../pages/BirthdayReportPage'; | ||
| import CertificationReportPage from '../../pages/CertificationReportPage'; |
There was a problem hiding this comment.
I added this new report page.
|
|
||
| const SkillSelector = () => ( | ||
| <Autocomplete | ||
| blurOnSelect |
There was a problem hiding this comment.
I alphabetized the props.
| @@ -0,0 +1,31 @@ | |||
| import React, { useReducer, useState } from 'react'; | |||
There was a problem hiding this comment.
This implements the new Certifications report page which provides three things:
- A button to open the "Manage Certifications" dialog.
- An "Earned Certifications table.
- The "Managed Certifications" dialog.
| import { getGuildsForMember } from '../api/guild'; | ||
| import { getAvatarURL } from '../api/api.js'; | ||
| import ProfilePage from './ProfilePage'; | ||
| import CertificationBadges from '../components/certifications/CertificationBadges'; |
There was a problem hiding this comment.
I added display of badges for earned certifications to member profile pages.
| import { addGuildMember, deleteGuildMember } from '../api/guild'; | ||
| import { updateMember } from '../api/member'; | ||
| import { getEmployeeHours } from '../api/hours'; | ||
| import EarnedCertificationsTable from '../components/certifications/EarnedCertificationsTable'; |
There was a problem hiding this comment.
I added an earned certifications table to the profile page for the logged in user.
They can add, edit, and delete only their own certifications.
They can also create new certifications and then use those to create their earned certifications.
They cannot however manage certifications like admins can from the Certifications report page.
This means they cannot edit, delete, or merge certifications. Only admins can do those things.
|
|
||
| import './CertificationBadges.css'; | ||
|
|
||
| const certificationBaseUrl = 'http://localhost:3000/certification'; |
There was a problem hiding this comment.
Currently this will only work for me because it relies on endpoints that I implemented in a mock server that I run locally. I need to work with a Micronaut developer to get them ported over.
|
|
||
| import './Certifications.css'; | ||
|
|
||
| const certificationBaseUrl = 'http://localhost:3000/certification'; |
There was a problem hiding this comment.
Currently this will only work for me because it relies on endpoints that I implemented in a mock server that I run locally. I need to work with a Micronaut developer to get them ported over.
…computing/check-ins into feature-certifications-ui
This PR is for the issue at #2446.