Tabs Bone

Introducción

Componente lógico.

Código fuente

<script>
const props = {
  readonly: {
    type: Boolean,
    default: false
  },
  items_fcn: {
    type: String,
    default: ''
  },
  args_items_fcn: {
    type: Array,
    default: () => []
  },
  items: {
    type: Array,
    required: true
  },
  initialItems: {
    type: Array,
    required: false
  },
  id_resolver: {
    type: String
  },
  linked: {
    type: Boolean,
    default: false
  }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
const mergedProps = normalizeProps(props)
import { tabsComponentName, externalDBEndpoint } from '../../../constants'
export default {
  name: tabsComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      structureError: false,
      localProps: {}
    }
  },
  created() {
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.localProps = { ...this.$props }
    this.structureError = this.$propError(
      props,
      this.localProps,
      tabsComponentName
    )
    if (this.structureError) {
      this.$iclstore.commit('updateSnack', {
        text: 'Ha ocurrido un error al cargar algunos campos del formulario',
        active: true,
        color: 'error'
      })
    }
    if (this.items_fcn !== '' && this.items_fcn !== null) this.getItems()
    else this.$emit('update:items', this.initialItems)
  },
  methods: {
    async getItems() {
      this.$iclAxios
        .post(externalDBEndpoint + this.items_fcn, [
          JSON.stringify({
            args: this.args_items_fcn,
            id_usuario: this.$iclstore.state.id_usuario,
            id_resolver: this.id_resolver
          })
        ])
        .then((rsp) => {
          if (Array.isArray(rsp))
            // Si es un arreglo entonces se considera un arreglo de "items"
            this.$detectResponseStructErrors(
              rsp,
              this.items_fcn,
              ['text', 'value'],
              tabsComponentName,
              '{text: String, value: Any}',
              'https://icl.iridiumrobotics.com.ar/components/ir-select.html#propiedades'
            )
          else
            this.structureError = this.$propError(
              props,
              { ...this.localProps, ...rsp },
              tabsComponentName
            )
          this.manageResponse(rsp)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    manageResponse(response) {
      if (Array.isArray(response)) {
        this.$emit('update:items', response)
        this.$emit('update-value')
      } else {
        this.localProps = { ...this.localProps, ...response }
        this.$emit('update:items', this.localProps.items)
          ? [...this.localProps.items]
          : []
        if (response.value || response.items)
          this.$emit('update-value', response.value)
      }
    }
  },
  render() {
    if (this.structureError) {
      return
    }
    let { readonly, linked } = this.localProps
    return this.$scopedSlots.default({
      readonly,
      linked
    })
  }
}
</script>