Date Picker Bone

Introducción

Componente lógico.

Código fuente

<script>
import { datePickerComponentName } from '../../../constants'
import { separateValidPositions } from '../../../mixins/comportamientoPositionCheck'
const validPositions = ['append', 'append-outer', 'label', 'prepend-inner']
const props = {
  value: {
    type: undefined,
    required: true
  },
  label: {
    type: String,
    default: ''
  },
  readonly: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  hideDetails: {
    type: undefined,
    default: 'auto'
  },
  clearable: {
    type: String
  },
  id_resolver: {
    type: String
  },
  comportamientos: {
    type: Array,
    required: false
  }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
const mergedProps = normalizeProps(props)
export default {
  name: datePickerComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      vallocal: this.valueFormated(),
      rulesLocal: [],
      usedPosition: [],
      error: true,
      structureError: false
    }
  },
  mounted() {
    this.structureError = this.$propError(
      props,
      this.$props,
      datePickerComponentName
    )
    if (this.structureError) {
      this.$iclstore.commit('updateSnack', {
        text: 'Ha ocurrido un error al cargar el sitio',
        active: true,
        color: 'error'
      })
    }
    this.usedPosition = separateValidPositions(
      this.comportamientos,
      validPositions,
      datePickerComponentName,
      this.id_resolver,
      this.$logError
    ) // Valida las posiciones válidas para comportamientos
  },
  created() {
    assignCamelToSnake(mergedProps, this)
    this.rulesLocal = this.$rulesGenerator(this.required, undefined)
  },
  methods: {
    valueFormated() {
      if (
        this.value &&
        this.value.toString() !== 'Invalid Date' &&
        this.value !== ''
      )
        return !Array.isArray(this.value)
          ? new Date(this.value).toISOString().substr(0, 10)
          : this.value.map((item) => {
              return new Date(item).toISOString().substr(0, 10)
            })
      else return undefined
    }
  },
  render() {
    if (this.structureError) {
      return
    }
    return this.$scopedSlots.default({
      placeholder: this.placeholder,
      vallocal: this.vallocal,
      pattern: this.pattern,
      readonly: this.readonly,
      rules: this.rulesLocal,
      required: this.required,
      inputEvents: {
        input: (e) => {
          if (typeof e === 'undefined') this.vallocal = e
          else if (!Array.isArray(e)) {
            this.vallocal = new Date(e).toISOString().substr(0, 10)
            this.$emit('input', new Date(e))
          } else {
            let reducedDates = e.reduce(
              (acc, currentValue) => {
                let date = new Date(currentValue)
                let aux = { ...acc }
                aux.jsons.push(date.toJSON())
                aux.strings.push(date.toISOString().substr(0, 10))
                return aux
              },
              { jsons: [], strings: [] }
            )
            let valJson = reducedDates.jsons
            this.vallocal = reducedDates.strings
            this.$emit('input', valJson)
          }
        }
      },
      comportamientoEvents: {
        changeFieldValue: (e) => {
          if (typeof e === 'undefined') this.vallocal = e
          else if (!Array.isArray(e)) {
            this.vallocal = new Date(e).toISOString().substr(0, 10)
            this.$emit('input', new Date(e))
          } else {
            let valJson = e.map((item) => {
              return new Date(item).toJSON()
            })
            this.vallocal = e.map((item) => {
              return new Date(item).toISOString().substr(0, 10)
            })
            this.$emit('input', valJson)
          }
        },
        'close-dialog': (e) => {
          this.$emit('close-dialog', e)
        },
        refresh: () => {
          this.$emit('refresh')
        }
      },
      hideDetails: this.hideDetails,
      label: this.label,
      comportamientos: this.comportamientos,
      error: this.error,
      comportamientosPositions: this.usedPosition
        ? this.usedPosition.filter((x) => x !== 'append')
        : this.usedPosition,
      clearable: this.clearable
    })
  }
}
</script>