Low Code Vue WebApps with Vuetify— creating the Project Management WebApp

I was thinking about how I can test the low code Vue tool i’m creating for app building and I came across a simple and nice Project Management Excel Spreadsheet, so this process is making that into a Vuetify WebApp using Incwadi yamaBali i.e BVAD3 StoryBook. The running version of the StoryBook is available here, you will need a PHP enabled webserver to run it. It writes some files to disk.

So what have we done so far? In these lessons, we look at Project Types, Task Types, Project Status and Weekly Schedule.

Lesson 01 — We created an empty MySQL db, then created a “Project Types” page with CRUD functionality. The creation of the UI is directly done from the BVAD3 StoryBook WebApp

Output from Incwadi yamaBali — Project Types

Output from Incwadi yamaBali — Add Project Type Screen

In this lesson we used TextFields for the input and are also using these for v-data-table inline editing.

Lesson 02 — Its better to use a color selection control for the Project Types colors, we make some changes to our models, recompile the project and have a color section v-autocomplete component. This has v-data-table inline editing also.

Output from Incwadi yamaBali — Project Types with Colors

To show our colors, we use the v-avatar with a span inside a v-data-table slot.

Lesson 03 — In this lesson, we want to show the Project Types as Color Coded Chips. Each Project Type should source its color from the color field name in our database. We link these two, remove the color from the table.

Output from Incwadi yamaBali — Project Types Color Coded Chips

Lesson 04 — We create Project Status and Task Types from Project Types model. In the story book there is functionality to clone a model. We use this to create these two new models and then generate the view code for them.

Output from Incwadi yamaBali — Add Task Type Form

Lesson 05 — We want to record some kind of Weekly Schedule for our Projects. This will have the week days, working hours and whether a day is a working day or not. For this we used a custom made MinusPlus Chip Component and the Switches. One can increment and decrement the working hours directly on the v-data-table.

Output from Incwadi yamaBali — Weekly Schedule Data Table

Output from Incwadi yamaBali — Add Weekly Schedule Form

You can check this b4X blog out for this amazing project.

The StoryBook JSON project for this is available on the GitHub Repo. The file can be imported to the StoryBook to re-create this project.

Part 02 is out..