Low Code Vue WebApps with Vuetify — creating the Project Management WebApp (2)
We first introduced you to BANanoVuetifyAD3, a B4x wrap of Vuetify to use with the BANano JavaScript Transpiler. We then looked at Incwadi yamaBali (StoryBook), a tool I am working on to create Vuetify CRUD WebApps.
We are reserving the look at the generated source code for later as there are some things we need to explain in detail.
This thread deals with the next parts of our lessons to create the other parts of the Project Management WebApp. We left the last lesson in Part 05.
Here we will look at the following sections of our app: Holidays, Resources, Projects
Lesson 06 — In this 6th lesson, we create the Holidays. This will be useful for cost calculations as these are supposed to be excluded from costing the project.
When the add (+) button is clicked, an Add/Edit screen is shown where one can add / update holiday details. This uses a v-textfield and v-date-picker component.
Lesson 07 — We start by creating Resources that can be used in project. This will cover resource names and their hourly rates. In another lesson, Lesson 08, we later add display images for the resources.
When an email address is clicked on the v-data-table, it activates the default email sending application.
The resource adding / updating screen is quite simple. Besides the v-text-fields, you have a v-image that shows an image as soon as its uploaded for the resource being maintained.
Lesson 09 — Creating the Projects Screen. This is one of the first complex screens of the application, where project content has to be captured. The project details involves planned and actual dates, progress and some useful details about the projects. When creating this screen, we also see how to establish relationships with the StoryBook that are later sourced from the data-base when the application is running.
As there is quiet some content of the Projects Screen, we have made the v-dialog to take the whole screen.
It should be noted that at this time all the code that works here is just from B4x source code generation tool and we have not added any code to customize the application.
Lesson 10 — This is just a video that reviews everything we have been able to accomplish so far with our Project Management WebApp development.
Lesson 11 — is a continuation of Part 09, where we attempt to use colored avatar chips for the resource allocation per projects.
We have created a Github Repo for this project. This has a working version of the BVAD3 Incwadi yamaBali (StoryBook) web app, the b4x source code for our current Project Manager WebApp, the SQL script file to create our MySQL backend and a storybook file that you can import.
Happy BVAD3 Coding.
PS: Watch for Part 03 — coming soon