How to use addSettings method in Nightwatch

Best JavaScript code snippet using nightwatch

perspectiveHierarchyComponent.js

Source:perspectiveHierarchyComponent.js

1import React from 'react'2import _ from 'lodash'3import ReactModal from 'react-modal'4import Select from 'react-select'5import moment from 'moment'6import PropTypes from 'prop-types'7import styles from './perspectiveHierarchyComponent.scss'8import 'react-datepicker/dist/react-datepicker.css'9import DatePicker from 'react-datepicker'10ReactModal.setAppElement('#root')11let comparer = function (otherArray) {12  return function (current) {13    return otherArray.filter(function (other) {14      return other.value === current.value && other.display === current.display15    }).length === 016  }17}18const customStylescrud = { content: { top: '10%', left: '8%', background: 'none', border: '0px', overflow: 'none', margin: 'auto' } }19export default function PerspectiveHierarchy (props) {20  console.log('props ==========================', props)21  let defaultStyle = {'content': {'top': '20%'}}22  let perspectiveName = ''23  let standardPropertyList = ''24  let connectionSelectBoxList = ''25  let groupConnectionSelectBoxList = ''26  let selectedKPIList = ''27  let businessPropertyList = ''28  let searchTextBox29  let perPage = props.perPage30  let currentPage = props.currentPage31  let nextClass = ''32  let previousClass = ''33  let pageArray = []34  let listPage = []35  let paginationLimit = 636  let modelPrespectivesList = ''37  let totalPages38  let tableHeader = []39  let messageList = ''40  let deletePerspectiveName = props.addSettings.deleteObject ? props.addSettings.deleteObject.name : ''41  let updatePerspectiveName = props.addSettings.selectedData ? props.addSettings.selectedData.editName : ''42  let expandSettings = props.expandSettings43  if (props.addSettings.isEditModalOpen) {44    if (props.addSettings.selectedData) {45      if (props.addSettings.selectedData.initiatedFrom === 'ParentNode') {46        updatePerspectiveName = props.addSettings.selectedData.name47      } else if (props.addSettings.selectedData.initiatedFrom === 'ChildrenNode') {48        updatePerspectiveName = props.addSettings.selectedData.editName49      }50    }51  }52  if (props.addSettings.isModalOpen) {53    if (props.addSettings.selectedData) {54      perspectiveName = props.addSettings.selectedData.metaModelPerspectives.name55    } else {56      perspectiveName = props.metaModelPerspective ? props.metaModelPerspective.resources[0].name : ''57    }58  } else {59    perspectiveName = props.metaModelPerspective ? props.metaModelPerspective.resources[0].name : ''60  }61  console.log('perspectives props', props, searchTextBox, expandSettings)62  let handleClick = function (data, level) {63    console.log(data)64    console.log('level', level)65    console.log(props.expandSettings)66    let expandFlag = true67    let expandSettings = {...props.expandSettings}68    let selectedObject = expandSettings.selectedObject[level]69    if (selectedObject && selectedObject.name === data.name) {70      expandFlag = !selectedObject.expandFlag71      if (!expandFlag) {72        if (level > 0) {73          level = level - 174          expandSettings.selectedObject.length = level + 175          expandSettings.metaModelPerspectives.length = level + 176          expandSettings.modelPerspectives.length = level + 177        } else {78          level = null79          expandSettings.selectedObject.length = 080          expandSettings.metaModelPerspectives.length = 081          expandSettings.modelPerspectives.length = 082        }83      }84    } else {85      expandFlag = true86      expandSettings.metaModelPerspectives[level] = data.metaModelPerspectives87      expandSettings.selectedObject[level] = data88      expandSettings.selectedObject[level].expandFlag = expandFlag89      if (data.rolePerspectives) {90        expandSettings.selectedObject[level].showChildExpandIcon = true91      } else {92        expandSettings.selectedObject[level].showChildExpandIcon = false93      }94    }95    if (expandFlag) {96      if (data.metaModelPerspectives) {97        expandSettings.processAPIResponse = true98        // eslint-disable-next-line99        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})100        let payload = {}101        payload['meta_model_perspective_id'] = data.metaModelPerspectives.id102        payload['view_key'] = data.metaModelPerspectives.view_key103        payload['parent_reference'] = data.parentReference104        if (data.containerPerspectiveId) {105          payload['container_meta_model_perspective_id'] = data.containerPerspectiveId106          payload['container_view_key'] = data.containerPerspectiveViewKey107        }108        props.fetchNestedModelPrespectives(payload)109      }110    }111    expandSettings.level = level112    props.setExpandSettings(expandSettings)113    // eslint-disable-next-line114    // mApp && mApp.block('#supplierList', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})115  }116  let editProperty = function (index, value) {117    let connectionData = {...props.connectionData}118    let customerProperty = connectionData.customerProperty119    let propertyType = customerProperty[index].type_property.property_type120    if (propertyType.key === 'Boolean') {121      customerProperty[index].type_property.boolean_value = value122    } else if (propertyType.key === 'Integer') {123      customerProperty[index].type_property.int_value = value124    } else if (propertyType.key === 'Decimal') {125      customerProperty[index].type_property.float_value = value126    } else if (propertyType.key === 'DateTime') {127      customerProperty[index].type_property.date_time_value = value.format('DD MMM YYYY')128    } else if (propertyType.key === 'Text') {129      customerProperty[index].type_property.text_value = value130    } else {131      customerProperty[index].type_property.other_value = value132    }133    connectionData.customerProperty = customerProperty134    props.setConnectionData(connectionData)135  }136  let handlePropertySelect = function (index) {137    console.log('index', index)138    return function (newValue: any, actionMeta: any) {139      console.log('newValue', newValue)140      console.log('actionMeta', actionMeta)141      let connectionData = JSON.parse(JSON.stringify(props.connectionData))142      let customerProperty = connectionData.customerProperty143      if (actionMeta.action === 'select-option') {144        customerProperty[index].type_property.value_set_value = newValue145      }146      if (actionMeta.action === 'clear') {147        customerProperty[index].type_property.value_set_value = newValue148      }149      connectionData.customerProperty = customerProperty150      props.setConnectionData(connectionData)151    }152  }153  let handleBlurdropdownChange = function (event) {154    console.log('handle Blur change', event.target.value)155  }156  let handledropdownChange = function (event) {157    props.setPerPage(parseInt(event.target.value))158  }159  let openModal = function (data, level, operationType) {160    console.log('data', data)161    console.log('level', level)162    console.log('operationType', operationType)163    let addSettings = {...props.addSettings}164    // check Expand level and set Level on open Modal operation165    // let expandSettings = {...props.expandSettings}166    // let levelName = ''167    // if (operationType === 'Add') {168    //   levelName = addSettings.name169    // } else if (operationType === 'Edit') {170    //   levelName = addSettings.editName171    // }172    // levelName = data.name173    // let selectedObjects = expandSettings.selectedObject174    // var index = selectedObjects.findIndex(function (selectedObject) {175    //   return selectedObject.name === levelName.toString()176    // })177    // console.log('found index', index, selectedObjects, levelName, data)178    // if (index >= 0) {179    //   expandSettings.selectedObject.length = index180    //   expandSettings.metaModelPerspectives.length = index181    //   expandSettings.modelPerspectives.length = index182    //   expandSettings.level = level183    //   props.setExpandSettings(expandSettings)184    // }185    // end of code for check level operation186    addSettings.isNexusPoint = false187    addSettings.groupCollection = []188    addSettings.groupedPairedList = []189    let perspectiveId = ''190    let viewKey = ''191    if (operationType === 'Add') {192      addSettings.isModalOpen = true193    } else if (operationType === 'Edit') {194      addSettings.isEditModalOpen = true195    }196    addSettings.name = ''197    addSettings.description = ''198    addSettings.selectedData = data199    // props.setAddSettings(addSettings)200    console.log('open modal', data, level)201    if (level === 'ParentNode') {202      let packages = JSON.parse(localStorage.getItem('packages'))203      let perspectives = _.result(_.find(packages.resources, function (obj) {204        return obj.key === 'ECO_SLA'205      }), 'perspectives')206      perspectiveId = props.match.params.id207      console.log('perspectives', packages, perspectives, perspectiveId)208      if (operationType === 'Add') {209        viewKey = _.result(_.find(perspectives, function (obj) {210          return (obj.perspective === parseInt(perspectiveId) && obj.role_key === 'Create')211        }), 'view_key')212      } else if (operationType === 'Edit') {213        viewKey = _.result(_.find(perspectives, function (obj) {214          return (obj.perspective === parseInt(perspectiveId) && obj.role_key === 'Update')215        }), 'view_key')216      }217      console.log('view_key key', viewKey, perspectiveId, perspectives)218      if (viewKey) {219        let payload = {}220        payload.id = perspectiveId221        payload.viewKey = {'view_key': viewKey}222        props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)223        if (operationType === 'Edit') {224          let paydata = {}225          paydata['meta_model_perspective_id'] = perspectiveId226          paydata['view_key'] = viewKey227          let modelPerspectivePayload = {}228          modelPerspectivePayload.id = data.subjectId229          modelPerspectivePayload.data = paydata230          props.fetchCrudModelPrespectives(modelPerspectivePayload)231        }232        // eslint-disable-next-line233        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})234      }235    }236    if (level === 'ChildrenNode') {237      if (data) {238        console.log('children node -----------', data)239        if (data.rolePerspectives) {240          console.log('if data', data)241          let rolePerspectives = data.rolePerspectives242          let payload = {}243          if (operationType === 'Add') {244            perspectiveId = rolePerspectives.Create.part_perspective_id245            viewKey = rolePerspectives.Create.part_perspective_view_key246          } else if (operationType === 'Edit') {247            perspectiveId = rolePerspectives.Update.part_perspective_id248            viewKey = rolePerspectives.Update.part_perspective_view_key249          }250          payload.id = perspectiveId251          payload.viewKey = {}252          payload.viewKey.view_key = viewKey253          if (data.parentReference) {254            payload.viewKey.parent_reference = data.parentReference255          }256          props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)257          if (operationType === 'Edit') {258            let paydata = {}259            paydata['meta_model_perspective_id'] = perspectiveId260            paydata['view_key'] = viewKey261            if (data.parentReference) {262              paydata['parent_reference'] = data.parentReference263            }264            let modelPerspectivePayload = {}265            modelPerspectivePayload.id = data.editSubjectId266            modelPerspectivePayload.data = paydata267            props.fetchCrudModelPrespectives(modelPerspectivePayload)268          }269          // eslint-disable-next-line270          mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})271        } else {272          console.log('else data', data)273          addSettings.isModalOpen = false274          addSettings.isEditModalOpen = false275          // let payload = {}276          // perspectiveId = data.metaModelPerspectives.id277          // let payloadData = {}278          // if (data.containerPerspectiveId !== null) {279          //   payloadData.280          // }281          // perspectiveId = data.containerPerspectiveId282          // viewKey = data.containerPerspectiveViewKey283          // payload.id = data.containerPerspectiveId284          // payload.viewKey = {'view_key': data.containerPerspectiveViewKey}285          // props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)286          // // eslint-disable-next-line287          // mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})288        }289      }290    }291    addSettings.initiatedFrom = level292    addSettings.perspectiveId = perspectiveId293    addSettings.viewKey = viewKey294    props.setAddSettings(addSettings)295  }296  let openDeleteModal = function (data, level, initiatedFrom) {297    console.log('delete', data, level)298    let addSettings = {...props.addSettings}299    addSettings.isDeleteModalOpen = true300    // if (level === null || level === 0) {301    //   addSettings.isDeleteModalOpen = true302    // } else {303    //   addSettings.isDeleteModalOpen = false304    // }305    addSettings.deleteObject = data306    addSettings.deleteOperationLevel = level307    addSettings.initiatedFrom = initiatedFrom308    props.setAddSettings(addSettings)309  }310  let closeModal = function () {311    let addSettings = {...props.addSettings}312    addSettings.isModalOpen = false313    addSettings.isDeleteModalOpen = false314    addSettings.isEditModalOpen = false315    addSettings.deleteObject = null316    addSettings.createResponse = null317    addSettings.updateResponse = null318    addSettings.deleteResponse = null319    addSettings.selectedData = null320    props.setAddSettings(addSettings)321    props.setConnectionData('')322  }323  let editName = function (event) {324    let addSettings = JSON.parse(JSON.stringify(props.addSettings))325    addSettings.name = event.target.value326    props.setAddSettings(addSettings)327  }328  let editDescription = function (event) {329    let addSettings = JSON.parse(JSON.stringify(props.addSettings))330    addSettings.description = event.target.value331    props.setAddSettings(addSettings)332  }333  let createNexusComponent = function (event) {334    event.preventDefault()335    // eslint-disable-next-line336    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})337    let addSettings = JSON.parse(JSON.stringify(props.addSettings))338    let patchPayload = []339    let obj = {}340    obj.op = 'add'341    obj.path = '/-'342    obj.value = {}343    obj.value.parts = []344    let connectionData = JSON.parse(JSON.stringify(props.connectionData))345    let groupedPairedList = props.addSettings.groupedPairedList346    connectionData.selectedValues.forEach(function (data, index) {347      if (Array.isArray(data)) {348        if (data.length > 0) {349          let connections = []350          data.forEach(function (selectedValue, ix) {351            let obj = {}352            obj.target_id = selectedValue.id353            connections.push(obj)354          })355          let extraArray = []356          extraArray.push(connections)357          obj.value.parts[connectionData.data[index].partIndex] = {'value': extraArray}358        } else {359          // obj.value.parts[connectionData.data[index].partIndex] = {}360        }361      } else {362        if (data) {363          let connections = []364          let obj1 = {}365          obj1.target_id = data.id366          connections.push(obj1)367          let extraArray = []368          extraArray.push(connections)369          obj.value.parts[connectionData.data[index].partIndex] = {'value': extraArray}370        } else {371          // obj.value.parts[connectionData.data[index].partIndex] = {}372        }373      }374    })375    if (groupedPairedList.length > 0) {376      let groupedValues = []377      groupedPairedList.forEach(function (data, index) {378        let values = []379        if (data[0]) {380          let cObj = {}381          cObj.target_id = data[0].id382          values.push(cObj)383        }384        if (data[1]) {385          let cObj = {}386          cObj.target_id = data[1].id387          values.push(cObj)388        }389        groupedValues.push(values)390      })391      obj.value.parts.push({'value': groupedValues})392    }393    // connectionData.standardProperty.forEach(function (data, index) {394    //   if (data.standard_property === 'name') {395    //     obj.value.parts[data.partIndex] = {'value': addSettings.name}396    //   } else if (data.standard_property === 'description') {397    //     obj.value.parts[data.partIndex] = {'value': addSettings.description}398    //   }399    // })400    // connectionData.customerProperty.forEach(function (data, index) {401    //   if (data.type_property.property_type.key === 'Boolean') {402    //     obj.value.parts[data.partIndex] = {value: {'boolean_value': data.type_property.boolean_value}}403    //   } else if (data.type_property.property_type.key === 'Integer') {404    //     obj.value.parts[data.partIndex] = {value: {'int_value': data.type_property.int_value}}405    //   } else if (data.type_property.property_type.key === 'Decimal') {406    //     obj.value.parts[data.partIndex] = {value: {'float_value': data.type_property.float_value}}407    //   } else if (data.type_property.property_type.key === 'DateTime') {408    //     obj.value.parts[data.partIndex] = {value: {'date_time_value': data.type_property.date_time_value}}409    //   } else if (data.type_property.property_type.key === 'Text') {410    //     obj.value.parts[data.partIndex] = {value: {'text_value': data.type_property.text_value}}411    //   } else if (data.type_property.property_type.key === 'List') {412    //     obj.value.parts[data.partIndex] = {value: {'value_set_value_id': data.type_property.value_set_value ? data.type_property.value_set_value.id : null}}413    //   } else {414    //     obj.value.parts[data.partIndex] = {value: {'other_value': data.type_property.other_value}}415    //   }416    // })417    patchPayload.push(obj)418    let payload = {}419    payload.queryString = {}420    payload.queryString.meta_model_perspective_id = props.addSettings.perspectiveId421    payload.queryString.view_key = props.addSettings.viewKey422    payload.queryString.apply_changes = true423    if (addSettings.initiatedFrom === 'ChildrenNode') {424      payload.queryString.parent_reference = addSettings.selectedData.parentReference425    }426    payload.data = {}427    payload.data[props.addSettings.perspectiveId] = patchPayload428    console.log('payload', payload)429    props.updateModelPrespectives(payload)430  }431  let createComponent = function (event) {432    event.preventDefault()433    // eslint-disable-next-line434    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})435    let addSettings = JSON.parse(JSON.stringify(props.addSettings))436    let patchPayload = []437    let obj = {}438    obj.op = 'add'439    obj.path = '/-'440    obj.value = {}441    obj.value.parts = []442    let connectionData = {...props.connectionData}443    connectionData.selectedValues.forEach(function (data, index) {444      if (Array.isArray(data)) {445        if (data.length > 0) {446          let connections = []447          data.forEach(function (selectedValue, ix) {448            let obj = {}449            obj.target_id = selectedValue.id450            connections.push(obj)451          })452          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}453        } else {454          obj.value.parts[connectionData.data[index].partIndex] = {}455        }456      } else {457        if (data) {458          let connections = []459          let obj1 = {}460          obj1.target_id = data.id461          connections.push(obj1)462          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}463        } else {464          obj.value.parts[connectionData.data[index].partIndex] = {}465        }466      }467    })468    connectionData.standardProperty.forEach(function (data, index) {469      if (data.standard_property === 'name') {470        obj.value.parts[data.partIndex] = {'value': addSettings.name}471      } else if (data.standard_property === 'description') {472        obj.value.parts[data.partIndex] = {'value': addSettings.description}473      }474    })475    connectionData.customerProperty.forEach(function (data, index) {476      if (data.type_property.property_type.key === 'Boolean') {477        obj.value.parts[data.partIndex] = {value: {'boolean_value': data.type_property.boolean_value}}478      } else if (data.type_property.property_type.key === 'Integer') {479        obj.value.parts[data.partIndex] = {value: {'int_value': data.type_property.int_value}}480      } else if (data.type_property.property_type.key === 'Decimal') {481        obj.value.parts[data.partIndex] = {value: {'float_value': data.type_property.float_value}}482      } else if (data.type_property.property_type.key === 'DateTime') {483        obj.value.parts[data.partIndex] = {value: {'date_time_value': data.type_property.date_time_value}}484      } else if (data.type_property.property_type.key === 'Text') {485        obj.value.parts[data.partIndex] = {value: {'text_value': data.type_property.text_value}}486      } else if (data.type_property.property_type.key === 'List') {487        obj.value.parts[data.partIndex] = {value: {'value_set_value_id': data.type_property.value_set_value ? data.type_property.value_set_value.id : null}}488      } else {489        obj.value.parts[data.partIndex] = {value: {'other_value': data.type_property.other_value}}490      }491    })492    patchPayload.push(obj)493    let payload = {}494    payload.queryString = {}495    payload.queryString.meta_model_perspective_id = props.addSettings.perspectiveId496    payload.queryString.view_key = props.addSettings.viewKey497    payload.queryString.apply_changes = true498    if (addSettings.initiatedFrom === 'ChildrenNode') {499      payload.queryString.parent_reference = addSettings.selectedData.parentReference500    }501    payload.data = {}502    payload.data[props.addSettings.perspectiveId] = patchPayload503    console.log('payload', payload)504    props.updateModelPrespectives(payload)505  }506  let updateNexusComponent = function (event) {507    event.preventDefault()508    // eslint-disable-next-line509    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})510    let addSettings = JSON.parse(JSON.stringify(props.addSettings))511    let updateObject = props.addSettings.updateObject512    let patchPayload = []513    let obj = {}514    obj.op = 'replace'515    obj.path = `/${updateObject.subject_id}/`516    obj.value = {}517    obj.value.parts = []518    let connectionData = JSON.parse(JSON.stringify(props.connectionData))519    let groupedPairedList = props.addSettings.groupedPairedList520    connectionData.selectedValues.forEach(function (data, index) {521      if (Array.isArray(data)) {522        if (data.length > 0) {523          let connections = []524          data.forEach(function (selectedValue, ix) {525            let obj = {}526            obj.target_id = selectedValue.id527            connections.push(obj)528          })529          let extraArray = []530          extraArray.push(connections)531          obj.value.parts[connectionData.data[index].partIndex] = {'value': extraArray}532        } else {533          // obj.value.parts[connectionData.data[index].partIndex] = {}534        }535      } else {536        if (data) {537          let connections = []538          let obj1 = {}539          obj1.target_id = data.id540          connections.push(obj1)541          let extraArray = []542          extraArray.push(connections)543          obj.value.parts[connectionData.data[index].partIndex] = {'value': extraArray}544        } else {545          // obj.value.parts[connectionData.data[index].partIndex] = {}546        }547      }548    })549    if (groupedPairedList.length > 0) {550      let groupedValues = []551      groupedPairedList.forEach(function (data, index) {552        let values = []553        if (data[0]) {554          let cObj = {}555          cObj.target_id = data[0].id556          values.push(cObj)557        }558        if (data[1]) {559          let cObj = {}560          cObj.target_id = data[1].id561          values.push(cObj)562        }563        groupedValues.push(values)564      })565      obj.value.parts.push({'value': groupedValues})566    }567    patchPayload.push(obj)568    let selectedData = addSettings.selectedData569    let payload = {}570    payload.id = updateObject.subject_id571    payload.queryString = {}572    payload.queryString.meta_model_perspective_id = props.crudMetaModelPerspective.resources[0].id573    payload.queryString.apply_changes = true574    if (addSettings.initiatedFrom === 'ChildrenNode') {575      payload.queryString.parent_reference = addSettings.selectedData.parentReference576      let viewKey = null577      if (selectedData.rolePerspectives) {578        if (selectedData.rolePerspectives.Update) {579          viewKey = selectedData.rolePerspectives.Update.part_perspective_view_key580        }581      }582      if (viewKey) {583        payload.queryString.view_key = viewKey584      }585    } else {586      payload.queryString.view_key = addSettings.viewKey587    }588    payload.data = patchPayload589    props.updateNestedModelPrespectives(payload)590  }591  let updateComponent = function (event) {592    event.preventDefault()593    // eslint-disable-next-line594    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})595    let addSettings = JSON.parse(JSON.stringify(props.addSettings))596    let connectionData = JSON.parse(JSON.stringify(props.connectionData))597    let labelParts = props.crudMetaModelPerspective.resources[0].parts598    let data = addSettings.updateObject599    let patchPayload = []600    if (data.parts) {601      labelParts.forEach(function (partData, index) {602        let valueType = ''603        let obj = {}604        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property605          obj.op = 'replace'606          valueType = partData.standard_property607          obj.path = '/parts/' + index + '/' + valueType608          if (partData.standard_property === 'name') {609            obj.value = props.addSettings.name610          }611          if (partData.standard_property === 'description') {612            obj.value = props.addSettings.description613          }614          patchPayload.push(obj)615        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property616          let dataIndex = connectionData.data.findIndex(p => p.name === partData.name)617          console.log('dataIndex', dataIndex)618          if (dataIndex !== -1) {619            // found index620            let max = connectionData.data[dataIndex].max621            let initialSelectedValue = connectionData.initialSelectedValues[dataIndex] || []622            let selectedValue = connectionData.selectedValues[dataIndex]623            console.log('initialSelectedValue', initialSelectedValue)624            console.log('selectedValue', selectedValue)625            let onlyInInitial = []626            if (initialSelectedValue) {627              if (max === 1) {628                let temp = []629                temp.push(initialSelectedValue)630                initialSelectedValue = temp631              }632            }633            if (selectedValue) {634              if (max === 1) {635                let temp = []636                temp.push(selectedValue)637                selectedValue = temp638              }639            }640            if (initialSelectedValue) {641              if (selectedValue) {642                onlyInInitial = initialSelectedValue.filter(comparer(selectedValue))643              } else {644                onlyInInitial = initialSelectedValue645              }646            }647            let onlyInFinal = []648            if (selectedValue) {649              if (initialSelectedValue) {650                onlyInFinal = selectedValue.filter(comparer(initialSelectedValue))651              } else {652                onlyInFinal = selectedValue653              }654            }655            // remove operation payload656            if (onlyInInitial.length > 0) {657              let connectionIdArray = data.parts[index].value658              let value = []659              onlyInInitial.forEach(function (removeData, rid) {660                let found = _.find(connectionIdArray, function (obj) { return (obj.target_component.id === removeData.id) })661                console.log('found ----', found)662                if (found) {663                  // set connection id664                  value.push(found.connection.id)665                }666              })667              let obj = {}668              obj.op = 'remove'669              obj.value = value670              valueType = 'value/-'671              obj.path = '/parts/' + index + '/' + valueType672              patchPayload.push(obj)673              console.log('connectionId obj', connectionIdArray, obj)674            }675            console.log('index', dataIndex)676            console.log('onlyInInitial', onlyInInitial)677            console.log('onlyInFinal', onlyInFinal)678            let existingTargetComponent = connectionData.selectedValues[dataIndex]679            console.log('existingTargetComponent', existingTargetComponent)680            if (onlyInFinal.length > 0) {681              let connections = []682              onlyInFinal.forEach(function (targetComponent, rid) {683                let obj = {}684                obj.target_id = targetComponent.id685                connections.push(obj)686              })687              let obj = {}688              obj.op = 'add'689              obj.value = connections690              valueType = 'value/-'691              obj.path = '/parts/' + index + '/' + valueType692              patchPayload.push(obj)693              console.log('add obj', obj)694            }695          } else {696            console.log('index', dataIndex)697          }698        } if (partData.standard_property === null && partData.type_property !== null) {699          let obj = {}700          obj.op = 'replace'701          let customerProperty = _.find(connectionData.customerProperty, function (obj) {702            return obj.name === partData.name703          })704          console.log('customerProperty', customerProperty)705          if (customerProperty) {706            if (customerProperty.type_property.property_type.key === 'Boolean') {707              valueType = `boolean_value`708              obj.value = customerProperty.type_property.boolean_value709            } else if (customerProperty.type_property.property_type.key === 'Integer') {710              valueType = `int_value`711              obj.value = customerProperty.type_property.int_value712            } else if (customerProperty.type_property.property_type.key === 'Decimal') {713              valueType = `float_value`714              obj.value = customerProperty.type_property.float_value715            } else if (customerProperty.type_property.property_type.key === 'DateTime') {716              valueType = `date_time_value`717              obj.value = customerProperty.type_property.date_time_value718            } else if (customerProperty.type_property.property_type.key === 'Text') {719              valueType = `text_value`720              obj.value = customerProperty.type_property.text_value721            } else if (customerProperty.type_property.property_type.key === 'List') {722              valueType = `value_set_value_id`723              obj.value = customerProperty.type_property.value_set_value ? customerProperty.type_property.value_set_value.id : null724            } else {725              valueType = `other_value`726              obj.value = customerProperty.type_property.other_value727            }728            obj.path = '/parts/' + index + '/' + valueType729            patchPayload.push(obj)730          }731        }732      })733    }734    let selectedData = addSettings.selectedData735    let payload = {}736    payload.id = data.subject_id737    payload.queryString = {}738    payload.queryString.meta_model_perspective_id = props.crudMetaModelPerspective.resources[0].id739    payload.queryString.apply_changes = true740    if (addSettings.initiatedFrom === 'ChildrenNode') {741      payload.queryString.parent_reference = addSettings.selectedData.parentReference742      let viewKey = null743      if (selectedData.rolePerspectives) {744        if (selectedData.rolePerspectives.Update) {745          viewKey = selectedData.rolePerspectives.Update.part_perspective_view_key746        }747      }748      if (viewKey) {749        payload.queryString.view_key = viewKey750      }751    } else {752      payload.queryString.view_key = addSettings.viewKey753    }754    payload.data = patchPayload755    // console.log('payload', payload)756    // console.log('updateComponentModelPrespectives', props.updateComponentModelPrespectives)757    // props.updateComponentModelPrespectives(payload)758    props.updateNestedModelPrespectives(payload)759  }760  let removeComponent = function (event) {761    event.preventDefault()762    // eslint-disable-next-line763    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})764    let removeObject = {}765    removeObject.op = 'remove'766    removeObject.path = `/${props.addSettings.deleteObject.subjectId}/`767    let payload = {}768    payload.id = props.addSettings.deleteObject.subjectId769    payload.queryString = {}770    if (props.addSettings.initiatedFrom === 'ParentNode') {771      let packages = JSON.parse(localStorage.getItem('packages'))772      let perspectives = _.result(_.find(packages.resources, function (obj) {773        return obj.key === 'ECO_SLA'774      }), 'perspectives')775      let perspectiveId = props.match.params.id776      let viewKey = null777      viewKey = _.result(_.find(perspectives, function (obj) {778        return (obj.perspective === parseInt(perspectiveId) && obj.role_key === 'Delete')779      }), 'view_key')780      payload.queryString.meta_model_perspective_id = perspectiveId781      payload.queryString.view_key = viewKey782      payload.queryString.apply_changes = true783      payload.data = {}784      let patchData = []785      patchData.push(removeObject)786      payload.data[perspectiveId] = patchData787      console.log('remove payload data', payload)788      props.removeModelPrespectives(payload)789    } else if (props.addSettings.initiatedFrom === 'ChildrenNode') {790      if (props.addSettings.deleteOperationLevel !== null) {791        let selectedObject = props.expandSettings.selectedObject[props.addSettings.deleteOperationLevel] || null792        // get perspective id and view key for delete operation793        if (selectedObject) {794          let rolePerspectives = selectedObject.rolePerspectives795          let perspectiveId = rolePerspectives.Delete.part_perspective_id796          let viewKey = rolePerspectives.Delete.part_perspective_view_key797          payload.queryString.meta_model_perspective_id = perspectiveId798          payload.queryString.view_key = viewKey799          payload.queryString.apply_changes = true800          payload.queryString.parent_reference = selectedObject.parentReference801          payload.data = {}802          let patchData = []803          patchData.push(removeObject)804          payload.data[perspectiveId] = patchData805          console.log('remove payload data', payload)806          props.removeModelPrespectives(payload)807        }808      }809    }810  }811  let buildRow = function (childData, currentLevel, subjectId) {812    let childLabelParts = props.expandSettings.metaModelPerspectives[currentLevel].parts813    let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))814    let editSelectedObject = expandSettings.selectedObject[currentLevel] || {}815    let showChildExpandIcon = props.expandSettings.selectedObject[currentLevel].showChildExpandIcon816    editSelectedObject.editSubjectId = subjectId817    let childRowColumn = []818    let faClass = 'fa fa-plus'819    let selectedObject = {}820    let headerColumn = []821    props.headerData.headerColumn.forEach(function (data, index) {822      let obj = {}823      obj.name = data824      obj.isProcessed = false825      obj.level = currentLevel826      headerColumn.push(obj)827    })828    if (childData) {829      childLabelParts.forEach(function (labelData, cix) {830        if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property831          if (labelData.standard_property === 'name') {832            selectedObject.name = childData[cix] ? childData[cix].value : ''833          }834        } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property835          if (labelData.constraint_perspective) {836            selectedObject.parentReference = childData[cix] ? childData[cix].value.parent_reference : null837            selectedObject.metaModelPerspectives = childLabelParts[cix].constraint_perspective838            selectedObject.containerPerspectiveId = childLabelParts[cix].container_perspective_id839            selectedObject.containerPerspectiveViewKey = childLabelParts[cix].container_perspective_view_key840            selectedObject.rolePerspectives = childLabelParts[cix].role_perspectives841            selectedObject.subjectId = subjectId842            // selectedObject.groupWithPrevious = labelData.group_with_previous843          }844          // if (childLabelParts[cix].role_perspectives === null) {845          //   faClass = ''846          // }847        }848      })849      childLabelParts.forEach(function (labelData, cix) {850        let childValue851        if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property852          if (labelData.standard_property === 'name') {853            childValue = childData[cix] ? childData[cix].value : ''854            editSelectedObject.editName = childData[cix] ? childData[cix].value : ''855            // selectedObject.name = childValue856            let columnId = props.headerData.headerColumn.indexOf(labelData.name)857            if (columnId !== -1) {858              headerColumn[columnId].isProcessed = true859              headerColumn[columnId].level = currentLevel860              if (columnId > 0) {861                for (let i = 0; i < columnId; i++) {862                  headerColumn[i].isProcessed = true863                  headerColumn[i].level = currentLevel864                  childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_start' + i}>{''}</td>)865                }866              }867            }868            if (props.expandSettings.level > currentLevel && currentLevel >= 0 && props.expandSettings.selectedObject[currentLevel + 1].name === childValue && showChildExpandIcon) {869              faClass = 'fa fa-minus'870            }871            if (!showChildExpandIcon) {872              faClass = ''873            }874            let availableAction = {...props.availableAction}875            let list = []876            if (showChildExpandIcon) {877              if (faClass !== '') {878                if (availableAction.Update) {879                  list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(editSelectedObject, 'ChildrenNode', 'Edit') }} > <img src='/assets/edit.png' alt='gear' className='td-icons' /></a>)880                }881                if (availableAction.Delete) {882                  list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject, currentLevel, 'ChildrenNode') }} > <img src='/assets/rubbish-bin.png' alt='delete' className='td-icons' /></a>)883                }884              }885            }886            childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}>887              <i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, currentLevel + 1) }} style={{'cursor': 'pointer'}} /> {childValue}&nbsp;&nbsp;888              <div className='btn-group-sm m-btn-group--pill btn-group' role='group' aria-label='First group'>889                {list}890              </div>891            </td>)892          }893        } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property894          // console.log('partData', partData, labelParts[ix], ix)895          if (labelData.constraint_perspective && !labelData.group_with_previous) {896            // selectedObject.parentReference = childPartData.value.parent_reference897            let columnHeaderName = labelData.constraint_perspective.name898            if (columnHeaderName != null && columnHeaderName.length > 0 && columnHeaderName.charAt(columnHeaderName.length - 1) === 's') {899              childValue = columnHeaderName.substring(0, columnHeaderName.length - 1)900            }901            // childValue = labelData.constraint_perspective.name902            // selectedObject.metaModelPerspectives = childLabelParts[cix].constraint_perspective903            if (labelData.role_perspectives) {904              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}><a onClick={() => openModal(selectedObject, 'ChildrenNode', 'Add')} href='javascript:void(0);' >{'Add ' + childValue}</a></td>)905            } else {906              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}>{''}</td>)907            }908            let columnId = props.headerData.headerColumn.indexOf(childValue)909            if (columnId !== -1) {910              headerColumn[columnId].isProcessed = true911              headerColumn[columnId].level = 0912            }913          }914          if (labelData.group_with_previous) {915            // selectedObject.parentReference = childPartData.value.parent_reference916            let columnHeaderName = labelData.constraint_perspective.name.toString()917            if (columnHeaderName != null && columnHeaderName.length > 0 && columnHeaderName.charAt(columnHeaderName.length - 1) === 's') {918              columnHeaderName = columnHeaderName.substring(0, columnHeaderName.length - 1)919            }920            let groupDataValue = childData[cix] ? childData[cix].value : null921            if (groupDataValue) {922              childValue = groupDataValue.items[0].subject_name923            }924            // childValue = labelData.constraint_perspective.name925            // selectedObject.metaModelPerspectives = childLabelParts[cix].constraint_perspective926            if (labelData.role_perspectives) {927              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}><a onClick={() => openModal(selectedObject, 'ChildrenNode', 'Add')} href='javascript:void(0);' >{'Add ' + childValue}</a></td>)928            } else {929              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}>{childValue}</td>)930            }931            let columnId = props.headerData.headerColumn.indexOf(columnHeaderName)932            if (columnId !== -1) {933              headerColumn[columnId].isProcessed = true934              headerColumn[columnId].level = 0935            }936          }937        }938      })939      let length = headerColumn.length940      headerColumn.forEach(function (columnData, cid) {941        if (!columnData.isProcessed & length !== cid + 1) {942          childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_last' + cid} >{''}</td>)943        }944      })945    }946    return childRowColumn947  }948  let genericExpandRow = function (parentRowName) {949    let childList = []950    let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))951    let expandLevel = expandSettings.level952    let rowToExpand = false953    expandSettings.selectedObject.forEach(function (data, index) {954      if (data.name === parentRowName) {955        rowToExpand = true956      }957    })958    if (rowToExpand) {959      // start from topmost level960      let startLevel = expandLevel961      do {962        if (expandLevel - startLevel >= 0 && startLevel >= 0) {963          if (expandSettings.selectedObject[startLevel].expandFlag) {964            // faClass = 'fa fa-minus'965            if (props.expandSettings.modelPerspectives[startLevel] && props.expandSettings.modelPerspectives[startLevel].length > 0) {966              // let childLabelParts = props.expandSettings.metaModelPerspectives[startLevel].parts967              let parentList = []968              props.expandSettings.modelPerspectives[startLevel].forEach(function (childData, idx) {969                let childRowColumn = []970                childRowColumn = buildRow(childData.parts, startLevel, childData.subject_id)971                parentList.push(972                  <tr>973                    {childRowColumn}974                  </tr>975                )976                let found = []977                if (childList.length > 0) {978                  let selectedObject = expandSettings.selectedObject[startLevel + 1]979                  let parts = childData.parts980                  found = _.filter(parts, {'value': selectedObject.name})981                }982                if (found.length > 0) {983                  if (childList.length > 0) {984                    childList.forEach(function (rowData, rix) {985                      parentList.push(rowData)986                    })987                  }988                }989              })990              childList = parentList991            } else {992              // childList = []993              // childList.push((994              //   <tr key={0}>995              //     <td colSpan='5'>{'No data to display'}</td>996              //   </tr>997              // ))998            }999          }1000        }1001        if (expandLevel - startLevel >= 0 && startLevel >= 0) {1002          startLevel = startLevel - 11003        } else {1004          console.log(' why else equal', startLevel, expandLevel)1005          break1006        }1007      } while (expandLevel - startLevel >= 0)1008      if (startLevel === -1) {1009        return childList1010      }1011    } else {1012      return ''1013    }1014  }1015  if (!props.headerData.toProcess) {1016    if (props.headerData.metaModelPerspective.length > 0) {1017      tableHeader = []1018      props.headerData.metaModelPerspective.forEach(function (data, index) {1019        data.parts.forEach(function (partData, idx) {1020          if (partData.standard_property !== null && partData.type_property === null && partData.attachments === null) { // Standard Property1021            if (partData.standard_property === 'name') {1022              tableHeader.push(<th key={index + 'col' + idx} className=''><h5>{partData.name}</h5></th>)1023            }1024          } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective === null && partData.attachments === null) { // Connection Property1025            tableHeader.push(<th key={index + 'col' + idx} className=''><h5>{partData.name}</h5></th>)1026          }1027        })1028      })1029    }1030    // tableHeader.push(<th key={'last'} className=''><h5>Action</h5></th>)1031  }1032  let listModelPrespectives = function () {1033    if (props.modelPrespectives !== '' && props.metaModelPerspective !== '') {1034      let labelParts = props.metaModelPerspective.resources[0].parts1035      // let crude = props.crude1036      // let mask = props.metaModelPerspective.resources[0].crude1037      // let crud = []1038      // for (let option in crude) {1039      //   if (crude.hasOwnProperty(option)) {1040      //     if (mask & crude[option]) {1041      //       crud.push(option)1042      //     }1043      //   }1044      // }1045      if (props.modelPrespectives.length > 1 && !props.expandSettings.processAPIResponse) {1046        let modelPrespectives = _.filter(props.modelPrespectives, {'error_code': null})1047        modelPrespectives.splice(-1, 1)1048        if (modelPrespectives.length > 1) {1049          let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))1050          // let expandLevel = expandSettings.level1051          modelPrespectivesList = modelPrespectives.slice(perPage * (currentPage - 1), ((currentPage - 1) + 1) * perPage).map(function (data, index) {1052            if (data.error_code === null) {1053              let headerColumn = []1054              props.headerData.headerColumn.forEach(function (data, index) {1055                let obj = {}1056                obj.name = data1057                obj.isProcessed = false1058                obj.level = null1059                headerColumn.push(obj)1060              })1061              let rowColumn = []1062              let faClass = 'fa fa-plus'1063              let childList = ''1064              let selectedObject = {}1065              selectedObject.subjectId = data.subject_id1066              if (data.parts) {1067                labelParts.forEach(function (labelData, cix) {1068                  if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property1069                    if (labelData.standard_property === 'name') {1070                      selectedObject.name = data.parts[cix] ? data.parts[cix].value : ''1071                    }1072                  } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property1073                    if (labelData.constraint_perspective) {1074                      selectedObject.parentReference = data.parts[cix] ? data.parts[cix].value.parent_reference : null1075                      selectedObject.metaModelPerspectives = labelParts[cix].constraint_perspective1076                      selectedObject.containerPerspectiveId = labelParts[cix].container_perspective_id1077                      selectedObject.containerPerspectiveViewKey = labelParts[cix].container_perspective_view_key1078                      selectedObject.rolePerspectives = labelParts[cix].role_perspectives1079                      selectedObject.subjectId = data.subject_id1080                    }1081                  }1082                })1083                data.parts.forEach(function (partData, ix) {1084                  if (partData !== null) {1085                    let value1086                    if (labelParts[ix].standard_property !== null && labelParts[ix].type_property === null) { // Standard Property1087                      // console.log('partData standard property', partData, labelParts[ix], ix)1088                      if (labelParts[ix].standard_property === 'name') {1089                        value = partData ? partData.value : ''1090                        // selectedObject.name = value1091                        let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)1092                        if (columnId !== -1) {1093                          headerColumn[columnId].isProcessed = true1094                          headerColumn[columnId].level = 01095                        }1096                        if (expandSettings.level !== null) {1097                          // expand row is clicked for first row1098                          if (expandSettings.level >= 0) {1099                            childList = genericExpandRow(value)1100                          }1101                        }1102                        if (expandSettings.level >= 0 && (expandSettings.selectedObject[0] && expandSettings.selectedObject[0].name === value)) {1103                          faClass = 'fa fa-minus'1104                        }1105                        let availableAction = {...props.availableAction}1106                        let list = []1107                        if (availableAction.Update) {1108                          list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(selectedObject, 'ParentNode', 'Edit') }} ><img src='/assets/edit.png' alt='gear' className='td-icons' /></a>)1109                        }1110                        if (availableAction.Delete) {1111                          list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject, null, 'ParentNode') }} ><img src='/assets/rubbish-bin.png' alt='delete' className='td-icons' /></a>)1112                        }1113                        rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}><i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, 0) }} style={{'cursor': 'pointer'}} /> {value}&nbsp;&nbsp;1114                          {list}1115                        </td>)1116                      }1117                    } else if (labelParts[ix].standard_property === null && labelParts[ix].type_property === null && labelParts[ix].constraint_perspective === null) { // Connection Property1118                      let targetComponents = []1119                      console.log('partdata', partData, ix)1120                      partData.value.forEach(function (data, index) {1121                        targetComponents.push(data.target_component.name)1122                      })1123                      value = targetComponents.toString()1124                      let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)1125                      if (columnId !== -1) {1126                        headerColumn[columnId].isProcessed = true1127                        headerColumn[columnId].level = 01128                      }1129                      rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}>{value}</td>)1130                    } else if (labelParts[ix].constraint_perspective !== null) { // Perspectives Property1131                      // selectedObject.parentReference = partData.value.parent_reference1132                      value = labelParts[ix].constraint_perspective.name1133                      // selectedObject.metaModelPerspectives = labelParts[ix].constraint_perspective1134                      // selectedObject.containerPerspectiveId = labelParts[ix].container_perspective_id1135                      // selectedObject.containerPerspectiveViewKey = labelParts[ix].container_perspective_view_key1136                      // selectedObject.rolePerspectives = labelParts[ix].role_perspectives1137                      let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)1138                      if (columnId !== -1) {1139                        headerColumn[columnId].isProcessed = true1140                        headerColumn[columnId].level = 01141                      }1142                      rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}><a href='javascript:void(0);' onClick={(event) => openModal(selectedObject, 'ChildrenNode', 'Add')} >{'Add ' + value}</a></td>)1143                    }1144                    // console.log('value', value)1145                    // if (toPush) {1146                    //   rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}>{isName && (<i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, 0) }} style={{'cursor': 'pointer'}} />)} {value}</td>)1147                    // }1148                  }1149                })1150              }1151              headerColumn.forEach(function (columnData, cid) {1152                if (!columnData.isProcessed) {1153                  rowColumn.push(<td className='' key={'ch_' + index + '_emp' + cid} >{''}</td>)1154                }1155              })1156              // let availableAction = {...props.availableAction}1157              // let list = []1158              // if (availableAction.Update) {1159              //   list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(selectedObject, 'ParentNode', 'Edit') }} >{'Edit'}</a>)1160              // }1161              // if (availableAction.Delete) {1162              //   list.push(<a onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject) }} href='javascript:void(0);'>{'Delete'}</a>)1163              // }1164              // rowColumn.push(<td className='' key={'last' + index} >{list}</td>)1165              return (1166                <table style={{'tableLayout': 'fixed', 'width': '100%'}} className='table table-striped- table-bordered table-hover table-checkable responsive no-wrap dataTable dtr-inline collapsed' id='m_table_1' aria-describedby='m_table_1_info' role='grid'>1167                  {index === 0 && (<thead>1168                    {tableHeader}1169                  </thead>)}1170                  <tbody>1171                    <tr key={'tr' + index}>1172                      {rowColumn}1173                    </tr>1174                    {childList}1175                  </tbody>1176                </table>1177              )1178            }1179          })1180          // props.setConnectionData(connectionData)1181        } else {1182          modelPrespectivesList = []1183          modelPrespectivesList.push((1184            <tr key={0}>1185              <td colSpan={labelParts.length}>{'No data to display'}</td>1186            </tr>1187          ))1188        }1189      } else {1190        modelPrespectivesList = []1191        modelPrespectivesList.push((1192          <tr key={0}>1193            <td colSpan={labelParts.length}>{'No data to display'}</td>1194          </tr>1195        ))1196      }1197    }1198  }1199  if (props.modelPrespectives && props.modelPrespectives !== '') {1200    totalPages = Math.ceil((props.modelPrespectives.length - 1) / perPage)1201    let i = 11202    while (i <= totalPages) {1203      let pageParameter = {}1204      pageParameter.number = i1205      pageParameter.class = ''1206      pageArray.push(pageParameter)1207      i++1208    }1209    pageArray = _.chunk(pageArray, paginationLimit)1210    listPage = _.filter(pageArray, function (group) {1211      let found = _.filter(group, {'number': currentPage})1212      if (found.length > 0) { return group }1213    })1214    listModelPrespectives()1215  }1216  if (currentPage === 1) {1217    previousClass = 'm-datatable__pager-link--disabled'1218  }1219  if (currentPage === totalPages) {1220    nextClass = 'm-datatable__pager-link--disabled'1221  }1222  let handleListAndPagination = function (page) {1223    listModelPrespectives()1224    props.setCurrentPage(page)1225    listPage = _.filter(pageArray, function (group) {1226      let found = _.filter(group, {'number': page})1227      if (found.length > 0) { return group }1228    })1229  }1230  let handlePrevious = function (event) {1231    event.preventDefault()1232    if (currentPage === 1) {1233      previousClass = styles.disabled1234    } else {1235      props.setCurrentPage(currentPage - 1)1236      handleListAndPagination(currentPage - 1)1237    }1238  }1239  let handleNext = function (event) {1240    event.preventDefault()1241    if (currentPage === totalPages) {1242      nextClass = styles.disabled1243    } else {1244      props.setCurrentPage(currentPage + 1)1245      handleListAndPagination(currentPage + 1)1246    }1247  }1248  let handlePage = function (page) {1249    if (page === 1) {1250      previousClass = 'm-datatable__pager-link--disabled'1251    } else if (page === totalPages) {1252      nextClass = 'm-datatable__pager-link--disabled'1253    }1254    handleListAndPagination(page)1255  }1256  // if (props.metaModelPerspective && props.metaModelPerspective !== '' && props.metaModelPerspective.error_code === null) {1257  //   perspectiveName = props.metaModelPerspective.resources[0].name1258  //   if (props.metaModelPerspective.resources[0].parts.length > 0) {1259  //     tableHeader = []1260  //     props.metaModelPerspective.resources[0].parts.forEach(function (data, index) {1261  //       if (data.standard_property !== null && data.type_property === null) { // Standard Property1262  //         if (data.standard_property === 'name') {1263  //           tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1264  //         }1265  //       } else if (data.standard_property === null && data.type_property === null && data.constraint_perspective === null) { // Connection Property1266  //         tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1267  //       } else if (data.standard_property === null && data.type_property === null && data.constraint_perspective !== null) { // Perspective Property1268  //         tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1269  //       }1270  //     })1271  //   }1272  //   tableHeader.push(<th key={'last'} className=''><h5>Action</h5></th>)1273  // }1274  let handleSelectChange = function (index) {1275    return function (newValue: any, actionMeta: any) {1276      console.log('newValue', newValue)1277      console.log('actionMeta', actionMeta)1278      console.log('index', index)1279      let connectionData = {...props.connectionData}1280      let selectedValues = connectionData.selectedValues1281      if (actionMeta.action === 'select-option' || actionMeta.action === 'remove-value') {1282        selectedValues[index] = newValue1283        connectionData.selectedValues = selectedValues1284        props.setConnectionData(connectionData)1285      }1286      if (actionMeta.action === 'clear') {1287        selectedValues[index] = null1288        connectionData.selectedValues = selectedValues1289        props.setConnectionData(connectionData)1290      }1291    }1292  }1293  let removeGroupedList = function (data, index) {1294    let addSettings = JSON.parse(JSON.stringify(props.addSettings))1295    let groupedPairedList = addSettings.groupedPairedList1296    if (data.type === 'OLD') {1297      // set remove payload1298    }1299    groupedPairedList.splice(index, 1)1300    addSettings.groupedPairedList = groupedPairedList1301    props.setAddSettings(addSettings)1302  }1303  let addGroupData = function () {1304    let connectionData = JSON.parse(JSON.stringify(props.connectionData))1305    let addSettings = JSON.parse(JSON.stringify(props.addSettings))1306    let allConnectionData = connectionData.data1307    let groupCollection = addSettings.groupCollection1308    let groupedPairedList = addSettings.groupedPairedList1309    let groupedPairedObject = {}1310    if (allConnectionData.length > 0) {1311      allConnectionData.forEach(function (data, index) {1312        if (groupCollection.includes(data.name)) {1313          let groupIndex = groupCollection.indexOf(data.name)1314          console.log('groupIndex', groupIndex)1315          let selectedValues = connectionData.selectedValues[index]1316          groupedPairedObject[groupIndex] = selectedValues1317          connectionData.selectedValues[index] = null1318          console.log('groupedPairedObject', groupedPairedObject)1319          console.log('selectedValues', selectedValues)1320        }1321      })1322      groupedPairedObject['type'] = 'NEW'1323      groupedPairedList.push(groupedPairedObject)1324      addSettings.groupedPairedList = groupedPairedList1325      // if (groupedPairedObject.length > 0) {1326      //   groupedPairedObject['type'] = 'NEW'1327      //   console.log('groupedPairedObject if', groupedPairedObject)1328      //   groupedPairedList.push(groupedPairedObject)1329      //   addSettings.groupedPairedList = groupedPairedList1330      // } else {1331      //   console.log('groupedPairedObject else', groupedPairedObject)1332      // }1333      props.setConnectionData(connectionData)1334      props.setAddSettings(addSettings)1335    }1336  }1337  if (props.connectionData !== '' && props.connectionData.operation.isComplete) {1338    // eslint-disable-next-line1339    mApp && mApp.unblockPage()1340    let connectionData = {...props.connectionData}1341    // let addSettings = {...props.addSettings}1342    if (!props.addSettings.isNexusPoint) {1343      connectionSelectBoxList = connectionData.data.map(function (data, index) {1344        let selectOptions = connectionData.selectOption[index].map(function (component, id) {1345          component.value = component.id1346          component.label = component.name1347          return component1348        })1349        return (1350          <div className='form-group row'>1351            <div className='m-form__group col-12' style={{'display': 'flex'}} >1352              <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1353              <div className='col-9'>1354                <Select1355                  className='input-sm m-input'1356                  placeholder={'Select ' + data.name}1357                  isMulti={data.max !== 1}1358                  isClearable1359                  value={connectionData.selectedValues[index]}1360                  onChange={handleSelectChange(index)}1361                  options={selectOptions}1362                />1363              </div>1364            </div>1365          </div>1366        )1367      })1368    } else {1369      let groupCollection = props.addSettings.groupCollection1370      connectionSelectBoxList = []1371      groupConnectionSelectBoxList = []1372      connectionData.data.forEach(function (data, index) {1373        let selectOptions = connectionData.selectOption[index].map(function (component, id) {1374          component.value = component.id1375          component.label = component.name1376          return component1377        })1378        if (groupCollection.includes(data.name)) {1379          // grouped collection list1380          groupConnectionSelectBoxList.push(1381            <div className='m-form__group col-5' style={{'display': 'flex'}} >1382              <div className='col-5'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1383              <div className='col-7'>1384                <Select1385                  className='input-sm m-input'1386                  placeholder={'Select ' + data.name}1387                  // isMulti={data.max !== 1}1388                  isClearable1389                  value={connectionData.selectedValues[index]}1390                  onChange={handleSelectChange(index)}1391                  options={selectOptions}1392                />1393              </div>1394            </div>1395          )1396        } else {1397          connectionSelectBoxList.push(1398            <div className='form-group row'>1399              <div className='m-form__group col-12' style={{'display': 'flex'}} >1400                <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1401                <div className='col-9'>1402                  <Select1403                    className='input-sm m-input'1404                    placeholder={'Select ' + data.name}1405                    isMulti={data.max !== 1}1406                    isClearable1407                    value={connectionData.selectedValues[index]}1408                    onChange={handleSelectChange(index)}1409                    options={selectOptions}1410                  />1411                </div>1412              </div>1413            </div>1414          )1415        }1416      })1417      if (groupConnectionSelectBoxList.length > 0) {1418        groupConnectionSelectBoxList.push(1419          <div className='m-form__group col-1'>1420            <button type='button' className='btn btn-outline-info btn-sm' onClick={addGroupData} >Add</button>1421          </div>1422        )1423      } else {1424        groupConnectionSelectBoxList = ''1425      }1426      if (props.addSettings.groupedPairedList) {1427        selectedKPIList = []1428        props.addSettings.groupedPairedList.forEach(function (data, index) {1429          let childBlock = []1430          if (data[0]) {1431            childBlock.push(<span className='m-list-search__result-item-text '><a href='' >{data[0].name}</a></span>)1432          }1433          if (data[1]) {1434            childBlock.push(<span className='m-list-search__result-item-text '><a href='' >{data[1].name}</a></span>)1435          }1436          selectedKPIList.push(<span className='m-list-search__result-item' >1437            {childBlock}1438            <button type='button' onClick={(event) => removeGroupedList(data, index)} className='btn btn-outline-danger btn-sm pull-right'>Remove</button>1439          </span>)1440        })1441      }1442    }1443    standardPropertyList = connectionData.standardProperty.map(function (data, index) {1444      if (data.standard_property === 'name') {1445        return (1446          <div className='form-group row'>1447            <div className='m-form__group col-12' style={{'display': 'flex'}}>1448              <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>1449              <div className='col-9'>1450                <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />1451              </div>1452            </div>1453          </div>1454        )1455      }1456      if (data.standard_property === 'description') {1457        return (1458          <div className='form-group row'>1459            <div className='m-form__group col-12' style={{'display': 'flex'}}>1460              <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>1461              <div className='col-9'>1462                <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />1463              </div>1464            </div>1465          </div>1466        )1467      }1468    })1469    businessPropertyList = connectionData.customerProperty.map(function (data, index) {1470      let value = null1471      if (data.type_property.property_type.key === 'Integer') {1472        value = data.type_property.int_value1473        return (<div className='form-group row'>1474          <div className='m-form__group col-12' style={{'display': 'flex'}}>1475            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1476            <div className='col-9'>1477              <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1478              {false && (<div className='form-control-feedback'>should be Number</div>)}1479            </div>1480          </div>1481        </div>)1482      } else if (data.type_property.property_type.key === 'Decimal') {1483        value = data.type_property.float_value1484        return (<div className='form-group row'>1485          <div className='m-form__group col-12' style={{'display': 'flex'}}>1486            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1487            <div className='col-9'>1488              <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1489              {false && (<div className='form-control-feedback'>should be Number</div>)}1490            </div>1491          </div>1492        </div>)1493      } else if (data.type_property.property_type.key === 'DateTime') {1494        value = data.type_property.date_time_value ? moment(data.type_property.date_time_value).format('DD MMM YYYY') : null1495        return (<div className='form-group row'>1496          <div className='m-form__group col-12' style={{'display': 'flex'}}>1497            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1498            <div className='col-9'>1499              <DatePicker1500                className='input-sm form-control m-input'1501                selected={data.type_property.date_time_value ? moment(data.type_property.date_time_value) : ''}1502                dateFormat='DD MMM YYYY'1503                onSelect={(date) => { editProperty(index, date) }}1504              />1505              {/* <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editTextProperty(index, childIndex, event.target.value) }} placeholder='Enter Here' /> */}1506              {false && (<div className='form-control-feedback'>should be Date</div>)}1507            </div>1508          </div>1509        </div>)1510      } else if (data.type_property.property_type.key === 'Text') {1511        value = data.type_property.text_value1512        return (<div className='form-group row'>1513          <div className='m-form__group col-12' style={{'display': 'flex'}}>1514            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1515            <div className='col-9'>1516              <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1517              {false && (<div className='form-control-feedback'>should be Text</div>)}1518            </div>1519          </div>1520        </div>)1521      } else if (data.type_property.property_type.key === 'List') {1522        let propertyOption = data.type_property.value_set.values.map((option, opIndex) => {1523          option.label = option.name1524          option.value = option.id1525          return option1526        })1527        let dvalue = data.type_property.value_set_value1528        if (data.type_property.value_set_value !== null) {1529          dvalue.label = data.type_property.value_set_value.name1530          dvalue.value = data.type_property.value_set_value.id1531        }1532        value = data.type_property.value_set_value ? data.type_property.value_set_value.name : null1533        return (<div className='form-group row'>1534          <div className='m-form__group col-12' style={{'display': 'flex'}}>1535            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1536            <Select1537              className='col-9'1538              placeholder='Select Options'1539              isClearable1540              defaultValue={dvalue}1541              onChange={handlePropertySelect(index)}1542              isSearchable={false}1543              name={'selectProperty'}1544              options={propertyOption}1545              />1546          </div>1547        </div>)1548      } else {1549        value = data.type_property.other_value1550        return (<div className='form-group row'>1551          <div className='m-form__group col-12' style={{'display': 'flex'}}>1552            <div className='col-2 col-form-label'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1553            <div className='col-9 '>1554              <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1555              {true && (<div className='form-control-feedback'>should be Text</div>)}1556            </div>1557          </div>1558        </div>)1559      }1560    })1561  }1562  if (props.addSettings.createResponse !== null) {1563    if (props.addSettings.createResponse.length > 0) {1564      messageList = props.addSettings.createResponse.map(function (data, index) {1565        if (data.error_code === null) {1566          if (data.message != null) {1567            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1568          } else {1569            if (props.addSettings.createResponse.length === 1) {1570              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1571            }1572          }1573        } else {1574          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1575        }1576      })1577    } else {1578      messageList = []1579      messageList.push((1580        <li key={0}>{'No data has been added.'}</li>1581      ))1582    }1583  }1584  if (props.addSettings.updateResponse !== null) {1585    if (props.addSettings.updateResponse.length > 0) {1586      messageList = props.addSettings.updateResponse.map(function (data, index) {1587        if (data.error_code === null) {1588          if (data.message != null) {1589            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1590          } else {1591            if (props.addSettings.updateResponse.length === 1) {1592              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1593            }1594          }1595        } else {1596          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1597        }1598      })1599    } else {1600      messageList = []1601      messageList.push((1602        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>1603      ))1604    }1605  }1606  if (props.addSettings.deleteResponse !== null) {1607    defaultStyle = customStylescrud1608    if (props.addSettings.deleteResponse.length > 0) {1609      messageList = props.addSettings.deleteResponse.map(function (data, index) {1610        if (data.error_code === null) {1611          if (data.message != null) {1612            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1613          } else {1614            if (props.addSettings.deleteResponse.length === 1) {1615              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1616            }1617          }1618        } else {1619          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1620        }1621      })1622    } else {1623      messageList = []1624      messageList.push((1625        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>1626      ))1627    }1628  }1629  console.log('businessPropertyList', businessPropertyList)1630return (1631  <div>1632    <div id='entitlementList'>1633      {/* The table structure begins */}1634      <div className='row'>1635        <div className='col-md-12'>1636          <div className='m_datatable' id='scrolling_vertical'>1637            <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll' id='scrolling_vertical' style={{}}>1638              <div>1639                <div className='m-portlet'>1640                  <div className='m-portlet__body'>1641                    <div className='row'>1642                      <div className='col-md-10' />1643                      {props.availableAction.Create && (<div className='col-md-2 float-right'>1644                        <button type='button' onClick={(event) => openModal(null, 'ParentNode', 'Add')} className='btn btn-outline-info btn-sm' style={{'float': 'right'}}>Add {perspectiveName}</button>&nbsp;1645                      </div>)}1646                    </div>1647                    <br />1648                    <div id='m_table_1_wrapper' className='dataTables_wrapper dt-bootstrap4'>1649                      <div className='row' style={{'marginBottom': '20px'}}>1650                        <div className='col-sm-12 col-md-6'>1651                          <div className='dataTables_length' id='m_table_1_length' style={{'display': 'flex'}}>1652                            <h5 style={{'margin': '8px'}}>Show</h5>1653                            <select value={props.perPage} name='m_table_1_length' onBlur={handleBlurdropdownChange} onChange={handledropdownChange} aria-controls='m_table_1' className='custom-select custom-select-sm form-control form-control-sm' style={{'height': '40px'}}>1654                              <option value={10}>10</option>1655                              <option value={25}>25</option>1656                              <option value={50}>50</option>1657                              <option value={100}>100</option>1658                            </select>1659                            <h5 style={{'margin': '8px'}}>Entries</h5>1660                            {/* </label> */}1661                          </div>1662                        </div>1663                        <div className='col-sm-12 col-md-6'>1664                          <div className='dataTables_length pull-right' id='m_table_1_length' style={{'display': 'flex'}}>1665                            <div style={{'display': 'flex'}}>1666                              <h5 style={{'margin': '10px'}}>Search</h5>1667                              <div className='m-input-icon m-input-icon--left'>1668                                <input type='text' className='form-control m-input' placeholder='Search...' id='generalSearch' ref={input => (searchTextBox = input)} onKeyUp={''} />1669                                <span className='m-input-icon__icon m-input-icon__icon--left'>1670                                  <span>1671                                    <i className='la la-search' />1672                                  </span>1673                                </span>1674                              </div>1675                            </div>1676                          </div>1677                        </div>1678                      </div>1679                    </div>1680                    <div className='dataTables_scrollBody' style={{position: 'relative', overflow: 'auto', width: '100%', 'maxHeight': '100vh'}}>1681                      {modelPrespectivesList}1682                    </div>1683                    <div className='row'>1684                      <div className='col-md-12' id='scrolling_vertical'>1685                        <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll pull-right' id='scrolling_vertical' style={{}}>1686                          <div className='m-datatable__pager m-datatable--paging-loaded clearfix'>1687                            <ul className='m-datatable__pager-nav'>1688                              <li><a href='' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev ' + previousClass} onClick={handlePrevious} data-page='4'><i className='la la-angle-left' /></a></li>1689                              {listPage[0] && listPage[0].map(function (page, index) {1690                                      if (page.number === currentPage) {1691                                              page.class = 'm-datatable__pager-link--active'1692                                            } else {1693                                              page.class = ''1694                                            }1695                                            return (<li key={index} >1696                                              <a href='' className={'m-datatable__pager-link m-datatable__pager-link-number ' + page.class} data-page={page.number} title={page.number} onClick={(event) => { event.preventDefault(); handlePage(page.number) }} >{page.number}</a>1697                                            </li>)1698                                          })}1699                              <li><a href='' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next ' + nextClass} onClick={handleNext} data-page='4'><i className='la la-angle-right' /></a></li>1700                            </ul>1701                          </div>1702                        </div>1703                      </div>1704                    </div>1705                  </div>1706                </div>1707              </div>1708            </div>1709          </div>1710        </div>1711      </div>1712    </div>1713    <div>1714      <ReactModal isOpen={props.addSettings.isModalOpen}1715        onRequestClose={closeModal}1716        // className='modal-dialog modal-lg'1717        style={customStylescrud}1718        >1719        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1720        <div className={''}>1721          <div className=''>1722            <div className='modal-content'>1723              <div className='modal-header'>1724                {props.addSettings.createResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Add {perspectiveName}</h4>)}1725                {props.addSettings.createResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Create Report</h4>)}1726                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1727                  <span aria-hidden='true'>Ã</span>1728                </button>1729              </div>1730              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>1731                {props.addSettings.createResponse === null && (<div className='col-md-12'>1732                  {/* {messageBlock} */}1733                  <div className='form-group m-form__group row'>1734                    <div className='col-8'>1735                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1736                    </div>1737                  </div>1738                  {standardPropertyList}1739                  {businessPropertyList}1740                  {connectionSelectBoxList}1741                  <div className='form-group row'>1742                    {groupConnectionSelectBoxList}1743                  </div>1744                  {props.addSettings.isNexusPoint && (<div className='m-section m-section--last'>1745                    <div className='m-section__content'>1746                      <div className='m-demo'>1747                        <div className='m-demo__preview'>1748                          <div className='m-list-search'>1749                            <div className='m-list-search__results'>1750                              <span className='m-list-search__result-category m-list-search__result-category--first'>1751                                          Select KPI(s)1752                                      </span>1753                              {selectedKPIList}1754                            </div>1755                          </div>1756                        </div>1757                      </div>1758                    </div>1759                  </div>)}1760                </div>)}1761                {props.addSettings.createResponse !== null && (<div className='m-list-search__results'>1762                  {messageList}1763                </div>)}1764              </div>1765              <div className='modal-footer'>1766                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1767                {props.addSettings.createResponse === null && !props.addSettings.isNexusPoint && (<button className='btn btn-outline-info btn-sm' onClick={createComponent} >Add</button>)}1768                {props.addSettings.createResponse === null && props.addSettings.isNexusPoint && (<button className='btn btn-outline-info btn-sm' onClick={createNexusComponent} >Add</button>)}1769              </div>1770            </div>1771          </div>1772        </div>1773      </ReactModal>1774      <ReactModal isOpen={props.addSettings.isEditModalOpen}1775        onRequestClose={closeModal}1776        // className='modal-dialog modal-lg'1777        style={customStylescrud}1778        >1779        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1780        <div className={''}>1781          <div className=''>1782            <div className='modal-content' >1783              <div className='modal-header'>1784                {props.addSettings.updateResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Edit {updatePerspectiveName}</h4>)}1785                {props.addSettings.updateResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Update Report</h4>)}1786                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1787                  <span aria-hidden='true'>Ã</span>1788                </button>1789              </div>1790              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>1791                {props.addSettings.updateResponse === null && (<div className='col-md-12'>1792                  {/* {messageBlock} */}1793                  <div className='form-group m-form__group row'>1794                    <div className='col-8'>1795                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1796                    </div>1797                  </div>1798                  {standardPropertyList}1799                  {businessPropertyList}1800                  {connectionSelectBoxList}1801                  <div className='form-group row'>1802                    {groupConnectionSelectBoxList}1803                  </div>1804                  {props.addSettings.isNexusPoint && (<div className='m-section m-section--last'>1805                    <div className='m-section__content'>1806                      <div className='m-demo'>1807                        <div className='m-demo__preview'>1808                          <div className='m-list-search'>1809                            <div className='m-list-search__results'>1810                              <span className='m-list-search__result-category m-list-search__result-category--first'>1811                                          Select KPI(s)1812                                      </span>1813                              {selectedKPIList}1814                            </div>1815                          </div>1816                        </div>1817                      </div>1818                    </div>1819                  </div>)}1820                </div>)}1821                {props.addSettings.updateResponse !== null && (<div className='m-list-search__results'>1822                  {messageList}1823                </div>)}1824              </div>1825              <div className='modal-footer'>1826                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1827                {props.addSettings.updateResponse === null && !props.addSettings.isNexusPoint && (<button className='btn btn-outline-info btn-sm' onClick={updateComponent} >Update</button>)}1828                {props.addSettings.updateResponse === null && props.addSettings.isNexusPoint && (<button className='btn btn-outline-info btn-sm' onClick={updateNexusComponent} >Update</button>)}1829              </div>1830            </div>1831          </div>1832        </div>1833      </ReactModal>1834      <ReactModal isOpen={props.addSettings.isDeleteModalOpen}1835        onRequestClose={closeModal}1836        className='modal-dialog '1837        style={defaultStyle} >1838        <div className={styles.modalwidth}>1839          <div className=''>1840            <div className='modal-content'>1841              <div className='modal-header'>1842                {props.addSettings.deleteResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Delete {deletePerspectiveName}</h4>)}1843                {props.addSettings.deleteResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Delete Report</h4>)}1844                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1845                  <span aria-hidden='true'>Ã</span>1846                </button>1847              </div>1848              {props.addSettings.deleteResponse === null && (<div className='modal-body'>1849                <div>1850                  <h6>Confirm deletion of {deletePerspectiveName}</h6>1851                </div>1852              </div>)}1853              {props.addSettings.deleteResponse !== null && (<div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}} >1854                {messageList}1855              </div>)}1856              <div className='modal-footer'>1857                <button type='button' onClick={closeModal} id='m_login_signup' className='btn btn-outline-info btn-sm'>Close</button>1858                {props.addSettings.deleteResponse === null && (<button type='button' id='m_login_signup' className='btn btn-outline-info btn-sm' onClick={removeComponent}>Confirm</button>)}1859              </div>1860            </div>1861          </div>1862        </div>1863      </ReactModal>1864    </div>1865    {/* <Discussion name={'Entitlements'} TypeKey='Entitlement' type='ComponentType' {...props} />1866    <NewDiscussion contextId={contextId} name={'Entitlements'} type='ComponentType' {...props} /> */}1867  </div>1868      )1869  }1870  PerspectiveHierarchy.propTypes = {1871    addSettings: PropTypes.any,1872    modelPrespectives: PropTypes.any,1873    metaModelPerspective: PropTypes.any,1874    currentPage: PropTypes.any,1875    perPage: PropTypes.any,1876    // crude: PropTypes.any,1877    availableAction: PropTypes.any,1878    connectionData: PropTypes.any,1879    expandSettings: PropTypes.any,1880    headerData: PropTypes.any...

balancedScorecardComponent.js

Source:balancedScorecardComponent.js

1import React from 'react'2import _ from 'lodash'3import debounce from 'lodash/debounce'4import ReactModal from 'react-modal'5import Select from 'react-select'6import moment from 'moment'7import PropTypes from 'prop-types'8import styles from './balancedScorecardComponent.scss'9import 'react-datepicker/dist/react-datepicker.css'10import DatePicker from 'react-datepicker'11// eslint-disable-next-line12// import LoaderComponent from '../loader/loaderComponent'13ReactModal.setAppElement('#root')14let comparer = function (otherArray) {15  return function (current) {16    return otherArray.filter(function (other) {17      return other.value === current.value && other.display === current.display18    }).length === 019  }20}21const customStylescrud = { content: { top: '10%', left: '8%', background: 'none', border: '0px', overflow: 'none', margin: 'auto' } }22export default function BalancedScorecard (props) {23  let defaultStyle = {'content': {'top': '20%'}}24  let availableCrudOperation = props.availableCrudOperation25  let copyModelPrespectives = props.copyModelPrespectives26  let perspectiveName = ''27  let standardPropertyList = ''28  let connectionSelectBoxList = ''29  let businessPropertyList = ''30  let searchTextBox31  let perPage = props.perPage32  let currentPage = props.currentPage33  let nextClass = ''34  let previousClass = ''35  let pageArray = []36  let listPage = []37  let paginationLimit = 638  let modelPrespectivesList = ''39  let totalPages40  let tableHeader = []41  let messageList = ''42  let deletePerspectiveName = props.addSettings.deleteObject ? props.addSettings.deleteObject.name : ''43  let updatePerspectiveName = props.addSettings.selectedData ? props.addSettings.selectedData.editName : ''44  // let expandSettings = props.expandSettings45  if (props.addSettings.isEditModalOpen) {46    if (props.addSettings.selectedData) {47      if (props.addSettings.selectedData.initiatedFrom === 'ParentNode') {48        updatePerspectiveName = props.addSettings.selectedData.name49      } else if (props.addSettings.selectedData.initiatedFrom === 'ChildrenNode') {50        updatePerspectiveName = props.addSettings.selectedData.editName51      }52    }53  }54  if (props.addSettings.isModalOpen) {55    if (props.addSettings.selectedData) {56      perspectiveName = props.addSettings.selectedData.metaModelPerspectives.name57    } else {58      perspectiveName = props.metaModelPerspective ? props.metaModelPerspective.resources[0].name : ''59    }60  } else {61    perspectiveName = props.metaModelPerspective ? props.metaModelPerspective.resources[0].name : ''62  }63  let handleInputChange = debounce((e) => {64    // eslint-disable-next-line65    mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})66    let searchText = searchTextBox ? searchTextBox.value : ''67    let originalData = copyModelPrespectives68    if (searchText.trim() !== '') {69      if (originalData !== '') {70        let list = _.filter(originalData, function (data, index) {71          if (data.parts) {72            if ((data.parts[0].value.toLowerCase()).match(searchText.toLowerCase())) {73              return data74            }75          }76        })77        let payload = {}78        payload.data = list79        payload.copyData = props.copyModelPrespectives80        props.setModalPerspectivesData(payload)81      }82      // eslint-disable-next-line83      mApp && mApp.unblockPage()84    } else {85      let payload = {}86      payload.data = props.copyModelPrespectives87      payload.copyData = props.copyModelPrespectives88      props.setModalPerspectivesData(payload)89      // eslint-disable-next-line90      mApp && mApp.unblockPage()91    }92    props.setCurrentPage(1)93  }, 500)94  let handleClick = function (data, level) {95    let expandFlag = true96    let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))97    let selectedObject = expandSettings.selectedObject[level]98    if (selectedObject && selectedObject.name === data.name) {99      expandFlag = !selectedObject.expandFlag100      if (!expandFlag) {101        if (level > 0) {102          level = level - 1103          expandSettings.selectedObject.length = level + 1104          expandSettings.metaModelPerspectives.length = level + 1105          expandSettings.modelPerspectives.length = level + 1106        } else {107          level = null108          expandSettings.selectedObject.length = 0109          expandSettings.metaModelPerspectives.length = 0110          expandSettings.modelPerspectives.length = 0111        }112      }113    } else {114      expandFlag = true115      expandSettings.metaModelPerspectives[level] = data.metaModelPerspectives116      expandSettings.selectedObject[level] = data117      expandSettings.selectedObject[level].expandFlag = expandFlag118      if (data.rolePerspectives) {119        let headerColumns = props.headerData.headerColumn120        if (headerColumns[headerColumns.length - 1] === data.metaModelPerspectives.name) {121          expandSettings.selectedObject[level].showChildExpandIcon = false122        } else {123          expandSettings.selectedObject[level].showChildExpandIcon = true124        }125      } else {126        expandSettings.selectedObject[level].showChildExpandIcon = false127      }128    }129    if (expandFlag) {130      if (data.metaModelPerspectives) {131        expandSettings.processAPIResponse = true132        // eslint-disable-next-line133        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})134        // eslint-disable-next-line135        // $.blockUI({136        //   // eslint-disable-next-line137        //   message: $('#blockMessage'),138        //   // showOverlay: false,139        //   overlayCSS: { background: 'none', opacity: 1 },140        //   css: {141        //     border: 'none',142        //     // opacity: 1,143        //     background: 'none'144        //   }145        // })146        let payload = {}147        payload['meta_model_perspective_id'] = data.metaModelPerspectives.id148        payload['view_key'] = data.metaModelPerspectives.view_key149        payload['parent_reference'] = data.parentReference150        payload['filter[0]'] = data.childFilter151        if (data.containerPerspectiveId) {152          payload['container_meta_model_perspective_id'] = data.containerPerspectiveId153          payload['container_view_key'] = data.containerPerspectiveViewKey154        }155        props.fetchNestedModelPrespectives(payload)156      }157    }158    expandSettings.level = level159    props.setExpandSettings(expandSettings)160    // eslint-disable-next-line161    // mApp && mApp.block('#supplierList', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})162  }163  let editProperty = function (index, value) {164    let connectionData = {...props.connectionData}165    let customerProperty = connectionData.customerProperty166    let propertyType = customerProperty[index].type_property.property_type167    if (propertyType.key === 'Boolean') {168      customerProperty[index].type_property.boolean_value = value169    } else if (propertyType.key === 'Integer') {170      customerProperty[index].type_property.int_value = value171    } else if (propertyType.key === 'Decimal') {172      customerProperty[index].type_property.float_value = value173    } else if (propertyType.key === 'DateTime') {174      customerProperty[index].type_property.date_time_value = value.format('DD MMM YYYY')175    } else if (propertyType.key === 'Text') {176      customerProperty[index].type_property.text_value = value177    } else {178      customerProperty[index].type_property.other_value = value179    }180    connectionData.customerProperty = customerProperty181    props.setConnectionData(connectionData)182  }183  let handlePropertySelect = function (index) {184    return function (newValue: any, actionMeta: any) {185      let connectionData = JSON.parse(JSON.stringify(props.connectionData))186      let customerProperty = connectionData.customerProperty187      if (actionMeta.action === 'select-option') {188        customerProperty[index].type_property.value_set_value = newValue189      }190      if (actionMeta.action === 'clear') {191        customerProperty[index].type_property.value_set_value = newValue192      }193      connectionData.customerProperty = customerProperty194      props.setConnectionData(connectionData)195    }196  }197  let handleBlurdropdownChange = function (event) {198    console.log('handle Blur change', event.target.value)199  }200  let handledropdownChange = function (event) {201    props.setPerPage(parseInt(event.target.value))202  }203  let openModal = function (data, level, operationType) {204    let addSettings = {...props.addSettings}205    // check Expand level and set Level on open Modal operation206    // let expandSettings = {...props.expandSettings}207    // let levelName = ''208    // if (operationType === 'Add') {209    //   levelName = addSettings.name210    // } else if (operationType === 'Edit') {211    //   levelName = addSettings.editName212    // }213    // levelName = data.name214    // let selectedObjects = expandSettings.selectedObject215    // var index = selectedObjects.findIndex(function (selectedObject) {216    //   return selectedObject.name === levelName.toString()217    // })218    // console.log('found index', index, selectedObjects, levelName, data)219    // if (index >= 0) {220    //   expandSettings.selectedObject.length = index221    //   expandSettings.metaModelPerspectives.length = index222    //   expandSettings.modelPerspectives.length = index223    //   expandSettings.level = level224    //   props.setExpandSettings(expandSettings)225    // }226    // end of code for check level operation227    addSettings.isNexusPoint = false228    let perspectiveId = ''229    let viewKey = ''230    if (operationType === 'Add') {231      addSettings.isModalOpen = true232    } else if (operationType === 'Edit') {233      addSettings.isEditModalOpen = true234    }235    addSettings.name = ''236    addSettings.description = ''237    addSettings.selectedData = data238    if (level === 'ParentNode') {239      let packages = JSON.parse(localStorage.getItem('packages'))240      let perspectives = _.result(_.find(packages.resources, function (obj) {241        return obj.key === 'ECO_SLA'242      }), 'perspectives')243      if (operationType === 'Add') {244        let perspectiveObject = _.find(perspectives, function (obj) {245          return (obj.key === 'PenaltyAgreement_Add' && obj.role_key === 'Create')246        })247        perspectiveId = perspectiveObject.perspective248        viewKey = perspectiveObject.view_key249      } else if (operationType === 'Edit') {250        let perspectiveObject = _.find(perspectives, function (obj) {251          return (obj.key === 'PenaltyAgreement_Update' && obj.role_key === 'Update')252        })253        perspectiveId = perspectiveObject.perspective254        viewKey = perspectiveObject.view_key255      }256      if (viewKey) {257        let payload = {}258        payload.id = perspectiveId259        payload.viewKey = {'view_key': viewKey}260        props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)261        if (operationType === 'Edit') {262          let paydata = {}263          paydata['meta_model_perspective_id'] = perspectiveId264          paydata['view_key'] = viewKey265          let modelPerspectivePayload = {}266          modelPerspectivePayload.id = data.subjectId267          modelPerspectivePayload.data = paydata268          props.fetchCrudModelPrespectives(modelPerspectivePayload)269        }270        // eslint-disable-next-line271        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})272      }273    }274    if (level === 'ChildrenNode') {275      if (data) {276        if (data.rolePerspectives) {277          let rolePerspectives = data.rolePerspectives278          let payload = {}279          if (operationType === 'Add') {280            perspectiveId = rolePerspectives.Create.part_perspective_id281            viewKey = rolePerspectives.Create.part_perspective_view_key282          } else if (operationType === 'Edit') {283            perspectiveId = rolePerspectives.Update.part_perspective_id284            viewKey = rolePerspectives.Update.part_perspective_view_key285          }286          payload.id = perspectiveId287          payload.viewKey = {}288          payload.viewKey.view_key = viewKey289          if (data.parentReference) {290            payload.viewKey.parent_reference = data.parentReference291          }292          props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)293          if (operationType === 'Edit') {294            let paydata = {}295            paydata['meta_model_perspective_id'] = perspectiveId296            paydata['view_key'] = viewKey297            if (data.parentReference) {298              paydata['parent_reference'] = data.parentReference299            }300            let modelPerspectivePayload = {}301            modelPerspectivePayload.id = data.editSubjectId302            modelPerspectivePayload.data = paydata303            props.fetchCrudModelPrespectives(modelPerspectivePayload)304          }305          // eslint-disable-next-line306          mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})307        } else {308          addSettings.isModalOpen = false309          addSettings.isEditModalOpen = false310          // let payload = {}311          // perspectiveId = data.metaModelPerspectives.id312          // let payloadData = {}313          // if (data.containerPerspectiveId !== null) {314          //   payloadData.315          // }316          // perspectiveId = data.containerPerspectiveId317          // viewKey = data.containerPerspectiveViewKey318          // payload.id = data.containerPerspectiveId319          // payload.viewKey = {'view_key': data.containerPerspectiveViewKey}320          // props.fetchCrudMetaModelPrespective && props.fetchCrudMetaModelPrespective(payload)321          // // eslint-disable-next-line322          // mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})323        }324      }325    }326    addSettings.parentName = data.name327    addSettings.initiatedFrom = level328    addSettings.perspectiveId = perspectiveId329    addSettings.viewKey = viewKey330    props.setAddSettings(addSettings)331  }332  let openDeleteModal = function (data, level, initiatedFrom) {333    let addSettings = {...props.addSettings}334    addSettings.isDeleteModalOpen = true335    addSettings.deleteObject = data336    addSettings.deleteOperationLevel = level337    addSettings.initiatedFrom = initiatedFrom338    props.setAddSettings(addSettings)339  }340  let closeModal = function () {341    let addSettings = {...props.addSettings}342    addSettings.isModalOpen = false343    addSettings.isDeleteModalOpen = false344    addSettings.isEditModalOpen = false345    addSettings.deleteObject = null346    addSettings.createResponse = null347    addSettings.updateResponse = null348    addSettings.deleteResponse = null349    addSettings.selectedData = null350    props.setAddSettings(addSettings)351    props.setConnectionData('')352  }353  let editName = function (event) {354    let addSettings = JSON.parse(JSON.stringify(props.addSettings))355    addSettings.name = event.target.value356    if (props.addSettings.isEditModalOpen) {357      let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))358      let viewKey = props.addSettings.selectedData.metaModelPerspectives.view_key359      let metaModelPerspectives = expandSettings.metaModelPerspectives360      let selectedLevel = _.findIndex(metaModelPerspectives, {'view_key': viewKey})361      let expandLevel = expandSettings.level362      console.log('selectedLevel', selectedLevel)363      if (selectedLevel >= 0 && selectedLevel < expandLevel) {364        expandSettings.selectedObject[selectedLevel + 1].name = event.target.value365        props.setExpandSettings(expandSettings)366      }367    }368    props.setAddSettings(addSettings)369  }370  let editDescription = function (event) {371    let addSettings = JSON.parse(JSON.stringify(props.addSettings))372    addSettings.description = event.target.value373    props.setAddSettings(addSettings)374  }375  let createComponent = function (event) {376    event.preventDefault()377    // eslint-disable-next-line378    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})379    let addSettings = JSON.parse(JSON.stringify(props.addSettings))380    let patchPayload = []381    let obj = {}382    obj.op = 'add'383    obj.path = '/-'384    obj.value = {}385    obj.value.parts = []386    let connectionData = {...props.connectionData}387    connectionData.selectedValues.forEach(function (data, index) {388      if (Array.isArray(data)) {389        if (data.length > 0) {390          let connections = []391          data.forEach(function (selectedValue, ix) {392            let obj = {}393            obj.target_id = selectedValue.id394            connections.push(obj)395          })396          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}397        } else {398          obj.value.parts[connectionData.data[index].partIndex] = {}399        }400      } else {401        if (data) {402          let connections = []403          let obj1 = {}404          obj1.target_id = data.id405          connections.push(obj1)406          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}407        } else {408          obj.value.parts[connectionData.data[index].partIndex] = {}409        }410      }411    })412    connectionData.standardProperty.forEach(function (data, index) {413      if (data.standard_property === 'name') {414        obj.value.parts[data.partIndex] = {'value': addSettings.name}415      } else if (data.standard_property === 'description') {416        obj.value.parts[data.partIndex] = {'value': addSettings.description}417      }418    })419    connectionData.customerProperty.forEach(function (data, index) {420      if (data.type_property.property_type.key === 'Boolean') {421        obj.value.parts[data.partIndex] = {value: {'boolean_value': data.type_property.boolean_value}}422      } else if (data.type_property.property_type.key === 'Integer') {423        obj.value.parts[data.partIndex] = {value: {'int_value': data.type_property.int_value}}424      } else if (data.type_property.property_type.key === 'Decimal') {425        obj.value.parts[data.partIndex] = {value: {'float_value': data.type_property.float_value}}426      } else if (data.type_property.property_type.key === 'DateTime') {427        obj.value.parts[data.partIndex] = {value: {'date_time_value': data.type_property.date_time_value}}428      } else if (data.type_property.property_type.key === 'Text') {429        obj.value.parts[data.partIndex] = {value: {'text_value': data.type_property.text_value}}430      } else if (data.type_property.property_type.key === 'List') {431        obj.value.parts[data.partIndex] = {value: {'value_set_value_id': data.type_property.value_set_value ? data.type_property.value_set_value.id : null}}432      } else {433        obj.value.parts[data.partIndex] = {value: {'other_value': data.type_property.other_value}}434      }435    })436    if (addSettings.isNexusPoint) {437      let metricObject = {'target_id': connectionData.metricSelectedValue[0].subjectId}438      let metricPointArray = []439      metricPointArray.push(metricObject)440      obj.value.parts.push({'value': metricPointArray})441    }442    patchPayload.push(obj)443    let payload = {}444    payload.queryString = {}445    payload.queryString.meta_model_perspective_id = props.addSettings.perspectiveId446    payload.queryString.view_key = props.addSettings.viewKey447    payload.queryString.apply_changes = true448    if (addSettings.initiatedFrom === 'ChildrenNode') {449      payload.queryString.parent_reference = addSettings.selectedData.parentReference450    }451    payload.data = {}452    payload.data[props.addSettings.perspectiveId] = patchPayload453    console.log('payload', payload)454    props.updateModelPrespectives(payload)455  }456  let updateComponent = function (event) {457    event.preventDefault()458    // eslint-disable-next-line459    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})460    let addSettings = JSON.parse(JSON.stringify(props.addSettings))461    let connectionData = JSON.parse(JSON.stringify(props.connectionData))462    let labelParts = props.crudMetaModelPerspective.resources[0].parts463    let data = addSettings.updateObject464    let patchPayload = []465    if (data.parts) {466      labelParts.forEach(function (partData, index) {467        let valueType = ''468        let obj = {}469        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property470          obj.op = 'replace'471          valueType = partData.standard_property472          obj.path = '/parts/' + index + '/' + valueType473          if (partData.standard_property === 'name') {474            obj.value = props.addSettings.name475          }476          if (partData.standard_property === 'description') {477            obj.value = props.addSettings.description478          }479          patchPayload.push(obj)480        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property481          let dataIndex = connectionData.data.findIndex(p => p.name === partData.name)482          console.log('dataIndex', dataIndex)483          if (dataIndex !== -1) {484            // found index485            let max = connectionData.data[dataIndex].max486            let initialSelectedValue = connectionData.initialSelectedValues[dataIndex] || []487            let selectedValue = connectionData.selectedValues[dataIndex]488            console.log('initialSelectedValue', initialSelectedValue)489            console.log('selectedValue', selectedValue)490            let onlyInInitial = []491            if (initialSelectedValue) {492              if (max === 1) {493                let temp = []494                temp.push(initialSelectedValue)495                initialSelectedValue = temp496              }497            }498            if (selectedValue) {499              if (max === 1) {500                let temp = []501                temp.push(selectedValue)502                selectedValue = temp503              }504            }505            if (initialSelectedValue) {506              if (selectedValue) {507                onlyInInitial = initialSelectedValue.filter(comparer(selectedValue))508              } else {509                onlyInInitial = initialSelectedValue510              }511            }512            let onlyInFinal = []513            if (selectedValue) {514              if (initialSelectedValue) {515                onlyInFinal = selectedValue.filter(comparer(initialSelectedValue))516              } else {517                onlyInFinal = selectedValue518              }519            }520            // remove operation payload521            if (onlyInInitial.length > 0) {522              let connectionIdArray = data.parts[index].value523              let value = []524              onlyInInitial.forEach(function (removeData, rid) {525                let found = _.find(connectionIdArray, function (obj) { return (obj.target_component.id === removeData.id) })526                console.log('found ----', found)527                if (found) {528                  // set connection id529                  value.push(found.connection.id)530                }531              })532              let obj = {}533              obj.op = 'remove'534              obj.value = value535              valueType = 'value/-'536              obj.path = '/parts/' + index + '/' + valueType537              patchPayload.push(obj)538              console.log('connectionId obj', connectionIdArray, obj)539            }540            console.log('index', dataIndex)541            console.log('onlyInInitial', onlyInInitial)542            console.log('onlyInFinal', onlyInFinal)543            let existingTargetComponent = connectionData.selectedValues[dataIndex]544            console.log('existingTargetComponent', existingTargetComponent)545            if (onlyInFinal.length > 0) {546              let connections = []547              onlyInFinal.forEach(function (targetComponent, rid) {548                let obj = {}549                obj.target_id = targetComponent.id550                connections.push(obj)551              })552              let obj = {}553              obj.op = 'add'554              obj.value = connections555              valueType = 'value/-'556              obj.path = '/parts/' + index + '/' + valueType557              patchPayload.push(obj)558              console.log('add obj', obj)559            }560          } else {561            console.log('index', dataIndex)562          }563        } if (partData.standard_property === null && partData.type_property !== null) {564          let obj = {}565          obj.op = 'replace'566          let customerProperty = _.find(connectionData.customerProperty, function (obj) {567            return obj.name === partData.name568          })569          console.log('customerProperty', customerProperty)570          if (customerProperty) {571            if (customerProperty.type_property.property_type.key === 'Boolean') {572              valueType = `boolean_value`573              obj.value = customerProperty.type_property.boolean_value574            } else if (customerProperty.type_property.property_type.key === 'Integer') {575              valueType = `int_value`576              obj.value = customerProperty.type_property.int_value577            } else if (customerProperty.type_property.property_type.key === 'Decimal') {578              valueType = `float_value`579              obj.value = customerProperty.type_property.float_value580            } else if (customerProperty.type_property.property_type.key === 'DateTime') {581              valueType = `date_time_value`582              obj.value = customerProperty.type_property.date_time_value583            } else if (customerProperty.type_property.property_type.key === 'Text') {584              valueType = `text_value`585              obj.value = customerProperty.type_property.text_value586            } else if (customerProperty.type_property.property_type.key === 'List') {587              valueType = `value_set_value_id`588              obj.value = customerProperty.type_property.value_set_value ? customerProperty.type_property.value_set_value.id : null589            } else {590              valueType = `other_value`591              obj.value = customerProperty.type_property.other_value592            }593            obj.path = '/parts/' + index + '/' + valueType594            patchPayload.push(obj)595          }596        }597      })598    }599    let selectedData = addSettings.selectedData600    let payload = {}601    payload.id = data.subject_id602    payload.queryString = {}603    payload.queryString.meta_model_perspective_id = props.crudMetaModelPerspective.resources[0].id604    payload.queryString.apply_changes = true605    if (addSettings.initiatedFrom === 'ChildrenNode') {606      payload.queryString.parent_reference = addSettings.selectedData.parentReference607      let viewKey = null608      if (selectedData.rolePerspectives) {609        if (selectedData.rolePerspectives.Update) {610          viewKey = selectedData.rolePerspectives.Update.part_perspective_view_key611        }612      }613      if (viewKey) {614        payload.queryString.view_key = viewKey615      }616    } else {617      payload.queryString.view_key = addSettings.viewKey618    }619    payload.data = patchPayload620    props.updateNestedModelPrespectives(payload)621  }622  let removeComponent = function (event) {623    event.preventDefault()624    // eslint-disable-next-line625    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})626    let removeObject = {}627    removeObject.op = 'remove'628    removeObject.path = `/${props.addSettings.deleteObject.subjectId}/`629    let payload = {}630    payload.id = props.addSettings.deleteObject.subjectId631    payload.queryString = {}632    if (props.addSettings.initiatedFrom === 'ParentNode') {633      let viewKey = null634      let packages = JSON.parse(localStorage.getItem('packages'))635      let perspectives = _.result(_.find(packages.resources, function (obj) {636        return obj.key === 'ECO_SLA'637      }), 'perspectives')638      let perspectiveObject = _.find(perspectives, function (obj) {639        return (obj.key === 'PenaltyAgreement_Delete' && obj.role_key === 'Delete')640      })641      let perspectiveId = perspectiveObject.perspective642      viewKey = perspectiveObject.view_key643      payload.queryString.meta_model_perspective_id = perspectiveId644      payload.queryString.view_key = viewKey645      payload.queryString.apply_changes = true646      payload.data = {}647      let patchData = []648      patchData.push(removeObject)649      payload.data[perspectiveId] = patchData650      console.log('remove payload data', payload)651      props.removeModelPrespectives(payload)652    } else if (props.addSettings.initiatedFrom === 'ChildrenNode') {653      if (props.addSettings.deleteOperationLevel !== null) {654        let selectedObject = props.expandSettings.selectedObject[props.addSettings.deleteOperationLevel] || null655        // get perspective id and view key for delete operation656        if (selectedObject) {657          let rolePerspectives = selectedObject.rolePerspectives658          let perspectiveId = rolePerspectives.Delete.part_perspective_id659          let viewKey = rolePerspectives.Delete.part_perspective_view_key660          payload.queryString.meta_model_perspective_id = perspectiveId661          payload.queryString.view_key = viewKey662          payload.queryString.apply_changes = true663          payload.queryString.parent_reference = selectedObject.parentReference664          payload.data = {}665          let patchData = []666          patchData.push(removeObject)667          payload.data[perspectiveId] = patchData668          console.log('remove payload data', payload)669          props.removeModelPrespectives(payload)670        }671      }672    }673  }674  let buildRow = function (childData, currentLevel, subjectId) {675    let childLabelParts = props.expandSettings.metaModelPerspectives[currentLevel].parts676    let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))677    let editSelectedObject = expandSettings.selectedObject[currentLevel] || {}678    let showChildExpandIcon = props.expandSettings.selectedObject[currentLevel].showChildExpandIcon679    editSelectedObject.editSubjectId = subjectId680    let childRowColumn = []681    let faClass = 'fa fa-plus'682    let selectedObject = {}683    let headerColumn = []684    props.headerData.headerColumn.forEach(function (data, index) {685      let obj = {}686      obj.name = data687      obj.isProcessed = false688      obj.level = currentLevel689      headerColumn.push(obj)690    })691    if (childData) {692      childLabelParts.forEach(function (labelData, cix) {693        if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property694          if (labelData.standard_property === 'name') {695            selectedObject.name = childData[cix] ? childData[cix].value : ''696          }697        } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property698          if (labelData.constraint_perspective && !labelData.nexus) {699            selectedObject.parentReference = childData[cix] ? childData[cix].value.parent_reference : null700            selectedObject.childFilter = childData[cix] ? childData[cix].value.child_filter : null701            selectedObject.metaModelPerspectives = childLabelParts[cix].constraint_perspective702            selectedObject.containerPerspectiveId = childLabelParts[cix].container_perspective_id703            selectedObject.containerPerspectiveViewKey = childLabelParts[cix].container_perspective_view_key704            selectedObject.rolePerspectives = childLabelParts[cix].role_perspectives705            selectedObject.subjectId = subjectId706            // selectedObject.groupWithPrevious = labelData.group_with_previous707          }708          // if (childLabelParts[cix].role_perspectives === null) {709          //   faClass = ''710          // }711        }712      })713      let totalMetricPoints = 0714      childLabelParts.forEach(function (labelData, cix) {715        let childValue716        if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property717          if (labelData.standard_property === 'name') {718            childValue = childData[cix] ? childData[cix].value : ''719            editSelectedObject.editName = childData[cix] ? childData[cix].value : ''720            // selectedObject.name = childValue721            let columnId = props.headerData.headerColumn.indexOf(labelData.name)722            if (columnId !== -1) {723              headerColumn[columnId].isProcessed = true724              headerColumn[columnId].level = currentLevel725              if (columnId > 0) {726                for (let i = 0; i < columnId; i++) {727                  headerColumn[i].isProcessed = true728                  headerColumn[i].level = currentLevel729                  childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_start' + i}>{''}</td>)730                }731              }732            }733            if (props.expandSettings.level > currentLevel && currentLevel >= 0 && props.expandSettings.selectedObject[currentLevel + 1].name === childValue && showChildExpandIcon) {734              faClass = 'fa fa-minus'735            }736            if (!showChildExpandIcon) {737              faClass = ''738            }739            let availableAction = availableCrudOperation[currentLevel + 1] // crud operation array contain root object action740            let list = []741            // if (showChildExpandIcon) {742              // if (faClass !== '') {743                if (availableAction.Update) {744                  list.push(<a key={'action_update' + cix} href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(editSelectedObject, 'ChildrenNode', 'Edit') }} > <img src='/assets/edit.png' alt='gear' className='td-icons' /></a>)745                }746                if (availableAction.Delete) {747                  list.push(<a key={'action_delete' + cix} href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject, currentLevel, 'ChildrenNode') }} > <img src='/assets/rubbish-bin.png' alt='delete' className='td-icons' /></a>)748                }749              // }750            // }751            childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}>752              <i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, currentLevel + 1) }} style={{'cursor': 'pointer'}} /> {childValue}&nbsp;&nbsp;753              <div className='btn-group-sm m-btn-group--pill btn-group' role='group' aria-label='First group'>754                {list}755              </div>756            </td>)757          }758        } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property759          // console.log('partData', partData, labelParts[ix], ix)760          if (labelData.constraint_perspective && !labelData.nexus) {761            if (totalMetricPoints > 0) {762              selectedObject.parentReference = childData[cix + totalMetricPoints - 1].value.parent_reference763            }764            // let columnHeaderName = labelData.constraint_perspective.name765            // if (columnHeaderName != null && columnHeaderName.length > 0 && columnHeaderName.charAt(columnHeaderName.length - 1) === 's') {766            //   childValue = columnHeaderName.substring(0, columnHeaderName.length - 1)767            // }768            childValue = labelData.constraint_perspective.name769            // selectedObject.metaModelPerspectives = childLabelParts[cix].constraint_perspective770            if (labelData.role_perspectives) {771              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}><a onClick={() => openModal(selectedObject, 'ChildrenNode', 'Add')} href='javascript:void(0);' >{'Add ' + childValue}</a></td>)772            } else {773              childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_' + cix}>{''}</td>)774            }775            let columnId = props.headerData.headerColumn.indexOf(childValue)776            if (columnId !== -1) {777              headerColumn[columnId].isProcessed = true778              headerColumn[columnId].level = 0779            }780          }781          if (labelData.constraint_perspective && labelData.nexus) {782            let metricMetaPerspectives = labelData.constraint_perspective783            totalMetricPoints = metricMetaPerspectives.parts.length784            metricMetaPerspectives.parts.forEach(function (metricData, mix) {785              let headerIndex = _.findIndex(headerColumn, function (o) { return o.name === metricData.name })786              if (headerIndex) {787                headerColumn[headerIndex].isProcessed = true788                headerColumn[headerIndex].level = currentLevel789                let subjectValue = childData[cix + mix] ? childData[cix + mix].value.subject_part.value : ''790                if (subjectValue.length > 0) {791                  childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_start_metric' + mix}>{subjectValue[0].target_component.name}</td>)792                } else {793                  childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_start_metric' + mix}>{''}</td>)794                }795              }796            })797          }798        }799      })800      let length = headerColumn.length801      headerColumn.forEach(function (columnData, cid) {802        if (!columnData.isProcessed & length !== cid + 1) {803          childRowColumn.push(<td className='' key={'ch_' + '_' + currentLevel + '_last' + cid} >{''}</td>)804        }805      })806    }807    return childRowColumn808  }809  let genericExpandRow = function (parentRowName) {810    let childList = []811    let expandSettings = props.expandSettings812    let expandLevel = expandSettings.level813    let rowToExpand = false814    expandSettings.selectedObject.forEach(function (data, index) {815      if (data.name === parentRowName) {816        rowToExpand = true817      }818    })819    if (rowToExpand) {820      // start from topmost level821      let startLevel = expandLevel822      do {823        if (expandLevel - startLevel >= 0 && startLevel >= 0) {824          if (expandSettings.selectedObject[startLevel].expandFlag) {825            // faClass = 'fa fa-minus'826            if (props.expandSettings.modelPerspectives[startLevel] && props.expandSettings.modelPerspectives[startLevel].length > 0) {827              // let childLabelParts = props.expandSettings.metaModelPerspectives[startLevel].parts828              let parentList = []829              props.expandSettings.modelPerspectives[startLevel].forEach(function (childData, idx) {830                let childRowColumn = []831                childRowColumn = buildRow(childData.parts, startLevel, childData.subject_id)832                parentList.push(833                  <tr>834                    {childRowColumn}835                  </tr>836                )837                let found = []838                if (childList.length > 0) {839                  let selectedObject = expandSettings.selectedObject[startLevel + 1]840                  let parts = childData.parts841                  found = _.filter(parts, {'value': selectedObject.name})842                }843                if (found.length > 0) {844                  if (childList.length > 0) {845                    childList.forEach(function (rowData, rix) {846                      parentList.push(rowData)847                    })848                  }849                }850              })851              childList = parentList852            } else {853              // childList = []854              // childList.push((855              //   <tr key={0}>856              //     <td colSpan='5'>{'No data to display'}</td>857              //   </tr>858              // ))859            }860          }861        }862        if (expandLevel - startLevel >= 0 && startLevel >= 0) {863          startLevel = startLevel - 1864        } else {865          // stop process row data866          break867        }868      } while (expandLevel - startLevel >= 0)869      if (startLevel === -1) {870        return childList871      }872    } else {873      return ''874    }875  }876  if (!props.headerData.toProcess) {877    if (props.headerData.metaModelPerspective.length > 0) {878      tableHeader = []879      props.headerData.metaModelPerspective.forEach(function (data, index) {880        data.parts.forEach(function (partData, idx) {881          if (partData.standard_property !== null && partData.type_property === null) { // Standard Property882            if (partData.standard_property === 'name') {883              tableHeader.push(<th key={index + 'col' + idx} className=''><h5>{partData.name}</h5></th>)884            }885          } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective === null) { // Connection Property886            tableHeader.push(<th key={index + 'col' + idx} className=''><h5>{partData.name}</h5></th>)887          }888        })889      })890    }891    // tableHeader.push(<th key={'last'} className=''><h5>Action</h5></th>)892  }893  let listModelPrespectives = function () {894    if (props.modelPrespectives !== '' && props.metaModelPerspective !== '') {895      let labelParts = props.metaModelPerspective.resources[0].parts896      // let crude = props.crude897      // let mask = props.metaModelPerspective.resources[0].crude898      // let crud = []899      // for (let option in crude) {900      //   if (crude.hasOwnProperty(option)) {901      //     if (mask & crude[option]) {902      //       crud.push(option)903      //     }904      //   }905      // }906      if (props.modelPrespectives.length > 1 && !props.expandSettings.processAPIResponse) {907        let modelPrespectives = _.filter(props.modelPrespectives, {'error_code': null})908        modelPrespectives.splice(-1, 1)909        if (modelPrespectives.length > 1) {910          let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))911          // let expandLevel = expandSettings.level912          modelPrespectivesList = modelPrespectives.slice(perPage * (currentPage - 1), ((currentPage - 1) + 1) * perPage).map(function (data, index) {913            if (data.error_code === null) {914              let headerColumn = []915              props.headerData.headerColumn.forEach(function (data, index) {916                let obj = {}917                obj.name = data918                obj.isProcessed = false919                obj.level = null920                headerColumn.push(obj)921              })922              let rowColumn = []923              let faClass = 'fa fa-plus'924              let childList = ''925              let selectedObject = {}926              selectedObject.subjectId = data.subject_id927              if (data.parts) {928                labelParts.forEach(function (labelData, cix) {929                  if (labelData.standard_property !== null && labelData.type_property === null) { // Standard Property930                    if (labelData.standard_property === 'name') {931                      selectedObject.name = data.parts[cix] ? data.parts[cix].value : ''932                    }933                  } else if (labelData.standard_property === null && labelData.type_property === null) { // Connection Property934                    if (labelData.constraint_perspective) {935                      selectedObject.parentReference = data.parts[cix] ? data.parts[cix].value.parent_reference : null936                      selectedObject.childFilter = data.parts[cix] ? data.parts[cix].value.child_filter : null937                      selectedObject.metaModelPerspectives = labelParts[cix].constraint_perspective938                      selectedObject.containerPerspectiveId = labelParts[cix].container_perspective_id939                      selectedObject.containerPerspectiveViewKey = labelParts[cix].container_perspective_view_key940                      selectedObject.rolePerspectives = labelParts[cix].role_perspectives941                      selectedObject.subjectId = data.subject_id942                    }943                  }944                })945                data.parts.forEach(function (partData, ix) {946                  let value947                  if (labelParts[ix].standard_property !== null && labelParts[ix].type_property === null) { // Standard Property948                    // console.log('partData standard property', partData, labelParts[ix], ix)949                    if (labelParts[ix].standard_property === 'name') {950                      value = partData ? partData.value : ''951                      // selectedObject.name = value952                      let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)953                      if (columnId !== -1) {954                        headerColumn[columnId].isProcessed = true955                        headerColumn[columnId].level = 0956                      }957                      if (expandSettings.level !== null) {958                        // expand row is clicked for first row959                        if (expandSettings.level >= 0 && (expandSettings.selectedObject[0] && expandSettings.selectedObject[0].name === value && expandSettings.selectedObject[0].subjectId === data.subject_id)) {960                          childList = genericExpandRow(value)961                        }962                      }963                      if (expandSettings.level >= 0 && (expandSettings.selectedObject[0] && expandSettings.selectedObject[0].name === value && expandSettings.selectedObject[0].subjectId === data.subject_id)) {964                        faClass = 'fa fa-minus'965                      }966                      let availableAction = availableCrudOperation[0] // displaying action for root level967                      let list = []968                      if (availableAction) {969                        if (availableAction.Update) {970                          list.push(<a key={'action_edit' + ix} href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(selectedObject, 'ParentNode', 'Edit') }} ><img src='/assets/edit.png' alt='gear' className='td-icons' /></a>)971                        }972                        if (availableAction.Delete) {973                          list.push(<a key={'action_delete' + ix} href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject, null, 'ParentNode') }} ><img src='/assets/rubbish-bin.png' alt='delete' className='td-icons' /></a>)974                        }975                      }976                      rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}><i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, 0) }} style={{'cursor': 'pointer'}} /> {value}&nbsp;&nbsp;977                        {list}978                      </td>)979                    }980                  } else if (labelParts[ix].standard_property === null && labelParts[ix].type_property === null && labelParts[ix].constraint_perspective === null) { // Connection Property981                    let targetComponents = []982                    partData.value.forEach(function (data, index) {983                      targetComponents.push(data.target_component.name)984                    })985                    value = targetComponents.toString()986                    let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)987                    if (columnId !== -1) {988                      headerColumn[columnId].isProcessed = true989                      headerColumn[columnId].level = 0990                    }991                    rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}>{value}</td>)992                  } else if (labelParts[ix].constraint_perspective !== null) { // Perspectives Property993                    // selectedObject.parentReference = partData.value.parent_reference994                    value = labelParts[ix].constraint_perspective.name995                    // selectedObject.metaModelPerspectives = labelParts[ix].constraint_perspective996                    // selectedObject.containerPerspectiveId = labelParts[ix].container_perspective_id997                    // selectedObject.containerPerspectiveViewKey = labelParts[ix].container_perspective_view_key998                    // selectedObject.rolePerspectives = labelParts[ix].role_perspectives999                    let columnId = props.headerData.headerColumn.indexOf(labelParts[ix].name)1000                    if (columnId !== -1) {1001                      headerColumn[columnId].isProcessed = true1002                      headerColumn[columnId].level = 01003                    }1004                    rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}><a href='javascript:void(0);' onClick={(event) => openModal(selectedObject, 'ChildrenNode', 'Add')} >{'Add ' + value}</a></td>)1005                  }1006                  // console.log('value', value)1007                  // if (toPush) {1008                  //   rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}>{isName && (<i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, 0) }} style={{'cursor': 'pointer'}} />)} {value}</td>)1009                  // }1010                })1011              }1012              let length = headerColumn.length1013              headerColumn.forEach(function (columnData, cid) {1014                if (!columnData.isProcessed & length !== cid + 1) {1015                  rowColumn.push(<td className='' key={'ch_' + index + '_emp' + cid} >{''}</td>)1016                }1017              })1018              // let availableAction = {...props.availableAction}1019              // let list = []1020              // if (availableAction.Update) {1021              //   list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openModal(selectedObject, 'ParentNode', 'Edit') }} >{'Edit'}</a>)1022              // }1023              // if (availableAction.Delete) {1024              //   list.push(<a onClick={(event) => { event.preventDefault(); openDeleteModal(selectedObject) }} href='javascript:void(0);'>{'Delete'}</a>)1025              // }1026              // rowColumn.push(<td className='' key={'last' + index} >{list}</td>)1027              return (1028                <table key={'listEntry' + index} style={{'tableLayout': 'fixed', 'width': '100%'}} className='table table-striped- table-bordered table-hover table-checkable responsive no-wrap dataTable dtr-inline collapsed' id='m_table_1' aria-describedby='m_table_1_info' role='grid'>1029                  {index === 0 && (<thead>1030                    {tableHeader}1031                  </thead>)}1032                  <tbody>1033                    <tr key={'tr' + index}>1034                      {rowColumn}1035                    </tr>1036                    {childList}1037                  </tbody>1038                </table>1039              )1040            }1041          })1042          // props.setConnectionData(connectionData)1043        } else {1044          modelPrespectivesList = []1045          modelPrespectivesList.push((1046            <tr key={0}>1047              <td colSpan={labelParts.length}>{'No data to display'}</td>1048            </tr>1049          ))1050        }1051      } else {1052        modelPrespectivesList = []1053        modelPrespectivesList.push((1054          <tr key={0}>1055            <td colSpan={labelParts.length}>{'No data to display'}</td>1056          </tr>1057        ))1058      }1059    }1060  }1061  if (props.modelPrespectives && props.modelPrespectives !== '') {1062    totalPages = Math.ceil((props.modelPrespectives.length - 1) / perPage)1063    let i = 11064    while (i <= totalPages) {1065      let pageParameter = {}1066      pageParameter.number = i1067      pageParameter.class = ''1068      pageArray.push(pageParameter)1069      i++1070    }1071    pageArray = _.chunk(pageArray, paginationLimit)1072    listPage = _.filter(pageArray, function (group) {1073      let found = _.filter(group, {'number': currentPage})1074      if (found.length > 0) { return group }1075    })1076    listModelPrespectives()1077  }1078  if (currentPage === 1) {1079    previousClass = 'm-datatable__pager-link--disabled'1080  }1081  if (currentPage === totalPages) {1082    nextClass = 'm-datatable__pager-link--disabled'1083  }1084  let handleListAndPagination = function (page) {1085    listModelPrespectives()1086    props.setCurrentPage(page)1087    listPage = _.filter(pageArray, function (group) {1088      let found = _.filter(group, {'number': page})1089      if (found.length > 0) { return group }1090    })1091  }1092  let handlePrevious = function (event) {1093    event.preventDefault()1094    if (currentPage === 1) {1095      previousClass = styles.disabled1096    } else {1097      props.setCurrentPage(currentPage - 1)1098      handleListAndPagination(currentPage - 1)1099    }1100  }1101  let handleNext = function (event) {1102    event.preventDefault()1103    if (currentPage === totalPages) {1104      nextClass = styles.disabled1105    } else {1106      props.setCurrentPage(currentPage + 1)1107      handleListAndPagination(currentPage + 1)1108    }1109  }1110  let handlePage = function (page) {1111    if (page === 1) {1112      previousClass = 'm-datatable__pager-link--disabled'1113    } else if (page === totalPages) {1114      nextClass = 'm-datatable__pager-link--disabled'1115    }1116    handleListAndPagination(page)1117  }1118  // if (props.metaModelPerspective && props.metaModelPerspective !== '' && props.metaModelPerspective.error_code === null) {1119  //   perspectiveName = props.metaModelPerspective.resources[0].name1120  //   if (props.metaModelPerspective.resources[0].parts.length > 0) {1121  //     tableHeader = []1122  //     props.metaModelPerspective.resources[0].parts.forEach(function (data, index) {1123  //       if (data.standard_property !== null && data.type_property === null) { // Standard Property1124  //         if (data.standard_property === 'name') {1125  //           tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1126  //         }1127  //       } else if (data.standard_property === null && data.type_property === null && data.constraint_perspective === null) { // Connection Property1128  //         tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1129  //       } else if (data.standard_property === null && data.type_property === null && data.constraint_perspective !== null) { // Perspective Property1130  //         tableHeader.push(<th key={index} className=''><h5>{data.name}</h5></th>)1131  //       }1132  //     })1133  //   }1134  //   tableHeader.push(<th key={'last'} className=''><h5>Action</h5></th>)1135  // }1136  let handleSelectChange = function (index, type) {1137    return function (newValue: any, actionMeta: any) {1138      let connectionData = JSON.parse(JSON.stringify(props.connectionData))1139      if (type === 'Connection') {1140        let selectedValues = connectionData.selectedValues1141        if (actionMeta.action === 'select-option' || actionMeta.action === 'remove-value') {1142          selectedValues[index] = newValue1143          connectionData.selectedValues = selectedValues1144          props.setConnectionData(connectionData)1145        }1146        if (actionMeta.action === 'clear') {1147          selectedValues[index] = null1148          connectionData.selectedValues = selectedValues1149          props.setConnectionData(connectionData)1150        }1151      }1152      if (type === 'Metric') {1153        let selectedValues = connectionData.metricSelectedValue1154        if (actionMeta.action === 'select-option' || actionMeta.action === 'remove-value') {1155          selectedValues[index] = newValue1156          connectionData.metricSelectedValue = selectedValues1157          let subjectId = newValue.subjectId1158          let selectOption = connectionData.metricSelectOption1159          let backupSelectOption = connectionData.backupMetricSelectOption1160          let selectOptionLength = selectOption.length1161          for (let i = index + 1; i < selectOptionLength; i++) {1162            if (selectOption[i]) {1163              let filterObject = _.find(backupSelectOption[i], function (obj) {1164                return obj.subjectId === subjectId1165              })1166              let filterArray = []1167              filterArray.push(filterObject)1168              selectOption[i] = filterArray1169              selectedValues[i] = []1170            }1171          }1172          connectionData.metricSelectOption = selectOption1173          props.setConnectionData(connectionData)1174        }1175        if (actionMeta.action === 'clear') {1176          let selectedValues = connectionData.selectedValues1177          selectedValues[index] = null1178          connectionData.metricSelectedValue = selectedValues1179          let selectOption = connectionData.metricSelectOption1180          let backupSelectOption = connectionData.backupMetricSelectOption1181          let selectOptionLength = selectOption.length1182          for (let i = index + 1; i < selectOptionLength; i++) {1183            if (selectOption[i]) {1184              let restoreList = backupSelectOption[i]1185              selectOption[i] = restoreList1186              selectedValues[i] = []1187            }1188          }1189          connectionData.metricSelectOption = selectOption1190          props.setConnectionData(connectionData)1191        }1192      }1193    }1194  }1195  if (props.connectionData !== '' && props.connectionData.operation.isComplete) {1196    // eslint-disable-next-line1197    mApp && mApp.unblockPage()1198    let connectionData = {...props.connectionData}1199    // let addSettings = {...props.addSettings}1200    if (connectionData.data.length > 0) {1201      connectionSelectBoxList = connectionData.data.map(function (data, index) {1202        let selectOptions = connectionData.selectOption[index].map(function (component, id) {1203          component.value = component.id1204          component.label = component.name1205          return component1206        })1207        return (1208          <div className='form-group row'>1209            <div className='m-form__group col-12' style={{'display': 'flex'}} >1210              <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1211              <div className='col-9'>1212                <Select1213                  className='input-sm m-input'1214                  placeholder={'Select ' + data.name}1215                  isMulti={data.max !== 1}1216                  isClearable1217                  value={connectionData.selectedValues[index]}1218                  onChange={handleSelectChange(index, 'Connection')}1219                  options={selectOptions}1220                />1221              </div>1222            </div>1223          </div>1224        )1225      })1226    }1227    if (connectionData.isMetric) {1228      if (connectionData.data.length === 0) {1229        connectionSelectBoxList = []1230      }1231      console.log('props', props)1232      connectionData.metricSelectNames.forEach(function (data, index) {1233        let selectOptions = connectionData.metricSelectOption[index].map(function (component, id) {1234          component.value = component.id1235          component.label = component.name1236          return component1237        })1238        connectionSelectBoxList.push(1239          <div className='form-group row'>1240            <div className='m-form__group col-12' style={{'display': 'flex'}} >1241              <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1242              <div className='col-9'>1243                <Select1244                  className='input-sm m-input'1245                  placeholder={data.placeHolder}1246                  isDisabled={props.addSettings.isEditModalOpen}1247                  // isMulti={data.max !== 1}1248                  isClearable1249                  value={connectionData.metricSelectedValue[index]}1250                  onChange={handleSelectChange(index, 'Metric')}1251                  options={selectOptions}1252                />1253              </div>1254            </div>1255          </div>1256        )1257      })1258    }1259    standardPropertyList = connectionData.standardProperty.map(function (data, index) {1260      if (data.standard_property === 'name') {1261        return (1262          <div className='form-group row'>1263            <div className='m-form__group col-12' style={{'display': 'flex'}}>1264              <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>1265              <div className='col-9'>1266                <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />1267              </div>1268            </div>1269          </div>1270        )1271      }1272      if (data.standard_property === 'description') {1273        return (1274          <div className='form-group row'>1275            <div className='m-form__group col-12' style={{'display': 'flex'}}>1276              <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>1277              <div className='col-9'>1278                <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />1279              </div>1280            </div>1281          </div>1282        )1283      }1284    })1285    businessPropertyList = connectionData.customerProperty.map(function (data, index) {1286      let value = null1287      if (data.type_property.property_type.key === 'Integer') {1288        value = data.type_property.int_value1289        return (<div className='form-group row'>1290          <div className='m-form__group col-12' style={{'display': 'flex'}}>1291            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1292            <div className='col-9 form-group m-form__group has-info'>1293              <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1294              {false && (<div className='form-control-feedback'>should be Number</div>)}1295            </div>1296          </div>1297        </div>)1298      } else if (data.type_property.property_type.key === 'Decimal') {1299        value = data.type_property.float_value1300        return (<div className='form-group row'>1301          <div className='m-form__group col-12' style={{'display': 'flex'}}>1302            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1303            <div className='col-9 form-group m-form__group has-info'>1304              <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1305              {false && (<div className='form-control-feedback'>should be Number</div>)}1306            </div>1307          </div>1308        </div>)1309      } else if (data.type_property.property_type.key === 'DateTime') {1310        value = data.type_property.date_time_value ? moment(data.type_property.date_time_value).format('DD MMM YYYY') : null1311        return (<div className='form-group row'>1312          <div className='m-form__group col-12' style={{'display': 'flex'}}>1313            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1314            <div className='col-9 form-group m-form__group has-info'>1315              <DatePicker1316                className='input-sm form-control m-input'1317                selected={data.type_property.date_time_value ? moment(data.type_property.date_time_value) : ''}1318                dateFormat='DD MMM YYYY'1319                onSelect={(date) => { editProperty(index, date) }}1320              />1321              {/* <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editTextProperty(index, childIndex, event.target.value) }} placeholder='Enter Here' /> */}1322              {false && (<div className='form-control-feedback'>should be Date</div>)}1323            </div>1324          </div>1325        </div>)1326      } else if (data.type_property.property_type.key === 'Text') {1327        value = data.type_property.text_value1328        return (<div className='form-group row'>1329          <div className='m-form__group col-12' style={{'display': 'flex'}}>1330            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1331            <div className='col-9 form-group m-form__group has-info'>1332              <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1333              {false && (<div className='form-control-feedback'>should be Text</div>)}1334            </div>1335          </div>1336        </div>)1337      } else if (data.type_property.property_type.key === 'List') {1338        let propertyOption = data.type_property.value_set.values.map((option, opIndex) => {1339          option.label = option.name1340          option.value = option.id1341          return option1342        })1343        let dvalue = data.type_property.value_set_value1344        if (data.type_property.value_set_value !== null) {1345          dvalue.label = data.type_property.value_set_value.name1346          dvalue.value = data.type_property.value_set_value.id1347        }1348        value = data.type_property.value_set_value ? data.type_property.value_set_value.name : null1349        return (<div className='form-group row'>1350          <div className='m-form__group col-12' style={{'display': 'flex'}}>1351            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1352            <Select1353              className='col-9 input-sm m-input'1354              placeholder='Select Options'1355              isClearable1356              defaultValue={dvalue}1357              onChange={handlePropertySelect(index)}1358              isSearchable={false}1359              name={'selectProperty'}1360              options={propertyOption}1361              />1362          </div>1363        </div>)1364      } else {1365        value = data.type_property.other_value1366        return (<div className='form-group row'>1367          <div className='m-form__group col-12' style={{'display': 'flex'}}>1368            <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>1369            <div className='col-9 form-group m-form__group has-info'>1370              <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />1371              {true && (<div className='form-control-feedback'>should be Text</div>)}1372            </div>1373          </div>1374        </div>)1375      }1376    })1377  }1378  if (props.addSettings.createResponse !== null) {1379    if (props.addSettings.createResponse.length > 0) {1380      messageList = props.addSettings.createResponse.map(function (data, index) {1381        if (data.error_code === null) {1382          if (data.message != null) {1383            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1384          } else {1385            if (props.addSettings.createResponse.length === 1) {1386              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1387            }1388          }1389        } else {1390          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1391        }1392      })1393    } else {1394      messageList = []1395      messageList.push((1396        <li key={0}>{'No data has been added.'}</li>1397      ))1398    }1399  }1400  if (props.addSettings.updateResponse !== null) {1401    if (props.addSettings.updateResponse.length > 0) {1402      messageList = props.addSettings.updateResponse.map(function (data, index) {1403        if (data.error_code === null) {1404          if (data.message != null) {1405            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1406          } else {1407            if (props.addSettings.updateResponse.length === 1) {1408              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1409            }1410          }1411        } else {1412          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1413        }1414      })1415    } else {1416      messageList = []1417      messageList.push((1418        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>1419      ))1420    }1421  }1422  if (props.addSettings.deleteResponse !== null) {1423    defaultStyle = customStylescrud1424    if (props.addSettings.deleteResponse.length > 0) {1425      messageList = props.addSettings.deleteResponse.map(function (data, index) {1426        if (data.error_code === null) {1427          if (data.message != null) {1428            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)1429          } else {1430            if (props.addSettings.deleteResponse.length === 1) {1431              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)1432            }1433          }1434        } else {1435          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)1436        }1437      })1438    } else {1439      messageList = []1440      messageList.push((1441        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>1442      ))1443    }1444  }1445return (1446  <div>1447    <div id='entitlementList'>1448      {/* The table structure begins */}1449      {/* <div style={{display: 'none'}} id='blockMessage'>1450        <LoaderComponent />1451      </div> */}1452      <div className='row'>1453        <div className='col-md-12'>1454          <div className='m_datatable' id='scrolling_vertical'>1455            <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll' id='scrolling_vertical' style={{}}>1456              <div>1457                <div className='m-portlet'>1458                  <div className='m-portlet__body'>1459                    <div className='row'>1460                      <div className='col-md-10' />1461                      {props.availableAction.Create && (<div className='col-md-2 float-right'>1462                        <button type='button' onClick={(event) => openModal(null, 'ParentNode', 'Add')} className='btn btn-outline-info btn-sm' style={{'float': 'right'}}>Add {perspectiveName}</button>&nbsp;1463                      </div>)}1464                    </div>1465                    <br />1466                    <div id='ModelPerspectiveList' className='dataTables_wrapper dt-bootstrap4'>1467                      <div className='row' style={{'marginBottom': '20px'}}>1468                        <div className='col-sm-12 col-md-6'>1469                          <div className='dataTables_length' id='m_table_1_length' style={{'display': 'flex'}}>1470                            <h5 style={{'margin': '8px'}}>Show</h5>1471                            <select value={props.perPage} name='m_table_1_length' onBlur={handleBlurdropdownChange} onChange={handledropdownChange} aria-controls='m_table_1' className='custom-select custom-select-sm form-control form-control-sm' style={{'height': '40px'}}>1472                              <option value={10}>10</option>1473                              <option value={25}>25</option>1474                              <option value={50}>50</option>1475                              <option value={100}>100</option>1476                            </select>1477                            <h5 style={{'margin': '8px'}}>Entries</h5>1478                            {/* </label> */}1479                          </div>1480                        </div>1481                        <div className='col-sm-12 col-md-6'>1482                          <div className='dataTables_length pull-right' id='m_table_1_length' style={{'display': 'flex'}}>1483                            <div style={{'display': 'flex'}}>1484                              <h5 style={{'margin': '10px'}}>Search</h5>1485                              <div className='m-input-icon m-input-icon--left'>1486                                <input type='text' className='form-control m-input' placeholder='Search...' id='generalSearch' ref={input => (searchTextBox = input)} onKeyUp={handleInputChange} />1487                                <span className='m-input-icon__icon m-input-icon__icon--left'>1488                                  <span>1489                                    <i className='la la-search' />1490                                  </span>1491                                </span>1492                              </div>1493                            </div>1494                          </div>1495                        </div>1496                      </div>1497                    </div>1498                    <div className='dataTables_scrollBody' style={{position: 'relative', overflow: 'auto', width: '100%', 'maxHeight': '100vh'}}>1499                      {modelPrespectivesList}1500                    </div>1501                    <div className='row'>1502                      <div className='col-md-12' id='scrolling_vertical'>1503                        <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll pull-right' id='scrolling_vertical' style={{}}>1504                          <div className='m-datatable__pager m-datatable--paging-loaded clearfix'>1505                            <ul className='m-datatable__pager-nav'>1506                              <li><a href='' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev ' + previousClass} onClick={handlePrevious} data-page='4'><i className='la la-angle-left' /></a></li>1507                              {listPage[0] && listPage[0].map(function (page, index) {1508                                      if (page.number === currentPage) {1509                                              page.class = 'm-datatable__pager-link--active'1510                                            } else {1511                                              page.class = ''1512                                            }1513                                            return (<li key={index} >1514                                              <a href='' className={'m-datatable__pager-link m-datatable__pager-link-number ' + page.class} data-page={page.number} title={page.number} onClick={(event) => { event.preventDefault(); handlePage(page.number) }} >{page.number}</a>1515                                            </li>)1516                                          })}1517                              <li><a href='' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next ' + nextClass} onClick={handleNext} data-page='4'><i className='la la-angle-right' /></a></li>1518                            </ul>1519                          </div>1520                        </div>1521                      </div>1522                    </div>1523                  </div>1524                </div>1525              </div>1526            </div>1527          </div>1528        </div>1529      </div>1530    </div>1531    <div>1532      <ReactModal isOpen={props.addSettings.isModalOpen}1533        onRequestClose={closeModal}1534        // className='modal-dialog modal-lg'1535        style={customStylescrud}1536        >1537        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1538        <div className={'blockNexusUI'}>1539          <div className=''>1540            <div className='modal-content'>1541              <div className='modal-header'>1542                {props.addSettings.createResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Add {perspectiveName} for {props.addSettings.parentName}</h4>)}1543                {props.addSettings.createResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Create Report</h4>)}1544                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1545                  <span aria-hidden='true'>Ã</span>1546                </button>1547              </div>1548              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>1549                {props.addSettings.createResponse === null && (<div className='col-md-12'>1550                  {/* {messageBlock} */}1551                  <div className='form-group m-form__group row'>1552                    <div className='col-8'>1553                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1554                    </div>1555                  </div>1556                  {standardPropertyList}1557                  {businessPropertyList}1558                  {connectionSelectBoxList}1559                </div>)}1560                {props.addSettings.createResponse !== null && (<div className='m-list-search__results'>1561                  {messageList}1562                </div>)}1563              </div>1564              <div className='modal-footer'>1565                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1566                {props.addSettings.createResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={createComponent} >Add</button>)}1567              </div>1568            </div>1569          </div>1570        </div>1571      </ReactModal>1572      <ReactModal isOpen={props.addSettings.isEditModalOpen}1573        onRequestClose={closeModal}1574        // className='modal-dialog modal-lg'1575        style={customStylescrud}1576        >1577        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1578        <div className={'blockNexusUI'}>1579          <div className=''>1580            <div className='modal-content' >1581              <div className='modal-header'>1582                {props.addSettings.updateResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Edit {updatePerspectiveName} for {props.addSettings.parentName}</h4>)}1583                {props.addSettings.updateResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Update Report</h4>)}1584                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1585                  <span aria-hidden='true'>Ã</span>1586                </button>1587              </div>1588              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>1589                {props.addSettings.updateResponse === null && (<div className='col-md-12'>1590                  {/* {messageBlock} */}1591                  <div className='form-group m-form__group row'>1592                    <div className='col-8'>1593                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1594                    </div>1595                  </div>1596                  {standardPropertyList}1597                  {businessPropertyList}1598                  {connectionSelectBoxList}1599                </div>)}1600                {props.addSettings.updateResponse !== null && (<div className='m-list-search__results'>1601                  {messageList}1602                </div>)}1603              </div>1604              <div className='modal-footer'>1605                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1606                {props.addSettings.updateResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={updateComponent} >Update</button>)}1607              </div>1608            </div>1609          </div>1610        </div>1611      </ReactModal>1612      <ReactModal isOpen={props.addSettings.isDeleteModalOpen}1613        onRequestClose={closeModal}1614        className='modal-dialog '1615        style={defaultStyle} >1616        <div className={styles.modalwidth}>1617          <div className=''>1618            <div className='modal-content'>1619              <div className='modal-header'>1620                {props.addSettings.deleteResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Delete {deletePerspectiveName}</h4>)}1621                {props.addSettings.deleteResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Delete Report</h4>)}1622                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1623                  <span aria-hidden='true'>Ã</span>1624                </button>1625              </div>1626              {props.addSettings.deleteResponse === null && (<div className='modal-body'>1627                <div>1628                  <h6>Confirm deletion of {deletePerspectiveName}</h6>1629                </div>1630              </div>)}1631              {props.addSettings.deleteResponse !== null && (<div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}} >1632                {messageList}1633              </div>)}1634              <div className='modal-footer'>1635                <button type='button' onClick={closeModal} id='m_login_signup' className='btn btn-outline-info btn-sm'>Close</button>1636                {props.addSettings.deleteResponse === null && (<button type='button' id='m_login_signup' className='btn btn-outline-info btn-sm' onClick={removeComponent}>Confirm</button>)}1637              </div>1638            </div>1639          </div>1640        </div>1641      </ReactModal>1642    </div>1643    {/* <Discussion name={'Entitlements'} TypeKey='Entitlement' type='ComponentType' {...props} />1644    <NewDiscussion contextId={contextId} name={'Entitlements'} type='ComponentType' {...props} /> */}1645  </div>1646      )1647  }1648  BalancedScorecard.propTypes = {1649    addSettings: PropTypes.any,1650    modelPrespectives: PropTypes.any,1651    metaModelPerspective: PropTypes.any,1652    currentPage: PropTypes.any,1653    perPage: PropTypes.any,1654    // crude: PropTypes.any,1655    availableAction: PropTypes.any,1656    connectionData: PropTypes.any,1657    // eslint-disable-next-line1658    expandSettings: PropTypes.any,1659    headerData: PropTypes.any,1660    copyModelPrespectives: PropTypes.any,1661    availableCrudOperation: PropTypes.any...

perspectivesComponent.js

Source:perspectivesComponent.js

1import React from 'react'2import _ from 'lodash'3import debounce from 'lodash/debounce'4import ReactModal from 'react-modal'5import Select from 'react-select'6import moment from 'moment'7import DatePicker from 'react-datepicker'8import PropTypes from 'prop-types'9import styles from './perspectivesComponent.scss'10import 'react-datepicker/dist/react-datepicker.css'11ReactModal.setAppElement('#root')12let comparer = function (otherArray) {13  return function (current) {14    return otherArray.filter(function (other) {15      return other.value === current.value && other.display === current.display16    }).length === 017  }18}19const customStylescrud = { content: { top: '15%', left: '8%', background: 'none', border: '0px', overflow: 'none', margin: 'auto' } }20export default function Perspectives (props) {21  let copyModelPrespectives = props.copyModelPrespectives22  let connectionSelectBoxList = ''23  let businessPropertyList = ''24  let searchTextBox25  let perPage = props.perPage || 1026  let currentPage = props.currentPage27  let nextClass = ''28  let previousClass = ''29  let pageArray = []30  let listPage = []31  // let pageSize = 1032  let paginationLimit = 633  let modelPrespectivesList = ''34  let totalPages35  let tableHeader = []36  let labels = []37  let messageList = ''38  let serviceName = props.addSettings.deleteObject ? props.addSettings.deleteObject.subject_name : ''39  let handleInputChange = debounce((e) => {40    // eslint-disable-next-line41    mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})42    let searchText = searchTextBox ? searchTextBox.value : ''43    let originalData = copyModelPrespectives44    if (searchText.trim() !== '') {45      if (originalData !== '') {46        let list = _.filter(originalData, function (data, index) {47          if (data.parts) {48            if ((data.parts[0].value.toLowerCase()).match(searchText.toLowerCase())) {49              return data50            }51          }52        })53        let payload = {}54        payload.data = list55        payload.copyData = props.copyModelPrespectives56        props.setModalPerspectivesData(payload)57      }58      // eslint-disable-next-line59      mApp && mApp.unblockPage()60    } else {61      let payload = {}62      payload.data = props.copyModelPrespectives63      payload.copyData = props.copyModelPrespectives64      props.setModalPerspectivesData(payload)65      // eslint-disable-next-line66      mApp && mApp.unblockPage()67    }68    props.setCurrentPage(1)69  }, 500)70  let editProperty = function (index, value) {71    let connectionData = {...props.connectionData}72    let customerProperty = connectionData.customerProperty73    let propertyType = customerProperty[index].type_property.property_type74    if (propertyType.key === 'Boolean') {75      customerProperty[index].type_property.boolean_value = value76    } else if (propertyType.key === 'Integer') {77      customerProperty[index].type_property.int_value = value78    } else if (propertyType.key === 'Decimal') {79      customerProperty[index].type_property.float_value = value80    } else if (propertyType.key === 'DateTime') {81      customerProperty[index].type_property.date_time_value = value.format('DD MMM YYYY')82    } else if (propertyType.key === 'Text') {83      customerProperty[index].type_property.text_value = value84    } else {85      customerProperty[index].type_property.other_value = value86    }87    connectionData.customerProperty = customerProperty88    props.setConnectionData(connectionData)89  }90  let handlePropertySelect = function (index) {91    return function (newValue: any, actionMeta: any) {92      let connectionData = JSON.parse(JSON.stringify(props.connectionData))93      let customerProperty = connectionData.customerProperty94      if (actionMeta.action === 'select-option') {95        customerProperty[index].type_property.value_set_value = newValue96      }97      if (actionMeta.action === 'clear') {98        customerProperty[index].type_property.value_set_value = newValue99      }100      connectionData.customerProperty = customerProperty101      props.setConnectionData(connectionData)102    }103  }104  // let handleBlurdropdownChange = function (event) {105  //   console.log('handle Blur change', event.target.value)106  // }107  let handledropdownChange = function (pages) {108    props.setPerPage(parseInt(pages))109    // showCurrentPages = pages110  }111  let openUpdateModal = function (data) {112    let addSettings = {...props.addSettings}113    let labelParts = props.metaModelPerspective.resources[0].parts114    let selectedValues = []115    let setCustomerProperty = []116    if (data.parts) {117      labelParts.forEach(function (partData, ix) {118        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property119          if (partData.name === 'Name') {120            addSettings.name = data.parts[ix].value121          }122          if (partData.name === 'Description') {123            addSettings.description = data.parts[ix].value124          }125        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property126          if (data.parts[ix].value.length > 0) {127            // todo write code for multiple component128            let eachSelectedValues = []129            data.parts[ix].value.forEach(function (value, ix) {130              let targetComponent = value.target_component131              targetComponent.label = targetComponent.name132              targetComponent.value = targetComponent.id133              eachSelectedValues.push(targetComponent)134            })135            selectedValues.push(eachSelectedValues)136          } else {137            selectedValues.push(null)138          }139        } else if (partData.standard_property === null && partData.type_property !== null) { // Customer Property140          let value = null141          if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property142            value = data.parts[ix].value !== null ? data.parts[ix].value.int_value : ''143          } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {144            value = data.parts[ix].value !== null ? data.parts[ix].value.float_value : ''145          } else if (labelParts[ix].type_property.property_type.key === 'Text') {146            value = data.parts[ix].value !== null ? data.parts[ix].value.text_value : ''147          } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {148            value = data.parts[ix].value !== null ? data.parts[ix].value.date_time_value : ''149          } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {150            value = data.parts[ix].value !== null ? data.parts[ix].value.boolean_value : ''151          } else if (labelParts[ix].type_property.property_type.key === 'List') {152            value = data.parts[ix].value !== null ? data.parts[ix].value.value_set_value : ''153          } else {154            value = data.parts[ix].value !== null ? data.parts[ix].value.other_value : ''155          }156          setCustomerProperty.push(value)157        }158      })159    }160    addSettings.isEditModalOpen = true161    addSettings.updateObject = data162    addSettings.updateResponse = null163    props.setAddSettings(addSettings)164    let connectionData = {...props.connectionData}165    let existingCustomerProperty = connectionData.customerProperty.map(function (data, index) {166      if (data.type_property.property_type.key === 'Boolean') {167        data.type_property.boolean_value = setCustomerProperty[index]168      } else if (data.type_property.property_type.key === 'Integer') {169        data.type_property.int_value = setCustomerProperty[index]170      } else if (data.type_property.property_type.key === 'Decimal') {171        data.type_property.float_value = setCustomerProperty[index]172      } else if (data.type_property.property_type.key === 'DateTime') {173        data.type_property.date_time_value = setCustomerProperty[index]174      } else if (data.type_property.property_type.key === 'Text') {175        data.type_property.text_value = setCustomerProperty[index]176      } else if (data.type_property.property_type.key === 'List') {177        data.type_property.value_set_value = setCustomerProperty[index]178      } else {179        data.type_property.other_value = setCustomerProperty[index]180      }181      return data182    })183    connectionData.customerProperty = existingCustomerProperty184    connectionData.selectedValues = selectedValues185    connectionData.initialSelectedValues = JSON.parse(JSON.stringify(selectedValues))186    props.setConnectionData(connectionData)187  }188  let openModal = function (event) {189    event.preventDefault()190    let addSettings = {...props.addSettings}191    addSettings.isModalOpen = true192    addSettings.name = ''193    addSettings.description = ''194    props.setAddSettings(addSettings)195    let connectionData = {...props.connectionData}196    let selectedValues = []197    connectionData.selectedValues.forEach(function (data) {198      selectedValues.push(null)199    })200    let resetCustomerProperty = connectionData.customerProperty.map(function (data, index) {201      if (data.type_property.property_type.key === 'Boolean') {202        data.type_property.boolean_value = null203      } else if (data.type_property.property_type.key === 'Integer') {204        data.type_property.int_value = null205      } else if (data.type_property.property_type.key === 'Decimal') {206        data.type_property.float_value = null207      } else if (data.type_property.property_type.key === 'DateTime') {208        data.type_property.date_time_value = null209      } else if (data.type_property.property_type.key === 'Text') {210        data.type_property.text_value = null211      } else if (data.type_property.property_type.key === 'List') {212        data.type_property.value_set_value = null213      } else {214        data.type_property.other_value = null215      }216      return data217    })218    connectionData.selectedValues = selectedValues219    connectionData.customerProperty = resetCustomerProperty220    props.setConnectionData(connectionData)221  }222  let openDeleteModal = function (data) {223    console.log('delete', data)224    let addSettings = {...props.addSettings}225    addSettings.isDeleteModalOpen = true226    addSettings.deleteObject = data227    props.setAddSettings(addSettings)228  }229  let closeModal = function () {230    let addSettings = {...props.addSettings}231    addSettings.isModalOpen = false232    addSettings.isDeleteModalOpen = false233    addSettings.isEditModalOpen = false234    addSettings.deleteObject = null235    addSettings.createResponse = null236    props.setAddSettings(addSettings)237  }238  let editName = function (event) {239    let addSettings = JSON.parse(JSON.stringify(props.addSettings))240    addSettings.name = event.target.value241    props.setAddSettings(addSettings)242  }243  let editDescription = function (event) {244    let addSettings = JSON.parse(JSON.stringify(props.addSettings))245    addSettings.description = event.target.value246    props.setAddSettings(addSettings)247  }248  let createComponent = function (event) {249    event.preventDefault()250    // eslint-disable-next-line251    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})252    let addSettings = JSON.parse(JSON.stringify(props.addSettings))253    let patchPayload = []254    let obj = {}255    obj.op = 'add'256    obj.path = '/-'257    obj.value = {}258    obj.value.parts = []259    obj.value.parts[0] = {'value': addSettings.name}260    obj.value.parts[1] = {'value': addSettings.description}261    let connectionData = {...props.connectionData}262    connectionData.selectedValues.forEach(function (data, index) {263      if (Array.isArray(data)) {264        if (data.length > 0) {265          let connections = []266          data.forEach(function (selectedValue, ix) {267            let connectionObject = {}268            connectionObject.target_id = selectedValue.id269            connections.push(connectionObject)270          })271          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}272        } else {273          obj.value.parts[connectionData.data[index].partIndex] = {}274        }275      } else {276        if (data) {277          let connections = []278          let connectionObject = {}279          connectionObject.target_id = data.id280          connections.push(connectionObject)281          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}282        } else {283          obj.value.parts[connectionData.data[index].partIndex] = {}284        }285      }286    })287    connectionData.customerProperty.forEach(function (data, index) {288      if (data.type_property.property_type.key === 'Boolean') {289        obj.value.parts[data.partIndex] = {value: {'boolean_value': data.type_property.boolean_value}}290      } else if (data.type_property.property_type.key === 'Integer') {291        obj.value.parts[data.partIndex] = {value: {'int_value': data.type_property.int_value}}292      } else if (data.type_property.property_type.key === 'Decimal') {293        obj.value.parts[data.partIndex] = {value: {'float_value': data.type_property.float_value}}294      } else if (data.type_property.property_type.key === 'DateTime') {295        obj.value.parts[data.partIndex] = {value: {'date_time_value': data.type_property.date_time_value}}296      } else if (data.type_property.property_type.key === 'Text') {297        obj.value.parts[data.partIndex] = {value: {'text_value': data.type_property.text_value}}298      } else if (data.type_property.property_type.key === 'List') {299        obj.value.parts[data.partIndex] = {value: {'value_set_value_id': data.type_property.value_set_value ? data.type_property.value_set_value.id : null}}300      } else {301        obj.value.parts[data.partIndex] = {value: {'other_value': data.type_property.other_value}}302      }303    })304    patchPayload.push(obj)305    let payload = {}306    payload.queryString = {}307    payload.queryString.meta_model_perspective_id = props.metaModelPerspective.resources[0].id308    payload.queryString.apply_changes = true309    payload.data = {}310    payload.data[props.metaModelPerspective.resources[0].id] = patchPayload311    // console.log('payload', payload)312    props.updateModelPrespectives(payload)313  }314  let updateComponent = function (event) {315    event.preventDefault()316    // eslint-disable-next-line317    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})318    let addSettings = JSON.parse(JSON.stringify(props.addSettings))319    let connectionData = JSON.parse(JSON.stringify(props.connectionData))320    let labelParts = props.metaModelPerspective.resources[0].parts321    let data = addSettings.updateObject322    let patchPayload = []323    if (data.parts) {324      labelParts.forEach(function (partData, index) {325        let valueType = ''326        let obj = {}327        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property328          obj.op = 'replace'329          valueType = partData.standard_property330          obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType331          if (partData.standard_property === 'name') {332            obj.value = props.addSettings.name333          }334          if (partData.standard_property === 'description') {335            obj.value = props.addSettings.description336          }337          patchPayload.push(obj)338        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property339          let dataIndex = connectionData.data.findIndex(p => p.name === partData.name)340          if (dataIndex !== -1) {341            // found index342            let max = connectionData.data[dataIndex].max343            let initialSelectedValue = connectionData.initialSelectedValues[dataIndex]344            let selectedValue = connectionData.selectedValues[dataIndex]345            // console.log('initialSelectedValue', initialSelectedValue)346            // console.log('selectedValue', selectedValue)347            let onlyInInitial = []348            if (initialSelectedValue) {349              if (max === 1) {350                let temp = []351                temp.push(initialSelectedValue)352                initialSelectedValue = temp353              }354            }355            if (selectedValue) {356              if (max === 1) {357                let temp = []358                temp.push(selectedValue)359                selectedValue = temp360              }361            }362            if (initialSelectedValue) {363              if (selectedValue) {364                onlyInInitial = initialSelectedValue.filter(comparer(selectedValue))365              } else {366                onlyInInitial = initialSelectedValue367              }368            }369            let onlyInFinal = []370            if (selectedValue) {371              if (initialSelectedValue) {372                onlyInFinal = selectedValue.filter(comparer(initialSelectedValue))373              } else {374                onlyInFinal = selectedValue375              }376            }377            // remove operation payload378            if (onlyInInitial.length > 0) {379              let connectionIdArray = data.parts[index].value380              let value = []381              onlyInInitial.forEach(function (removeData, rid) {382                let found = _.find(connectionIdArray, function (obj) { return (obj.target_component.id === removeData.id) })383                if (found) {384                  // set connection id385                  value.push(found.connection.id)386                }387              })388              let obj = {}389              obj.op = 'remove'390              obj.value = value391              valueType = 'value/-'392              obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType393              patchPayload.push(obj)394            }395            // console.log('index', dataIndex)396            // console.log('onlyInInitial', onlyInInitial)397            // console.log('onlyInFinal', onlyInFinal)398            if (onlyInFinal.length > 0) {399              let connections = []400              onlyInFinal.forEach(function (targetComponent, rid) {401                let obj = {}402                obj.target_id = targetComponent.id403                connections.push(obj)404              })405              let obj = {}406              obj.op = 'add'407              obj.value = connections408              valueType = 'value/-'409              obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType410              patchPayload.push(obj)411            }412          } else {413            console.log('index', dataIndex)414          }415        } if (partData.standard_property === null && partData.type_property !== null) {416          let obj = {}417          obj.op = 'replace'418          let customerProperty = _.find(connectionData.customerProperty, function (obj) {419            return obj.name === partData.name420          })421          if (customerProperty) {422            if (customerProperty.type_property.property_type.key === 'Boolean') {423              valueType = `boolean_value`424              obj.value = customerProperty.type_property.boolean_value425            } else if (customerProperty.type_property.property_type.key === 'Integer') {426              valueType = `int_value`427              obj.value = customerProperty.type_property.int_value428            } else if (customerProperty.type_property.property_type.key === 'Decimal') {429              valueType = `float_value`430              obj.value = customerProperty.type_property.float_value431            } else if (customerProperty.type_property.property_type.key === 'DateTime') {432              valueType = `date_time_value`433              obj.value = customerProperty.type_property.date_time_value434            } else if (customerProperty.type_property.property_type.key === 'Text') {435              valueType = `text_value`436              obj.value = customerProperty.type_property.text_value437            } else if (customerProperty.type_property.property_type.key === 'List') {438              valueType = `value_set_value_id`439              obj.value = customerProperty.type_property.value_set_value ? customerProperty.type_property.value_set_value.id : null440            } else {441              valueType = `other_value`442              obj.value = customerProperty.type_property.other_value443            }444            obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType445            patchPayload.push(obj)446          }447        }448      })449    }450    let payload = {}451    payload.queryString = {}452    payload.queryString.meta_model_perspective_id = props.metaModelPerspective.resources[0].id453    payload.queryString.apply_changes = true454    payload.data = {}455    payload.data[props.metaModelPerspective.resources[0].id] = patchPayload456    console.log('payload', payload)457    props.updateComponentModelPrespectives(payload)458  }459  let removeComponent = function (event) {460    event.preventDefault()461    let addSettings = {...props.addSettings}462    if (addSettings.deleteObject) {463      let payload = {464        'id': addSettings.deleteObject.subject_id465      }466      props.deleteComponentModelPerspectives(payload)467    }468    closeModal()469  }470  let listModelPrespectives = function () {471    if (props.modelPrespectives !== '') {472      let labelParts = props.metaModelPerspective.resources[0].parts473      // let crude = props.crude474      // let mask = props.metaModelPerspective.resources[0].crude475      // let crud = []476      // for (let option in crude) {477      //   if (crude.hasOwnProperty(option)) {478      //     if (mask & crude[option]) {479      //       crud.push(option)480      //     }481      //   }482      // }483      if (props.modelPrespectives.length > 0) {484        let modelPrespectives = _.filter(props.modelPrespectives, {'error_code': null})485        // modelPrespectives.splice(-1, 1)486        if (modelPrespectives.length > 0) {487          modelPrespectivesList = modelPrespectives.slice(perPage * (currentPage - 1), ((currentPage - 1) + 1) * perPage).map(function (data, index) {488            if (data.error_code === null && data.parts !== null) {489              let childList = []490              if (data.parts) {491                data.parts.forEach(function (partData, ix) {492                  let value493                  if (labelParts[ix].standard_property !== null && labelParts[ix].type_property === null) { // Standard Property494                    value = partData ? partData.value : ''495                  } else if (labelParts[ix].standard_property === null && labelParts[ix].type_property === null) { // Connection Property496                    if (partData.value) {497                      let targetComponents = []498                      partData.value.forEach(function (data, index) {499                        targetComponents.push(data.target_component.name)500                      })501                      value = targetComponents.toString()502                    } else {503                      value = partData.value || ''504                    }505                  } else if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property506                    value = partData.value !== null ? partData.value.int_value : ''507                  } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {508                    value = partData.value !== null ? partData.value.float_value : ''509                  } else if (labelParts[ix].type_property.property_type.key === 'Text') {510                    value = partData.value !== null ? partData.value.text_value : ''511                  } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {512                    value = partData.value !== null ? partData.value.date_time_value : ''513                  } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {514                    value = partData.value !== null ? partData.value.boolean_value : ''515                  } else if (labelParts[ix].type_property.property_type.key === 'List') {516                    value = partData.value !== null ? (partData.value.value_set_value ? partData.value.value_set_value.name : '') : ''517                  } else {518                    value = partData.value !== null ? partData.value.other_value : ''519                  }520                  childList.push(<td className='table-td pres-th' key={'ch_' + index + '_' + ix}>{value}</td>)521                })522                let availableAction = {...props.availableAction}523                let list = []524                if (availableAction.Update) {525                  list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openUpdateModal(data) }} > <img src='/assets/edit.png' alt='gear' className='td-icons' /></a>)526                }527                if (availableAction.Delete) {528                  list.push(<a onClick={(event) => { event.preventDefault(); openDeleteModal(data) }} href='javascript:void(0);'><img src='/assets/rubbish-bin.png' alt='delete' className='td-icons' /></a>)529                }530                childList.push(<td className='table-td pres-th' key={'last' + index}>{list}</td>)531              }532              return (<tr className='table-tr' key={index}>{childList}</tr>)533            }534          })535          // props.setConnectionData(connectionData)536        } else {537          modelPrespectivesList = []538          modelPrespectivesList.push((539            <tr key={0} className='table-tr'>540              <td className='table-td pres-th' colSpan={labelParts.length}>{'No data to display'}</td>541            </tr>542          ))543        }544      } else {545        modelPrespectivesList = []546        modelPrespectivesList.push((547          <tr key={0} className='table-tr'>548            <td className='table-td pres-th' colSpan={labelParts.length}>{'No data to display'}</td>549          </tr>550        ))551      }552    }553  }554  if (props.modelPrespectives && props.modelPrespectives !== '') {555    totalPages = Math.ceil((props.modelPrespectives.length - 1) / perPage)556    let i = 1557    while (i <= totalPages) {558      let pageParameter = {}559      pageParameter.number = i560      pageParameter.class = ''561      pageArray.push(pageParameter)562      i++563    }564    pageArray = _.chunk(pageArray, paginationLimit)565    listPage = _.filter(pageArray, function (group) {566      let found = _.filter(group, {'number': currentPage})567      if (found.length > 0) { return group }568    })569    listModelPrespectives()570  }571  if (currentPage === 1) {572    previousClass = 'm-datatable__pager-link--disabled'573  }574  if (currentPage === totalPages) {575    nextClass = 'm-datatable__pager-link--disabled'576  }577  let handleListAndPagination = function (page) {578    listModelPrespectives()579    props.setCurrentPage(page)580    listPage = _.filter(pageArray, function (group) {581      let found = _.filter(group, {'number': page})582      if (found.length > 0) { return group }583    })584  }585  let handlePrevious = function () {586    if (currentPage === 1) {587      previousClass = styles.disabled588    } else {589      props.setCurrentPage(currentPage - 1)590      handleListAndPagination(currentPage - 1)591    }592  }593  let handleNext = function (event) {594    event.preventDefault()595    if (currentPage === totalPages) {596      nextClass = styles.disabled597    } else {598      props.setCurrentPage(currentPage + 1)599      handleListAndPagination(currentPage + 1)600    }601  }602  let handleLast = function (pages) {603    if (currentPage === totalPages) {604      nextClass = styles.disabled605    } else {606      props.setCurrentPage(pages)607      handleListAndPagination(pages)608    }609  }610  let handleFirst = function () {611    props.setCurrentPage(1)612    handleListAndPagination(1)613  }614  let handlePage = function (page) {615    if (page === 1) {616      previousClass = 'm-datatable__pager-link--disabled'617    } else if (page === totalPages) {618      nextClass = 'm-datatable__pager-link--disabled'619    }620    handleListAndPagination(page)621  }622  if (props.metaModelPerspective && props.metaModelPerspective !== '' && props.metaModelPerspective.error_code === null) {623    if (props.metaModelPerspective.resources[0].parts.length > 0) {624      tableHeader = props.metaModelPerspective.resources[0].parts.map(function (data, index) {625        labels.push(data.name)626        return (<th key={index} className='table-th pres-th'><p>{data.name}</p></th>)627      })628    }629    tableHeader.push(<th key={'last'} className='table-th pres-th'><p>Action</p></th>)630  }631  let handleSelectChange = function (index) {632    return function (newValue: any, actionMeta: any) {633      let connectionData = {...props.connectionData}634      let selectedValues = connectionData.selectedValues635      if (actionMeta.action === 'select-option' || actionMeta.action === 'remove-value') {636        selectedValues[index] = newValue637        connectionData.selectedValues = selectedValues638        props.setConnectionData(connectionData)639      }640      if (actionMeta.action === 'clear') {641        selectedValues[index] = null642        connectionData.selectedValues = selectedValues643        props.setConnectionData(connectionData)644      }645    }646  }647  if (props.connectionData !== '' && props.connectionData.operation.isComplete) {648    // eslint-disable-next-line649    mApp && mApp.unblockPage()650    let connectionData = {...props.connectionData}651    connectionSelectBoxList = connectionData.data.map(function (data, index) {652      let selectOptions = connectionData.selectOption[index].map(function (component, id) {653        component.value = component.id654        component.label = component.name655        return component656      })657      return (<div className='form-group row'>658        <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>659        <div className='col-8'>660          <Select661            className='input-sm m-input'662            placeholder={'Select ' + data.name}663            isMulti={data.max !== 1}664            isClearable665            value={connectionData.selectedValues[index]}666            onChange={handleSelectChange(index)}667            options={selectOptions}668          />669        </div>670      </div>)671    })672    businessPropertyList = connectionData.customerProperty.map(function (data, index) {673      let value = null674      if (data.type_property.property_type.key === 'Integer') {675        value = data.type_property.int_value676        return (<div className='form-group row'>677          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>678          <div className='col-8 form-group m-form__group has-info'>679            <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />680            {false && (<div className='form-control-feedback'>should be Number</div>)}681          </div>682        </div>)683      } else if (data.type_property.property_type.key === 'Decimal') {684        value = data.type_property.float_value685        return (<div className='form-group row'>686          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>687          <div className='col-8 form-group m-form__group has-info'>688            <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />689            {false && (<div className='form-control-feedback'>should be Number</div>)}690          </div>691        </div>)692      } else if (data.type_property.property_type.key === 'DateTime') {693        value = data.type_property.date_time_value ? moment(data.type_property.date_time_value).format('DD MMM YYYY') : ''694        return (<div className='form-group row'>695          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>696          <div className='col-8 form-group m-form__group has-info'>697            <DatePicker698              className='input-sm form-control m-input'699              selected={data.type_property.date_time_value ? moment(data.type_property.date_time_value) : ''}700              dateFormat='DD MMM YYYY'701              onSelect={(date) => { editProperty(index, date) }}702              />703            {/* <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editTextProperty(index, childIndex, event.target.value) }} placeholder='Enter Here' /> */}704            {false && (<div className='form-control-feedback'>should be Date</div>)}705          </div>706        </div>)707      } else if (data.type_property.property_type.key === 'Text') {708        value = data.type_property.text_value709        return (<div className='form-group row'>710          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>711          <div className='col-8 form-group m-form__group has-info'>712            <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />713            {false && (<div className='form-control-feedback'>should be Text</div>)}714          </div>715        </div>)716      } else if (data.type_property.property_type.key === 'List') {717        let propertyOption = data.type_property.value_set.values.map((option, opIndex) => {718          option.label = option.name719          option.value = option.id720          return option721        })722        let dvalue = data.type_property.value_set_value723        if (data.type_property.value_set_value !== null) {724          dvalue.label = data.type_property.value_set_value.name725          dvalue.value = data.type_property.value_set_value.id726        }727        value = data.type_property.value_set_value ? data.type_property.value_set_value.name : null728        return (<div className='form-group row'>729          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>730          <Select731            className='col-8 input-sm m-input'732            placeholder='Select Options'733            isClearable734            defaultValue={dvalue}735            onChange={handlePropertySelect(index)}736            isSearchable={false}737            name={'selectProperty'}738            options={propertyOption}739            />740        </div>)741      } else {742        value = data.type_property.other_value743        return (<div className='form-group row'>744          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>745          <div className='col-8 form-group m-form__group has-info'>746            <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />747            {true && (<div className='form-control-feedback'>should be Text</div>)}748          </div>749        </div>)750      }751    })752  }753  if (props.addSettings.createResponse !== null) {754    if (props.addSettings.createResponse.length > 0) {755      messageList = props.addSettings.createResponse.map(function (data, index) {756        if (data.error_code === null) {757          if (data.message != null) {758            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)759          } else {760            if (props.addSettings.createResponse.length === 1) {761              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)762            }763          }764        } else {765          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)766        }767      })768    } else {769      messageList = []770      messageList.push((771        <li key={0}>{'No data has been added.'}</li>772      ))773    }774  }775  if (props.addSettings.updateResponse !== null) {776    if (props.addSettings.updateResponse.length > 0) {777      messageList = props.addSettings.updateResponse.map(function (data, index) {778        if (data.error_code === null) {779          if (data.message != null) {780            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)781          } else {782            if (props.addSettings.updateResponse.length === 1) {783              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)784            }785          }786        } else {787          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)788        }789      })790    } else {791      messageList = []792      messageList.push((793        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>794      ))795    }796  }797  // var showCurrentPages = modelPrespectivesList.length798  const startValueOfRange = (currentPage - 1) * perPage + 1799  const endValueOfRange = (currentPage * perPage) <= (modelPrespectivesList.length) ? (currentPage * perPage) : (modelPrespectivesList.length)800  var activeClass = ''801return (802  <div>803    <div id='entitlementList'>804      {/* The table structure begins */}805      <div className='row'>806        <div className='col-md-12'>807          <div className='m_datatable' id='scrolling_vertical'>808            <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll' id='scrolling_vertical' style={{}}>809              <div>810                <div className='m-portlet'>811                  <div className='m-portlet__body'>812                    <div className='row'>813                      <div className='col-md-10' />814                      {props.availableAction.Create && (<div className='col-md-2 float-right'>815                        <button type='button' onClick={openModal} className='btn btn-outline-info btn-sm' style={{'float': 'right'}}>Add </button>&nbsp;816                      </div>)}817                    </div>818                    <br />819                    <div id='m_table_1_wrapper' className='dataTables_wrapper dt-bootstrap4'>820                      <div className='row' style={{'marginBottom': '20px'}}>821                        <div className='col-sm-12 col-md-6'>822                          <div className='dataTables_length pull-left' id='m_table_1_length' style={{'display': 'flex'}}>823                            <div style={{'display': 'flex', 'width': '350px'}}>824                              <div className='m-input-icon m-input-icon--left'>825                                <input type='text' className='form-control m-input' placeholder='Search...' id='generalSearch' ref={input => (searchTextBox = input)} onKeyUp={handleInputChange} />826                                <span className='m-input-icon__icon m-input-icon__icon--left'>827                                  <span>828                                    <i className='la la-search' />829                                  </span>830                                </span>831                              </div>832                            </div>833                          </div>834                        </div>835                        {/* <div className='col-sm-12 col-md-6'>836                          <div className='dataTables_length' id='m_table_1_length' style={{'display': 'flex'}}>837                            <h5 style={{'margin': '8px'}}>Show</h5>838                            <select value={props.perPage} name='m_table_1_length' onBlur={handleBlurdropdownChange} onChange={handledropdownChange} aria-controls='m_table_1' className='custom-select custom-select-sm form-control form-control-sm' style={{'height': '40px'}}>839                              <option value={10}>10</option>840                              <option value={25}>25</option>841                              <option value={50}>50</option>842                              <option value={100}>100</option>843                            </select>844                            <h5 style={{'margin': '8px'}}>Entries</h5>845                          </div>846                        </div> */}847                      </div>848                    </div>849                    <div id='ModelPerspectiveList' className='dataTables_scrollBody' style={{position: 'relative', overflow: 'auto', width: '100%', 'maxHeight': '100vh'}}>850                      <table className='table-pres m-portlet table table-striped- table-bordered table-hover table-checkable dataTable no-footer' id='m_table_1' aria-describedby='m_table_1_info' role='grid'>851                        <thead className='table-head pres-th'>852                          <tr role='row' className='table-head-row'>853                            {tableHeader}854                          </tr>855                        </thead>856                        <tbody className='table-body pres-th'>857                          {modelPrespectivesList}858                        </tbody>859                      </table>860                    </div>861                    {/* dummy row */}862                    <div className='row'>863                      <div className='col-sm-12 col-md-6' id='scrolling_vertical'>864                        <div865                          className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll'866                          id='scrolling_vertical'867                        >868                          <div className='m-datatable__pager m-datatable--paging-loaded clearfix'>869                            <ul className='m-datatable__pager-nav  pag'>870                              {currentPage !== 1 && totalPages > 1 ? <li className='page-item'><a href='javascript:void(0)' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev  page-link list links anchors' + previousClass} onClick={() => { handlePrevious(); handleFirst() }} data-page='4'><span aria-hidden='true'>&laquo;</span><span className={'sr-only'}>Previous</span></a></li> : ''}871                              {currentPage !== 1 && totalPages > 1 ? <li className='page-item anchors'><a href='javascript:void(0)' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev  page-link list links anchors' + previousClass} onClick={handlePrevious} data-page='4'><span aria-hidden='true'>&lt;</span><span className={'sr-only'}>Previous</span></a></li> : ''}872                              {listPage[0] && listPage[0].map(function (page, index) {873                                      if (page.number === currentPage) {874                                              page.class = 'm-datatable__pager-link--active activ'875                                              activeClass = 'actives'876                                            } else {877                                              page.class = ''878                                              activeClass = ''879                                            }880                                            return (<li key={index} className={'page-item' + activeClass}>881                                              <a href='javascript:void(0)' className={'m-datatable__pager-link m-datatable__pager-link-number actives  page-link list ' + page.class} data-page={page.number} title={page.number} onClick={(event) => { event.preventDefault(); handlePage(page.number) }} >{page.number}</a>882                                            </li>)883                                          })}884                              {currentPage !== totalPages &&885                                totalPages > 1 && (886                                <li className='page-item'><a href='javascript:void(0)' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next   page-link list links anchors' + nextClass} onClick={handleNext} data-page='4'><span aria-hidden='true'>&gt;</span><span className={'sr-only'}>Next</span></a></li>887                              )}888                              {currentPage !== totalPages &&889                                totalPages > 1 && (890                                <li className='page-item'><a href='javascript:void(0)' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next   page-link list links anchors' + nextClass} onClick={() => handleLast(totalPages)} data-page='4'><span aria-hidden='true'>&raquo;</span><span className={'sr-only'}>Next</span></a></li>891                              )}892                            </ul>893                          </div>894                        </div>895                      </div>896                      <div className={`col-sm-12 col-md-6 text-right ${styles.topSpacing} `}>897                        {/* showing dropdown */}898                        <div className='showing-div showspace spaceMargin'>899                          <div className='dropdown dropup-showing'>900                            <button className='btn btn-default dropdown-toggle dropup-btn' type='button' data-toggle='dropdown'>{props.perPage}<span className='caret' /></button>901                            <ul className='dropdown-menu menu'>902                              <li><a href='javascript:void(0)' onClick={() => handledropdownChange(10)}>10</a></li>903                              <li><a href='javascript:void(0)' onClick={() => handledropdownChange(25)}>25</a></li>904                              <li><a href='javascript:void(0)' onClick={() => handledropdownChange(50)}>50</a></li>905                              <li><a href='javascript:void(0)' onClick={() => handledropdownChange(100)}>100</a></li>906                            </ul>907                          </div>908                          <span className='showing-text text-right showingText'> Showing {startValueOfRange} - {endValueOfRange} of {props.modelPrespectives ? props.modelPrespectives.length - 1 : ''} </span>909                        </div>910                      </div>911                    </div>912                    {/* original row */}913                    {/* <div className='row'>914                      <div className='col-md-12' id='scrolling_vertical'>915                        <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll pull-right' id='scrolling_vertical' style={{}}>916                          <div className='m-datatable__pager m-datatable--paging-loaded clearfix'>917                            <ul className='m-datatable__pager-nav  pag'>918                              {currentPage !== 1 && totalPages > 1 ? <li className='page-item'><a href='' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev  page-link list links anchors' + previousClass} onClick={handlePrevious} data-page='4'><span aria-hidden='true'>&laquo;</span><span className={'sr-only'}>Previous</span></a></li> : ''}919                              {currentPage !== 1 && totalPages > 1 ? <li className='page-item anchors'><a href='' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev  page-link list links anchors' + previousClass} onClick={handlePrevious} data-page='4'><span aria-hidden='true'>&lt;</span><span className={'sr-only'}>Previous</span></a></li> : ''}920                              {listPage[0] && listPage[0].map(function (page, index) {921                                      if (page.number === currentPage) {922                                              page.class = 'm-datatable__pager-link--active activ'923                                              activeClass = 'actives'924                                            } else {925                                              page.class = ''926                                              activeClass = ''927                                            }928                                            return (<li key={index} className={'page-item' + activeClass}>929                                              <a href='' className={'m-datatable__pager-link m-datatable__pager-link-number actives  page-link list ' + page.class} data-page={page.number} title={page.number} onClick={(event) => { event.preventDefault(); handlePage(page.number) }} >{page.number}</a>930                                            </li>)931                                          })}932                              {currentPage !== totalPages &&933                                totalPages > 1 && (934                                <li className='page-item'><a href='' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next   page-link list links anchors' + nextClass} onClick={handleNext} data-page='4'><span aria-hidden='true'>&gt;</span><span className={'sr-only'}>Next</span></a></li>935                              )}936                              {currentPage !== totalPages &&937                                totalPages > 1 && (938                                <li className='page-item'><a href='' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next   page-link list links anchors' + nextClass} onClick={handleNext} data-page='4'><span aria-hidden='true'>&raquo;</span><span className={'sr-only'}>Next</span></a></li>939                              )}940                            </ul>941                          </div>942                        </div>943                      </div>944                    </div> */}945                  </div>946                </div>947              </div>948            </div>949          </div>950        </div>951      </div>952    </div>953    <div>954      <ReactModal isOpen={props.addSettings.isModalOpen}955        onRequestClose={closeModal}956        // className='modal-dialog modal-lg'957        style={customStylescrud}958        >959        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}960        <div className={''}>961          <div className=''>962            <div className='modal-content'>963              <div className='modal-header'>964                {props.addSettings.createResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Add Perspective</h4>)}965                {props.addSettings.createResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Create Report</h4>)}966                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>967                  <span aria-hidden='true'>Ã</span>968                </button>969              </div>970              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>971                {props.addSettings.createResponse === null && (<div className='col-md-12'>972                  {/* {messageBlock} */}973                  <div className='form-group m-form__group row'>974                    <div className='col-8'>975                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}976                    </div>977                  </div>978                  <div className='form-group m-form__group row'>979                    <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>980                    <div className='col-8'>981                      <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />982                    </div>983                  </div>984                  <div className='form-group m-form__group row'>985                    <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>986                    <div className='col-8'>987                      <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />988                    </div>989                  </div>990                  {businessPropertyList}991                  {connectionSelectBoxList}992                </div>)}993                {props.addSettings.createResponse !== null && (<div className='m-list-search__results'>994                  {messageList}995                </div>)}996              </div>997              <div className='modal-footer'>998                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>999                {props.addSettings.createResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={createComponent} >Add</button>)}1000              </div>1001            </div>1002          </div>1003        </div>1004      </ReactModal>1005      <ReactModal isOpen={props.addSettings.isEditModalOpen}1006        onRequestClose={closeModal}1007        className='modal-dialog modal-lg'1008        style={{'content': {'top': '20%'}}}1009        >1010        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1011        <div className={''}>1012          <div className=''>1013            <div className='modal-content' style={{'height': '400px'}}>1014              <div className='modal-header'>1015                {props.addSettings.updateResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Edit Perspective</h4>)}1016                {props.addSettings.updateResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Update Report</h4>)}1017                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1018                  <span aria-hidden='true'>Ã</span>1019                </button>1020              </div>1021              <div className='modal-body' style={{'height': 'calc(60vh - 55px)', 'overflow': 'auto'}}>1022                {props.addSettings.updateResponse === null && (<div className='col-md-12'>1023                  {/* {messageBlock} */}1024                  <div className='form-group m-form__group row'>1025                    <div className='col-8'>1026                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1027                    </div>1028                  </div>1029                  <div className='form-group m-form__group row'>1030                    <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>1031                    <div className='col-8'>1032                      <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />1033                    </div>1034                  </div>1035                  <div className='form-group m-form__group row'>1036                    <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>1037                    <div className='col-8'>1038                      <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />1039                    </div>1040                  </div>1041                  {businessPropertyList}1042                  {connectionSelectBoxList}1043                </div>)}1044                {props.addSettings.updateResponse !== null && (<div className='m-list-search__results'>1045                  {messageList}1046                </div>)}1047              </div>1048              <div className='modal-footer'>1049                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1050                {props.addSettings.updateResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={updateComponent} >Update</button>)}1051              </div>1052            </div>1053          </div>1054        </div>1055      </ReactModal>1056      <ReactModal isOpen={props.addSettings.isDeleteModalOpen}1057        onRequestClose={closeModal}1058        className='modal-dialog '1059        style={{'content': {'top': '20%'}}} >1060        <div className={styles.modalwidth}>1061          <div className=''>1062            <div className='modal-content'>1063              <div className='modal-header'>1064                <h4 className='modal-title' id='exampleModalLabel'>Delete Service</h4>1065                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1066                  <span aria-hidden='true'>Ã</span>1067                </button>1068              </div>1069              <div className='modal-body'>1070                <div>1071                  <h6>Confirm deletion of Service {serviceName}</h6>1072                </div>1073              </div>1074              <div className='modal-footer'>1075                <button type='button' onClick={closeModal} id='m_login_signup' className='btn btn-outline-info btn-sm'>Close</button>1076                <button type='button' id='m_login_signup' className='btn btn-outline-info btn-sm' onClick={removeComponent}>Confirm</button>1077              </div>1078            </div>1079          </div>1080        </div>1081      </ReactModal>1082    </div>1083    {/* <Discussion name={'Entitlements'} TypeKey='Entitlement' type='ComponentType' {...props} />1084    <NewDiscussion contextId={contextId} name={'Entitlements'} type='ComponentType' {...props} /> */}1085  </div>1086      )1087  }1088  Perspectives.propTypes = {1089    addSettings: PropTypes.any,1090    modelPrespectives: PropTypes.any,1091    metaModelPerspective: PropTypes.any,1092    currentPage: PropTypes.any,1093    perPage: PropTypes.any,1094    copyModelPrespectives: PropTypes.any,1095    availableAction: PropTypes.any,1096    connectionData: PropTypes.any...

backup.js

Source:backup.js

1import React from 'react'2import _ from 'lodash'3import ReactModal from 'react-modal'4import Select from 'react-select'5import moment from 'moment'6import DatePicker from 'react-datepicker'7import PropTypes from 'prop-types'8import styles from './perspectiveHierarchyComponent.scss'9import 'react-datepicker/dist/react-datepicker.css'10ReactModal.setAppElement('#root')11let comparer = function (otherArray) {12  return function (current) {13    return otherArray.filter(function (other) {14      return other.value === current.value && other.display === current.display15    }).length === 016  }17}18const customStylescrud = { content: { top: '10%', left: '8%', background: 'none', border: '0px', overflow: 'none', margin: 'auto' } }19export default function PerspectiveHierarchy (props) {20  let perspectiveName = ''21  let connectionSelectBoxList = ''22  let businessPropertyList = ''23  let searchTextBox24  let perPage = props.perPage25  let currentPage = props.currentPage26  let nextClass = ''27  let previousClass = ''28  let pageArray = []29  let listPage = []30  let paginationLimit = 631  let modelPrespectivesList = ''32  let totalPages33  let tableHeader = []34  let labels = []35  let messageList = ''36  let serviceName = props.addSettings.deleteObject ? props.addSettings.deleteObject.subject_name : ''37  let expandSettings = props.expandSettings38  console.log('perspectives props', props, searchTextBox, expandSettings)39  let handleClick = function (data, level) {40    console.log(data)41    let expandFlag = true42    let expandSettings = {...props.expandSettings}43    let selectedObject = expandSettings.selectedObject[level]44    if (selectedObject && selectedObject.name === data.name) {45      expandFlag = !selectedObject.expandFlag46      if (!expandFlag) {47        // resetList()48        // props.resetResponse()49      }50    } else {51      expandFlag = true52      expandSettings.metaModelPerspectives[level] = data.metaModelPerspectives53      expandSettings.selectedObject[level] = data54    }55    if (expandFlag) {56      expandSettings.processAPIResponse = true57      let payload = {}58      payload['meta_model_perspective_id'] = data.metaModelPerspectives.id59      payload['view_key'] = data.metaModelPerspectives.view_key60      payload['parent_reference'] = data.parentReference61      props.fetchNestedModelPrespectives(payload)62    }63    expandSettings.selectedObject[level].expandFlag = expandFlag64    expandSettings.level = level65    props.setExpandSettings(expandSettings)66    // props.fetchSupplierSoftwares && props.fetchSupplierSoftwares(payload)67    // eslint-disable-next-line68    // mApp && mApp.block('#supplierList', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})69  }70  let editProperty = function (index, value) {71    let connectionData = {...props.connectionData}72    let customerProperty = connectionData.customerProperty73    let propertyType = customerProperty[index].type_property.property_type74    if (propertyType.key === 'Boolean') {75      customerProperty[index].type_property.boolean_value = value76    } else if (propertyType.key === 'Integer') {77      customerProperty[index].type_property.int_value = value78    } else if (propertyType.key === 'Decimal') {79      customerProperty[index].type_property.float_value = value80    } else if (propertyType.key === 'DateTime') {81      customerProperty[index].type_property.date_time_value = value.format('DD MMM YYYY')82    } else if (propertyType.key === 'Text') {83      customerProperty[index].type_property.text_value = value84    } else {85      customerProperty[index].type_property.other_value = value86    }87    connectionData.customerProperty = customerProperty88    props.setConnectionData(connectionData)89  }90  let handlePropertySelect = function (index) {91    return function (newValue: any, actionMeta: any) {92      console.log('newValue', newValue)93      console.log('actionMeta', actionMeta)94      let connectionData = JSON.parse(JSON.stringify(props.connectionData))95      let customerProperty = connectionData.customerProperty96      if (actionMeta.action === 'select-option') {97        customerProperty[index].type_property.value_set_value = newValue98      }99      if (actionMeta.action === 'clear') {100        customerProperty[index].type_property.value_set_value = newValue101      }102      connectionData.customerProperty = customerProperty103      props.setConnectionData(connectionData)104    }105  }106  let handleBlurdropdownChange = function (event) {107    console.log('handle Blur change', event.target.value)108  }109  let handledropdownChange = function (event) {110    console.log('handle change', event.target.value, typeof event.target.value)111    props.setPerPage(parseInt(event.target.value))112  }113  let openUpdateModal = function (data) {114    console.log('data', data)115    let addSettings = {...props.addSettings}116    let labelParts = props.metaModelPerspective.resources[0].parts117    let selectedValues = []118    let setCustomerProperty = []119    if (data.parts) {120      labelParts.forEach(function (partData, ix) {121        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property122          if (partData.name === 'Name') {123            addSettings.name = data.parts[ix].value124          }125          if (partData.name === 'Description') {126            addSettings.description = data.parts[ix].value127          }128        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property129          if (data.parts[ix].value.length > 0) {130            // todo write code for multiple component131            let eachSelectedValues = []132            data.parts[ix].value.forEach(function (value, ix) {133              let targetComponent = value.target_component134              targetComponent.label = targetComponent.name135              targetComponent.value = targetComponent.id136              eachSelectedValues.push(targetComponent)137            })138            selectedValues.push(eachSelectedValues)139          } else {140            selectedValues.push(null)141          }142        } else if (partData.standard_property === null && partData.type_property !== null) { // Customer Property143          let value = null144          if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property145            value = data.parts[ix].value !== null ? data.parts[ix].value.int_value : ''146          } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {147            value = data.parts[ix].value !== null ? data.parts[ix].value.float_value : ''148          } else if (labelParts[ix].type_property.property_type.key === 'Text') {149            value = data.parts[ix].value !== null ? data.parts[ix].value.text_value : ''150          } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {151            value = data.parts[ix].value !== null ? data.parts[ix].value.date_time_value : ''152          } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {153            value = data.parts[ix].value !== null ? data.parts[ix].value.boolean_value : ''154          } else if (labelParts[ix].type_property.property_type.key === 'List') {155            value = data.parts[ix].value !== null ? data.parts[ix].value.value_set_value : ''156          } else {157            value = data.parts[ix].value !== null ? data.parts[ix].value.other_value : ''158          }159          setCustomerProperty.push(value)160        }161      })162    }163    addSettings.isEditModalOpen = true164    addSettings.updateObject = data165    addSettings.updateResponse = null166    props.setAddSettings(addSettings)167    let connectionData = {...props.connectionData}168    let existingCustomerProperty = connectionData.customerProperty.map(function (data, index) {169      if (data.type_property.property_type.key === 'Boolean') {170        data.type_property.boolean_value = setCustomerProperty[index]171      } else if (data.type_property.property_type.key === 'Integer') {172        data.type_property.int_value = setCustomerProperty[index]173      } else if (data.type_property.property_type.key === 'Decimal') {174        data.type_property.float_value = setCustomerProperty[index]175      } else if (data.type_property.property_type.key === 'DateTime') {176        data.type_property.date_time_value = setCustomerProperty[index]177      } else if (data.type_property.property_type.key === 'Text') {178        data.type_property.text_value = setCustomerProperty[index]179      } else {180        data.type_property.other_value = setCustomerProperty[index]181      }182      return data183    })184    connectionData.customerProperty = existingCustomerProperty185    connectionData.selectedValues = selectedValues186    connectionData.initialSelectedValues = JSON.parse(JSON.stringify(selectedValues))187    props.setConnectionData(connectionData)188  }189  let openModal = function (event) {190    event.preventDefault()191    let addSettings = {...props.addSettings}192    addSettings.isModalOpen = true193    addSettings.name = ''194    addSettings.description = ''195    props.setAddSettings(addSettings)196    let connectionData = {...props.connectionData}197    let selectedValues = []198    connectionData.selectedValues.forEach(function (data) {199      selectedValues.push(null)200    })201    let resetCustomerProperty = connectionData.customerProperty.map(function (data, index) {202      if (data.type_property.property_type.key === 'Boolean') {203        data.type_property.boolean_value = null204      } else if (data.type_property.property_type.key === 'Integer') {205        data.type_property.int_value = null206      } else if (data.type_property.property_type.key === 'Decimal') {207        data.type_property.float_value = null208      } else if (data.type_property.property_type.key === 'DateTime') {209        data.type_property.date_time_value = null210      } else if (data.type_property.property_type.key === 'Text') {211        data.type_property.text_value = null212      } else if (data.type_property.property_type.key === 'List') {213        data.type_property.value_set_value = null214      } else {215        data.type_property.other_value = null216      }217      return data218    })219    connectionData.selectedValues = selectedValues220    connectionData.customerProperty = resetCustomerProperty221    props.setConnectionData(connectionData)222  }223  let openDeleteModal = function (data) {224    console.log('delete', data)225    let addSettings = {...props.addSettings}226    addSettings.isDeleteModalOpen = true227    addSettings.deleteObject = data228    props.setAddSettings(addSettings)229  }230  let closeModal = function () {231    let addSettings = {...props.addSettings}232    addSettings.isModalOpen = false233    addSettings.isDeleteModalOpen = false234    addSettings.isEditModalOpen = false235    addSettings.deleteObject = null236    addSettings.createResponse = null237    props.setAddSettings(addSettings)238  }239  let editName = function (event) {240    let addSettings = JSON.parse(JSON.stringify(props.addSettings))241    addSettings.name = event.target.value242    props.setAddSettings(addSettings)243  }244  let editDescription = function (event) {245    let addSettings = JSON.parse(JSON.stringify(props.addSettings))246    addSettings.description = event.target.value247    props.setAddSettings(addSettings)248  }249  let createComponent = function (event) {250    event.preventDefault()251    // eslint-disable-next-line252    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})253    let addSettings = JSON.parse(JSON.stringify(props.addSettings))254    let patchPayload = []255    let obj = {}256    obj.op = 'add'257    obj.path = '/-'258    obj.value = {}259    obj.value.parts = []260    obj.value.parts[0] = {'value': addSettings.name}261    obj.value.parts[1] = {'value': addSettings.description}262    let connectionData = {...props.connectionData}263    connectionData.selectedValues.forEach(function (data, index) {264      if (Array.isArray(data)) {265        if (data.length > 0) {266          let connections = []267          data.forEach(function (selectedValue, ix) {268            connections.push(selectedValue.id)269          })270          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}271        } else {272          obj.value.parts[connectionData.data[index].partIndex] = {}273        }274      } else {275        if (data) {276          let connections = []277          connections.push(data.id)278          obj.value.parts[connectionData.data[index].partIndex] = {'value': connections}279        } else {280          obj.value.parts[connectionData.data[index].partIndex] = {}281        }282      }283    })284    connectionData.customerProperty.forEach(function (data, index) {285      if (data.type_property.property_type.key === 'Boolean') {286        obj.value.parts[data.partIndex] = {value: {'boolean_value': data.type_property.boolean_value}}287      } else if (data.type_property.property_type.key === 'Integer') {288        obj.value.parts[data.partIndex] = {value: {'int_value': data.type_property.int_value}}289      } else if (data.type_property.property_type.key === 'Decimal') {290        obj.value.parts[data.partIndex] = {value: {'float_value': data.type_property.float_value}}291      } else if (data.type_property.property_type.key === 'DateTime') {292        obj.value.parts[data.partIndex] = {value: {'date_time_value': data.type_property.date_time_value}}293      } else if (data.type_property.property_type.key === 'Text') {294        obj.value.parts[data.partIndex] = {value: {'text_value': data.type_property.text_value}}295      } else if (data.type_property.property_type.key === 'List') {296        obj.value.parts[data.partIndex] = {value: {'value_set_value_id': data.type_property.value_set_value ? data.type_property.value_set_value.id : null}}297      } else {298        obj.value.parts[data.partIndex] = {value: {'other_value': data.type_property.other_value}}299      }300    })301    patchPayload.push(obj)302    let payload = {}303    payload.queryString = {}304    payload.queryString.meta_model_perspective_id = props.metaModelPerspective.resources[0].id305    payload.queryString.apply_changes = true306    payload.data = {}307    payload.data[props.metaModelPerspective.resources[0].id] = patchPayload308    console.log('payload', payload)309    props.updateModelPrespectives(payload)310  }311  let updateComponent = function (event) {312    event.preventDefault()313    // eslint-disable-next-line314    mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})315    let addSettings = JSON.parse(JSON.stringify(props.addSettings))316    let connectionData = JSON.parse(JSON.stringify(props.connectionData))317    let labelParts = props.metaModelPerspective.resources[0].parts318    let data = addSettings.updateObject319    let patchPayload = []320    if (data.parts) {321      labelParts.forEach(function (partData, index) {322        let valueType = ''323        let obj = {}324        if (partData.standard_property !== null && partData.type_property === null) { // Standard Property325          obj.op = 'replace'326          valueType = partData.standard_property327          obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType328          if (partData.standard_property === 'name') {329            obj.value = props.addSettings.name330          }331          if (partData.standard_property === 'description') {332            obj.value = props.addSettings.description333          }334          patchPayload.push(obj)335        } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property336          let dataIndex = connectionData.data.findIndex(p => p.name === partData.name)337          console.log('dataIndex', dataIndex)338          if (dataIndex !== -1) {339            // found index340            let max = connectionData.data[dataIndex].max341            let initialSelectedValue = connectionData.initialSelectedValues[dataIndex]342            let selectedValue = connectionData.selectedValues[dataIndex]343            console.log('initialSelectedValue', initialSelectedValue)344            console.log('selectedValue', selectedValue)345            let onlyInInitial = []346            if (initialSelectedValue) {347              if (max === 1) {348                let temp = []349                temp.push(initialSelectedValue)350                initialSelectedValue = temp351              }352            }353            if (selectedValue) {354              if (max === 1) {355                let temp = []356                temp.push(selectedValue)357                selectedValue = temp358              }359            }360            if (initialSelectedValue) {361              if (selectedValue) {362                onlyInInitial = initialSelectedValue.filter(comparer(selectedValue))363              } else {364                onlyInInitial = initialSelectedValue365              }366            }367            let onlyInFinal = []368            if (selectedValue) {369              if (initialSelectedValue) {370                onlyInFinal = selectedValue.filter(comparer(initialSelectedValue))371              } else {372                onlyInFinal = selectedValue373              }374            }375            // remove operation payload376            if (onlyInInitial.length > 0) {377              let connectionIdArray = data.parts[index].value378              let value = []379              onlyInInitial.forEach(function (removeData, rid) {380                let found = _.find(connectionIdArray, function (obj) { return (obj.target_component.id === removeData.id) })381                console.log('found ----', found)382                if (found) {383                  // set connection id384                  value.push(found.connection.id)385                }386              })387              let obj = {}388              obj.op = 'remove'389              obj.value = value390              valueType = 'value/-'391              obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType392              patchPayload.push(obj)393              console.log('connectionId obj', connectionIdArray, obj)394            }395            console.log('index', dataIndex)396            console.log('onlyInInitial', onlyInInitial)397            console.log('onlyInFinal', onlyInFinal)398            let existingTargetComponent = connectionData.selectedValues[dataIndex]399            console.log('existingTargetComponent', existingTargetComponent)400            if (onlyInFinal.length > 0) {401              let value = []402              onlyInFinal.forEach(function (targetComponent, rid) {403                value.push(targetComponent.id)404              })405              let obj = {}406              obj.op = 'add'407              obj.value = value408              valueType = 'value/-'409              obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType410              patchPayload.push(obj)411              console.log('add obj', obj)412            }413          } else {414            console.log('index', dataIndex)415          }416        } if (partData.standard_property === null && partData.type_property !== null) {417          let obj = {}418          obj.op = 'replace'419          let customerProperty = _.find(connectionData.customerProperty, function (obj) {420            return obj.name === partData.name421          })422          console.log('customerProperty', customerProperty)423          if (customerProperty) {424            if (customerProperty.type_property.property_type.key === 'Boolean') {425              valueType = `boolean_value`426              obj.value = customerProperty.type_property.boolean_value427            } else if (customerProperty.type_property.property_type.key === 'Integer') {428              valueType = `int_value`429              obj.value = customerProperty.type_property.int_value430            } else if (customerProperty.type_property.property_type.key === 'Decimal') {431              valueType = `float_value`432              obj.value = customerProperty.type_property.float_value433            } else if (customerProperty.type_property.property_type.key === 'DateTime') {434              valueType = `date_time_value`435              obj.value = customerProperty.type_property.date_time_value436            } else if (customerProperty.type_property.property_type.key === 'Text') {437              valueType = `text_value`438              obj.value = customerProperty.type_property.text_value439            } else if (customerProperty.type_property.property_type.key === 'List') {440              valueType = `value_set_value_id`441              obj.value = customerProperty.type_property.value_set_value ? customerProperty.type_property.value_set_value.id : null442            } else {443              valueType = `other_value`444              obj.value = customerProperty.type_property.other_value445            }446            obj.path = '/' + data.subject_id + '/parts/' + index + '/' + valueType447            patchPayload.push(obj)448          }449        }450      })451    }452    let payload = {}453    payload.queryString = {}454    payload.queryString.meta_model_perspective_id = props.metaModelPerspective.resources[0].id455    payload.queryString.apply_changes = true456    payload.data = {}457    payload.data[props.metaModelPerspective.resources[0].id] = patchPayload458    console.log('payload', payload)459    console.log('updateComponentModelPrespectives', props.updateComponentModelPrespectives)460    props.updateComponentModelPrespectives(payload)461  }462  let removeComponent = function (event) {463    event.preventDefault()464    let addSettings = {...props.addSettings}465    if (addSettings.deleteObject) {466      let payload = {467        'id': addSettings.deleteObject.subject_id468      }469      props.deleteComponentModelPerspectives(payload)470    }471    closeModal()472  }473  let genericExpandRow = function () {474  }475  let listModelPrespectives = function () {476    console.log('list modal pers', props)477    if (props.modelPrespectives !== '') {478      let labelParts = props.metaModelPerspective.resources[0].parts479      // let crude = props.crude480      // let mask = props.metaModelPerspective.resources[0].crude481      // let crud = []482      // for (let option in crude) {483      //   if (crude.hasOwnProperty(option)) {484      //     if (mask & crude[option]) {485      //       crud.push(option)486      //     }487      //   }488      // }489      console.log('list props', props)490      if (props.modelPrespectives.length > 1 && !props.expandSettings.processAPIResponse) {491        let modelPrespectives = _.filter(props.modelPrespectives, {'error_code': null})492        modelPrespectives.splice(-1, 1)493        if (modelPrespectives.length > 1) {494          let expandSettings = JSON.parse(JSON.stringify(props.expandSettings))495          let expandLevel = expandSettings.level496          modelPrespectivesList = modelPrespectives.slice(perPage * (currentPage - 1), ((currentPage - 1) + 1) * perPage).map(function (data, index) {497            if (data.error_code === null) {498              let rowColumn = []499              let faClass = 'fa fa-plus'500              let childList = ''501              let selectedObject = {}502              if (data.parts) {503                data.parts.forEach(function (partData, ix) {504                  let value505                  let isName = false506                  if (labelParts[ix].standard_property !== null && labelParts[ix].type_property === null) { // Standard Property507                    // console.log('partData standard property', partData, labelParts[ix], ix)508                    isName = true509                    value = partData ? partData.value : ''510                    selectedObject.name = value511                    if (expandSettings.level !== null) {512                      // expand row is clicked for first row513                      if (expandSettings.level === 0) {514                        if (expandSettings.selectedObject[expandLevel].name === value && expandSettings.selectedObject[expandLevel].expandFlag) {515                          faClass = 'fa fa-minus'516                          console.log('expandSettings', expandSettings)517                          if (props.expandSettings.modelPerspectives[expandLevel].length > 0) {518                            let childLabelParts = props.expandSettings.metaModelPerspectives[expandLevel].parts519                            console.log('childLabelParts', childLabelParts)520                            childList = props.expandSettings.modelPerspectives[expandLevel].map(function (childData, idx) {521                              let childRowColumn = []522                              console.log('childData', childData)523                              if (childData.parts) {524                                childData.parts.forEach(function (childPartData, cix) {525                                  let childValue526                                  let isChildName = false527                                  if (childLabelParts[cix].standard_property !== null && childLabelParts[cix].type_property === null) { // Standard Property528                                    isChildName = true529                                    childValue = childPartData ? childPartData.value : ''530                                    childRowColumn.push(<td className='' key={'ch_' + index + '_' + idx + '_' + cix}>{isChildName && (<i className={'fa fa-plus'} aria-hidden='true' style={{'cursor': 'pointer'}} />)} {childValue}</td>)531                                  } else {532                                    childValue = ''533                                  }534                                  // childRowColumn.push(<td className='' key={'ch_' + index + '_' + idx + '_' + cix}>{isChildName && (<i className={'fa fa-minus'} aria-hidden='true' style={{'cursor': 'pointer'}} />)} {childValue}</td>)535                                })536                              }537                              return (538                                <tr key={'child' + idx}>539                                  <td>{''}</td>540                                  <td>{''}</td>541                                  <td>{''}</td>542                                  {childRowColumn}543                                  <td>{''}</td>544                                </tr>545                              )546                            })547                          } else {548                            childList = []549                            childList.push((550                              <tr key={0}>551                                <td colSpan='5'>{'No data to display'}</td>552                              </tr>553                            ))554                          }555                        }556                      }557                    }558                  } else if (labelParts[ix].standard_property === null && labelParts[ix].type_property === null) { // Connection Property559                    // console.log('partData', partData, labelParts[ix], ix)560                    if (Array.isArray(partData.value)) {561                      let targetComponents = []562                      partData.value.forEach(function (data, index) {563                        targetComponents.push(data.target_component.name)564                      })565                      value = targetComponents.toString()566                    } else {567                      selectedObject.parentReference = partData.value.parent_reference568                      value = 'Add Agreement'569                      selectedObject.metaModelPerspectives = labelParts[ix].constraint_perspective570                    }571                    // value = ''572                  } else if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property573                    value = partData.value !== null ? partData.value.int_value : ''574                  } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {575                    value = partData.value !== null ? partData.value.float_value : ''576                  } else if (labelParts[ix].type_property.property_type.key === 'Text') {577                    value = partData.value !== null ? partData.value.text_value : ''578                  } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {579                    value = partData.value !== null ? partData.value.date_time_value : ''580                  } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {581                    value = partData.value !== null ? partData.value.boolean_value : ''582                  } else if (labelParts[ix].type_property.property_type.key === 'List') {583                    value = partData.value !== null ? (partData.value.value_set_value ? partData.value.value_set_value.name : '') : ''584                  } else {585                    value = partData.value !== null ? partData.value.other_value : ''586                  }587                  // console.log('value', value)588                  rowColumn.push(<td className='' key={'ch_' + index + '_' + ix}>{isName && (<i className={faClass} aria-hidden='true' onClick={(event) => { event.preventDefault(); handleClick(selectedObject, 0) }} style={{'cursor': 'pointer'}} />)} {value}</td>)589                })590                let availableAction = {...props.availableAction}591                let list = []592                if (availableAction.Update) {593                  list.push(<a href='javascript:void(0);' onClick={(event) => { event.preventDefault(); openUpdateModal(data) }} >{'Edit'}</a>)594                }595                if (availableAction.Delete) {596                  list.push(<a onClick={(event) => { event.preventDefault(); openDeleteModal(data) }} href='javascript:void(0);'>{'Delete'}</a>)597                }598                rowColumn.push(<td className='' key={'last' + index}>{list}</td>)599              }600              return (601                <tbody>602                  <tr key={index}>603                    {rowColumn}604                  </tr>605                  {childList}606                </tbody>607              )608            }609          })610          // props.setConnectionData(connectionData)611        } else {612          modelPrespectivesList = []613          modelPrespectivesList.push((614            <tr key={0}>615              <td colSpan={labelParts.length}>{'No data to display'}</td>616            </tr>617          ))618        }619      } else {620        modelPrespectivesList = []621        modelPrespectivesList.push((622          <tr key={0}>623            <td colSpan={labelParts.length}>{'No data to display'}</td>624          </tr>625        ))626      }627    }628  }629  if (props.modelPrespectives && props.modelPrespectives !== '') {630    totalPages = Math.ceil((props.modelPrespectives.length - 1) / perPage)631    let i = 1632    while (i <= totalPages) {633      let pageParameter = {}634      pageParameter.number = i635      pageParameter.class = ''636      pageArray.push(pageParameter)637      i++638    }639    pageArray = _.chunk(pageArray, paginationLimit)640    listPage = _.filter(pageArray, function (group) {641      let found = _.filter(group, {'number': currentPage})642      if (found.length > 0) { return group }643    })644    listModelPrespectives()645  }646  if (currentPage === 1) {647    previousClass = 'm-datatable__pager-link--disabled'648  }649  if (currentPage === totalPages) {650    nextClass = 'm-datatable__pager-link--disabled'651  }652  let handleListAndPagination = function (page) {653    listModelPrespectives()654    props.setCurrentPage(page)655    listPage = _.filter(pageArray, function (group) {656      let found = _.filter(group, {'number': page})657      if (found.length > 0) { return group }658    })659  }660  let handlePrevious = function (event) {661    event.preventDefault()662    if (currentPage === 1) {663      previousClass = styles.disabled664    } else {665      props.setCurrentPage(currentPage - 1)666      handleListAndPagination(currentPage - 1)667    }668  }669  let handleNext = function (event) {670    event.preventDefault()671    if (currentPage === totalPages) {672      nextClass = styles.disabled673    } else {674      props.setCurrentPage(currentPage + 1)675      handleListAndPagination(currentPage + 1)676    }677  }678  let handlePage = function (page) {679    if (page === 1) {680      previousClass = 'm-datatable__pager-link--disabled'681    } else if (page === totalPages) {682      nextClass = 'm-datatable__pager-link--disabled'683    }684    handleListAndPagination(page)685  }686  if (props.metaModelPerspective && props.metaModelPerspective !== '' && props.metaModelPerspective.error_code === null) {687    perspectiveName = props.metaModelPerspective.resources[0].name688    if (props.metaModelPerspective.resources[0].parts.length > 0) {689      tableHeader = props.metaModelPerspective.resources[0].parts.map(function (data, index) {690        labels.push(data.name)691        return (<th key={index} className=''><h5>{data.name}</h5></th>)692      })693    }694    tableHeader.push(<th key={'last'} className=''><h5>Action</h5></th>)695  }696  let handleSelectChange = function (index) {697    return function (newValue: any, actionMeta: any) {698      console.log('newValue', newValue)699      console.log('actionMeta', actionMeta)700      console.log('index', index)701      let connectionData = {...props.connectionData}702      let selectedValues = connectionData.selectedValues703      if (actionMeta.action === 'select-option' || actionMeta.action === 'remove-value') {704        selectedValues[index] = newValue705        connectionData.selectedValues = selectedValues706        props.setConnectionData(connectionData)707      }708      if (actionMeta.action === 'clear') {709        selectedValues[index] = null710        connectionData.selectedValues = selectedValues711        props.setConnectionData(connectionData)712      }713    }714  }715  if (props.connectionData !== '' && props.connectionData.operation.isComplete) {716    // eslint-disable-next-line717    mApp && mApp.unblockPage()718    let connectionData = {...props.connectionData}719    connectionSelectBoxList = connectionData.data.map(function (data, index) {720      let selectOptions = connectionData.selectOption[index].map(function (component, id) {721        component.value = component.id722        component.label = component.name723        return component724      })725      return (<div className='form-group row'>726        <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>727        <div className='col-8'>728          <Select729            className='input-sm m-input'730            placeholder={'Select ' + data.name}731            isMulti={data.max !== 1}732            isClearable733            value={connectionData.selectedValues[index]}734            onChange={handleSelectChange(index)}735            options={selectOptions}736          />737        </div>738      </div>)739    })740    businessPropertyList = connectionData.customerProperty.map(function (data, index) {741      let value = null742      if (data.type_property.property_type.key === 'Integer') {743        value = data.type_property.int_value744        return (<div className='form-group row'>745          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>746          <div className='col-8 form-group m-form__group has-info'>747            <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />748            {false && (<div className='form-control-feedback'>should be Number</div>)}749          </div>750        </div>)751      } else if (data.type_property.property_type.key === 'Decimal') {752        value = data.type_property.float_value753        return (<div className='form-group row'>754          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>755          <div className='col-8 form-group m-form__group has-info'>756            <input type='number' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />757            {false && (<div className='form-control-feedback'>should be Number</div>)}758          </div>759        </div>)760      } else if (data.type_property.property_type.key === 'DateTime') {761        value = data.type_property.date_time_value ? moment(data.type_property.date_time_value).format('DD MMM YYYY') : ''762        return (<div className='form-group row'>763          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>764          <div className='col-8 form-group m-form__group has-info'>765            <DatePicker766              className='input-sm form-control m-input'767              selected={data.type_property.date_time_value ? moment(data.type_property.date_time_value) : ''}768              dateFormat='DD MMM YYYY'769              onSelect={(date) => { editProperty(index, date) }}770              />771            {/* <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editTextProperty(index, childIndex, event.target.value) }} placeholder='Enter Here' /> */}772            {false && (<div className='form-control-feedback'>should be Date</div>)}773          </div>774        </div>)775      } else if (data.type_property.property_type.key === 'Text') {776        value = data.type_property.text_value777        return (<div className='form-group row'>778          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>779          <div className='col-8 form-group m-form__group has-info'>780            <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />781            {false && (<div className='form-control-feedback'>should be Text</div>)}782          </div>783        </div>)784      } else if (data.type_property.property_type.key === 'List') {785        let propertyOption = data.type_property.value_set.values.map((option, opIndex) => {786          option.label = option.name787          option.value = option.id788          return option789        })790        let dvalue = data.type_property.value_set_value791        if (data.type_property.value_set_value !== null) {792          dvalue.label = data.type_property.value_set_value.name793          dvalue.value = data.type_property.value_set_value.id794        }795        value = data.type_property.value_set_value ? data.type_property.value_set_value.name : null796        return (<div className='form-group row'>797          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>798          <Select799            className='col-8 input-sm m-input'800            placeholder='Select Options'801            isClearable802            defaultValue={dvalue}803            onChange={handlePropertySelect(index)}804            isSearchable={false}805            name={'selectProperty'}806            options={propertyOption}807            />808        </div>)809      } else {810        value = data.type_property.other_value811        return (<div className='form-group row'>812          <div className='col-2'><label htmlFor='Category' className='col-form-label'>{data.name}</label></div>813          <div className='col-8 form-group m-form__group has-info'>814            <input type='text' className='input-sm form-control m-input' value={value} onChange={(event) => { editProperty(index, event.target.value) }} placeholder='Enter Here' />815            {true && (<div className='form-control-feedback'>should be Text</div>)}816          </div>817        </div>)818      }819    })820  }821  if (props.addSettings.createResponse !== null) {822    if (props.addSettings.createResponse.length > 0) {823      messageList = props.addSettings.createResponse.map(function (data, index) {824        if (data.error_code === null) {825          if (data.message != null) {826            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)827          } else {828            if (props.addSettings.createResponse.length === 1) {829              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)830            }831          }832        } else {833          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)834        }835      })836    } else {837      messageList = []838      messageList.push((839        <li key={0}>{'No data has been added.'}</li>840      ))841    }842  }843  if (props.addSettings.updateResponse !== null) {844    if (props.addSettings.updateResponse.length > 0) {845      messageList = props.addSettings.updateResponse.map(function (data, index) {846        if (data.error_code === null) {847          if (data.message != null) {848            return (<li className='m-list-search__result-item' key={index}>{data.message}</li>)849          } else {850            if (props.addSettings.updateResponse.length === 1) {851              return (<li className='m-list-search__result-item' key={99}>{'No data has been added.'}</li>)852            }853          }854        } else {855          return (<li className='m-list-search__result-item' key={index}>{'Error Code: ' + data.error_code + 'Message: ' + data.error_message}</li>)856        }857      })858    } else {859      messageList = []860      messageList.push((861        <li className='m-list-search__result-item' key={0}>{'No data has been added.'}</li>862      ))863    }864  }865return (866  <div>867    <div id='entitlementList'>868      {/* The table structure begins */}869      <div className='row'>870        <div className='col-md-12'>871          <div className='m_datatable' id='scrolling_vertical'>872            <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll' id='scrolling_vertical' style={{}}>873              <div>874                <div className='m-portlet'>875                  <div className='m-portlet__body'>876                    <div className='row'>877                      <div className='col-md-10' />878                      {props.availableAction.Create && (<div className='col-md-2 float-right'>879                        <button type='button' onClick={openModal} className='btn btn-outline-info btn-sm' style={{'float': 'right'}}>Add {perspectiveName}</button>&nbsp;880                      </div>)}881                    </div>882                    <br />883                    <div id='m_table_1_wrapper' className='dataTables_wrapper dt-bootstrap4'>884                      <div className='row' style={{'marginBottom': '20px'}}>885                        <div className='col-sm-12 col-md-6'>886                          <div className='dataTables_length' id='m_table_1_length' style={{'display': 'flex'}}>887                            <h5 style={{'margin': '8px'}}>Show</h5>888                            <select value={props.perPage} name='m_table_1_length' onBlur={handleBlurdropdownChange} onChange={handledropdownChange} aria-controls='m_table_1' className='custom-select custom-select-sm form-control form-control-sm' style={{'height': '40px'}}>889                              <option value={10}>10</option>890                              <option value={25}>25</option>891                              <option value={50}>50</option>892                              <option value={100}>100</option>893                            </select>894                            <h5 style={{'margin': '8px'}}>Entries</h5>895                            {/* </label> */}896                          </div>897                        </div>898                        <div className='col-sm-12 col-md-6'>899                          <div className='dataTables_length pull-right' id='m_table_1_length' style={{'display': 'flex'}}>900                            <div style={{'display': 'flex'}}>901                              <h5 style={{'margin': '10px'}}>Search</h5>902                              <div className='m-input-icon m-input-icon--left'>903                                <input type='text' className='form-control m-input' placeholder='Search...' id='generalSearch' ref={input => (searchTextBox = input)} onKeyUp={''} />904                                <span className='m-input-icon__icon m-input-icon__icon--left'>905                                  <span>906                                    <i className='la la-search' />907                                  </span>908                                </span>909                              </div>910                            </div>911                          </div>912                        </div>913                      </div>914                    </div>915                    <div className='dataTables_scrollBody' style={{position: 'relative', overflow: 'auto', width: '100%', 'maxHeight': '100vh'}}>916                      <table className='m-portlet table table-striped- table-bordered table-hover table-checkable dataTable no-footer' id='m_table_1' aria-describedby='m_table_1_info' role='grid'>917                        <thead>918                          <tr role='row'>919                            {tableHeader}920                          </tr>921                        </thead>922                        {/* <tbody> */}923                        {modelPrespectivesList}924                        {/* </tbody> */}925                      </table>926                    </div>927                    <div className='row'>928                      <div className='col-md-12' id='scrolling_vertical'>929                        <div className='m_datatable m-datatable m-datatable--default m-datatable--loaded m-datatable--scroll pull-right' id='scrolling_vertical' style={{}}>930                          <div className='m-datatable__pager m-datatable--paging-loaded clearfix'>931                            <ul className='m-datatable__pager-nav'>932                              <li><a href='' title='Previous' id='m_blockui_1_5' className={'m-datatable__pager-link m-datatable__pager-link--prev ' + previousClass} onClick={handlePrevious} data-page='4'><i className='la la-angle-left' /></a></li>933                              {listPage[0] && listPage[0].map(function (page, index) {934                                      if (page.number === currentPage) {935                                              page.class = 'm-datatable__pager-link--active'936                                            } else {937                                              page.class = ''938                                            }939                                            return (<li key={index} >940                                              <a href='' className={'m-datatable__pager-link m-datatable__pager-link-number ' + page.class} data-page={page.number} title={page.number} onClick={(event) => { event.preventDefault(); handlePage(page.number) }} >{page.number}</a>941                                            </li>)942                                          })}943                              <li><a href='' title='Next' className={'m-datatable__pager-link m-datatable__pager-link--next ' + nextClass} onClick={handleNext} data-page='4'><i className='la la-angle-right' /></a></li>944                            </ul>945                          </div>946                        </div>947                      </div>948                    </div>949                  </div>950                </div>951              </div>952            </div>953          </div>954        </div>955      </div>956    </div>957    <div>958      <ReactModal isOpen={props.addSettings.isModalOpen}959        onRequestClose={closeModal}960        // className='modal-dialog modal-lg'961        style={customStylescrud}962        >963        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}964        <div className={''}>965          <div className=''>966            <div className='modal-content'>967              <div className='modal-header'>968                {props.addSettings.createResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Add {perspectiveName}</h4>)}969                {props.addSettings.createResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Create Report</h4>)}970                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>971                  <span aria-hidden='true'>Ã</span>972                </button>973              </div>974              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>975                {props.addSettings.createResponse === null && (<div className='col-md-12'>976                  {/* {messageBlock} */}977                  <div className='form-group m-form__group row'>978                    <div className='col-8'>979                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}980                    </div>981                  </div>982                  <div className='form-group m-form__group row'>983                    <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>984                    <div className='col-8'>985                      <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />986                    </div>987                  </div>988                  <div className='form-group m-form__group row'>989                    <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>990                    <div className='col-8'>991                      <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />992                    </div>993                  </div>994                  {businessPropertyList}995                  {connectionSelectBoxList}996                </div>)}997                {props.addSettings.createResponse !== null && (<div className='m-list-search__results'>998                  {messageList}999                </div>)}1000              </div>1001              <div className='modal-footer'>1002                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1003                {props.addSettings.createResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={createComponent} >Add</button>)}1004              </div>1005            </div>1006          </div>1007        </div>1008      </ReactModal>1009      <ReactModal isOpen={props.addSettings.isEditModalOpen}1010        onRequestClose={closeModal}1011        // className='modal-dialog modal-lg'1012        style={customStylescrud}1013        >1014        {/* <button onClick={closeModal} ><i className='la la-close' /></button> */}1015        <div className={''}>1016          <div className=''>1017            <div className='modal-content' >1018              <div className='modal-header'>1019                {props.addSettings.updateResponse === null && (<h4 className='modal-title' id='exampleModalLabel'>Edit {perspectiveName}</h4>)}1020                {props.addSettings.updateResponse !== null && (<h4 className='modal-title' id='exampleModalLabel'>Update Report</h4>)}1021                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1022                  <span aria-hidden='true'>Ã</span>1023                </button>1024              </div>1025              <div className='modal-body' style={{'height': 'calc(70vh - 30px)', 'overflow': 'auto'}}>1026                {props.addSettings.updateResponse === null && (<div className='col-md-12'>1027                  {/* {messageBlock} */}1028                  <div className='form-group m-form__group row'>1029                    <div className='col-8'>1030                      {/* <input className='form-control m-input' type='email' placeholder='Enter User Name' ref={input => (userName = input)} id='example-userName-input' /> */}1031                    </div>1032                  </div>1033                  <div className='form-group m-form__group row'>1034                    <label htmlFor='example-input' className='col-2 col-form-label'>Name</label>1035                    <div className='col-8'>1036                      <input className='form-control m-input' value={props.addSettings.name} onChange={editName} placeholder='Enter Name' id='example-email-input' autoComplete='off' />1037                    </div>1038                  </div>1039                  <div className='form-group m-form__group row'>1040                    <label htmlFor='example-input' className='col-2 col-form-label'>Description</label>1041                    <div className='col-8'>1042                      <textarea className='form-control m-input' value={props.addSettings.description} onChange={editDescription} placeholder='Enter Description' />1043                    </div>1044                  </div>1045                  {businessPropertyList}1046                  {connectionSelectBoxList}1047                </div>)}1048                {props.addSettings.updateResponse !== null && (<div className='m-list-search__results'>1049                  {messageList}1050                </div>)}1051              </div>1052              <div className='modal-footer'>1053                <button type='button' onClick={closeModal} className='btn btn-outline-danger btn-sm'>Close</button>1054                {props.addSettings.updateResponse === null && (<button className='btn btn-outline-info btn-sm' onClick={updateComponent} >Update</button>)}1055              </div>1056            </div>1057          </div>1058        </div>1059      </ReactModal>1060      <ReactModal isOpen={props.addSettings.isDeleteModalOpen}1061        onRequestClose={closeModal}1062        className='modal-dialog '1063        style={{'content': {'top': '20%'}}} >1064        <div className={styles.modalwidth}>1065          <div className=''>1066            <div className='modal-content'>1067              <div className='modal-header'>1068                <h4 className='modal-title' id='exampleModalLabel'>Delete {perspectiveName}</h4>1069                <button type='button' onClick={closeModal} className='close' data-dismiss='modal' aria-label='Close'>1070                  <span aria-hidden='true'>Ã</span>1071                </button>1072              </div>1073              <div className='modal-body'>1074                <div>1075                  <h6>Confirm deletion of {perspectiveName} {serviceName}</h6>1076                </div>1077              </div>1078              <div className='modal-footer'>1079                <button type='button' onClick={closeModal} id='m_login_signup' className='btn btn-outline-info btn-sm'>Close</button>1080                <button type='button' id='m_login_signup' className='btn btn-outline-info btn-sm' onClick={removeComponent}>Confirm</button>1081              </div>1082            </div>1083          </div>1084        </div>1085      </ReactModal>1086    </div>1087    {/* <Discussion name={'Entitlements'} TypeKey='Entitlement' type='ComponentType' {...props} />1088    <NewDiscussion contextId={contextId} name={'Entitlements'} type='ComponentType' {...props} /> */}1089  </div>1090      )1091  }1092  PerspectiveHierarchy.propTypes = {1093    addSettings: PropTypes.any,1094    modelPrespectives: PropTypes.any,1095    metaModelPerspective: PropTypes.any,1096    currentPage: PropTypes.any,1097    perPage: PropTypes.any,1098    // crude: PropTypes.any,1099    availableAction: PropTypes.any,1100    connectionData: PropTypes.any,1101    expandSettings: PropTypes.any...

balancedScorecardContainer.js

Source:balancedScorecardContainer.js

1import {connect} from 'react-redux'2import BalancedScorecard from '../../components/balancedScorecard/balancedScorecardComponent'3// For Lifecycle composing4import {compose, lifecycle} from 'recompose'5import _ from 'lodash'6import {actions as sagaActions} from '../../redux/sagas/'7import {actionCreators} from '../../redux/reducers/balancedScorecard/balancedScorecardReducer'8import { actionCreators as basicActionCreators } from '../../redux/reducers/basicReducer/basicReducerReducer'9// Global State10export function mapStateToProps (state, props) {11  return {12    authenticateUser: state.basicReducer.authenticateUser,13    modelPrespectives: state.balancedScorecardReducer.modelPrespectives,14    copyModelPrespectives: state.balancedScorecardReducer.copyModelPrespectives,15    modelPrespectiveData: state.balancedScorecardReducer.modelPrespectiveData,16    metaModelPerspective: state.balancedScorecardReducer.metaModelPerspective,17    crudMetaModelPerspective: state.balancedScorecardReducer.crudMetaModelPerspective,18    currentPage: state.balancedScorecardReducer.currentPage,19    perPage: state.balancedScorecardReducer.perPage,20    crude: state.balancedScorecardReducer.crude,21    addSettings: state.balancedScorecardReducer.addSettings,22    availableAction: state.balancedScorecardReducer.availableAction,23    createComponentResponse: state.balancedScorecardReducer.createComponentResponse,24    deleteComponentResponse: state.balancedScorecardReducer.deleteComponentResponse,25    connectionData: state.balancedScorecardReducer.connectionData,26    updateComponentResponse: state.balancedScorecardReducer.updateComponentResponse,27    dropdownData: state.balancedScorecardReducer.dropdownData,28    expandSettings: state.balancedScorecardReducer.expandSettings,29    nestedModelPerspectives: state.balancedScorecardReducer.nestedModelPerspectives,30    headerData: state.balancedScorecardReducer.headerData,31    crudModelPerspectives: state.balancedScorecardReducer.crudModelPerspectives,32    allDropdownData: state.balancedScorecardReducer.allDropdownData,33    availableCrudOperation: state.balancedScorecardReducer.availableCrudOperation34  }35}36// In Object form, each funciton is automatically wrapped in a dispatch37export const propsMapping = {38  fetchUserAuthentication: sagaActions.basicActions.fetchUserAuthentication,39  setModalOpenStatus: basicActionCreators.setModalOpenStatus,40  fetchModelPrespectives: sagaActions.modelActions.fetchModelPrespectives,41  fetchMetaModelPrespective: sagaActions.modelActions.fetchMetaModelPrespective,42  fetchDropdownData: sagaActions.serviceActions.fetchDropdownData,43  fetchAllDropdownData: sagaActions.serviceActions.fetchAllDropdownData,44  fetchCrudMetaModelPrespective: sagaActions.serviceActions.fetchCrudMetaModelPrespective,45  setCurrentPage: actionCreators.setCurrentPage,46  setAddSettings: actionCreators.setAddSettings,47  setPerPage: actionCreators.setPerPage,48  setAvailableAction: actionCreators.setAvailableAction,49  resetResponse: actionCreators.resetResponse,50  addComponentComponent: sagaActions.applicationDetailActions.addComponentComponent,51  deleteComponentModelPerspectives: sagaActions.modelActions.deleteComponentModelPerspectives,52  setConnectionData: actionCreators.setConnectionData,53  updateModelPrespectives: sagaActions.modelActions.updateModelPrespectives,54  updateComponentModelPrespectives: sagaActions.modelActions.updateComponentModelPrespectives,55  fetchNestedModelPrespectives: sagaActions.serviceActions.fetchNestedModelPrespectives,56  fetchCrudModelPrespectives: sagaActions.serviceActions.fetchCrudModelPrespectives,57  updateNestedModelPrespectives: sagaActions.serviceActions.updateNestedModelPrespectives,58  removeModelPrespectives: sagaActions.serviceActions.removeModelPrespectives,59  setExpandSettings: actionCreators.setExpandSettings,60  setHeaderData: actionCreators.setHeaderData,61  setModalPerspectivesData: actionCreators.setModalPerspectivesData,62  setAvailableCrudOperation: actionCreators.setAvailableCrudOperation63}64// If you want to use the function mapping65// export const propsMapping = (dispatch, ownProps) => {66//   return {67//     onClick: () => dispatch(actions.starsActions.FETCH_STARS)68//   }69// }70// eslint-disable-next-line71toastr.options = {72  'closeButton': false,73  'debug': false,74  'newestOnTop': false,75  'progressBar': false,76  'positionClass': 'toast-bottom-full-width',77  'preventDuplicates': false,78  'onclick': null,79  'showDuration': '300',80  'hideDuration': '1000',81  'timeOut': '4000',82  'extendedTimeOut': '1000',83  'showEasing': 'swing',84  'hideEasing': 'linear',85  'showMethod': 'fadeIn',86  'hideMethod': 'fadeOut'87}88let perspectiveViewKey = null89let packages = JSON.parse(localStorage.getItem('packages'))90let perspectives = _.result(_.find(packages.resources, function (obj) {91  return obj.key === 'ECO_SLA'92}), 'perspectives')93let perspectiveObject = _.find(perspectives, function (obj) {94  return (obj.key === 'PenaltyAgreement_List' && obj.role_key === 'List')95})96let perspectiveId = perspectiveObject.perspective97perspectiveViewKey = perspectiveObject.view_key98// export default connect(mapStateToProps, propsMapping)(BalancedScorecard)99export default compose(100  connect(mapStateToProps, propsMapping),101  lifecycle({102    componentWillMount: function () {103      // eslint-disable-next-line104      mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})105      this.props.fetchUserAuthentication && this.props.fetchUserAuthentication()106      let payload = {}107      payload['meta_model_perspective_id[0]'] = perspectiveId108      payload['view_key[0]'] = perspectiveViewKey109      this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)110      let metaModelPrespectivePayload = {}111      metaModelPrespectivePayload.id = perspectiveId112      metaModelPrespectivePayload.viewKey = {'view_key': perspectiveViewKey}113      this.props.fetchMetaModelPrespective && this.props.fetchMetaModelPrespective(metaModelPrespectivePayload)114    },115    componentDidMount: function () {116      // eslint-disable-next-line117      // mApp && mApp.block('#entitlementList', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})118    },119    componentWillReceiveProps: function (nextProps) {120      if (nextProps.authenticateUser && nextProps.authenticateUser.resources) {121        if (!nextProps.authenticateUser.resources[0].result) {122          this.props.history.push('/')123        }124      }125      if (nextProps.modelPrespectiveData && nextProps.modelPrespectiveData !== '') {126        // eslint-disable-next-line127        // mApp && mApp.unblockPage()128        nextProps.resetResponse()129        let payload = {}130        payload.data = nextProps.modelPrespectiveData131        payload.copyData = nextProps.modelPrespectiveData132        // eslint-disable-next-line133        mApp && mApp.unblockPage()134        // eslint-disable-next-line135        mApp && mApp.unblock('#ModelPerspectiveList')136        nextProps.setModalPerspectivesData(payload)137      }138      if (nextProps.modelPrespectives && nextProps.modelPrespectives !== '') {139        let availableAction = nextProps.availableAction140        availableAction['toProcessModelPerspectives'] = false141        nextProps.setAvailableAction(availableAction)142      }143      if (nextProps.crudModelPerspectives && nextProps.crudModelPerspectives !== '' && !nextProps.availableAction.toProcess && nextProps.connectionData !== '' && nextProps.availableAction.toProcessCrudModel) {144        if (nextProps.crudModelPerspectives.error_code === null) {145          let addSettings = JSON.parse(JSON.stringify(nextProps.addSettings))146          let labelParts = nextProps.crudMetaModelPerspective.resources[0].parts147          let data = nextProps.crudModelPerspectives.resources[0]148          let selectedValues = []149          let setCustomerProperty = []150          let connectionData = JSON.parse(JSON.stringify(nextProps.connectionData))151          // if (!addSettings.isNexusPoint) {152            if (data.parts) {153              labelParts.forEach(function (partData, ix) {154                if (partData.standard_property !== null && partData.type_property === null) { // Standard Property155                  if (partData.standard_property === 'name') {156                    addSettings.name = data.parts[ix].value157                  }158                  if (partData.standard_property === 'description') {159                    addSettings.description = data.parts[ix].value160                  }161                } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective === null) { // Connection Property162                  if (data.parts[ix].value.length > 0) {163                    // todo write code for multiple component164                    let eachSelectedValues = []165                    data.parts[ix].value.forEach(function (value, ix) {166                      let targetComponent = value.target_component167                      targetComponent.label = targetComponent.name168                      targetComponent.value = targetComponent.id169                      eachSelectedValues.push(targetComponent)170                    })171                    selectedValues.push(eachSelectedValues)172                  } else {173                    selectedValues.push(null)174                  }175                } else if (partData.standard_property === null && partData.type_property !== null) { // Customer Property176                  let value = null177                  if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property178                    value = data.parts[ix].value !== null ? data.parts[ix].value.int_value : ''179                  } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {180                    value = data.parts[ix].value !== null ? data.parts[ix].value.float_value : ''181                  } else if (labelParts[ix].type_property.property_type.key === 'Text') {182                    value = data.parts[ix].value !== null ? data.parts[ix].value.text_value : ''183                  } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {184                    value = data.parts[ix].value !== null ? data.parts[ix].value.date_time_value : ''185                  } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {186                    value = data.parts[ix].value !== null ? data.parts[ix].value.boolean_value : ''187                  } else if (labelParts[ix].type_property.property_type.key === 'List') {188                    value = data.parts[ix].value !== null ? data.parts[ix].value.value_set_value : ''189                  } else {190                    value = data.parts[ix].value !== null ? data.parts[ix].value.other_value : ''191                  }192                  setCustomerProperty.push(value)193                } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective !== null) {194                  if (partData.nexus) {195                    let nexusPoints = partData.constraint_perspective.parts196                    let metricSelectedValue = []197                    if (nexusPoints.length > 0) {198                      nexusPoints.forEach(function (nexusData, nix) {199                        console.log(nexusData)200                        let targetComponent = data.parts[ix + nix].value.subject_part.value[0].target_component201                        targetComponent.label = targetComponent.name202                        metricSelectedValue.push(targetComponent)203                      })204                      connectionData.metricSelectedValue = metricSelectedValue205                    }206                  }207                }208              })209            }210          // }211          if (addSettings.isNexusPoint) {212          }213          addSettings.isEditModalOpen = true214          addSettings.updateObject = data215          addSettings.updateResponse = null216          nextProps.setAddSettings(addSettings)217          let existingCustomerProperty = connectionData.customerProperty.map(function (data, index) {218            if (data.type_property.property_type.key === 'Boolean') {219              data.type_property.boolean_value = setCustomerProperty[index]220            } else if (data.type_property.property_type.key === 'Integer') {221              data.type_property.int_value = setCustomerProperty[index]222            } else if (data.type_property.property_type.key === 'Decimal') {223              data.type_property.float_value = setCustomerProperty[index]224            } else if (data.type_property.property_type.key === 'DateTime') {225              data.type_property.date_time_value = setCustomerProperty[index]226            } else if (data.type_property.property_type.key === 'Text') {227              data.type_property.text_value = setCustomerProperty[index]228            } else {229              data.type_property.other_value = setCustomerProperty[index]230            }231            return data232          })233          connectionData.customerProperty = existingCustomerProperty234          connectionData.selectedValues = selectedValues235          connectionData.initialSelectedValues = JSON.parse(JSON.stringify(selectedValues))236          nextProps.setConnectionData(connectionData)237          let availableAction = nextProps.availableAction238          availableAction['toProcessCrudModel'] = false239          nextProps.setAvailableAction(availableAction)240        } else {241          // eslint-disable-next-line242          toastr.error(nextProps.crudModelPerspectives.error_message, nextProps.crudModelPerspectives.error_code)243        }244      }245      if (nextProps.crudMetaModelPerspective && nextProps.crudMetaModelPerspective !== '' && nextProps.availableAction.toProcess) {246        if (nextProps.crudMetaModelPerspective.resources[0].crude) {247          let addSettings = JSON.parse(JSON.stringify(nextProps.addSettings))248          let availableAction = {...nextProps.availableAction}249          let crude = nextProps.crude250          let mask = nextProps.crudMetaModelPerspective.resources[0].crude251          let labelParts = nextProps.crudMetaModelPerspective.resources[0].parts252          let connectionData = {}253          connectionData.operation = {254            toCallApi: true,255            isComplete: false,256            processIndex: 0257          }258          connectionData.selectedValues = []259          let cData = []260          let standardProperty = []261          let customerProperty = []262          for (let option in crude) {263            if (crude.hasOwnProperty(option)) {264              if (mask & crude[option]) {265                availableAction[option] = true266              }267            }268          }269          labelParts.forEach(function (data, index) {270            if (data.standard_property === null && data.type_property === null && data.constraint_perspective === null) {271              let obj = {}272              obj.name = data.name273              if (data.constraint_inverted) {274                obj.componentId = data.constraint.component_type.id275              } else {276                obj.componentId = data.constraint.target_component_type.id277              }278              obj.data = null279              obj.processed = false280              obj.partIndex = index281              obj.max = data.constraint.max282              obj.min = data.constraint.min283              cData.push(obj)284              connectionData.selectedValues.push(null)285            }286            if (data.standard_property === null && data.type_property === null && data.constraint_perspective !== null) {287              if (data.nexus) {288                let payload = {}289                payload['meta_model_perspective_id[0]'] = data.constraint_perspective.id290                payload['view_key[0]'] = data.constraint_perspective.view_key291                console.log('dropcall', nextProps)292                payload['filter[0]'] = addSettings.selectedData.childFilter293                nextProps.fetchAllDropdownData && nextProps.fetchAllDropdownData(payload)294                addSettings.isNexusPoint = true295                nextProps.setAddSettings(addSettings)296                // eslint-disable-next-line297                mApp.block('.blockNexusUI', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})298              }299            }300            if (data.standard_property !== null && data.type_property === null) {301              data.partIndex = index302              standardProperty.push(data)303            }304            if (data.standard_property === null && data.type_property !== null) {305              data.partIndex = index306              customerProperty.push(data)307            }308          })309          connectionData.data = cData310          connectionData.customerProperty = customerProperty311          connectionData.standardProperty = standardProperty312          connectionData.selectOption = []313          nextProps.setConnectionData(connectionData)314          availableAction['toProcess'] = false315          nextProps.setAvailableAction(availableAction)316        }317      }318      if (nextProps.metaModelPerspective && nextProps.metaModelPerspective !== '' && nextProps.availableAction.toProcessMetaModel) {319        console.log('run one time')320        let headerData = {...this.props.headerData}321        let availableAction = {...nextProps.availableAction}322        let availableCrudOperation = JSON.parse(JSON.stringify(nextProps.availableCrudOperation))323        let crude = nextProps.crude324        let mask = nextProps.metaModelPerspective.resources[0].crude325        let metaData = []326        metaData.push(nextProps.metaModelPerspective.resources[0])327        headerData.metaModelPerspective = metaData328        headerData.toProcess = true329        nextProps.setHeaderData(headerData)330        availableAction['toProcessMetaModel'] = false331        let crudAction = {}332        for (let option in crude) {333          if (crude.hasOwnProperty(option)) {334            if (mask & crude[option]) {335              crudAction[option] = true336            } else {337              crudAction[option] = false338            }339          }340        }341        availableCrudOperation.push(crudAction)342        nextProps.setAvailableAction(availableAction)343        nextProps.setAvailableCrudOperation(availableCrudOperation)344      }345      if (nextProps.createComponentResponse && nextProps.createComponentResponse !== '') {346        let addSettings = {...nextProps.addSettings}347        addSettings.name = ''348        addSettings.description = ''349        addSettings.createResponse = nextProps.createComponentResponse350        nextProps.setAddSettings(addSettings)351        // eslint-disable-next-line352        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})353        let payload = {}354        if (addSettings.initiatedFrom === 'ParentNode') {355          payload['meta_model_perspective_id[0]'] = perspectiveId356          payload['view_key[0]'] = perspectiveViewKey357          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)358        } else {359          // get selected click level360          let viewKey = addSettings.selectedData.metaModelPerspectives.view_key361          let metaModelPerspectives = nextProps.expandSettings.metaModelPerspectives362          let selectedLevel = _.findIndex(metaModelPerspectives, {'view_key': viewKey})363          console.log('selectedLevel', selectedLevel)364          if (selectedLevel >= 0) {365            let selectedObject = this.props.expandSettings.selectedObject[selectedLevel] || null366            if (selectedObject) {367              if (selectedObject.expandFlag) {368                payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id369                payload['view_key'] = selectedObject.metaModelPerspectives.view_key370                payload['parent_reference'] = selectedObject.parentReference371                payload['filter[0]'] = selectedObject.childFilter372                if (selectedObject.containerPerspectiveId) {373                  payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId374                  payload['container_view_key'] = selectedObject.containerPerspectiveViewKey375                }376                this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)377              }378            }379          } else {380            // let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null381            // if (selectedObject) {382            //   if (selectedObject.expandFlag) {383                payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id384                payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key385                payload['parent_reference'] = addSettings.selectedData.parentReference386                payload['filter[0]'] = addSettings.selectedData.childFilter387                if (addSettings.selectedData.containerPerspectiveId) {388                  payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId389                  payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey390                }391                this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)392            //   }393            // }394          }395          // payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id396          // payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key397          // payload['parent_reference'] = addSettings.selectedData.parentReference398          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId399          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey400          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)401        }402        nextProps.resetResponse()403      }404      if (nextProps.updateComponentResponse && nextProps.updateComponentResponse !== '') {405        let addSettings = {...nextProps.addSettings}406        addSettings.name = ''407        addSettings.description = ''408        addSettings.updateResponse = nextProps.updateComponentResponse409        nextProps.setAddSettings(addSettings)410        let payload = {}411        // eslint-disable-next-line412        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})413        if (addSettings.initiatedFrom === 'ParentNode') {414          payload['meta_model_perspective_id[0]'] = perspectiveId415          payload['view_key[0]'] = perspectiveViewKey416          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)417        } else {418          let viewKey = addSettings.selectedData.metaModelPerspectives.view_key419          let metaModelPerspectives = nextProps.expandSettings.metaModelPerspectives420          let selectedLevel = _.findIndex(metaModelPerspectives, {'view_key': viewKey})421          console.log('selectedLevel', selectedLevel)422          if (selectedLevel >= 0) {423            let selectedObject = this.props.expandSettings.selectedObject[selectedLevel] || null424            if (selectedObject) {425              if (selectedObject.expandFlag) {426                payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id427                payload['view_key'] = selectedObject.metaModelPerspectives.view_key428                payload['parent_reference'] = selectedObject.parentReference429                payload['filter[0]'] = selectedObject.childFilter430                if (selectedObject.containerPerspectiveId) {431                  payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId432                  payload['container_view_key'] = selectedObject.containerPerspectiveViewKey433                }434                this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)435              }436            }437          } else {438            // let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null439            // if (selectedObject) {440            //   if (selectedObject.expandFlag) {441                payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id442                payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key443                payload['parent_reference'] = addSettings.selectedData.parentReference444                payload['filter[0]'] = addSettings.selectedData.childFilter445                if (addSettings.selectedData.containerPerspectiveId) {446                  payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId447                  payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey448                }449                this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)450            //   }451            // }452          }453          // payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id454          // payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key455          // payload['parent_reference'] = addSettings.selectedData.parentReference456          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId457          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey458          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)459        }460        nextProps.resetResponse()461      }462      if (nextProps.deleteComponentResponse && nextProps.deleteComponentResponse !== '') {463        let addSettings = {...nextProps.addSettings}464        addSettings.deleteResponse = nextProps.deleteComponentResponse465        nextProps.setAddSettings(addSettings)466        let payload = {}467        // eslint-disable-next-line468        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})469        if (addSettings.initiatedFrom === 'ParentNode') {470          payload['meta_model_perspective_id[0]'] = perspectiveId471          payload['view_key[0]'] = perspectiveViewKey472          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)473        } else {474          let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null475          if (selectedObject) {476            if (selectedObject.expandFlag) {477              payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id478              payload['view_key'] = selectedObject.metaModelPerspectives.view_key479              payload['parent_reference'] = selectedObject.parentReference480              if (selectedObject.containerPerspectiveId) {481                payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId482                payload['container_view_key'] = selectedObject.containerPerspectiveViewKey483              }484              this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)485            }486          }487          // let selectedObject = this.props.expandSettings.selectedObject[addSettings.deleteOperationLevel] || null488          // payload['meta_model_perspective_id'] = selectedObject.rolePerspectives.Delete.part_perspective_id489          // payload['view_key'] = selectedObject.rolePerspectives.Delete.part_perspective_view_key490          // payload['parent_reference'] = selectedObject.rolePerspectives.parentReference491          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId492          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey493          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)494        }495        nextProps.resetResponse()496      }497      if (nextProps.connectionData !== '' && nextProps.connectionData.operation.toCallApi && !nextProps.connectionData.operation.isComplete) {498        let connectionData = {...nextProps.connectionData}499        let processIndex = nextProps.connectionData.operation.processIndex500        let totalLength = nextProps.connectionData.data.length501        if (processIndex < totalLength) {502          let processData = nextProps.connectionData.data[processIndex]503          nextProps.fetchDropdownData && nextProps.fetchDropdownData(processData.componentId)504          connectionData.operation.processIndex = processIndex + 1505          connectionData.operation.toCallApi = false506        }507        if (processIndex === totalLength) {508          connectionData.operation.isComplete = true509          if (!nextProps.addSettings.isNexusPoint) {510            // eslint-disable-next-line511            mApp && mApp.unblockPage()512          }513        }514        nextProps.setConnectionData(connectionData)515      }516      if (nextProps.allDropdownData !== '') {517        if (nextProps.allDropdownData.length > 0) {518          let services = []519          let kpi = []520          let timeGranularity = []521          let initialValues = []522          let metricSelectNames = []523          nextProps.allDropdownData.forEach(function (data, index) {524            if (data.parts) {525              data.parts.forEach(function (dataParts, partIndex) {526                if (partIndex === 0) {527                  if (dataParts.value.length > 0) {528                    let serviceData = dataParts.value[0].target_component529                    serviceData.subjectId = data.subject_id530                    // serviceData.subjectName = data.subject_name531                    services.push(serviceData)532                    if (index === 0) {533                      let obj = {}534                      obj.name = 'Services'535                      obj.placeHolder = dataParts.value[0].name536                      metricSelectNames.push(obj)537                      initialValues.push(null)538                    }539                  }540                }541                if (partIndex === 1) {542                  if (dataParts.value.length > 0) {543                    let kpiData = dataParts.value[0].target_component544                    kpiData.subjectId = data.subject_id545                    // kpiData.subjectName = data.subject_name546                    kpi.push(kpiData)547                    if (index === 0) {548                      let obj = {}549                      obj.name = 'KPI'550                      obj.placeHolder = dataParts.value[0].name551                      metricSelectNames.push(obj)552                      initialValues.push(null)553                    }554                  }555                }556                if (partIndex === 2) {557                  if (dataParts.value.length > 0) {558                    let timeGranularityData = dataParts.value[0].target_component559                    timeGranularityData.subjectId = data.subject_id560                    // timeGranularityData.subjectName = data.subject_name561                    timeGranularity.push(timeGranularityData)562                    if (index === 0) {563                      let obj = {}564                      obj.name = 'Time Granularity'565                      obj.placeHolder = dataParts.value[0].name566                      metricSelectNames.push(obj)567                      initialValues.push(null)568                    }569                  }570                }571              })572            }573          })574          let connectionData = {...nextProps.connectionData}575          let metricSelectOption = []576          metricSelectOption.push(services)577          metricSelectOption.push(kpi)578          metricSelectOption.push(timeGranularity)579          connectionData.metricSelectOption = metricSelectOption580          connectionData.backupMetricSelectOption = metricSelectOption581          if (nextProps.addSettings.isModalOpen) {582            connectionData.metricSelectedValue = initialValues583          }584          connectionData.metricSelectNames = metricSelectNames585          connectionData.isMetric = true586          connectionData.operation.isComplete = true587          nextProps.setConnectionData(connectionData)588          // eslint-disable-next-line589          mApp && mApp.unblockPage()590          // eslint-disable-next-line591          mApp && mApp.unblock('.blockNexusUI')592        }593        this.props.resetResponse()594      }595      if (nextProps.dropdownData !== '') {596        if (nextProps.dropdownData.error_code === null) {597          let connectionData = {...nextProps.connectionData}598          connectionData.selectOption.push(nextProps.dropdownData.resources)599          connectionData.operation.toCallApi = true600          nextProps.setConnectionData(connectionData)601        } else {602          // eslint-disable-next-line603          toastr.error(nextProps.dropdownData.error_message, nextProps.dropdownData.error_code)604        }605        this.props.resetResponse()606      }607      if (nextProps.nestedModelPerspectives !== '' && nextProps.expandSettings.processAPIResponse) {608        // eslint-disable-next-line609        mApp && mApp.unblockPage()610        if (nextProps.nestedModelPerspectives.length > 0) {611          let expandSettings = JSON.parse(JSON.stringify(nextProps.expandSettings))612          let level = expandSettings.level613          let modelPerspectives = []614          nextProps.nestedModelPerspectives.forEach(function (data, index) {615            if (data.parts) {616              modelPerspectives.push(data)617            }618          })619          if (nextProps.addSettings.selectedData) {620            let viewKey = nextProps.addSettings.selectedData.metaModelPerspectives.view_key621            let metaModelPerspectives = expandSettings.metaModelPerspectives622            let selectedLevel = _.findIndex(metaModelPerspectives, {'view_key': viewKey})623            if (selectedLevel >= 0) {624              expandSettings.modelPerspectives[selectedLevel] = modelPerspectives625              expandSettings.processAPIResponse = false626            } else {627              let selectedData = nextProps.addSettings.selectedData628              selectedData.showChildExpandIcon = true629              selectedData.expandFlag = true630              if (level) {631                expandSettings.metaModelPerspectives[level + 1] = selectedData.metaModelPerspectives632                expandSettings.modelPerspectives[level + 1] = modelPerspectives633                expandSettings.selectedObject[level + 1] = selectedData634                expandSettings.level = level + 1635              } else {636                expandSettings.metaModelPerspectives[0] = selectedData.metaModelPerspectives637                expandSettings.modelPerspectives[0] = modelPerspectives638                expandSettings.selectedObject[0] = selectedData639                expandSettings.level = 0640              }641              expandSettings.processAPIResponse = false642            }643          } else {644            expandSettings.modelPerspectives[level] = modelPerspectives645            expandSettings.processAPIResponse = false646          }647          nextProps.setExpandSettings(expandSettings)648        } else {649          // eslint-disable-next-line650          toastr.error(nextProps.nestedModelPerspectives.error_message, nextProps.nestedModelPerspectives.error_code)651        }652        nextProps.resetResponse()653      }654      if (nextProps.headerData.toProcess) {655        let headerData = JSON.parse(JSON.stringify(nextProps.headerData))656        let metaModelPerspective = JSON.parse(JSON.stringify(headerData.metaModelPerspective))657        let processedIndex = headerData.processedIndex658        let toProcess = false659        let availableCrudOperation = JSON.parse(JSON.stringify(nextProps.availableCrudOperation))660        let crude = nextProps.crude661        if (nextProps.headerData.metaModelPerspective.length > 0) {662          nextProps.headerData.metaModelPerspective.forEach(function (data, index) {663            if (!processedIndex.includes(index)) {664              if (data.parts.length > 0) {665                data.parts.forEach(function (partData, idx) {666                  if (partData.constraint_perspective !== null) {667                    // if (!partData.group_with_previous) {668                      metaModelPerspective.push(partData.constraint_perspective)669                      processedIndex.push(index)670                      toProcess = true671                      if (partData.role_perspectives !== null) {672                        let mask = partData.constraint_perspective.crude673                        let crudAction = {}674                        for (let option in crude) {675                          if (crude.hasOwnProperty(option)) {676                            if (mask & crude[option]) {677                              crudAction[option] = true678                            } else {679                              crudAction[option] = false680                            }681                          }682                        }683                        crudAction.name = partData.name684                        availableCrudOperation.push(crudAction)685                        nextProps.setAvailableCrudOperation(availableCrudOperation)686                      }687                    // }688                  }689                })690              }691            }692          })693        }694        headerData.metaModelPerspective = metaModelPerspective695        headerData.processedIndex = processedIndex696        headerData.toProcess = toProcess697        if (!toProcess) {698          let headerColumn = []699          if (metaModelPerspective.length > 0) {700            metaModelPerspective.forEach(function (data, index) {701              // if (data.view_key === nextProps.match.params.viewKey) {702                data.parts.forEach(function (partData, idx) {703                  if (partData.standard_property !== null && partData.type_property === null) { // Standard Property704                    if (partData.standard_property === 'name') {705                      headerColumn.push(partData.name)706                    }707                  } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective === null) { // Connection Property708                    headerColumn.push(partData.name)709                  }710                })711              // } else {712              //   headerColumn.push(data.name)713              // }714            })715          }716          headerData.headerColumn = headerColumn717        }718        this.props.setHeaderData(headerData)719      }720    }721  })...

perspectiveHierarchyContainer.js

Source:perspectiveHierarchyContainer.js

1import { connect } from 'react-redux'2import { compose, lifecycle } from 'recompose'3import PerspectiveHierarchy from '../../components/perspectiveHierarchy/perspectiveHierarchyComponent'4import { actions as sagaActions } from '../../redux/sagas'5import { actionCreators } from '../../redux/reducers/perspectiveHierarchy/perspectiveHierarchyReducer'6import { actionCreators as basicActionCreators } from '../../redux/reducers/basicReducer/basicReducerReducer'7// Global State8export function mapStateToProps (state, props) {9  return {10    authenticateUser: state.basicReducer.authenticateUser,11    modelPrespectives: state.perspectiveHierarchyReducer.modelPrespectives,12    metaModelPerspective: state.perspectiveHierarchyReducer.metaModelPerspective,13    crudMetaModelPerspective: state.perspectiveHierarchyReducer.crudMetaModelPerspective,14    currentPage: state.perspectiveHierarchyReducer.currentPage,15    perPage: state.perspectiveHierarchyReducer.perPage,16    crude: state.perspectiveHierarchyReducer.crude,17    addSettings: state.perspectiveHierarchyReducer.addSettings,18    availableAction: state.perspectiveHierarchyReducer.availableAction,19    createComponentResponse: state.perspectiveHierarchyReducer.createComponentResponse,20    deleteComponentResponse: state.perspectiveHierarchyReducer.deleteComponentResponse,21    connectionData: state.perspectiveHierarchyReducer.connectionData,22    updateComponentResponse: state.perspectiveHierarchyReducer.updateComponentResponse,23    dropdownData: state.perspectiveHierarchyReducer.dropdownData,24    expandSettings: state.perspectiveHierarchyReducer.expandSettings,25    nestedModelPerspectives: state.perspectiveHierarchyReducer.nestedModelPerspectives,26    headerData: state.perspectiveHierarchyReducer.headerData,27    crudModelPerspectives: state.perspectiveHierarchyReducer.crudModelPerspectives28  }29}30// In Object form, each funciton is automatically wrapped in a dispatch31export const propsMapping: Callbacks = {32  fetchUserAuthentication: sagaActions.basicActions.fetchUserAuthentication,33  setModalOpenStatus: basicActionCreators.setModalOpenStatus,34  fetchModelPrespectives: sagaActions.modelActions.fetchModelPrespectives,35  fetchMetaModelPrespective: sagaActions.modelActions.fetchMetaModelPrespective,36  fetchDropdownData: sagaActions.serviceActions.fetchDropdownData,37  fetchCrudMetaModelPrespective: sagaActions.serviceActions.fetchCrudMetaModelPrespective,38  setCurrentPage: actionCreators.setCurrentPage,39  setAddSettings: actionCreators.setAddSettings,40  setPerPage: actionCreators.setPerPage,41  setAvailableAction: actionCreators.setAvailableAction,42  resetResponse: actionCreators.resetResponse,43  addComponentComponent: sagaActions.applicationDetailActions.addComponentComponent,44  deleteComponentModelPerspectives: sagaActions.modelActions.deleteComponentModelPerspectives,45  setConnectionData: actionCreators.setConnectionData,46  updateModelPrespectives: sagaActions.modelActions.updateModelPrespectives,47  updateComponentModelPrespectives: sagaActions.modelActions.updateComponentModelPrespectives,48  fetchNestedModelPrespectives: sagaActions.serviceActions.fetchNestedModelPrespectives,49  fetchCrudModelPrespectives: sagaActions.serviceActions.fetchCrudModelPrespectives,50  updateNestedModelPrespectives: sagaActions.serviceActions.updateNestedModelPrespectives,51  removeModelPrespectives: sagaActions.serviceActions.removeModelPrespectives,52  setExpandSettings: actionCreators.setExpandSettings,53  setHeaderData: actionCreators.setHeaderData54}55// If you want to use the function mapping56// export const propsMapping = (dispatch, ownProps) => {57//   return {58//     onClick: () => dispatch(actions.starsActions.FETCH_STARS)59//   }60// }61// eslint-disable-next-line62toastr.options = {63  'closeButton': false,64  'debug': false,65  'newestOnTop': false,66  'progressBar': false,67  'positionClass': 'toast-bottom-full-width',68  'preventDuplicates': false,69  'onclick': null,70  'showDuration': '300',71  'hideDuration': '1000',72  'timeOut': '4000',73  'extendedTimeOut': '1000',74  'showEasing': 'swing',75  'hideEasing': 'linear',76  'showMethod': 'fadeIn',77  'hideMethod': 'fadeOut'78}79// eslint-disable-next-line80export default compose(81  connect(mapStateToProps, propsMapping),82  lifecycle({83    componentWillMount: function () {84      // eslint-disable-next-line85      mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})86      this.props.fetchUserAuthentication && this.props.fetchUserAuthentication()87      let payload = {}88      payload['meta_model_perspective_id[0]'] = this.props.match.params.id89      payload['view_key[0]'] = this.props.match.params.viewKey90      this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)91      let metaModelPrespectivePayload = {}92      metaModelPrespectivePayload.id = this.props.match.params.id93      metaModelPrespectivePayload.viewKey = {'view_key': this.props.match.params.viewKey}94      this.props.fetchMetaModelPrespective && this.props.fetchMetaModelPrespective(metaModelPrespectivePayload)95    },96    componentDidMount: function () {97      // eslint-disable-next-line98      // mApp && mApp.block('#entitlementList', {overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})99    },100    componentWillReceiveProps: function (nextProps) {101      console.log('nextProps', nextProps)102      if (nextProps.authenticateUser && nextProps.authenticateUser.resources) {103        if (!nextProps.authenticateUser.resources[0].result) {104          this.props.history.push('/')105        }106      }107      if (nextProps.modelPrespectives && nextProps.modelPrespectives !== '' && nextProps.availableAction.toProcessModelPerspectives) {108        // eslint-disable-next-line109        mApp && mApp.unblockPage()110        let availableAction = nextProps.availableAction111        availableAction['toProcessModelPerspectives'] = false112        nextProps.setAvailableAction(availableAction)113      }114      if (nextProps.crudModelPerspectives && nextProps.crudModelPerspectives !== '' && !nextProps.availableAction.toProcess && nextProps.connectionData !== '' && nextProps.availableAction.toProcessCrudModel) {115        if (nextProps.crudModelPerspectives.error_code === null) {116          let addSettings = JSON.parse(JSON.stringify(nextProps.addSettings))117          let groupedPairedList = nextProps.addSettings.groupedPairedList118          let labelParts = nextProps.crudMetaModelPerspective.resources[0].parts119          let data = nextProps.crudModelPerspectives.resources[0]120          let selectedValues = []121          let setCustomerProperty = []122          if (!addSettings.isNexusPoint) {123            if (data.parts) {124              labelParts.forEach(function (partData, ix) {125                if (partData.standard_property !== null && partData.type_property === null) { // Standard Property126                  if (partData.standard_property === 'name') {127                    addSettings.name = data.parts[ix].value128                  }129                  if (partData.standard_property === 'description') {130                    addSettings.description = data.parts[ix].value131                  }132                } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property133                  if (data.parts[ix].value.length > 0) {134                    // todo write code for multiple component135                    let eachSelectedValues = []136                    data.parts[ix].value.forEach(function (value, ix) {137                      let targetComponent = value.target_component138                      targetComponent.label = targetComponent.name139                      targetComponent.value = targetComponent.id140                      eachSelectedValues.push(targetComponent)141                    })142                    selectedValues.push(eachSelectedValues)143                  } else {144                    selectedValues.push(null)145                  }146                } else if (partData.standard_property === null && partData.type_property !== null) { // Customer Property147                  let value = null148                  if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property149                    value = data.parts[ix].value !== null ? data.parts[ix].value.int_value : ''150                  } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {151                    value = data.parts[ix].value !== null ? data.parts[ix].value.float_value : ''152                  } else if (labelParts[ix].type_property.property_type.key === 'Text') {153                    value = data.parts[ix].value !== null ? data.parts[ix].value.text_value : ''154                  } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {155                    value = data.parts[ix].value !== null ? data.parts[ix].value.date_time_value : ''156                  } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {157                    value = data.parts[ix].value !== null ? data.parts[ix].value.boolean_value : ''158                  } else if (labelParts[ix].type_property.property_type.key === 'List') {159                    console.log('ix list', ix, data.parts)160                    value = data.parts[ix].value !== null ? data.parts[ix].value.value_set_value : ''161                  } else {162                    value = data.parts[ix].value !== null ? data.parts[ix].value.other_value : ''163                  }164                  setCustomerProperty.push(value)165                }166              })167            }168          } else {169            if (data.parts) {170              let groupCollection = addSettings.groupCollection171              labelParts.forEach(function (partData, ix) {172                if (partData.standard_property !== null && partData.type_property === null) { // Standard Property173                  if (partData.standard_property === 'name') {174                    addSettings.name = data.parts[ix].value175                  }176                  if (partData.standard_property === 'description') {177                    addSettings.description = data.parts[ix].value178                  }179                } else if (partData.standard_property === null && partData.type_property === null) { // Connection Property180                  if (groupCollection.includes(partData.name)) {181                    // todo generate paired list182                    if (data.parts[ix] && data.parts[ix].value.parts.length > 0) {183                      data.parts[ix].value.parts.forEach(function (valuePartData, ix) {184                        if (valuePartData.value.length > 0) {185                          let groupedPairedObject = {}186                          valuePartData.value.forEach(function (pairObject, pairIndex) {187                            groupedPairedObject[pairIndex] = pairObject188                            if (pairIndex + 1 === valuePartData.value.length) {189                              groupedPairedObject['type'] = 'OLD'190                              groupedPairedList.push(groupedPairedObject)191                              groupedPairedObject = {}192                              console.log('groupedPairedList', groupedPairedList)193                            }194                          })195                        }196                      })197                    }198                  } else {199                    if (data.parts[ix] && data.parts[ix].value.parts.length > 0) {200                      // eslint-disable-next-line201                      // debugger202                      let eachSelectedValues = []203                      data.parts[ix].value.parts.forEach(function (valuePartData, ix) {204                        if (valuePartData.value.length > 0) {205                          valuePartData.value.forEach(function (pairObject, pairIndex) {206                            let targetComponent = pairObject207                            targetComponent.label = targetComponent.name208                            targetComponent.value = targetComponent.id209                            eachSelectedValues.push(targetComponent)210                          })211                        }212                      })213                      selectedValues.push(eachSelectedValues)214                    } else {215                      selectedValues.push(null)216                    }217                  }218                } else if (partData.standard_property === null && partData.type_property !== null) { // Customer Property219                  let value = null220                  if (labelParts[ix].type_property.property_type.key === 'Integer') { // below are Customer Property221                    value = data.parts[ix].value !== null ? data.parts[ix].value.int_value : ''222                  } else if (labelParts[ix].type_property.property_type.key === 'Decimal') {223                    value = data.parts[ix].value !== null ? data.parts[ix].value.float_value : ''224                  } else if (labelParts[ix].type_property.property_type.key === 'Text') {225                    value = data.parts[ix].value !== null ? data.parts[ix].value.text_value : ''226                  } else if (labelParts[ix].type_property.property_type.key === 'DateTime') {227                    value = data.parts[ix].value !== null ? data.parts[ix].value.date_time_value : ''228                  } else if (labelParts[ix].type_property.property_type.key === 'Boolean') {229                    value = data.parts[ix].value !== null ? data.parts[ix].value.boolean_value : ''230                  } else if (labelParts[ix].type_property.property_type.key === 'List') {231                    value = data.parts[ix].value !== null ? data.parts[ix].value.value_set_value : ''232                  } else {233                    value = data.parts[ix].value !== null ? data.parts[ix].value.other_value : ''234                  }235                  setCustomerProperty.push(value)236                }237              })238            }239          }240          addSettings.isEditModalOpen = true241          addSettings.updateObject = data242          addSettings.updateResponse = null243          addSettings.groupedPairedList = groupedPairedList244          nextProps.setAddSettings(addSettings)245          let connectionData = {...nextProps.connectionData}246          let existingCustomerProperty = connectionData.customerProperty.map(function (data, index) {247            if (data.type_property.property_type.key === 'Boolean') {248              data.type_property.boolean_value = setCustomerProperty[index]249            } else if (data.type_property.property_type.key === 'Integer') {250              data.type_property.int_value = setCustomerProperty[index]251            } else if (data.type_property.property_type.key === 'Decimal') {252              data.type_property.float_value = setCustomerProperty[index]253            } else if (data.type_property.property_type.key === 'DateTime') {254              data.type_property.date_time_value = setCustomerProperty[index]255            } else if (data.type_property.property_type.key === 'Text') {256              data.type_property.text_value = setCustomerProperty[index]257            } else if (data.type_property.property_type.key === 'List') {258              data.type_property.value_set_value = setCustomerProperty[index] || null259              data.type_property.value_set_value_id = setCustomerProperty[index].id || null260            } else {261              data.type_property.other_value = setCustomerProperty[index]262            }263            return data264          })265          connectionData.customerProperty = existingCustomerProperty266          connectionData.selectedValues = selectedValues267          connectionData.initialSelectedValues = JSON.parse(JSON.stringify(selectedValues))268          nextProps.setConnectionData(connectionData)269          let availableAction = nextProps.availableAction270          availableAction['toProcessCrudModel'] = false271          nextProps.setAvailableAction(availableAction)272        } else {273          // eslint-disable-next-line274          toastr.error(nextProps.crudModelPerspectives.error_message, nextProps.crudModelPerspectives.error_code)275        }276      }277      if (nextProps.crudMetaModelPerspective && nextProps.crudMetaModelPerspective !== '' && nextProps.availableAction.toProcess) {278        if (nextProps.crudMetaModelPerspective.resources[0].crude) {279          let addSettings = JSON.parse(JSON.stringify(nextProps.addSettings))280          let availableAction = {...nextProps.availableAction}281          let crude = nextProps.crude282          let mask = nextProps.crudMetaModelPerspective.resources[0].crude283          let labelParts = nextProps.crudMetaModelPerspective.resources[0].parts284          let connectionData = {}285          connectionData.operation = {286            toCallApi: true,287            isComplete: false,288            processIndex: 0289          }290          connectionData.selectedValues = []291          let cData = []292          let standardProperty = []293          let customerProperty = []294          for (let option in crude) {295            if (crude.hasOwnProperty(option)) {296              if (mask & crude[option]) {297                availableAction[option] = true298              }299            }300          }301          labelParts.forEach(function (data, index) {302            if (data.standard_property === null && data.type_property === null) {303              let obj = {}304              obj.name = data.name305              if (data.constraint_inverted) {306                obj.componentId = data.constraint.component_type.id307              } else {308                obj.componentId = data.constraint.target_component_type.id309              }310              obj.data = null311              obj.processed = false312              obj.partIndex = index313              obj.max = data.constraint.max314              obj.min = data.constraint.min315              cData.push(obj)316              connectionData.selectedValues.push(null)317              if (data.group_with_previous) {318                let groupCollection = []319                groupCollection.push(labelParts[index - 1].name)320                groupCollection.push(data.name)321                addSettings.isNexusPoint = true322                addSettings.groupCollection = groupCollection323                nextProps.setAddSettings(addSettings)324              }325            }326            if (data.standard_property !== null && data.type_property === null) {327              data.partIndex = index328              standardProperty.push(data)329            }330            if (data.standard_property === null && data.type_property !== null) {331              data.partIndex = index332              customerProperty.push(data)333            }334          })335          connectionData.data = cData336          connectionData.customerProperty = customerProperty337          connectionData.standardProperty = standardProperty338          connectionData.selectOption = []339          nextProps.setConnectionData(connectionData)340          availableAction['toProcess'] = false341          nextProps.setAvailableAction(availableAction)342        }343      }344      if (nextProps.metaModelPerspective && nextProps.metaModelPerspective !== '' && nextProps.availableAction.toProcessMetaModel) {345        let headerData = {...this.props.headerData}346        let availableAction = {...nextProps.availableAction}347        let crude = nextProps.crude348        let mask = nextProps.metaModelPerspective.resources[0].crude349        let metaData = []350        metaData.push(nextProps.metaModelPerspective.resources[0])351        headerData.metaModelPerspective = metaData352        headerData.toProcess = true353        nextProps.setHeaderData(headerData)354        availableAction['toProcessMetaModel'] = false355        for (let option in crude) {356          if (crude.hasOwnProperty(option)) {357            if (mask & crude[option]) {358              availableAction[option] = true359            }360          }361        }362        nextProps.setAvailableAction(availableAction)363      }364      if (nextProps.createComponentResponse && nextProps.createComponentResponse !== '') {365        let addSettings = {...nextProps.addSettings}366        addSettings.name = ''367        addSettings.description = ''368        addSettings.createResponse = nextProps.createComponentResponse369        nextProps.setAddSettings(addSettings)370        // eslint-disable-next-line371        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})372        let payload = {}373        if (addSettings.initiatedFrom === 'ParentNode') {374          payload['meta_model_perspective_id[0]'] = this.props.match.params.id375          payload['view_key[0]'] = this.props.match.params.viewKey376          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)377        } else {378          let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null379          if (selectedObject) {380            if (selectedObject.expandFlag) {381              payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id382              payload['view_key'] = selectedObject.metaModelPerspectives.view_key383              payload['parent_reference'] = selectedObject.parentReference384              if (selectedObject.containerPerspectiveId) {385                payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId386                payload['container_view_key'] = selectedObject.containerPerspectiveViewKey387              }388              this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)389            }390          }391          // payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id392          // payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key393          // payload['parent_reference'] = addSettings.selectedData.parentReference394          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId395          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey396          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)397        }398        nextProps.resetResponse()399      }400      if (nextProps.updateComponentResponse && nextProps.updateComponentResponse !== '') {401        let addSettings = {...nextProps.addSettings}402        addSettings.name = ''403        addSettings.description = ''404        addSettings.updateResponse = nextProps.updateComponentResponse405        nextProps.setAddSettings(addSettings)406        let payload = {}407        // eslint-disable-next-line408        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})409        if (addSettings.initiatedFrom === 'ParentNode') {410          payload['meta_model_perspective_id[0]'] = this.props.match.params.id411          payload['view_key[0]'] = this.props.match.params.viewKey412          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)413        } else {414          let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null415          if (selectedObject) {416            if (selectedObject.expandFlag) {417              payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id418              payload['view_key'] = selectedObject.metaModelPerspectives.view_key419              payload['parent_reference'] = selectedObject.parentReference420              if (selectedObject.containerPerspectiveId) {421                payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId422                payload['container_view_key'] = selectedObject.containerPerspectiveViewKey423              }424              this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)425            }426          }427          // payload['meta_model_perspective_id'] = addSettings.selectedData.metaModelPerspectives.id428          // payload['view_key'] = addSettings.selectedData.metaModelPerspectives.view_key429          // payload['parent_reference'] = addSettings.selectedData.parentReference430          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId431          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey432          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)433        }434        nextProps.resetResponse()435      }436      if (nextProps.deleteComponentResponse && nextProps.deleteComponentResponse !== '') {437        let addSettings = {...nextProps.addSettings}438        addSettings.deleteResponse = nextProps.deleteComponentResponse439        nextProps.setAddSettings(addSettings)440        let payload = {}441        // eslint-disable-next-line442        mApp && mApp.blockPage({overlayColor:'#000000',type:'loader',state:'success',message:'Processing...'})443        if (addSettings.initiatedFrom === 'ParentNode') {444          payload['meta_model_perspective_id[0]'] = this.props.match.params.id445          payload['view_key[0]'] = this.props.match.params.viewKey446          this.props.fetchModelPrespectives && this.props.fetchModelPrespectives(payload)447        } else {448          let selectedObject = this.props.expandSettings.selectedObject[this.props.expandSettings.level] || null449          if (selectedObject) {450            if (selectedObject.expandFlag) {451              payload['meta_model_perspective_id'] = selectedObject.metaModelPerspectives.id452              payload['view_key'] = selectedObject.metaModelPerspectives.view_key453              payload['parent_reference'] = selectedObject.parentReference454              if (selectedObject.containerPerspectiveId) {455                payload['container_meta_model_perspective_id'] = selectedObject.containerPerspectiveId456                payload['container_view_key'] = selectedObject.containerPerspectiveViewKey457              }458              this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)459            }460          }461          // let selectedObject = this.props.expandSettings.selectedObject[addSettings.deleteOperationLevel] || null462          // payload['meta_model_perspective_id'] = selectedObject.rolePerspectives.Delete.part_perspective_id463          // payload['view_key'] = selectedObject.rolePerspectives.Delete.part_perspective_view_key464          // payload['parent_reference'] = selectedObject.rolePerspectives.parentReference465          // payload['container_meta_model_perspective_id'] = addSettings.selectedData.containerPerspectiveId466          // payload['container_view_key'] = addSettings.selectedData.containerPerspectiveViewKey467          // this.props.fetchNestedModelPrespectives && this.props.fetchNestedModelPrespectives(payload)468        }469        nextProps.resetResponse()470      }471      if (nextProps.connectionData !== '' && nextProps.connectionData.operation.toCallApi && !nextProps.connectionData.operation.isComplete) {472        let connectionData = {...nextProps.connectionData}473        let processIndex = nextProps.connectionData.operation.processIndex474        let totalLength = nextProps.connectionData.data.length475        if (processIndex < totalLength) {476          let processData = nextProps.connectionData.data[processIndex]477          nextProps.fetchDropdownData && nextProps.fetchDropdownData(processData.componentId)478          connectionData.operation.processIndex = processIndex + 1479          connectionData.operation.toCallApi = false480        }481        if (processIndex === totalLength) {482          connectionData.operation.isComplete = true483          // eslint-disable-next-line484          mApp && mApp.unblockPage()485        }486        nextProps.setConnectionData(connectionData)487      }488      if (nextProps.dropdownData !== '') {489        if (nextProps.dropdownData.error_code === null) {490          let connectionData = {...nextProps.connectionData}491          connectionData.selectOption.push(nextProps.dropdownData.resources)492          connectionData.operation.toCallApi = true493          nextProps.setConnectionData(connectionData)494        } else {495          // eslint-disable-next-line496          toastr.error(nextProps.dropdownData.error_message, nextProps.dropdownData.error_code)497        }498        this.props.resetResponse()499      }500      if (nextProps.nestedModelPerspectives !== '' && nextProps.expandSettings.processAPIResponse) {501        // eslint-disable-next-line502        mApp && mApp.unblockPage()503        if (nextProps.nestedModelPerspectives.length > 0) {504          let expandSettings = JSON.parse(JSON.stringify(nextProps.expandSettings))505          let level = expandSettings.level506          let modelPerspectives = []507          nextProps.nestedModelPerspectives.forEach(function (data, index) {508            if (data.parts) {509              modelPerspectives.push(data)510            }511          })512          expandSettings.modelPerspectives[level] = modelPerspectives513          expandSettings.processAPIResponse = false514          nextProps.setExpandSettings(expandSettings)515        } else {516          // eslint-disable-next-line517          toastr.error(nextProps.nestedModelPerspectives.error_message, nextProps.nestedModelPerspectives.error_code)518        }519        nextProps.resetResponse()520      }521      if (nextProps.headerData.toProcess) {522        let headerData = JSON.parse(JSON.stringify(nextProps.headerData))523        // let attachment = null524        let metaModelPerspective = JSON.parse(JSON.stringify(headerData.metaModelPerspective))525        let processedIndex = headerData.processedIndex526        let toProcess = false527        if (nextProps.headerData.metaModelPerspective.length > 0) {528          nextProps.headerData.metaModelPerspective.forEach(function (data, index) {529            if (!processedIndex.includes(index)) {530              if (data.parts.length > 0) {531                data.parts.forEach(function (partData, idx) {532                  if (partData.constraint_perspective !== null) {533                    // if (!partData.group_with_previous) {534                      metaModelPerspective.push(partData.constraint_perspective)535                      processedIndex.push(index)536                      toProcess = true537                    // }538                  }539                })540              }541            }542          })543        }544        headerData.metaModelPerspective = metaModelPerspective545        headerData.processedIndex = processedIndex546        headerData.toProcess = toProcess547        if (!toProcess) {548          let headerColumn = []549          if (metaModelPerspective.length > 0) {550            metaModelPerspective.forEach(function (data, index) {551              // if (data.view_key === nextProps.match.params.viewKey) {552                data.parts.forEach(function (partData, idx) {553                  if (partData.standard_property !== null && partData.type_property === null && partData.attachments === null) { // Standard Property554                    if (partData.standard_property === 'name') {555                      headerColumn.push(partData.name)556                      console.log('header column name if', partData.name, idx)557                    }558                  } else if (partData.standard_property === null && partData.type_property === null && partData.constraint_perspective === null && partData.attachments === null) { // Connection Property559                    headerColumn.push(partData.name)560                    console.log('header column name else', partData.name, idx)561                  }562                })563              // } else {564              //   headerColumn.push(data.name)565              // }566            })567          }568          headerData.headerColumn = headerColumn569          console.log('header column name container', headerColumn)570        }571        this.props.setHeaderData(headerData)572      }573    }574  })...

Add.js

Source:Add.js

1import React, {useState} from "react"2import {Modal} from "react-bootstrap"3import AddEventInput from "./AddEventInput"4import AddTaskInput from "./AddTaskInput"5const Add = (props) => {6    /////////////////////////7    // Constants8    /////////////////////////9    const {userId, addSettings, url, setModalShow, getData, setAddSettings} = props10    const [selectedView, setSelectedView] = useState(addSettings.category)11    /////////////////////////12    // Functions13    /////////////////////////14    function MyVerticallyCenteredModal(props) {15        return (16          <Modal17            {...props}18            size="lg"19            aria-labelledby="contained-modal-title-vcenter"20            centered21            backdrop="static"22          >23            <Modal.Header closeButton>24              <Modal.Title id="contained-modal-title-vcenter">25                Add Item26              </Modal.Title>27            </Modal.Header>28            <Modal.Body>29              <div class="events-tasks-buttons-cont">30                <div31                  name="task"32                  onClick={() => {33                    setAddSettings({...addSettings, category: "task"})34                    setSelectedView("task")35                  }}36                  className={selectedView === "task" ? "selected" : "" }37                ><h5>Task</h5></div>38                <div39                  name="event"40                  onClick={() => {41                    setAddSettings({...addSettings, category: "event"})42                    setSelectedView("event")43                  }}44                  className={selectedView === "event" ? "selected" : "" }45                ><h5>Event</h5></div>46              </div>47              <div48                className={ addSettings.category === "task" ? "task-add" : "hidden task-add"}49              >50                <AddTaskInput51                  userId={userId}52                  addSettings={addSettings}53                  url={url}54                  setModalShow={setModalShow}55                  getData={getData}56                />57              </div>58              <div59                className={ addSettings.category === "event" ? "event-add" : "event-add hidden"}60              >61                <AddEventInput62                  userId={userId}63                  url={url}64                  setModalShow={setModalShow}65                  getData={getData}66                  addSettings={addSettings}67                />68              </div>69            </Modal.Body>70          </Modal>71        );72      }73      74    /////////////////////////75    // Render76    /////////////////////////77    const loaded = () => {78      return (79        <>80          <MyVerticallyCenteredModal81            show={props.modalShow}82            onHide={() => props.setModalShow(false)}83          />84        </>85      )86    }87    const loading = () => {88      return (89        <h3>Loading...</h3>90      )91    }92    return addSettings.category !== "" ? loaded() : loading()93}...

testcollector.js

Source:testcollector.js

...4    mergeSettings,5    registerInitializer,6} from '../../fw/initialize/startup'7const initSettingsThing = i => {8    i.addSettings('hej', 'san')9}10const initSettingsTwo = i => {11    i.addSettings('hej2', 'san2')12    i.addSettings('hej3', 'san3')13}14const initSettingsThree = i => {15    i.addSettings('database', {16        dev: {17            host: 'localhost',18        },19    })20    i.addSettings('database.dev', {21        host: 'inte localhost',22    })23    i.addSettings('fw.devtools.develop', true)24}25test('Initializer settings collection', () => {26    registerInitializer(initSettingsThing)27    registerInitializer(initSettingsTwo)28    const collector = collect()29    expect(collector.settings.length).toBe(3)30    clearInitializers()31})32test('Initializer settings merging', () => {33    registerInitializer(initSettingsThree)34    const coll = collect()35    const merged = mergeSettings(coll)36    expect(merged.database.dev.host).toBe('inte localhost')37    clearInitializers()...

Using AI Code Generation

1module.exports = {2  'Demo test Google' : function (browser) {3      .waitForElementVisible('body', 1000)4      .setValue('input[type=text]', 'nightwatch')5      .waitForElementVisible('button[name=btnG]', 1000)6      .click('button[name=btnG]')7      .pause(1000)8      .assert.containsText('#main', 'Night Watch')9      .end();10  }11};12{13  "selenium" : {

Using AI Code Generation

1module.exports = {2  'Demo test Google' : function (browser) {3      .waitForElementVisible('body', 1000)4      .assert.title('Google')5      .assert.visible('input[type=text]')6      .setValue('input[type=text]', 'nightwatch')7      .waitForElementVisible('button[name=btnG]', 1000)8      .click('button[name=btnG]')9      .pause(1000)10      .assert.containsText('#main', 'Night Watch')11      .end();12  }13};14{15  "test_settings": {16    "default": {17      "screenshots": {18      },19      "desiredCapabilities": {20      }21    }22  }23}24{25  "test_settings": {26    "default": {27      "screenshots": {28      },29      "desiredCapabilities": {30      }31    },32    "chrome": {33      "desiredCapabilities": {34      }35    }36  }37}38{39  "test_settings": {40    "default": {41      "screenshots": {42      },43      "desiredCapabilities": {44      }45    },46    "chrome": {47      "desiredCapabilities": {

Using AI Code Generation

1module.exports = {2    'Demo test Google' : function (browser) {3            .waitForElementVisible('body', 1000)4            .setValue('input[type=text]', 'nightwatch')5            .waitForElementVisible('button[name=btnG]', 1000)6            .click('button[name=btnG]')7            .pause(1000)8            .assert.containsText('#main', 'Night Watch')9            .end();10    }11};

Using AI Code Generation

1module.exports = {2    'Demo test Google': function (browser) {3            .waitForElementVisible('body', 1000)4            .setValue('input[type=text]', 'nightwatch')5            .waitForElementVisible('button[name=btnG]', 1000)6            .click('button[name=btnG]')7            .pause(1000)8            .assert.containsText('#main', 'Night Watch')9            .end();10    }11};

Using AI Code Generation

1module.exports = {2  'Test Demo': function (browser) {3      .waitForElementVisible('body')4      .setValue('input[type=text]', 'nightwatch')5      .waitForElementVisible('button[name=btnK]')6      .click('button[name=btnK]')7      .pause(1000)8      .assert.containsText('#main', 'Night Watch')9      .end();10  },11};

Using AI Code Generation

1var nightwatch = require('nightwatch');2var settings = {3    "test_settings": {4        "default": {5            "desiredCapabilities": {6            }7        }8    }9};10nightwatch.addSettings(settings);11{12    "selenium" : {

Using AI Code Generation

1module.exports = {2    addSettings: function (settings) {3        return this.api.execute(function (settings) {4            window.localStorage.setItem('nightwatch', JSON.stringify(settings));5        }, [settings]);6    }7};8module.exports = {9    clearSettings: function () {10        return this.api.execute(function () {11            window.localStorage.removeItem('nightwatch');12        });13    }14};15module.exports = {16    getSettings: function () {17        return this.api.execute(function () {18            return window.localStorage.getItem('nightwatch');19        });20    }21};22module.exports = {23    getSettings: function () {24        return this.api.execute(function () {25            return window.localStorage.getItem('nightwatch');26        });27    }28};29module.exports = {30    getSettings: function () {31        return this.api.execute(function () {32            return window.localStorage.getItem('nightwatch');33        });34    }35};36module.exports = {37    getSettings: function () {38        return this.api.execute(function () {39            return window.localStorage.getItem('nightwatch');40        });41    }42};43module.exports = {44    getSettings: function () {45        return this.api.execute(function () {46            return window.localStorage.getItem('nightwatch');47        });48    }49};50module.exports = {51    getSettings: function () {52        return this.api.execute(function () {53            return window.localStorage.getItem('nightwatch');54        });55    }56};57module.exports = {58    getSettings: function () {59        return this.api.execute(function () {60            return window.localStorage.getItem('nightwatch');61        });62    }63};64module.exports = {65    getSettings: function () {66        return this.api.execute(function () {67            return window.localStorage.getItem('nightwatch');68        });69    }70};71module.exports = {72    getSettings: function () {73        return this.api.execute(function () {74            return window.localStorage.getItem('nightwatch');75        });76    }77};

Using AI Code Generation

1module.exports = {2    addSettings: function(settings) {3        settings.custom_commands_path = './commands';4        settings.custom_assertions_path = './assertions';5        return settings;6    }7};8module.exports = {9    command: function() {10    }11};12module.exports = {13    command: function() {14    }15};16module.exports = {17    test_settings: {18        default: {19            screenshots: {20            },21            desiredCapabilities: {22            }23        }24    }25};26module.exports = {27    test_settings: {28        default: {29            screenshots: {30            },31            desiredCapabilities: {32            }33        }34    }35};36module.exports = {37    test_settings: {38        default: {39            screenshots: {40            },41            desiredCapabilities: {42            }43        }44    }45};46module.exports = {

Using AI Code Generation

1module.exports = {2    addSettings: function (settings) {3        var fs = require('fs');4        var path = require('path');5        var nightwatchConfigPath = path.join(process.cwd(), 'nightwatch.json');6        var nightwatchConfig = require(nightwatchConfigPath);7        for (var key in settings) {8            nightwatchConfig[key] = settings[key];9        }10        fs.writeFileSync(nightwatchConfigPath, JSON.stringify(nightwatchConfig, null, 2));11    }12};13var testSettings = require('./test.js');14testSettings.addSettings({15    "globals": {16    }17});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.