feat-loading-indicator (#7)

* nilima added loading-indicator attempt-1

* feat: loading-indicator

* feat: loading-indicator added overlay

* element overlay implemented

* thread resolved

* Style added

* Style added

* Style added for small loader

* thread resolved

* node version updated

---------

Co-authored-by: NilimaPradhan <[email protected]>

libs/portal-integration-angular/assets/styles.scss

@@ -8,3 +8,5 @@
 @import '../../../libs/portal-layout-styles/src/styles/shell/shell.scss';
 
 @import '../../../libs/portal-layout-styles/src/styles/primeng/theme-light.scss';
+
+@import '../../../libs/portal-integration-angular/src/lib/core/directives/loading-indicator.directive.scss';

libs/portal-integration-angular/src/index.ts

@@ -6,6 +6,7 @@ export * from './lib/core/directives/advanced.directive'
 export * from './lib/core/directives/basic.directive'
 export * from './lib/core/directives/patch-form-group-values.driective'
 export * from './lib/core/directives/set-input-value.directive'
+export * from './lib/core/directives/loading-indicator.directive'
 
 // components
 export * from './lib/core/components/loading/loading.component'
@@ -47,6 +48,7 @@ export * from './lib/core/components/custom-group-column-selector/custom-group-c
 export * from './lib/core/components/data-list-grid-sorting/data-list-grid-sorting.component'
 export * from './lib/core/components/group-by-count-diagram/group-by-count-diagram.component'
 export * from './lib/core/components/diagram/diagram.component'
+export * from './lib/core/components/loading-indicator/loading-indicator.component'
 
 // services
 export * from './lib/services/app.menu.service'

libs/portal-integration-angular/src/lib/core/components/loading-indicator/loading-indicator.component.html

@@ -0,0 +1,5 @@
+<div class="full-overlay">
+  <div class="overlay">
+    <span class="loader"></span>
+  </div>
+</div>

libs/portal-integration-angular/src/lib/core/components/loading-indicator/loading-indicator.component.scss

@@ -0,0 +1,20 @@
+.full-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+}

libs/portal-integration-angular/src/lib/core/components/loading-indicator/loading-indicator.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'ocx-loading-indicator',
+  templateUrl: './loading-indicator.component.html',
+  styleUrls: ['./loading-indicator.component.scss'],
+})
+
+export class LoadingIndicatorComponent {}

libs/portal-integration-angular/src/lib/core/directives/loading-indicator.directive.scss

@@ -0,0 +1,49 @@
+$overlay-bg-color: rgba(0, 0, 0, 0.5);
+$loader-border-bottom-color: transparent;
+
+/* You can add global styles to this file, and also import other style files */
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+.element-overlay {
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: $overlay-bg-color;
+		z-index: 1;
+	}
+	position: relative;
+	width: 100%;
+	cursor: default;
+	pointer-events: none;
+}
+.loader {
+	width: 28px;
+	height: 28px;
+	border: 3px solid var(--primary-color);
+	border-bottom-color: $loader-border-bottom-color;
+	border-radius: 50%;
+	display: inline-block;
+	box-sizing: border-box;
+	animation: rotation 1s linear infinite;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 2;
+	&.loader-small {
+		width: 20px;
+		height: 20px;
+		top: 20%;
+		left: 45%;
+	}
+}

libs/portal-integration-angular/src/lib/core/directives/loading-indicator.directive.ts

@@ -0,0 +1,62 @@
+import {
+  ComponentFactoryResolver,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  Input,
+  OnChanges,
+  Renderer2,
+  SimpleChanges,
+  ViewContainerRef,
+} from '@angular/core'
+import { LoadingIndicatorComponent } from '../components/loading-indicator/loading-indicator.component'
+
+@Directive({
+  selector: '[ocxLoadingIndicator]',
+})
+export class LoadingIndicatorDirective implements OnChanges {
+  @Input() ocxLoadingIndicator = false
+  @Input() overlayFullPage = false
+  @Input() isLoaderSmall? = false
+
+  private componentRef: ComponentRef<LoadingIndicatorComponent> | undefined
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['ocxLoadingIndicator'] || changes['overlayFullPage']) {
+      this.toggleLoadingIndicator()
+    }
+  }
+
+  private elementLoader() {
+    this.renderer.addClass(this.el.nativeElement, 'element-overlay')
+    const loaderElement = document.createElement('div')
+    loaderElement.className = 'loader'
+    if (this.isLoaderSmall) {
+      loaderElement.className = 'loader loader-small'
+    }
+    this.renderer.appendChild(this.el.nativeElement, loaderElement)
+  }
+
+  private toggleLoadingIndicator() {
+    if (this.ocxLoadingIndicator) {
+      if (this.overlayFullPage == false) {
+        this.elementLoader()
+      } else {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(LoadingIndicatorComponent)
+        this.componentRef = this.viewContainerRef.createComponent(factory)
+      }
+    } else {
+      this.viewContainerRef.clear()
+      if (this.componentRef) {
+        this.componentRef.destroy()
+      }
+    }
+  }
+}

libs/portal-integration-angular/src/lib/core/portal-core.module.ts

@@ -77,6 +77,8 @@ import { RelativeDatePipe } from './pipes/relative-date.pipe'
 import { MessageService } from 'primeng/api'
 import { PatchFormGroupValuesDirective } from './directives/patch-form-group-values.driective'
 import { SetInputValueDirective } from './directives/set-input-value.directive'
+import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component'
+import { LoadingIndicatorDirective } from './directives/loading-indicator.directive'
 import { DiagramComponent } from './components/diagram/diagram.component'
 import { GroupByCountDiagramComponent } from './components/group-by-count-diagram/group-by-count-diagram.component'
 
@@ -154,6 +156,8 @@ export class MyMissingTranslationHandler implements MissingTranslationHandler {
     ColumnGroupSelectionComponent,
     CustomGroupColumnSelectorComponent,
     SearchHeaderComponent,
+    LoadingIndicatorComponent,
+    LoadingIndicatorDirective,
     AdvancedDirective,
     BasicDirective,
     DataListGridSortingComponent,
@@ -215,6 +219,8 @@ export class MyMissingTranslationHandler implements MissingTranslationHandler {
     ColumnGroupSelectionComponent,
     CustomGroupColumnSelectorComponent,
     SearchHeaderComponent,
+    LoadingIndicatorComponent,
+    LoadingIndicatorDirective,
     AdvancedDirective,
     BasicDirective,
     RelativeDatePipe,

libs/portal-layout-styles/src/styles/shell/shell.scss

@@ -81,4 +81,5 @@
 @import './_input_styles';
 @import './_validation'; // control validation
 
+
 // TODO check the included files, remove those not needed, cleanup those that are required

package.json

@@ -2,7 +2,9 @@
   "name": "@onecx/onecx-portal-ui-libs",
   "version": "3.6.0",
   "license": "Apache-2.0",
-  "scripts": {},
+  "scripts": {
+    "sass": "npx sass libs/portal-integration-angular/assets/styles.scss libs/portal-integration-angular/assets/output.css"
+  },
   "private": true,
   "dependencies": {
     "@angular-architects/module-federation": "15.0.0",