From 3bef3650f8cbfcfc47894abdf490f12a6dc1fbb5 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Wed, 18 Sep 2019 15:49:49 +0300
Subject: [PATCH] fix(identity): change template

---
 .../lib/components/roles/roles.component.html | 23 +++----
 .../lib/components/users/users.component.html | 35 +++++------
 .../components/tenants/tenants.component.html | 61 +++++++++++--------
 .../components/tenants/tenants.component.ts   |  9 ++-
 4 files changed, 73 insertions(+), 55 deletions(-)

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 2acb2d3337..e2fb4f8039 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
@@ -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
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 949c6619ec..f02f2cf4fd 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
@@ -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
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 04f6c86a3b..45c0b936dd 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
@@ -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>
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 8624862323..a6040da45f 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
@@ -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";
+  }
 }