Overview
Lawshield was another project that I got to be a part of in terms of giving an existing service a modern and competitive look. Similarly to other development cycles, Laravel, Vue & SASS were going to be the main frameworks used throughout. The main difference was transitioning to a different CMS (Directus), which provides more advanced relations between collections and a compact user interface that allows users to edit content simultaneously.
Challenges
-
- Directus CMS integration with Vue
For this project, it was essential to have the ability to integrate the Directus API with Vue. Some of the JS components required here were a client testimonials section, the latest news partial and a carousel with the company partners.
-
- Contact form for notification of loss
Another key feature I worked on was updating a contact form that would provide notification for vehicle loss (FNOL) to a specified user that would handle the case. The component contained over 60 fields and wasn't very engaging or interactive. It also needed to be replicated for two other companies managed by my employer and follow their brand designs.
Process
1. Obtain access to the Directus API
Before starting the development of separate site components, it was crucial to initiate the connection with the Directus API and test the common sort, filter and specific fields extraction functionalities. Making the Directus connection credentials accessible to each Vue instance was achieved by using Vue.prototype, which makes the $directus property a global one.
2. Build reusable components that use data extracted from Directus
Applying the CMS content to Vue JS instances was easy once the connection was successful. This method was used for several dynamic components and is quite straightforward in terms of having the ability to filter, sort or include specific collection fields.
3. Develop an FNOL form for Lawshield and other companies
With the redesign of Lawshield, there was also a request to update an external notification form that was used by the same company. I took the initiative to do that as I felt more comfortable having worked on multiple contact forms in the past. The biggest obstacle here was the length of the component, which contained over 60 fields.
Presenting a large number of fields on a single page in a compact way was achieved by using the BootstrapVue package with its handy Collapse component and toggle functionality.
Additionally, when submitting the form, users are reminded about the number of incomplete fields with a pop-up modal. The empty entries are calculated by a function, which iterates through a 'form' object containing all of those fields.
Conclusion
Although some of the platforms and frameworks used in this platform were new for me and the other team developers (Azure, Directus CMS ), I quite enjoyed the learning process and successfully contributed to the project development. While I am still improving my skills with Vue, building a form with higher complexity than usual helped me gain more confidence and made me feel more prepared for utilising the framework's powerful functionality for future projects.
