ClassManager-Angular
An Angular application for class-manangement with spring boot.
Features
- Add/ Remove student information
- Assign/ Delete sessions for each student
- Track fees for each student
- Track tests for each student
Home page
Title-bar has the following information:
- Title
- Total number of students
- Total fees
- Icon to export as excel data
- Icon to import excel data Followed by table showing list of students along with their respective session details and a trash icon to delete the student data.
Adding new student
Adding a new student consists of 3 steps:
- Personal info of student
- Session details
- Review and submit
After clicking on Add Student button, a popup appears for adding personal information of the student.
The next button will be enabled only when all mandatory information is entered is valid.
After clicking on Next button, the popup navigates to the session details page where a session can be:
- Created
- Deleted
- Updated (if a subject already exists the existing session data is updated else a new session is created)
The button with check icon is enabled only when all the details has been updated with valid data. The next button will be enabled only when atleast one session has been created for the student.
After clicking on Next from session details it moves on to review and submit page where user can validate entered information. If changes are required user can navigate back to the respective page and make valid changes.
After clicking on submit:
User can search for a particular record by filtering down the data. The filtered results can be further narrowed down by searching for a particular student name.
Editing added student:
Clicking on the particular student record will navigate to the student details page where all information related to the selected student will be displayed:
Editing personal information
By clicking on edit icon in Perfonal infor card/tile personal information can be edited and saved. The popup is pre-populated with existing information which will be replaced with the new changes. Save button will be enabled only when all values are valid.
After saving changes:
Editing sesion infomation
By clicking on edit icon in Sessions card/tile session details can be edited and saved. The popup contains existing session information. Clicking on existing session data will populate the respective data into the fields which can then be used to update existing data or create new session data. Save button will be enabled only when all values are valid.
After saving changes:
Adding tests
Tests can be added for for each session's subject for a student. By clicking plus icon on the '+' icon in Test details card/tile a popup appears for entering test information. Add test button will be enabled only when all values are valid.
After successfully adding test:
Test data can be exported to pdf by click on the pdf icon in Test details card/tile with student name as filename.
Navigating back to homepage will display the student record with updated personal and session information:
Fees summary:
Fees summary can be tracked and updated for students for each month-year.
The below screenshot indicates that the newly added student is yet to pay fees for the March-2023. The total fees to be paid is a summation of fees from all the sessions associated with the student.
If Pending is pressed a pop-up appears where user can confirm the payment with necessary details:
Confirm button is enabled only when all information is valid:
Upon confirmation:
The status for March-2023 will be updated as per submitted information:
And fees data for following month will be created automatically with status as Pending
Fees data can be filterd based status:
Pending only:
Paid only:
Fees data can be exported to pdf for selected month-year combination by clicking on pdf icon with file name as selected month-year:
Deleting student:
When the trash icon in the studnet's row is clicked a confirmation pop-up appears:
Upon confirmation:
After deleting a student user can still track fees information for the deleted student for the month-year in which the student was deleted:
However, it will not automatically create fees data for the following month as the student is deleted:
Exporting
Active student data can be exported to excel with separate sheets:
- StudentData sheet -> Student's personal and session information
- FeesData sheet -> Fees details for each student across months
- TestData sheet -> Test data for each student's session
- ClassData, BoardData, SubjectData sheets -> List of Classes,Boards and Subjects respectively
Future works:
- Adding unit tests to both Angular and Spring boot to improve quality of the application.
- Use Reverse proxying using Apache server to eliminate the hardcoded spring boot urls.
- Stylize exported excel column headers.