ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.ts

   1 import {
   2   ComponentFactoryResolver,
   3   Directive,
   4   Input,
   5   TemplateRef,
   6   ViewContainerRef
   7 } from '@angular/core';
   8
   9 import { AlertPanelComponent } from '../components/alert-panel/alert-panel.component';
  10 import { LoadingPanelComponent } from '../components/loading-panel/loading-panel.component';
  11 import { LoadingStatus } from '../forms/cd-form';
  12
  13 @Directive({
  14   selector: '[cdFormLoading]'
  15 })
  16 export class FormLoadingDirective {
  17   constructor(
  18     private templateRef: TemplateRef<any>,
  19     private viewContainer: ViewContainerRef,
  20     private componentFactoryResolver: ComponentFactoryResolver
  21   ) {}
  22
  23   @Input('cdFormLoading') set cdFormLoading(condition: LoadingStatus) {
  24     let factory: any;
  25     let content: any;
  26
  27     this.viewContainer.clear();
  28
  29     switch (condition) {
  30       case LoadingStatus.Loading:
  31         factory = this.componentFactoryResolver.resolveComponentFactory(LoadingPanelComponent);
  32         content = this.resolveNgContent($localize`Loading form data...`);
  33         this.viewContainer.createComponent(factory, null, null, content);
  34         break;
  35       case LoadingStatus.Ready:
  36         this.viewContainer.createEmbeddedView(this.templateRef);
  37         break;
  38       case LoadingStatus.Error:
  39         factory = this.componentFactoryResolver.resolveComponentFactory(AlertPanelComponent);
  40         content = this.resolveNgContent($localize`Form data could not be loaded.`);
  41         const componentRef = this.viewContainer.createComponent(factory, null, null, content);
  42         (<AlertPanelComponent>componentRef.instance).type = 'error';
  43         break;
  44     }
  45   }
  46
  47   resolveNgContent(content: string) {
  48     const element = document.createTextNode(content);
  49     return [[element]];
  50   }
  51 }