Django – React Opportunity Tracking

Clicking on the Opportunities lists all the Opportunities already tracked and enables the user to add more easily. This page also uses the react-data-table-component library to create the table seen below. Clicking on the column titles sorts the columns. The Create Opportunity button opens up a blank opportunity page. Clicking the individual rows opens the individual opportunity to edit the page.

The UI for editing the opportunities has significantly changed from the Ruby on Rails implementation. Three bootstrap cards help to break up the monotony of a 2-4 page long form. The first card has all the basic input fields (text, drop-down, and date/time). Comments, especially on opportunities, can get quite long, as this is the ideal place to put email threads and meeting notes (we’ll get more into that later).

The bottom panel is also exciting: I integrated the CKEditor5 React component into the application. This enabled HTML content within the Job Description. This may not be a big deal for some of the smaller descriptions, however many descriptions themselves are several pages long: the HTML tags help break that all up. Unfortunately, Lists were the only feature that I wanted to use which showed up in the premium (pay) version.

Comments on an opportunity can be rather lengthy: so the default is that they are hidden. The Show Comments button indicates the amount of comments that are hidden. Clicking on the button shows all comments on the particular opportunity and a small interface to create, edit, and delete the comment. Comments have both different types and a date/time field.