abm

Funcionalidades

• Listar registros
• Paginar registros
• Filtrar registros
• Crear registros
• Actualizar registros
• Eliminar registros

Le pasaremos un JSON al ABM para que realice estas funciones automaticamente sin tener que desarrollar tu mismo esta serie de componentes para tener un CRUD

Componentes que usa internamente

• Table
• Form
• Button

Le pasaremos un JSON al ABM para que realice estas funciones automaticamente sin tener que desarrollar tu mismo esta serie de componentes para tener un CRUD

Esta vista utiliza los componentes Abm, Table, ModalForm y Form para proporcionar una experiencia completa de administración de terminales.

<template>
  <Layout title="Terminales">
    <template #layout>
      <div class="container-fluid">
        <Abm
          :table="propTable"
          :modalForm="propModalForm"
          :urlDelete="routes.terminales.delete"
          :editIcon="propAbm.editIcon"
          :deleteIcon="propAbm.deleteIcon"
          :restoreIcon="propAbm.restoreIcon"
          :softDelete="propAbm.softDelete"
          :deleteRequestConfiguration="propAbm.deleteRequestConfiguration"
          @beforeUpdate="beforeUpdate"
          @afterUpdate="afterUpdate"
          @beforeStore="beforeStore"
          @afterStore="afterStore"
          @afterDelete="afterDelete"
        />
      </div>
    </template>
  </Layout>
</template>

<script setup>


const filterInputs = ref<Array<any>>([
  {
    key: "nombre",
    type: "text",
    placeholder: "Nombre",
    value: "",
    state: null,
    cols: 6,
  },
]);

const formInputs = ref<Array<any>>([
  {
    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 fields: any = ref([
  {
    key: "id",
    label: "##",
    sortable: true,
  },
  {
    key: "nombre",
    label: "nombre",
  },
  {
    key: "created_at",
    label: "Fecha",
    formatter: (item: string) => formatDateTime(item),
  },
  {
    key: "edit",
    label: "Editar",
  },
  {
    key: "delete",
    label: "Eliminar",
  },
]);

const propTable = reactive({
  fields: fields.value,
  inputs: filterInputs.value,
  url: routes.terminales.index,
  requestConfiguration: {
    method: "GET",
    headers: {
      Authorization: authorization(),
    },
  },
  searchIcon: `${baseApiUrl}/icons/search.svg`,
  searchable: true,
});

const beforeUpdate = (data: any) => {
  const { type } = data;
  if(type === 'formInvalid') {
    $toast?.error(data.message || 'Debes completar el formulario correctamente');
  }
}

const afterUpdate = (data: any) => {
    if(data.errors || data.error){
      $toast?.error(`${JSON.stringify(data.errors ?? data.error)}`);
    } else {
      let index = terminales.value.findIndex((value: any) => value.id === data.id);
      if (index > -1) {
        storeDataProvider.setProp({ key: "terminales", index, value: data });
      }
      $toast?.success(`Guardado correctamente`);
    }
}

const beforeStore = (data: any) => {
  const { type } = data;
  if(type === 'formInvalid') {
    $toast?.error(data.message || 'Debes completar el formulario correctamente');
  }
}

const afterStore =  (data: any) => {
  try {
    if(data.errors || data.error){
      $toast?.error(`${JSON.stringify(data.errors ?? data.error)}`)
    } else {
      if (Array.isArray(terminales.value)) {
        storeDataProvider.setProp({ key: "terminales", value: [...terminales.value, data] });
      }
      $toast?.success('creado correctamente')
    }
  } catch (error) {
    console.log(error)
  }
}

const afterDelete =  (data: any) => {
  if(data.errors || data.error){
    $toast?.error(`${JSON.stringify(data.errors ?? data.error)}`)
    } else {
      if (Array.isArray(terminales.value) && terminales.value.length > 0) {
        const deleted = terminales.value.filter((val:any) => val.id !== data.data.id);
        storeDataProvider.setProp({ key: "terminales", value: deleted });
      }
      $toast?.success('Eliminado correctamente')
    }
}

const propModalForm = reactive({
  inputs: formInputs.value,
  urlStore: routes.terminales.store,
  urlUpdate: routes.terminales.update,
  urlShow: routes.terminales.show,
  showRequestConfiguration: {
    method: "GET",
    headers: {
      Authorization: authorization(),
    },
  },
  updateRequestConfiguration: {
    method: "PATCH",
    headers: {
      Authorization: authorization(),
      Accept: "application/json",
      "Content-type": "application/json; charset=UTF-8",
    },
  },
  storeRequestConfiguration: {
    method: "POST",
    headers: {
      Authorization: authorization(),
      Accept: "application/json",
      "Content-type": "application/json; charset=UTF-8",
    },
  },
  updateDefaultParams: { _method: "PATCH" },
});

const propAbm = reactive({
  editIcon: `${baseApiUrl}/icons/editar.svg`,
  deleteIcon: `${baseApiUrl}/icons/basura.svg`,
  restoreIcon: `${baseApiUrl}/icons/restaurar.svg`,
  softDelete: true,
  deleteRequestConfiguration: {
    method: "DELETE",
    headers: {
      Authorization: authorization(),
    },
  },
});

</script>

Propiedades y Configuraciones

Propiedad/Configuración	Tipo	Descripción
table	TableProps	Propiedades para el componente Table.
modalForm	ModalFormProps	Propiedades para el componente ModalForm.
urlRestore	String	URL para restaurar elementos eliminados.
urlDelete	String	URL para eliminar elementos.
deleteRequestConfiguration	requestConfigurationEntity	Configuración para las solicitudes de eliminación.
softDelete	Boolean	Habilita la eliminación suave (soft delete).
editIcon	String	Ruta del ícono de edición.
deleteIcon	String	Ruta del ícono de eliminación.
restoreIcon	String	Ruta del ícono de restauración.
storeButtonConfig	ButtonProps	Configuración para el botón de almacenamiento.
activeButtonConfig	ButtonProps	Configuración para el botón de activos.
inactiveButtonConfig	ButtonProps	Configuración para el botón de inactivos.
searchButtonConfig	ButtonProps	Configuración para el botón de búsqueda.
resetButtonConfig	ButtonProps	Configuración para el botón de reinicio de filtros.
acceptSaveButtonConfig	ButtonProps	Configuración para el botón de aceptar (guardar).
cancelSaveButtonConfig	ButtonProps	Configuración para el botón de cancelar (guardar).
acceptDeleteButtonConfig	ButtonProps	Configuración para el botón de aceptar (eliminar).
cancelDeleteButtonConfig	ButtonProps	Configuración para el botón de cancelar (eliminar).

Eventos

Evento	Descripción
beforeUpdate	Se ejecuta antes de realizar una actualización.
afterUpdate	Se ejecuta después de una actualización.
beforeStore	Se ejecuta antes de realizar un almacenamiento.
afterStore	Se ejecuta después de un almacenamiento.
afterDelete	Se ejecuta después de una eliminación.