Merge branch 'dev' of https://github.com/volosoft/abp into dev

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/Commands/NewCommand.cs

@@ -40,18 +40,29 @@ namespace Volo.Abp.Cli.Commands
             Logger.LogInformation("Creating your project...");
             Logger.LogInformation("Project name: " + commandLineArgs.Target);
 
-            commandLineArgs.Options.Add(CliConsts.Command, commandLineArgs.Command);
+            var template = commandLineArgs.Options.GetOrNull(Options.Template.Short, Options.Template.Long);
+            if (template != null)
+            {
+                Logger.LogInformation("Template: " + template);
+            }
 
-            var result = await ProjectBuilder.BuildAsync(
-                new ProjectBuildArgs(
-                    SolutionName.Parse(commandLineArgs.Target),
-                    commandLineArgs.Options.GetOrNull(Options.Template.Short, Options.Template.Long),
-                    commandLineArgs.Options.GetOrNull(Options.Version.Short, Options.Version.Long),
-                    GetDatabaseProvider(commandLineArgs),
-                    GetUiFramework(commandLineArgs),
-                    commandLineArgs.Options
-                )
-            );
+            var version = commandLineArgs.Options.GetOrNull(Options.Version.Short, Options.Version.Long);
+            if (version != null)
+            {
+                Logger.LogInformation("Version: " + version);
+            }
+
+            var databaseProvider = GetDatabaseProvider(commandLineArgs);
+            if (databaseProvider != DatabaseProvider.NotSpecified)
+            {
+                Logger.LogInformation("Database provider: " + databaseProvider);
+            }
+
+            var uiFramework = GetUiFramework(commandLineArgs);
+            if (uiFramework != UiFramework.NotSpecified)
+            {
+                Logger.LogInformation("UI Framework: " + uiFramework);
+            }
 
             var outputFolder = commandLineArgs.Options.GetOrNull(Options.OutputFolder.Short, Options.OutputFolder.Long);
             if (outputFolder != null)
@@ -68,6 +79,21 @@ namespace Volo.Abp.Cli.Commands
                 outputFolder = Directory.GetCurrentDirectory();
             }
 
+            Logger.LogInformation("Output folder: " + outputFolder);
+
+            commandLineArgs.Options.Add(CliConsts.Command, commandLineArgs.Command);
+
+            var result = await ProjectBuilder.BuildAsync(
+                new ProjectBuildArgs(
+                    SolutionName.Parse(commandLineArgs.Target),
+                    template,
+                    version,
+                    databaseProvider,
+                    uiFramework,
+                    commandLineArgs.Options
+                )
+            );
+
             using (var templateFileStream = new MemoryStream(result.ZipContent))
             {
                 using (var zipInputStream = new ZipInputStream(templateFileStream))
@@ -101,8 +127,7 @@ namespace Volo.Abp.Cli.Commands
                 }
             }
 
-            Logger.LogInformation($"Successfully created the project '{commandLineArgs.Target}'");
-            Logger.LogInformation($"The output folder is: '{outputFolder}'");
+            Logger.LogInformation($"'{commandLineArgs.Target}' has been successfully created to '{outputFolder}'");
         }
 
         public string GetUsageInfo()

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/Licensing/AbpIoApiKeyService.cs

@@ -15,7 +15,7 @@ namespace Volo.Abp.Cli.Licensing
 
         protected IJsonSerializer JsonSerializer { get; }
 
-        public async Task<string> GetApiKeyOrNullAsync()
+        public async Task<DeveloperApiKeyResult> GetApiKeyOrNullAsync()
         {
             using (var client = new CliHttpClient())
             {
@@ -29,7 +29,7 @@ namespace Volo.Abp.Cli.Licensing
                 }
 
                 var responseContent = await response.Content.ReadAsStringAsync();
-                return JsonSerializer.Deserialize<DeveloperApiKeyResult>(responseContent).ApiKey;
+                return JsonSerializer.Deserialize<DeveloperApiKeyResult>(responseContent);
             }
         }
     }

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/Licensing/IApiKeyService.cs

@@ -5,6 +5,6 @@ namespace Volo.Abp.Cli.Licensing
 {
     public interface IApiKeyService
     {
-        Task<string> GetApiKeyOrNullAsync();
+        Task<DeveloperApiKeyResult> GetApiKeyOrNullAsync();
     }
 }

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Building/ProjectBuildPipelineBuilder.cs

@@ -1,4 +1,5 @@
 using Volo.Abp.Cli.ProjectBuilding.Building.Steps;
+using Volo.Abp.Cli.ProjectBuilding.Templates.App;
 
 namespace Volo.Abp.Cli.ProjectBuilding.Building
 {
@@ -19,6 +20,12 @@ namespace Volo.Abp.Cli.ProjectBuilding.Building
 
             pipeline.Steps.Add(new TemplateCodeDeleteStep());
             pipeline.Steps.Add(new SolutionRenameStep());
+
+            if (context.Template.Name == AppProTemplate.TemplateName)
+            {
+                pipeline.Steps.Add(new LicenseCodeReplaceStep());
+            }
+
             pipeline.Steps.Add(new CreateProjectResultZipStep());
 
             return pipeline;

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Building/Steps/LicenseCodeReplaceStep.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Volo.Abp.Cli.ProjectBuilding.Files;
+
+namespace Volo.Abp.Cli.ProjectBuilding.Building.Steps
+{
+    public class LicenseCodeReplaceStep : ProjectBuildPipelineStep
+    {
+        public override void Execute(ProjectBuildContext context)
+        {
+            var licenseCode = context.BuildArgs.ExtraProperties.GetOrDefault("license-code");
+
+            var appSettingsJsonFiles = context.Files.Where(f =>
+                f.Name.EndsWith("appsettings.json", StringComparison.OrdinalIgnoreCase));
+
+            foreach (var appSettingsJson in appSettingsJsonFiles)
+            {
+                appSettingsJson.ReplaceText(@"<LICENSE_CODE/>", licenseCode);
+            }
+        }
+    }
+}

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Building/Steps/SolutionRenameStep.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using Volo.Abp.Cli.ProjectBuilding.Files;
 
 namespace Volo.Abp.Cli.ProjectBuilding.Building.Steps

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/ProjectBuilder.cs

@@ -53,10 +53,15 @@ namespace Volo.Abp.Cli.ProjectBuilding
                 args.Version
             );
 
-            var apiKey = await ApiKeyService.GetApiKeyOrNullAsync();
-            if (apiKey != null)
+            var apiKeyResult = await ApiKeyService.GetApiKeyOrNullAsync();
+            if (apiKeyResult?.ApiKey != null)
             {
-                args.ExtraProperties["api-key"] = apiKey;
+                args.ExtraProperties["api-key"] = apiKeyResult.ApiKey;
+            }
+
+            if (apiKeyResult?.LicenseCode != null)
+            {
+                args.ExtraProperties["license-code"] = apiKeyResult.LicenseCode;
             }
 
             var context = new ProjectBuildContext(
@@ -69,7 +74,7 @@ namespace Volo.Abp.Cli.ProjectBuilding
 
             if (!templateInfo.DocumentUrl.IsNullOrEmpty())
             {
-                Logger.LogInformation("Check out the documents: " + templateInfo.DocumentUrl);
+                Logger.LogInformation("Check out the documents at " + templateInfo.DocumentUrl);
             }
 
             // Exclude unwanted or known options.

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -18,6 +18,7 @@ import { VisibilityDirective } from './directives/visibility.directive';
 import { ApiInterceptor } from './interceptors/api.interceptor';
 import { ABP } from './models/common';
 import { LocalizationPipe } from './pipes/localization.pipe';
+import { SortPipe } from './pipes/sort.pipe';
 import { LocaleProvider } from './providers/locale.provider';
 import { ConfigState } from './states/config.state';
 import { ProfileState } from './states/profile.state';
@@ -46,6 +47,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component';
     ForDirective,
     FormSubmitDirective,
     LocalizationPipe,
+    SortPipe,
     PermissionDirective,
     VisibilityDirective,
     InputEventDebounceDirective,
@@ -65,6 +67,7 @@ import { AbstractNgModelComponent } from './abstracts/ng-model.component';
     ForDirective,
     FormSubmitDirective,
     LocalizationPipe,
+    SortPipe,
     PermissionDirective,
     VisibilityDirective,
     InputEventDebounceDirective,

npm/ng-packs/packages/core/src/lib/pipes/index.ts

@@ -1 +1,2 @@
 export * from './localization.pipe';
+export * from "./sort.pipe";

npm/ng-packs/packages/core/src/lib/pipes/sort.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'abpSort',
+    pure: false
+})
+export class SortPipe implements PipeTransform {
+    transform(value: any[], sortOrder: string): any {
+        sortOrder = sortOrder.toLowerCase();
+        if(sortOrder === "desc") return value.reverse();
+        else return value;
+    }
+}

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -1,16 +1,17 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
-      </div>
-      <div class="text-right col col-md-6">
-        <button id="create-role" class="btn btn-primary" type="button" (click)="onAdd()">
-          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
-        </button>
-      </div>
+<div class="row entry-row">
+  <div class="col-auto">
+    <h1 class="content-header-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h1>
+  </div>
+  <div class="col">
+    <div class="text-lg-right pt-2" id="AbpContentToolbar">
+      <button id="create-role" class="btn btn-primary" type="button" (click)="onAdd()">
+        <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
+      </button>
     </div>
   </div>
+</div>
+
+<div id="identity-roles-wrapper" class="card">
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
       <label
@@ -22,6 +23,7 @@
       /></label>
     </div>
     <p-table
+      *ngIf="[65, 200] as columnWidths"
       [value]="data$ | async"
       [lazy]="true"
       [lazyLoadOnInit]="false"
@@ -29,18 +31,38 @@
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
-      <ng-template pTemplate="header">
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpIdentityServer"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
+      <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::RoleName' | abpLocalization }}</th>
+          <th pResizableColumn (click)="changeSortOrder()">
+            {{ 'AbpIdentity::RoleName' | abpLocalization }}
+            <span class="float-right"
+              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
+            ></span>
+          </th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
           <td>
-            <div ngbDropdown class="d-inline-block">
+            <div ngbDropdown container="body" class="d-inline-block">
               <button
                 class="btn btn-primary btn-sm dropdown-toggle"
                 data-toggle="dropdown"

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -38,6 +38,8 @@ export class RolesComponent {
 
   modalBusy: boolean = false;
 
+  sortOrder: string = 'asc';
+
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
@@ -121,4 +123,8 @@ export class RolesComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  changeSortOrder() {
+    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  }
 }

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -1,22 +1,23 @@
-<div id="identity-roles-wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
-      </div>
-      <div class="text-right col col-md-6">
-        <button
-          [abpPermission]="'AbpIdentity.Users.Create'"
-          id="create-role"
-          class="btn btn-primary"
-          type="button"
-          (click)="onAdd()"
-        >
-          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
-        </button>
-      </div>
+<div class="row entry-row">
+  <div class="col-auto">
+    <h1 class="content-header-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h1>
+  </div>
+  <div class="col">
+    <div class="text-lg-right pt-2" id="AbpContentToolbar">
+      <button
+        [abpPermission]="'AbpIdentity.Users.Create'"
+        id="create-role"
+        class="btn btn-primary"
+        type="button"
+        (click)="onAdd()"
+      >
+        <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
+      </button>
     </div>
   </div>
+</div>
+
+<div id="identity-roles-wrapper" class="card">
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
       <label
@@ -28,6 +29,7 @@
       /></label>
     </div>
     <p-table
+      *ngIf="[80, 200, 200, 200] as columnWidths"
       [value]="data$ | async"
       [lazy]="true"
       [lazyLoadOnInit]="false"
@@ -35,20 +37,40 @@
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpIdentityServer"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::UserName' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
-          <th>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
+          <th pResizableColumn (click)="changeSortOrder()">
+            {{ 'AbpIdentity::UserName' | abpLocalization }}
+            <span class="float-right"
+              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
+            ></span>
+          </th>
+          <th pResizableColumn>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
+          <th pResizableColumn>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
           <td>
-            <div ngbDropdown class="d-inline-block">
+            <div ngbDropdown container="body" class="d-inline-block">
               <button
                 class="btn btn-primary btn-sm dropdown-toggle"
                 data-toggle="dropdown"

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -52,6 +52,8 @@ export class UsersComponent {
 
   modalBusy: boolean = false;
 
+  sortOrder: string = 'asc';
+
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   get roleGroups(): FormGroup[] {
@@ -169,4 +171,8 @@ export class UsersComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  changeSortOrder() {
+    this.sortOrder = this.sortOrder.toLowerCase() === 'asc' ? 'desc' : 'asc';
+  }
 }

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -1,25 +1,24 @@
-<div id="wrapper" class="card">
-  <div class="card-header">
-    <div class="row">
-      <div class="col col-md-6">
-        <h5 class="card-title">
-          {{ 'AbpTenantManagement::Tenants' | abpLocalization }}
-        </h5>
-      </div>
-      <div class="text-right col col-md-6">
-        <button
-          [abpPermission]="'AbpTenantManagement.Tenants.Create'"
-          id="create-tenants"
-          class="btn btn-primary"
-          type="button"
-          (click)="onAddTenant()"
-        >
-          <i class="fa fa-plus mr-1"></i>
-          <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
-        </button>
-      </div>
+<div class="row entry-row">
+  <div class="col-auto">
+    <h1 class="content-header-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h1>
+  </div>
+  <div class="col">
+    <div class="text-lg-right pt-2" id="AbpContentToolbar">
+      <button
+        [abpPermission]="'AbpTenantManagement.Tenants.Create'"
+        id="create-tenants"
+        class="btn btn-primary"
+        type="button"
+        (click)="onAddTenant()"
+      >
+        <i class="fa fa-plus mr-1"></i>
+        <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
+      </button>
     </div>
   </div>
+</div>
+
+<div id="wrapper" class="card">
   <div class="card-body">
     <div id="data-tables-table-filter" class="data-tables-filter">
       <label
@@ -31,25 +30,46 @@
       /></label>
     </div>
     <p-table
-      [value]="data$ | async"
+      *ngIf="[65, 200] as columnWidths"
+      [value]="data$ | async | abpSort: sortOrder"
       [lazy]="true"
       [lazyLoadOnInit]="false"
       [paginator]="true"
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
-      <ng-template pTemplate="header">
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpTenantManagement"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
+      <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>
-          <th>{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</th>
+          <th pResizableColumn (click)="changeSortOrder()">
+            {{ 'AbpTenantManagement::TenantName' | abpLocalization }}
+            <span class="float-right"
+              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
+            ></span>
+          </th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
           <td>
-            <div ngbDropdown class="d-inline-block">
+            <div ngbDropdown container="body" class="d-inline-block">
               <button
                 class="btn btn-primary btn-sm dropdown-toggle"
                 data-toggle="dropdown"
@@ -97,7 +117,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
   </ng-template>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -58,6 +58,8 @@ export class TenantsComponent {
 
   modalBusy: boolean = false;
 
+  sortOrder: string = 'asc';
+
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
@@ -184,8 +186,8 @@ export class TenantsComponent {
           ? new UpdateTenant({ ...this.tenantForm.value, id: this.selected.id })
           : new CreateTenant(this.tenantForm.value),
       )
+      .pipe(finalize(()=> (this.modalBusy = false)))
       .subscribe(() => {
-        this.modalBusy = false;
         this.isModalVisible = false;
       });
   }
@@ -198,7 +200,6 @@ export class TenantsComponent {
       .subscribe((status: Toaster.Status) => {
         if (status === Toaster.Status.confirm) {
           this.store.dispatch(new DeleteTenant(id));
-          this.modalBusy = false;
         }
       });
   }
@@ -217,4 +218,8 @@ export class TenantsComponent {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  changeSortOrder() {
+    this.sortOrder = this.sortOrder.toLowerCase() === "asc" ? "desc" : "asc";
+  }
 }

npm/ng-packs/packages/theme-basic/src/lib/components/index.ts

@@ -1,3 +1,4 @@
 export * from './account-layout/account-layout.component';
 export * from './application-layout/application-layout.component';
 export * from './empty-layout/empty-layout.component';
+export * from './validation-error/validation-error.component';

npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts

@@ -0,0 +1,9 @@
+export default `
+.content-header-title {
+    font-size: 24px;
+}
+
+.entry-row {
+    margin-bottom: 15px;
+}
+`;

npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { LazyLoadService } from '@abp/ng.core';
+import styles from '../constants/styles';
+
+@Injectable({ providedIn: 'root' })
+export class InitialService {
+  constructor(private lazyLoadService: LazyLoadService) {
+    this.appendStyle().subscribe();
+  }
+
+  appendStyle() {
+    return this.lazyLoadService.load(null, 'style', styles, 'head', 'afterbegin');
+  }
+}

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -10,11 +10,13 @@ import { ApplicationLayoutComponent } from './components/application-layout/appl
 import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component';
 import { LayoutComponent } from './components/layout/layout.component';
 import { LayoutState } from './states/layout.state';
+import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
+import { InitialService } from './services/initial.service';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
 @NgModule({
-  declarations: [...LAYOUTS, LayoutComponent],
+  declarations: [...LAYOUTS, LayoutComponent, ValidationErrorComponent],
   imports: [
     CoreModule,
     ThemeSharedModule,
@@ -23,8 +25,23 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     ToastModule,
     NgxValidateCoreModule,
     NgxsModule.forFeature([LayoutState]),
+    NgxValidateCoreModule.forRoot({
+      targetSelector: '.form-group',
+      blueprints: {
+        email: `AbpAccount::ThisFieldIsNotAValidEmailAddress.`,
+        max: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
+        maxlength: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ requiredLength }}]`,
+        min: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
+        minlength: `AbpAccount::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf[{{ min }},{{ max }}]`,
+        required: `AbpAccount::ThisFieldIsRequired.`,
+        passwordMismatch: `AbpIdentity::Identity.PasswordConfirmationFailed`,
+      },
+      errorTemplate: ValidationErrorComponent,
+    }),
   ],
   exports: [...LAYOUTS],
-  entryComponents: [...LAYOUTS],
+  entryComponents: [...LAYOUTS, ValidationErrorComponent],
 })
-export class ThemeBasicModule {}
+export class ThemeBasicModule {
+  constructor(private initialService: InitialService) {}
+}

npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.html

@@ -24,9 +24,9 @@
     </form>
   </ng-template>
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" #abpClose>
+    <button type="button" class="btn btn-secondary color-white" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -6,4 +6,5 @@ export * from './confirmation/confirmation.component';
 export * from './loader-bar/loader-bar.component';
 export * from './modal/modal.component';
 export * from './profile/profile.component';
+export * from './table-empty-message/table-empty-message.component';
 export * from './toast/toast.component';

npm/ng-packs/packages/theme-shared/src/lib/components/profile/profile.component.html

@@ -33,9 +33,9 @@
     </form>
   </ng-template>
   <ng-template #abpFooter>
-    <button #abpClose type="button" class="btn btn-secondary">
+    <button #abpClose type="button" class="btn btn-secondary color-white">
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="submit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="submit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-shared/src/lib/components/table-empty-message/table-empty-message.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: '[abp-table-empty-message]',
+  template: `
+    <td class="text-center" [attr.colspan]="colspan">
+      {{ emptyMessage | abpLocalization }}
+    </td>
+  `,
+})
+export class TableEmptyMessageComponent {
+  @Input()
+  colspan = 2;
+
+  @Input()
+  message: string;
+
+  @Input()
+  localizationResource: string = 'AbpAccount';
+
+  @Input()
+  localizationProp: string = 'NoDataAvailableInDatatable';
+
+  get emptyMessage(): string {
+    return this.message || `${this.localizationResource}::${this.localizationProp}`;
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -1,6 +1,5 @@
 import { CoreModule, LazyLoadService } from '@abp/ng.core';
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { MessageService } from 'primeng/components/common/messageservice';
 import { ToastModule } from 'primeng/toast';
 import { forkJoin } from 'rxjs';
@@ -11,7 +10,6 @@ import { ChangePasswordComponent } from './components/change-password/change-pas
 import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 import { ErrorComponent } from './components/errors/error.component';
-import { ValidationErrorComponent } from './components/errors/validation-error.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
 import { ProfileComponent } from './components/profile/profile.component';
@@ -19,6 +17,7 @@ import { ToastComponent } from './components/toast/toast.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
 import { chartJsLoaded$ } from './utils/widget-utils';
+import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component';
 
 export function appendScript(injector: Injector) {
   const fn = function() {
@@ -41,23 +40,7 @@ export function appendScript(injector: Injector) {
 }
 
 @NgModule({
-  imports: [
-    CoreModule,
-    ToastModule,
-    NgxValidateCoreModule.forRoot({
-      targetSelector: '.form-group',
-      blueprints: {
-        email: `AbpAccount::ThisFieldIsNotAValidEmailAddress.`,
-        max: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
-        maxlength: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ requiredLength }}]`,
-        min: `AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]`,
-        minlength: `AbpAccount::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf[{{ min }},{{ max }}]`,
-        required: `AbpAccount::ThisFieldIsRequired.`,
-        passwordMismatch: `AbpIdentity::Identity.PasswordConfirmationFailed`,
-      },
-      errorTemplate: ValidationErrorComponent,
-    }),
-  ],
+  imports: [CoreModule, ToastModule],
   declarations: [
     BreadcrumbComponent,
     ButtonComponent,
@@ -68,8 +51,8 @@ export function appendScript(injector: Injector) {
     LoaderBarComponent,
     ModalComponent,
     ProfileComponent,
+    TableEmptyMessageComponent,
     ToastComponent,
-    ValidationErrorComponent,
   ],
   exports: [
     BreadcrumbComponent,
@@ -80,9 +63,10 @@ export function appendScript(injector: Injector) {
     LoaderBarComponent,
     ModalComponent,
     ProfileComponent,
+    TableEmptyMessageComponent,
     ToastComponent,
   ],
-  entryComponents: [ErrorComponent, ValidationErrorComponent],
+  entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
   static forRoot(): ModuleWithProviders {