From 351ad5e093036702edbb15169968935496afea0e Mon Sep 17 00:00:00 2001 From: Masum ULU Date: Sat, 15 Apr 2023 18:54:09 +0300 Subject: [PATCH] Convert create/edit modals to page --- .../src/app/book/book-routing.module.ts | 4 + .../angular/src/app/book/book.component.html | 74 +++---------------- .../angular/src/app/book/book.component.ts | 65 +--------------- .../angular/src/app/book/book.module.ts | 4 +- .../create-book/create-book.component.html | 58 +++++++++++++++ .../book/create-book/create-book.component.ts | 45 +++++++++++ .../book/edit-book/edit-book.component.html | 58 +++++++++++++++ .../app/book/edit-book/edit-book.component.ts | 54 ++++++++++++++ 8 files changed, 237 insertions(+), 125 deletions(-) create mode 100644 BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.html create mode 100644 BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.ts create mode 100644 BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.html create mode 100644 BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.ts diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/book-routing.module.ts b/BookStore-Angular-MongoDb/angular/src/app/book/book-routing.module.ts index 75b4899c52..3ece901852 100644 --- a/BookStore-Angular-MongoDb/angular/src/app/book/book-routing.module.ts +++ b/BookStore-Angular-MongoDb/angular/src/app/book/book-routing.module.ts @@ -2,9 +2,13 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AuthGuard, PermissionGuard } from '@abp/ng.core'; import { BookComponent } from './book.component'; +import { CreateBookComponent } from './create-book/create-book.component'; +import { EditBookComponent } from './edit-book/edit-book.component'; const routes: Routes = [ { path: '', component: BookComponent, canActivate: [AuthGuard, PermissionGuard] }, + { path: 'create', component: CreateBookComponent }, + { path: 'edit/:id', component: EditBookComponent }, ]; @NgModule({ diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/book.component.html b/BookStore-Angular-MongoDb/angular/src/app/book/book.component.html index 2222e72fbf..fd2777b1e8 100644 --- a/BookStore-Angular-MongoDb/angular/src/app/book/book.component.html +++ b/BookStore-Angular-MongoDb/angular/src/app/book/book.component.html @@ -8,8 +8,13 @@
- @@ -27,7 +32,11 @@
{{ '::Actions' | abpLocalization }}
-
- - - -

{{ (selectedBook.id ? '::Edit' : '::NewBook' ) | abpLocalization }}

- - - -
-
- * - -
- -
- * - -
- -
- * - -
- -
- * - -
- -
- * - -
-
- - - - - - - - - - \ No newline at end of file diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/book.component.ts b/BookStore-Angular-MongoDb/angular/src/app/book/book.component.ts index f0df6c9857..b913db611f 100644 --- a/BookStore-Angular-MongoDb/angular/src/app/book/book.component.ts +++ b/BookStore-Angular-MongoDb/angular/src/app/book/book.component.ts @@ -1,11 +1,8 @@ import { ListService, PagedResultDto } from '@abp/ng.core'; import { Component, OnInit } from '@angular/core'; -import { BookService, BookDto, bookTypeOptions, AuthorLookupDto } from '@proxy/books'; -import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { BookService, BookDto } from '@proxy/books'; import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; import { ConfirmationService, Confirmation } from '@abp/ng.theme.shared'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; @Component({ selector: 'app-book', @@ -16,24 +13,11 @@ import { map } from 'rxjs/operators'; export class BookComponent implements OnInit { book = { items: [], totalCount: 0 } as PagedResultDto; - form: FormGroup; - - selectedBook = {} as BookDto; - - authors$: Observable; - - bookTypes = bookTypeOptions; - - isModalOpen = false; - constructor( public readonly list: ListService, private bookService: BookService, - private fb: FormBuilder, private confirmation: ConfirmationService - ) { - this.authors$ = bookService.getAuthorLookup().pipe(map((r) => r.items)); - } + ) {} ngOnInit() { const bookStreamCreator = (query) => this.bookService.getList(query); @@ -43,51 +27,8 @@ export class BookComponent implements OnInit { }); } - createBook() { - this.selectedBook = {} as BookDto; - this.buildForm(); - this.isModalOpen = true; - } - - editBook(id: string) { - this.bookService.get(id).subscribe((book) => { - this.selectedBook = book; - this.buildForm(); - this.isModalOpen = true; - }); - } - - buildForm() { - this.form = this.fb.group({ - authorId: [this.selectedBook.authorId || null, Validators.required], - name: [this.selectedBook.name || null, Validators.required], - type: [this.selectedBook.type || null, Validators.required], - publishDate: [ - this.selectedBook.publishDate ? new Date(this.selectedBook.publishDate) : null, - Validators.required, - ], - price: [this.selectedBook.price || null, Validators.required], - }); - } - - save() { - if (this.form.invalid) { - return; - } - - const request = this.selectedBook.id - ? this.bookService.update(this.selectedBook.id, this.form.value) - : this.bookService.create(this.form.value); - - request.subscribe(() => { - this.isModalOpen = false; - this.form.reset(); - this.list.get(); - }); - } - delete(id: string) { - this.confirmation.warn('::AreYouSureToDelete', 'AbpAccount::AreYouSure').subscribe((status) => { + this.confirmation.warn('::AreYouSureToDelete', 'AbpAccount::AreYouSure').subscribe(status => { if (status === Confirmation.Status.confirm) { this.bookService.delete(id).subscribe(() => this.list.get()); } diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/book.module.ts b/BookStore-Angular-MongoDb/angular/src/app/book/book.module.ts index 64d45c07d6..95910bad04 100644 --- a/BookStore-Angular-MongoDb/angular/src/app/book/book.module.ts +++ b/BookStore-Angular-MongoDb/angular/src/app/book/book.module.ts @@ -3,9 +3,11 @@ import { SharedModule } from '../shared/shared.module'; import { BookRoutingModule } from './book-routing.module'; import { BookComponent } from './book.component'; import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; +import { CreateBookComponent } from './create-book/create-book.component'; +import { EditBookComponent } from './edit-book/edit-book.component'; @NgModule({ - declarations: [BookComponent], + declarations: [BookComponent, CreateBookComponent, EditBookComponent], imports: [ BookRoutingModule, SharedModule, diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.html b/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.html new file mode 100644 index 0000000000..990938698e --- /dev/null +++ b/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.html @@ -0,0 +1,58 @@ +
+
+
+
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ + + +
+
+
+
diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.ts b/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.ts new file mode 100644 index 0000000000..29ad9c092f --- /dev/null +++ b/BookStore-Angular-MongoDb/angular/src/app/book/create-book/create-book.component.ts @@ -0,0 +1,45 @@ +import { Component, inject } from '@angular/core'; +import { Router } from '@angular/router'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { map } from 'rxjs'; +import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; +import { BookService, bookTypeOptions } from '@proxy/books'; + +const { required } = Validators; + +@Component({ + selector: 'app-create-book', + templateUrl: './create-book.component.html', + providers: [{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }], +}) +export class CreateBookComponent { + private readonly router = inject(Router); + private readonly fb = inject(FormBuilder); + private readonly bookService = inject(BookService); + + form: FormGroup; + authors$ = this.bookService.getAuthorLookup().pipe(map(({ items }) => items)); + bookTypes = bookTypeOptions; + + private buildForm() { + this.form = this.fb.group({ + authorId: [null, required], + name: [null, required], + type: [null, required], + publishDate: [undefined, required], + price: [null, required], + }); + } + + constructor() { + this.buildForm(); + } + + save() { + if (this.form.invalid) return; + + this.bookService.create(this.form.value).subscribe(() => { + this.router.navigate(['/books']); + }); + } +} diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.html b/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.html new file mode 100644 index 0000000000..1595160c61 --- /dev/null +++ b/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.html @@ -0,0 +1,58 @@ +
+
+
+
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ * + +
+ +
+ + + +
+
+
+
diff --git a/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.ts b/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.ts new file mode 100644 index 0000000000..c7d8827884 --- /dev/null +++ b/BookStore-Angular-MongoDb/angular/src/app/book/edit-book/edit-book.component.ts @@ -0,0 +1,54 @@ +import { Component, inject } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { filter, map, switchMap, tap } from 'rxjs'; +import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; +import { BookDto, BookService, bookTypeOptions } from '@proxy/books'; + +const { required } = Validators; + +@Component({ + selector: 'app-edit-book', + templateUrl: './edit-book.component.html', + providers: [{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }], +}) +export class EditBookComponent { + private readonly router = inject(Router); + private readonly activatedRoute = inject(ActivatedRoute); + private readonly fb = inject(FormBuilder); + private readonly bookService = inject(BookService); + + id: string; + form: FormGroup; + authors$ = this.bookService.getAuthorLookup().pipe(map(({ items }) => items)); + bookTypes = bookTypeOptions; + + private buildForm(book: BookDto): void { + this.form = this.fb.group({ + authorId: [book.authorId, required], + name: [book.name, required], + type: [book.type, required], + publishDate: [new Date(book.publishDate), required], + price: [book.price, required], + }); + } + + constructor() { + this.activatedRoute.params + .pipe( + filter(params => params.id), + tap(({ id }) => (this.id = id)), + switchMap(({ id }) => this.bookService.get(id)), + tap(book => this.buildForm(book)) + ) + .subscribe(); + } + + save(): void { + if (this.form.invalid) return; + + this.bookService.update(this.id, this.form.value).subscribe(() => { + this.router.navigate(['/books']); + }); + } +}