tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor components to use external HTML templates 

Moved inline templates to separate HTML files for permission-checkbox-list, provider-key-search, resource-permission-form, and resource-permission-list components. Updated component decorators to reference the new template files, improving maintainability and separation of concerns.
pull/24459/head
Fahri Gedik 1 month ago
parent
3ad378f429
commit
ed56c4f8da
8 changed files with 100 additions and 150 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html
  2. 36
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts
  3. 15
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html
  4. 31
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts
  5. 28
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html
  6. 43
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts
  7. 28
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html
  8. 44
      npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts

25
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.html
View File

@ -0,0 +1,25 @@
<div class="mb-3">
@if (showTitle()) {
<h5>{{ title() | abpLocalization }}</h5>
}
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" [id]="'grantAll-' + idPrefix()"
[checked]="state.allPermissionsSelected()"
(change)="state.toggleAllPermissions(!state.allPermissionsSelected())" />
<label class="form-check-label" [for]="'grantAll-' + idPrefix()">
{{ 'AbpPermissionManagement::GrantAllResourcePermissions' | abpLocalization }}
</label>
</div>
<div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
@for (perm of permissions(); track perm.name) {
<div class="form-check">
<input class="form-check-input" type="checkbox" [id]="'perm-' + idPrefix() + '-' + perm.name"
[checked]="state.isPermissionSelected(perm.name || '')"
(change)="state.togglePermission(perm.name || '')" />
<label class="form-check-label" [for]="'perm-' + idPrefix() + '-' + perm.name">
{{ perm.displayName }}
</label>
</div>
}
</div>
</div>

36
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/permission-checkbox-list/permission-checkbox-list.component.ts
View File

@ -9,41 +9,7 @@ interface PermissionItem {
@Component({
selector: 'abp-permission-checkbox-list',
template: `
<div class="mb-3">
@if (showTitle()) {
<h5>{{ title() | abpLocalization }}</h5>
}
<div class="form-check form-switch mb-2">
<input
class="form-check-input"
type="checkbox"
[id]="'grantAll-' + idPrefix()"
[checked]="state.allPermissionsSelected()"
(change)="state.toggleAllPermissions(!state.allPermissionsSelected())"
/>
<label class="form-check-label" [for]="'grantAll-' + idPrefix()">
{{ 'AbpPermissionManagement::GrantAllResourcePermissions' | abpLocalization }}
</label>
</div>
<div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
@for (perm of permissions(); track perm.name) {
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
[id]="'perm-' + idPrefix() + '-' + perm.name"
[checked]="state.isPermissionSelected(perm.name || '')"
(change)="state.togglePermission(perm.name || '')"
/>
<label class="form-check-label" [for]="'perm-' + idPrefix() + '-' + perm.name">
{{ perm.displayName }}
</label>
</div>
}
</div>
</div>
`,
templateUrl: './permission-checkbox-list.component.html',
imports: [LocalizationPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
})

15
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.html
View File

@ -0,0 +1,15 @@
<div class="position-relative">
<label class="form-label">{{ 'AbpPermissionManagement::SearchProviderKey' | abpLocalization }}</label>
<input type="text" class="form-control"
[placeholder]="'AbpPermissionManagement::SearchProviderKey' | abpLocalization" [ngModel]="state.searchFilter()"
(ngModelChange)="onSearchInput($event)" (focus)="onSearchFocus()" (blur)="onSearchBlur($event)" />
@if (state.searchResults().length > 0 && state.showDropdown()) {
<div class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
@for (result of state.searchResults(); track result.providerKey) {
<button type="button" class="list-group-item list-group-item-action" (mousedown)="selectProviderKey(result)">
{{ result.providerDisplayName || result.providerKey }}
</button>
}
</div>
}
</div>

31
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/provider-key-search/provider-key-search.component.ts
View File

@ -7,36 +7,7 @@ import { ResourcePermissionStateService } from '../../../services/resource-permi
@Component({
selector: 'abp-provider-key-search',
template: `
<div class="position-relative">
<label class="form-label">{{ 'AbpPermissionManagement::SearchProviderKey' | abpLocalization }}</label>
<input
type="text"
class="form-control"
[placeholder]="'AbpPermissionManagement::SearchProviderKey' | abpLocalization"
[ngModel]="state.searchFilter()"
(ngModelChange)="onSearchInput($event)"
(focus)="onSearchFocus()"
(blur)="onSearchBlur($event)"
/>
@if (state.searchResults().length > 0 && state.showDropdown()) {
<div
class="list-group position-absolute w-100 shadow"
style="z-index: 1000; max-height: 200px; overflow-y: auto;"
>
@for (result of state.searchResults(); track result.providerKey) {
<button
type="button"
class="list-group-item list-group-item-action"
(mousedown)="selectProviderKey(result)"
>
{{ result.providerDisplayName || result.providerKey }}
</button>
}
</div>
}
</div>
`,
templateUrl: './provider-key-search.component.html',
imports: [FormsModule, LocalizationPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
})

28
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.html
View File

@ -0,0 +1,28 @@
@if (mode() === 'add') {
<div class="mb-3">
<label class="form-label fw-bold">
{{ 'AbpPermissionManagement::SelectProvider' | abpLocalization }}
</label>
<div class="mb-2">
@for (provider of state.providers(); track provider.name; let i = $index) {
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" [id]="'provider-' + i" [value]="provider.name"
[checked]="state.selectedProviderName() === provider.name"
(change)="state.onProviderChange(provider.name || '')" />
<label class="form-check-label" [for]="'provider-' + i">
{{ provider.displayName }}
</label>
</div>
}
</div>
<abp-provider-key-search [resourceName]="resourceName()" />
</div>
<abp-permission-checkbox-list [permissions]="state.permissionDefinitions()" idPrefix="add" />
} @else {
<div class="mb-3" id="permissionList">
<h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}</h4>
<abp-permission-checkbox-list [permissions]="state.permissionsWithProvider()" idPrefix="edit" [showTitle]="false" />
</div>
}

43
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-form/resource-permission-form.component.ts
View File

@ -9,48 +9,7 @@ export type FormMode = 'add' | 'edit';
@Component({
selector: 'abp-resource-permission-form',
template: `
@if (mode() === 'add') {
<div class="mb-3">
<label class="form-label fw-bold">
{{ 'AbpPermissionManagement::SelectProvider' | abpLocalization }}
</label>
<div class="mb-2">
@for (provider of state.providers(); track provider.name; let i = $index) {
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
[id]="'provider-' + i"
[value]="provider.name"
[checked]="state.selectedProviderName() === provider.name"
(change)="state.onProviderChange(provider.name || '')"
/>
<label class="form-check-label" [for]="'provider-' + i">
{{ provider.displayName }}
</label>
</div>
}
</div>
<abp-provider-key-search [resourceName]="resourceName()" />
</div>
<abp-permission-checkbox-list
[permissions]="state.permissionDefinitions()"
idPrefix="add"
/>
} @else {
<div class="mb-3" id="permissionList">
<h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}</h4>
<abp-permission-checkbox-list
[permissions]="state.permissionsWithProvider()"
idPrefix="edit"
[showTitle]="false"
/>
</div>
}
`,
templateUrl: './resource-permission-form.component.html',
imports: [
FormsModule,
LocalizationPipe,

28
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.html
View File

@ -0,0 +1,28 @@
<div class="d-grid gap-2 mb-3 d-md-flex justify-content-md-end">
<button class="btn btn-sm btn-primary" type="button" (click)="addClicked.emit()">
<i class="fa fa-plus me-1"></i>
{{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }}
</button>
</div>
<ng-template #actionsTemplate let-row>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-primary" type="button" (click)="editClicked.emit(row)"
[title]="'AbpUi::Edit' | abpLocalization">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-outline-danger" type="button" (click)="deleteClicked.emit(row)"
[title]="'AbpUi::Delete' | abpLocalization">
<i class="fa fa-trash"></i>
</button>
</div>
</ng-template>
@if (state.resourcePermissions().length > 0) {
<abp-extensible-table [data]="state.resourcePermissions()" [recordsTotal]="state.totalCount()" [list]="list"
[actionsTemplate]="actionsTemplate" actionsText="AbpUi::Actions"></abp-extensible-table>
} @else {
<div class="alert alert-info">
{{ 'AbpPermissionManagement::NoPermissionsAssigned' | abpLocalization }}
</div>
}

44
npm/ng-packs/packages/permission-management/src/lib/components/resource-permission-management/resource-permission-list/resource-permission-list.component.ts
View File

@ -8,49 +8,7 @@ import { configureResourcePermissionExtensions } from '../../../services/extensi
@Component({
selector: 'abp-resource-permission-list',
template: `
<div class="d-grid gap-2 mb-3 d-md-flex justify-content-md-end">
<button class="btn btn-sm btn-primary" type="button" (click)="addClicked.emit()">
<i class="fa fa-plus me-1"></i>
{{ 'AbpPermissionManagement::AddResourcePermission' | abpLocalization }}
</button>
</div>
<ng-template #actionsTemplate let-row>
<div class="btn-group btn-group-sm" role="group">
<button
class="btn btn-outline-primary"
type="button"
(click)="editClicked.emit(row)"
[title]="'AbpUi::Edit' | abpLocalization"
>
<i class="fa fa-edit"></i>
</button>
<button
class="btn btn-outline-danger"
type="button"
(click)="deleteClicked.emit(row)"
[title]="'AbpUi::Delete' | abpLocalization"
>
<i class="fa fa-trash"></i>
</button>
</div>
</ng-template>
@if (state.resourcePermissions().length > 0) {
<abp-extensible-table
[data]="state.resourcePermissions()"
[recordsTotal]="state.totalCount()"
[list]="list"
[actionsTemplate]="actionsTemplate"
actionsText="AbpUi::Actions"
></abp-extensible-table>
} @else {
<div class="alert alert-info">
{{ 'AbpPermissionManagement::NoPermissionsAssigned' | abpLocalization }}
</div>
}
`,
templateUrl: './resource-permission-list.component.html',
providers: [
ListService,
{

Write Preview
Loading…
Cancel
Save