File

src/app/modules/core/components/data-form/data-form.component.ts

Metadata

encapsulation ViewEncapsulation.None
selector app-data-form
styleUrls data-form.component.scss
templateUrl data-form.component.html

Inputs

categoryMasterList

Type: any

formFieldProperties

Type: any

Constructor

constructor()

Methods

setFormConfig
setFormConfig()
Returns: void
mapParents
mapParents(data: any, callback: any)
Returns: void
updateForm
updateForm(object: any)
Parameters :
  • object : Object
    • Field information
Returns: void
getCommonAssociations
getCommonAssociations(parentAssociations: any, childAssociations: any)
Returns: void
getParentAssociations
getParentAssociations(fields: any, associations: any, formData: any, callback: any)
Returns: void
getAssociations
getAssociations(keys: any, range: any, callback: any)
Parameters :
  • keys
    • To the associactio object for particular key's
  • range : Object
    • Which refers to framework terms/range object
Returns: void
applyDependencyRules
applyDependencyRules(field: any, associations: any, resetSelected: any)
Parameters :
  • field : Object
    • Which field need need to get change.
  • associations : Object
    • Association values of the respective field.
  • resetSelected : Boolean

    -

Returns: void
resetSelectedField
resetSelectedField(id: any, field: any)
Parameters :
  • id : String
    • To restore the specific dropdown field value
Returns: void
updateDropDownList
updateDropDownList(fieldCode: any, values: any)
Parameters :
  • field : Object
    • Field which is need to update.
  • values : Object
    • Values for the field
Returns: void
mapMasterCategoryList
mapMasterCategoryList(key: any)
Parameters :
  • configurations : Object
    • Field configurations
  • key : String
    • Field uniq code
Returns: void
handleCheckboxData
handleCheckboxData(event: any, code: any)
Returns: void

Properties

Public categoryList
categoryList: {}

categoryList is category list of dropdown values

Public formInputData
formInputData: {}

formInputData is to take input data's from form

import { Component, EventEmitter, Input, OnInit, Output, OnChanges, ViewEncapsulation } from '@angular/core';
import * as _ from 'lodash-es';

@Component({
  selector: 'app-data-form',
  templateUrl: './data-form.component.html',
  styleUrls: ['./data-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DataFormComponent implements OnInit {
  @Input() formFieldProperties: any;
  @Input() categoryMasterList: any;

  /**
   * formInputData is to take input data's from form
   */
  public formInputData = {};
  /**
   * categoryList is category list of dropdown values
   */
  public categoryList: {};

  constructor() {
    this.categoryList = {};
  }

  setFormConfig() {
    const DROPDOWN_INPUT_TYPES = ['select', 'multiSelect'];
    _.forEach(this.formFieldProperties, (field) => {
      if (_.includes(DROPDOWN_INPUT_TYPES, field.inputType)) {
        if (field.depends && field.depends.length) {
          this.getAssociations(this.categoryMasterList[field.code],
            field.range, (associations) => {
              this.applyDependencyRules(field, associations, false);
            });
        }
      }
      if (field.defaultValue) {
        this.formInputData[field.code] = field.defaultValue;
      }
    });
  }

  mapParents(data, callback) {
    // create parent to all the fields
    _.forEach(data, (val, index) => {
      data[index].parent = [];
    });

    // set parents
    _.forEach(data, (field, index) => {
      if (field.depends) {
        _.forEach(field.depends, (depend) => {
          _.forEach(data, (category, counter) => {
            if (depend === category.code) {
              data[counter].parent.push(field.code);
            }
          });

        });
      }
    });
    return callback(data);
  }

  ngOnInit() {
    this.mapParents(this.formFieldProperties, (data) => {
      this.formFieldProperties = data;
      this.setFormConfig();
      this.mapMasterCategoryList('');
    });
  }

  /**
  * @description            - Which is used to update the form when vlaues is get changes
  * @param {Object} object  - Field information
  */
  updateForm(object) {
    if (object.field.range) {
      this.getAssociations(object.value, object.field.range, (associations) => {
        this.getParentAssociations(object.field, associations, object.formData, (commonAssociations) => {
          this.applyDependencyRules(object.field, commonAssociations, true);
        });
      });
    }
  }


  getCommonAssociations(parentAssociations, childAssociations) {
    let intersectionData = [];
    if (parentAssociations && parentAssociations.length) {
      intersectionData = _.filter(parentAssociations, (e) => {
        return _.find(childAssociations, e);
      });
    }
    return intersectionData;
  }

  getParentAssociations(fields, associations, formData, callback) {
    if (fields.parent && fields.parent.length) {
      _.forEach(fields.parent, (val) => {
        _.forEach(this.formFieldProperties, (field) => {
          if (field.code === val) {
            _.forEach(field.range, (range) => {
              if (_.isArray(formData[val]) && formData[val].length > 0) {
                _.forEach(formData[val], (metadata) => {
                  if (range.name === metadata) {
                    associations = this.getCommonAssociations(range.associations, associations);
                  }
                });
              } else {
                if (range.name === formData[val]) {
                  associations = this.getCommonAssociations(range.associations, associations);
                }
              }
            });
          }
        });
      });
    }
    callback(associations);
  }

  /**
  * @description                    - Which is used to get the association object by mapping key and range object
  * @param {String | Array} keys    - To the associactio object for particular key's
  * @param {Object} range           - Which refers to framework terms/range object
  */
  getAssociations(keys, range, callback) {
    let names = [];
    const associations = [];
    const filteredAssociations = [];
    if (_.isString(keys)) {
      names.push(keys);
    } else {
      names = keys;
    }
    _.forEach(range, (res) => {
      _.forEach(names, (value, key) => {
        if (res.name === value) {
          filteredAssociations.push(res);
        }
      });
    });
    _.forEach(filteredAssociations, (val, index) => {
      if (val.associations) {
        _.forEach(val.associations, (key, value) => {
          associations.push(key);
        });
      }
    });
    if (callback) {
      callback(associations);
    }
  }

  /**
  * @description                    - Which is used to resolve the dependency.
  * @param {Object} field           - Which field need need to get change.
  * @param {Object} associations    - Association values of the respective field.
  * @param {Boolean} resetSelected  - @default true Which defines while resolving the dependency dropdown
  *                                   Should reset the selected values of the field or not
  */
  applyDependencyRules(field, associations, resetSelected) {
    // reset the depended field first
    // Update the depended field with associated value
    // Currently, supported only for the dropdown values
    let dependedValues = [];
    let groupdFields = [];
    if (field.depends && field.depends.length) {
      _.forEach(field.depends, (id) => {
        if (resetSelected) {
          this.resetSelectedField(id, field.range);
        }
        dependedValues = _.map(associations, i => _.pick(i, ['name', 'category']));
        if (dependedValues.length) {
          groupdFields = _.chain(dependedValues)
          .groupBy('category')
          .map((name, category) => ({ name, category }))
          .value();
          this.updateDropDownList(id, dependedValues);
        }
        if (groupdFields.length) {
          _.forEach(groupdFields, (value, key) => {
            this.updateDropDownList(value.category, _.map(value.name, i => _.pick(i, 'name')));
          });
        } else {
          this.updateDropDownList(id, []);
        }
      });
    }
  }

  /**
     * @description         - Which is used to restore the dropdown slected value.
     * @param {String} id   - To restore the specific dropdown field value
     */
    resetSelectedField(id, field) {
      this.formInputData[id] = '';
    }


    /**
  * @description            - Which updates the drop down value list
  *                         - If the specified values are empty then drop down will get update with master list
  * @param {Object} field   - Field which is need to update.
  * @param {Object} values  - Values for the field
  */
  updateDropDownList(fieldCode, values) {
    if (values.length) {
      this.categoryList[fieldCode] = _.unionBy(values, 'name');
    } else {
      this.mapMasterCategoryList(fieldCode);
    }
  }

  /**
  *
  * @description                     -
  * @param {Object} configurations   - Field configurations
  * @param {String} key              - Field uniq code
  */
  mapMasterCategoryList(key) {
    _.forEach(this.formFieldProperties, (field, value) => {
      if (key) {
        if (field.code === key) {
          this.categoryList[field.code] = field.range;
        }
      } else {
        if (field.range) {
          this.categoryList[field.code] = field.range;
        }
      }
    });
  }

  handleCheckboxData (event, code) {
    if ( event.target.checked ) {
      this.formInputData[code] = true;
    } else {
      this.formInputData[code] = false;
    }
  }
}

results matching ""

    No results matching ""