Mantenedor autogenerado

Este componente es uno de los mas complejos dentro de DNA. Básicamente te permite tener con un solo componente todo un mantenedor que permita crear, listar, editar, eliminar, ver y descargar alguna entidad persistida en la base de datos. Ademas de usar guardian para perfilar esas acciones.

A partir de un esquema se puede usar este componente de la siguiente manera:

Template

<template>
  <div>
    <mantainer-crud
      entity-name="usuario"
      entity-key="users"
      :scheme="scheme"
      :exportable="true"
    />
  </div>
</template>

Script

<script>
import MantainerCrud from '~/components/dna/mantainer'

export default {
  meta: {
    guardian: {
      scope: 'users',
      action: 'list',
    },
  },
  components: {
    MantainerCrud,
  },
  async asyncData({ store }) {
    const response = await store.dispatch('roles/table', {
      page: 1,
      size: 100,
    })

    return {
      roles: response.data.map((r) => {
        return {
          value: r.id,
          text: r.description,
        }
      }),
    }
  },
  computed: {
    scheme() {
      return [
        {
          key: 'id',
          label: 'ID',
          variant: 'dark',
          onCreate: false,
          onEdit: false,
        },
        {
          key: 'name',
          label: 'Nombre',
          sortable: true,
          transform: (val) => `${val.firstName} ${val.lastName}`,
        },
        {
          key: 'email',
          label: 'Email',
          sortable: false,
        },
        {
          key: 'role',
          label: 'Rol',
          inputType: 'select',
          options: this.roles,
          sortable: true,
          transform: (val) => `${val.role.label}`,
        },
      ]
    },
  },
}
</script>

Ejemplo scheme

[
  {
    key: "id",
    label: "ID",
    variant: "dark",
    onCreate: false,
    onEdit: false,
  },
  {
    key: "name",
    label: "Nombre",
    sortable: true,
    transform: (val) => `${val.firstName} ${val.lastName}`,
  },
  {
    key: "email",
    label: "Email",
    sortable: false,
  },
  {
    key: "role",
    label: "Rol",
    inputType: "select",
    options: this.roles,
    sortable: true,
    transform: (val) => `${val.role.label}`,
  },
  ...
];