ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/forms/crud-form/crud-form.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2 import { ActivatedRoute, Router } from '@angular/router';
   3 import { DataGatewayService } from '~/app/shared/services/data-gateway.service';
   4 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
   5 import { FinishedTask } from '~/app/shared/models/finished-task';
   6 import { Location } from '@angular/common';
   7 import { FormGroup } from '@angular/forms';
   8 import { mergeMap } from 'rxjs/operators';
   9 import { CrudTaskInfo, JsonFormUISchema } from './crud-form.model';
  10 import { Observable } from 'rxjs';
  11 import _ from 'lodash';
  12 import { CdTableSelection } from '../../models/cd-table-selection';
  13
  14 @Component({
  15   selector: 'cd-crud-form',
  16   templateUrl: './crud-form.component.html',
  17   styleUrls: ['./crud-form.component.scss']
  18 })
  19 export class CrudFormComponent implements OnInit {
  20   model: any = {};
  21   resource: string;
  22   task: { message: string; id: string } = { message: '', id: '' };
  23   form = new FormGroup({});
  24   formUISchema$: Observable<JsonFormUISchema>;
  25   methodType: string;
  26   urlFormName: string;
  27   key: string = '';
  28   selected: CdTableSelection;
  29
  30   constructor(
  31     private dataGatewayService: DataGatewayService,
  32     private activatedRoute: ActivatedRoute,
  33     private taskWrapper: TaskWrapperService,
  34     private location: Location,
  35     private router: Router
  36   ) {}
  37
  38   ngOnInit(): void {
  39     this.activatedRoute.queryParamMap.subscribe((paramMap) => {
  40       this.formUISchema$ = this.activatedRoute.data.pipe(
  41         mergeMap((data: any) => {
  42           this.resource = data.resource || this.resource;
  43           const url = '/' + this.activatedRoute.snapshot.url.join('/');
  44           const key = paramMap.get('key') || '';
  45           return this.dataGatewayService.form(`ui-${this.resource}`, url, key);
  46         })
  47       );
  48       this.formUISchema$.subscribe((data: any) => {
  49         this.methodType = data.methodType;
  50         this.model = data.model;
  51       });
  52       this.urlFormName = this.router.url.split('/').pop();
  53       // remove optional arguments
  54       const paramIndex = this.urlFormName.indexOf('?');
  55       if (paramIndex > 0) {
  56         this.urlFormName = this.urlFormName.substring(0, paramIndex);
  57       }
  58     });
  59   }
  60
  61   async readFileAsText(file: File): Promise<string> {
  62     let fileReader = new FileReader();
  63     let text: string = '';
  64     await new Promise((resolve) => {
  65       fileReader.onload = (_) => {
  66         text = fileReader.result.toString();
  67         resolve(true);
  68       };
  69       fileReader.readAsText(file);
  70     });
  71     return text;
  72   }
  73
  74   async preSubmit(data: { [name: string]: any }) {
  75     for (const [key, value] of Object.entries(data)) {
  76       if (value instanceof FileList) {
  77         let file = value[0];
  78         let text = await this.readFileAsText(file);
  79         data[key] = text;
  80       }
  81     }
  82   }
  83
  84   async submit(data: { [name: string]: any }, taskInfo: CrudTaskInfo) {
  85     if (data) {
  86       let taskMetadata = {};
  87       _.forEach(taskInfo.metadataFields, (field) => {
  88         taskMetadata[field] = data[field];
  89       });
  90       taskMetadata['__message'] = taskInfo.message;
  91       await this.preSubmit(data);
  92       this.taskWrapper
  93         .wrapTaskAroundCall({
  94           task: new FinishedTask(`crud-component/${this.urlFormName}`, taskMetadata),
  95           call: this.dataGatewayService.submit(this.resource, data, this.methodType)
  96         })
  97         .subscribe({
  98           complete: () => {
  99             this.location.back();
 100           }
 101         });
 102     }
 103   }
 104 }