JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.js"></script>
<table>
  <thead>
    <tr>
      <th colspan="3">
        <input id="btAdicionar" type="button" value="Adicionar" />
      </th>
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Nascimento</th>
      <th>Logradouro</th>
      <th>Cidade</th>
      <th>Estado</th>
      <th>CEP</th>
      <th>Pais</th>
      <th>Telefone</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

<template id="tmplLinha">
  <tr>
    <td>
      <input name="id" type="hidden" />
      <input name="btSalvar" type="button" value="Salvar" />
    </td>
    <td>
      <input name="btApagar" type="button" value="Apagar" />      
    </td>
    <td>
      <input name="btRandom" type="button" value="Random" />      
    </td>
    <td><input name="firstName" type="text" /></td>
    <td><input name="lastName" type="text" /></td>
    <td><input name="dateOfBirth" type="date" /></td>
    <td><input name="streetAddress" type="text" /></td>
    <td><input name="city" type="text" /></td>
    <td><input name="stateAbbr" type="text" /></td>
    <td><input name="zipCode" type="text" /></td>
    <td><input name="country" type="text" /></td>
    <td><input name="phoneNumber" type="text" /></td>
    <td><input name="email" type="text" /></td>
  </tr>
</template>

JavaScript

faker.locale = "pt_BR";
var DBContext = function (onDatabaseReady) {
  var self = this;
  this.database = null;

  var request = indexedDB.open("BancoDados");
  request.onerror = function(event) {

  };	

  request.onsuccess = function(event) {
    self.database = event.target.result;
    self.Pessoas = new DataSet(self.database, "Pessoas", "id");

    if (self.onReady) {
      self.onReady();
    }
  };

  request.onupgradeneeded = function(event) { 
    self.database = event.target.result;

    var pessoa = self.database.createObjectStore("Pessoas", { keyPath: "id", autoIncrement: true });
    pessoa.createIndex("firstName", "firstName", { unique: false });
    pessoa.createIndex("lastName", "lastName", { unique: false });
    pessoa.createIndex("dateOfBirth", "dateOfBirth", { unique: false });
    pessoa.createIndex("streetAddress", "streetAddress", { unique: false });
    pessoa.createIndex("city", "city", { unique: false });
    pessoa.createIndex("stateAbbr", "stateAbbr", { unique: false });
    pessoa.createIndex("zipCode", "zipCode", { unique: false });
    pessoa.createIndex("country", "country", { unique: false });
    pessoa.createIndex("phoneNumber", "phoneNumber", { unique: false });
    pessoa.createIndex("email", "email", { unique: false });
  };
};

var DataSet = function (database, entityName, entityID) {
  this.entityName = entityName;
  this.entityID = entityID;
  this.database = database;
};

DataSet.prototype.create = function (entity, onSuccess) {
  var transaction = this.database.transaction([this.entityName], "readwrite");
  var objectStore = transaction.objectStore(this.entityName);  
  var request = objectStore.add(entity);

  request.onsuccess = function(event) {
    onSuccess(request.result);
  };

  request.onerror = function (event) {
    console.log(event)
  };
}

DataSet.prototype.update = function (entity, onSuccess) {
  var transaction = this.database.transaction([this.entityName], "readwrite");
  var objectStore =...