Stepper Bone

Introducción

Componente lógico.

Código fuente

<script>
const props = {
  items_fcn: {
    type: String,
    default: ''
  },
  args_items_fcn: {
    type: Array,
    default: () => []
  },
  items: {
    type: Array
  },
  id_resolver: {
    type: String
  },
  linked: {
    type: Boolean,
    default: false
  },
  showStep: {
    type: Boolean,
    default: true
  }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
const mergedProps = normalizeProps(props)
import { stepperComponentName, externalDBEndpoint } from '../../../constants'
export default {
  name: stepperComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      itemsLocal: [],
      structureError: false,
      localProps: {}
    }
  },
  computed: {
    showedItems() {
      //to do: ver de reemplazar con emision del evento update-prop
      if (this.itemsFcn) return this.itemsLocal
      else return this.items
    }
  },
  created() {
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.localProps = { ...this.$props }
    this.structureError = this.$propError(
      props,
      this.localProps,
      stepperComponentName
    )
    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.itemsLocal = this.items
  },
  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'],
              stepperComponentName,
              '{text: String, value: Any}',
              'https://icl.iridiumrobotics.com.ar/components/ir-select.html#propiedades'
            )
          else
            this.structureError = this.$propError(
              props,
              { ...this.localProps, ...rsp },
              stepperComponentName
            )
          this.manageResponse(rsp)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    manageResponse(response) {
      if (Array.isArray(response)) {
        this.itemsLocal = response
        this.$emit('updateValue', { items: this.itemsLocal })
      } else {
        this.localProps = { ...this.localProps, ...response }
        this.itemsLocal = this.localProps.items
          ? [...this.localProps.items]
          : []
        if (response.value || response.items)
          this.$emit('updateValue', {
            value: response.value,
            items: this.itemsLocal
          })
      }
    }
  },
  render() {
    if (this.structureError) {
      return
    }
    let { linked, showStep } = this.localProps
    return this.$scopedSlots.default({
      items: this.showedItems,
      linked,
      showStep
    })
  }
}
</script>