ABP.IO 新手教學 No.10 開發教學 第 9 部分：作者：用戶界面 {id="ABP-IO-Tutorial-No-10-Part-9-Authors-User-Interface"}

import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { AuthorRoutingModule } from './author-routing.module'; import { AuthorComponent } from './author.component'; import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AuthorComponent], imports: [SharedModule, AuthorRoutingModule, NgbDatepickerModule], }) export class AuthorModule {}

{ path: '/authors', name: '::Menu:Authors', parentName: '::Menu:BookStore', layout: eLayoutType.application, requiredPolicy: 'BookStore.Authors', }

function configureRoutes(routes: RoutesService) { return () => { routes.add([ { path: '/', name: '::Menu:Home', iconClass: 'fas fa-home', order: 1, layout: eLayoutType.application, }, { path: '/book-store', name: '::Menu:BookStore', iconClass: 'fas fa-book', order: 2, layout: eLayoutType.application, }, { path: '/books', name: '::Menu:Books', parentName: '::Menu:BookStore', layout: eLayoutType.application, requiredPolicy: 'BookStore.Books', }, { path: '/authors', name: '::Menu:Authors', parentName: '::Menu:BookStore', layout: eLayoutType.application, requiredPolicy: 'BookStore.Authors', }, ]); }; }

abp generate-proxy

import { Component, OnInit } from '@angular/core'; import { ListService, PagedResultDto } from '@abp/ng.core'; import { AuthorService, AuthorDto } from '@proxy/authors'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; import { ConfirmationService, Confirmation } from '@abp/ng.theme.shared'; @Component({ selector: 'app-author', templateUrl: './author.component.html', styleUrls: ['./author.component.scss'], providers: [ListService, { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }], }) export class AuthorComponent implements OnInit { author = { items: [], totalCount: 0 } as PagedResultDto<AuthorDto>; isModalOpen = false; form: FormGroup; selectedAuthor = {} as AuthorDto; constructor( public readonly list: ListService, private authorService: AuthorService, private fb: FormBuilder, private confirmation: ConfirmationService ) {} ngOnInit(): void { const authorStreamCreator = (query) => this.authorService.getList(query); this.list.hookToQuery(authorStreamCreator).subscribe((response) => { this.author = response; }); } createAuthor() { this.selectedAuthor = {} as AuthorDto; this.buildForm(); this.isModalOpen = true; } editAuthor(id: string) { this.authorService.get(id).subscribe((author) => { this.selectedAuthor = author; this.buildForm(); this.isModalOpen = true; }); } buildForm() { this.form = this.fb.group({ name: [this.selectedAuthor.name || '', Validators.required], birthDate: [ this.selectedAuthor.birthDate ? new Date(this.selectedAuthor.birthDate) : null, Validators.required, ], }); } save() { if (this.form.invalid) { return; } if (this.selectedAuthor.id) { this.authorService .update(this.selectedAuthor.id, this.form.value) .subscribe(() => { this.isModalOpen = false; this.form.reset(); this.list.get(); }); } else { this.authorService.create(this.form.value).subscribe(() => { this.isModalOpen = false; this.form.reset(); this.list.get(); }); } } delete(id: string) { this.confirmation.warn('::AreYouSureToDelete', '::AreYouSure') .subscribe((status) => { if (status === Confirmation.Status.confirm) { this.authorService.delete(id).subscribe(() => this.list.get()); } }); } }

<div class="card"> <div class="card-header"> <div class="row"> <div class="col col-md-6"> <h5 class="card-title"> {{ '::Menu:Authors' | abpLocalization }} </h5> </div> <div class="text-right col col-md-6"> <div class="text-lg-right pt-2"> <button id="create" class="btn btn-primary" type="button" (click)="createAuthor()"> <i class="fa fa-plus mr-1"></i> <span>{{ '::NewAuthor' | abpLocalization }}</span> </button> </div> </div> </div> </div> <div class="card-body"> <ngx-datatable [rows]="author.items" [count]="author.totalCount" [list]="list" default> <ngx-datatable-column [name]="'::Actions' | abpLocalization" [maxWidth]="150" [sortable]="false" > <ng-template let-row="row" ngx-datatable-cell-template> <div ngbDropdown container="body" class="d-inline-block"> <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle > <i class="fa fa-cog mr-1"></i>{{ '::Actions' | abpLocalization }} </button> <div ngbDropdownMenu> <button ngbDropdownItem (click)="editAuthor(row.id)"> {{ '::Edit' | abpLocalization }} </button> <button ngbDropdownItem (click)="delete(row.id)"> {{ '::Delete' | abpLocalization }} </button> </div> </div> </ng-template> </ngx-datatable-column> <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column> <ngx-datatable-column [name]="'::BirthDate' | abpLocalization"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.birthDate | date }} </ng-template> </ngx-datatable-column> </ngx-datatable> </div> </div> <abp-modal [(visible)]="isModalOpen"> <ng-template #abpHeader> <h3>{{ (selectedAuthor.id ? '::Edit' : '::NewAuthor') | abpLocalization }}</h3> </ng-template> <ng-template #abpBody> <form [formGroup]="form" (ngSubmit)="save()"> <div class="form-group"> <label for="author-name">Name</label><span> * </span> <input type="text" id="author-name" class="form-control" formControlName="name" autofocus /> </div> <div class="form-group"> <label>Birth date</label><span> * </span> <input #datepicker="ngbDatepicker" class="form-control" name="datepicker" formControlName="birthDate" ngbDatepicker (click)="datepicker.toggle()" /> </div> </form> </ng-template> <ng-template #abpFooter> <button type="button" class="btn btn-secondary" abpClose> {{ '::Close' | abpLocalization }} </button> <button class="btn btn-primary" (click)="save()" [disabled]="form.invalid"> <i class="fa fa-check mr-1"></i> {{ '::Save' | abpLocalization }} </button> </ng-template> </abp-modal>

"Menu:Authors": "Authors", "Authors": "Authors", "AuthorDeletionConfirmationMessage": "Are you sure to delete the author '{0}'?", "BirthDate": "Birth date", "NewAuthor": "New author"