Merge pull request #1767 from abpframework/refactor/general

Refactor Angular Modules

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
@@ -29,18 +30,30 @@
       [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 [65, 200]" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </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
@@ -35,20 +36,32 @@
       [rows]="10"
       [totalRecords]="totalCount$ | async"
       [loading]="loading"
+      [resizableColumns]="true"
+      [scrollable]="true"
       (onLazyLoad)="onPageChange($event)"
     >
+      <ng-template pTemplate="colgroup">
+        <colgroup>
+          <col *ngFor="let width of [80, 200, 200, 200]" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </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,37 @@
       /></label>
     </div>
     <p-table
-      [value]="data$ | async"
+      [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 [65, 200]" [ngStyle]="{ 'width.px': width }" />
+        </colgroup>
+      </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 +108,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/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,6 +10,7 @@ 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 { InitialService } from "./services/initial.service";
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -27,4 +28,6 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
   exports: [...LAYOUTS],
   entryComponents: [...LAYOUTS],
 })
-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/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>