Homepage where the user could choose the database to interact with
Creating a launchable site for use within the browser
Utilized npm dependencies to allow for the creation of configuration files that would then allow the site to be launched, and displayed corrected
Most notably various Webpack and Babel dependencies were used
Creating the files needed for all pages found within the site, and coding all visual components found on each page
Pages: Homepage, Search Pages, Search Results pages, Add New pages, and Header
Components include search forms, buttons to new pages, functionality buttons, spreadsheet and pagination, sorting and filtering dropdowns, and more
Implementing pop-ups for various buttons
Show warnings, instructions, and columns that have data entered incorrectly when 'Save' button is pushed
Allow duplication of rows to the given year
Functionality within React pages that do not directly interact with API calls
CSS for all site pages
Developed React tests for the various components and ability to get the correct information from the API
Used Jest, Enzyme, Chai, and the React Testing Library
67 tests in total across 14 files
At the top of the page, underneath the header, will be where the given search terms will show up to remind the user of what data they asked to be shown. Alongside those search boxes—which cannot be changed on this page—will be different sort and display options. The first option title "Sort By" allows the user to pick from a couple of different column names to sort by. When the user is first navigated to the Search Results page all data is sorted by Renewal Year in descending order by default, but the user can choose to change that. In addition, the next option titled "Display Order" then allows the user to decide whether they want the sorted data to be shown in ascending or descending order. Finally, the last option titled "Hide/Show Column Name" allows the user to pick from a dropdown of all column names within the database, and hide/show any within the spreadsheet. Once clicked on, hidden columns will be shown in the dropdown menu with a red background, and can be clicked on again to show the column within the spreadsheet, and change its dropdown background back to white. Any number of columns can be hidden at one time, and this does not take that data away from the database if it is saved.
In the middle of the page, underneath the search terms and display options is the spreadsheet. This is where all data queried using the search terms, if given any, is shown. The user is able to click on any cell within the spreadsheet and change it, but no changes to the data will be saved until the Save button is clicked, allowing the user freedom to change things without fear of automatically messing up something within the database. To the left of the spreadsheet are numbered checkboxes that correspond with the row of the same number. Checking and unchecking these checkboxes will allow the user some functionality. Right below the spreadsheet there are also components that allow pagination of the data. The user can choose to change the number of items that show up in the spreadsheet, which default to 10 on navigation, as well as choose which page they want to be on.
Finally, below the spreadsheet are 5 multicolored buttons. These buttons allow the user to interact with the data beyond changing what is found in the cells. The first button found is titled "Copy Selected to New Year." Any rows that have their checkboxes checked before pressing this button can be duplicated with a different Renewal Year. Once the button is clicked, a popup will explain to the user that they need to enter the year they want to copy these rows to, as well as how many rows will be copied. When the confirm button is pressed, new rows will pop up underneath the checked ones, with all data being the same except the Renewal Year, which now holds the year given by the user. Next, there are 2 buttons that are also seen within the Add New page. These are "Delete Selected Row" and "Duplicate Selected Row." The delete button will delete any rows whose checkboxes were checked, and the duplicate button will fully duplicate any rows whose checkboxes were checked. After that is the "Save Changes" button. This button is to be pushed when the user wants to save all changes to the database, and will bring up a popup making sure the user wants to save their data. Once they confirm their save, if all data is formatted correctly and there are no errors, then they will meet a popup explaining that data has been modified, added, and/or deleted, depending on the changes made. If there were errors, then a new popup will appear showing the user the row numbers and column names that contained errors, as well as the specific problems within them. Finally, the last button is titled "Export to CSV." Given the needs of the client this website was created for, clicking this button will download to the user's computer a CSV file containing all data within the spreadsheet on the current page.