Adding and removing entries

[00:00 - 00:09] So far, we have enabled the user to change the text anywhere in the resume. But what if the user wants to add a skill to the resume or remove one?

[00:10 - 00:23] For that, we want to add buttons below each list or unordered list element, that let the user add or remove list entries. Let's create an edit buttons component for that.

[00:24 - 00:36] We want our component to be called edit buttons, so we create a file called editbuttons.view. Let's add two buttons in the template, one with a plus and one with a minus.

[00:37 - 01:02] Each button will get two classes, a general edit button class, and an add or remove specific class, so we can apply a different color. In order to see the buttons in the resume, we have to import and register the editbuttons component and the app component.

[01:03 - 01:21] Let's only add an underneath the list of items in the skills section for now. Now, we need to add the logic in this component.

[01:22 - 01:32] If the user clicks a button, we must notify the app component to adjust the data. We can apply what we have learned from the section headline component here.

[01:33 - 01:45] We add a click event listener, emit a custom event, and add an event listener that listens to the custom event and the parent component. Let's take care of emitting the event first.

[01:46 - 02:02] Since a click on the add or remove button will trigger completely different actions, we need to emit two different events. We will emit add click and remove click.

[02:03 - 02:25] In the app component, we will listen to these events and execute an event handler. What we want in the add method is that a new entry gets pushed to the skills array.

[02:26 - 02:50] In the remove handler, we want to remove the last entry of the array, which we do with the pop function. We do the same in the highlight section.

[02:51 - 03:35] The description items in the experience and education sections are also arrays, so we can push a new entry string or delete the last item in the array here as well. Since experience and education itself are arrays, we first have to locate the correct entry.

[03:36 - 03:56] If we add the added buttons component in the V4 iteration, the buttons will be rendered in each iteration and we can access the index from there. We will be able to select the index from the original version of the file.

[03:57 - 04:26] We will see the result of the result. Alternatively, we can access the correct entry with the item variable that we made available in each iteration.

[04:27 - 04:50] This points to the current entry and is shorter than accessing via array and index. Let's test it all out in the browser.

[04:51 - 05:09] Great, the only thing that seems weird is that the remove button is still shown even when there is no entry left to remove. We can inform the added buttons component about whether or not the array contains at least one entry and based on that, display the remove button or not .

[05:10 - 05:35] For that, we pass the prop/show/remove button to the component. The expression checks if the array length is bigger than 0 and will therefore evaluate to either true or false.

[05:36 - 06:18] Added buttons receive the spoolion. To make the prop available in the edit buttons component, we have to explicitly declare it again in the props array, just like we did with the section head length component.

[06:19 - 06:32] In order to only show the button conditionally, we can use the vif directive within the edit buttons component. The vif directive gets added to an element and determines whether it gets rendered or not.

[06:33 - 06:48] This is referred to as conditional rendering in view. If the directive evaluates to true C value, in our case it evaluates to either true or false, the element gets rendered.

[06:49 - 07:00] When using vif, you can also use vids on the following element. This element only gets rendered if the vif directive evaluates to false.

[07:01 - 07:14] The element must follow directly though. There can be no element in between. Let's remove the last div again because the lack of a remove button is pretty self-explanatory.

[07:15 - 07:27] I just wanted to demonstrate vids because there are many cases where you will want to use it. We are able to add and remove the items and the skills, highlights, experience description and education description section.

[07:28 - 07:42] What needs to be added is that we also need to be able to add or remove an entire experience or education entry, not just from the description part. For default, we gave the user three experience entries into education entries.

[07:43 - 07:53] Now it is time to make this adjustable. We can start by adding the methods. We create one add experience method and one add education method.

[07:54 - 08:10] Each of these methods should add an object with placeholder data to the respective array. Since experience and education should appear in descending order, in other words, with the most current one first, we need to add the new entry to the beginning of the array.

[08:11 - 08:35] We use the array method unshift here in order to insert the new object at the beginning of the array. We can reuse the added buttons component here. I want to place the add button right next to the headline of the experience and education section.

[08:36 - 09:07] In order to place the button directly next to the headline, we wrap both in a div that we set to display flags. We don't want the remove button here, so we pass in false for the show remove prop. We use the same add click custom event here as before and use our add experience method as a handler.

[09:08 - 09:32] Let's do the same for the education section. By testing it in the browser, you can see that it works.

[09:33 - 09:54] We also want to wait to delete entries from the experience and education section. One option would be to add the remove button next to the add button and then either delete the last entry or the first entry. With adding an entry, it was clear that the user needed to add a new entry to the beginning of the array. When deleting an entry, however, it needs to be clarified.

[09:55 - 10:05] The user may want to delete the most recent experience or an older experience. It would be best if the user could choose which specific experience and education entry to delete.

[10:06 - 10:38] For that, we will add a button next to each entry. In order to remove a specific array element, we can use the error method "spl ice".

[10:39 - 10:58] The first argument, the splice method accepts, is the index to start removing items from. The second is the number of items we want to remove. This is always one in our case. Since we are in a v4 iteration, we have the index variable available that we can just pass to the method.

[10:59 - 11:15] As a first step, let's use a button element here instead of our added button's component. As you can see in the browser, it works perfectly. Let's turn these inline handlers into methods to improve readability.

[11:16 - 12:14] The button before wishes the prototype to test the event handler functionality. Let 's use our added button's element instead. We want to show the remove button but not the add button. Previously, we pass the show remove button to the added button's component.

[12:15 - 12:52] Let's also pass a show add button prop and add a vif to the add button that checks if this prop is true. For default, we always want the add button to be shown and only hide it if we pass a prop with the value false to the component.

[12:53 - 13:11] Same with the remove button. We always want to show it by default. By adding default values to the props and the added button's component, we can avoid having to pass props to this component in all cases where the prop value would be the same as the default value.

[13:12 - 13:29] Currently, we have declared props as an array of strings. A second option is to declare them as an object. This way, we can add a default value. There are numerous properties you can declare in that object, including the type and the default value.

[13:30 - 13:58] For more information, you can refer to the view documentation on this. We state the default value true for both the show add button and the show remove button prop.

[13:59 - 14:18] You can also add the type boolean here. Back to the app template, we will pass show add button false to the component, thus overriding the default prop value.

[14:19 - 14:54] As you can see, the add button is not shown anymore here, which is what we need . We only need the remove click event listener and we pass the event handler that we previously created.

[14:55 - 15:24] The default browser styling for buttons is not so appealing. To overwrite that, you can copy the styling from the video script section or create your own button styling. Check it out in the browser. Do you like it? Some people might find all those plus and minus buttons confusing.

[15:25 - 15:41] In order to make it clearer what the purpose of each of them is, you could pass in a text prop for the content of the add and the remove button. If you want to do this exercise, pause here.

[15:42 - 16:08] As default values, we can use the plus and the minus sign and then optionally overwrite this with the text prop. In my opinion, using the plus and minus sign is pretty clear for all the list items.

[16:09 - 16:33] For the plus, next to the experience and education section, I want the text add experience or add education to clarify what will happen here. For that, I pass text add and experience and text add and education to the added button's component accordingly.

[16:34 - 16:48] Watch out. You cannot use VBIND or the colon here before the prop because we are not referencing reactive data. We simply pass a static string that won't change.

[16:49 - 17:02] Now it looks clearer to me. I will leave it at that. If you want to add different text to any other buttons, feel free to do so. As a final enhancement, I want the buttons to get some distance to the list elements.

[17:03 - 17:36] I will add 5px with margin block and to the resume. Since the resume content is overflowing the resume a bit, I will also remove one description entry.

[17:37 - 17:46] Now we have a beautiful resume with the functionality for adding or removing entries.