{{ '::Books' | abpLocalization }}
+ + +{{ '::WelcomeMessage' | abpLocalization: userName }}
+``` + +## Authorization + +### Permission Directive +```html + +``` + +### Permission Guard +```typescript +const routes: Routes = [ + { + path: '', + component: BookListComponent, + canActivate: [PermissionGuard], + data: { + requiredPolicy: 'BookStore.Books' + } + } +]; +``` + +### Programmatic Check +```typescript +constructor(private permissionService: PermissionService) {} + +canCreate(): boolean { + return this.permissionService.getGrantedPolicy('BookStore.Books.Create'); +} +``` + +## Forms with Validation +```typescript +@Component({...}) +export class BookFormComponent { + form: FormGroup; + + constructor(private fb: FormBuilder) { + this.buildForm(); + } + + buildForm(): void { + this.form = this.fb.group({ + name: ['', [Validators.required, Validators.maxLength(128)]], + price: [0, [Validators.required, Validators.min(0)]] + }); + } + + save(): void { + if (this.form.invalid) return; + + this.bookService.create(this.form.value).subscribe(() => { + // Handle success + }); + } +} +``` + +```html + +``` + +## Configuration API +```typescript +constructor(private configService: ConfigStateService) {} + +getCurrentUser(): CurrentUserDto { + return this.configService.getOne('currentUser'); +} + +getSettings(): void { + const setting = this.configService.getSetting('MyApp.MaxItemCount'); +} +``` + +## Modal Service +```typescript +constructor(private modalService: ModalService) {} + +openCreateModal(): void { + const modalRef = this.modalService.open(BookFormComponent, { + size: 'lg' + }); + + modalRef.result.then(result => { + if (result) { + this.list.get(); + } + }); +} +``` + +## Toast Notifications +```typescript +constructor(private toaster: ToasterService) {} + +showSuccess(): void { + this.toaster.success('::BookCreatedSuccessfully', '::Success'); +} + +showError(error: string): void { + this.toaster.error(error, '::Error'); +} +``` + +## Lazy Loading Modules +```typescript +// app-routing.module.ts +const routes: Routes = [ + { + path: 'books', + loadChildren: () => import('./book/book.module').then(m => m.BookModule) + } +]; +``` + +## Theme & Styling +- Use Bootstrap classes +- ABP provides theme variables via CSS custom properties +- Component-specific styles in `.component.scss` diff --git a/ai-rules/ui/blazor.mdc b/ai-rules/ui/blazor.mdc new file mode 100644 index 0000000000..68b8051109 --- /dev/null +++ b/ai-rules/ui/blazor.mdc @@ -0,0 +1,207 @@ +--- +description: "ABP Blazor UI patterns and components" +globs: "**/*.razor,**/Blazor/**/*.cs,**/*.Blazor*/**/*.cs" +alwaysApply: false +--- + +# ABP Blazor UI + +> **Docs**: https://abp.io/docs/latest/framework/ui/blazor/overall + +## Component Base Classes + +### Basic Component +```razor +@inherits AbpComponentBase + +@L["Books"]
+``` + +### CRUD Page +```razor +@page "/books" +@inherits AbpCrudPageBase@L["Books"]
+@L["PageTitle"]
+ +@* With parameters *@ +@L["WelcomeMessage", CurrentUser.UserName]
+``` + +## Authorization +```razor +@* Check permission before rendering *@ +@if (await AuthorizationService.IsGrantedAsync("MyPermission")) +{ + +} + +@* Using policy-based authorization *@ +You have access!
+@L["Books"]
+@L["Books"]
+ +@* With parameters *@ +@L["WelcomeMessage", Model.UserName]
+``` + +## JavaScript API +```javascript +// Localization +var text = abp.localization.getResource('BookStore')('Books'); + +// Authorization +if (abp.auth.isGranted('BookStore.Books.Create')) { + // Show create button +} + +// Settings +var maxCount = abp.setting.get('BookStore.MaxItemCount'); + +// Ajax with automatic error handling +abp.ajax({ + url: '/api/app/book', + type: 'POST', + data: JSON.stringify(bookData) +}).then(function(result) { + // Success +}); + +// Notifications +abp.notify.success('Book created successfully!'); +abp.notify.error('An error occurred!'); + +// Confirmation +abp.message.confirm('Are you sure?').then(function(confirmed) { + if (confirmed) { + // User confirmed + } +}); +``` + +## DataTables Integration +```javascript +var dataTable = $('#BooksTable').DataTable( + abp.libs.datatables.normalizeConfiguration({ + serverSide: true, + paging: true, + ajax: abp.libs.datatables.createAjax(bookService.getList), + columnDefs: [ + { + title: l('Name'), + data: 'name' + }, + { + title: l('Price'), + data: 'price', + render: function(data) { + return data.toFixed(2); + } + }, + { + title: l('Actions'), + rowAction: { + items: [ + { + text: l('Edit'), + visible: abp.auth.isGranted('BookStore.Books.Edit'), + action: function(data) { + editModal.open({ id: data.record.id }); + } + }, + { + text: l('Delete'), + visible: abp.auth.isGranted('BookStore.Books.Delete'), + confirmMessage: function(data) { + return l('BookDeletionConfirmationMessage', data.record.name); + }, + action: function(data) { + bookService.delete(data.record.id).then(function() { + abp.notify.success(l('SuccessfullyDeleted')); + dataTable.ajax.reload(); + }); + } + } + ] + } + } + ] + }) +); +``` + +## Modal Pages +**CreateModal.cshtml:** +```html +@page +@model CreateModalModel + +
+
+## Quick Start
+
+### Step 1. Import the Component
+
+Import `ExtensibleTableRowDetailComponent` in your component:
+
+```typescript
+import {
+ ExtensibleTableComponent,
+ ExtensibleTableRowDetailComponent
+} from '@abp/ng.components/extensible';
+
+@Component({
+ // ...
+ imports: [
+ ExtensibleTableComponent,
+ ExtensibleTableRowDetailComponent,
+ ],
+})
+export class MyComponent { }
+```
+
+### Step 2. Add Row Detail Template
+
+Place `
+
+ {%{{{ row.name }}}%}
+ID: {%{{{ row.id }}}%}
+Status: {%{{{ row.isActive ? 'Active' : 'Inactive' }}}%}
+
+ Details for: {%{{{ row.name }}}%}
+
+ {%{{{ row | json }}}%}
+ Fixed 200px height content
+
+
+ This row is {%{{{ expanded ? 'expanded' : 'collapsed' }}}%}
+
+
+
+
+
+
+ {%{{{ 'MyModule::Name' | abpLocalization }}}%}
+{%{{{ row.name }}}%}
+
+
+ {%{{{ 'MyModule::Status' | abpLocalization }}}%}
++ @if (row.isActive) { + {%{{{ 'AbpUi::Yes' | abpLocalization }}}%} + } @else { + {%{{{ 'AbpUi::No' | abpLocalization }}}%} + } +
+{%{{{ row.name }}}%}
+