Component resolver Bone

Introducción

Componente lógico.

Código fuente

<script>
  const props = {
    dev_components: {
      type: Array,
      required: false
    },
    json_resolver: {
      type: Object,
      default: () => {return {id_usuario: '00000000-0000-0000-0000-000000000000', id_resolver: undefined, args_components_fcn: {}}}
    },
    encryptedCompFn: {
      type: String,
      required: false
    },
    encryptedErrorFn: {
      type: String,
      required: false
    }
  }
import { normalizeProps, assignCamelToSnake } from '../../helpers/propsGenerator';
const mergedProps = normalizeProps(props)
import fcnResponseHandler from '../../mixins/fcnResponseHandler'
import {endpointIcl, fnComponentResolver, resolverComponentName} from '../../constants'
export default {
  name: resolverComponentName + 'Bone',
  mixins: [
    fcnResponseHandler
  ],
  props: mergedProps,
  data () {
    return {
      components: [],
      loading: false,
      errored: false,
      id_usuario: '',
      id_resolver: undefined,
      args_components_fcn: {},
      structureError: false,
      encryptedCompFnLocal: ''
    }
  },
  watch: {
    dev_components (isdevComponents) {
      this.components = isdevComponents
    }
  },
  async created () {
    assignCamelToSnake(mergedProps, this)
    if (this.encryptedErrorFn)
      this.$iclstore.commit('updateEncryptedErrorFn', this.encryptedErrorFn)    
    if (this.encryptedCompFn)
      this.$iclstore.commit('updateEncryptedCompFn', this.encryptedCompFn)    
    this.id_usuario = this.json_resolver.id_usuario ? this.json_resolver.id_usuario : this.id_usuario
    this.id_resolver = this.json_resolver.id_resolver ? this.json_resolver.id_resolver : (this.id_resolver ? this.id_resolver : this.resolveIdResolver())
    this.encryptedCompFnLocal = this.$iclstore.getters.getEncryptedCompFn()
    this.args_components_fcn = this.json_resolver.args_components_fcn ? this.json_resolver.args_components_fcn : this.args_components_fcn
    this.$iclstore.commit('updateId_usuario', this.id_usuario)
    if (!this.dev_components) { //Estará valorizado si se ha cargado el componente de manera estática para el modo de desarrollo, cuando se valorice devComponents, no se realizará la consulta a la BD. Cuando no esta valorizado, se consulta la data de los componentes a la BD.
      let response = this.$iclstore.getters.getDatosSitios({
        sitio: this.$iclRouter.app._route.path,
        query: this.encryptedCompFnLocal,
        method: 'post',
        params: { args_components_fcn: { sitio: this.$iclRouter.app._route.path } }
      })
      if (response !== null)
        this.components = Object.assign({}, JSON.parse(response.response))
      this.consulta()
    } else
      this.components = this.dev_components
  },
  mounted () {
    this.structureError = this.$propError(props, this.$props, resolverComponentName)
    if (this.structureError) {
      this.$iclstore.commit('updateSnack', {text: 'Ha ocurrido un error al cargar el sitio', active: true, color:'warning'})
    }
  },
  methods: {
    resolveIdResolver () {
      let queries = new URLSearchParams(this.$iclRouter.app._route.query).toString()
      let path = this.$iclRouter.app._route.path
      if (queries)
        path = path + '?' + queries
      return path
    },
    consulta () {
      let paramsPreset
      paramsPreset = {id_resolver: this.id_resolver ? this.id_resolver : this.resolveIdResolver()}
      let paramsFinal = {...paramsPreset, id_usuario: this.$iclstore.state.id_usuario, ...this.args_components_fcn}
      this.loading = true
      this.$iclAxios({
        url: endpointIcl + this.encryptedCompFnLocal,
        method: 'get',
        params: [JSON.stringify(paramsFinal)]
      }).then((r) => {
        const dataResponse = r?.[0]?.[fnComponentResolver] ?? r ?? []        
        this.$detectResponseStructErrors(dataResponse, this.encryptedCompFnLocal, ['type', 'props'], resolverComponentName, '{type: String, props: Object}', 'https://icl.iridiumrobotics.com.ar/components/ir-component-resolver.html#uso', this.id_resolver) //En caso de detección de errores en la respuesta NO interrumpe la ejecución del componente, solo loguea.
        this.components = dataResponse
      }).catch((error) => {
        console.log(error)
        this.errored = true
        this.handleError(error, this.$iclstore)
      }).finally(() => {
        this.loading = false
      })
    },
  },
  render () {
    if (this.structureError) {
      return
    }
    return this.$scopedSlots.default({
      components: this.components,
      loading: this.loading,
      id_resolver: this.id_resolver,
      errored: this.errored
    })
  }
}
</script>