In this lecture, we are going to update the title of the clip in the database.
There are a couple of steps you'll need to perform during this process.
We should provide feedback to the user to inform them of the status of their form submission.
We can reuse the alert component to output the submission status.
In fact, we can reuse some of the code we've written for the upload component.
The forms for uploading a clip and editing a clip are similar.
We'll be able to borrow code from the upload components.
Open the upload template file in your editor.
Search for the app alert component inside of the template.
We're going to copy the entire component from the template.
Next, open the edit template file.
Paste the template above the form element.
We can safely remove the second paragraph tag, which stores the percentage of the upload, this functionality
won't be available from this component.
After adding the template, we should define the properties used by this component there the show alert,
alert color and alert message properties.
Before defining these properties, we should bind the disabled attribute on the button element to disable
submission.
The button can be borrowed from the upload template file.
Switch back to this file and grab a copy of the button element.
Back in the edit template, scroll down to the bottom of the form.
Let's replace the button.
Pay close attention to the buttons bindings or using a property called in submission to manipulate the
buttons appearance.
One more thing we should handle the form submission with the Nji Submit Directive.
Scroll back to the opening form tag on this tag.
Bind the energy submit event to a function called Submit.
Our template is ready.
Let's open the edit component class file to define these properties.
In this class, defined two properties called in submission and show alerts set both properties to false.
The information property will be used to disable the submission button by default, it'll be false to
enable it.
The show alert property will be used to display the alert message.
It'll also be false to hide.
The alert message will create another property for the color of the alert box.
The alert color property will be set to blue.
Lastly, at a property called Alert Message, the value for it will be the following.
Please wait.
Updating clip.
We'll use this property for the inner text of the alert box.
Our property's already.
The last step is to add the submit function at the bottom of the class defined the submit function.
The submit function will perform two actions.
Firstly, it should update the properties for the alert box and form.
We should inform the user their submission has started.
Secondly, it should send the data to Firebase.
We will start with the alert box.
The first properties will update are the information and show alert properties set both to true.
Devalue will disable the button and make the alert box visible afterward, the alert colour property
will be set to blue.
It's already set to the blue class, but we should reset the form in case of submissions.
The message will also be the same as the defaults.
The alert box is ready, we can start to make a request to the database, the type of request we want
to make is to update the data.
We've learned how to insert and select data in Firebase.
Updating data won't be too different than what we've done before.
This request should be initiated by our service.
This way, other components can update clips.
Let's open the clip service file.
Inside our service, we can define a method called update clip.
We're going to ask for two pieces of information as arguments inside the functions, arguments add the
ID and title, both arguments must be a string.
The aid will help us select a document to update a document can be updated after we've selected it in
the function.
Let's select a document by calling the this short clip collection stopped document function.
The document function allows you to select a document by its side will pass in the ID argument.
The document function will return and object where we can access its data.
In addition, we have access to functions for interacting with the document or going to chain of function
called update.
The update function will allow us to update any of the properties inside it.
We're not required to update every property if we omit a property.
Firebase will leave the original value alone.
We don't have to pass in the whole object.
Another option is to add additional properties to the object.
It's a flexible function.
Let's pass in the title.
The update function will return a promise we're going to return the promise to allow components to handle
the response.
Let's start handling the response in the edit component, the clip service will need to be injected
into the component at the top of the file import the clip service.
Next, we can inject this service into our class.
Finally, we can start using the update click function in the submit button.
We're going to invoke this function after updating the properties for the alert component.
The update clip function returns a promise the async await key words should be added in the appropriate
locations of our functions.
Otherwise, barcode after the function may run, we should wait until the promise is resolved before
we display a success message, an error message should appear for problems with the request.
Surround the update function with a try catch block statement.
If we get an error, we'll do two things.
First, we'll stop the function from running.
Second, we'll update the alert properties to inform the user an error has occurred.
The information property will be set to false.
This value will re-enable the form.
Update the alert color to red.
The message will be the following.
Something went wrong.
Try again later.
Lastly, will return the function.
If the update function runs successfully, we'll update the alert properties to inform the user.
We won't bother with redirecting or reloading.
The page will even enable the form again if they want to make further changes.
Like before we'll set the information property to false.
The alert color property will be set to green.
Lastly, the message will be the following success.
The process is pretty straightforward.
Keep in mind, this is one way of tackling form submissions.
You may want to do it another way.
That's fine.
This is just how I check form submissions.
Let's give things a test in the browser.
Edit any of the clips.
After making changes to a clip, we will be able to submit the form without them conflicting with one
another, the form submission will work successfully or so it seems.
If we go back, the changes are not being reflected on the page.
If we were to refresh the page, the updates are being applied to our data.
The update occurs in the edit component.
The manage component does not get updated on the changes made to its data.
Applying updates in both components will require sending the data back up to the parent component in
the next lecture.
We'll fix this problem by sending the data back to the parent component.