diff --git a/docs/en/Virtual-File-System.md b/docs/en/Virtual-File-System.md index d13bbf491b..f2f85049bd 100644 --- a/docs/en/Virtual-File-System.md +++ b/docs/en/Virtual-File-System.md @@ -38,7 +38,8 @@ If you want to add multiple files, this can be tedious. Alternatively, you can d ````C# - + + ```` diff --git a/docs/zh-Hans/Virtual-File-System.md b/docs/zh-Hans/Virtual-File-System.md index 49c97c8162..97cf22c73e 100644 --- a/docs/zh-Hans/Virtual-File-System.md +++ b/docs/zh-Hans/Virtual-File-System.md @@ -39,7 +39,8 @@ namespace MyCompany.MyProject ````C# - + + ```` diff --git a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs index dceaeaf74f..6db09d4d17 100644 --- a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs +++ b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/Modeling/AbpEntityTypeBuilderExtensions.cs @@ -59,7 +59,7 @@ namespace Volo.Abp.EntityFrameworkCore.Modeling b.Property>(nameof(IHasExtraProperties.ExtraProperties)) .HasColumnName(nameof(IHasExtraProperties.ExtraProperties)) .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); } } diff --git a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs index 4efd8bfa63..c6959b0801 100644 --- a/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs +++ b/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/ValueComparers/AbpDictionaryValueComparer.cs @@ -5,7 +5,7 @@ using Microsoft.EntityFrameworkCore.ChangeTracking; namespace Volo.Abp.EntityFrameworkCore.ValueComparers { - public class AbpDictionaryValueComparer : ValueComparer> + public class AbpDictionaryValueComparer : ValueComparer> { public AbpDictionaryValueComparer() : base( diff --git a/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json b/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json index e7a038fd57..886594ac84 100644 --- a/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json +++ b/modules/identity/src/Volo.Abp.Identity.Domain.Shared/Volo/Abp/Identity/Localization/en.json @@ -7,7 +7,7 @@ "UserName": "User name", "EmailAddress": "Email address", "PhoneNumber": "Phone number", - "UserInformations": "User informations", + "UserInformations": "User information", "DisplayName:IsDefault": "Default", "DisplayName:IsStatic": "Static", "DisplayName:IsPublic": "Public", @@ -99,4 +99,4 @@ "Description:Abp.Identity.User.IsUserNameUpdateEnabled": "Whether the username can be updated by the user.", "Description:Abp.Identity.User.IsEmailUpdateEnabled": "Whether the email can be updated by the user." } -} \ No newline at end of file +} diff --git a/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs b/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs index 8776d6ed83..9f65e4e419 100644 --- a/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs +++ b/modules/identityserver/src/Volo.Abp.IdentityServer.EntityFrameworkCore/Volo/Abp/IdentityServer/EntityFrameworkCore/IdentityServerDbContextModelCreatingExtensions.cs @@ -204,8 +204,8 @@ namespace Volo.Abp.IdentityServer.EntityFrameworkCore identityResource.Property(x => x.DisplayName).HasMaxLength(IdentityResourceConsts.DisplayNameMaxLength); identityResource.Property(x => x.Description).HasMaxLength(IdentityResourceConsts.DescriptionMaxLength); identityResource.Property(x => x.Properties) - .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .HasConversion(new AbpJsonValueConverter>()) + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); identityResource.HasMany(x => x.UserClaims).WithOne().HasForeignKey(x => x.IdentityResourceId).IsRequired(); }); @@ -229,8 +229,8 @@ namespace Volo.Abp.IdentityServer.EntityFrameworkCore apiResource.Property(x => x.DisplayName).HasMaxLength(ApiResourceConsts.DisplayNameMaxLength); apiResource.Property(x => x.Description).HasMaxLength(ApiResourceConsts.DescriptionMaxLength); apiResource.Property(x => x.Properties) - .HasConversion(new AbpJsonValueConverter>()) - .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); + .HasConversion(new AbpJsonValueConverter>()) + .Metadata.SetValueComparer(new AbpDictionaryValueComparer()); apiResource.HasMany(x => x.Secrets).WithOne().HasForeignKey(x => x.ApiResourceId).IsRequired(); apiResource.HasMany(x => x.Scopes).WithOne().HasForeignKey(x => x.ApiResourceId).IsRequired(); diff --git a/npm/ng-packs/apps/dev-app/tsconfig.app.json b/npm/ng-packs/apps/dev-app/tsconfig.app.json index cc22d70d1c..464faaec10 100644 --- a/npm/ng-packs/apps/dev-app/tsconfig.app.json +++ b/npm/ng-packs/apps/dev-app/tsconfig.app.json @@ -6,8 +6,8 @@ "paths": { "@abp/ng.core": ["packages/core/src/public-api.ts"], "@abp/ng.core/*": ["packages/core/src/lib/*"], - // "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], - // "@abp/ng.theme.shared/*": ["packages/theme-shared/src/lib/*"], + "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"], + "@abp/ng.theme.shared/*": ["packages/theme-shared/src/lib/*"], "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"], "@abp/ng.theme.basic/*": ["packages/theme-basic/src/lib/*"], "@abp/ng.account": ["packages/account/src/public-api.ts"], diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index c831267d7d..fa9799048e 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -74,7 +74,6 @@ "just-compare": "^1.3.0", "lerna": "^3.19.0", "ng-packagr": "^5.7.1", - "ngx-perfect-scrollbar": "^8.0.0", "ngxs-reset-plugin": "^1.2.0", "ngxs-schematic": "^1.1.9", "prettier": "^1.18.2", diff --git a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts index 4614011b92..7176803b74 100644 --- a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts +++ b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts @@ -1,27 +1,48 @@ import { ControlValueAccessor } from '@angular/forms'; -import { ChangeDetectorRef, Component, Injector, Input, Type } from '@angular/core'; +import { ChangeDetectorRef, Component, Injector, Input } from '@angular/core'; -@Component({ selector: 'abp-abstract-ng-model', template: '' }) -export class AbstractNgModelComponent implements ControlValueAccessor { - @Input() disabled: boolean; +// Not an abstract class on purpose. Do not change! +// tslint:disable-next-line: use-component-selector +@Component({ template: '' }) +export class AbstractNgModelComponent implements ControlValueAccessor { + protected _value: T; + protected cdRef: ChangeDetectorRef; + onChange: (value: T) => {}; + onTouched: () => {}; + + @Input() + disabled: boolean; + + @Input() + readonly: boolean; + + @Input() + valueFn: (value: U, previousValue?: T) => T = value => (value as any) as T; + + @Input() + valueLimitFn: (value: T, previousValue?: T) => any = value => false; + + @Input() + set value(value: T) { + value = this.valueFn((value as any) as U, this._value); + + if (this.valueLimitFn(value, this._value) !== false || this.readonly) return; - @Input() set value(value: T) { this._value = value; this.notifyValueChange(); } get value(): T { - return this._value; + return this._value || this.defaultValue; } - onChange: (value: T) => {}; - onTouched: () => {}; - - protected _value: T; - protected cdRef: ChangeDetectorRef; + get defaultValue(): T { + return this._value; + } constructor(public injector: Injector) { - this.cdRef = injector.get(ChangeDetectorRef as Type); + // tslint:disable-next-line: deprecation + this.cdRef = injector.get(ChangeDetectorRef); } notifyValueChange(): void { @@ -31,8 +52,8 @@ export class AbstractNgModelComponent implements ControlValueAccessor { } writeValue(value: T): void { - this._value = value; - setTimeout(() => this.cdRef.detectChanges(), 0); + this._value = this.valueLimitFn(value, this._value) || value; + setTimeout(() => this.cdRef.markForCheck(), 0); } registerOnChange(fn: any): void { diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html index 6c4f946c5a..57858686fa 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html @@ -20,37 +20,28 @@
- - + - - - - + {{ 'AbpIdentity::Actions' | abpLocalization }} - + {{ 'AbpIdentity::RoleName' | abpLocalization }} - +
@@ -109,7 +100,7 @@ - +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts index 0bd4826699..3ac929bc5d 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts @@ -36,7 +36,7 @@ export class RolesComponent implements OnInit { providerKey: string; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; loading = false; @@ -123,9 +123,8 @@ export class RolesComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index e89d72ae72..82995a423f 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -28,37 +28,28 @@ (input.debounce)="onSearch($event.target.value)" /> - - + - - - - + {{ 'AbpIdentity::Actions' | abpLocalization }} - + {{ 'AbpIdentity::UserName' | abpLocalization }} - + {{ 'AbpIdentity::EmailAddress' | abpLocalization }} - + {{ 'AbpIdentity::PhoneNumber' | abpLocalization }} - +
@@ -129,7 +120,7 @@ {{ data.phoneNumber }} - +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 1917113dc7..d33430d98c 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -51,7 +51,7 @@ export class UsersComponent implements OnInit { providerKey: string; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; isModalVisible: boolean; @@ -111,7 +111,7 @@ export class UsersComponent implements OnInit { } } - onSearch(value) { + onSearch(value: string) { this.pageQuery.filter = value; this.get(); } @@ -226,9 +226,8 @@ export class UsersComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 6106ed7e1b..d142489474 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -28,37 +28,29 @@ (input.debounce)="onSearch($event.target.value)" /> - - + - - - - + {{ 'AbpTenantManagement::Actions' | abpLocalization }} - + {{ 'AbpTenantManagement::TenantName' | abpLocalization }} - +
@@ -117,7 +109,7 @@ {{ data.name }} - +
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts index 0d77596270..fcc2afd3da 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts @@ -50,7 +50,7 @@ export class TenantsComponent implements OnInit { _useSharedDatabase: boolean; - pageQuery: ABP.PageQueryParams = {}; + pageQuery: ABP.PageQueryParams = { maxResultCount: 10 }; loading = false; @@ -109,7 +109,7 @@ export class TenantsComponent implements OnInit { this.get(); } - onSearch(value) { + onSearch(value: string) { this.pageQuery.filter = value; this.get(); } @@ -246,9 +246,8 @@ export class TenantsComponent implements OnInit { }); } - onPageChange(data) { - this.pageQuery.skipCount = data.first; - this.pageQuery.maxResultCount = data.rows; + onPageChange(page: number) { + this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount; this.get(); } diff --git a/npm/ng-packs/packages/theme-shared/ng-package.json b/npm/ng-packs/packages/theme-shared/ng-package.json index a879347afd..73ed96741c 100644 --- a/npm/ng-packs/packages/theme-shared/ng-package.json +++ b/npm/ng-packs/packages/theme-shared/ng-package.json @@ -12,7 +12,6 @@ "@ngx-validate/core", "bootstrap", "font-awesome", - "ngx-perfect-scrollbar", "primeicons", "primeng", "chart.js" diff --git a/npm/ng-packs/packages/theme-shared/package.json b/npm/ng-packs/packages/theme-shared/package.json index 9972b3cfd1..999190ec73 100644 --- a/npm/ng-packs/packages/theme-shared/package.json +++ b/npm/ng-packs/packages/theme-shared/package.json @@ -15,7 +15,6 @@ "bootstrap": "^4.3.1", "chart.js": "^2.9.2", "font-awesome": "^4.7.0", - "ngx-perfect-scrollbar": "^8.0.0", "primeicons": "^2.0.0", "primeng": "^8.1.1" }, diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index c812fc601e..55b7b187d1 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts @@ -2,8 +2,11 @@ export * from './breadcrumb/breadcrumb.component'; export * from './button/button.component'; export * from './chart/chart.component'; export * from './confirmation/confirmation.component'; +export * from './loading/loading.component'; export * from './loader-bar/loader-bar.component'; export * from './modal/modal.component'; +export * from './pagination/pagination.component'; +export * from './sort-order-icon/sort-order-icon.component'; export * from './table-empty-message/table-empty-message.component'; +export * from './table/table.component'; export * from './toast/toast.component'; -export * from './sort-order-icon/sort-order-icon.component'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts new file mode 100644 index 0000000000..0271ced29b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'abp-loading', + template: ` +
+ +
+ `, + styles: [ + ` + .abp-loading { + background: rgba(0, 0, 0, 0.2); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1040; + } + + .abp-loading .abp-spinner { + position: absolute; + top: 50%; + left: 50%; + -moz-transform: translateX(-50%) translateY(-50%); + -o-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + `, + ], +}) +export class LoadingComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.html new file mode 100644 index 0000000000..b42f45a148 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.html @@ -0,0 +1,38 @@ +
+ {{ page }} +
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts new file mode 100644 index 0000000000..964445c192 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts @@ -0,0 +1,52 @@ +import { Component, Input, OnInit, Output, EventEmitter, TrackByFunction } from '@angular/core'; + +@Component({ + selector: 'abp-pagination', + templateUrl: 'pagination.component.html', +}) +export class PaginationComponent implements OnInit { + private _value = 1; + @Input() + get value(): number { + return this._value; + } + set value(newValue: number) { + if (this._value === newValue) return; + + this._value = newValue; + this.valueChange.emit(newValue); + } + + @Output() + readonly valueChange = new EventEmitter(); + + @Input() + totalPages = 0; + + get pageArray(): number[] { + const count = this.totalPages < 5 ? this.totalPages : 5; + + if (this.value === 1 || this.value === 2) { + return Array.from(new Array(count)).map((_, index) => index + 1); + } else if (this.value === this.totalPages || this.value === this.totalPages - 1) { + return Array.from(new Array(count)).map((_, index) => this.totalPages - count + 1 + index); + } else { + return [this.value - 2, this.value - 1, this.value, this.value + 1, this.value + 2]; + } + } + + trackByFn: TrackByFunction = (_, page) => page; + + ngOnInit() { + if (!this.value || this.value < 1 || this.value > this.totalPages) { + this.value = 1; + } + } + + changePage(page: number) { + if (page < 1) return; + else if (page > this.totalPages) return; + + this.value = page; + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html new file mode 100644 index 0000000000..6898a9964b --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html @@ -0,0 +1,78 @@ +
+
+ + +
+
+ + +
+
+
+
+ + + + +
+
+
+
+ + + +
+
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ {{ emptyMessage | abpLocalization }} +
+ + diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts new file mode 100644 index 0000000000..3c9995a388 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts @@ -0,0 +1,106 @@ +import { + AfterViewInit, + Component, + ElementRef, + EventEmitter, + Input, + Output, + TemplateRef, + TrackByFunction, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; + +@Component({ + selector: 'abp-table', + templateUrl: 'table.component.html', + styles: [ + ` + .ui-table .ui-table-tbody > tr:nth-child(even):hover, + .ui-table .ui-table-tbody > tr:hover { + filter: brightness(90%); + } + + .ui-table .ui-table-tbody > tr.empty-row:hover { + filter: none; + } + + .ui-table .ui-table-tbody > tr.empty-row > div { + margin: 10px; + text-align: center; + } + `, + ], + encapsulation: ViewEncapsulation.None, +}) +export class TableComponent { + private _totalRecords: number; + bodyScrollLeft = 0; + + @Input() + value: any[]; + + @Input() + headerTemplate: TemplateRef; + + @Input() + bodyTemplate: TemplateRef; + + @Input() + colgroupTemplate: TemplateRef; + + @Input() + scrollHeight: string; + + @Input() + scrollable: boolean; + + @Input() + rows: number; + + @Input() + page = 1; + + @Input() + trackingProp = 'id'; + + @Input() + emptyMessage = 'AbpAccount::NoDataAvailableInDatatable'; + + @Output() + readonly pageChange = new EventEmitter(); + + @ViewChild('wrapper', { read: ElementRef, static: false }) + wrapperRef: ElementRef; + + @Input() + get totalRecords(): number { + return this._totalRecords || this.value.length; + } + set totalRecords(newValue: number) { + if (newValue < 0) this._totalRecords = 0; + + this._totalRecords = newValue; + } + + get totalPages(): number { + if (!this.rows) { + return; + } + + return Math.ceil(this.totalRecords / this.rows); + } + + get slicedValue(): any[] { + if (!this.rows || this.rows >= this.value.length) { + return this.value; + } + + const start = (this.page - 1) * this.rows; + return this.value.slice(start, start + this.rows); + } + + trackByFn: TrackByFunction = (_, value) => { + return typeof value === 'object' ? value[this.trackingProp] || value : value; + }; +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts index 30185ec6c6..24f7a9a8ea 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts @@ -30,6 +30,7 @@ export default ` .ui-table-scrollable-body::-webkit-scrollbar { height: 5px !important; + width: 5px !important; } .ui-table-scrollable-body::-webkit-scrollbar-track { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts index 8efed514bf..aa2725e328 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts @@ -1 +1,2 @@ +export * from './loading.directive'; export * from './table-sort.directive'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts new file mode 100644 index 0000000000..d38b3713b7 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts @@ -0,0 +1,74 @@ +import { + Directive, + ElementRef, + AfterViewInit, + ViewContainerRef, + ComponentFactoryResolver, + Input, + Injector, + ComponentRef, + ComponentFactory, + HostBinding, + EmbeddedViewRef, + Renderer2, + OnInit, +} from '@angular/core'; +import { LoadingComponent } from '../components/loading/loading.component'; + +@Directive({ selector: '[abpLoading]' }) +export class LoadingDirective implements OnInit { + private _loading: boolean; + + @HostBinding('style.position') + position = 'relative'; + + @Input('abpLoading') + get loading(): boolean { + return this._loading; + } + + set loading(newValue: boolean) { + setTimeout(() => { + if (!this.componentRef) { + this.componentRef = this.cdRes + .resolveComponentFactory(LoadingComponent) + .create(this.injector); + } + + if (newValue && !this.rootNode) { + this.rootNode = (this.componentRef.hostView as EmbeddedViewRef).rootNodes[0]; + this.targetElement.appendChild(this.rootNode); + } else { + this.renderer.removeChild(this.rootNode.parentElement, this.rootNode); + this.rootNode = null; + } + + this._loading = newValue; + }, 0); + } + + @Input('abpLoadingTargetElement') + targetElement: HTMLElement; + + componentRef: ComponentRef; + rootNode: HTMLDivElement; + + constructor( + private elRef: ElementRef, + private vcRef: ViewContainerRef, + private cdRes: ComponentFactoryResolver, + private injector: Injector, + private renderer: Renderer2, + ) {} + + ngOnInit() { + if (!this.targetElement) { + const { offsetHeight, offsetWidth } = this.elRef.nativeElement; + if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) { + this.targetElement = this.elRef.nativeElement.children[0] as HTMLElement; + } else { + this.targetElement = this.elRef.nativeElement; + } + } + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts index 5f42cc0144..6563f55d26 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/table-sort.directive.ts @@ -1,7 +1,17 @@ -import { Directive, Input, Optional, Self, SimpleChanges, OnChanges } from '@angular/core'; -import { Table } from 'primeng/table'; +import { SortOrder, SortPipe } from '@abp/ng.core'; +import { + ChangeDetectorRef, + Directive, + Host, + Input, + OnChanges, + Optional, + Self, + SimpleChanges, +} from '@angular/core'; import clone from 'just-clone'; -import { SortPipe, SortOrder } from '@abp/ng.core'; +import snq from 'snq'; +import { TableComponent } from '../components/table/table.component'; export interface TableSortOptions { key: string; @@ -15,13 +25,30 @@ export interface TableSortOptions { export class TableSortDirective implements OnChanges { @Input() abpTableSort: TableSortOptions; + @Input() value: any[] = []; - constructor(@Optional() @Self() private table: Table, private sortPipe: SortPipe) {} + + get table(): TableComponent | any { + return ( + this.abpTable || snq(() => this.cdRef['_view'].component) || snq(() => this.cdRef['context']) // 'context' for ivy + ); + } + + constructor( + @Host() @Optional() @Self() private abpTable: TableComponent, + private sortPipe: SortPipe, + private cdRef: ChangeDetectorRef, + ) {} + ngOnChanges({ value, abpTableSort }: SimpleChanges) { - if (value || abpTableSort) { + if (this.table && (value || abpTableSort)) { this.abpTableSort = this.abpTableSort || ({} as TableSortOptions); - this.table.value = this.sortPipe.transform(clone(this.value), this.abpTableSort.order, this.abpTableSort.key); + this.table.value = this.sortPipe.transform( + clone(this.value), + this.abpTableSort.order, + this.abpTableSort.key, + ); } } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts new file mode 100644 index 0000000000..1b49b8581c --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts @@ -0,0 +1,82 @@ +import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator/jest'; +import { LoadingDirective } from '../directives'; +import { LoadingComponent } from '../components'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'abp-dummy', + template: '
Testing Loading Directive
', +}) +export class DummyComponent {} + +describe('LoadingDirective', () => { + let spectator: SpectatorDirective; + const createDirective = createDirectiveFactory({ + directive: LoadingDirective, + declarations: [LoadingComponent, DummyComponent], + entryComponents: [LoadingComponent], + }); + + describe('default', () => { + beforeEach(() => { + spectator = createDirective('
Testing Loading Directive
', { + hostProps: { status: true }, + }); + }); + + it('should create the loading component', done => { + setTimeout(() => { + expect(spectator.directive.rootNode).toBeTruthy(); + expect(spectator.directive.componentRef).toBeTruthy(); + done(); + }, 0); + }); + }); + + describe('with custom target', () => { + const mockTarget = document.createElement('div'); + const spy = jest.spyOn(mockTarget, 'appendChild'); + + beforeEach(() => { + spectator = createDirective( + '
Testing Loading Directive
', + { + hostProps: { status: true, target: mockTarget }, + }, + ); + }); + + it('should add the loading component to the DOM', done => { + setTimeout(() => { + expect(spy).toHaveBeenCalled(); + done(); + }, 0); + }); + + it('should remove the loading component to the DOM', done => { + const rendererSpy = jest.spyOn(spectator.directive['renderer'], 'removeChild'); + spectator.setHostInput({ status: false }); + setTimeout(() => { + expect(rendererSpy).toHaveBeenCalled(); + expect(spectator.directive.rootNode).toBeFalsy(); + done(); + }, 0); + }); + }); + + describe('with a component selector', () => { + beforeEach(() => { + spectator = createDirective('', { + hostProps: { status: true }, + }); + }); + + it('should select the child element', done => { + setTimeout(() => { + expect(spectator.directive.targetElement.id).toBe('dummy'); + done(); + }, 0); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts new file mode 100644 index 0000000000..98f63e75f6 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts @@ -0,0 +1,63 @@ +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { PaginationComponent } from '../components'; + +describe('PaginationComponent', () => { + let spectator: SpectatorHost; + const createHost = createHostFactory({ + component: PaginationComponent, + }); + + beforeEach(() => { + spectator = createHost( + '', + { + hostProps: { + value: 5, + totalPages: 12, + }, + }, + ); + }); + + it('should add ui-state-active class to current page', () => { + expect(spectator.query('.ui-state-active').textContent).toBe('5'); + }); + + it('should display the correct pages', () => { + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '3', + '4', + '5', + '6', + '7', + ]); + + spectator.click('.ui-paginator-first'); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '1', + '2', + '3', + '4', + '5', + ]); + + spectator.setHostInput({ value: 12 }); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '8', + '9', + '10', + '11', + '12', + ]); + + spectator.setHostInput({ value: 1, totalPages: 3 }); + + expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([ + '1', + '2', + '3', + ]); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts new file mode 100644 index 0000000000..df2894cc3e --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts @@ -0,0 +1,74 @@ +import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; +import { PaginationComponent, TableComponent } from '../components'; + +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'abpLocalization', +}) +export class DummyLocalizationPipe implements PipeTransform { + transform(value: any, ...args: any[]): any { + return value; + } +} + +describe('TableComponent', () => { + let spectator: SpectatorHost; + const createHost = createHostFactory({ + component: TableComponent, + declarations: [PaginationComponent, DummyLocalizationPipe], + }); + + describe('without value', () => { + beforeEach(() => { + spectator = createHost( + ` + + + name`, + { + hostProps: { + value: [], + }, + }, + ); + }); + + it('should display the empty message', () => { + expect(spectator.query('tr.empty-row>div')).toHaveText( + 'AbpAccount::NoDataAvailableInDatatable', + ); + }); + + it('should display the header', () => { + expect(spectator.query('thead')).toBeTruthy(); + expect(spectator.query('th')).toHaveText('name'); + }); + + it('should place the colgroup template', () => { + expect(spectator.query('colgroup')).toBeTruthy(); + expect(spectator.query('col')).toBeTruthy(); + }); + }); + + describe('with value', () => { + // TODO + beforeEach(() => { + spectator = createHost( + ` + name + `, + { + hostProps: { + value: [], + }, + }, + ); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index b40a4ea05a..c67f553d37 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -1,9 +1,10 @@ import { CoreModule, LazyLoadService } from '@abp/ng.core'; +import { DatePipe } from '@angular/common'; import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core'; +import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; import { NgxValidateCoreModule } from '@ngx-validate/core'; import { MessageService } from 'primeng/components/common/messageservice'; import { ToastModule } from 'primeng/toast'; -import { forkJoin } from 'rxjs'; import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component'; import { ButtonComponent } from './components/button/button.component'; import { ChartComponent } from './components/chart/chart.component'; @@ -13,16 +14,18 @@ import { LoaderBarComponent } from './components/loader-bar/loader-bar.component import { ModalComponent } from './components/modal/modal.component'; import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component'; import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component'; +import { TableComponent } from './components/table/table.component'; import { ToastComponent } from './components/toast/toast.component'; import styles from './constants/styles'; import { TableSortDirective } from './directives/table-sort.directive'; import { ErrorHandler } from './handlers/error.handler'; -import { chartJsLoaded$ } from './utils/widget-utils'; import { RootParams } from './models/common'; -import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token'; -import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; +import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; -import { DatePipe } from '@angular/common'; +import { chartJsLoaded$ } from './utils/widget-utils'; +import { PaginationComponent } from './components/pagination/pagination.component'; +import { LoadingComponent } from './components/loading/loading.component'; +import { LoadingDirective } from './directives/loading.directive'; export function appendScript(injector: Injector) { const fn = () => { @@ -44,10 +47,14 @@ export function appendScript(injector: Injector) { ConfirmationComponent, HttpErrorWrapperComponent, LoaderBarComponent, + LoadingComponent, ModalComponent, + PaginationComponent, + TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, + LoadingDirective, TableSortDirective, ], exports: [ @@ -56,14 +63,18 @@ export function appendScript(injector: Injector) { ChartComponent, ConfirmationComponent, LoaderBarComponent, + LoadingComponent, ModalComponent, + PaginationComponent, + TableComponent, TableEmptyMessageComponent, ToastComponent, SortOrderIconComponent, + LoadingDirective, TableSortDirective, ], providers: [DatePipe], - entryComponents: [HttpErrorWrapperComponent], + entryComponents: [HttpErrorWrapperComponent, LoadingComponent], }) export class ThemeSharedModule { constructor(private errorHandler: ErrorHandler) {}