feat(permissions): add [loading] property to display an loader when p…

…roperty is true.
TemainfoSoftware · Jul 8, 2019 · 3f54ead · 3f54ead
1 parent 112e43e
commit 3f54ead
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 4 deletions.
diff --git a/projects/truly-ui/src/components/i18n/languages/permissions/en_US.ts b/projects/truly-ui/src/components/i18n/languages/permissions/en_US.ts
@@ -22,6 +22,7 @@
 
 export const Permissions = {
   notFound: 'Nothing Found',
+  loadingMessage: 'Loading Permissions...',
   searchGroup: 'Search Group...',
   searchFunctionality: 'Search Functionality...',
   allowColumnText: 'Allow'

diff --git a/projects/truly-ui/src/components/i18n/languages/permissions/index.ts b/projects/truly-ui/src/components/i18n/languages/permissions/index.ts
@@ -22,6 +22,7 @@
 
 export interface PermissionsI18nInterface {
   notFound: string;
+  loadingMessage: string;
   searchGroup: string;
   searchFunctionality: string;
   allowColumnText: string;

diff --git a/projects/truly-ui/src/components/i18n/languages/permissions/pt_BR.ts b/projects/truly-ui/src/components/i18n/languages/permissions/pt_BR.ts
@@ -22,6 +22,7 @@
 
 export const Permissions = {
   notFound: 'Nada Encontrado',
+  loadingMessage: 'Carregando Permissões...',
   searchGroup: 'Procurar Grupo...',
   searchFunctionality: 'Procurar Funcionalidade...',
   allowColumnText: 'Permitir'

diff --git a/projects/truly-ui/src/components/permissions/index.ts b/projects/truly-ui/src/components/permissions/index.ts
@@ -8,6 +8,7 @@ import { InputModule } from '../input/index';
 import { PermissionGroupDirective } from './parts/directives/permission-group.directive';
 import { A11yModule } from '@angular/cdk/a11y';
 import { MiscModule } from '../misc/index';
+import { LoaderModule } from '../loader/index';
 
 @NgModule({
   imports: [
@@ -16,6 +17,7 @@ import { MiscModule } from '../misc/index';
     FormsModule,
     InputModule,
     CheckBoxModule,
+    LoaderModule,
     MiscModule
   ],
   declarations: [

diff --git a/projects/truly-ui/src/components/permissions/permissions-theme.scss b/projects/truly-ui/src/components/permissions/permissions-theme.scss
@@ -21,7 +21,7 @@
         }
 
         &::-webkit-scrollbar-thumb {
-          background: map-deep-get($primary, "default", "foreground");
+          background: map-deep-get($primary, "default", "background");
         }
       }
 
@@ -41,8 +41,13 @@
       }
 
     }
+
+    .ui-loader-message {
+      color: rgba( map-deep-get($theme, $action, "default", "foreground"), 0.3);
+    }
+
     .nothing-shown {
-      color: map-deep-get($theme, $action, "default", "foreground");
+      color: rgba( map-deep-get($theme, $action, "default", "foreground"), 0.3);
     }
 
     .ui-permissions-header {

diff --git a/projects/truly-ui/src/components/permissions/permissions.html b/projects/truly-ui/src/components/permissions/permissions.html
@@ -33,7 +33,13 @@
     </div>
     <div class="ui-container-permissions">
       <div class="ui-permissions-panel">
-        <div class="nothing-shown" *ngIf="dataSource?.length === 0">
+        <div class="ui-loader-wrapper" *ngIf="loading">
+          <div class="ui-loader">
+            <tl-loader></tl-loader>
+          </div>
+          <span class="ui-loader-message">{{ loadingMessage }}</span>
+        </div>
+        <div class="nothing-shown" *ngIf="dataSource?.length === 0 && !loading">
           <span class="not-found-text">{{ notFound }}</span>
         </div>
         <ul #listGroup class="ui-permission-list" [style.display]="dataSource?.length > 0 ? 'block' : 'none'">
@@ -58,7 +64,13 @@
         </ul>
       </div>
       <div class="ui-permissions-detail-panel">
-        <div class="nothing-shown" *ngIf="!selected || dataSourceSelected?.length === 0">
+        <div class="ui-loader-wrapper" *ngIf="loading">
+          <div class="ui-loader">
+            <tl-loader></tl-loader>
+          </div>
+          <span class="ui-loader-message">{{ loadingMessage }}</span>
+        </div>
+        <div class="nothing-shown" *ngIf="(!selected || dataSourceSelected?.length === 0) && !loading">
           <i *ngIf="dataSourceSelected?.length !== 0 && !selected" class="ion-android-time"></i>
           <span *ngIf="dataSourceSelected?.length === 0" class="not-found-text">{{ notFound }}</span>
         </div>

diff --git a/projects/truly-ui/src/components/permissions/permissions.scss b/projects/truly-ui/src/components/permissions/permissions.scss
@@ -50,10 +50,31 @@
     }
     .not-found-text {
       font-size: 2em;
+      font-variant: all-petite-caps;
     }
   }
 }
 
+
+.ui-loader-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  place-content: center;
+  flex-flow: column;
+  .ui-loader {
+    width: 50px;
+    height: 50px;
+  }
+  .ui-loader-message {
+    font-size: 16px;
+    white-space: nowrap;
+    font-variant: all-petite-caps;
+  }
+}
+
+
 .ui-permissions-header {
   display: flex;
   > .ui-panel-search-1 {

diff --git a/projects/truly-ui/src/components/permissions/permissions.ts b/projects/truly-ui/src/components/permissions/permissions.ts
@@ -49,6 +49,8 @@ export class TlPermissions implements OnInit, AfterContentInit, AfterViewInit, O
 
   @Input() color = 'basic';
 
+  @Input() loading = false;
+
   @Input() keyGroup = 'description';
 
   @Input() keyPermissions = 'permissions';
@@ -85,6 +87,8 @@ export class TlPermissions implements OnInit, AfterContentInit, AfterViewInit, O
 
   public dataSourceSelected: any = [];
 
+  public loadingMessage = this.i18n.getLocale().Permissions.loadingMessage;
+
   public notFound = this.i18n.getLocale().Permissions.notFound;
 
   public searchGroup = this.i18n.getLocale().Permissions.searchGroup;