modalForm

Utilizando en un Componente

Componente ModalForm

El componente ModalForm es una solución reutilizable para mostrar un formulario en un modal. Este componente está diseñado para manejar tanto la creación como la actualización de datos. Proporciona opciones de configuración para personalizar el comportamiento y la apariencia del modal y el formulario.

<template>
  <div>
    <!-- Otros componentes y contenido aquí -->

    <!-- Usar ModalForm para crear o editar elementos -->
    <ModalForm
      :inputs="formInputs"
      :urlStore="urlStore"
      :urlUpdate="urlUpdate"
      :urlShow="urlShow"
      :isEditMode="isEditMode"
      :visible="visible"
      :resetAfterClose="true"
      :showRequestConfiguration="showRequestConfiguration"
      :storeRequestConfiguration="storeRequestConfiguration"
      :updateRequestConfiguration="updateRequestConfiguration"
      :updateDefaultParams="updateDefaultParams"
      @beforeUpdate="handleBeforeUpdate"
      @afterUpdate="handleAfterUpdate"
      @beforeStore="handleBeforeStore"
      @afterStore="handleAfterStore"
      @close="handleCloseModal"
    />

    <!-- Otros componentes y contenido aquí -->
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue';

// Refs o reactives para las props
const formInputs = ref([
  {
    key: "nombre",
    type: "text",
    placeholder: "Nombre",
    title: "Nombre",
    value: null,
    cols: 6,
    validations: {
      rules: {
        required: true,
      },
    },
  },
  {
    key: "contacto_id",
    type: "select",
    placeholder: "Contacto",
    title: "Contacto",
    label: 'nombre_completo',
    value: null,
    cols: 6,
    options: contactos,
    formatValue: (data:any) => {
      return data?.id
    },
    validations: {
      rules: {
        required: true,
      },
    },
  },
  {
    key: "domicilio_id",
    type: "select",
    placeholder: "Domicilio",
    title: "Domicilio",
    label: 'calleNumero',
    value: null,
    state: null,
    cols: 6,
    options: domicilios,
    formatValue: (data:any) => {
      return data?.id
    },
    validations: {
      rules: {
        required: true,
      },
    },
  },
]);

const urlStore = 'www.api.com/store';
const urlUpdate = 'www.api.com/update';
const urlShow = 'www.api.com/show';
const isEditMode = false;
const visible = false;
const resetAfterClose = true;
const showRequestConfiguration = {
  method: "GET",
  headers: {
    Authorization: 'Bearer SDKFK234KKAFDSKAN2332040afasdfimSDFN203MK',
  },
};
const storeRequestConfiguration = {
  method: "POST",
  headers: {
    Authorization: 'Bearer SDKFK234KKAFDSKAN2332040afasdfimSDFN203MK',
    Accept: "application/json",
    "Content-type": "application/json; charset=UTF-8",
  },
};
const updateRequestConfiguration = {
  method: "PATCH",
  headers: {
    Authorization: 'Bearer SDKFK234KKAFDSKAN2332040afasdfimSDFN203MK',
    Accept: "application/json",
    "Content-type": "application/json; charset=UTF-8",
  },
};
const updateDefaultParams = { _method: "PATCH" };

</script>

Propiedades

El componente ModalForm acepta las siguientes propiedades:

Propiedad	Tipo	Valor por defecto	Descripción
inputs	Array de Inputs	Requerido	Configuraciones de los campos de entrada para generar los elementos del formulario.
urlStore	String	Requerido	URL para almacenar (crear) nuevos elementos.
urlUpdate	String	Requerido	URL para actualizar elementos existentes.
urlShow	String	Opcional	URL para recuperar datos de un elemento existente antes de actualizarlo (modo edición).
isEditMode	Boolean	Requerido	Indica si el modal está en modo de edición (actualización) o creación.
visible	Boolean	Requerido	Controla la visibilidad del modal.
resetAfterClose	Boolean	Requerido	Indica si se deben restablecer los valores y errores del formulario después de cerrar el modal.
showRequestConfiguration	Object	Opcional	Configuración adicional para solicitudes de visualización (GET) en urlShow.
storeRequestConfiguration	Object	Opcional	Configuración adicional para solicitudes de almacenamiento (POST) en urlStore.
updateRequestConfiguration	Object	Opcional	Configuración adicional para solicitudes de actualización (PATCH) en urlUpdate.
updateDefaultParams	Object	Opcional	Parámetros adicionales que se envían junto con los datos de actualización.
modelStore	String	'data'	Nombre de la propiedad en la respuesta del servidor para el nuevo elemento creado.
modelUpdate	String	'data'	Nombre de la propiedad en la respuesta del servidor para el elemento actualizado.
acceptButtonConfig	Object	Opcional	Configuración personalizada para el botón de aceptar en el formulario.
cancelButtonConfig	Object	Opcional	Configuración personalizada para el botón de cancelar en el formulario.

Eventos Emitidos

El componente ModalForm emite los siguientes eventos:

Evento	Parámetros	Descripción
afterStore	value: any	Emitido después de almacenar (crear) un elemento.
beforeStore	value: any	Emitido antes de almacenar (crear) un elemento.
beforeUpdate	value: any	Emitido antes de actualizar un elemento.
afterUpdate	value: any	Emitido después de actualizar un elemento.
close	value: boolean	Emitido al cerrar el modal.

Métodos

El componente ModalForm expone los siguientes métodos:

Método	Descripción
hideModal()	Oculta el modal y realiza acciones de reinicio si es necesario.
handleOnSubmit(data)	Maneja el envío del formulario y llama a las funciones save o update.
save(data)	Envia una solicitud para almacenar un nuevo elemento.
update(data)	Envia una solicitud para actualizar un elemento existente.
getEntity()	Obtiene los datos de un elemento existente para el modo de edición.
completeEntity(data)	Completa los valores del formulario con los datos obtenidos de getEntity.
resetForm()	Restablece los valores del formulario y los errores a sus estados iniciales.