Nuxt module for CRUD Basic

wnCrud for basic CRUD

wnCrud is a tool to facilitate the creation of administrative panels that are often repetitive and tiresome to make.

To use wnCrud you must have a standard Restful api with the verbs

  • GET ‘/’ – all items
  • GET ‘/:id’ – one item
  • POST ‘/’ – create item
  • PUT ‘/:id’ – update item
  • DELETE ‘/:id’ – delete item

Install

npm install webnetworkbrasil/nuxt-wn-crud

Nuxt config

modules: [
  'nuxt-wn-crud'
],

wnCrud: {
  baseApi: "https://example.com", //our base api
   colors: {
     text: "#222",
     buttons: {
       ok: { text: "#fff", background: "green" },
       error: { text: "#fff", background: "red" },
       view: { text: "#fff", background: "blue" },
       alert: { text: "#222", background: "orange" },
     },
  },
},

Change default texts (optional)

wnCrud: {
    ...
    texts: {
      "Are you sure about this?": "Você tem certeza disso?",
      "Do you want to close without saving changes?": "Deseja fechar sem salvar as alterações?",
      "Cancel": "Cancelar",
      "Yes, close": "Sim, fechar",
      "OK!": "OK!",
      "Record saved successfully!": "Registro salvo com sucesso!",
      "Oops...": "Oops...",
      "Error!": "Erro!",
      "Contact the developer!": "Contate o desenvolvedor!",
      "You won't be able to revert this!": "Você não poderá reverter isso!",
      "Deleted!": "Deletado!",
      "The record has been successfully deleted.": "O registro foi apagado com sucesso.",
      "Yes, delete it!": "Sim, apague!"
    }
}

Basic usage

Template

<template>
<WnCrud :config="wn">
      <template v-slot:headerDefault>Gerenciar categorias</template> <!-- title modal -->
      <template v-slot:default> <!-- content modal -->
        <div>
            <label>Exemple</label>
            <input v-model="wn.form.exemple" type="text" />
            <div>{{wn.formError.exemple}}</div>
        </div>
      </template> <!-- end content modal -->
    </WnCrud>
</template>

Script

<script>
//object that will be used in requests and form fields, where default values ​​can be defined. 
let form = {
  id: 0,
  example: ""
};
export default {
  data(){
    return {
      wn: {
        title: "Manage exemples",
        description: "Manage all registered exemples",
        route: "/api/exemples", //restful pattern base path
        form: Object.assign({}, form),
        formClear: Object.assign({}, form),
        formError: Object.assign({}, ...Array.from(Object.keys(form), (k) => ({[k]: ""}))),
        list: {
          header: ["#ID", "Exemple"], //configure columns names
          columnsPropriety: ['id', 'exemple'], //configure columns keys values
        }
      }
    }
  }
}
</script>

Available slots for modal configuration

Header modal

<template>
    <WnCrud :config="wn">
      <template v-slot:headerDefault>Exemple title</template> <!-- title modal -->
      <!-- OR -->
      <template v-slot:headerCreate>Exemple title create</template> <!-- title modal create -->
      <template v-slot:headerEdit>Exemple title update</template> <!-- title modal update -->
      <template v-slot:headerView>Exemple title view</template> <!-- title modal view -->
    </WnCrud>
</template>

Body modal

<template>
    <WnCrud :config="wn">
       ...
      <template v-slot:default>
          <div>Exemple content</div>
      </template>
      <!-- OR -->
      <template v-slot:create>
        <div>Exemple content create</div>
      </template>
      <template v-slot:edit>
        <div>Exemple content edit</div>
      </template>
      <template v-slot:view>
        <div>Exemple content view</div>
      </template
    </WnCrud>
</template>

Footer modal (optional)

<template>
    <WnCrud :config="wn">
      <template v-slot:footerDefault>Custom footer</template>
      <!-- OR -->
      <template v-slot:footerCreate>Custom footer create</template>
      <template v-slot:footerEdit>Custom footer edit</template>
      <template v-slot:footerView>Custom footer view</template>
    </WnCrud>
</template>

All configurations

<script>
//object that will be used in requests and form fields, where default values ​​can be defined. 
let form = {
  id: 0,
  icon: "",
  name: "",
  description: "",
  categoryIds: new Array(),
  image: null,
};
export default {
  data(){
    return {
      wn: {
        title: "Manage categories",
        description: "Manage all registered categories",
        route: "/api/categories", //restful pattern base path
        formID: 'id', //optional default "id"
        form: Object.assign({}, form),
        formClear: Object.assign({}, form),
        formError: Object.assign({}, ...Array.from(Object.keys(form), (k) => ({[k]: ""}))),
        convertToJson: true, //optional default formData
        create: {
          modal: {
            size: 'md', //lg, sm, md, full //optional default "md"
            askToClose: true, //optional default false
          },
          texts: {
            create: "Criar nova categoria", //optional default "Create new"
            close: "Fechar", //optional default "Close"
            save: "Salvar" //optional default "Save"
          },
          buttons: {
            create: true, //optional default true
            save: true, //optional default true
            close: true, //optional default true
          },
        },
        delete: {
          headerDetails: ["title", (value) => `Deletar "${value}"?`], //optional default "Delete?"
        },
        list: {
          header: ["#ID", "Icon", "Name", "Description"],
          columnsPropriety: ['id', ['icon', (value) => `<img style="display:block;border-radius:5px;" height="40px" src="${value}" />`], ['name', (value) => `<b style="color:green">${value}</b>`], 'description'],
          perPage: 10, //optional default 10
          search: true, //optional default true
          texts: {
            search: "Faça uma busca na lista", //optional default "Search the list"
            empty: "Não tem nada aqui", //optional default "There's nothing here"
            actions: "Ações", //optional default "Actions"
            delete: "Excluir", //optional default "Delete"
            view: "Ver", //optional default "View"
            edit: "Editar" //optional default "Edit"
          },
          buttons: {
            delete: true, //optional default true
            edit: true, //optional default true
            view: true, //optional default false
          },
        }
      }
    }
  }
}
</script>

GitHub

View Github