Check out the full series of Questions Management tutorial here.
To update a question in the Frontend section of the Questions Management application, I will first need to add a new method in the QuestionsService class that will allow us to call the API update question of API Question Service to pass the information of the question which we need to update.
Specifically, this method is as follows:
|
1 2 3 |
updateQuestion(question: Question) { return this.http.put("/question/" + question.id, JSON.stringify(question), { headers: this.headers }).toPromise(); } |
Because we are passing the content of the question in JSON format, as you can see, I used a variable headers with the declaration:
|
1 |
private headers = new HttpHeaders({ 'Content-Type': 'application/json' }); |
to do this.
Next we will build the form to update the question.
On the All Questions page, when the user clicks on the Edit button of each line corresponding to a question in the table, I will popup a window using Bootstrap Modal that allows the user to update the information of this question. There is 2 information in this window that is the description of the question and the category that this question belongs to.
To do this, in the all_questions_component.html file in the src/app/questions/all_questions directory, I will add this new Bootstrap Modal after “<!- /.panel ->” with the following content. :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!-- Modal --> <div class="modal fade" id="editQuestionModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Update Question</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Description</label> <textarea class="form-control" rows="3" [(ngModel)]="currentEditDescription" name="currentEditDescription"></textarea> </div> <div class="form-group"> <label>Category</label> <select [compareWith]="byCategory" [(ngModel)]="selectedCategory" class="form-control"> <option *ngFor="let c of categories" [ngValue]="c"> {{ c.name }} </option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" (click)="updateQuestion()">Update</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> |
To display this popup, I will modify the code for the “Edit” button, from:
|
1 |
<button type="button" class="btn btn-warning btn-circle"><i class="fa fa-edit"></i></button> |
to:
|
1 |
<button type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#editQuestionModal" (click)=editQuestion(c)><i class="fa fa-edit"></i></button> |
As you can see, this Modal Bootstrap id is “editQuestionModal”. I’ve defined the currentEditDescription variable in the AllQuestionsComponent class to keep the description of the question we want to update:
|
1 |
currentEditDescription: string; |
For the category, we also define a currentEditCategory variable to hold the category information of the question to be updated:
|
1 |
currentEditCategory: Category; |
When the user clicks on the “Edit” button, our application will call the editQuestion() method in the AllQuestionsComponent class with the parameter CompositeQuestion object of the question to update. Inside the editQuestion() method, we need to initialize a Question object to hold the new information for the question that needs to be updated and assign the value to currentEditDescription, currentEditCategory as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
editQuestion(compositeQuestion: CompositeQuestion) { this.editedQuestion = new Question(); this.editedQuestion.id = compositeQuestion.id; this.currentEditDescription = compositeQuestion.description; this.currentEditCategory = compositeQuestion.category; this.selectedCategory = compositeQuestion.category; this.categoriesService.findAllCategories().then(r => { this.categories = r; }); } |
As you can see, I have also defined a variable as categories:
|
1 |
categories: Category[]; |
and get all the categories in the system to display using the CategoriesService.
|
1 2 3 |
constructor(private questionsService: QuestionsService, private categoriesService: CategoriesService) { } |
To keep the category information we choose for this new question, I use the selectedCategory variable in the AllQuestionsComponent class.
|
1 |
selectedCategory: Category; |
When the popup pops up, we need select the current category that this question belongs to so I declared using the Angular compareWith directive in the <select> tag with the value of the byCategory() method name defined in the AllQuestionsComponent class as follows:
|
1 2 3 |
byCategory(category1: Category, category2: Category){ return category1.id === category2.id; } |
When the user clicks on the “Update” button, the updateQuestion() method in the AllQuestionsComponent class will be called to update the question as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
updateQuestion() { this.editedQuestion.description = this.currentEditDescription this.editedQuestion.categoryId = this.selectedCategory.id; this.questionsService.updateQuestion(this.editedQuestion) .then(r => { alert("Success"); this.currentEditDescription = ""; this.currentEditCategory = null; $('#editQuestionModal').modal('hide'); this.destroyDatatable(); this.showAllQuestions(); }) .catch(this.handleError); } |
with the destroyDatatable() and handleError() methods as follows:
|
1 2 3 4 5 6 7 8 9 10 |
private handleError(error: any): Promise<any> { alert('An error occurred' + error); return Promise.reject(error.message || error); } destroyDatatable() { $('#dataTables-questions').DataTable({ "retrieve": true }).destroy(); } |
OK, so we have completed the implementation for updating question in the Frontend of the Question Management application. Let’s try it out!
On the All Questions page, click the “Edit” button of any question, a window will appear as follows:
After editing the contents of this question, click the Update button, the results will be as follows:
