122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col col-md-6">
|
|
<h5 class="card-title">
|
|
{{ '::Menu:Books' | abpLocalization }}
|
|
</h5>
|
|
</div>
|
|
<div class="text-end col col-md-6">
|
|
|
|
<!-- Add the "new book" button here -->
|
|
<div class="text-lg-end pt-2">
|
|
<button id="create" class="btn btn-primary" type="button" (click)="createBook()">
|
|
<i class="fa fa-plus me-1"></i>
|
|
<span>{{ "::NewBook" | abpLocalization }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<ngx-datatable [rows]="book.items" [count]="book.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 me-1"></i>{{ '::Actions' | abpLocalization }}
|
|
</button>
|
|
<div ngbDropdownMenu>
|
|
<button ngbDropdownItem (click)="editBook(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]="'::Type' | abpLocalization" prop="type">
|
|
<ng-template let-row="row" ngx-datatable-cell-template>
|
|
{{ '::Enum:BookType.' + row.type | abpLocalization }}
|
|
</ng-template>
|
|
</ngx-datatable-column>
|
|
<ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
|
|
<ng-template let-row="row" ngx-datatable-cell-template>
|
|
{{ row.publishDate | date }}
|
|
</ng-template>
|
|
</ngx-datatable-column>
|
|
<ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
|
|
<ng-template let-row="row" ngx-datatable-cell-template>
|
|
{{ row.price | currency }}
|
|
</ng-template>
|
|
</ngx-datatable-column>
|
|
</ngx-datatable>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add the modal here -->
|
|
<abp-modal [(visible)]="isModalOpen">
|
|
<ng-template #abpHeader>
|
|
<h3>{{ '::NewBook' | abpLocalization }}</h3>
|
|
</ng-template>
|
|
|
|
<ng-template #abpBody>
|
|
<form [formGroup]="form" (ngSubmit)="save()">
|
|
<div class="mt-2">
|
|
<label for="book-name">Name</label><span> * </span>
|
|
<input type="text" id="book-name" class="form-control" formControlName="name" autofocus />
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label for="book-price">Price</label><span> * </span>
|
|
<input type="number" id="book-price" class="form-control" formControlName="price" />
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label for="book-type">Type</label><span> * </span>
|
|
<select class="form-control" id="book-type" formControlName="type">
|
|
<option [ngValue]="null">Select a book type</option>
|
|
<option [ngValue]="type.value" *ngFor="let type of bookTypes"> {{ '::Enum:BookType.' + type.value | abpLocalization }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label>Publish date</label><span> * </span>
|
|
<input
|
|
#datepicker="ngbDatepicker"
|
|
class="form-control"
|
|
name="datepicker"
|
|
formControlName="publishDate"
|
|
ngbDatepicker
|
|
(click)="datepicker.toggle()"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</ng-template>
|
|
|
|
|
|
<ng-template #abpFooter>
|
|
<button type="button" class="btn btn-secondary" abpClose>
|
|
{{ '::Close' | abpLocalization }}
|
|
</button>
|
|
|
|
<!--added save 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> |