@colijnit/sharedcomponents 1.0.55 → 1.0.56

package/projects/sharedcomponents/src/lib/components/screen-config-generator/screen-config-generator.component.ts

@@ -0,0 +1,539 @@
+import {Component, HostBinding, OnInit, ViewEncapsulation} from "@angular/core";
+import {Rubric} from "./models/Rubric";
+import {SubCat} from "./models/SubCat";
+import {Header} from "./models/Header";
+import {Field} from "./models/Field";
+import {FieldType} from "./enums/field-type.enum";
+import {SharedService} from "../../service/shared.service";
+import {Module} from "./models/Module";
+import {Config} from "./models/Config";
+import {SubRubric} from "./models/SubRubric";
+import {ConfigObject} from "@colijnit/sharedapi/build/model/config-object";
+
+@Component({
+  selector: "co-screen-config-generator",
+  template: `
+    <div class="tree-wrapper">
+      <h4 [textContent]="'Modules'"></h4>
+      <div class="tree-entry" *ngFor="let module of configData">
+        <span [textContent]="module.title" (click)="module.visible = module.visible === 'T' ? 'F' : 'T'"></span>
+        <div class="tree-entry level2" *ngFor="let config of module.configs">
+          <span [textContent]="config.title" *ngIf="module.visible === 'T'"
+                (click)="config.visible = config.visible === 'T' ? 'F' : 'T'"></span>
+          <div class="tree-entry level3" *ngFor="let rubric of config.rubrics">
+            <span [textContent]="rubric.title" *ngIf="config.visible === 'T'"
+                  (click)="rubric.visible = rubric.visible === 'T' ? 'F' : 'T'"></span>
+            <div class="tree-entry level4" *ngFor="let subTab of rubric.subCats">
+              <span [textContent]="subTab.title" *ngIf="rubric.visible === 'T'"
+                    (click)="subTab.visible = subTab.visible === 'T' ? 'F' : 'T'"></span>
+              <div class="tree-entry level5" *ngFor="let header of subTab.headers">
+                <span [textContent]="header.title" *ngIf="subTab.visible === 'T'"
+                      (click)="handleRubricClicked(rubric, config, module)"></span>
+              </div>
+            </div>
+            <div class="tree-entry level5" *ngFor="let header of rubric.headers">
+                <span [textContent]="header.title" *ngIf="rubric.visible === 'T'"
+                      (click)="handleRubricClicked(rubric, config, module)"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="category-wrapper">
+      <div class="header-wrapper">
+        <co-input-text [placeholder]="'Module name'" [(model)]="currentModule.title"></co-input-text>
+        <co-input-text [placeholder]="'Config name'" [(model)]="currentConfig.title"></co-input-text>
+        <co-input-text [placeholder]="'Module ID'" [(model)]="currentModule.moduleId"></co-input-text>
+        <co-input-text [placeholder]="'Config ID'" [(model)]="currentConfig.configId"></co-input-text>
+        <co-button label="SQL" (click)="copySQLProcedure()"></co-button>
+      </div>
+
+      <div class="header-wrapper">
+        <h3 [textContent]="'Screen configuration rubrics'"></h3>
+        <co-button label="ADD" (click)="addRubric()"></co-button>
+      </div>
+      <div class="rubrics-wrapper">
+        <div class="header-container" *ngFor="let rubric of currentConfig.rubrics; let rubricIndex = index">
+          <div class="rubric-wrapper">
+            <div class="inputs-wrapper">
+              <co-button label="DELETE" (click)="removeRubric(rubricIndex)"></co-button>
+              <br>
+              <co-input-text [placeholder]="'Rubric name'" [(model)]="rubric.title" [maxLength]="28"></co-input-text>
+              <co-input-text [placeholder]="'Unique ID'" [type]="'number'" [(model)]="rubric.categoryId"></co-input-text>
+            </div>
+            <div class="header-wrapper">
+              <h3 [textContent]="'Rubric sub tabs'"></h3>
+              <co-button label="ADD" (click)="addSubTab(rubricIndex)"></co-button>
+            </div>
+
+            <div class="header-container" *ngFor="let header of rubric.headers; let headerIndex = index">
+              <co-button label="DELETE" (click)="removeSubTab(rubricIndex, headerIndex)"></co-button>
+              <br>
+
+              <co-input-text [placeholder]="'Sub tab description'" [(model)]="header.title"
+                             [maxLength]="28"></co-input-text>
+              <div class="header-wrapper">
+                <h4 [textContent]="'Sub tab headers'"></h4>
+                <co-button label="ADD" (click)="addHeader(rubricIndex, headerIndex)"></co-button>
+              </div>
+
+              <div class="header-container" *ngFor="let subRubric of header.subRubrics; let subRubricIndex = index">
+                <co-button label="DELETE" (click)="removeHeader(rubricIndex, headerIndex, subRubricIndex)"></co-button>
+                <br>
+
+                <co-input-text [placeholder]="'Header description'" [(model)]="subRubric.description"
+                               [maxLength]="28"></co-input-text>
+                <div class="header-wrapper">
+                  <h5 [textContent]="'Header fields'"></h5>
+                  <co-button label="ADD" (click)="addField(rubricIndex, headerIndex, subRubricIndex)"></co-button>
+                </div>
+
+                <div class="fields-wrapper" *ngFor="let field of subRubric.fields; let fieldIndex = index">
+                  <co-input-text [placeholder]="'Field name'" [(model)]="field.name" [maxLength]="28"></co-input-text>
+                  <co-list-of-values [collection]="multiSelectValues" [(model)]="field.fieldType"
+                                     [displayField]="'name'" [label]="'Field type'"></co-list-of-values>
+                  <co-button label="DELETE"
+                             (click)="removeField(rubricIndex, headerIndex, subRubricIndex, fieldIndex)"></co-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class ScreenConfigGeneratorComponent implements OnInit {
+  public currentModule: Module = new Module();
+  public currentConfig: Config = new Config();
+  public configData: Module[] = [];
+  public idList: number[] = [];
+
+  public multiSelectValues: any[] = [
+    {name: 'Button', value: FieldType.K},
+    {name: 'LOV', value: FieldType.L},
+    {name: 'Date', value: FieldType.Date},
+    {name: 'Numeric', value: FieldType.N},
+    {name: 'Alphanumeric', value: FieldType.Alphanumeric},
+    {name: 'Yes/No', value: FieldType.J},
+    {name: 'Multi select', value: FieldType.MultiSelect}
+  ];
+
+  private _sqlProcedure: string = ``;
+
+  @HostBinding("class.co-screen-config-generator")
+  public showClass() {
+    return true;
+  }
+
+  constructor(
+    private _sharedService: SharedService
+  ) {
+  }
+
+  public ngOnInit() {
+    this._getScreenConfigData();
+  }
+
+  public addRubric(): void {
+    this.currentConfig.rubrics.push(new Rubric());
+  }
+
+  public removeRubric(rubricIndex: number): void {
+    this.currentConfig.rubrics.splice(rubricIndex, 1);
+  }
+
+  public addSubTab(index: number): void {
+    this.currentConfig.rubrics[index].headers.unshift(new Header());
+  }
+
+  public removeSubTab(rubricIndex: number, subTabIndex: number): void {
+    this.currentConfig.rubrics[rubricIndex].headers.splice(subTabIndex, 1);
+  }
+
+  public addHeader(rubricIndex: number, subTabIndex: number): void {
+    this.currentConfig.rubrics[rubricIndex].headers[subTabIndex].subRubrics.unshift(new SubRubric());
+  }
+
+  public removeHeader(rubricIndex: number, subTabIndex: number, headerIndex: number): void {
+    this.currentConfig.rubrics[rubricIndex].headers[subTabIndex].subRubrics.splice(headerIndex, 1);
+  }
+
+  public addField(rubricIndex: number, subTabIndex: number, headerIndex: number): void {
+    this.currentConfig.rubrics[rubricIndex].headers[subTabIndex].subRubrics[headerIndex].fields.unshift(new Field());
+  }
+
+  public removeField(rubricIndex: number, subTabIndex: number, headerIndex: number, fieldIndex: number): void {
+    this.currentConfig.rubrics[rubricIndex].headers[subTabIndex].subRubrics[headerIndex].fields.splice(fieldIndex, 1);
+  }
+
+  public copySQLProcedure(): void {
+    this._sqlProcedure = ``;
+    this._defineObjectNames();
+    this._createProcedurePrefix();
+    this._createIdSymbols();
+    this._createIdSymbols(false);
+    this._createScreenConfigRubrics();
+    this._createObjects();
+    this._createScreenConfigObjects();
+    this._createProcedureSuffix();
+    this._copyToClipboard(this._sqlProcedure);
+  }
+
+  private _createProcedurePrefix(): void {
+    this._sqlProcedure +=
+      `/**
+    *  ${this.currentModule.title} module screen config.
+    *  rubric start id: ${this.currentConfig.rubrics[0].categoryId}
+    *  object start id: ${+this.currentConfig.rubrics[0].categoryId + 1000}
+    */
+    PROCEDURE VUL_${this.currentModule.title.toUpperCase()}_JS IS
+    module scr_modules.module_id%type := ${this.currentModule.moduleId};
+    defaultConfig scr_config.config_id%type := ${this.currentConfig.configId}; \n
+   `;
+  }
+
+  private _createIdSymbols(rubricIDs: boolean = true): void {
+    this.currentConfig.rubrics.forEach((rubric: Rubric) => {
+
+      if (rubric.subCats.length > 0) {
+        rubric.subCats.forEach((subCat: SubCat) => {
+          this._sqlProcedure += `${subCat.name + (rubricIDs ? 'RubId' : '')}                      constant integer := ${this._getNextAvailableID(+rubric.categoryId)}; \n`;
+
+          subCat.headers.forEach((header: Header) => {
+            this._sqlProcedure += `${header.name + (rubricIDs ? 'RubId' : '')}                      constant integer := ${this._getNextAvailableID(+rubric.categoryId)}; \n`;
+
+            header.subRubrics.forEach((subRubric: SubRubric) => {
+              this._sqlProcedure += `${subRubric.name + (rubricIDs ? 'RubId' : '')}                      constant integer := ${this._getNextAvailableID(+rubric.categoryId)}; \n`;
+
+              if (!rubricIDs) {
+                subRubric.fields.forEach((field: Field) => {
+                  this._sqlProcedure += `${field.name}                      constant integer := ${this._getNextAvailableID(+rubric.categoryId)}; \n`;
+                })
+              }
+            })
+          })
+        });
+      } else {
+        rubric.headers.forEach((header: Header) => {
+          this._sqlProcedure += `${header.name + (rubricIDs ? 'RubId' : '')}                      constant integer := ${rubricIDs ? header.rubricId ? header.rubricId : this._getNextAvailableID(+rubric.categoryId) : header.cfgObjId ? header.cfgObjId : this._getNextAvailableID(+rubric.categoryId + 1000)}; \n`;
+
+          header.subRubrics.forEach((subRubric: SubRubric) => {
+            this._sqlProcedure += `${subRubric.name + (rubricIDs ? 'RubId' : '')}                      constant integer := ${rubricIDs ? subRubric.rubricId ? subRubric.rubricId : this._getNextAvailableID(+rubric.categoryId) : subRubric.cfgObjId ? subRubric.cfgObjId : this._getNextAvailableID(+rubric.categoryId + 1000)}; \n`;
+
+            if (!rubricIDs) {
+              subRubric.fields.forEach((field: Field) => {
+                this._sqlProcedure += `${field.name}                      constant integer := ${field.id ? field.id : this._getNextAvailableID(+rubric.categoryId + 1000)}; \n`;
+              })
+            }
+          })
+        });
+      }
+    });
+  }
+
+  private _createScreenConfigRubrics(): void {
+    this._sqlProcedure += `
+    BEGIN
+    P_VUL_SCHERM_CONFIG.UPSERT_SCR_MODULE(module, '${this.currentModule.title.toUpperCase()}', '${this.currentModule.title}', 'F', 'JS');
+    P_VUL_SCHERM_CONFIG.UPSERT_SCR_CONFIG(defaultConfig, '${this.currentConfig.title}', module); \n
+    `
+
+    this.currentConfig.rubrics.forEach((rubric: Rubric, index: number) => {
+      this._sqlProcedure += `P_VUL_SCHERM_CONFIG.UPSERT_SCR_SUB_CATEGORIEEN(${rubric.categoryId}, '${rubric.title}', null, module, ${index + 1}, '${rubric.title.toUpperCase()}'); \n\n`;
+
+      if (rubric.subCats.length > 0) {
+        rubric.subCats.forEach((subCat: SubCat) => {
+          this._sqlProcedure += `P_VUL_SCHERM_CONFIG.UPSERT_SCR_SUB_CATEGORIEEN(${subCat.id}, '${subCat.name}', ${rubric.categoryId}, module, ${index + 2}, '${rubric.title.toUpperCase()}'); \n\n`;
+
+          subCat.headers.forEach((header: Header) => {
+            this._sqlProcedure += `ADD_RUBRIEK_TAB(module, ${header.name}RubId, '${header.title}', ${header.name}); \n`;
+
+            header.subRubrics.forEach((subRubric: SubRubric) => {
+              this._sqlProcedure += `ADD_RUBRIEK_HEADER(module, ${subRubric.name}RubId, ${subRubric.name}RubId, '${subRubric.description}', ${subRubric.name}); \n`;
+            })
+          })
+        });
+      } else {
+        rubric.headers.forEach((header: Header) => {
+          this._sqlProcedure += `ADD_RUBRIEK_TAB(module, ${header.name}RubId, '${header.title}', ${header.name}); \n`;
+
+          header.subRubrics.forEach((subRubric: SubRubric) => {
+            this._sqlProcedure += `ADD_RUBRIEK_HEADER(module, ${subRubric.name}RubId, ${subRubric.name}RubId, '${subRubric.description}', ${subRubric.name}); \n`;
+          })
+        })
+      }
+    });
+  }
+
+  private _createObjects(): void {
+    this._sqlProcedure += `\n`;
+
+    this.currentConfig.rubrics.forEach((rubric: Rubric) => {
+
+      if (rubric.subCats.length > 0) {
+        // rubric.subCats.forEach((subCat: SubCat) => {
+        //   this._sqlProcedure += `ADD_OBJ_TAB(${subCat.name}RubId, ${subCat.name}, '${subCat.name}', '${subCat.title}'); \n`;
+        //
+        //   subCat.headers.forEach((header: Header) => {
+        //     this._sqlProcedure += `ADD_OBJ_HEADER(${subCat.name}RubId, ${header.name}, '${header.name}', '${header.description}', I_DATA_NAAM => '${header.description.toLowerCase()}'); \n`;
+        //
+        //     header.subRubrics.forEach((field: Field) => {
+        //       this._sqlProcedure += this._getFieldTypeSQL(field.fieldType.value, header, field);
+        //     })
+        //   })
+        // });
+      } else {
+        rubric.headers.forEach((header: Header) => {
+          this._sqlProcedure += `ADD_OBJ_TAB(${header.name}RubId, ${header.name}, '${header.name}', '${header.title}'); \n`;
+
+          header.subRubrics.forEach((subRubric: SubRubric) => {
+            this._sqlProcedure += `ADD_OBJ_HEADER(${subRubric.name}RubId, ${subRubric.name}, '${subRubric.name}', '${subRubric.description}', I_DATA_NAAM => '${subRubric.description.toLowerCase()}'); \n`;
+
+            subRubric.fields.forEach((field: Field) => {
+              if (field.fieldType) {
+                this._sqlProcedure += this._getFieldTypeSQL(field.fieldType.value, subRubric, field);
+              }
+            })
+          })
+        });
+      }
+    });
+  }
+
+  private _createScreenConfigObjects(): void {
+    this._sqlProcedure += `\n`;
+
+    this.currentConfig.rubrics.forEach((rubric: Rubric) => {
+
+      if (rubric.subCats.length > 0) {
+        // rubric.subCats.forEach((subTab: SubCat) => {
+        //   this._sqlProcedure += `ADD_CFG_OBJ_TAB(${subTab.name}, defaultConfig, '${rubric.name.toUpperCase()}'); \n`;
+        //
+        //   subTab.headers.forEach((header: Header) => {
+        //     this._sqlProcedure += `ADD_CFG_OBJ_HEADER(${header.name}, defaultConfig, '${rubric.name.toUpperCase()}'); \n`;
+        //
+        //     header.subRubrics.forEach((field: Field) => {
+        //       this._sqlProcedure += `ADD_CFG_OBJ_FIELD(${field.name}, defaultConfig, '${rubric.name.toUpperCase()}'); \n`;
+        //     })
+        //   })
+        // });
+      } else {
+        rubric.headers.forEach((header: Header) => {
+          this._sqlProcedure += `ADD_CFG_OBJ_TAB(${header.name}, defaultConfig, '${rubric.title.toUpperCase()}'); \n`;
+
+          header.subRubrics.forEach((subRubric: SubRubric) => {
+            this._sqlProcedure += `ADD_CFG_OBJ_HEADER(${subRubric.name}, defaultConfig, '${rubric.title.toUpperCase()}'); \n`;
+
+            subRubric.fields.forEach((field: Field) => {
+              this._sqlProcedure += `ADD_CFG_OBJ_FIELD(${field.name}, defaultConfig, '${rubric.title.toUpperCase()}'); \n`;
+            })
+          })
+        });
+      }
+    });
+  }
+
+  private _createProcedureSuffix(): void {
+    this._sqlProcedure += `
+    P_VUL_SCHERM_CONFIG_JS.CLEANUP_AFTER_ONE_CONFIG_FILL();
+    P_VUL_SCHERM_CONFIG_JS.CLEANUP_AFTER_FULL_MODULE_FILL();
+    END;`;
+  }
+
+  private _copyToClipboard(value: string): void {
+    const tempElement = document.createElement("textarea");
+    tempElement.value = value;
+    tempElement.setAttribute("readonly", "");
+    tempElement.style.position = "absolute";
+    tempElement.style.left = "-9999px";
+    document.body.appendChild(tempElement);
+    tempElement.select();
+    document.execCommand("copy");
+    document.body.removeChild(tempElement);
+  }
+
+  private _getFieldTypeSQL(fieldType: FieldType, subRubric: SubRubric, field: Field): string {
+    switch (fieldType) {
+      case FieldType.K:
+        return `ADD_OBJ_BUTTON_ELEMNT(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}');\n`;
+      case FieldType.L:
+        return `ADD_OBJ_LISTOFV_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}', null, I_DATA_NAAM => '${field.name}');\n`;
+      case FieldType.Date:
+        return `ADD_OBJ_DATEINP_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}', '${field.name}');\n`;
+      case FieldType.N:
+        return `ADD_OBJ_NUMERIC_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}', '${field.name}');\n`;
+      case FieldType.Alphanumeric:
+        return `ADD_OBJ_ALFANUM_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}');\n`;
+      case FieldType.J:
+        return `ADD_OBJ_YESORNO_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}', '${field.name}');\n`;
+      case FieldType.MultiSelect:
+        return `ADD_OBJ_MULTISL_FIELD(${subRubric.name}RubId, ${field.name}, '${field.name}', '${field.description}', null, I_DATA_NAAM => '${field.name}');\n`;
+    }
+  }
+
+  private _getNextAvailableID(startingFrom: number): number {
+    const sortedNumbers: number[] = this.idList.slice().sort((a, b) => a - b);
+    let nextLowestValue: number = startingFrom + 1;
+
+    for (let i = 1; i < sortedNumbers.length; i++) {
+        if (sortedNumbers[i] > nextLowestValue) {
+          this.idList.push(nextLowestValue);
+          return nextLowestValue;
+        } else if (sortedNumbers[i] === nextLowestValue) {
+          nextLowestValue++;
+        }
+    }
+
+    this.idList.push(nextLowestValue);
+    return nextLowestValue;
+  }
+
+  private async _getScreenConfigData(): Promise<void> {
+    const data: any = await this._sharedService.getScreenConfigTree();
+    if (data) {
+      data.forEach((obj) => {
+        if (obj.nodeLevel !== 1) {
+          obj.visible = 'F';
+        }
+      });
+      this._parseRawScreenConfigData(data);
+    }
+  }
+
+  private _parseRawScreenConfigData(data: any): void {
+    const modulesMap: Map<number, Module> = new Map();
+    const configsMap: Map<number, Config> = new Map();
+    let currentRubric: Rubric | null = null;
+
+    for (const item of data) {
+      switch (item.nodeLevel) {
+        case 1:
+          const module = Object.assign(new Module(), item);
+          module.configs = [];
+          modulesMap.set(item.moduleId, module);
+          break;
+        case 2:
+          const config = Object.assign(new Config(), item);
+          config.rubrics = [];
+          configsMap.set(item.configId, config);
+
+          const moduleParent = modulesMap.get(item.moduleId);
+          if (moduleParent) {
+            config.moduleName = moduleParent.title;
+            moduleParent.configs.push(config);
+          }
+          break;
+        case 3:
+          currentRubric = Object.assign(new Rubric(), item);
+          currentRubric.name = currentRubric.title.toLowerCase()
+            .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+          currentRubric.subCats = [];
+          currentRubric.headers = [];
+          const configParent = configsMap.get(item.configId);
+          if (configParent) {
+            configParent.rubrics.push(currentRubric);
+          }
+          break;
+        case 4:
+          const subTab = Object.assign(new SubCat(), item);
+          subTab.headers = [];
+          currentRubric?.subCats.push(subTab);
+          break;
+        case 5:
+          const header = Object.assign(new Header(), item);
+          this.idList.push(header.cfgObjId);
+          this.idList.push(header.rubricId);
+          header.subRubrics = [];
+          header.name = header.title.toLowerCase()
+            .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+          if (currentRubric) {
+            if (currentRubric.subCats.length > 0) {
+              currentRubric.subCats[currentRubric.subCats.length - 1]?.headers.push(header);
+            } else {
+              currentRubric.headers.push(header);
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    this.configData = Array.from(modulesMap.values());
+  }
+
+  private async getScreenConfigSubRubric(parentRubricId: number, configId: number, fixedKey: string): Promise<any> {
+    return await this._sharedService.getScreenConfigSubRubric(parentRubricId, configId, fixedKey);
+  }
+
+  public handleRubricClicked(rubric: Rubric, config: Config, module: Module): void {
+    this.currentModule = module;
+    this.currentConfig = config;
+    if (rubric.subCats.length > 0) {
+      rubric.subCats.forEach((subTab: SubCat) => {
+        subTab.headers.forEach((header: Header) => {
+          this.getScreenConfigSubRubric(header.rubricId, header.configId, header.fixedKey).then((data: any) => {
+            this._parseRawSubTabData(header, data);
+          });
+        });
+      });
+    } else {
+      rubric.headers.forEach((header: Header) => {
+        this.getScreenConfigSubRubric(header.rubricId, header.configId, header.fixedKey).then((data: any) => {
+          this._parseRawSubTabData(header, data);
+        });
+      });
+    }
+  }
+
+  private _parseRawSubTabData(header: Header, data: any): void {
+    header.subRubrics = [];
+    data.forEach((rawHeader: any, index: number) => {
+      if (rawHeader.description !== header.title) {
+        const subRubric: SubRubric = Object.assign(new SubRubric(), data[index]);
+        this.idList.push(subRubric.cfgObjId);
+        subRubric.name = subRubric.description.toLowerCase()
+          .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+
+        rawHeader.configObjects.forEach((configObject: ConfigObject) => {
+          const field: Field = new Field();
+          this.idList.push(configObject.objectId);
+          field.name = configObject.configName;
+          field.id = configObject.objectId;
+          field.description = field.name.replace(/([A-Z])/g, '_$1').toUpperCase();
+          field.fieldType = this.multiSelectValues.find(obj => obj.value == configObject.valueType);
+          field.fieldType = field.fieldType === undefined ? this.multiSelectValues.find(obj => obj.value == configObject.typeConfig) : field.fieldType;
+          subRubric.fields.push(field);
+        });
+
+        header.subRubrics.push(subRubric);
+      }
+    });
+  }
+
+  private _defineObjectNames(): void {
+    this.currentConfig.rubrics.forEach((rubric: Rubric) => {
+      rubric.headers.forEach((header: Header) => {
+        if (!header.name) {
+          header.name = header.title.toLowerCase()
+            .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+
+          header.subRubrics.forEach((subRubric: SubRubric) => {
+            if (!subRubric.name) {
+              subRubric.name = subRubric.description.toLowerCase()
+                .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+
+              subRubric.fields.forEach((field: Field) => {
+                if (!field.description) {
+                  field.description = field.name.replace(/([A-Z])/g, '_$1').toUpperCase();
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+}

package/projects/sharedcomponents/src/lib/components/screen-config-generator/screen-config-generator.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ScreenConfigGeneratorComponent} from "./screen-config-generator.component";
+import {ButtonModule, InputTextModule, ListOfValuesModule} from "@colijnit/corecomponents_v12";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        InputTextModule,
+        ButtonModule,
+        ListOfValuesModule
+    ],
+  declarations: [
+    ScreenConfigGeneratorComponent
+  ],
+  exports: [
+    ScreenConfigGeneratorComponent
+  ]
+})
+export class ScreenConfigGeneratorModule {
+}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/components/layout-selection/layout-selection.component.ts

@@ -0,0 +1,91 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {ReportLayoutSelectionBase} from '@colijnit/mainapi/build/model/report-layout-selection-base.bo';
+import {ReportingDocumentBaseRequest} from '@colijnit/mainapi/build/model/reporting-document-base-request';
+import {Icon} from "../../../../enum/icon.enum";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Component({
+  selector: 'co-layout-selection',
+  template: `
+    <div class="layout-selection-wrapper" (click)="showLayoutList = !showLayoutList">
+      <div class="title" [textContent]="'Lay-out'"></div>
+      <div class="layout-description" [textContent]="currentLayout?.description || 'Layout kiezen'"></div>
+    </div>
+    <div class="layouts-wrapper co-small-scrollbar" *ngIf="showLayoutList" @showHideLayouts>
+      <div class="layouts-wrapper-header">
+        <div class="title" [textContent]="'Lay-out'"></div>
+        <div class="close-layouts">
+          <div class="dialog-close-button" (click)="closeSelectLayout()">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.XSolid)"></co-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="layout-selection-wrapper" *ngFor="let reportLayout of layouts"
+           [class.selected]="reportLayout.reportId === currentLayout?.reportId"
+           (click)="handleSelectLayout(reportLayout)">
+        <div class="layout-description" [textContent]="reportLayout.description"></div>
+      </div>
+    </div>
+  `,
+  animations: [
+    trigger("showHideLayouts", [
+      state("void", style({height: 0})),
+      state("*", style({height: "100%"})),
+      transition("void => *", animate("200ms ease-in-out")),
+      transition("* => void", animate("200ms ease-out"))
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class LayoutSelectionComponent implements OnInit {
+  public readonly icons: typeof Icon = Icon;
+  @Input()
+  public request: ReportingDocumentBaseRequest;
+
+  @Input()
+  public layouts: ReportLayoutSelectionBase[] = [];
+
+  @Output()
+  public requestChange: EventEmitter<ReportingDocumentBaseRequest> = new EventEmitter<ReportingDocumentBaseRequest>();
+
+  @HostBinding('class.co-layout-selection')
+  public showClass() {
+    return true;
+  }
+
+  public currentLayout: ReportLayoutSelectionBase;
+  public showLayoutList: boolean = false;
+  constructor(
+    public iconCacheService: IconCacheService
+  ) {
+  }
+  ngOnInit(): void {
+    if (this.layouts && this.layouts.length > 0) {
+      this.currentLayout = this.layouts.find(l => l.reportId === this.request.reportId);
+      if (!this.currentLayout) {
+        this.currentLayout = this.layouts[0];
+      }
+    }
+  }
+
+  public handleSelectLayout(reportLayout: ReportLayoutSelectionBase): void {
+    this.currentLayout = reportLayout;
+    this.request.reportId = this.currentLayout.reportId;
+    this.requestChange.emit(this.request);
+    this.showLayoutList = false;
+  }
+  public closeSelectLayout(): void {
+    this.showLayoutList = false;
+  }
+}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/components/layout-selection/layout-selection.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LayoutSelectionComponent} from './layout-selection.component';
+import {IconModule} from "@colijnit/corecomponents_v12";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        IconModule
+    ],
+  declarations: [
+    LayoutSelectionComponent
+  ],
+  exports: [
+    LayoutSelectionComponent
+  ]
+})
+export class LayoutSelectionModule {
+}