Building our new Components

Create component

Lets start with the Create component. Navigate to our components/pages folder and create a new file named Create.vue :

The first named slot budget-creation is the component we’ll use to create new budgets, it’ll only be visible when budgetCreation is true and editPage is false, we’ll pass all our clients to it and a method named saveBudget .

The second named slot client-creation is the component used to create new clients, it’ll only be visible when budgetCreation is false and editPage is false, we’ll pass just the method saveClient to it.

The third named slot budget-edit is the component used to edit a selected budget, it’ll only be visible when budgetEdit and editPage are true. We pass all our clients to it, a selected budget and a method named fixClientNameAndUpdate .

And finally our last named slot is used to edit clients, it’ll only be visible when budgetEdit is false and editPage is true, we pass a selected client and a method named updateClient to it.

BudgetCreation component

Lets create our component used to create new budgets. Go to our components folder and create a new folder named Creation, and inside of it, create a component named BudgetCreation.vue

I’ll first explain the template of the component, since this is a rather big component:

Template

We first add a v-select to set the state of the budget, then a v-select to choose the desired client. Following that we’ll have a v-text-field for the title of the budget and a v-text-field for the description.

Then we iterate over budget.items so we can add and remove items from the budget item. We have a red button that calls removeItem function passing the item we want to remove.

Following that we have three v-text-field for the item’s title, price and quantity respectively.

At the end of the row we have a simple span which we show the subtotal for that item (quantity * price).

Below our items we have three more elements, a blue button which we use to add more items calling the addItem function, a span which we show the total price of this budget (the sum of every item subtotal) and a green button that we use to save the budget to our database calling saveBudget and passing the budget we want to save as a parameter.

Script

Now the script part:

First we receive two props, clients and saveBudget . These props come from our Home component.

Then we’ll define an object and an array as data. The first one is budget . This object is used to build our budget so we can bind values to it and to save it in our database, it has a title, a description, a state (writing by default), a client, a total price and items, each item has a title, a quantity, a price and a subtotal.

And a states array, which we use to select the state of our budget, every budget can either be writing, editing, pending, approved, denied or waiting.

Below the data we have a couple of methods, addItem and removeItem :

Every time we click the blue button we’ll call addItem , which as the name says, adds an item to our items array inside our budget object.

The removeItem does the opposite, everytime the red button is clicked, we removed the specified item from our budget’s items.

Style

ClientCreation component

This component is a simpler, stripped-down version of our BudgetCreation component:

Template

Script

Style

BudgetEdit component

This component is a modified version of our BudgetCreation component:

Template

The only difference between BudgetEdit’s and BudgetCreation’s template is the save button, which we change the text to “Update” and change the method to fixClientNameAndUpdate instead of using saveBudget

Script

We start by receiving three props, clients , fixClientNameAndUpdate and selectedBudget . The data is identical to BudgetCreation’s. We have a budget object and a states array.

We then have a mounted lifecycle where we call parseBudget , a method we’ll create in a second.

And finally we have our methods :

We’ll have the same two functions from BudgetCreation, addItem and removeItem , but we’ll also have a new one, parseBudget :

We use this method to set this component’s budget object equal to our prop selectedBudget, but we all use it to keep our object subtotal and total price’s updating.

Style

ClientEdit component

Similarly to our last component, this will look just like our ClientCreation, except it’ll use a different method, instead of saveClient we’ll use updateClient

Template

Script

Style

That’s it for new components.