CRUD AlpineJS - add AlpineJS - edit AlpineJS - update AlpineJS - delete AlpineJS

README.md

Adicionar

Adicionar um registro com AlpineJS

atualize a lista de itens com spread operator

saveData() {
  if (!this.contato.nome) {
    this.required = true
    return
  }

  const addModal = tailwind.Modal.getOrCreateInstance(document.querySelector("#addModal"));

  fetch(this.urlPost, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      data: this.contato
    }),
  })
    .then(response => response.json())
    .then((data) => {
      addModal.hide()
      this.contatos = [ ...this.contatos, data.data]
      this.contato = {
        nome: '',
        telefone: '',
        email: '',
        site: '',
      }
    })
}

Deletar

Para deletar um registro com AlpineJS, precisa:

• Abrir um modal de confirmação com os atributos

data-tw-toggle="modal"
data-tw-target="#deleteModal"

• Passar para o modal o nome do item e o id

@click="nome=contato.nome; id=contato.id"

• No modal

<div id="deleteModal">
  <span x-text="nome"></span>
  <button
    type="button"
    class="btn btn-danger w-24"
    @click="deleteItem(id)"
  >
    Deletar
  </button>
</div>

• E no JS

deleteItem(id) {
  const deleteModal = tailwind.Modal.getOrCreateInstance(document.querySelector("#deleteModal"));

  fetch(`/api/contato/${id}/delete/`, {
    method: "DELETE"
  })
    .then(response => response.json())
    .then(data => {
      deleteModal.hide()
      this.contatos = this.contatos.filter(contato => contato.id !== id);
    })
}

main.js

const getContatos = (slug) => ({
  urlGet: `/crm/api/${slug}/contato/empresa/`,
  urlCreate: `/crm/api/${slug}/contato/empresa/create/`,
  required: false,
  contatos: [],
  editarContato: {
    nome: '',
    telefone: '',
    email: '',
    site: '',
  },
  isEdit: false,
  nome: '',
  init() {
    fetch(this.urlGet)
      .then((response) => response.json())
      .then((data) => (this.contatos = data.data));
  },
  resetModal() {
    this.editarContato = {
      nome: '',
      telefone: '',
      email: '',
      site: '',
    }
    this.isEdit = false
  },
  getItem(item) {
    this.editarContato = { ...item }
    this.isEdit = true
  },
  saveData() {
    if (!this.editarContato.nome) {
      this.required = true
      return
    }

    const myModal = tailwind.Modal.getOrCreateInstance(document.querySelector("#myModal"));

    if (!this.editarContato.id) {
      // Adiciona
      fetch(this.urlCreate, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          data: this.editarContato
        }),
      })
        .then(response => response.json())
        .then((data) => {
          this.contatos = [ ...this.contatos, data.data]
        })
    } else {
      // Edita
      const id = this.editarContato.id
      fetch(`/crm/api/contato/empresa/${id}/update/`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          data: this.editarContato
        }),
      })
        .then(response => response.json())
        .then((data) => {
          const contatos = [ ...this.contatos ]
          const index = contatos.findIndex(p => p.id == data.data.id)
          contatos[index] = data.data
          this.contatos = contatos
        })
    }

    myModal.hide()
    this.resetModal()
  },
  deleteItem(id) {
    const deleteModal = tailwind.Modal.getOrCreateInstance(document.querySelector("#deleteModal"));

    fetch(`/crm/api/contato/empresa/${id}/delete/`, {
      method: "DELETE"
    })
      .then(response => response.json())
      .then(data => {
        deleteModal.hide()
        this.contatos = this.contatos.filter(contato => contato.id !== id);
      })
  }
})