mirror of https://github.com/abpframework/abp.git
19 changed files with 163 additions and 96 deletions
@ -1,19 +1,14 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { Routes, RouterModule } from '@angular/router'; |
|||
|
|||
import { BooksComponent } from './books.component'; |
|||
import { LayoutApplicationComponent } from '@abp/ng.theme.basic'; |
|||
import { BooksComponent } from './books.component'; |
|||
|
|||
const routes: Routes = [ |
|||
{ |
|||
path: '', |
|||
component: LayoutApplicationComponent, |
|||
children: [{ path: '', component: BooksComponent }], |
|||
}, |
|||
{ path: '', component: LayoutApplicationComponent, children: [{ path: '', component: BooksComponent }] }, |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forChild(routes)], |
|||
exports: [RouterModule] |
|||
exports: [RouterModule], |
|||
}) |
|||
export class BooksRoutingModule { } |
|||
export class BooksRoutingModule {} |
|||
|
|||
@ -1 +1,31 @@ |
|||
<p>books works!</p> |
|||
<div id="wrapper" class="card"> |
|||
<div class="card-header"> |
|||
<div class="row"> |
|||
<div class="col col-md-6"> |
|||
<h5 class="card-title"> |
|||
Books |
|||
</h5> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<p-table [value]="books$ | async" [loading]="loading" [paginator]="true" [rows]="10"> |
|||
<ng-template pTemplate="header"> |
|||
<tr> |
|||
<th>Book name</th> |
|||
<th>Book type</th> |
|||
<th>Publish date</th> |
|||
<th>Price</th> |
|||
</tr> |
|||
</ng-template> |
|||
<ng-template pTemplate="body" let-data> |
|||
<tr> |
|||
<td>{{ data.name }}</td> |
|||
<td>{{ bookType[data.type] }}</td> |
|||
<td>{{ data.publishDate | date }}</td> |
|||
<td>{{ data.price }}</td> |
|||
</tr> |
|||
</ng-template> |
|||
</p-table> |
|||
</div> |
|||
</div> |
|||
|
|||
@ -1,13 +1,27 @@ |
|||
import { Component, OnInit } from "@angular/core"; |
|||
import { Store } from "@ngxs/store"; |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Store, Select } from '@ngxs/store'; |
|||
import { BooksState } from '../store/states'; |
|||
import { Observable } from 'rxjs'; |
|||
import { Books } from '../store/models'; |
|||
import { BooksGet } from '../store/actions'; |
|||
|
|||
@Component({ |
|||
selector: "app-books", |
|||
templateUrl: "./books.component.html", |
|||
styleUrls: ["./books.component.scss"] |
|||
selector: 'app-books', |
|||
templateUrl: './books.component.html', |
|||
styleUrls: ['./books.component.scss'], |
|||
}) |
|||
export class BooksComponent implements OnInit { |
|||
@Select(BooksState.getBooks) |
|||
books$: Observable<Books.Item[]>; |
|||
|
|||
bookType = Books.Type; |
|||
|
|||
loading = false; |
|||
|
|||
constructor(private store: Store) {} |
|||
|
|||
ngOnInit() {} |
|||
ngOnInit() { |
|||
this.loading = true; |
|||
this.store.dispatch(new BooksGet()).subscribe(() => (this.loading = false)); |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { RestService, Rest } from '@abp/ng.core'; |
|||
import { Books } from '../../store/models'; |
|||
import { Observable } from 'rxjs'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root', |
|||
}) |
|||
export class BooksService { |
|||
constructor(private rest: RestService) {} |
|||
|
|||
get(): Observable<Books.Response> { |
|||
const request: Rest.Request<null> = { |
|||
method: 'GET', |
|||
url: '/api/app/book', |
|||
}; |
|||
|
|||
return this.rest.request<null, Books.Response>(request); |
|||
} |
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { HttpClient } from '@angular/common/http'; |
|||
import { environment } from 'src/environments/environment'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class BooksService { |
|||
|
|||
constructor(private http: HttpClient) { } |
|||
|
|||
get() { |
|||
return this.http.get(`${environment.apis.default.url}/app/book`) |
|||
} |
|||
} |
|||
@ -1,12 +1,14 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { ThemeBasicModule } from '@abp/ng.theme.basic'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { TableModule } from 'primeng/table'; |
|||
|
|||
@NgModule({ |
|||
declarations: [], |
|||
imports: [CoreModule, ThemeSharedModule, ThemeBasicModule], |
|||
exports: [CoreModule, ThemeSharedModule, ThemeBasicModule], |
|||
imports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], |
|||
exports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], |
|||
providers: [], |
|||
}) |
|||
export class SharedModule {} |
|||
|
|||
@ -1,4 +1,3 @@ |
|||
export class BooksGet { |
|||
static readonly type = '[Books] Get'; |
|||
constructor(public readonly payload?: any) { } |
|||
} |
|||
|
|||
@ -1,5 +1,33 @@ |
|||
import { ABP } from '@abp/ng.core'; |
|||
|
|||
export namespace Books { |
|||
export interface State { |
|||
data: any; |
|||
data: Response; |
|||
} |
|||
|
|||
export type Response = ABP.PagedResponse<Item>; |
|||
|
|||
export interface Item { |
|||
name: string; |
|||
type: Type; |
|||
publishDate: string; |
|||
price: number; |
|||
lastModificationTime: string; |
|||
lastModifierId: string; |
|||
creationTime: string; |
|||
creatorId: string; |
|||
id: string; |
|||
} |
|||
|
|||
export enum Type { |
|||
Undefined, |
|||
Adventure, |
|||
Biography, |
|||
Dystopia, |
|||
Fantastic, |
|||
Horror, |
|||
Science, |
|||
ScienceFiction, |
|||
Poetry, |
|||
} |
|||
} |
|||
|
|||
@ -1,27 +1,29 @@ |
|||
import { State, Action, StateContext } from "@ngxs/store"; |
|||
import { BooksGet } from "../actions/books.actions"; |
|||
import { Books } from "../models/books"; |
|||
import { BooksService } from "src/app/shared/services/books.service"; |
|||
import { tap } from "rxjs/operators"; |
|||
import { State, Action, StateContext, Selector } from '@ngxs/store'; |
|||
import { BooksGet } from '../actions/books.actions'; |
|||
import { Books } from '../models/books'; |
|||
import { BooksService } from '../../books/services/books.service'; |
|||
import { tap } from 'rxjs/operators'; |
|||
|
|||
@State<Books.State>({ |
|||
name: "BooksState", |
|||
defaults: {} as Books.State |
|||
name: 'BooksState', |
|||
defaults: { data: {} } as Books.State, |
|||
}) |
|||
export class BooksState { |
|||
@Selector() |
|||
static getBooks({ data }: Books.State) { |
|||
return data.items || []; |
|||
} |
|||
|
|||
constructor(private booksService: BooksService) {} |
|||
|
|||
@Action(BooksGet) |
|||
booksAction( |
|||
{ getState, patchState }: StateContext<Books.State>, |
|||
{ payload }: BooksGet |
|||
) { |
|||
getBooks({ patchState }: StateContext<Books.State>) { |
|||
return this.booksService.get().pipe( |
|||
tap(data => { |
|||
patchState({ |
|||
data |
|||
data, |
|||
}); |
|||
}) |
|||
}), |
|||
); |
|||
} |
|||
} |
|||
|
|||
@ -1,12 +1,14 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { ThemeBasicModule } from '@abp/ng.theme.basic'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { TableModule } from 'primeng/table'; |
|||
|
|||
@NgModule({ |
|||
declarations: [], |
|||
imports: [CoreModule, ThemeSharedModule, ThemeBasicModule], |
|||
exports: [CoreModule, ThemeSharedModule, ThemeBasicModule], |
|||
imports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], |
|||
exports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], |
|||
providers: [], |
|||
}) |
|||
export class SharedModule {} |
|||
|
|||
Loading…
Reference in new issue