nuxeo-development-framework 5.6.3 → 5.6.4

package/src/lib/components/dynamic-form/components/dynamic-form/dynamic-form.component.ts

@@ -0,0 +1,109 @@
+import {
+  Component, EventEmitter, Input, OnChanges,
+  OnDestroy,
+  OnInit,
+  Output, ViewEncapsulation
+} from '@angular/core';
+import { FormBuilderService } from './form-builder.service';
+import { TranslateService } from '@ngx-translate/core';
+import { Utils } from 'formiojs';
+import { Subscription } from 'rxjs';
+
+/** @ignore */
+
+@Component({
+  selector: 'app-dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  styleUrls: ['./dynamic-form.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DynamicFormComponent implements OnChanges, OnInit, OnDestroy {
+  @Input()
+  form: any = {};
+  @Input()
+  data: any = null;
+  @Input()
+  readOnly = false;
+  @Output()
+  change = new EventEmitter();
+  submission = {};
+  translations: {};
+  // tslint:disable-next-line:no-output-native
+  renderOptions = {};
+  refresher = new EventEmitter();
+  langSubscription: Subscription;
+
+  constructor(private formBuilderServic: FormBuilderService, public translate: TranslateService) { }
+
+
+
+  ngOnInit(): void {
+    this.langSubscription = this.translate.onLangChange.subscribe(event => {
+      this.refresher.emit(event.lang);
+    });
+  }
+  ngOnChanges(changes) {
+    if (this.data) {
+      this.submission = {
+        data: this.formBuilderServic.adaptInDynamicFields(this.data)
+      }
+    }
+
+    const translations = {};
+    const translationsAr = {};
+    Utils.eachComponent(this.form.components, (comp) => {
+      translations[comp.label] = comp.label;
+      translations[comp.description] = comp.description;
+      translations[comp.tooltip] = comp.tooltip;
+      translationsAr[comp.label] = comp.labelAr;
+      translationsAr[comp.description] = comp.descriptionAr;
+      translationsAr[comp.tooltip] = comp.tooltipAr;
+    });
+    this.renderOptions = {
+
+      language: this.translate.currentLang,
+      i18n: {
+        ar: translationsAr,
+        en: translations
+      }
+    };
+  }
+
+  filterNullValues(formValue) {
+    const filtered = {};
+    for (let key in formValue) {
+      if (formValue[key]) {
+        filtered[key] = formValue[key];
+      }
+    }
+    return filtered;
+  }
+
+  ngOnDestroy() {
+    this.langSubscription ? this.langSubscription.unsubscribe() : '';
+  }
+  excuteFunction(event) {
+    // this.FormBuilderService.adaptOutDynamicFields(formChange.data);
+    // let data = event.data;
+    // let p = this.formBuilderServic.myPrefix;
+    // let myAdaptedData = {};
+    // // for ( let key in data){
+    // //   data[this.formBuilderServic.myPrefix + key] = data[key];
+    // //   delete data[key];
+    // // }
+    // Object.keys({...data}).map(key => {
+    //   myAdaptedData[p + ':' + key] = data[key];
+    // })
+    // this.change.emit(myAdaptedData);
+
+    if (event.data) {
+      let myformValue = {
+        valid: event.isValid,
+        data: this.formBuilderServic.adaptOutDynamicFields(event.data),
+        originalEvent: event
+      }
+      let body = this.filterNullValues(myformValue);
+      this.change.emit(body)
+    }
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form/fields.adapter.ts

@@ -0,0 +1,123 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FieldsAdapterService {
+
+  /* this.builderComponents = {
+     VOC_CorrespondenceCategory: {
+       title: 'Category',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondenceCategory',
+         label: 'Category',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondenceCategory',
+         input: true
+       }
+     },
+     VOC_CorrespondenceClass: {
+       title: 'Correspondence Class',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondenceClass',
+         label: 'Correspondence Class',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondenceClass',
+         input: true
+       }
+     },
+     VOC_CorrespondenceClassfication: {
+       title: 'Correspondence Classfication',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondenceClassfication',
+         label: 'Correspondence Classfication',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondenceClassfication',
+         input: true
+       }
+     },
+     VOC_CorrespondenceDeliveryType: {
+       title: 'Correspondence Delivery Type',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondenceDeliveryType',
+         label: 'Correspondence Delivery Type',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondenceDeliveryType',
+         input: true
+       }
+     },
+     VOC_CorrespondencePriority: {
+       title: 'Correspondence Priority',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondencePriority',
+         label: 'Correspondence Priority',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondencePriority',
+         input: true
+       }
+     },
+     VOC_CorrespondenceSecrecyLevel: {
+       title: 'Correspondence Secrecy Level',
+       icon: 'terminal',
+       schema: {
+         'customOptions.vocId': 'VOC_CorrespondenceSecrecyLevel',
+         label: 'Correspondence Secrecy Level',
+         type: 'vocabulary',
+         fixedKey: 'VOC_CorrespondenceSecrecyLevel',
+         input: true
+       }
+     }
+   };*/
+  adapt(fields): any {
+    const builderComponents = {};
+    fields = Object.keys(fields).map(fieldKey => {
+      const constraints = fields[fieldKey].constraints ? fields[fieldKey].constraints : [];
+      const vocabularySearch = constraints.filter(item => item.name === 'directoryResolver');
+      const vocabulary = vocabularySearch.length ? vocabularySearch[0].parameters.directory : null;
+      const adaptedField = {
+        title: fieldKey,
+        icon: 'terminal',
+        schema: {
+          // 'validate.required': constraints.filter(item => item.name === 'NotNullConstraint').length > 0,
+          label: fieldKey,
+          type: '',
+          fixedKey: fieldKey,
+          input: true
+        }
+      };
+
+      switch (fields[fieldKey].type) {
+        case 'string':
+          adaptedField.schema.type = 'textfield';
+          if (vocabulary) {
+            adaptedField.schema.type = 'vocabulary';
+            adaptedField.schema['customOptions.vocId'] = vocabulary;
+          }
+          break;
+        case 'boolean':
+          adaptedField.schema.type = 'toggle';
+          break;
+        case 'string[]':
+          adaptedField.schema.type = 'textfield';
+          // tslint:disable-next-line:no-string-literal
+          adaptedField.schema['multiple'] = true;
+          break;
+        case 'long':
+          adaptedField.schema.type = 'number';
+          break;
+        case 'date':
+          adaptedField.schema.type = 'customdate';
+      }
+      return adaptedField;
+    });
+    fields.forEach(field => {
+      builderComponents[field.schema.fixedKey] = field;
+    });
+    return builderComponents;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form/form-builder.service.ts

@@ -0,0 +1,120 @@
+import { Inject, Injectable } from '@angular/core';
+import { from, Observable } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+import { AppConfigService } from '../../../../configuration/app-config.service';
+import { NuxeoService } from '../../../../core/services/nuxeo/nuxeo.service';
+import { FieldsAdapterService } from './fields.adapter';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class FormBuilderService {
+  dynamicFieldsOperations;
+  myPrefix = '';
+  constructor(
+    private nuxeoService: NuxeoService,
+    private configService: AppConfigService,
+    private fieldsAdapter: FieldsAdapterService, @Inject('environment') private environment) {
+
+    this.dynamicFieldsOperations = this.configService.myConfiguration.dynamicForms.operations;
+  }
+
+  // getSchema(schema): Observable<any> {
+  //   return from(this.nuxeoService.nuxeoClient.request(`/config/schemas/${schema}`)
+  //     .get({
+  //       headers: {
+  //         'fetch.schema': 'fields'
+  //       }
+  //     })).pipe(
+  //       map((data: any) => this.fieldsAdapter.adapt(data.fields))
+  //     );
+  // }
+
+  getSchemaComponents(type){
+    return from(this.nuxeoService.nuxeoClient.request(`config/facets/${type}`)
+    .get({
+      headers: {
+        'fetch.schema': 'fields'
+      }
+    })).pipe(
+      map((data: any) => {
+        this.myPrefix = data.schemas[0].prefix;
+        return this.fieldsAdapter.adapt(data.schemas[0].fields)
+      })
+    );
+  }
+
+    createFormJson(type , jsonObject){
+      jsonObject['prefix']=this.myPrefix;
+      return from(
+        this.nuxeoService.nuxeoClient
+          .operation(this.dynamicFieldsOperations.createFormApi ? this.dynamicFieldsOperations.createFormApi : 'AC_UA_DynamicForm_Create', {
+            url: `${this.environment.nuxeo}${this.environment.customAutomation}`,
+          })
+          .context({
+            "schema":type,
+            "json":jsonObject
+          })
+          .execute()
+      ).pipe(
+        catchError((err) => {
+          console.log(err);
+          throw err;
+        }))
+    
+  }
+
+    getDynamicForm(type) {
+      return from(
+        this.nuxeoService.nuxeoClient
+          .operation(this.dynamicFieldsOperations.getFormJson, {
+            url: `${this.environment.nuxeo}${this.environment.customAutomation}`,
+          })
+          .context({
+            "schema": type
+          })
+          .execute({
+            headers: {
+              properties: '*',
+            },
+          })
+      ).pipe(
+        map((res : any) => {
+          if(res.entries.length > 0){
+            let myData =  JSON.parse(res['entries'][0]['properties']['note:note']);
+            this.myPrefix = myData.prefix;
+            return myData;
+          }else{
+            return '';
+          }
+        }),
+        catchError((err) => {
+          console.log(err);
+          throw err;
+        })
+      );
+    }
+
+    adaptOutDynamicFields(data) {
+      let myAdaptedData = {};
+
+      Object.keys({...data}).map(key => {
+        myAdaptedData[this.myPrefix + ':' + key] = data[key];
+      })
+
+      return myAdaptedData;
+    }
+    
+    adaptInDynamicFields(data) {
+      let myAdaptedData = {};
+
+      Object.keys({...data}).map(key => {
+        if(key.includes(this.myPrefix + ':')){
+          myAdaptedData[key.replace(this.myPrefix+':','')] = data[key];
+        }
+      })
+
+      return myAdaptedData;
+    }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-boolitem/dynamic-form-boolitem.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="!property.isEmpty() || isEditable()">
+  <div class="row gap">
+
+    <label class="col-sm-3" for="formGroupInputSmall">{{
+      property.label | translate
+      }}<span *ngIf="property.mandatory" class="text-danger">*</span></label>
+    <div class="col-sm-9">
+      <mat-checkbox [required]="property.mandatory" [attr.data-automation-id]="'card-boolean-' + property.key"
+        [attr.title]="'CORE.METADATA.ACTIONS.TOGGLE' | translate" [checked]="property.displayValue"
+        [disabled]="!isEditable()" (change)="changed($event)">
+      </mat-checkbox>
+    </div>
+  </div>
+</ng-container>

package/src/lib/components/dynamic-form/components/dynamic-form-boolitem/dynamic-form-boolitem.component.scss

@@ -0,0 +1,2 @@
+.app {
+}

package/src/lib/components/dynamic-form/components/dynamic-form-boolitem/dynamic-form-boolitem.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { DynamicFormUpdateService } from '../../services/dynamic-form-update.service';
+import { DynamicFormBoolItemModel } from '../../models/dynamic-form.models';
+import { TranslateService } from '@ngx-translate/core';
+
+/** @ignore */
+
+@Component({
+  selector: 'app-dynamic-form-boolitem',
+  templateUrl: './dynamic-form-boolitem.component.html',
+  styleUrls: ['./dynamic-form-boolitem.component.scss']
+})
+export class DynamicFormBoolItemComponent {
+  @Input()
+  property: DynamicFormBoolItemModel;
+
+  @Input()
+  editable: boolean;
+
+  constructor(
+    private dynamicFormUpdateService: DynamicFormUpdateService,
+    public translate: TranslateService
+  ) {}
+
+  isEditable() {
+    return this.editable && this.property.editable;
+  }
+
+  changed(change: MatCheckboxChange) {
+    //this.dynamicFormUpdateService.update(this.property, change.checked);
+    //this.property.value = change.checked;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-builder/dynamic-form-builder.component.html

@@ -0,0 +1,15 @@
+<div class="container-fluid" dir="ltr">
+  <form-builder [form]="form" [options]="builderOptions" [rebuild]="refresher" (change)="onChange($event)"></form-builder>
+  <!-- <button class="save-form" (click)="save()">SAVE</button> -->
+  <div class="mx-2 save-form">
+    <cts-button
+    [loading]="saving"
+    [theme]="'primary'"
+    [size]="'regular'"
+    (onClick)="save()"
+    
+  >
+    {{ "BUTTONS.SAVE" | translate }}
+  </cts-button>
+  </div>
+</div>

package/src/lib/components/dynamic-form/components/dynamic-form-builder/dynamic-form-builder.component.scss

@@ -0,0 +1,73 @@
+.formio-dialog {
+  direction: ltr;
+  text-align: left;
+  .card-title {
+    border: 0px !important;
+  }
+}
+
+.builder {
+  text-align: left;
+  div[ref="copyComponent"],
+  div[ref="pasteComponent"],
+  div[ref="editJson"] {
+    display: none;
+    visibility: hidden;
+  }
+  .formarea {
+    flex: 0 0 75%;
+    .formio-component {
+      .formio-form {
+        .builder-component {
+          .form-group {
+            label {
+              color: #646f85;
+              font-size: 13px;
+            }
+            input {
+              border: 1px solid #ccc;
+              border-radius: 5px;
+              background-color: rgba(143, 152, 170, 0.1);
+              height: 40px;
+            }
+          }
+          .formio-component-vocabulary {
+            input {
+              border: none;
+              background: no-repeat;
+              height: 40px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .formcomponents {
+    flex: 0 0 25%;
+    max-width: 25%;
+    .builder-sidebar {
+      input {
+      }
+      .form-builder-panel {
+        .show {
+          .card-body {
+            width: 80%;
+            .formcomponent {
+              width: 100%;
+              overflow: hidden;
+              white-space: nowrap !important;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.container-fluid {
+  .save-form {
+    margin-top: 15px;
+    width: 200px;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-builder/dynamic-form-builder.component.ts

@@ -0,0 +1,161 @@
+import {
+  Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewEncapsulation
+} from '@angular/core';
+import { Components, FormBuilderComponent } from 'angular-formio';
+import { Utils } from 'formiojs';
+import { cloneDeep } from 'lodash';
+import { baseEditForm } from '../form-wrappers/base-edit-form/base-edit-form';
+@Component({
+  selector: 'app-dynamic-form-builder',
+  templateUrl: './dynamic-form-builder.component.html',
+  styleUrls: ['./dynamic-form-builder.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DynamicFormBuilderComponent implements OnChanges, OnInit {
+  @ViewChild('json') jsonElement?: ElementRef;
+  @Input()
+  form: any = {};
+  @Input()
+  builder: any = {};
+  @Input()
+  builderComponents = {};
+  @Output()
+  formUpdated = new EventEmitter();
+  saving = false;
+  @ViewChild(FormBuilderComponent, { static: false }) FormBuilderComponent: FormBuilderComponent;
+  builderOptions = {
+    noDefaultSubmitButton: true,
+    builder: {
+      basic: false,
+      advanced: false,
+      data: false,
+      premium: false,
+      layout: {
+        components: {
+          htmlelement: false,
+          content: false
+        }
+      },
+      customBasic: {
+        title: 'Basic Components',
+        default: true,
+        weight: 0,
+        components: {}
+      }
+    },
+    editForm: {
+      textfield: [
+
+        {
+          key: 'api',
+          ignore: true
+        },
+        {
+          key: 'logic',
+          ignore: true
+        },
+        {
+          key: 'layout',
+          ignore: true
+        }
+      ],
+      number: [
+        {
+          key: 'display'
+        },
+        {
+          key: 'api',
+          ignore: true
+        },
+        {
+          key: 'logic',
+          ignore: true
+        },
+        {
+          key: 'layout',
+          ignore: true
+        }
+      ]
+    }
+  };
+  refresher = new EventEmitter();
+  deletedComponents = {};
+  // tslint:disable-next-line:variable-name
+  private _form: any = {};
+
+  constructor() {
+    const numberEditForm = Components.components.number.editForm();
+    const textEditForm = Components.components.textfield.editForm();
+    textEditForm.components[0].components[1].components = textEditForm.components[0].components[1].components.filter(item => !['persistent', 'protected', 'dbIndex', 'encrypted', 'calculateServer'].includes(item.key));
+    numberEditForm.components[0].components[1].components = numberEditForm.components[0].components[1].components.filter(item => !['persistent', 'protected', 'dbIndex', 'encrypted', 'calculateServer'].includes(item.key));
+    Components.components.textfield.editForm = () =>
+      baseEditForm([textEditForm.components[0].components[1]]);
+    Components.components.number.editForm = () =>
+      baseEditForm([numberEditForm.components[0].components[1]]);
+    this._form = this.form;
+  }
+  ngOnInit() {
+
+  }
+  ngOnChanges(changes) {
+    if (changes.form || changes.builderComponents) {
+      if (this.form.components) {
+        Utils.eachComponent(this.form.components, (comp) => {
+          if (this.builderComponents[comp.key]) {
+            this.deletedComponents[comp.key] = cloneDeep(this.builderComponents[comp.key]);
+            delete this.builderComponents[comp.key];
+          } else if (Object.keys(this.builderComponents).length) {
+            Utils.findComponent(this.form.components, comp.key, null, (found, path) => {
+              Utils.removeComponent(this.form.components, path);
+              this._form = cloneDeep(this.form);
+            });
+          }
+        });
+      }
+      this.builderOptions.builder.customBasic.components = cloneDeep(this.builderComponents);
+
+
+      this.refresher.next();
+    }
+  }
+  save() {
+    this.saving = true;
+    this.form = cloneDeep(this._form);
+    this.formUpdated.next(this.form);
+    setTimeout(() => {
+      this.saving = false;
+    }, 500);
+  }
+  onChange(event: any) {
+    this.handleComponentChange(event.component, event.type);
+
+    if (['addComponent', 'saveComponent', 'deleteComponent'].indexOf(event.type) > -1) {
+      this._form = cloneDeep(event.form);
+    }
+
+  }
+
+  handleComponentChange(component, eventType): void {
+    if (component.fixedKey) {
+      component.key = component.fixedKey;
+      if (component.fixedKey && this.builderOptions.builder.customBasic.components[component.fixedKey] && eventType === 'addComponent') {
+        this.deletedComponents[component.fixedKey] =
+          { ...this.builderOptions.builder.customBasic.components[component.fixedKey] };
+        this.builderOptions.builder.customBasic.components[component.fixedKey] = false;
+      }
+      if (component.fixedKey && this.deletedComponents[component.fixedKey] && eventType === 'deleteComponent') {
+        this.builderOptions.builder.customBasic.components[component.fixedKey] =
+          { ... this.deletedComponents[component.fixedKey] };
+        delete this.deletedComponents[component.fixedKey];
+      }
+      this.refresher.next();
+
+    } else {
+      Utils.eachComponent([component], (comp) => {
+        this.handleComponentChange(comp, eventType);
+      });
+    }
+  }
+
+
+}

package/src/lib/components/dynamic-form/components/dynamic-form-checkbox-item/dynamic-form-checkbox-item.component.html

@@ -0,0 +1,10 @@
+<div class="checkbox-container">
+  <input
+    [checked]="checked"
+    [disabled]="disabled"
+    [(ngModel)]="value"
+    (change)="setValue($event)"
+    type="checkbox"
+  />
+  <label class="checkbox-lable">{{ label | translate }}</label>
+</div>

package/src/lib/components/dynamic-form/components/dynamic-form-checkbox-item/dynamic-form-checkbox-item.component.scss

@@ -0,0 +1,13 @@
+.checkbox-lable {
+  color: #8f98aa;
+  font-size: 16px;
+  margin-bottom: 0px;
+}
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  input[type="checkbox"] {
+    transform: scale(1.2);
+  }
+}