diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md index 92e04d0b41..f6a59f1108 100644 --- a/docs/en/Tutorials/Part-3.md +++ b/docs/en/Tutorials/Part-3.md @@ -13,7 +13,7 @@ In this tutorial series, you will build an ABP based web application named `Acme * **{{DB_Value}}** as the ORM provider. * **{{UI_Value}}** as the UI Framework. -This tutorial is organized as the following parts; +This tutorial is organized as the following parts: - [Part 1: Creating the server side](Part-1.md) - [Part 2: The book list page](Part-2.md) @@ -51,19 +51,19 @@ This part is also recorded as a video tutorial and ** ``` -* Added `New book` button to the card header.. +* Added a `New book` button to the card header.. * Added the `abp-modal` which renders a modal to allow user to create a new book. `abp-modal` is a pre-built component to show modals. While you could use another approach to show a modal, `abp-modal` provides additional benefits. -You can open your browser and click **New book** button to see the new modal. +You can open your browser and click the **New book** button to see the new modal. ![Empty modal for new book](images/bookstore-empty-new-book-modal.png) @@ -801,11 +801,11 @@ export class BookComponent implements OnInit { ``` * Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`. -* Added `form: FormGroup` property. -* Added `bookTypes` property as a list of `BookType` enum members. That will be used in form options. +* Added a `form: FormGroup` property. +* Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options. * Injected `FormBuilder` into the constructor. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms. -* Added `buildForm` method to the end of the file and executed the `buildForm()` in the `createBook` method. -* Added `save` method. +* Added a `buildForm` method to the end of the file and executed the `buildForm()` in the `createBook` method. +* Added a `save` method. Open `/src/app/book/book.component.html` and replace ` ` with the following code part: @@ -863,7 +863,7 @@ Also replace ` ` with the following code p ### Datepicker -We've used [NgBootstrap datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) in this component. So, need to arrange dependencies related to this component. +We've used [NgBootstrap datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) in this component. So, we need to arrange the dependencies related to this component. Open `/src/app/book/book.module.ts` and replace the content as below: @@ -959,7 +959,7 @@ export class BookComponent implements OnInit { ``` * Imported ` NgbDateNativeAdapter` and `NgbDateAdapter`. -* We added a new provider `NgbDateAdapter` that converts Datepicker value to `Date` type. See the [datepicker adapters](https://ng-bootstrap.github.io/#/components/datepicker/overview) for more details. +* We added a new provider `NgbDateAdapter` that converts the Datepicker value to `Date` type. Check out the [datepicker adapters](https://ng-bootstrap.github.io/#/components/datepicker/overview) for more details. Now, you can open your browser to see the changes: @@ -1054,14 +1054,14 @@ export class BookComponent implements OnInit { ``` * We declared a variable named `selectedBook` as `BookDto`. -* We added `editBook` method. This method fetches the book with the given `id` and sets it to `selectedBook` object. +* We added an `editBook` method. This method fetches the book with the given `id` and sets it to `selectedBook` object. * We replaced the `buildForm` method so that it creates the form with the `selectedBook` data. * We replaced the `createBook` method so it sets `selectedBook` to an empty object. * We changed the `save` method to handle both of create and update operations. ### Add "Actions" Dropdown to the Table -Open the `/src/app/book/book.component.html`  and add the following `ngx-datatable-column` definition as the first column in the `ngx-datatable`: +Open `/src/app/book/book.component.html`  and add the following `ngx-datatable-column` definition as the first column in the `ngx-datatable`: ```html ``` -This template will show **Edit** text for edit record operation, **New Book** for new record operation in the title. +This template will show the **Edit** text for edit record operation, **New Book** for new record operation in the title. ## Deleting a Book -Open the `/src/app/book/book.component.ts` and inject the `ConfirmationService`. +Open the `/src/app/book/book.component.ts` file and inject the `ConfirmationService`. Replace the constructor as below: @@ -1137,7 +1137,7 @@ delete(id: string) { * We injected `ConfirmationService` to the constructor. * Added a `delete` method. -> See the [Confirmation Popup documentation](../UI/Angular/Confirmation-Service) for more about this service. +> Check out the [Confirmation Popup documentation](../UI/Angular/Confirmation-Service) for more about this service. ### Add a Delete Button @@ -1169,7 +1169,7 @@ Clicking the "Delete" action calls the `delete` method which then shows a confir In this section, you will learn how to create a new modal dialog form to create a new book. Since we've inherited from the `AbpCrudPageBase`, we only need to develop the view part. -### Add "New Button" Button +### Add a "New Button" Button Open the `Books.razor` and replace the `` section with the following code: @@ -1191,7 +1191,7 @@ This will change the card header by adding a "New book" button to the right side ![blazor-add-book-button](images/blazor-add-book-button.png) -Now, we can add a modal that will be opened when we click to the button. +Now, we can add a modal that will be opened when we click the button. ### Book Creation Modal @@ -1259,7 +1259,7 @@ This code requires a service; Inject the `AbpBlazorMessageLocalizerHelper` at ```` * The form implements validation and the `AbpBlazorMessageLocalizerHelper` is used to simply localize the validation messages. -* `CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` method are defined by the base class. See the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components. +* The `CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` methods are defined by the base class. Check out the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components. That's all. Run the application and try to add a new book: @@ -1267,7 +1267,7 @@ That's all. Run the application and try to add a new book: ## Updating a Book -Editing a books is similar to the creating a new book. +Editing a book is similar to creating a new book. ### Actions Dropdown @@ -1287,7 +1287,7 @@ Open the `Books.razor` and add the following `DataGridEntityActionsColumn` secti * `OpenEditModalAsync` is defined in the base class which takes the entity (book) to edit. -`DataGridEntityActionsColumn` component is used to show an "Actions" dropdown for each row in the `DataGrid`. `DataGridEntityActionsColumn` shows a **single button** instead of a dropdown if there is only one available action inside it: +The `DataGridEntityActionsColumn` component is used to show an "Actions" dropdown for each row in the `DataGrid`. The `DataGridEntityActionsColumn` shows a **single button** instead of a dropdown if there is only one available action inside it: ![blazor-edit-book-action](images/blazor-edit-book-action-2.png) @@ -1384,7 +1384,7 @@ You can now run the application and try to edit a book. ## Deleting a Book -Open the `Books.razor` page and add the following `EntityAction` under the "Edit" action inside the `EntityActions`: +Open the `Books.razor` page and add the following `EntityAction` code under the "Edit" action inside `EntityActions`: ````xml