All files / app/form/template template.component.ts

83.87% Statements 26/31
55.55% Branches 10/18
81.81% Functions 9/11
82.14% Lines 23/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 9780x                         80x 80x                   80x         1x   1x   1x   1x 1x 1x 1x 1x 1x     1x       1x 1x 1x       1x       2x       2x       2x       2x                                     1x                
import { NgTemplateOutlet } from '@angular/common';
import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
import {
  ReactiveFormsModule,
  UntypedFormBuilder,
  UntypedFormControl,
  UntypedFormGroup,
  Validators
} from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { cloneDeep } from 'lodash-es';
import { v4 as uuid } from 'uuid';
import { AdminService } from '../../service/admin.service';
import { AdminConfigComponent } from '../admin-config/admin-config.component';
import { JsonComponent } from '../json/json.component';
 
@Component({
  selector: 'app-template-form',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.scss'],
  host: { 'class': 'nested-form' },
  changeDetection: ChangeDetectionStrategy.Eager,
  imports: [ReactiveFormsModule, JsonComponent, AdminConfigComponent, NgTemplateOutlet]
})
export class TemplateFormComponentI implements OnInit {
 
  @Input()
  group!: UntypedFormGroup;
  @Input()
  configErrors: string[] = [];
  @Input()
  defaultsErrors: string[] = [];
  @Input()
  schemaErrors: string[] = [];
 
  id = 'template-' + uuid();
  editingConfig = false;
  editingDefaults = false;
  editingSchema = false;
  adminForm: FormlyFieldConfig[] = [];
  advancedAdminForm: FormlyFieldConfig[] = [];
 
  constructor(
    private admin: AdminService,
  ) { }
 
  ngOnInit() {
    const tag = this.tag?.value || '';
    this.adminForm = cloneDeep(this.admin.getTemplateAdminForm(tag, 'adminForm'));
    this.advancedAdminForm = cloneDeep(this.admin.getTemplateAdminForm(tag, 'advancedAdminForm'));
  }
 
  get tag() {
    return this.group.get('tag') as UntypedFormControl;
  }
 
  get name() {
    return this.group.get('name') as UntypedFormControl;
  }
 
  get config() {
    return this.editingConfig ||= this.group.get('config')?.value;
  }
 
  get defaults() {
    return this.editingDefaults ||= this.group.get('defaults')?.value;
  }
 
  get schema() {
    return this.editingSchema ||= this.group.get('schema')?.value;
  }
 
  get jsonErrors() {
    return !!(this.configErrors.length || this.defaultsErrors.length || this.schemaErrors.length);
  }
 
  validate(input: HTMLInputElement) {
    if (this.name.touched) {
      if (this.name.errors?.['required']) {
        input.setCustomValidity($localize`Name must not be blank.`);
        input.reportValidity();
      }
    }
  }
 
}
 
export function templateForm(fb: UntypedFormBuilder) {
  return fb.group({
    tag: [{value: '', disabled: true}, [Validators.required]],
    name: ['', [Validators.required]],
    config: [],
    defaults: [],
    schema: [],
  });
}