Generate multiple Vue.js front end pages from database templates
NOTE: This is a Vue.JS project – the program that reads data and writes data to the table must be written in vue.js. It is assumed that you will want to write some sort of API or other input/output method for reading and writing to the database that is compatible with Vue.js This is an initial proof of concept project - If we find a developer who does a great job, they will probably be asked to continue working on this project - possibly for several months after this initial test project.
PHASE 1 DETAILS
This project involves creating a utility program for quickly generating Vue.js screens. The program that you are asked to create (using C# or Python preferred, but not mandatory), will need to read one or more provided “visualization instruction templates” from a database, and then generating a Vue.js front end webpage according to the visualization template which lists the read-only and update-capable fields that need to be displayed, The visualization templates also provide various attributes to be included in the front end Vue.js page, namely:
• field types
• display sequences
• prompt text
• display mode (i.e. text output only, text box, radio buttons, dropdown)
• read or write modes
The program will loop through the attributes for each field to be displayed, or to be presented for update, based on sequence information, and will generate the proper visualization based on the list of attributes. Some fields will be presented as read only, and other fields as update-capable.
A sample visualization template for a theoretical “repair request” database (for a typical real-estate maintenance department) will be provided, along with 5 columns of sample data for 5 different repair request records.
PHASE 2 DETAILS
The second phase of this project goes beyond the initial step of “painting the Vue.js front end visualization screen”, and demonstrates the actual operations of using that page for reading from, or writing to, a database. In this phase, an input field shall be provided for the recID value of a “repair request” data record, , and when specified by the user, the recID will be used to populate the screen with the data for that maintenance request.
In addition to this “read” action, Phase 2 also includes adding the functionality for updating the values on the screen to the correct database record, or adding a new record with values provided by the user.
The sample data will be provided to you in an Excel spreadsheet, but feel free to export it to any database platform you’d like for demonstrating the “read” or “update” or “add” functions. In terms of what server you should use - if possible, please use your own, so we don’t have to give access to our dev environment.