tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update angular book UI for the proxy generation changes.

pull/5260/head
Halil İbrahim Kalkan 6 years ago
parent
5f9d151b4c
commit
f73173bf4c
3 changed files with 26 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      docs/en/Tutorials/Part-2.md
  2. 56
      docs/en/Tutorials/Part-3.md
  3. BIN
      docs/en/Tutorials/images/generated-proxies-3.png

13
docs/en/Tutorials/Part-2.md
View File

@ -347,9 +347,9 @@ This is a fully working, server side paged, sorted and localized table of books.
## Install NPM packages ## Install NPM packages
> Notice: This tutorial is based on the ABP Framework v3.0.3+ If your project version is older, then please upgrade your solution. See the [migration guide](../UI/Angular/Migration-Guide-v3.md) if you are upgrading an existing project with v2.x. > Notice: This tutorial is based on the ABP Framework v3.1.0+ If your project version is older, then please upgrade your solution. See the [migration guide](../UI/Angular/Migration-Guide-v3.md) if you are upgrading an existing project with v2.x.
If you haven't done it before, open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install NPM packages: If you haven't done it before, open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install the NPM packages:
```bash ```bash
yarn yarn
@ -473,9 +473,9 @@ Run the following command in the `angular` folder:
abp generate-proxy abp generate-proxy
``` ```
The generated files looks like below: This command will create the following files under the `/src/app/proxy/books` folder:
![Generated files](./images/generated-proxies-2.png) ![Generated files](./images/generated-proxies-3.png)
### BookComponent ### BookComponent
@ -484,8 +484,7 @@ Open the `/src/app/book/book.component.ts` file and replace the content as below
```js ```js
import { ListService, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BookDto } from './models'; import { BookService, BookDto } from '@proxy/books';
import { BookService } from './services';
@Component({ @Component({
selector: 'app-book', selector: 'app-book',
@ -499,7 +498,7 @@ export class BookComponent implements OnInit {
constructor(public readonly list: ListService, private bookService: BookService) {} constructor(public readonly list: ListService, private bookService: BookService) {}
ngOnInit() { ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getListByInput(query); const bookStreamCreator = (query) => this.bookService.getList(query);
this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
this.book = response; this.book = response;

56
docs/en/Tutorials/Part-3.md
View File

@ -656,8 +656,7 @@ Open `/src/app/book/book.component.ts` and replace the content as below:
```js ```js
import { ListService, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BookDto } from './models'; import { BookService, BookDto } from '@proxy/books';
import { BookService } from './services';
@Component({ @Component({
selector: 'app-book', selector: 'app-book',
@ -673,7 +672,7 @@ export class BookComponent implements OnInit {
constructor(public readonly list: ListService, private bookService: BookService) {} constructor(public readonly list: ListService, private bookService: BookService) {}
ngOnInit() { ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getListByInput(query); const bookStreamCreator = (query) => this.bookService.getList(query);
this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
this.book = response; this.book = response;
@ -749,8 +748,8 @@ Open `/src/app/book/book.component.ts` and replace the content as below:
```js ```js
import { ListService, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BookDto, BookType } from './models'; // add BookType // import bookTypeOptions from @proxy/books
import { BookService } from './services'; import { BookService, BookDto, bookTypeOptions } from '@proxy/books';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; // add this import { FormGroup, FormBuilder, Validators } from '@angular/forms'; // add this
@Component({ @Component({
@ -764,12 +763,8 @@ export class BookComponent implements OnInit {
form: FormGroup; // add this line form: FormGroup; // add this line
bookType = BookType; // add this line
// add bookTypes as a list of BookType enum members // add bookTypes as a list of BookType enum members
bookTypes = Object.keys(this.bookType).filter( bookTypes = bookTypeOptions;
(key) => typeof this.bookType[key] === 'number'
);
isModalOpen = false; isModalOpen = false;
@ -780,7 +775,7 @@ export class BookComponent implements OnInit {
) {} ) {}
ngOnInit() { ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getListByInput(query); const bookStreamCreator = (query) => this.bookService.getList(query);
this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
this.book = response; this.book = response;
@ -808,7 +803,7 @@ export class BookComponent implements OnInit {
return; return;
} }
this.bookService.createByInput(this.form.value).subscribe(() => { this.bookService.create(this.form.value).subscribe(() => {
this.isModalOpen = false; this.isModalOpen = false;
this.form.reset(); this.form.reset();
this.list.get(); this.list.get();
@ -819,7 +814,6 @@ export class BookComponent implements OnInit {
* Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`. * Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`.
* Added `form: FormGroup` property. * Added `form: FormGroup` property.
* Added `bookType` property so that you can reach `BookType` enum members from template.
* Added `bookTypes` property as a list of `BookType` enum members. That will be used in form options. * Added `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. * 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 `buildForm` method to the end of the file and executed the `buildForm()` in the `createBook` method.
@ -910,8 +904,7 @@ Open `/src/app/book/book.component.ts` and replace the content as below:
```js ```js
import { ListService, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BookDto, BookType } from './models'; import { BookService, BookDto, bookTypeOptions } from '@proxy/books';
import { BookService } from './services';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
// added this line // added this line
@ -931,11 +924,7 @@ export class BookComponent implements OnInit {
form: FormGroup; form: FormGroup;
bookType = BookType; bookTypes = bookTypeOptions;
bookTypes = Object.keys(this.bookType).filter(
(key) => typeof this.bookType[key] === 'number'
);
isModalOpen = false; isModalOpen = false;
@ -946,7 +935,7 @@ export class BookComponent implements OnInit {
) {} ) {}
ngOnInit() { ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getListByInput(query); const bookStreamCreator = (query) => this.bookService.getList(query);
this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
this.book = response; this.book = response;
@ -972,7 +961,7 @@ export class BookComponent implements OnInit {
return; return;
} }
this.bookService.createByInput(this.form.value).subscribe(() => { this.bookService.create(this.form.value).subscribe(() => {
this.isModalOpen = false; this.isModalOpen = false;
this.form.reset(); this.form.reset();
this.list.get(); this.list.get();
@ -995,8 +984,7 @@ Open `/src/app/book/book.component.ts` and replace the content as shown below:
```js ```js
import { ListService, PagedResultDto } from '@abp/ng.core'; import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BookDto, BookType, CreateUpdateBookDto } from './models'; import { BookService, BookDto, bookTypeOptions } from '@proxy/books';
import { BookService } from './services';
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
@ -1009,15 +997,11 @@ import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap
export class BookComponent implements OnInit { export class BookComponent implements OnInit {
book = { items: [], totalCount: 0 } as PagedResultDto<BookDto>; book = { items: [], totalCount: 0 } as PagedResultDto<BookDto>;
selectedBook = new BookDto(); // declare selectedBook selectedBook = {} as BookDto; // declare selectedBook
form: FormGroup; form: FormGroup;
bookType = BookType; bookTypes = bookTypeOptions;
bookTypes = Object.keys(this.bookType).filter(
(key) => typeof this.bookType[key] === 'number'
);
isModalOpen = false; isModalOpen = false;
@ -1028,7 +1012,7 @@ export class BookComponent implements OnInit {
) {} ) {}
ngOnInit() { ngOnInit() {
const bookStreamCreator = (query) => this.bookService.getListByInput(query); const bookStreamCreator = (query) => this.bookService.getList(query);
this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
this.book = response; this.book = response;
@ -1036,14 +1020,14 @@ export class BookComponent implements OnInit {
} }
createBook() { createBook() {
this.selectedBook = new BookDto(); // reset the selected book this.selectedBook = {} as BookDto; // reset the selected book
this.buildForm(); this.buildForm();
this.isModalOpen = true; this.isModalOpen = true;
} }
// Add editBook method // Add editBook method
editBook(id: string) { editBook(id: string) {
this.bookService.getById(id).subscribe((book) => { this.bookService.get(id).subscribe((book) => {
this.selectedBook = book; this.selectedBook = book;
this.buildForm(); this.buildForm();
this.isModalOpen = true; this.isModalOpen = true;
@ -1069,8 +1053,8 @@ export class BookComponent implements OnInit {
} }
const request = this.selectedBook.id const request = this.selectedBook.id
? this.bookService.updateByIdAndInput(this.form.value, this.selectedBook.id) ? this.bookService.update(this.form.value, this.selectedBook.id)
: this.bookService.createByInput(this.form.value); : this.bookService.create(this.form.value);
request.subscribe(() => { request.subscribe(() => {
this.isModalOpen = false; this.isModalOpen = false;
@ -1155,7 +1139,7 @@ constructor(
delete(id: string) { delete(id: string) {
this.confirmation.warn('::AreYouSureToDelete', '::AreYouSure').subscribe((status) => { this.confirmation.warn('::AreYouSureToDelete', '::AreYouSure').subscribe((status) => {
if (status === Confirmation.Status.confirm) { if (status === Confirmation.Status.confirm) {
this.bookService.deleteById(id).subscribe(() => this.list.get()); this.bookService.delete(id).subscribe(() => this.list.get());
} }
}); });
} }

BIN
docs/en/Tutorials/images/generated-proxies-3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

Write Preview
Loading…
Cancel
Save